@eturnity/eturnity_reusable_components 8.10.3-EPDM-13568.6 → 8.10.3-EPDM-11600.3

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

@@ -2,34 +2,19 @@
   <PageContainer>
     <ButtonWrapper
       :app-theme="appTheme"
-      :button-size="buttonSize"
       :custom-color="customColor"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
-      :type="type"
-      :variant="variant"
     >
-      <IconContainer
-        :app-theme="appTheme"
-        :button-size="buttonSize"
-        :type="type"
-        :variant="variant"
-      >
+      <IconContainer :width="height">
         <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          :hovered-color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
+          :color="fontColor ? fontColor : theme.colors.white"
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -46,6 +31,7 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
+  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -55,107 +41,67 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
-    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    buttonSize: String,
-    variant: String,
     appTheme: String,
     isActive: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
     grid-template-columns: auto 1fr;
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.black
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
+        ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
-        : 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) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
+        : props.appTheme === 'dark'
+        ? props.isActive
+          ? 'rgba(255, 255, 255, 0.2)'
+          : props.theme.colors.black
+        : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => props.minWidth || 'initial'};
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      opacity: 1;
     }
   `
 
   const ButtonContainerAttrs = {
-    buttonSize: String,
+    fontSize: String,
+    fontColor: String,
   }
   const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    padding: 5px 10px;
     white-space: nowrap;
   `
 
   const IconContainerAttrs = {
-    buttonSize: String,
-    appTheme: String,
-    type: String,
-    variant: String,
+    width: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.appTheme][props.type][props.variant]
-          .default.borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+    padding: 5px;
   `
 
   export default {
@@ -168,26 +114,6 @@
       Icon,
     },
     props: {
-      type: {
-        required: false,
-        default: 'primary',
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main',
-        type: String,
-      },
-      themeType: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
       isDisabled: {
         required: false,
         default: false,
@@ -211,7 +137,7 @@
         required: true,
         type: String,
       },
-      iconColor: {
+      fontColor: {
         required: false,
         default: null,
         type: String,
@@ -231,20 +157,16 @@
         default: false,
         type: Boolean,
       },
+      height: {
+        required: false,
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
         theme: Theme,
       }
     },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
   }
 </script>

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

@@ -2,25 +2,18 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
+      :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
+      :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
-      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon
-          v-if="icon"
-          :color="getIconColor"
-          :hovered-color="getIconColor"
-          :name="icon"
-          size="14px"
-        />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -42,7 +35,6 @@
 
   import styled from 'vue3-styled-components'
   import Icon from '../../icon'
-  import theme from '../../../assets/theme'
 
   const PageContainer = styled.div``
 
@@ -50,39 +42,34 @@
     type: String,
     isDisabled: Boolean,
     minWidth: String,
+    customColor: String,
+    fontColor: String,
     noWrap: Boolean,
     height: String,
-    variant: String,
-    buttonSize: String,
-    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
+    padding: 7px 15px;
+    font-size: 14px;
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -92,21 +79,11 @@
     height: ${(props) => props.height};
 
     &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      opacity: 1;
     }
   `
 
@@ -132,12 +109,7 @@
     props: {
       type: {
         required: false,
-        default: 'primary', // primary, secondary, tertiary, ghost
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main', // main, cancel
+        default: 'primary',
         type: String,
       },
       isDisabled: {
@@ -159,6 +131,16 @@
         required: true,
         type: String,
       },
+      customColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      fontColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
       noWrap: {
         required: false,
         default: false,
@@ -187,27 +169,6 @@
         type: String,
         default: '',
       },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
-    },
-    computed: {
-      theme() {
-        return theme
-      },
-      getIconColor() {
-        return this.isDisabled
-          ? this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .disabled.textColor
-          : this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .default.textColor
-      },
     },
   }
 </script>

package/src/components/filter/filterSettings.vue

@@ -297,13 +297,12 @@
       <MainButton
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        type="primary"
-        variant="cancel"
+        type="cancel"
         @click="$emit('on-cancel-view')"
       />
       <ResetContainer v-if="!filterViews || !filterViews.length">
         <ResetButton @click="$emit('on-reset-filters')">
-          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
+          <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
           <div>{{ $gettext('reset_filters') }}</div>
         </ResetButton>
       </ResetContainer>
@@ -476,7 +475,7 @@
     margin-top: 20px;
     align-self: center;
     font-size: 13px;
