@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.2 → 8.16.2--EPDM-14330.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.2--EPDM-14330.2",
+  "version": "8.16.2--EPDM-14330.3",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -312,12 +312,12 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.purple[200],
               textColor: semanticColors.purple[700],
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.blue[100],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },
@@ -361,12 +361,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: '',
             },
@@ -400,6 +400,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
@@ -413,12 +437,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: '',
             },
@@ -599,6 +623,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

@@ -70,14 +70,13 @@
     grid-template-columns: auto 1fr;
     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]