@eturnity/eturnity_reusable_components 9.34.1 → 9.34.2-panel-placement.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.34.1",
+  "version": "9.34.2-panel-placement.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/broom.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Uploaded to svgrepo.com" width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.linesandangles_een{fill:#000000;}
+</style>
+<path class="linesandangles_een" d="M26.281,30l-2-8H25v-5h-8V2h-2v15H7v5h0.719l-2,8H26.281z M23.719,28H21v-4h-2v4h-2v-4h-2v4h-2  v-4h-2v4H8.281l1.5-6h12.438L23.719,28z M9,19h14v1H9V19z"/>
+</svg>

package/src/assets/svgIcons/outline_tool.svg

@@ -1,11 +1,11 @@
 <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.80078" y="4.06415" width="8" height="1.6" transform="rotate(90 2.80078 4.06415)" fill="white"/>
-<rect x="7.00195" y="3.8642" width="4" height="1.6" transform="rotate(-180 7.00195 3.8642)" fill="white"/>
-<path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white"/>
-<rect x="11.002" y="13.8643" width="8" height="1.6" transform="rotate(-180 11.002 13.8643)" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white"/>
-<rect x="12.7988" y="4.06433" width="8" height="1.6" transform="rotate(90 12.7988 4.06433)" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white"/>
-</svg>
+  <path transform="rotate(90 2.80078 4.06415)" fill="white" d="M2.8008 4.0642h8v1.6H2.8008Z" />
+  <path transform="rotate(-180 7.00195 3.8642)" fill="white" d="M7.002 3.8642h4v1.6H7.002Z" />
+  <path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white" />
+  <path transform="rotate(-180 11.002 13.8643)" fill="white" d="M11.002 13.8643h8v1.6H11.002Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white" />
+  <path transform="rotate(90 12.7988 4.06433)" fill="white" d="M12.7988 4.0643h8v1.6H12.7988Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white" />
+</svg>

package/src/assets/tests/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -157,6 +157,46 @@ describe('ButtonIcon.vue', () => {
     }
   })
 
