@eturnity/eturnity_reusable_components 8.26.11--EPDM-16005.1 → 8.26.11-EPDM-11600.15

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

@@ -16,12 +16,9 @@ export const GraphSection = styled('div', { width: String, height: String })`
   display: flex;
 `
 
-export const YAxis = styled('div', { width: String, height: String })`
+export const YAxis = styled('div', { width: String })`
   width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
   position: relative;
-  height: ${(props) => props.height};
 `
 
 export const YAxisRow = styled('div', { percentage: Number })`
@@ -29,10 +26,13 @@ export const YAxisRow = styled('div', { percentage: Number })`
   align-items: center;
   width: 100%;
   position: absolute;
-  height: 0;
+  height: 1px;
   bottom: ${(props) =>
     Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  transform: translateY(50%);
+  ${(props) =>
+    Number.isFinite(props.percentage) && props.percentage === 100
+      ? 'transform: translateY(1px)'
+      : ''};
 `
 
 export const YAxisLabel = styled.div`
@@ -50,25 +50,24 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   right: -10px;
   left: calc(${(props) => props.yAxisWidth} - 10px);
   height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   width: 12px;
   z-index: 0;
-  top: 50%;
-  transform: translateY(-50%);
 `
 
-export const YAxisTitleWrapper = styled('div', { height: String })`
-  position: absolute;
-  left: -66px;
-  top: ${(props) => props.height};
-  transform: rotate(-90deg) translateX(50%);
-  transform-origin: right;
+export const YAxisTitleWrapper = styled('div')`
   font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: center;
+  font-weight: 500;
+  color: ${(props) => props.theme.semanticColors.grey[700]};
   white-space: nowrap;
-  font-family: ${(props) => props.theme.fonts.mainFont};
+  height: 0;
+  width: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-90deg);
 `
 
 export const ScrollContainer = styled('div', {
@@ -90,6 +89,8 @@ 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;`
@@ -179,7 +180,7 @@ export const XAxisLabelHighlight = styled.div`
 export const XAxisLine = styled.div`
   width: 1px;
   height: 6px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   position: absolute;
   bottom: -6px;
   left: 50%;
@@ -271,3 +272,13 @@ 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, { argTypes }) => ({
+const Template = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  // 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" />',
+  setup() {
+    return { args: args }
+  },
+  template: `<InputNumber v-bind="args" />`,
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use:

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

@@ -50,7 +50,6 @@
             :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"
@@ -58,7 +57,7 @@
             :has-unit="unitName && !!unitName.length"
             :input-height="inputHeight"
             :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled"
+            :is-disabled="disabled && !isDisabledStyledOnly"
             :is-error="isError"
             :is-info-border="isInfoBorder"
             :is-interactive="isInteractive"
@@ -96,7 +95,6 @@
         :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"
@@ -104,7 +102,7 @@
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
         :is-border-error-only="isBorderErrorOnly"
-        :is-disabled="disabled"
+        :is-disabled="disabled && !isDisabledStyledOnly"
         :is-error="isError"
         :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
@@ -748,6 +746,7 @@
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },

package/src/components/pageSubtitle/index.vue

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

package/src/components/tableDropdown/index.vue

@@ -16,11 +16,7 @@
         :is-nested="isNested"
         :show-archived="showArchived"
       >
-        <NestedContainer
-          :data-id="getRowDataId({ inputType: item.inputType })"
-          :data-qa-id="getRowDataId({ inputType: item.inputType })"
-          :is-nested="isNested"
-        >
+        <NestedContainer :is-nested="isNested">
           <NestedIcon
             v-if="
               isNested &&
@@ -552,11 +548,6 @@
         required: false,
         default: '',
       },
-      rowDataId: {
-        required: false,
-        default: null,
-        type: [Array],
-      },
     },
     data() {
       return {
@@ -598,17 +589,6 @@
       },
     },
     methods: {
-      getRowDataId({ inputType }) {
-        if (!this.rowDataId) {
-          return null
-        }
-
-        const rowDataId = this.rowDataId.find(
-          (item) => item.inputType === inputType
-        )
-
-        return rowDataId ? rowDataId.dataId : null
-      },
       toggleOpen(event) {
         if (
           this.disabled ||