@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.2 → 8.16.2--EPDM-14330.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/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/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 },

package/src/components/spinner/Spinner.stories.js

@@ -1,34 +1,86 @@
 import Spinner from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Spinner',
   component: Spinner,
   tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the spinner',
+    },
+    isWhite: {
+      control: 'boolean',
+      description: 'Whether to use white color for the spinner',
+    },
+    limitedToModal: {
+      control: 'boolean',
+      description: 'Whether the spinner is limited to a modal context',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether to show the spinner with a full-width overlay',
+    },
+  },
 }
 
-// <spinner size="30px" fullWidth="false" limitedToModal="false" />
-
-export const DefaultSpinner = {
-  args: {
-    size: '60px',
+const Template = (args) => ({
+  components: { Spinner },
+  setup() {
+    return { args }
+  },
+  template: '<Spinner v-bind="args" />',
+  provide: {
+    theme,
   },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const SmallerSpinner = {
-  args: {
-    size: '30px',
-  },
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const LargerSpinner = {
-  args: {
-    size: '90px',
-  },
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
 }
 
-export const AlignCenterSpinner = {
-  args: {
-    size: '60px',
-    fullWidth: true,
-  },
+export const White = Template.bind({})
+White.args = {
+  size: 'medium',
+  isWhite: true,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const InModal = Template.bind({})
+InModal.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: true,
+  fullWidth: false,
+}
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: true,
 }