@eturnity/eturnity_reusable_components 8.26.11-EPDM-11600.15 → 8.26.11-autiFill.0

package/src/components/barchart/styles/chart.js

@@ -16,9 +16,12 @@ export const GraphSection = styled('div', { width: String, height: String })`
   display: flex;
 `
 
-export const YAxis = styled('div', { width: String })`
+export const YAxis = styled('div', { width: String, height: String })`
   width: ${(props) => props.width};
+  display: flex;
+  flex-direction: column;
   position: relative;
+  height: ${(props) => props.height};
 `
 
 export const YAxisRow = styled('div', { percentage: Number })`
@@ -26,13 +29,10 @@ export const YAxisRow = styled('div', { percentage: Number })`
   align-items: center;
   width: 100%;
   position: absolute;
-  height: 1px;
+  height: 0;
   bottom: ${(props) =>
     Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  ${(props) =>
-    Number.isFinite(props.percentage) && props.percentage === 100
-      ? 'transform: translateY(1px)'
-      : ''};
+  transform: translateY(50%);
 `
 
 export const YAxisLabel = styled.div`
@@ -50,24 +50,25 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   right: -10px;
   left: calc(${(props) => props.yAxisWidth} - 10px);
   height: 1px;
-  background-color: ${(props) => props.theme.semanticColors.grey[400]};
+  background-color: rgba(0, 0, 0, 0.1);
   width: 12px;
   z-index: 0;
+  top: 50%;
+  transform: translateY(-50%);
 `
 
-export const YAxisTitleWrapper = styled('div')`
+export const YAxisTitleWrapper = styled('div', { height: String })`
+  position: absolute;
+  left: -66px;
+  top: ${(props) => props.height};
+  transform: rotate(-90deg) translateX(50%);
+  transform-origin: right;
   font-size: 12px;