-    color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.blue};
     cursor: pointer;
   `
 

package/src/components/icon/index.vue

@@ -10,7 +10,6 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
-      :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
       <i data-test-id="icon_svg" v-html="icon.html"></i>
@@ -46,7 +45,6 @@
     disabled: {
       required: false,
       default: false,
-      type: Boolean,
     },
     name: {
       required: true,
@@ -54,48 +52,33 @@
     },
     color: {
       required: false,
-      default: null,
-      type: String,
     },
     hoveredColor: {
       required: false,
-      default: null,
-      type: String,
     },
     size: {
       required: false,
       default: '30px',
-      type: String,
     },
     cursor: {
       required: false,
       default: null,
-      type: String,
     },
     isStriked: {
       required: false,
       default: false,
-      type: Boolean,
     },
     backgroundColor: {
       required: false,
       default: null,
-      type: String,
     },
     count: {
       required: false,
       default: 0,
-      type: Number,
     },
     animation: {
       required: false,
       default: 'none',
-      type: String,
-    },
-    fillType: {
-      required: false,
-      default: 'fill',
-      type: String,
     },
   })
 
@@ -122,7 +105,7 @@
     right: -7px;
     background-color: ${({ theme }) => theme.colors.red};
     color: ${({ theme }) => theme.colors.white};
-    border-radius: 100%;
+    border-radius: 4px;
     width: 15px;
     height: 15px;
     display: flex;
@@ -146,14 +129,12 @@
     transform-origin: 0% 100%;
     transform: rotate(-45deg);
   `
-  const IconImageAttrs = {
+  const IconImage = styled('div', {
     color: String,
     backgroundColor: String,
     hoveredColor: String,
     animation: String,
-    fillType: String,
-  }
-  const IconImage = styled('div', IconImageAttrs)`
+  })`
     animation: ${(props) => props.animation};
     width: 100%;
     svg {
@@ -162,17 +143,13 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: ${(props) => (props.backgroundColor ? '8px' : '0')};
     }
     svg path:not(.fix) {
-      ${({ theme, color, fillType }) =>
-        color && `${fillType}: ${theme.colors[color] || color};`}
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
     &:hover svg path:not(.fix) {
-      ${(props) =>
-        `fill: ${
-          props.hoveredColor || props.theme.semanticColors.purple[500]
-        };`}
+      ${({ theme, hoveredColor }) =>
+        hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }
     &:hover + div {
       background-color: ${(props) => props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -12,9 +12,8 @@
     <RCIcon
       :color="iconColor ? iconColor : presetStyles.iconColor"
       data-test-id="info_card_icon"
-      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-      :name="iconName"
-      size="18px"
+      :name="isErrorMinor ? 'erase' : 'info'"
+      size="24px"
     />
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
@@ -40,7 +39,7 @@
     display: flex;
     align-items: ${(props) =>
       props.alignItems ? props.alignItems : props.presetStyles.alignItems};
-    gap: 16px;
+    gap: 15px;
     min-width: ${(props) => props.minWidth};
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
@@ -58,7 +57,7 @@
   `
 
   const TextContainer = styled.div`
-    font-size: 14px;
+    font-size: 13px;
     width: 100%;
   `
 
@@ -122,28 +121,25 @@
       isErrorMinor() {
         return this.type === 'error_minor'
       },
-      iconName() {
-        return this.type === 'warning' ? 'warning_triangle' : 'info'
-      },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
         // to avoid flickering in case the same info card would switch the types
         let stylesCollection = {
           alignItems: 'flex-start',
-          padding: '8px 6px 8px 16px',
+          padding: '20px',
           borderWidth: '1px',
           borderStyle: 'solid',
           borderColor: 'transparent',
         }
 
         if (this.isWarning) {
-          stylesCollection.color = theme.semanticColors.teal[800]
-          stylesCollection.backgroundColor = theme.semanticColors.yellow[300]
-          stylesCollection.iconColor = theme.semanticColors.teal[800]
+          stylesCollection.color = theme.colors.white
+          stylesCollection.backgroundColor = theme.colors.yellow
+          stylesCollection.iconColor = theme.colors.white
         } else if (this.isErrorMinor) {
           stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.pureRed
-          stylesCollection.iconColor = theme.colors.pureRed
+          stylesCollection.borderColor = theme.colors.grey4
+          stylesCollection.iconColor = theme.colors.red
         } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4

package/src/components/infoText/index.vue

@@ -48,7 +48,6 @@
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
-          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -93,8 +92,10 @@
     width: Number,
   }
   const TextOverlay = styled('div', TextOverlayAttrs)`
+    background-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -121,11 +122,7 @@
   //   height: 0;
   //   border: 8px solid transparent;
   //   border-top-color: ${(props) =>
-  //     props.image
-  //       ? props.theme.colors.white
-  //       : props.appTheme === 'dark'
-  //       ? props.theme.colors.grey5
-  //       : props.theme.colors.black};
+  //     props.image ? props.theme.colors.white : props.theme.colors.black};
   //   filter: ${(props) =>
   //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
   // `

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:
@@ -73,6 +73,20 @@ Disabled.args = {
   showLinearUnitName: false,
 }
 
+export const DisabledAndPreDefined = Template.bind({})
+DisabledAndPreDefined.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  isPreDefined: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: 'left',
+  showLinearUnitName: false,
+}
+
 export const LinearUnit = Template.bind({})
 LinearUnit.args = {
   placeholder: 'Enter Value',