+  it('replaces the icon with a spinner while loading', async () => {
+    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(true)
+
+    await wrapper.setProps({ isLoading: true })
+    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(false)
+
+    await wrapper.setProps({ isLoading: false })
+    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.findComponent({ name: 'Icon' }).props('name')).toBe(
+      'settings'
+    )
+  })
+
+  it('keeps rendering the text while loading', async () => {
+    await wrapper.setProps({ isLoading: true })
+    expect(wrapper.find('[data-test-id="button-icon-text"]').text()).toBe(
+      'Click Me'
+    )
+  })
+
+  it('renders a white spinner on types with white button text', async () => {
+    await wrapper.setProps({ isLoading: true, type: 'primary' })
+    expect(wrapper.findComponent({ name: 'NewSpinner' }).props('isWhite')).toBe(
+      true
+    )
+
+    await wrapper.setProps({ type: 'secondary' })
+    expect(wrapper.findComponent({ name: 'NewSpinner' }).props('isWhite')).toBe(
+      false
+    )
+  })
+
   it('renders caret based on showCaret prop', async () => {
     await wrapper.setProps({ showCaret: true })
     let caret = wrapper.find('[data-test-id="button-icon-caret"]')

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

@@ -28,7 +28,9 @@
         :type="type"
         :variant="variant"
       >
+        <RCSpinner v-if="isLoading" :is-white="isSpinnerWhite" size="tiny" />
         <Icon
+          v-else
           :color="getIconColor"
           :disable-hover="disableIconHover"
           :fill-type="fillType"
@@ -83,9 +85,11 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
+  //   :isLoading="false" // swaps the icon for a spinner
   // />
 
   import Icon from '../../icon'
+  import RCSpinner from '../../spinner'
   import styled from 'vue3-styled-components'
   import theme from '../../../assets/theme'
 
@@ -419,6 +423,7 @@
       ButtonWrapper,
       IconContainer,
       Icon,
+      RCSpinner,
       NumberContainer,
       NumberText,
       CountBadge,
@@ -541,11 +546,24 @@
         default: false,
         type: Boolean,
       },
+      isLoading: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     computed: {
       theme() {
         return theme
       },
+      // The spinner only offers white/purple, so pick whichever contrasts with
+      // the button background the same way the label already does.
+      isSpinnerWhite() {
+        return (
+          this.theme.mainButton[this.appTheme][this.type][this.variant].default
+            .textColor === this.theme.colors.white
+        )
+      },
       getIconColor() {
         if (this.iconColor) return this.iconColor
         if (this.isDisabled) {

package/src/components/infoText/index.vue

@@ -244,14 +244,10 @@
         default: '400px',
         type: String,
       },
-      // Floor for the measured popup width; lower it (e.g. '0') for short
-      // tooltip-style content.
       minWidth: {
         default: '230px',
         type: String,
       },
-      // Padding of the popup box; tighten (e.g. '6px 10px') for
-      // tooltip-style content.
       contentPadding: {
         default: '',
         type: String,
@@ -579,15 +575,11 @@
         clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
         document.body.appendChild(clone)
 
-        // Get fresh content width from clone. offsetWidth rounds to an
-        // integer, which can under-measure by <1px and wrap an exact-fit
-        // line — use the subpixel rect width, ceiled.
+        // Get fresh content width from clone
         const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
         document.body.removeChild(clone)
 
-        // Calculate new width. The measured clone is the bare text span, but
-        // TextOverlay wraps it with 10px horizontal padding each side under
-        // border-box sizing — compensate or exact-fit content wraps.
+        // Calculate new width
         const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
         const calculatedWidth = Math.min(
           Math.max(
@@ -665,9 +657,6 @@
         }
       })
 
-      // The text can change while the popup is open (e.g. a save button's
-      // tooltip flipping to "saving in progress" mid-hover) — re-measure so
-      // the box fits the new content instead of wrapping in the old width.
       watch(
         () => props.text,
         async () => {

package/src/components/infoText/infoText.spec.js

@@ -83,9 +83,7 @@ describe('InfoText Component', () => {
     const showPopup = async (w) => {
       w.vm.isMobile = false
       await w.vm.$nextTick()
-      // the hover listener sits on the component root
       await w.trigger("mouseenter")
-      // updatePosition awaits two ticks before measuring
       await new Promise((resolve) => setTimeout(resolve))
       await w.vm.$nextTick()
     }
@@ -96,7 +94,6 @@ describe('InfoText Component', () => {
         global: { stubs: { teleport: true } },
       })
       await showPopup(roomy)
-      // jsdom measures content at 0px, so the floor is what remains
       expect(roomy.vm.infoBoxWidth).toBe(230)
     })
 
@@ -117,7 +114,6 @@ describe('InfoText Component', () => {
         global: { stubs: { teleport: true } },
       })
       await showPopup(small)
-      // jsdom content measures 0px; only the padding compensation remains
       expect(small.vm.infoBoxWidth).toBe(20)
     })
   })
@@ -126,8 +122,6 @@ describe('InfoText Component', () => {
     let rectSpy
 
     beforeEach(() => {
-      // jsdom measures everything at 0; size rects from text length so the
-      // popup width tracks the measured clone's content.
       rectSpy = jest
         .spyOn(Element.prototype, 'getBoundingClientRect')
         .mockImplementation(function () {

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

@@ -484,6 +484,7 @@
     display: flex;
     gap: 10px;
     align-items: center;
+    padding: ${(props) => (props.isInteractive ? '0 4px' : '0')};
     cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
     border: ${(props) =>
       props.alignItems == 'vertical'
@@ -729,6 +730,11 @@
         required: false,
         default: true,
       },
+      undefinedState: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       allowNegative: {
         type: Boolean,
         required: false,
@@ -844,6 +850,7 @@
     },
     computed: {
       displayedPlaceholder() {
+        if (this.undefinedState) return '-'
         if (this.placeholder) return this.placeholder
         if (this.defaultNumber)
           return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
@@ -1121,6 +1128,9 @@
         }
       },
       formatWithCurrency(value) {
+        if (this.undefinedState && !this.isFocused) {
+          return '-'
+        }
         let adjustedMinValue =
           value || value === 0
             ? value

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

@@ -31,15 +31,16 @@
           :border-color="borderColor"
           :color-mode="colorMode"
           :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
+          :disabled="!!item.disabled"
           :height="height"
           :inactive-border-color="inactiveBorderColor"
           :inactive-color="inactiveColor"
-          :is-active="value == item.value"
+          :is-active="!undefinedState && value == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
           :size="size"
           :width="item.width || 'auto'"
-          @click="selectItem(item.value)"
+          @click="selectItem(item)"
         >
           <OptionIconContainer v-if="item.icon">
             <RCIcon
@@ -145,6 +146,7 @@
     height: String,
     borderColor: String,
     inactiveBorderColor: String,
+    disabled: Boolean,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -167,17 +169,19 @@
       props.height
         ? props.height
         : props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
+          ? '24px'
+          : props.size === 'small'
+            ? '16px'
+            : '24px'};
     padding: 0 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
     gap: 5px;
+    opacity: ${(props) => (props.disabled ? 0.4 : 1)};
+    pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
     & :hover {
-      cursor: pointer;
+      cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     }
     &:first-child {
       border-radius: 4px 0 0 4px;
@@ -264,6 +268,11 @@
         default: false,
         type: Boolean,
       },
+      undefinedState: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
     data() {
       return {
@@ -282,19 +291,19 @@
         this.borderColor = this.secondaryColor
         this.inactiveBorderColor = theme.semanticColors.teal[600]
       } else {
-        this.primaryColor = theme.semanticColors.teal[50]
-        this.secondaryColor = theme.semanticColors.teal[800]
-        this.inactiveColor = theme.semanticColors.teal[50]
+        this.primaryColor = theme.semanticColors.teal[100]
+        this.secondaryColor = theme.semanticColors.purple[500]
+        this.inactiveColor = theme.semanticColors.purple[500]
         this.borderColor = this.secondaryColor
-        this.inactiveBorderColor = theme.semanticColors.teal[50]
+        this.inactiveBorderColor = theme.semanticColors.teal[200]
       }
     },
     methods: {
-      selectItem(value) {
-        if (this.disabled) {
+      selectItem(item) {
+        if (this.disabled || item.disabled) {
           return
         }
-        this.$emit('on-switch-change', value)
+        this.$emit('on-switch-change', item.value)
       },
     },
   }

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

@@ -65,9 +65,9 @@ describe('SwitchField', () => {
   })
 
   it('renders the info text only when a message is provided', () => {
-    expect(mountSwitch({ label: 'Mode' }).findComponent(InfoText).exists()).toBe(
-      false
-    )
+    expect(
+      mountSwitch({ label: 'Mode' }).findComponent(InfoText).exists()
+    ).toBe(false)
     expect(
       mountSwitch({ label: 'Mode', infoTextMessage: 'Helpful hint' })
         .findComponent(InfoText)

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

@@ -32,6 +32,7 @@
         role="checkbox"
         :size="size"
         tabindex="0"
+        :undefined-state="undefinedState"
         @keydown.space.prevent="onToggleChange"
       >
         <ToggleBackground
@@ -41,6 +42,7 @@
           data-test-id="toggle_background"
           :disabled="disabled"
           :is-checked="isChecked"
+          :undefined-state="undefinedState"
         />
         <ToggleDot
           data-test-id="toggle_dot"
@@ -49,6 +51,7 @@
           :size="size"
           :toggle-color="toggleColor"
           :toggle-margin="toggleMargin"
+          :undefined-state="undefinedState"
         />
       </ToggleWrapper>
       <LabelContainer
@@ -125,6 +128,7 @@
     disabled: Boolean,
     backgroundColor: String,
     isChecked: Boolean,
+    undefinedState: Boolean,
   }
   const LabelText = styled('div', toggleAttrs)`
     color: ${(props) =>
@@ -140,6 +144,8 @@
   border: ${(props) =>
     props.disabled
       ? '1px solid ' + props.theme.colors.disabled
+      : props.undefinedState
+      ? '1px solid ' + props.theme.colors.grey3
       : props.isChecked
       ? props.backgroundColor
         ? '1px solid ' + props.backgroundColor
@@ -175,6 +181,7 @@
     backgroundColor: String,
     isChecked: Boolean,
     disabled: Boolean,
+    undefinedState: Boolean,
   }
   const ToggleBackground = styled('span', backgroundAttrs)`
     display: block;
@@ -184,6 +191,8 @@
     background-color: ${(props) =>
       props.disabled
         ? props.theme.colors.grey5
+        : props.undefinedState
+        ? props.theme.colors.grey3
         : props.isChecked
         ? props.backgroundColor
           ? props.backgroundColor
@@ -198,6 +207,7 @@
     size: String,
     disabled: Boolean,
     toggleMargin: String,
+    undefinedState: Boolean,
   }
   const ToggleDot = styled('span', toggleProps)`
     position: absolute;
@@ -233,7 +243,13 @@
     border-radius: 100%;
     transition: transform 0.4s ease;
     transform: ${(props) =>
-      props.isChecked
+      props.undefinedState
+        ? props.size === 'medium'
+          ? 'translateX(15px)'
+          : props.size === 'small'
+          ? 'translateX(6px)'
+          : 'translateX(15px)'
+        : props.isChecked
         ? props.size === 'medium'
           ? 'translateX(25px)'
           : props.size === 'small'
@@ -336,6 +352,11 @@
         default: null,
         required: false,
       },
+      undefinedState: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     methods: {
       onToggleChange() {

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

@@ -77,16 +77,16 @@ describe('RCToggle', () => {
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       false
     )
-    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
-      false
-    )
+    expect(
+      wrapper.find('[data-test-id="label_right_container"]').exists()
+    ).toBe(false)
   })
 
   it('renders the label on the right by default', () => {
     const wrapper = mountToggle({ label: 'My Label' })
-    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
-      true
-    )
+    expect(
+      wrapper.find('[data-test-id="label_right_container"]').exists()
+    ).toBe(true)
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       false
     )
@@ -98,9 +98,9 @@ describe('RCToggle', () => {
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       true
     )
-    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
-      false
-    )
+    expect(
+      wrapper.find('[data-test-id="label_right_container"]').exists()
+    ).toBe(false)
   })
 
   it('renders the info text only when infoTextMessage is provided', () => {

package/src/components/spinner/index.vue

@@ -113,7 +113,8 @@
       size: {
         type: String,
         default: 'medium',
-        validator: (value) => ['small', 'medium', 'large'].includes(value),
+        validator: (value) =>
+          ['tiny', 'small', 'medium', 'large'].includes(value),
       },
       isWhite: {
         required: false,