@eturnity/eturnity_reusable_components 9.22.2 → 9.25.1

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: {

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -1,7 +1,7 @@
 import Checkbox from './index.vue'
 
 export default {
-  title: 'Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
 }

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

@@ -45,6 +45,12 @@
   // />
   import styled from 'vue3-styled-components'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
   const ComponentWrapper = styled.div`
     min-height: 16px;
   `
@@ -178,7 +184,10 @@
     isDisabled: Boolean,
   }
   const LabelText = styled('div', LabelTextAttrs)`
-    font-size: 13px;
+    font-size: ${inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
     display: flex;
     align-items: center;
     min-height: 16px;

package/src/components/inputs/colorSelector/ColorSelector.stories.js

@@ -0,0 +1,78 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultProps from './defaultProps'
+import ColorSelector from './index.vue'
+import {
+  PANEL_FILL_COLORS,
+  TRANSPARENT_COLOR,
+} from '@/constants/colorPalettes.js'
+
+export default {
+  title: 'Components/Inputs/ColorSelector',
+  component: ColorSelector,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['default', 'compact'],
+    },
+  },
+}
+
+// import ColorSelector from "@eturnity/eturnity_reusable_components/src/components/inputs/colorSelector"
+// <ColorSelector
+//   :colors="colors"
+//   :selected-color="selectedColor"
+//   data-id="my_color_selector"
+//   label="Color"
+//   size="default"
+//   @color-change="onColorChange"
+// />
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleColorChange = (color) => {
+    action('color-change')(color)
+    updateArgs({ selectedColor: color })
+  }
+
+  return {
+    components: { ColorSelector },
+    setup() {
+      return { args: currentArgs, handleColorChange }
+    },
+    template: `
+      <div style="padding: 16px; background: #263238;">
+        <ColorSelector
+          v-bind="args"
+          @color-change="handleColorChange"
+        />
+      </div>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const WithTransparent = Template.bind({})
+WithTransparent.args = {
+  ...defaultProps,
+  colors: PANEL_FILL_COLORS,
+  selectedColor: TRANSPARENT_COLOR,
+}
+
+export const Compact = Template.bind({})
+Compact.args = {
+  ...defaultProps,
+  size: 'compact',
+}
+
+export const WithoutCustomPicker = Template.bind({})
+WithoutCustomPicker.args = {
+  ...defaultProps,
+  showCustomPicker: false,
+}

