diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c482077c..bfa06a07f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -426,7 +426,7 @@ the new `showPrivacySection` prop - Truncated display name - Emit the file name as payload for emitted events - Added a `humanReadable` field to the `mime-type-finder` utils to support better error handling -- The internal `DsResponsiveTable` component used to generate slots and props documentation on the `Typography`,`EsCard`, `EsFileInput`, `EsFileThumbnail`, and `EsSupportCard` pages now has the ability to customize its column widths to match the layout grid in the same manner as `` by taking breakpoint props for `md` and up +- The internal `DsResponsiveTable` component used to generate slots and props documentation on the `Typography`,`EsCard`, `EsFileInput`, `EsFileThumbnail`, and `EsSupportCard` pages now has the ability to customize its column widths to match the layout grid in the same manner as `` by taking breakpoint props for `md` and up ## [0.23.2] - 2023-07-13 diff --git a/es-ds-components/components/b-col.vue b/es-ds-components/components/es-col.vue similarity index 100% rename from es-ds-components/components/b-col.vue rename to es-ds-components/components/es-col.vue diff --git a/es-ds-components/components/b-container.vue b/es-ds-components/components/es-container.vue similarity index 100% rename from es-ds-components/components/b-container.vue rename to es-ds-components/components/es-container.vue diff --git a/es-ds-components/components/es-error-page.vue b/es-ds-components/components/es-error-page.vue index b14b7167a..a724fb295 100644 --- a/es-ds-components/components/es-error-page.vue +++ b/es-ds-components/components/es-error-page.vue @@ -77,9 +77,9 @@ const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.lo diff --git a/es-ds-components/components/es-nav-bar-product-menu.vue b/es-ds-components/components/es-nav-bar-product-menu.vue index 69959c661..087ab9a9f 100644 --- a/es-ds-components/components/es-nav-bar-product-menu.vue +++ b/es-ds-components/components/es-nav-bar-product-menu.vue @@ -180,7 +180,7 @@ export default {
- - + diff --git a/es-ds-components/components/es-nav-bar-top-level-menu.vue b/es-ds-components/components/es-nav-bar-top-level-menu.vue index a8888d4ec..f5426994a 100644 --- a/es-ds-components/components/es-nav-bar-top-level-menu.vue +++ b/es-ds-components/components/es-nav-bar-top-level-menu.vue @@ -124,8 +124,8 @@ export default {
- - + +
- - + +
diff --git a/es-ds-components/components/es-nav-bar.vue b/es-ds-components/components/es-nav-bar.vue index 2412ba7ce..0b6a9c9a2 100644 --- a/es-ds-components/components/es-nav-bar.vue +++ b/es-ds-components/components/es-nav-bar.vue @@ -246,7 +246,8 @@ export default {
- + @@ -280,9 +281,9 @@ export default { :auth-items="accountContent.loggedIn.items" class="d-none d-lg-block pt-100" :logged-out="accountContent.loggedOut" /> - + - +
- +
@@ -372,7 +373,7 @@ export default { diff --git a/es-ds-components/components/b-row.vue b/es-ds-components/components/es-row.vue similarity index 100% rename from es-ds-components/components/b-row.vue rename to es-ds-components/components/es-row.vue diff --git a/es-ds-components/components/b-spinner.vue b/es-ds-components/components/es-spinner.vue similarity index 100% rename from es-ds-components/components/b-spinner.vue rename to es-ds-components/components/es-spinner.vue diff --git a/es-ds-components/components/es-support-card.vue b/es-ds-components/components/es-support-card.vue index 9a9b86593..d197bafd8 100644 --- a/es-ds-components/components/es-support-card.vue +++ b/es-ds-components/components/es-support-card.vue @@ -50,8 +50,8 @@ const showSecondaryCta = computed(() => { 'px-md-100 py-md-200': constrained, 'px-md-300': !constrained, }"> - - + { }"> - - + @@ -116,8 +116,8 @@ const showSecondaryCta = computed(() => { variant="primary"> {{ secondaryCtaText }} - - + + diff --git a/es-ds-docs/layouts/default.vue b/es-ds-docs/layouts/default.vue index 7a8e4b6eb..252f8636f 100644 --- a/es-ds-docs/layouts/default.vue +++ b/es-ds-docs/layouts/default.vue @@ -25,24 +25,24 @@ const breadcrumbs = computed(() => { diff --git a/es-ds-docs/layouts/footer.vue b/es-ds-docs/layouts/footer.vue index e62bfa834..dcae1d3dd 100644 --- a/es-ds-docs/layouts/footer.vue +++ b/es-ds-docs/layouts/footer.vue @@ -28,25 +28,25 @@ const breadcrumbs = computed(() => { diff --git a/es-ds-docs/layouts/nav.vue b/es-ds-docs/layouts/nav.vue index 097e5596b..5bfe5a2e2 100644 --- a/es-ds-docs/layouts/nav.vue +++ b/es-ds-docs/layouts/nav.vue @@ -37,25 +37,25 @@ const breadcrumbs = computed(() => {
- - - + +
- - + +
- - - + + +
diff --git a/es-ds-docs/pages/atoms/color.vue b/es-ds-docs/pages/atoms/color.vue index 351b36486..f9ab109ac 100644 --- a/es-ds-docs/pages/atoms/color.vue +++ b/es-ds-docs/pages/atoms/color.vue @@ -117,8 +117,8 @@ onMounted(async () => {

Core colors

- - + {

{{ coreColorNames[alias] || alias }}

- - + +

Primary

- - + { :hex="value" :show-border="['blue-50', 'blue-100'].includes(alias)" :token="alias" /> - - + +

Secondary

- - + { :hex="value" :show-border="['orange-50', 'orange-100'].includes(alias)" :token="alias" /> - - + +

Neutrals

- - + { :hex="value" :show-border="['gray-50', 'gray-100'].includes(alias)" :token="alias" /> - - + +

Feedback

- - + +

Success

- - + { :hex="value" :show-border="['success-50'].includes(alias)" :token="alias" /> - - - + + + - +

Warning

- - + { :hex="value" :show-border="['warning-50'].includes(alias)" :token="alias" /> - - - + + + - +

Error

- - + { :hex="value" :show-border="['error-50'].includes(alias)" :token="alias" /> - - - - + + + +

Restricted colors

Use only for charts and data.

- - + {

{{ chartColorNames[alias] || alias }}

- - + +
@@ -320,8 +320,8 @@ onMounted(async () => {

Brand Colors

- - + {

{{ brandColorNames[alias] || alias }}

- - + +

Primary Tints

- - + { :hex="value" :show-border="['cyan-100'].includes(alias)" :token="alias" /> - - - - + + + { :is-light="['gray-500'].includes(alias)" :hex="value" :token="alias" /> - - + +

Secondary Tints

- - + { :hex="value" :show-border="['pink-100'].includes(alias)" :token="alias" /> - - - - + + + { :hex="value" :show-border="['teal-100'].includes(alias)" :token="alias" /> - - - - + + + { :hex="value" :show-border="['yellow-100'].includes(alias)" :token="alias" /> - - - - + + + { :hex="value" :show-border="['orange-100'].includes(alias)" :token="alias" /> - - + +

Primary Shades

- - + { - - - - + + + { - - + +

Secondary Shades

- - + { :hex="value" :is-light="true" :token="alias" /> - - - - + + + { - - - - + + + { :hex="value" :is-light="true" :token="alias" /> - - + +

Grayscale

- - + { " :show-border="['white', 'gray-100', 'gray-150'].includes(alias)" :token="alias" /> - - + +
@@ -565,8 +565,8 @@ onMounted(async () => { Primary and secondary are the most commonly-used variants. The others may be deprecated for certain components; see the component documentation for details.

- - + { :hex="value" :is-light="['danger', 'info', 'light', 'success', 'warning'].includes(alias)" :token="alias" /> - - + +
diff --git a/es-ds-docs/pages/atoms/corners.vue b/es-ds-docs/pages/atoms/corners.vue index b27a4fdd9..43c3c2967 100644 --- a/es-ds-docs/pages/atoms/corners.vue +++ b/es-ds-docs/pages/atoms/corners.vue @@ -74,8 +74,8 @@ onMounted(async () => { add the desired corner radius to your UI elements.

- - + { - - + + { if ($prism) { // eslint-disable-next-line import/no-self-import const docSource = await import('./layout.vue?raw'); docCode.value = $prism.normalizeCode(docSource.default); + + const esContainerCodeSource = await import('@energysage/es-ds-components/components/es-container.vue?raw'); + esContainerCode.value = $prism.normalizeCode(esContainerCodeSource.default); + + const esColCodeSource = await import('@energysage/es-ds-components/components/es-col.vue?raw'); + esColCode.value = $prism.normalizeCode(esColCodeSource.default); + + const esRowCodeSource = await import('@energysage/es-ds-components/components/es-row.vue?raw'); + esRowCode.value = $prism.normalizeCode(esRowCodeSource.default); + $prism.highlight(); } }); @@ -56,6 +80,8 @@ onMounted(async () => { target="_blank"> Bootstrap Vue layout + but only supporting a sub-set of APIs for b-row, b-col, and + b-container

Responsive breakpoints

At each breakpoint above extra small (xs), the content is constrained to the max width listed below.

@@ -85,220 +111,248 @@ onMounted(async () => {

Grid overview

- - - + + 12 Columns - - - - + + + 11 Columns - - + 1 - - - - + + + 10 Columns - - + 2 Columns - - - - + + + 9 Columns - - + 3 Columns - - - - + + + 8 Columns - - + 4 Columns - - - - + + + 7 Columns - - + 5 Columns - - - - + + + 6 Columns - - + 6 Columns - - - - + + + 4 Columns - - + 4 Columns - - + 4 Columns - - - - + + + 3 Columns - - + 3 Columns - - + 3 Columns - - + 3 Columns - - - - + + + 2 Columns - - + 2 Columns - - + 2 Columns - - + 2 Columns - - + 2 Columns - - + 2 Columns - - - - + + + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - + 1 - - - + + + + +
+

EsContainer

+

Only input is a slot

+
+ +
+

EsRow

+

Only input is a slot

+
+ +
+

EsCol

+ +
+ + + + diff --git a/es-ds-docs/pages/atoms/typography.vue b/es-ds-docs/pages/atoms/typography.vue index 21a746b2b..7e4c110af 100644 --- a/es-ds-docs/pages/atoms/typography.vue +++ b/es-ds-docs/pages/atoms/typography.vue @@ -473,8 +473,8 @@ onMounted(async () => { - - + +

Font weight

These utility classes will apply the associated font weight to text.

@@ -509,11 +509,11 @@ onMounted(async () => { - - + + - - + +

Font size

These utility classes will apply the associated font size to text. Responsive versions for each @@ -552,8 +552,8 @@ onMounted(async () => { - - + + { - - + +

Font size (deprecated)

{ - - + + { diff --git a/es-ds-docs/pages/examples/form-validation.vue b/es-ds-docs/pages/examples/form-validation.vue index 733ec6fb9..c803a557f 100644 --- a/es-ds-docs/pages/examples/form-validation.vue +++ b/es-ds-docs/pages/examples/form-validation.vue @@ -43,9 +43,9 @@ onMounted(async () => { diff --git a/es-ds-docs/pages/molecules/button.vue b/es-ds-docs/pages/molecules/button.vue index c2200cdd5..8ab9fc858 100644 --- a/es-ds-docs/pages/molecules/button.vue +++ b/es-ds-docs/pages/molecules/button.vue @@ -487,14 +487,14 @@ onMounted(async () => {
- Default button - @@ -505,14 +505,14 @@ onMounted(async () => { class="mr-100 position-relative" size="sm"> - Small button - diff --git a/es-ds-docs/pages/molecules/form-textarea.vue b/es-ds-docs/pages/molecules/form-textarea.vue index 40d3137ab..c7638b6a6 100644 --- a/es-ds-docs/pages/molecules/form-textarea.vue +++ b/es-ds-docs/pages/molecules/form-textarea.vue @@ -44,8 +44,8 @@ const propTableRows = [

- - +

Basic example

@@ -54,11 +54,11 @@ const propTableRows = [ v-model="docTextarea"> - - + + - - +

Required

@@ -68,11 +68,11 @@ const propTableRows = [ required> - - + + - - +

Error state

@@ -84,11 +84,11 @@ const propTableRows = [ - - + + - - +

Success state

@@ -100,11 +100,11 @@ const propTableRows = [ - - + + - - +

Success state with message

@@ -118,11 +118,11 @@ const propTableRows = [ - - + + - - +

Disabled state

@@ -132,11 +132,11 @@ const propTableRows = [ disabled> - - + + - - +

Context message

@@ -149,8 +149,8 @@ const propTableRows = [ - - + +

EsFormTextarea props

diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue index f21384640..48d12cd87 100644 --- a/es-ds-docs/pages/molecules/radio-cards.vue +++ b/es-ds-docs/pages/molecules/radio-cards.vue @@ -169,8 +169,8 @@ const propTableRowsRadioCards = [ id="idCustomCardStyling" label="What’s the main reason you want a battery?" has-icon> - - + - - + +

@@ -215,8 +215,8 @@ const propTableRowsRadioCards = [

- - + - - + - - + +

Selection: diff --git a/es-ds-docs/pages/molecules/tabs.vue b/es-ds-docs/pages/molecules/tabs.vue index 1bf999f68..4aa815599 100644 --- a/es-ds-docs/pages/molecules/tabs.vue +++ b/es-ds-docs/pages/molecules/tabs.vue @@ -82,8 +82,8 @@ onMounted(async () => { Select tab three

- - + {

Content three

 - - +
{ class="bg-gray-300 p-200 rounded-lg text-center"> Content associated with tab 3
- - + +

Basic example

- - + @@ -80,14 +80,14 @@ const propTableRows = [ v-model="form.firstName"> - - + +

Required

- - + @@ -97,14 +97,14 @@ const propTableRows = [ required> - - + +

Error state

- - + @@ -115,14 +115,14 @@ const propTableRows = [ - - + +

Success state

- - + @@ -133,14 +133,14 @@ const propTableRows = [ - - + +

Success state with message

- - + @@ -152,14 +152,14 @@ const propTableRows = [ - - + +

Disabled state

- - + @@ -170,14 +170,14 @@ const propTableRows = [ - - + +

Placeholder

- - + @@ -187,8 +187,8 @@ const propTableRows = [ placeholder="(999) 999-9999"> - - + +
@@ -197,8 +197,8 @@ const propTableRows = [ This example uses an input mask to only allow entry of characters that match the format "(999) 999-9999".

- - + @@ -209,8 +209,8 @@ const propTableRows = [ placeholder="(999) 999-9999"> - - + +
@@ -220,8 +220,8 @@ const propTableRows = [ input label and use the placeholder text to label the input. Below is an example of how to accomplish this.

- - + ZIP code Submit - - + +

Prefix icon

- - + @@ -264,14 +264,14 @@ const propTableRows = [ - - + +

Context message above the field

- - + @@ -282,14 +282,14 @@ const propTableRows = [ - - + +

Context message below the field

- - + @@ -300,8 +300,8 @@ const propTableRows = [ - - + +
diff --git a/es-ds-docs/pages/organisms/cta-card.vue b/es-ds-docs/pages/organisms/cta-card.vue index a5bee46c0..94d5631ca 100644 --- a/es-ds-docs/pages/organisms/cta-card.vue +++ b/es-ds-docs/pages/organisms/cta-card.vue @@ -42,8 +42,8 @@ onMounted(async () => { - - + +

Image first with button

- - + { - - + +

Image first with link

- - + { - - + +

No image with zip code form

- - + { - - + +
diff --git a/es-ds-docs/pages/organisms/support-card.vue b/es-ds-docs/pages/organisms/support-card.vue index 58a8042e3..bf37fd523 100644 --- a/es-ds-docs/pages/organisms/support-card.vue +++ b/es-ds-docs/pages/organisms/support-card.vue @@ -124,8 +124,8 @@ onMounted(async () => { The constrained prop is set to demonstrate a limited-width container. There are no differences on mobile viewports from the default example.

- - + @@ -151,8 +151,8 @@ onMounted(async () => { No annoying sales pitches, and no spam calls. - - + +

EsSupportCard props

diff --git a/es-ds-docs/pages/organisms/zip-code-form.vue b/es-ds-docs/pages/organisms/zip-code-form.vue index 3998954c4..13976f607 100644 --- a/es-ds-docs/pages/organisms/zip-code-form.vue +++ b/es-ds-docs/pages/organisms/zip-code-form.vue @@ -97,8 +97,8 @@ const slotTableRows = [ stackUntil prop is set to lg so the input and button begin displaying side-by-side at that breakpoint.

- - + @@ -109,8 +109,8 @@ const slotTableRows = [ url="https://www.energysage.com/market/start/"> - - + +
@@ -121,8 +121,8 @@ const slotTableRows = [ pre-determined zip code needs to be set, which users can subsequently modify. If the user does not alter the zip code, it will default to the initial value provided.

- - + @@ -134,8 +134,8 @@ const slotTableRows = [ url="https://www.energysage.com/market/start/"> - - + +
@@ -145,8 +145,8 @@ const slotTableRows = [ dark prop is set to true.

- - + @@ -158,8 +158,8 @@ const slotTableRows = [ url="https://www.energysage.com/market/start/"> - - + +
@@ -171,8 +171,8 @@ const slotTableRows = [ in order to make better use of the limited space. This reduces the horizontal padding on the submit button and reduces the size of the privacy text.

- - + - - + +
@@ -197,8 +197,8 @@ const slotTableRows = [ This form has stackUntil set to xs so it is always side-by-side. It also has the privacy section disabled by setting showPrivacySection to false.

- - + @@ -210,8 +210,8 @@ const slotTableRows = [ url="https://www.energysage.com/market/start/"> - - + +
@@ -220,8 +220,8 @@ const slotTableRows = [ This example remains stacked at every breakpoint, in a limited-width container. This shows how the form would display within a card on the sidebar of a page.

- - + - - + +
@@ -244,8 +244,8 @@ const slotTableRows = [ This example shows how to specify a product parameter that will be passed along when the form is submitted.

- - + @@ -257,8 +257,8 @@ const slotTableRows = [ selected-product="heatpump"> - - + +
diff --git a/es-ds-styles/scss/vue/components/_radio-cards.scss b/es-ds-styles/scss/vue/components/_radio-cards.scss index 47e43dfa3..0cbaf7dd2 100644 --- a/es-ds-styles/scss/vue/components/_radio-cards.scss +++ b/es-ds-styles/scss/vue/components/_radio-cards.scss @@ -162,7 +162,7 @@ $inner-circle-translate-y-from-top-desktop: $inner-circle-translate-x-from-left- /** * hide the radio button input elements the same way bootstrap vue does. * bootstrap vue's styles only work on items directly nested under b-form-radio-group, and we want - * to enable users to put any elements (e.g. and ) between the EsFormRadioCards and + * to enable users to put any elements (e.g. and ) between the EsFormRadioCards and * EsFormRadioCard elements. */ clip: rect(0, 0, 0, 0);