@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

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

@@ -54,6 +54,47 @@
   import Icon from '../../icon'
   import theme from '../../../assets/theme'
 
+  const getButtonState = (props) => {
+    if (props.isDisabled) return 'disabled'
+    if (props.isActive) return 'active'
+    return 'default'
+  }
+
+  const getButtonTextColor = (variantStyles, state) =>
+    variantStyles[state]?.textColor ?? variantStyles.default?.textColor
+
+  const getButtonBorder = (variantStyles, state) => {
+    const borderColor = variantStyles[state]?.borderColor
+    return borderColor ? `1px solid ${borderColor}` : 'none'
+  }
+
+  const resolveButtonTextColor = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return getButtonTextColor(variantStyles, 'disabled')
+    }
+    if (props.customTextColor) return props.customTextColor
+    return getButtonTextColor(variantStyles, interactionState)
+  }
+
+  const resolveButtonBackgroundColor = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return variantStyles.disabled?.backgroundColor
+    }
+    if (props.noBackgroundColor) return 'transparent'
+    return (
+      variantStyles[interactionState]?.backgroundColor ??
+      variantStyles.default?.backgroundColor
+    )
+  }
+
   const PageContainer = styled('div', { height: String, width: String })`
     height: ${(props) => props.height};
     width: ${(props) => props.width};
@@ -82,32 +123,22 @@
       props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.customTextColor
-        ? props.customTextColor
-        : props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
-    background-color: ${(props) =>
-      props.noBackgroundColor
-        ? 'transparent'
-        : props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
-        : props.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
+    color: ${(props) => {
+      const variantStyles =
+        props.theme.mainButton[props.appTheme][props.type][props.variant]
+      const state = props.isActive ? 'active' : 'default'
+      return resolveButtonTextColor(variantStyles, props, state)
+    }};
+    background-color: ${(props) => {
+      const variantStyles =
+        props.theme.mainButton[props.appTheme][props.type][props.variant]
+      const state = props.isActive ? 'active' : 'default'
+      return resolveButtonBackgroundColor(variantStyles, props, state)
+    }};
     border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
+      const variantStyles =
+        props.theme.mainButton[props.appTheme][props.type][props.variant]
+      return getButtonBorder(variantStyles, getButtonState(props))
     }};
     border-radius: 4px;
     text-align: center;
@@ -122,22 +153,46 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: ${(props) =>
-          props.isDisabled
-            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-                .disabled.backgroundColor
-            : props.theme.mainButton[props.appTheme][props.type][props.variant]
-                .hover.backgroundColor};
+        background-color: ${(props) => {
+          const variantStyles =
+            props.theme.mainButton[props.appTheme][props.type][props.variant]
+          return resolveButtonBackgroundColor(variantStyles, props, 'hover')
+        }};
+        color: ${(props) => {
+          const variantStyles =
+            props.theme.mainButton[props.appTheme][props.type][props.variant]
+          return resolveButtonTextColor(variantStyles, props, 'hover')
+        }};
+        border: ${(props) => {
+          const variantStyles =
+            props.theme.mainButton[props.appTheme][props.type][props.variant]
+          return getButtonBorder(
+            variantStyles,
+            props.isDisabled ? 'disabled' : 'hover'
+          )
+        }};
       }
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      background-color: ${(props) => {
+        const variantStyles =
+          props.theme.mainButton[props.appTheme][props.type][props.variant]
+        return resolveButtonBackgroundColor(variantStyles, props, 'active')
+      }};
+      color: ${(props) => {
+        const variantStyles =
+          props.theme.mainButton[props.appTheme][props.type][props.variant]
+        return resolveButtonTextColor(variantStyles, props, 'active')
+      }};
+      border: ${(props) => {
+        const variantStyles =
+          props.theme.mainButton[props.appTheme][props.type][props.variant]
+        return getButtonBorder(
+          variantStyles,
+          props.isDisabled ? 'disabled' : 'active'
+        )
+      }};
     }
   `
 