package/src/components/inputs/colorSelector/colorSelector.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import ColorSelector from './index.vue'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+import { TRANSPARENT_COLOR } from '@/constants/colorPalettes.js'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+jest.mock('@/components/icon', () => ({
+  name: 'Icon',
+  template: '<div class="mock-icon" />',
+  props: ['name', 'color', 'size', 'cursor'],
+}))
+
+describe('ColorSelector', () => {
+  const colors = ['#000000', '#ff0000', TRANSPARENT_COLOR]
+
+  const mountSelector = (props = {}) =>
+    mount(ColorSelector, {
+      props: {
+        colors,
+        selectedColor: colors[0],
+        dataId: 'test_color_selector',
+        ...props,
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+  it('renders a swatch per color and the custom picker by default', () => {
+    const wrapper = mountSelector()
+    expect(wrapper.findAll('[data-test-id^="color_selector_swatch_"]')).toHaveLength(
+      colors.length
+    )
+    expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
+      true
+    )
+  })
+
+  it('emits color-change when a preset swatch is clicked', async () => {
+    const wrapper = mountSelector()
+    await wrapper.find('[data-test-id="color_selector_swatch_1"]').trigger('click')
+    expect(wrapper.emitted('color-change')).toBeTruthy()
+    expect(wrapper.emitted('color-change')[0]).toEqual([colors[1]])
+  })
+
+  it('emits color-change when the native color input changes', async () => {
+    const wrapper = mountSelector({ selectedColor: '#123456' })
+    const input = wrapper.find('[data-test-id="color_selector_native_input"]')
+    await input.setValue('#abcdef')
+    expect(wrapper.emitted('color-change')).toBeTruthy()
+    expect(wrapper.emitted('color-change').at(-1)).toEqual(['#abcdef'])
+  })
+
+  it('hides the custom picker when showCustomPicker is false', () => {
+    const wrapper = mountSelector({ showCustomPicker: false })
+    expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
+      false
+    )
+    expect(
+      wrapper.find('[data-test-id="color_selector_native_input"]').exists()
+    ).toBe(false)
+  })
+
+  it('sets data-id on swatches when dataId is provided', () => {
+    const wrapper = mountSelector()
+    const swatch = wrapper.find('[data-test-id="color_selector_swatch_0"]')
+    expect(swatch.attributes('data-id')).toBe('test_color_selector_color_0')
+  })
+})

package/src/components/inputs/colorSelector/defaultProps.js

@@ -0,0 +1,11 @@
+import { THEME_COLORS } from '@/constants/colorPalettes.js'
+
+export default {
+  colors: THEME_COLORS,
+  selectedColor: THEME_COLORS[0],
+  label: '',
+  dataId: '',
+  dataQaId: '',
+  size: 'default',
+  showCustomPicker: true,
+}

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

@@ -0,0 +1,224 @@
+<template>
+  <ColorContainer>
+    <LabelContainer v-if="label">
+      <label>{{ label }}</label>
+    </LabelContainer>
+    <ColorsWrapper>
+      <ColorRadio
+        v-for="(color, index) in colors"
+        :key="index"
+        :color="color"
+        :data-id="swatchDataId(index)"
+        :data-qa-id="swatchDataQaId(index)"
+        :data-test-id="`color_selector_swatch_${index}`"
+        :is-selected="index === colorIndex"
+        :size="size"
+        @click="changeColorIndex(index)"
+      >
+        <CrossedIcon v-if="color === TRANSPARENT_COLOR" :size="size">
+          <Icon
+            :color="colorIndex === index ? 'white' : 'grey1'"
+            cursor="default"
+            name="cross"
+            size="14px"
+          />
+        </CrossedIcon>
+      </ColorRadio>
+      <ColorRadioCustom
+        v-if="showCustomPicker"
+        :color="colorIndex >= 0 ? 'transparent' : selectedColor"
+        :data-id="customDataId"
+        :data-qa-id="customDataQaId"
+        data-test-id="color_selector_custom"
+        :is-selected="colorIndex < 0"
+        :size="size"
+        @click="openColorPicker"
+      >
+        <Icon
+          :color="colorIndex < 0 ? 'white' : 'grey1'"
+          cursor="default"
+          name="add_icon"
+          size="14px"
+        />
+      </ColorRadioCustom>
+      <input
+        v-if="showCustomPicker"
+        ref="colorPicker"
+        data-test-id="color_selector_native_input"
+        :style="nativeInputStyle"
+        type="color"
+        :value="selectedColor"
+        @change="defineCustomColor"
+      />
+    </ColorsWrapper>
+  </ColorContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import Icon from '../../../components/icon'
+  import { TRANSPARENT_COLOR } from '../../../constants/colorPalettes.js'
+
+  const swatchProps = { isSelected: Boolean, color: String, size: String }
+
+  const swatchSize = (size) => (size === 'compact' ? '24px' : '34px')
+
+  const CrossedIcon = styled('div', { size: String })`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  `
+
+  const ColorRadio = styled('div', swatchProps)`
+    position: relative;
+    width: ${(props) => swatchSize(props.size)};
+    height: ${(props) => swatchSize(props.size)};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid
+      ${(props) =>
+        props.isSelected
+          ? 'white'
+          : props.size === 'compact'
+            ? props.theme.colors.grey2
+            : 'transparent'};
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    color: white;
+    cursor: pointer;
+
+    &:hover {
+      border-color: white;
+    }
+  `
+
+  const ColorRadioCustom = styled('div', swatchProps)`
+    border: 2px solid
+      ${(props) => (props.isSelected ? 'white' : props.theme.colors.grey1)};
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    color: ${(props) =>
+      props.isSelected ? 'white' : props.theme.colors.grey1};
+    display: inline-flex;
+    width: ${(props) => swatchSize(props.size)};
+    height: ${(props) => swatchSize(props.size)};
+    justify-content: center;
+    vertical-align: top;
+    cursor: pointer;
+    align-items: center;
+  `
+
+  const ColorContainer = styled('div')`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `
+
+  const ColorsWrapper = styled('div')`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    position: relative;
+  `
+
+  const LabelContainer = styled('div')`
+    font-size: 13px;
+    font-weight: 500;
+  `
+
+  const nativeInputStyle = {
+    width: 0,
+    height: 0,
+    opacity: 0,
+    position: 'absolute',
+  }
+
+  export default {
+    name: 'ColorSelector',
+
+    components: {
+      ColorRadio,
+      ColorRadioCustom,
+      ColorContainer,
+      ColorsWrapper,
+      CrossedIcon,
+      Icon,
+      LabelContainer,
+    },
+
+    props: {
+      colors: {
+        type: Array,
+        required: true,
+      },
+      selectedColor: {
+        type: String,
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
+      size: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'compact'].includes(value),
+      },
+      showCustomPicker: {
+        type: Boolean,
+        default: true,
+      },
+    },
+
+    emits: ['color-change'],
+
+    data() {
+      return {
+        TRANSPARENT_COLOR,
+        nativeInputStyle,
+      }
+    },
+
+    computed: {
+      colorIndex() {
+        return this.colors.findIndex((color) => color === this.selectedColor)
+      },
+      customDataId() {
+        return this.dataId ? `${this.dataId}_custom` : undefined
+      },
+      customDataQaId() {
+        const id = this.dataQaId || this.dataId
+        return id ? `${id}_custom` : undefined
+      },
+    },
+
+    methods: {
+      swatchDataId(index) {
+        return this.dataId ? `${this.dataId}_color_${index}` : undefined
+      },
+      swatchDataQaId(index) {
+        const id = this.dataQaId || this.dataId
+        return id ? `${id}_color_${index}` : undefined
+      },
+      changeColorIndex(index) {
+        this.$emit('color-change', this.colors[index])
+      },
+      defineCustomColor(event) {
+        this.$emit('color-change', event.target.value)
+      },
+      openColorPicker() {
+        this.$refs.colorPicker?.click()
+      },
+    },
+  }
+</script>

