@eturnity/eturnity_reusable_components 9.25.16-panel-placement.1 → 9.25.16-panel-placement.3

package/package.json

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

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/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,