@eturnity/eturnity_reusable_components 7.51.16-EPDM-9631.0 → 7.51.16-qa-04-deploy.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-9631.0",
+  "version": "7.51.16-qa-04-deploy.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/solarmarkt.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.947 24.9C4.1 24.9 1.308 23.24.1 19.773c-.141-.389-.148-.542.1-.649l3.457-1.791c.218-.11.292-.1.393.177a4.731 4.731 0 0 0 4.8 3.039c2.459-.044 4.162-.874 4.162-2.5 0-1.448-1.574-3.046-4.849-3.42-.259-.027-.577-.06-.858-.1C3.8 13.986.871 11.979.737 7.921c-.151-4.6 2.4-7.81 8.708-7.81 4.735 0 7.455 2.236 8.582 5.194.142.378-.038.532-.251.6l-3.955 1.623c-.249.106-.348.029-.416-.147-.544-1.418-1.642-3.339-4.2-3.224-2.6.121-3.633 1.159-3.862 2.706-.316 2.128 1.568 3.117 5.1 3.527.318.035.711.106 1.175.176 4.558.636 6.967 3.083 6.967 6.768 0 5.446-4.047 7.564-9.637 7.564" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -12,6 +12,7 @@ const theme = {
     white: '#ffffff',
     blue: '#48a2d0',
     red: '#ff5656',
+    pureRed: '#ff0000',
     blue1: '#e4efff',
     brightBlue: '#0068DE',
     grey1: '#666',

package/src/components/infoCard/InfoCard.stories.js

@@ -16,7 +16,18 @@ export default {
       description: '',
     },
     color: {
-      description: 'Color of text and icon (can overwrite preset styles)',
+      description: 'Color of the text (can overwrite preset styles)',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+    iconColor: {
+      description: 'Color of the icon (can overwrite preset styles)',
       control: {
         type: 'color',
         presetColors: [
@@ -97,6 +108,12 @@ InfoCardTypeWarning.args = {
   type: 'warning',
 }
 
+export const InfoCardTypeErrorMinor = Template.bind({})
+InfoCardTypeErrorMinor.args = {
+  ...defaultInfoCardProps,
+  type: 'error_minor',
+}
+
 export const InfoCardTypeInfoMinWidth = Template.bind({})
 InfoCardTypeInfoMinWidth.args = {
   ...defaultInfoCardProps,
@@ -108,7 +125,14 @@ export const InfoCardTypeInfoColorOverwritten = Template.bind({})
 InfoCardTypeInfoColorOverwritten.args = {
   ...defaultInfoCardProps,
 
-  color: theme.colors.red,
+  color: theme.colors.green,
+}
+
+export const InfoCardTypeInfoIconColorOverwritten = Template.bind({})
+InfoCardTypeInfoIconColorOverwritten.args = {
+  ...defaultInfoCardProps,
+
+  iconColor: theme.colors.green,
 }
 
 export const InfoCardTypeWarningAlignItemsOverwritten = Template.bind({})
@@ -129,16 +153,18 @@ InfoCardTypeWarningPaddingOverwritten.args = {
   padding: '50px',
 }
 
-export const InfoCardTypeInfoBorderColorOverwritten = Template.bind({})
-InfoCardTypeInfoBorderColorOverwritten.args = {
+export const InfoCardTypeErrorMinorBorderColorOverwritten = Template.bind({})
+InfoCardTypeErrorMinorBorderColorOverwritten.args = {
   ...defaultInfoCardProps,
+  type: 'error_minor',
 
-  borderColor: theme.colors.red,
+  borderColor: theme.colors.green,
 }
 
-export const InfoCardTypeInfoBorderStyleOverwritten = Template.bind({})
-InfoCardTypeInfoBorderStyleOverwritten.args = {
+export const InfoCardTypeErrorMinorBorderStyleOverwritten = Template.bind({})
+InfoCardTypeErrorMinorBorderStyleOverwritten.args = {
   ...defaultInfoCardProps,
+  type: 'error_minor',
 
   borderStyle: 'solid none',
 }

package/src/components/infoCard/index.vue

@@ -10,7 +10,7 @@
     :preset-styles="presetStyles"
   >
     <RCIcon
-      :color="color ? color : presetStyles.iconColor"
+      :color="iconColor ? iconColor : presetStyles.iconColor"
       data-test-id="info_card_icon"
       name="info"
       size="24px"
@@ -79,6 +79,11 @@
         type: String,
         default: '',
       },
+      iconColor: {
+        required: false,
+        type: String,
+        default: '',
+      },
       color: {
         required: false,
         type: String,
@@ -113,6 +118,9 @@
       isWarning() {
         return this.type === 'warning'
       },
+      isErrorMinor() {
+        return this.type === 'error_minor'
+      },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
         // to avoid flickering in case the same info card would switch the types
@@ -128,6 +136,10 @@
           stylesCollection.color = theme.colors.white
           stylesCollection.backgroundColor = theme.colors.yellow
           stylesCollection.iconColor = theme.colors.white
+        } else if (this.isErrorMinor) {
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.pureRed
+          stylesCollection.iconColor = theme.colors.pureRed
         } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4

package/src/components/infoCard/infoCard.spec.js

@@ -47,10 +47,18 @@ describe('RCInfoCard.vue', () => {
 
       expect(wrapper.vm.isInfo).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
+      expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
       expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
+      expect(wrapper.vm.isErrorMinor).toBe(false)
+
+      await wrapper.setProps({ type: 'error_minor' })
+
+      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isWarning).toBe(false)
+      expect(wrapper.vm.isErrorMinor).toBe(true)
     })
 })

package/src/components/sideMenu/index.vue

@@ -254,9 +254,6 @@
         activeDropdown: null,
       }
     },
-    mounted() {
-      this.activeDropdown = this.activeParentTab
-    },
     methods: {
       toggleActiveDropdown(value) {
         if (this.activeDropdown === value) {
@@ -266,5 +263,17 @@
         }
       },
     },
+    watch: {
+      activeTab: {
+        // once active tab is received, check if any parent
+        // tab is active and if so open according dropdown
+        handler() {
+          if (this.activeParentTab) {
+            this.activeDropdown = this.activeParentTab
+          }
+        },
+        once: true,
+      },
+    },
   }
 </script>