package/src/components/inputs/inputNumber/InputNumber.stories.js

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

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

@@ -50,7 +50,7 @@
             "
             :border-color="
               colorMode === 'transparent' && !borderColor
-                ? 'white'
+                ? 'grey4'
                 : borderColor
             "
             :color-mode="colorMode"
@@ -97,7 +97,7 @@
           colorMode === 'transparent' ? 'transparent' : backgroundColor
         "
         :border-color="
-          colorMode === 'transparent' && !borderColor ? 'white' : borderColor
+          colorMode === 'transparent' && !borderColor ? 'grey4' : borderColor
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
@@ -250,6 +250,12 @@
   import IsRequiredLabelStar from '../isRequiredLabelStar'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const inputProps = {
     isError: Boolean,
@@ -293,14 +299,14 @@
       props.isInfoBorder
         ? '1px solid ' + props.theme.semanticColors.blue[500]
         : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
+          ? '1px solid ' + props.theme.colors.red
+          : props.noBorder
+            ? 'none'
+            : props.borderColor
+              ? props.theme.colors[props.borderColor]
+                ? '1px solid ' + props.theme.colors[props.borderColor]
+                : '1px solid ' + props.borderColor
+              : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
     padding: ${({ colorMode }) =>
@@ -316,14 +322,14 @@
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
-        ? '0'
-        : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
-          ? 'calc(' + slotSize + ' + 24px)'
-          : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
-        ? '24px'
-        : '5px'};
+          ? '0'
+          : slotSize
+            ? isError && !showLinearUnitName && !isBorderErrorOnly
+              ? 'calc(' + slotSize + ' + 24px)'
+              : 'calc(' + slotSize + ' + 10px)'
+            : isError && !showLinearUnitName && !isBorderErrorOnly
+              ? '24px'
+              : '5px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'
@@ -336,22 +342,22 @@
       props.isError
         ? props.theme.colors.grey6
         : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? props.theme.colors.white
-          : props.theme.colors.grey2
-        : props.fontColor
-        ? props.fontColor + ' !important'
-        : props.theme.colors.black};
+          ? props.colorMode === 'transparent'
+            ? props.theme.colors.white
+            : props.theme.colors.grey2
+          : props.fontColor
+            ? props.fontColor + ' !important'
+            : props.theme.colors.black};
     background-color: ${(props) =>
       props.readOnly
         ? props.theme.semanticColors.grey[300]
         : props.isDisabled
-        ? props.colorMode === 'transparent'
-          ? 'transparent'
-          : props.theme.colors.grey5
-        : props.backgroundColor
-        ? props.backgroundColor + ' !important'
-        : props.theme.colors.white};
+          ? props.colorMode === 'transparent'
+            ? 'transparent'
+            : props.theme.colors.grey5
+          : props.backgroundColor
+            ? props.backgroundColor + ' !important'
+            : props.theme.colors.white};
     width: ${(props) =>
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -429,8 +435,8 @@
         props.isError
           ? props.theme.colors.red
           : props.hasLength
-          ? props.theme.colors.black
-          : props.theme.colors.mediumGray};
+            ? props.theme.colors.black
+            : props.theme.colors.mediumGray};
     position: absolute;
     right: 10px;
     top: 10px;