@@ -311,13 +366,12 @@
         return theme
       },
       getIconColor() {
-        return this.isDisabled
-          ? this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .disabled.textColor
-          : this.iconColor
-          ? this.iconColor
-          : this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .default.textColor
+        if (this.iconColor) return this.iconColor
+        if (this.isDisabled) {
+          return this.theme.mainButton[this.appTheme][this.type][this.variant]
+            .disabled.textColor
+        }
+        return 'currentColor'
       },
     },
     methods: {

package/src/components/buttons/splitButtons/splitButtons.stories.js

@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import SplitButtons from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Buttons/SplitButtons',
+  component: SplitButtons,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      description: 'Array of `{ label, value }` segments',
+    },
+    modelValue: {
+      control: 'text',
+      description: 'Currently selected value (v-model)',
+    },
+    dataIdKey: {
+      control: 'text',
+      description: 'Prefix for `data-id-key` on each segment',
+    },
+  },
+}
+
+const billingOptions = [
+  { label: 'Monthly', value: 'monthly' },
+  { label: 'Yearly', value: 'yearly' },
+]
+
+const segmentOptions = [
+  { label: 'Small', value: 'sm' },
+  { label: 'Medium', value: 'md' },
+  { label: 'Large', value: 'lg' },
+]
+
+const Template = (args) => ({
+  components: { SplitButtons },
+  setup() {
+    const modelValue = ref(args.modelValue)
+    return { args, modelValue }
+  },
+  template: `
+    <div data-test-id="split-buttons-story" style="padding: 16px;">
+      <SplitButtons
+        v-model="modelValue"
+        :options="args.options"
+        :data-id-key="args.dataIdKey"
+      />
+      <p style="margin-top: 12px; font-size: 13px; color: #444;">
+        Selected: <strong>{{ modelValue }}</strong>
+      </p>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const TwoOptions = Template.bind({})
+TwoOptions.args = {
+  options: billingOptions,
+  modelValue: 'monthly',
+  dataIdKey: 'billing_period',
+}
+
+export const ThreeOptions = Template.bind({})
+ThreeOptions.args = {
+  options: segmentOptions,
+  modelValue: 'md',
+  dataIdKey: 'size',
+}

package/src/components/card/Card.stories.js

@@ -1,7 +1,7 @@
 import Card from './index.vue'
 
 export default {
-  title: 'Card',
+  title: 'Components/Card/Card',
   component: Card,
   tags: ['autodocs'],
 }
@@ -30,15 +30,27 @@ export const Default = {
     template: `
       <Card v-bind="args">
         Sample card content
-      </ActionBanner>
+      </Card>
     `,
   }),
 }
 
 export const LoadingCard = {
   args: {
+    title: 'Sample card title',
     isLoading: true,
   },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </Card>
+    `,
+  }),
 }
 
 export const CustomWidth = {
@@ -54,7 +66,7 @@ export const CustomWidth = {
     template: `
       <Card v-bind="args">
         Sample card content
-      </ActionBanner>
+      </Card>
     `,
   }),
 }
@@ -73,7 +85,7 @@ export const PopoverShown = {
     template: `
       <Card v-bind="args">
         Sample card content
-      </ActionBanner>
+      </Card>
     `,
   }),
 }

package/src/components/card/index.vue

@@ -80,7 +80,7 @@
     font-size: 14px;
     line-height: 1;
     color: ${(props) => props.theme.colors.black};
-    font-weight: 700;
+    font-weight: 500;
     margin-bottom: 10px;
   `
 

package/src/components/collapsableInfoText/collapsableInfoText.stories.js

@@ -0,0 +1,52 @@
+import CollapsableInfoText from './index.vue'
+import theme from '@/assets/theme'
+
+const longCopy = `Line one introduces the topic.
+Line two adds technical detail your integrators care about.
+Line three explains edge cases.
+Line four lists prerequisites.
+Line five describes troubleshooting steps.
+Line six thanks the reader for patience.`
+
+export default {
+  title: 'Components/CollapsableInfoText/CollapsableInfoText',
+  component: CollapsableInfoText,
+  tags: ['autodocs'],
+  argTypes: {
+    text: { control: 'text' },
+    fontSize: { control: 'text' },
+    lineCount: { control: 'number' },
+    minWidth: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { CollapsableInfoText },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="collapsable-info-story" style="padding: 16px; max-width: 480px;">
+      <CollapsableInfoText v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  text: longCopy,
+  fontSize: '14px',
+  lineCount: 3,
+  minWidth: '100%',
+}
+
+export const ShortText = Template.bind({})
+ShortText.args = {
+  text: 'Only two lines.\nNo expand needed.',
+  fontSize: '14px',
+  lineCount: 5,
+  minWidth: '100%',
+}

package/src/components/deleteIcon/DeleteIcon.stories.js

@@ -1,7 +1,7 @@
 import DeleteIcon from './index.vue'
 
 export default {
-  title: 'DeleteIcon',
+  title: 'Components/DeleteIcon/DeleteIcon',
   component: DeleteIcon,
   // argTypes: {},
 }

package/src/components/draggableCard/draggableCard.stories.js

@@ -2,7 +2,7 @@ import DraggableCard from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'DraggableCard',
+  title: 'Components/DraggableCard/DraggableCard',
   component: DraggableCard,
   tags: ['autodocs'],
   argTypes: {

package/src/components/draggableInputHandle/draggableInputHandle.stories.js

@@ -0,0 +1,43 @@
+import DraggableInputHandle from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/DraggableInputHandle/DraggableInputHandle',
+  component: DraggableInputHandle,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    height: { control: 'text', description: 'Total handle height (matches select row)' },
+  },
+}
+
+const Template = (args) => ({
+  components: { DraggableInputHandle },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div
+      data-test-id="draggable-handle-story"
+      style="position: relative; height: 42px; width: 120px; border: 1px dashed #ccc; padding-left: 8px;"
+    >
+      <DraggableInputHandle :height="args.height" />
+      <span style="margin-left: 28px; line-height: 42px; font-size: 13px;">Drag icon</span>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  height: '34px',
+}
+
+export const TallRow = Template.bind({})
+TallRow.args = {
+  height: '48px',
+}

package/src/components/dropdown/Dropdown.stories.js

@@ -3,7 +3,7 @@ import Dropdown from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Dropdown',
+  title: 'Components/Dropdown/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
   argTypes: {

package/src/components/errorMessage/errorMessage.stories.js

@@ -1,35 +1,49 @@
 import ErrorMessage from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
-  title: 'ErrorMessage',
+  title: 'Components/ErrorMessage/ErrorMessage',
   component: ErrorMessage,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    marginTop: { control: 'text' },
+  },
 }
 
-// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
-//
-//To use:
-// <error-message>
-//     <span>
-//         testing error message
-//     </span>
-// </error-message>
-
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ErrorMessage },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   template: `
-  <ErrorMessage v-bind="$props">
-    <span>
-        testing error message
-    </span>
-  </ErrorMessage>`,
+  <div data-test-id="error-message-story" style="max-width: 420px;">
+    <ErrorMessage v-bind="args">
+      <span data-test-id="error-slot">{{ args.message }}</span>
+    </ErrorMessage>
+  </div>`,
+  provide: {
+    theme,
+  },
 })
 
 export const Default = Template.bind({})
 Default.args = {
   marginTop: '13px',
+  message: 'The reference number could not be validated. Check the format and try again.',
+}
+
+export const ShortInline = Template.bind({})
+ShortInline.args = {
+  marginTop: '8px',
+  message: 'Required field.',
+}
+
+export const LongServerMessage = Template.bind({})
+LongServerMessage.args = {
+  marginTop: '16px',
+  message:
+    'We could not reach the billing service (timeout after 30s). Your changes were not saved. Retry in a few minutes or contact support with correlation ID 8f3c-2291.',
 }

