@eturnity/eturnity_reusable_components 8.19.1 → 8.19.2

package/package.json

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

package/src/assets/svgIcons/add_plus.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0H8V14H6V0Z" fill="white"/>
+<path d="M14 6V8H0L8.74227e-08 6L14 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/download.svg

@@ -1,4 +1,4 @@
-<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 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>

package/src/assets/svgIcons/order.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H14V6H2V4ZM2 8V12H14V8H2ZM1 4C1 3.44772 1.44772 3 2 3H14C14.5523 3 15 3.44772 15 4V12C15 12.5523 14.5523 13 14 13H2C1.44772 13 1 12.5523 1 12V4Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +1,4 @@
-<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 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>

package/src/assets/theme.js

@@ -333,7 +333,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.blue[100],
               textColor: semanticColors.purple[600],
               borderColor: semanticColors.grey[600],
             },
@@ -377,12 +377,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[200],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.purple[700],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.blue[100],
               textColor: semanticColors.purple[600],
               borderColor: '',
             },
@@ -416,30 +416,6 @@ 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
@@ -453,12 +429,12 @@ const theme = (() => {
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.blue[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.blue[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
@@ -639,30 +615,6 @@ 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,116 +5,60 @@ 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',
-    },
-  },
 }
 
-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,
-  },
-})
+// To use:
+// <RCBanner
+//   backdrop="white" // white, dark
+//   :hideClose="true"
+//   :isLoading="true"
+//   :isOpen="true"
+//   position="fixed"
+//   stopPropagation="false"
+//   @on-close="handleClose"
+// />
 
-export const Default = Template.bind({})
-Default.args = {
-  isOpen: false,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
+export const Default = {
+  args: {
+    isOpen: false,
+    isLoading: false,
+    hideClose: false,
+    backdrop: 'white',
+    position: 'fixed',
+    stopPropagation: true,
+  },
 }
 
-export const OpenedBanner = Template.bind({})
-OpenedBanner.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
+export const OpenedBanner = {
+  args: {
+    isOpen: true,
+  },
 }
 
-export const LoadingBanner = Template.bind({})
-LoadingBanner.args = {
-  isOpen: true,
-  isLoading: true,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
+export const LoadingBanner = {
+  args: {
+    isOpen: true,
+    isLoading: true,
+  },
 }
 
-export const HiddenCloseButton = Template.bind({})
-HiddenCloseButton.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: true,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
+export const HiddenCloseButton = {
+  args: {
+    isOpen: true,
+    hideClose: true,
+  },
 }
 
-export const DarkBackdrop = Template.bind({})
-DarkBackdrop.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'dark',
-  position: 'fixed',
-  stopPropagation: true,
+export const DarkBackdrop = {
+  args: {
+    isOpen: true,
+    backdrop: 'dark',
+  },
 }
 
-export const AbsolutePositionBanner = Template.bind({})
-AbsolutePositionBanner.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'absolute',
-  stopPropagation: true,
+export const AbsolutePositionBanner = {
+  args: {
+    isOpen: true,
+    position: 'absolute',
+  },
 }

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

@@ -1,84 +1,42 @@
 import InfoBanner from './index.vue'
 import theme from '@/assets/theme'
-
 export default {
   title: 'InfoBanner',
   component: InfoBanner,
   tags: ['autodocs'],
-  argTypes: {
-    isOpen: {
-      control: 'boolean',
-      description: 'Whether the banner is visible',
-    },
-    buttonLabel: {
-      control: 'text',
-      description: 'Custom label for the confirmation button',
-    },
-  },
 }
 
-const Template = (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')
-    },
-  },
-  provide: {
-    theme,
-  },
-})
+// <RCInfoBanner
+//   :isOpen="true"
+//   buttonLabel="Got it"
+//   @on-close="handleClose"
+// >
+//   <template #title>Sample title</template>
+//   <template #body>Sample body</template>
+// </RCInfoBanner>
 
-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 Default = {
+  args: {
+    isOpen: false,
+    buttonLabel: 'Got it',
+  },
 }
 