@@ -440,8 +446,8 @@
       props.isError
         ? props.theme.colors.red
         : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
+          ? props.theme.colors.black
+          : props.theme.colors.mediumGray};
   `
 
   const SlotContainer = styled('span', inputProps)`
@@ -451,8 +457,8 @@
         props.isError
           ? props.theme.colors.red
           : props.hasLength
-          ? props.theme.colors.black
-          : props.theme.colors.mediumGray};
+            ? props.theme.colors.black
+            : props.theme.colors.mediumGray};
     position: absolute;
     width: ${(props) =>
       props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
@@ -463,8 +469,8 @@
       props.isError
         ? props.theme.colors.red
         : props.hasLength
-        ? props.theme.colors.black
-        : props.theme.colors.mediumGray};
+          ? props.theme.colors.black
+          : props.theme.colors.mediumGray};
   `
 
   const LabelWrapper = styled('div', inputProps)`
@@ -483,25 +489,29 @@
       props.alignItems == 'vertical'
         ? 'none'
         : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
-        ? 'none'
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
+          ? '1px solid ' + props.theme.colors.red
+          : props.noBorder
+            ? 'none'
+            : props.borderColor
+              ? props.theme.colors[props.borderColor]
+                ? '1px solid ' + props.theme.colors[props.borderColor]
+                : '1px solid ' + props.borderColor
+              : '1px solid ' + props.theme.colors.grey4};
     border-radius: 4px 0 0 4px;
     border-right: none;
   `
 
   const LabelText = styled('div', inputProps)`
-    font-size: 13px;
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${(props) =>
+      props.labelFontWeight ? props.labelFontWeight : inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
     color: ${(props) =>
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor};
-    font-weight: ${(props) => props.labelFontWeight};
   `
 
   const IconAttrs = { size: String, marginRight: Number }
@@ -737,7 +747,7 @@
       labelFontWeight: {
         type: String,
         required: false,
-        default: '700',
+        default: '500',
       },
       focus: {
         type: Boolean,
@@ -942,8 +952,8 @@
             this.defaultNumber || this.defaultNumber === 0
               ? this.defaultNumber
               : this.minNumber || this.minNumber === 0
-              ? this.minNumber
-              : value
+                ? this.minNumber
+                : value
         }
         if (!this.allowNegative) {
           value = Math.abs(value)
@@ -1083,10 +1093,10 @@
           value || value === 0
             ? value
             : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
+              ? this.defaultNumber
+              : this.minNumber || this.minNumber === 0
+                ? this.minNumber
+                : ''
         if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
@@ -1115,10 +1125,10 @@
           value || value === 0
             ? value
             : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
+              ? this.defaultNumber
+              : this.minNumber || this.minNumber === 0
+                ? this.minNumber
+                : ''
         if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({