@eturnity/eturnity_reusable_components 8.34.0-EPDM-13618.2 → 8.34.0-EPDM-16204.0

package/src/assets/theme.js

@@ -26,6 +26,8 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
+    red6: '#FFEBEB',
+    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -66,6 +68,8 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
+    purple7: '#F5EEFF',
+    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -180,25 +184,9 @@ const theme = (() => {
     },
   }
 
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400],
-    },
-    stacked: [
-      { from: '#F5EDFF', to: '#DEC5FF' },
-      { from: '#CAA2FF', to: '#F2E8FF' },
-      { from: '#B987FC', to: '#904AEF' },
-      { from: '#8B40F2', to: '#4A1394' },
-      { from: '#6A05F2', to: '#4905A5' },
-      { from: '#5402C3', to: '#2B0362' },
-    ],
-  }
-
   return {
     colors,
     semanticColors,
-    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -217,18 +205,6 @@ const theme = (() => {
     boxShadow: {
       card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
     },
-    progressBar: {
-      light: {
-        fillColor: semanticColors.purple[500],
-        backgroundColor: semanticColors.grey[200],
-        labelColor: semanticColors.grey[700],
-      },
-      dark: {
-        fillColor: colors.white,
-        backgroundColor: semanticColors.grey[700],
-        labelColor: semanticColors.grey[200],
-      },
-    },
     mainButton: {
       light: {
         // theme
@@ -427,28 +403,26 @@ const theme = (() => {
               borderColor: '',
             },
           },
-        },
-        protag: {
-          main: {
+          tertiary: {
             default: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: 'transparent',
               textColor: semanticColors.teal[800],
-              borderColor: 'transparent',
+              borderColor: semanticColors.teal[100],
             },
             hover: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             active: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[300],
-              textColor: semanticColors.teal[400],
-              borderColor: '',
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -476,153 +450,152 @@ const theme = (() => {
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
-          // type
+        protag: {
           main: {
-            // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
-          cancel: {
-            // variant
+        },
+        freeTrialTag: {
+          main: {
             default: {
-              backgroundColor: semanticColors.red[400],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
         },
-        secondary: {
+      },
+      dark: {
+        // theme
+        primary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
-              textColor: semanticColors.purple[50],
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
-              textColor: semanticColors.red[400],
+              backgroundColor: semanticColors.red[400],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-        tertiary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
+              backgroundColor: semanticColors.red[800],
               textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
+              textColor: semanticColors.red[300],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
         },
@@ -766,9 +739,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '2px 5px',
-          fontSize: '10px',
-          iconWidth: '18px',
+          padding: '3px 5px',
+          fontSize: '11px',
+          iconWidth: '14px',
         },
       },
     },

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -104,12 +104,6 @@ WithIcon.args = {
   appTheme: 'light',
 }
 
-export const WithIconLast = Template.bind({})
-WithIconLast.args = {
-  ...WithIcon.args,
-  iconLast: true,
-}
-
 export const Disabled = Template.bind({})
 Disabled.args = {
   type: 'primary',

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

@@ -15,7 +15,7 @@
       :variant="variant"
       :width="width"
     >
-      <LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
+      <LabelComponent :has-icon="Boolean(icon)">
         <Icon
           v-if="icon"
           :color="getIconColor"
@@ -146,13 +146,10 @@
 
   const LabelAttrs = {
     hasIcon: Boolean,
-    reverseDirection: Boolean,
   }
 
   const LabelComponent = styled('span', LabelAttrs)`
     display: flex;
-    flex-direction: ${(props) =>
-      props.reverseDirection ? 'row-reverse' : 'row'};
     align-items: center;
     justify-content: center;
     gap: ${(props) => (props.hasIcon ? '5px' : '0')};
@@ -215,11 +212,6 @@
         default: '',
         type: String,
       },
-      iconLast: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       iconAltStyle: {
         required: false,
         default: false,

package/src/components/dropdown/Dropdown.stories.js

@@ -1,125 +1,53 @@
-import defaultDropdownProps from './defaultProps'
 import Dropdown from './index.vue'
-import theme from '@/assets/theme'
 
 export default {
   title: 'Dropdown',
   component: Dropdown,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      description: '',
-    },
-    gap: {
-      description: 'Gap between trigger and dropdown content',
-    },
-    justify: {
-      description:
-        'Rule to allign the dropdown content relatively to the trigger',
-      control: 'select',
-      options: ['right', 'left'],
-    },
-    openingMode: {
-      description:
-        'Way to open the dropdown content: eigther by clicking on trigger or hovering it',
-      control: 'select',
-      options: ['hover', 'click'],
-    },
-    backgroundColor: {
-      description: 'Backbround color of dropdown content',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.white,
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-
-    // slots
-    trigger: {
-      description: 'Trigger button slot',
-    },
-    dropdown: {
-      description: 'Dropdown content slot',
-    },
-  },
-}
-
-// To use:
-// import Dropdown from '@eturnity/eturnity_reusable_components/src/components/dropdown'
-// <Dropdown
-//   width="fit-content"
-//   gap="20px"
-//   justify="right"
-//   opening-mode="click"
-//   background-color="red"
-// >
-//   <template #trigger>
-//     TRIGGER BUTTON
-//   </template>
-//   <template #dropdown>
-//     <div>
-//       <div>OPTION 1</div>
-//       <div>OPTION 2</div>
-//     </div>
-//   </template>
-// <Dropdown/>
-
-const Template = (args) => {
-  return {
-    components: { Dropdown },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="margin-left: 30px;">
-        <Dropdown v-bind="args">
-          <template #trigger>
-            {{ args.trigger }}
-          </template>
-          <template #dropdown>
-            <div v-html="args.dropdown"></div>
-          </template>
-        </Dropdown>
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Dropdown },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Dropdown v-bind="$props">
+  <template #trigger>
+      trigger button
+  </template>
+  <template #dropdown>
+      <div>
+        <h3>fully customizable dropdown</h3>
+        <ul>
+          <li>item</li>
+          <li>item</li>
+          <li>item</li>
+        </ul>
       </div>
-    `,
-  }
-}
+  </template>
+</Dropdown>`,
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+})
 
 export const Default = Template.bind({})
 Default.args = {
-  ...defaultDropdownProps,
-}
-
-export const DropdownWidth = Template.bind({})
-DropdownWidth.args = {
-  ...defaultDropdownProps,
-  width: 'max-content',
-}
-
-export const DropdownGap = Template.bind({})
-DropdownGap.args = {
-  ...defaultDropdownProps,
+  openingMode: 'click',
   gap: '0px',
+  justify: 'left',
+  width: '150px',
 }
 
-export const DropdownJustifyRight = Template.bind({})
-DropdownJustifyRight.args = {
-  ...defaultDropdownProps,
+export const withHover = Template.bind({})
+withHover.args = {
+  openingMode: 'hover',
+  gap: '20px',
   justify: 'right',
-}
-
-export const DropdownOpeningModeClick = Template.bind({})
-DropdownOpeningModeClick.args = {
-  ...defaultDropdownProps,
-  openingMode: 'click',
-}
-
-export const DropdownBackgroundColor = Template.bind({})
-DropdownBackgroundColor.args = {
-  ...defaultDropdownProps,
-  backgroundColor: theme.colors.red,
+  width: '250px',
 }

package/src/components/dropdown/index.vue

@@ -1,26 +1,18 @@
 <template>
-  <Wrapper
-    data-test-id="dropdown_wrapper"
-    ref="dropdown"
-    :opening-mode="openingMode"
-  >
-    <WrapperButton
-      data-test-id="dropdown_trigger"
-      @click="toggleIsOpenByClick(!isOpenByClick)"
-    >
+  <Wrapper ref="dropdown" :opening-mode="openingMode">
+    <WrapperButton @click="isOpenByClick = !isOpenByClick">
       <slot name="trigger"></slot>
     </WrapperButton>
     <WrapperDropdown
       :background-color="backgroundColor"
       class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode === 'click' }"
-      data-test-id="dropdown_dropdown_wrapper"
+      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
       :justify="justify"
+      :position="position"
       :width="width"
     >
       <DropdownWindow
         :background-color="backgroundColor"
-        data-test-id="dropdown_dropdown_content"
         :gap="gap"
         :width="width"
       >
@@ -31,6 +23,14 @@
 </template>
 
 <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<DropdownComponent
+  //    width="300px"
+  //    backgroundColor="red">
+
+  // <DropdownComponent/>
+
   import styled from 'vue3-styled-components'
 
   const wrapperAttrs = {
@@ -45,11 +45,11 @@
     position: relative;
 
     &:hover .dropdown-content {
-      ${(props) => (props.openingMode === 'hover' ? 'display: block;' : '')}
+      ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
     }
     & .openDropdown {
       ${(props) =>
-        props.openingMode === 'click' ? 'display: block !important;' : ''}
+        props.openingMode == 'click' ? 'display:block !important' : ''}
     }
   `
   const WrapperDropdown = styled('div', wrapperAttrs)`
@@ -57,7 +57,7 @@
     display: none;
     position: absolute;
     z-index: 1;
-    ${(props) => (props.justify === 'right' ? 'right: 0;' : '')}
+    ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
   `
   const DropdownWindow = styled('div', wrapperAttrs)`
     width: ${(props) => props.width};
@@ -86,27 +86,26 @@
     props: {
       width: {
         required: false,
-        type: String,
         default: '300px',
       },
       gap: {
         required: false,
-        type: String,
         default: '10px',
       },
+      position: {
+        required: false,
+        default: 'bottom',
+      },
       justify: {
         required: false,
-        type: String,
         default: 'left',
       },
       openingMode: {
         required: false,
-        type: String,
         default: 'hover',
       },
       backgroundColor: {
         required: false,
-        type: String,
         default: 'white',
       },
     },
@@ -122,26 +121,18 @@
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
-      toggleIsOpenByClick(value) {
-        this.isOpenByClick = value
-      },
       clickOutside(event) {
         if (this.openingMode != 'click') return
         if (
           this.$refs.dropdown &&
-          (this.$refs.dropdown.$el === event.target ||
+          (this.$refs.dropdown.$el == event.target ||
             this.$refs.dropdown.$el.contains(event.target))
         ) {
           return
         } else {
-          this.toggleIsOpenByClick(false)
+          this.isOpenByClick = false
         }
       },
     },
-    watch: {
-      isOpenByClick(newVal) {
-        this.$emit('on-dropdown-toggle', newVal)
-      },
-    },
   }
 </script>