@eturnity/eturnity_reusable_components 9.19.5 → 9.19.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.19.5",
+  "version": "9.19.6",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/external_link.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 9.2998V3.7002C0 3.14839 -8.9407e-07 2.70429 0.0292969 2.3457C0.0590662 1.98136 0.121634 1.66133 0.272461 1.36523C0.512144 0.894829 0.894829 0.512144 1.36523 0.272461C1.66133 0.121634 1.98136 0.0590662 2.3457 0.0292969C2.70429 -8.9407e-07 3.14839 0 3.7002 0H5.16699C5.44299 0.00017567 5.66699 0.223966 5.66699 0.5C5.66699 0.776034 5.44299 0.999824 5.16699 1H3.7002C3.13189 1 2.73518 1.00019 2.42676 1.02539C2.12471 1.05009 1.95091 1.09613 1.81934 1.16309C1.53709 1.3069 1.3069 1.53709 1.16309 1.81934C1.09613 1.95091 1.05009 2.12471 1.02539 2.42676C1.00019 2.73518 1 3.13189 1 3.7002V9.2998C1 9.86811 1.00019 10.2648 1.02539 10.5732C1.05009 10.8753 1.09613 11.0491 1.16309 11.1807C1.3069 11.4629 1.53709 11.6931 1.81934 11.8369C1.95091 11.9039 2.12471 11.9499 2.42676 11.9746C2.73518 11.9998 3.13189 12 3.7002 12H9.2998C9.86811 12 10.2648 11.9998 10.5732 11.9746C10.8753 11.9499 11.0491 11.9039 11.1807 11.8369C11.4629 11.6931 11.6931 11.4629 11.8369 11.1807C11.9039 11.0491 11.9499 10.8753 11.9746 10.5732C11.9998 10.2648 12 9.86811 12 9.2998V7.83301C12.0002 7.55701 12.224 7.33301 12.5 7.33301C12.776 7.33301 12.9998 7.55701 13 7.83301V9.2998C13 9.85161 13 10.2957 12.9707 10.6543C12.9409 11.0186 12.8784 11.3387 12.7275 11.6348C12.4879 12.1052 12.1052 12.4879 11.6348 12.7275C11.3387 12.8784 11.0186 12.9409 10.6543 12.9707C10.2957 13 9.85161 13 9.2998 13H3.7002C3.14839 13 2.70429 13 2.3457 12.9707C1.98136 12.9409 1.66133 12.8784 1.36523 12.7275C0.89483 12.4879 0.512145 12.1052 0.272461 11.6348C0.121634 11.3387 0.0590662 11.0186 0.0292969 10.6543C-8.9407e-07 10.2957 0 9.85161 0 9.2998ZM13 4.5C13 4.77614 12.7761 4.99999 12.5 5C12.2239 5 12 4.77614 12 4.5V1.70703L6.85352 6.85352C6.65825 7.04878 6.34175 7.04878 6.14648 6.85352C5.95122 6.65825 5.95122 6.34175 6.14648 6.14648L11.293 1H8.5C8.22386 1 8 0.776142 8 0.5C8 0.223861 8.22386 0 8.5 0H12.5C12.7761 8.7615e-06 13 0.223866 13 0.5V4.5Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/mail.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1025 0.00488281C13.6067 0.0562146 14 0.482323 14 1V9L13.9951 9.10254C13.9472 9.57297 13.573 9.94722 13.1025 9.99512L13 10H1C0.482323 10 0.0562145 9.60667 0.00488281 9.10254L0 9V1C1.28852e-07 0.447715 0.447715 2.41596e-08 1 0H13L13.1025 0.00488281ZM7.85352 5.0166C7.33985 5.37221 6.66015 5.37222 6.14648 5.0166L1 1.45312V9H13V1.45312L7.85352 5.0166ZM6.71582 4.19531C6.88681 4.31338 7.11319 4.31338 7.28418 4.19531L11.8994 1H2.10059L6.71582 4.19531Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/portal.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 0C13.5523 0 14 0.447715 14 1V11C14 11.5523 13.5523 12 13 12H1C0.447715 12 0 11.5523 0 11V1C0 0.447715 0.447715 0 1 0H13ZM1 11H13V3H1V11ZM5.14648 4.64648C5.34175 4.45122 5.65825 4.45122 5.85352 4.64648C6.04878 4.84175 6.04878 5.15825 5.85352 5.35352L4.20703 7L5.85352 8.64648C6.04878 8.84175 6.04878 9.15825 5.85352 9.35352C5.65825 9.54878 5.34175 9.54878 5.14648 9.35352L3.2168 7.42383C2.98301 7.18962 2.98301 6.81039 3.2168 6.57617L5.14648 4.64648ZM8.14648 4.64648C8.34175 4.45122 8.65825 4.45122 8.85352 4.64648L10.7832 6.57617C11.017 6.81039 11.017 7.18962 10.7832 7.42383L8.85352 9.35352C8.65825 9.54878 8.34175 9.54878 8.14648 9.35352C7.95122 9.15825 7.95122 8.84175 8.14648 8.64648L9.79297 7L8.14648 5.35352C7.95122 5.15825 7.95122 4.84175 8.14648 4.64648ZM1 2H13V1H1V2Z" fill="#263238"/>
+</svg>

