@eturnity/eturnity_reusable_components 8.31.5-EPDM-16219.2 → 8.31.5-EPDM-13618.2

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

@@ -1,53 +1,125 @@
+import defaultDropdownProps from './defaultProps'
 import Dropdown from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Dropdown',
   component: Dropdown,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Dropdown },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Dropdown v-bind="$props">
-  <template #trigger>
-      trigger button
-  </template>
-  <template #dropdown>
-      <div>
-        <h3>fully customizable dropdown</h3>
-        <ul>
-          <li>item</li>
-          <li>item</li>
-          <li>item</li>
-        </ul>
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      description: '',
+    },
+    gap: {
+      description: 'Gap between trigger and dropdown content',
+    },
+    justify: {
+      description:
+        'Rule to allign the dropdown content relatively to the trigger',
+      control: 'select',
+      options: ['right', 'left'],
+    },
+    openingMode: {
+      description:
+        'Way to open the dropdown content: eigther by clicking on trigger or hovering it',
+      control: 'select',
+      options: ['hover', 'click'],
+    },
+    backgroundColor: {
+      description: 'Backbround color of dropdown content',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.white,
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+
+    // slots
+    trigger: {
+      description: 'Trigger button slot',
+    },
+    dropdown: {
+      description: 'Dropdown content slot',
+    },
+  },
+}
+
+// To use:
+// import Dropdown from '@eturnity/eturnity_reusable_components/src/components/dropdown'
+// <Dropdown
+//   width="fit-content"
+//   gap="20px"
+//   justify="right"
+//   opening-mode="click"
+//   background-color="red"
+// >
+//   <template #trigger>
+//     TRIGGER BUTTON
+//   </template>
+//   <template #dropdown>
+//     <div>
+//       <div>OPTION 1</div>
+//       <div>OPTION 2</div>
+//     </div>
+//   </template>
+// <Dropdown/>
+
+const Template = (args) => {
+  return {
+    components: { Dropdown },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="margin-left: 30px;">
+        <Dropdown v-bind="args">
+          <template #trigger>
+            {{ args.trigger }}
+          </template>
+          <template #dropdown>
+            <div v-html="args.dropdown"></div>
+          </template>
+        </Dropdown>
       </div>
-  </template>
-</Dropdown>`,
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-})
+    `,
+  }
+}
 
 export const Default = Template.bind({})
 Default.args = {
-  openingMode: 'click',
+  ...defaultDropdownProps,
+}
+
+export const DropdownWidth = Template.bind({})
+DropdownWidth.args = {
+  ...defaultDropdownProps,
+  width: 'max-content',
+}
+
+export const DropdownGap = Template.bind({})
+DropdownGap.args = {
+  ...defaultDropdownProps,
   gap: '0px',
-  justify: 'left',
-  width: '150px',
 }
 
-export const withHover = Template.bind({})
-withHover.args = {
-  openingMode: 'hover',
-  gap: '20px',
+export const DropdownJustifyRight = Template.bind({})
+DropdownJustifyRight.args = {
+  ...defaultDropdownProps,
   justify: 'right',
-  width: '250px',
+}
+
+export const DropdownOpeningModeClick = Template.bind({})
+DropdownOpeningModeClick.args = {
+  ...defaultDropdownProps,
+  openingMode: 'click',
+}
+
+export const DropdownBackgroundColor = Template.bind({})
+DropdownBackgroundColor.args = {
+  ...defaultDropdownProps,
+  backgroundColor: theme.colors.red,
 }

package/src/components/dropdown/defaultProps.js

@@ -0,0 +1,7 @@
+const defaultProps = {
+  // info card content slot
+  trigger: 'TRIGGER BUTTON',
+  dropdown: `<div>DROPDOWN OPTION 1</div><div>DROPDOWN OPTION 2</div>`,
+}
+
+export default defaultProps

package/src/components/dropdown/dropdown.spec.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import RCDropdown from '@/components/dropdown'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('dropdown/index.vue', () => {
+  it('dropdown is rendered with correct trigger text', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+
+    expect(dropdownTrigger.exists()).toBe(true)
+    expect(dropdownTrigger.text()).toContain(defaultProps.trigger)
+  })
+
+  it('dropdown opens on click only', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps, openingMode: 'click' },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownDropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('hover')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('click')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(true)
+  })
+})

package/src/components/dropdown/index.vue

@@ -1,18 +1,26 @@
 <template>