-export const LongContent = Template.bind({})
-LongContent.args = {
-  isOpen: true,
-  buttonLabel: 'Got it',
+export const OpenedInfoBanner = {
+  args: {
+    isOpen: true,
+    buttonLabel: 'Got it',
+  },
+  render: (args) => ({
+    components: { InfoBanner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBanner v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>Sample body</template>
+      </InfoBanner>
+    `,
+  }),
 }
-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/index.vue

@@ -22,7 +22,6 @@
             theme.mainButton[appTheme][type][variant].default.textColor
           "
           :disable-hover="disableIconHover"
-          :fill-type="fillType"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -34,9 +33,6 @@
       <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
-      <NumberContainer v-if="numberCount">
-        <NumberText>{{ numberCount }}</NumberText>
-      </NumberContainer>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -71,16 +67,17 @@
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) => {
-      return props.isDisabled
+    color: ${(props) =>
+      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]
@@ -162,25 +159,6 @@
     }};
   `
 
-  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: {
@@ -189,8 +167,6 @@
       ButtonWrapper,
       IconContainer,
       Icon,
-      NumberContainer,
-      NumberText,
     },
     props: {
       type: {
@@ -256,20 +232,10 @@
         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 {

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

@@ -1,135 +1,64 @@
 import MainButton from './index.vue'
-import theme from '../../../assets/theme'
 
 export default {
-  title: 'Buttons/MainButton',
+  title: 'MainButton',
   component: MainButton,
   tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'ghost'],
-      description: 'Button type',
-    },
-    variant: {
-      control: 'select',
-      options: ['main', 'cancel'],
-      description: 'Button variant',
-    },
-    buttonSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Button size',
-    },
-    appTheme: {
-      control: 'select',
-      options: ['light', 'dark'],
-      description: 'Application theme',
-    },
+  parameters: {
+    layout: 'centered',
   },
 }
 
-const Template = (args) => ({
-  components: { MainButton },
-  setup() {
-    return { args }
+export const DefaultButton = {
+  args: {
+    type: 'primary',
+    text: 'Click me',
   },
-  template: '<MainButton v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Default Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
-}
-
-export const Primary = Template.bind({})
-Primary.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Primary Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
-}
-
-export const Secondary = Template.bind({})
-Secondary.args = {
-  type: 'secondary',
-  variant: 'main',
-  text: 'Secondary Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
-}
-
-export const Tertiary = Template.bind({})
-Tertiary.args = {
-  type: 'tertiary',
-  variant: 'main',
-  text: 'Tertiary Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
 }
 
-export const Ghost = Template.bind({})
-Ghost.args = {
-  type: 'ghost',
-  variant: 'main',
-  text: 'Ghost Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
+export const SecondaryButton = {
+  args: {
+    type: 'secondary',
+    text: 'Click me',
+  },
 }
 
-export const Cancel = Template.bind({})
-Cancel.args = {
-  type: 'primary',
-  variant: 'cancel',
-  text: 'Cancel Button',
-  buttonSize: 'medium',
-  appTheme: 'light',
+export const CancelButton = {
+  args: {
+    type: 'cancel',
+    text: 'Click me',
+  },
 }
 
-export const WithIcon = Template.bind({})
-WithIcon.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Button with Icon',
-  icon: 'bell',
-  buttonSize: 'medium',
-  appTheme: 'light',
+export const DisabledButton = {
+  args: {
+    text: 'Click me',
+    isDisabled: true,
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Disabled Button',
-  isDisabled: true,
-  buttonSize: 'medium',
-  appTheme: 'light',
+export const CustomColorButton = {
+  args: {
+    text: 'Click me',
+    customColor: '#0068DE',
+    fontColor: '#fdb813',
+  },
 }
 
-export const CustomSize = Template.bind({})
-CustomSize.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Custom Size',
-  minWidth: '200px',
-  height: '50px',
-  buttonSize: 'medium',
-  appTheme: 'light',
+export const IconButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    customColor: '#fdb813',
+  },
 }
 
-export const DarkTheme = Template.bind({})
-DarkTheme.args = {
-  type: 'primary',
-  variant: 'main',
-  text: 'Dark Theme',
-  buttonSize: 'medium',
-  appTheme: 'dark',
+export const IconAltDesignButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    type: 'primary',
+    iconAltStyle: true,
+    iconAltStyleColor: '#f2f2f2',
+  },
 }