package/src/components/card/index.vue

@@ -1,9 +1,12 @@
 <template>
   <Wrapper
     v-show="!isLoading"
+    :border="border"
+    :box-shadow="boxShadow"
     :class="viewCardClass"
     data-test-id="card_main_wrapper"
     :min-width="minWidth"
+    :padding="padding"
     :width="width"
   >
     <Spinner
@@ -13,7 +16,11 @@
       size="50px"
     />
     <CardWrapper v-else>
-      <CardTitle :class="titleClass" data-test-id="card_title">
+      <CardTitle
+        v-if="title && title.length > 0"
+        :class="titleClass"
+        data-test-id="card_title"
+      >
         {{ $gettext(title) }}
         <InfoText
           v-if="showPopover && popoverText !== ''"
@@ -44,16 +51,24 @@
   import Spinner from '../spinner'
   import InfoText from '../infoText'
 
-  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+  const WrapperProps = {
+    width: [Number, String],
+    minWidth: [Number, String],
+    boxShadow: String,
+    border: String,
+    padding: String,
+  }
   const Wrapper = styled('div', WrapperProps)`
     max-width: ${(props) => props.width};
     min-width: ${(props) => props.minWidth};
-    padding: 20px;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    padding: ${(props) => props.padding};
+    box-shadow: ${(props) =>
+      props.boxShadow ||
+      '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)'};
     border-radius: 4px;
     background-color: ${(props) => props.theme.colors.white};
     height: 100%;
+    ${(props) => props.border && `border: ${props.border};`}
   `
 
   const CardWrapper = styled('div')`
@@ -113,6 +128,21 @@
         type: Boolean,
         default: false,
       },
+      boxShadow: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      border: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      padding: {
+        type: String,
+        required: false,
+        default: '20px',
+      },
     },
   }
 </script>

package/src/components/infoCard/index.vue

@@ -2,15 +2,20 @@
   <InfoContainer
     :align-items="alignItems"
     :border-color="borderColor"
+    :border-radius="borderRadius"
     :border-style="borderStyle"
     :color="color"
     data-test-id="info_card_wrapper"
+    :hide-default-icon="hideDefaultIcon"
     :min-height="minHeight"
     :min-width="minWidth"
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <IconWrapper :size="iconWrapperSize ? iconWrapperSize : iconSize">
+    <IconWrapper
+      v-if="!hideDefaultIcon"
+      :size="iconWrapperSize ? iconWrapperSize : iconSize"
+    >
       <RCIcon
         :color="iconColor ? iconColor : presetStyles.iconColor"
         data-test-id="info_card_icon"
@@ -19,7 +24,10 @@
         :size="iconSize"
       />
     </IconWrapper>
-    <TextContainer data-test-id="info_card_text_container">
+    <TextContainer
+      data-test-id="info_card_text_container"
+      :hide-default-icon="hideDefaultIcon"
+    >
       <slot></slot>
     </TextContainer>
   </InfoContainer>
@@ -35,11 +43,13 @@
     minWidth: String,
     color: String,
     alignItems: String,
+    hideDefaultIcon: Boolean,
     padding: String,
     borderColor: String,
     borderStyle: String,
     presetStyles: Object,
   }
+
   const InfoContainer = styled('div', infoContainerAttrs)`
     display: flex;
     align-items: ${(props) =>
@@ -50,7 +60,7 @@
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
     color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
-    border-radius: 4px;
+    border-radius: ${(props) => props.borderRadius};
     background-color: ${(props) =>
       props.backgroundColor
         ? props.backgroundColor
@@ -62,9 +72,14 @@
       props.borderColor ? props.borderColor : props.presetStyles.borderColor};
   `
 
-  const TextContainer = styled.div`
+  const TextContainer = styled('div', {
+    hideDefaultIcon: Boolean,
+  })`
     font-size: 14px;
+    flex: ${(props) => (props.hideDefaultIcon ? '1' : '0 1 auto')};
     width: 100%;
+    max-width: none;
+    min-width: 0;
   `
 
   const IconWrapper = styled('div', {
@@ -75,6 +90,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
   `
 
   export default {
@@ -121,6 +137,11 @@
         type: String,
         default: '',
       },
+      /** When true, the leading icon is omitted and the slot spans the full row width. */
+      hideDefaultIcon: {
+        type: Boolean,
+        default: false,
+      },
       padding: {
         required: false,
         type: String,
@@ -136,6 +157,11 @@
         type: String,
         default: '',
       },
+      borderRadius: {
+        required: false,
+        type: String,
+        default: '4px',
+      },
       iconName: {
         required: false,
         type: String,

package/src/components/progressStep/index.vue

@@ -2,9 +2,11 @@
   <ProgressionStepContainer :number-of-steps="progressionSteps.length">
     <template v-for="(step, stepIndex) in progressionSteps" :key="step.index">
       <ProgressionStepItem>
-        <BoxContainer
+        <MarkerContainer
+          :disable-click="disableClick"
           :is-active="stepIndex == currentStepIndex"
           :is-valid="stepIndex < currentStepIndex"
+          :shape="markerShape"
           @click="
             stepIndex < currentStepIndex ? $emit('on-step-click', step) : null
           "
@@ -14,7 +16,7 @@
             :color="theme.semanticColors.purple[500]"
             :hovered-color="theme.semanticColors.purple[500]"
             name="checkmark_thin"
-            size="16px"
+            :size="markerShape === 'circle' ? '10px' : '16px'"
           />
           <NumberContainer
             v-else
@@ -23,13 +25,32 @@
           >
             {{ step.number }}
           </NumberContainer>
-        </BoxContainer>
-        <StepLabel>{{ step.label }}</StepLabel>
+        </MarkerContainer>
+        <StepLabel>
+          <StyledText
+            :font-color="
+              stepIndex === currentStepIndex
+                ? theme.semanticColors.grey[900]
+                : theme.semanticColors.grey[800]
+            "
+            :type="labelTextType"
+          >
+            {{ step.label }}
+          </StyledText>
+        </StepLabel>
       </ProgressionStepItem>
       <StepIntermediateLine
-        v-if="stepIndex < progressionSteps.length - 1"
-        :is-valid="stepIndex < currentStepIndex"
+        v-if="
+          separatorType === 'line' && stepIndex < progressionSteps.length - 1
+        "
       />
+      <IconContainer
+        v-if="
+          separatorType === 'arrow' && stepIndex < progressionSteps.length - 1
+        "
+      >
+        <RcIcon :color="theme.colors.black" name="next" size="16px" />
+      </IconContainer>
     </template>
   </ProgressionStepContainer>
 </template>
@@ -40,10 +61,12 @@
   //  <ProgressionSteps
   //         :current-step="ProgressionStep"
   //         :progression-steps="ProgressionSteps" [{label,value,number}]
+  //         marker-shape="box" | "circle"
   //         @on-step-click="onStepClick"
   // />
   import styled from 'vue3-styled-components'
   import RcIcon from '../icon'
+  import StyledText from '../styledText'
   import theme from '@/assets/theme.js'
 
   const StyledComponents = {
@@ -61,37 +84,52 @@
       flex-direction: row;
       align-items: center;
     `,
-    BoxContainer: styled('div', {
+    MarkerContainer: styled('div', {
+      disableClick: Boolean,
       isActive: Boolean,
       isValid: Boolean,
+      shape: String,
     })`
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 32px;
-      height: 32px;
-      font-size: 16px;
-      background-color: ${({ theme, isValid, isActive }) =>
+      flex-shrink: 0;
+      box-sizing: border-box;
+      width: ${({ shape }) => (shape === 'circle' ? '16px' : '32px')};
+      height: ${({ shape }) => (shape === 'circle' ? '16px' : '32px')};
+      min-width: ${({ shape }) => (shape === 'circle' ? '16px' : '32px')};
+      min-height: ${({ shape }) => (shape === 'circle' ? '16px' : '32px')};
+      aspect-ratio: ${({ shape }) => (shape === 'circle' ? '1' : 'auto')};
+      font-size: ${({ shape }) => (shape === 'circle' ? '10px' : '16px')};
+      background-color: ${({ theme, isValid, isActive, shape }) =>
         isActive
           ? theme.semanticColors.purple[500]
           : isValid
           ? theme.semanticColors.purple[200]
+          : shape === 'circle'
+          ? theme.semanticColors.grey[50]
           : theme.semanticColors.grey[200]};
-      color: ${({ theme, isValid, isActive }) =>
+      color: ${({ theme, isActive }) =>
         isActive ? theme.colors.white : theme.semanticColors.grey[800]};
       margin: 0 10px;
-      border-radius: 5px;
-      cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
+      border-radius: ${({ shape }) => (shape === 'circle' ? '50%' : '5px')};
+      cursor: ${({ isValid, disableClick }) =>
+        isValid && !disableClick ? 'pointer' : 'default'};
       &:hover {
-        ${({ theme, isValid, isActive }) =>
-          isValid
+        ${({ theme, isValid, disableClick }) =>
+          isValid && !disableClick
             ? 'background-color:' + theme.semanticColors.purple[100] + ';'
             : ''}
       }
+
+      ${({ shape, isActive, isValid }) =>
+        shape === 'circle' &&
+        !isActive &&
+        !isValid &&
+        `border: 1px solid ${theme.semanticColors.grey[400]};`}
     `,
-    StepIntermediateLine: styled('div', { isValid: Boolean })`
+    StepIntermediateLine: styled.div`
       height: 2px;
-      margin: 0 10px;
       background-color: ${({ theme }) => theme.semanticColors.grey[400]};
     `,
     StepLabel: styled.div`
@@ -99,12 +137,16 @@
       margin: 0 10px;
     `,
     NumberContainer: styled.div``,
+    IconContainer: styled.div`
+      margin: 0 16px;
+    `,
   }
   export default {
     name: 'ProgressionSteps',
     components: {
       ...StyledComponents,
       RcIcon,
+      StyledText,
     },
     props: {
       progressionSteps: {
@@ -115,7 +157,29 @@
         type: String,
         required: true,
       },
+      labelTextType: {
+        type: String,
+        required: false,
+        default: 'subheading-large',
+      },
+      separatorType: {
+        type: String,
+        required: false,
+        default: 'line',
+      },
+      markerShape: {
+        type: String,
+        required: false,
+        default: 'box',
+        validator: (value) => ['box', 'circle'].includes(value),
+      },
+      disableClick: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
+    emits: ['on-step-click'],
     data() {
       return {
         theme,

package/src/components/progressStep/progressStep.stories.js

@@ -39,6 +39,14 @@ export const Default = {
   args: {
     'current-step': 'step1',
     'progression-steps': PROGRESSION_STEP_LIST,
+    'marker-shape': 'box',
+  },
+}
+
+export const CircleIndicators = {
+  args: {
+    ...Default.args,
+    'marker-shape': 'circle',
   },
 }