@eturnity/eturnity_reusable_components 8.19.2 → 8.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.2",
+  "version": "8.19.3",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/download.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="42" viewbox="-1 -1 42 42" width="42" xmlns="http://www.w3.org/2000/svg">
-<rect fill="white" height="40" rx="4" width="40"></rect>
-<path clip-rule="evenodd" d="M27 17.9975H22.6923V13H17.3077V17.9975H13L20 23.2339L27 17.9975ZM13 24.994L13.0075 27H26.9925L27 24.994H13Z" fill="#505CA6" fill-rule="evenodd"></path>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6.5L7 10.5L3 6.5" fill="white"/>
+<path d="M13 13H1M11 6.5L7 10.5M7 10.5L3 6.5M7 10.5V1" stroke="#6F20DC" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/assets/svgIcons/filter.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4158 2.25103L13.4158 2.25108L8.42717 7.31882C8.42716 7.31884 8.42714 7.31885 8.42712 7.31887C8.1884 7.56134 8.05563 7.88855 8.05556 8.22814V8.22824V13.2099C8.05555 13.2553 8.04535 13.2998 8.02606 13.3399L8.47674 13.5565L8.02606 13.3399C8.00678 13.38 7.97909 13.4145 7.94567 13.441C7.91227 13.4674 7.87394 13.4854 7.83373 13.494C7.79354 13.5027 7.752 13.5019 7.71209 13.4918L7.71185 13.4917L6.15653 13.0967C6.09806 13.0818 6.0446 13.0471 6.00557 12.9963C5.96643 12.9454 5.94445 12.8815 5.94444 12.8148V8.22824V8.22814C5.94437 7.88855 5.8116 7.56134 5.57288 7.31887C5.57286 7.31885 5.57284 7.31883 5.57283 7.31882L0.584213 2.25108L0.58416 2.25103C0.531197 2.19724 0.500044 2.12265 0.5 2.04323C0.5 2.0432 0.5 2.04316 0.5 2.04313V0.790114C0.5 0.710654 0.531146 0.636004 0.58413 0.58218C0.636851 0.528623 0.706668 0.5 0.777778 0.5H13.2222C13.2933 0.5 13.3631 0.528623 13.4159 0.58218C13.4689 0.636003 13.5 0.710653 13.5 0.790114V2.04313C13.5 2.04316 13.5 2.0432 13.5 2.04323C13.5 2.12265 13.4688 2.19724 13.4158 2.25103Z" stroke="#263238" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svgIcons/kanban_view.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2C2.44772 2 2 2.44772 2 3V9C2 9.55229 2.44772 10 3 10H3.5C4.05228 10 4.5 9.55229 4.5 9V3C4.5 2.44772 4.05228 2 3.5 2H3Z" fill="#6F20DC"/>
+<path d="M5.75 3C5.75 2.44772 6.19772 2 6.75 2H7.25C7.80228 2 8.25 2.44772 8.25 3V5C8.25 5.55228 7.80228 6 7.25 6H6.75C6.19772 6 5.75 5.55228 5.75 5V3Z" fill="#6F20DC"/>
+<path d="M10.5 2C9.94771 2 9.5 2.44772 9.5 3V11C9.5 11.5523 9.94771 12 10.5 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2H10.5Z" fill="#6F20DC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.89543 0.895431 0 2 0H12C13.1046 0 14 0.895431 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2ZM2 1H12C12.5523 1 13 1.44772 13 2V12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2C1 1.44772 1.44772 1 2 1Z" fill="#6F20DC"/>
+</svg>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +1,4 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
-<path d="M10 0H12V22H10V0Z" fill="white"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1C6 0.447716 6.44772 0 7 0C7.55228 0 8 0.447715 8 1V13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13V1Z" fill="white"/>
+<path d="M13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8H1C0.447716 8 1.95702e-08 7.55228 4.37113e-08 7C6.78524e-08 6.44772 0.447715 6 1 6L13 6Z" fill="white"/>
 </svg>

package/src/assets/svgIcons/table_view.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2C0.895431 0 0 0.89543 0 2ZM7.5 3.5H13V6H7.5V3.5ZM6.5 3.5H1V6H6.5V3.5ZM1 7V9.5H6.5V7H1ZM1 10.5V12C1 12.5523 1.44772 13 2 13H6.5V10.5H1ZM7.5 13H12C12.5523 13 13 12.5523 13 12V10.5H7.5V13ZM13 9.5V7H7.5V9.5H13Z" fill="#263238"/>
+</svg>

package/src/assets/theme.js

@@ -333,7 +333,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },
@@ -377,12 +377,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.purple[200],
               textColor: semanticColors.purple[700],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[600],
               borderColor: '',
             },
@@ -416,6 +416,30 @@ const theme = (() => {
             },
           },
         },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[50],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
       },
       dark: {
         // theme
@@ -429,12 +453,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
@@ -615,6 +639,30 @@ const theme = (() => {
             },
           },
         },