-  <Wrapper ref="dropdown" :opening-mode="openingMode">
-    <WrapperButton @click="isOpenByClick = !isOpenByClick">
+  <Wrapper
+    data-test-id="dropdown_wrapper"
+    ref="dropdown"
+    :opening-mode="openingMode"
+  >
+    <WrapperButton
+      data-test-id="dropdown_trigger"
+      @click="toggleIsOpenByClick(!isOpenByClick)"
+    >
       <slot name="trigger"></slot>
     </WrapperButton>
     <WrapperDropdown
       :background-color="backgroundColor"
       class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
+      :class="{ openDropdown: isOpenByClick && openingMode === 'click' }"
+      data-test-id="dropdown_dropdown_wrapper"
       :justify="justify"
-      :position="position"
       :width="width"
     >
       <DropdownWindow
         :background-color="backgroundColor"
+        data-test-id="dropdown_dropdown_content"
         :gap="gap"
         :width="width"
       >
@@ -23,14 +31,6 @@
 </template>
 
 <script>
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<DropdownComponent
-  //    width="300px"
-  //    backgroundColor="red">
-
-  // <DropdownComponent/>
-
   import styled from 'vue3-styled-components'
 
   const wrapperAttrs = {
@@ -45,11 +45,11 @@
     position: relative;
 
     &:hover .dropdown-content {
-      ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
+      ${(props) => (props.openingMode === 'hover' ? 'display: block;' : '')}
     }
     & .openDropdown {
       ${(props) =>
-        props.openingMode == 'click' ? 'display:block !important' : ''}
+        props.openingMode === 'click' ? 'display: block !important;' : ''}
     }
   `
   const WrapperDropdown = styled('div', wrapperAttrs)`
@@ -57,7 +57,7 @@
     display: none;
     position: absolute;
     z-index: 1;
-    ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
+    ${(props) => (props.justify === 'right' ? 'right: 0;' : '')}
   `
   const DropdownWindow = styled('div', wrapperAttrs)`
     width: ${(props) => props.width};
@@ -86,26 +86,27 @@
     props: {
       width: {
         required: false,
+        type: String,
         default: '300px',
       },
       gap: {
         required: false,
+        type: String,
         default: '10px',
       },
-      position: {
-        required: false,
-        default: 'bottom',
-      },
       justify: {
         required: false,
+        type: String,
         default: 'left',
       },
       openingMode: {
         required: false,
+        type: String,
         default: 'hover',
       },
       backgroundColor: {
         required: false,
+        type: String,
         default: 'white',
       },
     },
@@ -121,18 +122,26 @@
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
+      toggleIsOpenByClick(value) {
+        this.isOpenByClick = value
+      },
       clickOutside(event) {
         if (this.openingMode != 'click') return
         if (
           this.$refs.dropdown &&
-          (this.$refs.dropdown.$el == event.target ||
+          (this.$refs.dropdown.$el === event.target ||
             this.$refs.dropdown.$el.contains(event.target))
         ) {
           return
         } else {
-          this.isOpenByClick = false
+          this.toggleIsOpenByClick(false)
         }
       },
     },
+    watch: {
+      isOpenByClick(newVal) {
+        this.$emit('on-dropdown-toggle', newVal)
+      },
+    },
   }
 </script>

package/src/components/infoCard/index.vue

@@ -5,7 +5,6 @@
     :border-style="borderStyle"
     :color="color"
     data-test-id="info_card_wrapper"
-    :min-height="minHeight"
     :min-width="minWidth"
     :padding="padding"
     :preset-styles="presetStyles"
@@ -29,7 +28,6 @@
   import RCIcon from '../icon'
 
   const infoContainerAttrs = {
-    minHeight: String,
     minWidth: String,
     color: String,
     alignItems: String,
@@ -44,7 +42,6 @@
       props.alignItems ? props.alignItems : props.presetStyles.alignItems};
     gap: 16px;
     min-width: ${(props) => props.minWidth};
-    min-height: ${(props) => props.minHeight};
     padding: ${(props) =>
       props.padding ? props.padding : props.presetStyles.padding};
     color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
@@ -88,11 +85,6 @@
         type: String,
         default: '',
       },
-      minHeight: {
-        required: false,
-        type: String,
-        default: '',
-      },
       iconColor: {
         required: false,
         type: String,

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

@@ -24,7 +24,6 @@
 
       <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
-        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
     </Container>
   </ComponentWrapper>
@@ -44,7 +43,7 @@
   //     cursorType="default"
   // />
   import styled from 'vue3-styled-components'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
+
   const ComponentWrapper = styled.div`
     min-height: 16px;
   `
@@ -194,7 +193,6 @@
       InputCheckbox,
       LabelText,
       CheckWrapper,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -245,10 +243,6 @@
         required: false,
         default: 'left',
       },
