@eturnity/eturnity_reusable_components 8.34.0-EPDM-16204.0 → 8.37.0

package/src/assets/theme.js

@@ -26,8 +26,6 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
-    red6: '#FFEBEB',
-    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -68,8 +66,6 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
-    purple7: '#F5EEFF',
-    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -184,9 +180,25 @@ 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',
     },
@@ -205,6 +217,18 @@ 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
@@ -403,26 +427,28 @@ const theme = (() => {
               borderColor: '',
             },
           },
-          tertiary: {
+        },
+        protag: {
+          main: {
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: 'transparent',
             },
             hover: {
-              backgroundColor: semanticColors.grey[200],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
             },
           },
         },
@@ -450,152 +476,153 @@ const theme = (() => {
             },
           },
         },
-        protag: {
+      },
+      dark: {
+        // theme
+        primary: {
+          // type
           main: {
+            // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[200],
-              textColor: semanticColors.teal[400],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
-        },
-        freeTrialTag: {
-          main: {
+          cancel: {
+            // variant
             default: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[400],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.blue[200],
-              textColor: semanticColors.teal[400],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[800],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[800],
+              textColor: semanticColors.red[400],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[300],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
         },
-        secondary: {
+        tertiary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
+              backgroundColor: 'transparent',
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.red[400],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: '',
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -739,9 +766,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '3px 5px',
-          fontSize: '11px',
-          iconWidth: '14px',
+          padding: '2px 5px',
+          fontSize: '10px',
+          iconWidth: '18px',
         },
       },
     },

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

@@ -104,6 +104,12 @@ 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)">
+      <LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
         <Icon
           v-if="icon"
           :color="getIconColor"
@@ -146,10 +146,13 @@
 
   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')};
@@ -212,6 +215,11 @@
         default: '',
         type: String,
       },
+      iconLast: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       iconAltStyle: {
         required: false,
         default: false,

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

@@ -1,53 +1,125 @@
+import defaultDropdownProps from './defaultProps'
 import Dropdown from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Dropdown',
   component: 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>
+  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>
       </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 = {
-  openingMode: 'click',
+  ...defaultDropdownProps,
+}
+
+export const DropdownWidth = Template.bind({})
+DropdownWidth.args = {
+  ...defaultDropdownProps,
+  width: 'max-content',
+}
+
+export const DropdownGap = Template.bind({})
+DropdownGap.args = {
+  ...defaultDropdownProps,
   gap: '0px',
-  justify: 'left',
-  width: '150px',
 }
 
-export const withHover = Template.bind({})
-withHover.args = {
-  openingMode: 'hover',
-  gap: '20px',
+export const DropdownJustifyRight = Template.bind({})
+DropdownJustifyRight.args = {
+  ...defaultDropdownProps,
   justify: 'right',
-  width: '250px',
+}
+
+export const DropdownOpeningModeClick = Template.bind({})
+DropdownOpeningModeClick.args = {
+  ...defaultDropdownProps,
+  openingMode: 'click',
+}
+
+export const DropdownBackgroundColor = Template.bind({})
+DropdownBackgroundColor.args = {
+  ...defaultDropdownProps,
+  backgroundColor: theme.colors.red,
 }

package/src/components/dropdown/defaultProps.js

@@ -0,0 +1,7 @@
+const defaultProps = {
+  // info card content slot
+  trigger: 'TRIGGER BUTTON',
+  dropdown: `<div>DROPDOWN OPTION 1</div><div>DROPDOWN OPTION 2</div>`,
+}
+
+export default defaultProps

package/src/components/dropdown/dropdown.spec.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import RCDropdown from '@/components/dropdown'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('dropdown/index.vue', () => {
+  it('dropdown is rendered with correct trigger text', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+
+    expect(dropdownTrigger.exists()).toBe(true)
+    expect(dropdownTrigger.text()).toContain(defaultProps.trigger)
+  })
+
+  it('dropdown opens on click only', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps, openingMode: 'click' },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownDropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('hover')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('click')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(true)
+  })
+})