@eturnity/eturnity_reusable_components 9.19.4 → 9.19.6

package/src/components/pageSubtitle/index.vue

@@ -1,7 +1,7 @@
 <template>
   <SubtitleText
-    data-test-id="page_wrapper"
     :color="color"
+    data-test-id="page_wrapper"
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >

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',
   },
 }
 

package/src/components/projectMarker/ProjectMarker.stories.js

@@ -9,7 +9,7 @@ export default {
     markerData: {
       control: 'object',
       description:
-        'Object containing marker data including translations and color',
+        'Object containing marker data including translations, color, and choice (sold/lost/transferred)',
     },
     activeLanguage: {
       control: 'text',
@@ -19,9 +19,18 @@ export default {
       control: 'text',
       description: 'Optional date to display next to the marker',
     },
+    cursor: {
+      control: 'text',
+      description: 'Cursor style for the marker',
+    },
+    theme: {
+      control: false,
+      description: 'Optional theme object for sold/lost icon colors',
+    },
     isEditable: {
       control: 'boolean',
-      description: 'Whether the marker can be edited',
+      description:
+        'Whether the marker can be edited/deleted (shows three-dots menu)',
     },
     isGroupSupport: {
       control: 'boolean',
@@ -31,14 +40,6 @@ export default {
       control: 'boolean',
       description: 'Whether the user is a limited partner',
     },
-    cursor: {
-      control: 'text',
-      description: 'Cursor style for the marker',
-    },
-    hasBorderRadius: {
-      control: 'boolean',
-      description: 'Whether to show border radius',
-    },
   },
 }
 
@@ -48,9 +49,6 @@ const Template = (args) => ({
     return { args }
   },
   template: '<ProjectMarker v-bind="args" />',
-  provide: {
-    theme,
-  },
 })
 
 export const Default = Template.bind({})
@@ -65,11 +63,11 @@ Default.args = {
   },
   activeLanguage: 'en-us',
   date: '23.07.2022',
+  cursor: 'pointer',
+  theme,
   isEditable: true,
   isGroupSupport: false,
   isLimitedPartner: false,
-  cursor: 'pointer',
-  hasBorderRadius: true,
 }
 
 export const Lost = Template.bind({})
@@ -81,8 +79,8 @@ Lost.args = {
       'en-us': { name: 'Lost' },
     },
     color: '#F44336',
-    can_be_deleted: true,
   },
+  theme,
 }
 
 export const Transferred = Template.bind({})
@@ -94,7 +92,6 @@ Transferred.args = {
       'en-us': { name: 'Transferred' },
     },
     color: '#2196F3',
-    can_be_deleted: true,
   },
 }
 
@@ -104,27 +101,20 @@ WithoutDate.args = {
   date: null,
 }
 
-export const NotEditable = Template.bind({})
-NotEditable.args = {
-  ...Default.args,
-  isEditable: false,
-}
-
-export const LimitedPartner = Template.bind({})
-LimitedPartner.args = {
-  ...Default.args,
-  isLimitedPartner: true,
-}
-
-export const WithGroupSupport = Template.bind({})
-WithGroupSupport.args = {
+export const CustomColor = Template.bind({})
+CustomColor.args = {
   ...Default.args,
-  isGroupSupport: true,
-  isLimitedPartner: true,
+  markerData: {
+    choice: null,
+    translations: {
+      'en-us': { name: 'In progress' },
+    },
+    color: '#9C27B0',
+  },
 }
 
-export const WithoutBorderRadius = Template.bind({})
-WithoutBorderRadius.args = {
+export const NotEditable = Template.bind({})
+NotEditable.args = {
   ...Default.args,
-  hasBorderRadius: false,
+  isEditable: false,
 }