package/src/components/filter/filterSettings.vue

@@ -536,7 +536,7 @@
     marginTop: Boolean,
   }
   const RowLabel = styled('div', LabelAttrs)`
-    font-weight: 700;
+    font-weight: 500;
     font-size: 13px;
     margin-bottom: 8px;
     margin-top: ${(props) => (props.marginTop ? '12px' : '0')};

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

@@ -2,7 +2,7 @@ import Icon from './index.js'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Icon',
+  title: 'Components/Icon/Icon',
   component: Icon,
   tags: ['autodocs'],
   argTypes: {

package/src/components/iconWrapper/iconWrapper.stories.js

@@ -0,0 +1,78 @@
+import IconWrapper from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/IconWrapper/IconWrapper',
+  component: IconWrapper,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    name: { control: 'text', description: 'SVG icon key under svgIcons' },
+    size: { control: 'text' },
+    iconSize: { control: 'text' },
+    iconColor: { control: 'text' },
+    hasBorder: { control: 'boolean' },
+    hasCaret: { control: 'boolean' },
+    hasLock: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    isStriked: { control: 'boolean' },
+    dataId: { control: 'text' },
+    dataQaId: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { IconWrapper },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="icon-wrapper-story" style="padding: 24px; background: #f4f6f8;">
+      <IconWrapper v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'House',
+  size: '40px',
+  iconSize: '22px',
+  iconColor: 'purple',
+  hasBorder: true,
+  borderRadius: '8px',
+  dataId: 'icon_wrapper_demo',
+  dataQaId: 'icon_wrapper_demo',
+}
+
+export const WithCaret = Template.bind({})
+WithCaret.args = {
+  ...Default.args,
+  name: 'arrow_down',
+  hasCaret: true,
+}
+
+export const WithLockBadge = Template.bind({})
+WithLockBadge.args = {
+  ...Default.args,
+  name: 'House',
+  hasLock: true,
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Default.args,
+  isLoading: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+}

package/src/components/infoCard/InfoCard.stories.js

@@ -3,7 +3,7 @@ import InfoCard from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'InfoCard',
+  title: 'Components/InfoCard/InfoCard',
   component: InfoCard,
   tags: ['autodocs'],
   argTypes: {

package/src/components/infoLabel/infoLabel.stories.js

@@ -0,0 +1,61 @@
+import InfoLabel from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/InfoLabel/InfoLabel',
+  component: InfoLabel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    infoType: {
+      control: 'select',
+      options: ['hint', 'warning', 'error'],
+      description: 'Drives background colour and default copy',
+    },
+    labelText: {
+      control: 'text',
+      description: 'When set, overrides translated default for the type',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { InfoLabel },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="info-label-story" style="padding: 16px;">
+      <InfoLabel v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Hint = Template.bind({})
+Hint.args = {
+  infoType: 'hint',
+  labelText: '',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  infoType: 'warning',
+  labelText: '',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  infoType: 'error',
+  labelText: '',
+}
+
+export const CustomCopy = Template.bind({})
+CustomCopy.args = {
+  infoType: 'hint',
+  labelText: 'VAT applies to Swiss customers only.',
+}

package/src/components/infoText/infoText.stories.js

@@ -3,7 +3,7 @@ import InfoText from './index.vue'
 import IconTextContent from './templates/iconTextContent.vue'
 
 export default {
-  title: 'infoText',
+  title: 'Components/InfoText/InfoText',
   component: InfoText,
   tags: ['autodocs'],
   parameters: {