@eturnity/eturnity_reusable_components 8.7.6 → 8.10.1-EPDM-13568.0

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

@@ -1,19 +1,34 @@
 <template>
   <PageContainer>
     <ButtonWrapper
+      :app-theme="appTheme"
+      :button-size="buttonSize"
       :custom-color="customColor"
-      :height="height"
+      :custom-color="customColor"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
+      :theme-type="themeType"
+      :type="type"
+      :variant="variant"
     >
-      <IconContainer :width="height">
+      <IconContainer
+        :button-size="buttonSize"
+        :theme-type="themeType"
+        :type="type"
+        :variant="variant"
+      >
         <Icon
-          :color="fontColor ? fontColor : theme.colors.white"
+          :color="
+            iconColor ||
+            theme.mainButton[themeType][type][variant].textColor ||
+            theme.colors.white
+          "
           :name="iconName"
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
+      <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -30,7 +45,6 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
-  //   height="24px"
   // />
 
   import Icon from '../../icon'
@@ -40,61 +54,101 @@
   const PageContainer = styled.div``
 
   const ButtonAttrs = {
+    type: String,
     isDisabled: Boolean,
     minWidth: String,
     customColor: String,
-    height: 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.themeType][props.type][props.variant]
+            .disabled.textColor
+        : props.theme.mainButton[props.themeType][props.type][props.variant]
+            .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.colors.disabled
+        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+            .disabled.backgroundColor
         : props.customColor
-        ? props.theme.colors[props.customColor]
-          ? props.theme.colors[props.customColor]
-          : props.customColor
-        : props.theme.colors.yellow};
+        ? props.customColor
+        : props.isActive
+        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+            .active
+        : props.theme.mainButton[props.themeType][props.type][props.variant]
+            .default};
+    border: ${(props) => {
+      const borderValue = props.isDisabled
+        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+            .disabled.borderColor
+        : props.theme.mainButton[props.themeType][props.type][props.variant]
+            .borderColor
+      return borderValue ? '1px solid ' + borderValue : 'none'
+    }};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
     border-radius: 4px;
     overflow: hidden;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
-    height: ${(props) => props.height};
+    min-width: ${(props) => props.minWidth || 'initial'};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      background-color: ${(props) =>
+        props.isDisabled
+          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+              .disabled.backgroundColor
+          : props.theme.mainButton[props.themeType][props.type][props.variant]
+              .hover};
     }
 
     &:active {
-      opacity: 1;
+      background-color: ${(props) =>
+        props.isDisabled
+          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+              .disabled.backgroundColor
+          : props.theme.mainButton[props.themeType][props.type][props.variant]
+              .active};
     }
   `
 
   const ButtonContainerAttrs = {
-    fontSize: String,
-    fontColor: String,
+    buttonSize: 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: 0 14px;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    white-space: nowrap;
   `
 
   const IconContainerAttrs = {
-    width: String,
+    buttonSize: String,
+    themeType: String,
+    type: String,
+    variant: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
-    width: ${(props) => props.width};
-    background: ${(props) => props.theme.colors.white + '1a'};
+    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.themeType][props.type][props.variant]
+          .borderColor
+      return borderColor ? `1px solid ${borderColor}` : 'none'
+    }};
   `
 
   export default {
@@ -107,35 +161,68 @@
       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,
+        type: Boolean,
       },
       text: {
         required: true,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       customColor: {
         required: false,
         default: null,
+        type: String,
       },
       iconName: {
         required: true,
+        type: String,
       },
-      fontColor: {
+      iconColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontSize: {
         required: false,
-        default: '13px',
+        default: '14px',
+        type: String,
       },
-      height: {
+      appTheme: {
         required: false,
-        default: '30px',
+        default: 'light',
+        type: String,
+      },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
       },
     },
     data() {
@@ -143,5 +230,14 @@
         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,6 +2,8 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
+      :app-theme="appTheme"
+      :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
       :data-qa-id="dataQaId"
@@ -11,9 +13,10 @@
       :min-width="minWidth"
       :no-wrap="noWrap"
       :type="type"
+      :variant="variant"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
+        <Icon v-if="icon" :color="iconColor" :name="icon" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -46,30 +49,40 @@
     fontColor: String,
     noWrap: Boolean,
     height: String,
+    variant: String,
+    buttonSize: String,
+    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
     justify-content: center;
-    padding: 7px 15px;
-    font-size: 14px;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    font-size: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.colors.white
-        : props.fontColor
-        ? props.fontColor
-        : props.theme.colors.white};
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.textColor
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.colors.disabled
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.backgroundColor
         : 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};
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default};
+
+    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]
+            .borderColor
+      return borderValue ? '1px solid ' + borderValue : 'none'
+    }};
     border-radius: 4px;
     text-align: center;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -79,11 +92,21 @@
     height: ${(props) => props.height};
 
     &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+      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};
     }
 
     &:active {
-      opacity: 1;
+      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};
     }
   `
 
@@ -109,7 +132,12 @@
     props: {
       type: {
         required: false,
-        default: 'primary',
+        default: 'primary', // primary, secondary, tertiary, ghost
+        type: String,
+      },
+      variant: {
+        required: false,
+        default: 'main', // main, cancel
         type: String,
       },
       isDisabled: {
@@ -169,6 +197,15 @@
         type: String,
         default: '',
       },
+      appTheme: {
+        type: String,
+        default: 'light',
+      },
+      buttonSize: {
+        type: String,
+        default: 'medium',
+        required: false,
+      },
     },
   }
 </script>

package/src/components/filter/filterSettings.vue

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

package/src/components/icon/index.vue

@@ -143,6 +143,7 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
+      border-radius: 4px;
     }
     svg path:not(.fix) {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}

package/src/components/infoLabel/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <PageContainer :info-type="infoType">
+    <LabelText>{{ getLabelText }}</LabelText>
+  </PageContainer>
+</template>
+
+<script>
+  // import InfoLabel from "@eturnity/eturnity_reusable_components/src/components/infoLabel"
+  import styled from 'vue3-styled-components'
+
+  const PageAttrs = {
+    infoType: 'String',
+  }
+  const PageContainer = styled('div', PageAttrs)`
+    background-color: ${(props) =>
+      props.infoType === 'warning'
+        ? props.theme.colors.yellow4
+        : props.infoType === 'error'
+        ? props.theme.colors.red4
+        : props.theme.colors.blue4};
+    padding: 4px 8px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.colors.black};
+  `
+
+  const LabelText = styled.div``
+
+  export default {
+    name: 'InfoLabel',
+    components: {
+      PageContainer,
+      LabelText,
+    },
+    props: {
+      infoType: {
+        type: String,
+        default: 'hint', // hint, warning, error
+      },
+      labelText: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      getLabelText() {
+        if (this.labelText) {
+          return this.labelText
+        }
+        const infoType = this.infoType.toLowerCase()
+        switch (infoType) {
+          case 'warning':
+            return this.$gettext('Warning')
+          case 'error':
+            return this.$gettext('error')
+          default:
+            return this.$gettext('info')
+        }
+      },
+    },
+  }
+</script>