@eturnity/eturnity_reusable_components 8.26.11-EPDM-11600.15 → 8.26.11-qa-07.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/buttons/buttonIcon/index.vue

@@ -50,6 +50,7 @@
           numberCount
         }}</NumberText>
       </NumberContainer>
+      <BetaTag v-if="isBeta" :is-disabled="isDisabled"> Beta </BetaTag>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -70,7 +71,9 @@
   import styled from 'vue3-styled-components'
   import Theme from '@/assets/theme'
 
-  const PageContainer = styled.div``
+  const PageContainer = styled.div`
+    position: relative;
+  `
 
   const ButtonAttrs = {
     type: String,
@@ -200,6 +203,23 @@
     background-color: ${(props) => props.theme.semanticColors.purple[50]};
   `
 
+  const BetaTag = styled('div', { isDisabled: Boolean })`
+    position: absolute;
+    top: -5px;
+    right: -8px;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 10px;
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.theme.semanticColors.red[500]};
+    color: ${(props) => props.theme.colors.white};
+    font-weight: 700;
+    transform: rotate(20deg);
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -210,6 +230,7 @@
       Icon,
       NumberContainer,
       NumberText,
+      BetaTag,
     },
     props: {
       type: {
@@ -293,6 +314,10 @@
         type: String,
         default: 'auto',
       },
+      isBeta: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/buttons/mainButton/index.vue

@@ -7,11 +7,13 @@
       :data-id="dataId"
       :data-qa-id="dataQaId"
       :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
       :variant="variant"
+      :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)">
         <Icon
@@ -50,11 +52,13 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    width: String,
     noWrap: Boolean,
     height: String,
     variant: String,
     buttonSize: String,
     appTheme: String,
+    isActive: Boolean,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -73,6 +77,9 @@
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
+        : props.isActive
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .active.backgroundColor
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default.backgroundColor};
     border: ${(props) => {
@@ -91,7 +98,7 @@
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
     height: ${(props) => props.height};
     line-height: 1;
-
+    width: ${(props) => props.width};
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
@@ -170,6 +177,11 @@
         default: false,
         type: Boolean,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       icon: {
         required: false,
         default: null,
@@ -204,6 +216,11 @@
         default: null,
         type: String,
       },
+      width: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       height: {
         required: false,
         default: 'auto',

package/src/components/infoText/index.vue

@@ -49,7 +49,10 @@
         <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && (!!text || $slots.default)" to="body">
+    <Teleport
+      v-if="!hideInfoText && isVisible && (!!text || $slots.default)"
+      to="body"
+    >
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"

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: '',
       },
@@ -798,6 +799,10 @@
         type: Boolean,
         default: false,
       },
+      hasSpaceBetweenUnit: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -811,8 +816,12 @@
       displayedPlaceholder() {
         if (this.placeholder) return this.placeholder
         if (this.defaultNumber)
-          return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
-        return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+          return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+            this.unitName ? this.unitName : ''
+          }`
+        return `${this.minNumber || 0}${this.hasSpaceBetweenUnit ? ' ' : ''}${
+          this.unitName ? this.unitName : ''
+        }`
       },
       hasSlot() {
         return !!this.$slots.default
@@ -1026,8 +1035,9 @@
           return
         }
         this.textInput = this.formatWithCurrency(this.value)
+        const textInputWithoutUnit = this.formatWithoutUnit(this.value)
         this.enteredValue = stringToNumber({
-          value: this.textInput,
+          value: textInputWithoutUnit,
           numberPrecision: this.numberPrecision,
           minDecimals: this.minDecimals,
         })
@@ -1048,6 +1058,38 @@
           this.$refs.inputField1.$el.blur()
         })
       },
+      formatWithoutUnit(value) {
+        let adjustedMinValue =
+          value || value === 0
+            ? value
+            : this.defaultNumber
+            ? this.defaultNumber
+            : this.minNumber || this.minNumber === 0
+            ? this.minNumber
+            : ''
+        if (adjustedMinValue || adjustedMinValue === 0) {
+          let input = this.numberToStringEnabled
+            ? numberToString({
+                value: adjustedMinValue,
+                numberPrecision: this.numberPrecision,
+                minDecimals: this.minDecimals,
+              })
+            : adjustedMinValue
+          return input
+        } else if (!adjustedMinValue && adjustedMinValue !== 0) {
+          return ''
+        } else if (this.isFocused) {
+          return value
+        } else {
+          return this.numberToStringEnabled
+            ? numberToString({
+                value: adjustedMinValue,
+                numberPrecision: this.numberPrecision,
+                minDecimals: this.minDecimals,
+              })
+            : adjustedMinValue
+        }
+      },
       formatWithCurrency(value) {
         let adjustedMinValue =
           value || value === 0
@@ -1068,7 +1110,7 @@
           let unit = this.showLinearUnitName ? '' : this.unitName
           //return input + ' ' + unit
           if (unit) {
-            return input + ' ' + unit
+            return `${input}${this.hasSpaceBetweenUnit ? ' ' : ''}${unit}`
           }
           return input
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {

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,