+        filter: {
+          main: {
+            default: {
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            hover: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            active: {
+              backgroundColor: semanticColors.teal[100],
+              textColor: semanticColors.teal[800],
+              borderColor: semanticColors.teal[100],
+            },
+            disabled: {
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[300],
+              borderColor: '',
+            },
+          },
+        },
       },
       size: {
         large: {

package/src/components/banner/banner/Banner.stories.js

@@ -5,60 +5,116 @@ export default {
   title: 'Banner',
   component: Banner,
   tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the banner is visible',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether to show a loading spinner',
+    },
+    hideClose: {
+      control: 'boolean',
+      description: 'Whether to hide the close button',
+    },
+    backdrop: {
+      control: 'select',
+      options: ['white', 'dark'],
+      description: 'Type of backdrop overlay',
+    },
+    position: {
+      control: 'select',
+      options: ['fixed', 'absolute', 'relative'],
+      description: 'Position of the banner',
+    },
+    stopPropagation: {
+      control: 'boolean',
+      description:
+        'Whether to stop event propagation when clicking the modal container',
+    },
+  },
 }
 
-// To use:
-// <RCBanner
-//   backdrop="white" // white, dark
-//   :hideClose="true"
-//   :isLoading="true"
-//   :isOpen="true"
-//   position="fixed"
-//   stopPropagation="false"
-//   @on-close="handleClose"
-// />
-
-export const Default = {
-  args: {
-    isOpen: false,
-    isLoading: false,
-    hideClose: false,
-    backdrop: 'white',
-    position: 'fixed',
-    stopPropagation: true,
+const Template = (args) => ({
+  components: { Banner },
+  setup() {
+    return { args }
+  },
+  template: `
+    <Banner v-bind="args" @on-close="onClose">
+      <div style="padding: 20px;">
+        <h2>Banner Content</h2>
+        <p>This is some example content inside the banner.</p>
+      </div>
+    </Banner>
+  `,
+  methods: {
+    onClose() {
+      console.log('Banner closed')
+    },
   },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isOpen: false,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const OpenedBanner = {
-  args: {
-    isOpen: true,
-  },
+export const OpenedBanner = Template.bind({})
+OpenedBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const LoadingBanner = {
-  args: {
-    isOpen: true,
-    isLoading: true,
-  },
+export const LoadingBanner = Template.bind({})
+LoadingBanner.args = {
+  isOpen: true,
+  isLoading: true,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const HiddenCloseButton = {
-  args: {
-    isOpen: true,
-    hideClose: true,
-  },
+export const HiddenCloseButton = Template.bind({})
+HiddenCloseButton.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: true,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const DarkBackdrop = {
-  args: {
-    isOpen: true,
-    backdrop: 'dark',
-  },
+export const DarkBackdrop = Template.bind({})
+DarkBackdrop.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+  position: 'fixed',
+  stopPropagation: true,
 }
 
-export const AbsolutePositionBanner = {
-  args: {
-    isOpen: true,
-    position: 'absolute',
-  },
+export const AbsolutePositionBanner = Template.bind({})
+AbsolutePositionBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'absolute',
+  stopPropagation: true,
 }

package/src/components/banner/infoBanner/InfoBanner.stories.js

@@ -1,42 +1,84 @@
 import InfoBanner from './index.vue'
 import theme from '@/assets/theme'
+
 export default {
   title: 'InfoBanner',
   component: InfoBanner,
   tags: ['autodocs'],
-}
-
-// <RCInfoBanner
-//   :isOpen="true"
-//   buttonLabel="Got it"
-//   @on-close="handleClose"
-// >
-//   <template #title>Sample title</template>
-//   <template #body>Sample body</template>
-// </RCInfoBanner>
-
-export const Default = {
-  args: {
-    isOpen: false,
-    buttonLabel: 'Got it',
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the banner is visible',
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Custom label for the confirmation button',
+    },
   },
 }
 
-export const OpenedInfoBanner = {
-  args: {
-    isOpen: true,
-    buttonLabel: 'Got it',
+const Template = (args) => ({
+  components: { InfoBanner },
+  setup() {
+    return { args }
   },
-  render: (args) => ({
-    components: { InfoBanner },
-    setup() {
-      return { args }
+  template: `
+    <InfoBanner v-bind="args" @on-close="onClose">
+      <template #title>
+        <h2>Information Title</h2>
+      </template>
+      <template #body>
+        <p>This is some important information that needs to be displayed to the user. It can contain multiple paragraphs and will be properly formatted.</p>
+      </template>
+    </InfoBanner>
+  `,
+  methods: {
+    onClose() {
+      console.log('InfoBanner closed')
     },
-    template: `
-      <InfoBanner v-bind="args">
-        <template #title>Sample title</template>
-        <template #body>Sample body</template>
-      </InfoBanner>
-    `,
-  }),
+  },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isOpen: false,
+  buttonLabel: 'Got it',
+}
+
+export const OpenedInfoBanner = Template.bind({})
+OpenedInfoBanner.args = {
+  isOpen: true,
+  buttonLabel: 'Got it',
+}
+
+export const CustomButtonLabel = Template.bind({})
+CustomButtonLabel.args = {
+  isOpen: true,
+  buttonLabel: 'I understand',
+}
+
+export const LongContent = Template.bind({})
+LongContent.args = {
+  isOpen: true,
+  buttonLabel: 'Got it',
 }
+LongContent.template = `
+  <InfoBanner v-bind="args" @on-close="onClose">
+    <template #title>
+      <h2>Detailed Information</h2>
+    </template>
+    <template #body>
+      <p>This is a longer piece of content that demonstrates how the InfoBanner handles multiple paragraphs and longer text.</p>
+      <p>It includes:</p>
+      <ul>
+        <li>Multiple paragraphs</li>
+        <li>Bullet points</li>
+        <li>Different types of content</li>
+      </ul>
+      <p>All of this content should be properly formatted and scrollable if needed.</p>
+    </template>
+  </InfoBanner>
+`

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -0,0 +1,167 @@
+import ButtonIcon from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Buttons/ButtonIcon',
+  component: ButtonIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Button type',
+    },
+    variant: {
+      control: 'select',
+      options: ['main', 'cancel', 'danger'],
+      description: 'Button variant',
+    },
+    appTheme: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'Application theme',
+    },
+    buttonSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Button size',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    text: {
+      control: 'text',
+      description: 'Button text',
+    },
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width of the button',
+    },
+    customColor: {
+      control: 'color',
+      description: 'Custom background color',
+    },
+    iconName: {
+      control: 'text',
+      description: 'Name of the icon to display',
+    },
+    iconColor: {
+      control: 'color',
+      description: 'Custom color for the icon',
+    },
+    fontSize: {
+      control: 'text',
+      description: 'Font size of the button text',
+    },
+    isActive: {
+      control: 'boolean',
+      description: 'Whether the button is in active state',
+    },
+    fillType: {
+      control: 'select',
+      options: ['fill', 'stroke'],
+      description: 'How to fill the icon',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { ButtonIcon },
+  setup() {
+    return { args }
+  },
+  template: '<ButtonIcon v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  type: 'primary',
+  variant: 'main',
+  appTheme: 'light',
+  buttonSize: 'medium',
+  isDisabled: false,
+  text: 'Click Me',
+  minWidth: '200px',
+  customColor: null,
+  iconName: 'settings',
+  iconColor: null,
+  fontSize: '14px',
+  isActive: false,
+  fillType: 'fill',
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  ...Default.args,
+  type: 'secondary',
+}
+
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  ...Default.args,
+  type: 'tertiary',
+}
+
+export const Cancel = Template.bind({})
+Cancel.args = {
+  ...Default.args,
+  variant: 'cancel',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  ...Default.args,
+  variant: 'danger',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  isDisabled: true,
+}
+
+export const Active = Template.bind({})
+Active.args = {
+  ...Default.args,
+  isActive: true,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...Default.args,
+  buttonSize: 'small',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  ...Default.args,
+  buttonSize: 'large',
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  ...Default.args,
+  customColor: '#FF5733',
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  ...Default.args,
+  iconColor: '#FFFFFF',
+}
+
+export const DarkTheme = Template.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  appTheme: 'dark',
+}
+
+export const StrokeIcon = Template.bind({})
+StrokeIcon.args = {
+  ...Default.args,
+  fillType: 'stroke',
+}

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

@@ -22,6 +22,7 @@
             theme.mainButton[appTheme][type][variant].default.textColor
           "
           :disable-hover="disableIconHover"
+          :fill-type="fillType"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -33,6 +34,9 @@
       <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
+      <NumberContainer v-if="numberCount">
+        <NumberText>{{ numberCount }}</NumberText>
+      </NumberContainer>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -67,17 +71,16 @@
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
+    color: ${(props) => {
+      return props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.white
         : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
+            .default.textColor
+    }};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.mainButton[props.appTheme][props.type][props.variant]
@@ -159,6 +162,25 @@
     }};
   `
 
+  const NumberContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+  `
+
+  const NumberText = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+    padding: 3px 8px;
+    border-radius: 8px;
+    background-color: ${(props) => props.theme.semanticColors.purple[50]};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -167,6 +189,8 @@
       ButtonWrapper,
       IconContainer,
       Icon,
+      NumberContainer,
+      NumberText,
     },
     props: {
       type: {
@@ -232,10 +256,20 @@
         default: false,
         type: Boolean,
       },
+      fillType: {
+        required: false,
+        default: 'fill',
+        type: String,
+      },
       disableIconHover: {
         type: Boolean,
         default: false,
       },
+      numberCount: {
+        type: Number,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {