@energysage/es-ds-components 3.2.0 → 3.2.2

package/components/es-button.vue

@@ -80,14 +80,15 @@ const getRootClasses = computed(() => {
     const btnSize = props.size ? `btn-${props.size}` : 'btn-md';
     return `btn ${btnVariant} ${btnInline} ${btnSize}`;
 });
+
+/*
+    <a> is needed for href because a root-relative link like /market/start/
+    that is passed to <nuxt-link :to="" /> will attempt to internally navigate
+    within a micro frontend, which will result in a 404
+*/
 </script>
 
 <template>
-    <!--
-        <a> is needed for href because a root-relative link like /market/start/
-        that is passed to <nuxt-link :to="" /> will attempt to internally navigate
-        within a micro frontend, which will result in a 404
-    -->
     <a
         v-if="props.href"
         :class="getRootClasses"

package/components/es-modal.vue

@@ -30,7 +30,14 @@ const modalPt = {
         class: 'modal-title',
     },
     closeButton: {
-        class: 'close',
+        class: [
+            'close',
+            {
+                // if closable is true, keep the close button around (for accessibility, and to
+                // allow Escape to still close the modal), but hide it visually
+                'sr-only': !props.closable,
+            },
+        ],
     },
     content: {
         class: `modal-body ${props.bodyClass}`,
@@ -72,7 +79,6 @@ const getSizeClass = computed(() => {
         modal
         :class="getSizeClass"
         :pt="modalPt"
-        :closable="closable"
         dismissable-mask
         @update:visible="onChange">
         <template

package/components/es-progress.vue

@@ -3,9 +3,7 @@ import ProgressBar from 'primevue/progressbar';
 
 const BASE_FONT_SIZE = 16;
 const DEFAULT_BAR_HEIGHT = 2;
-const DEFAULT_BORDER_WIDTH = 0.5;
 const DEFAULT_CIRCLE_GLOW_SIZE = 4;
-const DEFAULT_INSET_SHADOW_SIZE = 0.5;
 const DIFF_CIRCLE_SIZE_FROM_BAR_HEIGHT_IN_PX = 4;
 const DEFAULT_CIRCLE_DIMENSION = DEFAULT_BAR_HEIGHT + DIFF_CIRCLE_SIZE_FROM_BAR_HEIGHT_IN_PX;
 
@@ -57,15 +55,9 @@ const circleDimension = computed(
 
 const circleDimensionPx = computed(() => `${circleDimension.value}px`);
 const circleRightPx = computed(() => `${circleDimension.value * -0.5}px`);
-const circleBorderWidthPx = computed(
-    () => `${(DEFAULT_BORDER_WIDTH * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
-);
 const circleGlowSizePx = computed(
     () => `${(DEFAULT_CIRCLE_GLOW_SIZE * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
 );
-const circleInsetShadowSizePx = computed(
-    () => `${(DEFAULT_INSET_SHADOW_SIZE * circleDimension.value) / DEFAULT_CIRCLE_DIMENSION}px`,
-);
 
 const verticalContainerPaddingPx = computed(() =>
     props.showCircle ? `${(circleDimension.value - barHeight.value) / 2}px` : '0',
@@ -100,10 +92,18 @@ const verticalContainerPaddingPx = computed(() =>
     padding-top: v-bind(verticalContainerPaddingPx);
 
     :deep(.progress-bar--with-circle::after) {
-        border: v-bind(circleBorderWidthPx) solid variables.$warm-orange;
-        box-shadow:
-            0 0 v-bind(circleInsetShadowSizePx) v-bind(circleInsetShadowSizePx) variables.$warm-orange inset,
-            0 0 v-bind(circleGlowSizePx) 0 variables.$warm-orange;
+        /*
+         * using v-bind for this border width gets disappeared during npm run generate,
+         * so we need to hardcode it, and the radial background gradient makes it look
+         * good enough at larger sizes
+         */
+        border: 0.5px solid variables.$warm-orange;
+        /*
+         * do not mix both an inset box shadow (has been converted to radial background gradient)
+         * with a non-inset box shadow while using v-bind, or you will get unexpected results
+         * after npm run generate
+         */
+        box-shadow: 0 0 v-bind(circleGlowSizePx) variables.$warm-orange;
         height: v-bind(circleDimensionPx);
         right: v-bind(circleRightPx);
         width: v-bind(circleDimensionPx);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.2.0",
+    "version": "3.2.2",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.2.0",
+        "@energysage/es-ds-styles": "^3.2.1",
         "@nuxt/eslint": "^1.0.1",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",