@eturnity/eturnity_reusable_components 8.26.3 → 8.26.4--EPDM-15979.0

package/src/components/progressStep/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <ProgressionStepContainer :number-of-steps="progressionSteps.length">
+    <template v-for="(step, stepIndex) in progressionSteps" :key="step.index">
+      <ProgressionStepItem>
+        <BoxContainer
+          :is-active="stepIndex == currentStepIndex"
+          :is-valid="stepIndex < currentStepIndex"
+          @click="
+            stepIndex < currentStepIndex ? $emit('on-step-click', step) : null
+          "
+        >
+          <RcIcon
+            v-if="stepIndex < currentStepIndex"
+            color="white"
+            hovered-color="white"
+            name="all_good"
+            :size="'20px'"
+          />
+          <NumberContainer
+            v-else
+            :is-active="stepIndex === currentStepIndex"
+            :is-valid="stepIndex < currentStepIndex"
+          >
+            {{ step.number }}
+          </NumberContainer>
+        </BoxContainer>
+        <StepLabel>{{ step.label }}</StepLabel>
+      </ProgressionStepItem>
+      <StepIntermediateLine
+        v-if="stepIndex < progressionSteps.length - 1"
+        :is-valid="stepIndex < currentStepIndex"
+      />
+    </template>
+  </ProgressionStepContainer>
+</template>
+
+<script>
+  // import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
+  //To use:
+  //  <ProgressionSteps
+  //         :current-step="ProgressionStep"
+  //         :progression-steps="ProgressionSteps" [{label,value,number}]
+  //         @on-step-click="onStepClick"
+  // />
+  import styled from 'vue3-styled-components'
+  import RcIcon from '../icon'
+
+  const StyledComponents = {
+    ProgressionStepContainer: styled('div', { numberOfSteps: Number })`
+      display: grid;
+      grid-template-columns:
+        repeat(${({ numberOfSteps }) => numberOfSteps - 1}, auto 1fr)
+        auto;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    `,
+    ProgressionStepItem: styled.div`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    `,
+    BoxContainer: styled('div', {
+      isActive: Boolean,
+      isValid: Boolean,
+    })`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+      background-color: ${({ theme, isValid, isActive }) =>
+        isActive
+          ? theme.semanticColors.purple[500]
+          : isValid
+          ? theme.semanticColors.purple[200]
+          : theme.semanticColors.purple[100]};
+      color: ${({ theme, isValid, isActive }) =>
+        isActive ? theme.colors.white : theme.semanticColors.teal[800]};
+      margin: 0 10px;
+      border-radius: 5px;
+      cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
+      &:hover {
+        ${({ theme, isValid, isActive }) =>
+          isValid
+            ? 'background-color:' + theme.semanticColors.purple[100] + ';'
+            : ''}
+      }
+    `,
+    StepIntermediateLine: styled('div', { isValid: Boolean })`
+      height: 2px;
+      margin: 0 10px;
+      background-color: ${({ theme, isValid }) =>
+        isValid
+          ? theme.semanticColors.purple[500]
+          : theme.semanticColors.teal[200]};
+    `,
+    StepLabel: styled.div`
+      max-width: 220px;
+      margin: 0 10px;
+    `,
+    NumberContainer: styled.div``,
+  }
+  export default {
+    name: 'ProgressionSteps',
+    components: {
+      ...StyledComponents,
+      RcIcon,
+    },
+    props: {
+      progressionSteps: {
+        type: Array,
+        required: true,
+      },
+      currentStep: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      currentStepIndex() {
+        return this.progressionSteps.findIndex(
+          (step) => step.value === this.currentStep
+        )
+      },
+    },
+  }
+</script>

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

@@ -0,0 +1,58 @@
+import progressStep from './index.vue'
+
+export default {
+  title: 'progressStep',
+  component: progressStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import progressStep from "@eturnity/eturnity_reusable_components/src/components/progressStep"
+//To use:
+//  <ProgressionSteps
+//         :current-step="ProgressionStep"
+//         :progression-steps="ProgressionSteps" [{label,value,number}]
+//         @on-step-click="onStepClick"
+// />
+
+const PROGRESSION_STEP_LIST = [
+  {
+    label: 'progression step label 1',
+    value: 'step1',
+    number: 1,
+  },
+  {
+    label: 'progression step label 2',
+    value: 'step2',
+    number: 2,
+  },
+  {
+    label: 'progression step label 3',
+    value: 'step3',
+    number: 3,
+  },
+]
+
+export const Default = {
+  args: {
+    'current-step': 'step1',
+    'progression-steps': PROGRESSION_STEP_LIST,
+  },
+}
+
+export const Template = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { progressStep },
+    setup() {
+      return { args }
+    },
+    template: `
+      <progressStep v-bind="args"/>
+    `,
+  }),
+}

package/src/components/tag/conversionTag/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <RCButton
+    button-size="tiny"
+    icon="star"
+    icon-color="yellow"
+    :text="textToDisplay"
+    type="protag"
+    variant="main"
+  />
+</template>
+<script>
+  import RCButton from '../../buttons/mainButton'
+  export default {
+    name: 'ConversionTag',
+    components: {
+      RCButton,
+    },
+    props: {
+      text: {
+        type: String,
+        default: 'PRO',
+      },
+      isUpperCase: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      textToDisplay() {
+        if (this.isUpperCase) {
+          return this.text.toUpperCase()
+        }
+        return this.text
+      },
+    },
+  }
+</script>

package/src/components/tag/{proTag → freeTrialTag}/index.vue

@@ -2,18 +2,24 @@
   <RCButton
     button-size="tiny"
     icon="star"
-    icon-color="yellow"
-    text="PRO"
-    type="protag"
+    icon-color="blue"
+    :text="text || $gettext('free_trial')"
+    type="freeTrialTag"
     variant="main"
   />
 </template>
 <script>
   import RCButton from '../../buttons/mainButton'
   export default {
-    name: 'ProTag',
+    name: 'FreeTrialTag',
     components: {
       RCButton,
     },
+    props: {
+      text: {
+        type: String,
+        default: '',
+      },
+    },
   }
 </script>