-      isRequiredLabel: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       hasLabel() {

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

@@ -10,7 +10,6 @@
       @mousedown="initInteraction"
     >
       <slot name="label"></slot>
-      <IsRequiredLabelStar v-if="isRequiredLabel" />
     </LabelSlotWrapper>
     <LabelWrapper v-if="labelText">
       <LabelText
@@ -20,7 +19,6 @@
         :label-font-weight="labelFontWeight"
       >
         {{ labelText }}
-        <IsRequiredLabelStar v-if="isRequiredLabel" />
       </LabelText>
 
       <InfoText
@@ -240,7 +238,6 @@
   import ErrorMessage from '../../errorMessage'
   import RCSelect from '../select'
   import RCOption from '../select/option'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
 
@@ -562,7 +559,6 @@
       ArrowButton,
       ArrowDivider,
       InputInfoText,
-      IsRequiredLabelStar,
     },
     inheritAttrs: false,
     props: {
@@ -807,10 +803,6 @@
         type: Boolean,
         default: true,
       },
-      isRequiredLabel: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {

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

@@ -14,7 +14,6 @@
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
@@ -106,7 +105,6 @@
   import Icon from '../../icon'
   import ErrorMessage from '../../errorMessage'
   import InputValidations from '../../../mixins/inputValidations.js'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     width: 100%;
@@ -266,7 +264,6 @@
       IconContainer,
       InputErrorWrapper,
       OptionalLabel,
-      IsRequiredLabelStar,
     },
     mixins: [InputValidations],
     props: {
@@ -426,11 +423,6 @@
         default: '',
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {

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

@@ -33,7 +33,6 @@
           :is-disabled="isItemDisabled(item)"
         >
           {{ item.label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText
           v-if="item.infoText"
@@ -98,7 +97,6 @@
   import styled from 'vue3-styled-components'
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const wrapperProps = {
     layout: String,
@@ -261,7 +259,6 @@
       ModalImageContainer,
       InfoText,
       LabelText,
-      IsRequiredLabelStar,
     },
     props: {
       disabled: {
@@ -315,11 +312,6 @@
         required: false,
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -26,7 +26,6 @@
           "
           :font-size="fontSize"
           >{{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
             ({{ $gettext('Optional') }})</OptionalLabel
           >
@@ -236,7 +235,6 @@
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   import { debounce } from '../../../utils'
 
   const CARET_WIDTH = '30px'
@@ -513,7 +511,6 @@
       InputText,
       Teleport,
       DraggableInputHandle,
-      IsRequiredLabelStar,
     },
 
     props: {
@@ -532,11 +529,6 @@
       label: {
         required: false,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
       labelOptional: {
         required: false,
         default: false,

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

@@ -15,7 +15,6 @@
       >
         <LabelText :size="size">
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -81,7 +80,6 @@
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
   import RCIcon from '../../icon'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
   const OptionIconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -192,7 +190,6 @@
       SwitchOption,
       OptionIconContainer,
       RCIcon,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -238,11 +235,6 @@
         required: false,
         default: null,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {

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

@@ -7,7 +7,6 @@
       <LabelWrapper v-if="label">
         <InputLabel :data-id="labelDataId" :font-size="fontSize">
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </InputLabel>
         <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
       </LabelWrapper>
@@ -54,7 +53,6 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const containerProps = { inputWidth: String }
   const Container = styled('div', containerProps)`
@@ -134,7 +132,6 @@
       InfoText,
       LabelWrapper,
       InputLabel,
-      IsRequiredLabelStar,
     },
     props: {
       placeholder: {
@@ -195,11 +192,6 @@
         default: '',
         type: String,
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -19,7 +19,6 @@
           :size="size"
         >
           {{ label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
         </LabelText>
         <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
       </LabelContainer>
@@ -90,7 +89,6 @@
 
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
-  import IsRequiredLabelStar from '../isRequiredLabelStar'
 
   const Container = styled.div`
     display: inline-block;
@@ -256,7 +254,6 @@
       LabelText,
       InfoText,
       LabelContainer,
-      IsRequiredLabelStar,
     },
     props: {
       label: {
@@ -312,11 +309,6 @@
         type: String,
         default: '',
       },
-      isRequiredLabel: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     methods: {
       onToggleChange() {