-  font-weight: 500;
-  color: ${(props) => props.theme.semanticColors.grey[700]};
-  white-space: nowrap;
-  height: 0;
-  width: 0;
+  color: ${(props) => props.theme.semanticColors.teal[600]};
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  position: absolute;
-  top: 50%;
-  transform: rotate(-90deg);
+  align-items: center;
+  white-space: nowrap;
+  font-family: ${(props) => props.theme.fonts.mainFont};
 `
 
 export const ScrollContainer = styled('div', {
@@ -89,8 +90,6 @@ export const ChartContent = styled('div', {
   height: ${(props) => props.height};
   position: relative;
   background: ${(props) => props.theme.semanticColors.grey[100]};
-  border-bottom: ${(props) =>
-    `1px solid ${props.theme.semanticColors.grey[400]}`};
   ${(props) =>
     props.isScrollable
       ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
@@ -180,7 +179,7 @@ export const XAxisLabelHighlight = styled.div`
 export const XAxisLine = styled.div`
   width: 1px;
   height: 6px;
-  background-color: ${(props) => props.theme.semanticColors.grey[400]};
+  background-color: rgba(0, 0, 0, 0.1);
   position: absolute;
   bottom: -6px;
   left: 50%;
@@ -272,13 +271,3 @@ export const LoadingOverlay = styled('div')`
   align-items: center;
   z-index: 2;
 `
-
-export const InfoCardContainer = styled('div')`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 500px;
-  max-width: 500px;
-  z-index: 2;
-`

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
 export default {
   title: 'InputNumber',
   component: InputNumber,
+  // argTypes: {},
 }
 
-const Template = (args) => ({
+const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  setup() {
-    return { args: args }
-  },
-  template: `<InputNumber v-bind="args" />`,
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-number v-bind="$props" />',
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:

package/src/components/inputs/inputNumber/index.vue

@@ -50,6 +50,7 @@
             :color-mode="colorMode"
             :data-id="inputDataId"
             :data-qa-id="dataQaId"
+            :disabled="disabled && !isDisabledStyledOnly"
             :font-color="colorMode === 'transparent' ? 'white' : fontColor"
             :font-size="fontSize"
             :has-label-slot="hasLabelSlot"
@@ -57,7 +58,7 @@
             :has-unit="unitName && !!unitName.length"
             :input-height="inputHeight"
             :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled && !isDisabledStyledOnly"
+            :is-disabled="disabled"
             :is-error="isError"
             :is-info-border="isInfoBorder"
             :is-interactive="isInteractive"
@@ -95,6 +96,7 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
+        :disabled="disabled && !isDisabledStyledOnly"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
@@ -102,7 +104,7 @@
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
         :is-border-error-only="isBorderErrorOnly"
-        :is-disabled="disabled && !isDisabledStyledOnly"
+        :is-disabled="disabled"
         :is-error="isError"
         :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
@@ -746,7 +748,6 @@
         default: '',
       },
       dataQaId: {
-        type: String,
         required: false,
         default: '',
       },

package/src/components/pageSubtitle/index.vue

@@ -5,8 +5,7 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
-    <span v-else data-test-id="page_subtitle_text">
+    <span data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -59,11 +58,6 @@
         required: true,
         type: String,
       },
-      containsHtml: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
       color: {
         required: false,
         type: String,

package/src/components/statusIndicator/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <BoxContainer
+    :is-active="isActive"
+    :is-disabled="isDisabled"
+    :is-error="isError"
+    :is-touched="isTouched"
+    :is-valid="isValid"
+    :is-warning="isWarning"
+  >
+    <RcIcon
+      v-if="isValid && isTouched"
+      :color="theme.semanticColors.purple[500]"
+      :hovered-color="theme.semanticColors.purple[500]"
+      name="checkmark_thin"
+      size="16px"
+    />
+    <RcIcon
+      v-else-if="isError"
+      :color="theme.colors.white"
+      :hovered-color="theme.colors.white"
+      name="close"
+      size="16px"
+    />
+    <RcIcon
+      v-else-if="isWarning"
+      :color="theme.colors.white"
+      :hovered-color="theme.colors.white"
+      name="warning_triangle"
+      size="16px"
+    />
+    <NumberContainer v-else :is-active="isActive" :is-valid="isValid">
+      <slot></slot>
+    </NumberContainer>
+  </BoxContainer>
+</template>
+
+<script>
+  // to use the StatusIndicator, you need to pass the following props:
+  // <StatusIndicator
+  //  :is-error="true"
+  //  :is-warning="true"
+  //  :is-touched="true"
+  //  :is-disabled="true"
+  //  :is-active="true"
+  // >
+  // 42
+  // </StatusIndicator>
+  import styled from 'vue3-styled-components'
+  import RcIcon from '../icon'
+  import theme from '@/assets/theme.js'
+
+  const StyledComponents = {
+    ProgressionStepItem: styled.div`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    `,
+    BoxContainer: styled('div', {
+      isActive: Boolean,
+      isValid: Boolean,
+      isError: Boolean,
+      isWarning: Boolean,
+      isTouched: Boolean,
+      isDisabled: Boolean,
+    })`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+      background-color: ${({
+        theme,
+        isValid,
+        isActive,
+        isError,
+        isWarning,
+        isTouched,
+        isDisabled,
+      }) => {
+        if (isDisabled) return theme.semanticColors.grey[200]
+        if (isError) return theme.semanticColors.red[500]
+        if (isWarning) return theme.semanticColors.yellow[500]
+        if (!isTouched) return theme.semanticColors.grey[200]
+        if (isActive) {
+          if (isValid) return theme.semanticColors.purple[200]
+          return theme.semanticColors.purple[500]
+        }
+        return theme.semanticColors.grey[200]
+      }};
+      color: ${({ theme, isValid, isActive }) =>
+        isActive ? theme.colors.white : theme.semanticColors.grey[800]};
+      margin: 0;
+      border-radius: 5px;
+      cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
+      &:hover {
+        ${({ theme, isValid, isActive }) =>
+          isValid
+            ? 'background-color:' + theme.semanticColors.purple[100] + ';'
+            : ''}
+      }
+    `,
+    NumberContainer: styled.div``,
+  }
+  export default {
+    name: 'StatusIndicator',
+    components: {
+      ...StyledComponents,
+      RcIcon,
+    },
+    props: {
+      isError: {
+        type: Boolean,
+        default: false,
+      },
+      isWarning: {
+        type: Boolean,
+        default: false,
+      },
+      isTouched: {
+        type: Boolean,
+        default: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+      },
+      isActive: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        theme,
+      }
+    },
+    computed: {
+      isValid() {
+        return this.isTouched && !this.isError && !this.isWarning
+      },
+    },
+  }
+</script>