@eturnity/eturnity_reusable_components 8.19.2 → 8.19.4

package/src/components/icon/Icon.stories.js

@@ -0,0 +1,220 @@
+import Icon from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    name: {
+      control: 'select',
+      options: [
+        'settings',
+        'warning',
+        'checkmark',
+        'close',
+        'arrow_up',
+        'arrow_down',
+      ],
+      description: 'Name of the SVG icon file (without .svg extension)',
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the icon',
+    },
+    hoveredColor: {
+      control: 'color',
+      description: 'Color of the icon when hovered',
+    },
+    size: {
+      control: 'text',
+      description: 'Size of the icon (e.g., "30px")',
+    },
+    cursor: {
+      control: 'select',
+      options: ['default', 'pointer', 'not-allowed'],
+      description: 'Cursor style when hovering over the icon',
+    },
+    isStriked: {
+      control: 'boolean',
+      description: 'Whether to show a strikethrough line',
+    },
+    backgroundColor: {
+      control: 'color',
+      description: 'Background color of the icon container',
+    },
+    count: {
+      control: 'number',
+      description: 'Number to display in the count badge',
+    },
+    animation: {
+      control: 'select',
+      options: ['none', 'fade'],
+      description: 'Animation type for the icon',
+    },
+    fillType: {
+      control: 'select',
+      options: ['fill', 'stroke'],
+      description: 'How to apply the color to the icon',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the icon is disabled',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args }
+  },
+  template: '<Icon v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '60px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const WithHover = Template.bind({})
+WithHover.args = {
+  name: 'warning',
+  color: 'blue',
+  hoveredColor: 'red',
+  size: '30px',
+  cursor: 'pointer',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const WithBackground = Template.bind({})
+WithBackground.args = {
+  name: 'checkmark',
+  color: 'white',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  backgroundColor: 'blue',
+  disabled: false,
+}
+
+export const WithCount = Template.bind({})
+WithCount.args = {
+  name: 'close',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 5,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Striked = Template.bind({})
+Striked.args = {
+  name: 'arrow_up',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: true,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Animated = Template.bind({})
+Animated.args = {
+  name: 'arrow_down',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'fade',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: true,
+}
+
+const IconLibraryTemplate = (args) => ({
+  components: { Icon },
+  setup() {
+    const icons = import.meta.glob('@/assets/svgIcons/*.svg', { eager: true })
+    const iconNames = Object.keys(icons)
+      .map((path) => {
+        const fileName = path.split('/').pop()
+        return fileName.replace('.svg', '')
+      })
+      .sort()
+
+    return { args, iconNames }
+  },
+  template: `
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; padding: 20px;">
+      <div v-for="iconName in iconNames" :key="iconName" style="text-align: center;">
+        <Icon v-bind="args" :name="iconName" />
+        <div style="font-size: 12px; margin-top: 8px; word-break: break-word;">{{ iconName }}</div>
+      </div>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const IconLibrary = IconLibraryTemplate.bind({})
+IconLibrary.args = {
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}

package/src/components/icon/index.vue

@@ -14,6 +14,7 @@
       :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
+      :show-count="showCount"
     >
       <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
@@ -113,6 +114,10 @@
       type: Boolean,
       default: false,
     },
+    showCount: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
@@ -170,6 +175,7 @@
     animation: String,
     fillType: String,
     disableHover: Boolean,
+    showCount: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -180,7 +186,8 @@
       background-color: ${(props) =>
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-      border-radius: ${(props) => (props.backgroundColor ? '8px' : '0')};
+      border-radius: ${(props) =>
+        props.showCount ? '8px 0 0  8px' : props.backgroundColor ? '8px' : '0'};
     }
     svg path:not(.fix) {
       ${({ theme, color, fillType }) =>

package/src/components/infoCard/index.vue

@@ -123,7 +123,11 @@
         return this.type === 'error_minor'
       },
       iconName() {
-        return this.type === 'warning' ? 'warning_triangle' : 'info'
+        return this.type === 'warning'
+          ? 'warning_triangle'
+          : this.isErrorMinor
+          ? 'erase'
+          : 'info'
       },
       presetStyles() {
         // the types that doesn't have explicit border anyway have it transparent
@@ -142,8 +146,8 @@
           stylesCollection.iconColor = theme.semanticColors.teal[800]
         } else if (this.isErrorMinor) {
           stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.pureRed
-          stylesCollection.iconColor = theme.colors.pureRed
+          stylesCollection.borderColor = theme.colors.grey4
+          stylesCollection.iconColor = theme.colors.red
         } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4

package/src/components/inputs/searchInput/index.vue

@@ -56,7 +56,7 @@
   const InputContainer = styled('input', inputAttrs)`
     border: 1px solid ${(props) => props.theme.colors.grey4};
     padding: ${(props) =>
-      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+      props.isFilter ? '8px 30px 8px 10px' : '11px 30px 11px 10px'};
     border-radius: 4px;
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};

package/src/components/inputs/select/index.vue

@@ -143,7 +143,7 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <component
+          <Component
             :is="shouldUseTeleport ? 'Teleport' : 'div'"
             :to="shouldUseTeleport ? 'body' : undefined"
           >
@@ -191,13 +191,14 @@
                     }
                   : undefined
               "
+              @click.stop
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
               <slot name="dropdown"></slot>
             </SelectDropdown>
-          </component>
+          </Component>
         </DropdownWrapper>
       </SelectButtonWrapper>
     </InputWrapper>
@@ -921,14 +922,14 @@
       },
       clickOutside(event) {
         const dropdownRef = this.$refs.dropdown
-        // we need to prevent closing on selecting an option, because in the case of
-        // a disabled option, we don't want to close the dropdown
         if (!this.isClickOutsideActive) return
         if (
           this.$refs.select.$el == event.target ||
           this.$refs.select.$el.contains(event.target) ||
           event.target.id === 'more-button' ||
-          event.target.parentNode === dropdownRef.$el
+          event.target.closest('.options-container') ||
+          event.target.parentNode === dropdownRef.$el ||
+          dropdownRef.$el.contains(event.target)
         ) {
           return
         } else {

package/src/components/inputs/select/option/index.vue

@@ -142,6 +142,11 @@
         required: false,
         default: 'inherit',
       },
+      showFullName: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {

package/src/components/projectMarker/ProjectMarker.stories.js

@@ -0,0 +1,130 @@
+import ProjectMarker from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/ProjectMarker',
+  component: ProjectMarker,
+  tags: ['autodocs'],
+  argTypes: {
+    markerData: {
+      control: 'object',
+      description:
+        'Object containing marker data including translations and color',
+    },
+    activeLanguage: {
+      control: 'text',
+      description: 'Currently active language code',
+    },
+    date: {
+      control: 'text',
+      description: 'Optional date to display next to the marker',
+    },
+    isEditable: {
+      control: 'boolean',
+      description: 'Whether the marker can be edited',
+    },
+    isGroupSupport: {
+      control: 'boolean',
+      description: 'Whether group support is enabled',
+    },
+    isLimitedPartner: {
+      control: 'boolean',
+      description: 'Whether the user is a limited partner',
+    },
+    cursor: {
+      control: 'text',
+      description: 'Cursor style for the marker',
+    },
+    hasBorderRadius: {
+      control: 'boolean',
+      description: 'Whether to show border radius',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { ProjectMarker },
+  setup() {
+    return { args }
+  },
+  template: '<ProjectMarker v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  markerData: {
+    choice: 'sold',
+    translations: {
+      'en-us': { name: 'Sold' },
+    },
+    color: '#4CAF50',
+    can_be_deleted: true,
+  },
+  activeLanguage: 'en-us',
+  date: '23.07.2022',
+  isEditable: true,
+  isGroupSupport: false,
+  isLimitedPartner: false,
+  cursor: 'pointer',
+  hasBorderRadius: true,
+}
+
+export const Lost = Template.bind({})
+Lost.args = {
+  ...Default.args,
+  markerData: {
+    choice: 'lost',
+    translations: {
+      'en-us': { name: 'Lost' },
+    },
+    color: '#F44336',
+    can_be_deleted: true,
+  },
+}
+
+export const Transferred = Template.bind({})
+Transferred.args = {
+  ...Default.args,
+  markerData: {
+    choice: 'transferred',
+    translations: {
+      'en-us': { name: 'Transferred' },
+    },
+    color: '#2196F3',
+    can_be_deleted: true,
+  },
+}
+
+export const WithoutDate = Template.bind({})
+WithoutDate.args = {
+  ...Default.args,
+  date: null,
+}
+
+export const NotEditable = Template.bind({})
+NotEditable.args = {
+  ...Default.args,
+  isEditable: false,
+}
+
+export const LimitedPartner = Template.bind({})
+LimitedPartner.args = {
+  ...Default.args,
+  isLimitedPartner: true,
+}
+
+export const WithGroupSupport = Template.bind({})
+WithGroupSupport.args = {
+  ...Default.args,
+  isGroupSupport: true,
+  isLimitedPartner: true,
+}
+
+export const WithoutBorderRadius = Template.bind({})
+WithoutBorderRadius.args = {
+  ...Default.args,
+  hasBorderRadius: false,
+}

package/src/components/selectedOptions/index.vue

@@ -36,8 +36,9 @@
                 />
               </ListItemTitle>
               <Icon
-                color="white"
+                :color="theme.colors.white"
                 :cursor="item.disabled ? 'not-allowed' : 'pointer'"
+                :hovered-color="theme.colors.white"
                 name="arrow_right"
                 size="20px"
               />
@@ -86,7 +87,13 @@
         </EmptyText>
         <CloseContainer>
           <IconContainer @click="$emit('on-close')">
-            <Icon color="white" cursor="pointer" name="close" size="14px" />
+            <Icon
+              :color="theme.colors.white"
+              cursor="pointer"
+              :hovered-color="theme.colors.white"
+              name="close"
+              size="14px"
+            />
           </IconContainer>
         </CloseContainer>
       </BoxContainer>
@@ -131,6 +138,7 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
   import Icon from '../icon'
+  import theme from '../../assets/theme'
 
   const PageWrapper = styled.div`
     font-size: 13px;
@@ -397,6 +405,9 @@
       }
     },
     computed: {
+      theme() {
+        return theme
+      },
       hasComponent() {
         return this.optionsList.some((item) => item.component)
       },

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -1,10 +1,143 @@
 import SelectedOptions from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
-  title: 'Components/SelectedOptions',
+  title: 'SelectedOptions',
   component: SelectedOptions,
   tags: ['autodocs'],
-  // argTypes: {}
+  argTypes: {
+    optionsList: {
+      control: 'object',
+      description:
+        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
+    },
+    numberSelected: {
+      control: 'number',
+      description: 'Number of items currently selected',
+    },
+    selectedLabel: {
+      control: 'text',
+      description:
+        'Custom label for the selected count (defaults to "selected")',
+    },
+    noBulkActionsLabel: {
+      control: 'text',
+      description:
+        'Custom label when no bulk actions are available (defaults to "no_batch_actions_available")',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { SelectedOptions },
+  setup() {
+    return { args }
+  },
+  template: '<SelectedOptions v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+  ],
+  numberSelected: 5,
+}
+
+export const WithDisabledOptions = Template.bind({})
+WithDisabledOptions.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      disabled: true,
+      disabledInfo: 'You do not have permission to delete these items',
+    },
+  ],
+  numberSelected: 3,
+}
+
+export const WithCustomComponent = Template.bind({})
+WithCustomComponent.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'set_supplier',
+      name: 'Set Supplier',
+      component: 'set_supplier',
+    },
+  ],
+  numberSelected: 2,
+}
+
+export const ManyOptions = Template.bind({})
+ManyOptions.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+    {
+      type: 'archive',
+      name: 'Archive',
+    },
+    {
+      type: 'move',
+      name: 'Move',
+    },
+    {
+      type: 'copy',
+      name: 'Copy',
+    },
+  ],
+  numberSelected: 10,
+}
+
+export const NoOptions = Template.bind({})
+NoOptions.args = {
+  optionsList: [],
+  numberSelected: 0,
+}
+
+export const CustomLabels = Template.bind({})
+CustomLabels.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+  ],
+  numberSelected: 1,
+  selectedLabel: 'item selected',
+  noBulkActionsLabel: 'No actions can be performed on selected items',
 }
 
 // How to use in your template
@@ -46,41 +179,6 @@ export default {
 //   </template>
 // </SelectedOptions>
 
-export const Default = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: '<SelectedOptions v-bind="args"  />',
-  }),
-  args: {
-    optionLimit: 4,
-    selectedLabel: 'selected',
-    noBulkActionsLabel: 'No bulk actions available',
-
-    //selected options count, in this case 5 options are selected
-    numberSelected: 5,
-
-    //show overlay
-    showOverlay: true,
-
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: false,
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-    ],
-    expandedOptions: [],
-  },
-}
-
 export const Expanded = {
   render: (args) => ({
     components: { SelectedOptions },