@eturnity/eturnity_reusable_components 9.37.5 → 9.37.6

package/dist/index.es3.js

@@ -815,8 +815,8 @@ const theme = (() => {
               iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.transparentTeal[100],
+              textColor: semanticColors.transparentWhite[400],
+              backgroundColor: "transparent",
               borderColor: "",
               iconBackgroundColor: semanticColors.buttonIcon.none
             }
@@ -843,7 +843,7 @@ const theme = (() => {
             },
             disabled: {
               backgroundColor: "transparent",
-              textColor: semanticColors.transparentRed[500],
+              textColor: semanticColors.transparentWhite[400],
               borderColor: "",
               iconBackgroundColor: semanticColors.buttonIcon.none
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.37.5",
+  "version": "9.37.6",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -816,8 +816,8 @@ const theme = (() => {
               iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10,
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.transparentTeal[100],
+              textColor: semanticColors.transparentWhite[400],
+              backgroundColor: 'transparent',
               borderColor: '',
               iconBackgroundColor: semanticColors.buttonIcon.none,
             },
@@ -844,7 +844,7 @@ const theme = (() => {
             },
             disabled: {
               backgroundColor: 'transparent',
-              textColor: semanticColors.transparentRed[500],
+              textColor: semanticColors.transparentWhite[400],
               borderColor: '',
               iconBackgroundColor: semanticColors.buttonIcon.none,
             },

package/src/components/selectedOptions/index.vue

@@ -5,7 +5,12 @@
         <TitleContainer>
           <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
           <IconContainer @click="$emit('on-close')">
-            <Icon color="white" cursor="pointer" name="close" size="14px" />
+            <Icon
+              :color="theme.semanticColors.red[500]"
+              cursor="pointer"
+              name="close"
+              size="14px"
+            />
           </IconContainer>
         </TitleContainer>
         <DividerContainer>
@@ -15,17 +20,18 @@
           <ExpandedListItem
             v-for="item in expandedOptions"
             :key="item.type"
+            data-test-id="expanded_option"
             :disabled="item.disabled || false"
             :has-component="!!item?.component"
-            :hover-color="item.hoverColor"
+            :text-color="expandedItemColor(item)"
             @click="
               !item?.component && !item.disabled && $emit('on-' + item.type)
             "
           >
             <ListItemWrapper
               v-if="item?.component"
+              data-test-id="expanded_list_item"
               :has-component="!!item?.component"
-              test-data-id="expanded_list_item"
               @click="!item.disabled && toggleElement(item.type)"
             >
               <ListItemTitle>
@@ -38,7 +44,6 @@
               <Icon
                 :color="theme.colors.white"
                 :cursor="item.disabled ? 'not-allowed' : 'pointer'"
-                :hovered-color="theme.colors.white"
                 name="arrow_right"
                 size="20px"
               />
@@ -60,42 +65,44 @@
         <SelectedContainer>
           {{ numberSelected }} {{ selectedText }}
         </SelectedContainer>
-        <ListContainer v-if="optionsList.length">
-          <ListItem
-            v-for="item in limitedOptions"
-            :key="item.type"
-            :disabled="item.disabled || false"
-            :hover-color="item.hoverColor"
-            @click="$emit('on-' + item.type)"
-          >
-            {{ item.name }}
-          </ListItem>
-          <IconContainer
-            v-if="optionsList.length > optionLimit || hasComponent"
-            test-data-id="more_actions_button_wrapper"
-            @click="expandOptions"
-          >
-            <ButtonContainer name="more_options,_tool_tips">
-              <DotItem />
-              <DotItem />
-              <DotItem />
-            </ButtonContainer>
-          </IconContainer>
-        </ListContainer>
-        <EmptyText v-else test-data-id="no_bulk_actions">
-          {{ noBulkActionsText }}
-        </EmptyText>
-        <CloseContainer>
-          <IconContainer @click="$emit('on-close')">
+        <ActionsContainer>
+          <template v-if="optionsList.length">
+            <RCMainButton
+              v-for="item in limitedOptions"
+              :key="item.type"
+              app-theme="dark"
+              :data-id="item.dataId"
+              :is-disabled="item.disabled"
+              no-wrap
+              :text="item.name"
+              type="ghost"
+              :variant="item.variant"
+              @click="!item.disabled && $emit('on-' + item.type)"
+            />
+            <IconContainer
+              v-if="optionsList.length > optionLimit || hasComponent"
+              data-test-id="more_actions_button_wrapper"
+              @click="expandOptions"
+            >
+              <ButtonContainer name="more_options,_tool_tips">
+                <DotItem />
+                <DotItem />
+                <DotItem />
+              </ButtonContainer>
+            </IconContainer>
+          </template>
+          <EmptyText v-else data-test-id="no_bulk_actions">
+            {{ noBulkActionsText }}
+          </EmptyText>
+          <IconContainer data-test-id="close_button" @click="$emit('on-close')">
             <Icon
-              :color="theme.colors.white"
+              :color="theme.semanticColors.red[500]"
               cursor="pointer"
-              :hovered-color="theme.colors.white"
               name="close"
               size="14px"
             />
           </IconContainer>
-        </CloseContainer>
+        </ActionsContainer>
       </BoxContainer>
     </PageContainer>
   </PageWrapper>
@@ -118,7 +125,8 @@
   //   {
   //     type: 'delete',
   //     name: 'Delete',
-  //     hoverColor: 'red' // default is green
+  //     variant: 'cancel', // default is 'main'
+  //     dataId: 'button_bulk_delete'
   //   }
   // ]
   // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
@@ -137,6 +145,7 @@
   // </SelectedOptions>
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
+  import RCMainButton from '../buttons/mainButton'
   import Icon from '../icon'
   import theme from '../../assets/theme'
 
@@ -149,7 +158,7 @@
   `
 
   const Divider = styled.div`
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid ${(props) => props.theme.semanticColors.teal[600]};
     width: 95%;
     margin: 0 auto;
   `
@@ -159,7 +168,6 @@
     bottom: 30px;
     left: 50%;
     width: auto;
-    max-width: 70%;
     transform: translateX(-50%);
     z-index: 999;
   `
@@ -170,13 +178,12 @@
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.4);
   `
 
   const OptionsContainer = styled.div`
     position: absolute;
     left: 101%;
-    background-color: ${(props) => props.theme.colors.black};
+    background-color: ${(props) => props.theme.colors.transparentBlack2};
     border-radius: 4px;
     padding: 15px;
   `
@@ -185,9 +192,9 @@
     display: grid;
     align-items: center;
     height: 100%;
-    padding-right: 20px;
+    padding: 0 24px;
     white-space: nowrap;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    border-right: 1px solid ${(props) => props.theme.semanticColors.teal[600]};
   `
 
   const TitleContainer = styled.div`
@@ -210,13 +217,11 @@
   const BoxContainer = styled.div`
     display: flex;
     align-items: center;
-    background-color: ${(props) => props.theme.colors.black};
-    opacity: 90%;
+    background-color: ${(props) => props.theme.colors.transparentBlack2};
     color: ${(props) => props.theme.colors.white};
     border-radius: 4px;
-    padding: 0px 10px 0px 20px;
-    font-size: 13px;
-    height: 45px;
+    font-size: 14px;
+    height: 62px;
   `
 
   const CenterBox = styled(BoxContainer)`
@@ -239,14 +244,10 @@
 
     div {
       // This is the dot color
-      background: ${(props) => props.theme.colors.white};
+      background: ${(props) => props.theme.semanticColors.grey[600]};
     }
   `
 
-  const CloseContainer = styled.div`
-    margin-left: 20px;
-  `
-
   const DotItem = styled.div`
     width: 4px;
     height: 4px;
@@ -254,38 +255,15 @@
     border-radius: 50%;
   `
 
-  const ListContainer = styled.div`
+  const ActionsContainer = styled.div`
     height: 100%;
     display: flex;
     align-items: center;
+    gap: 8px;
+    padding: 0 24px;
     color: ${(props) => props.theme.colors.white};
   `
 
-  const ListAttrs = {
-    disabled: Boolean,
-    hoverColor: String,
-  }
-
-  const ListItem = styled('div', ListAttrs)`
-    width: max-content;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    color: ${(props) => props.disabled && props.theme.colors.grey3};
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: ${(props) =>
-        props.disabled
-          ? props.theme.colors.grey3
-          : props.hoverColor
-            ? props.theme.colors[props.hoverColor]
-            : props.theme.colors.white};
-    }
-  `
-
   const IconContainer = styled.div`
     display: grid;
     align-items: center;
@@ -293,10 +271,9 @@
     height: 30px;
     width: 30px;
     cursor: pointer;
-    margin-left: 8px;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.transparentTeal[400]};
       border-radius: 4px;
     }
   `
@@ -309,8 +286,8 @@
 
   const ExpandedListItem = styled('div', {
     disabled: Boolean,
-    hoverColor: String,
     hasComponent: Boolean,
+    textColor: String,
   })`
     width: 100%;
     display: flex;
@@ -318,12 +295,10 @@
     align-items: center;
     padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    color: ${(props) => props.disabled && props.theme.colors.grey3};
+    color: ${(props) => props.textColor};
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: ${(props) =>
-        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
+      background: ${(props) => props.theme.semanticColors.transparentTeal[400]};
     }
   `
 
@@ -343,8 +318,7 @@
 
   const EmptyText = styled.div`
     color: ${(props) => props.theme.colors.white};
-    font-size: 13px;
-    padding-left: 16px;
+    font-size: 14px;
   `
 
   export default {
@@ -353,10 +327,10 @@
       PageContainer,
       BoxContainer,
       SelectedContainer,
-      ListContainer,
+      ActionsContainer,
       ButtonContainer,
       DotItem,
-      ListItem,
+      RCMainButton,
       InfoText,
       CenterBox,
       Icon,
@@ -373,7 +347,6 @@
       Divider,
       DividerContainer,
       ExpandedList,
-      CloseContainer,
     },
     props: {
       optionsList: {
@@ -434,6 +407,13 @@
       this.initializeOptions()
     },
     methods: {
+      expandedItemColor(item) {
+        const ghost = this.theme.mainButton.dark.ghost
+        const variant = ghost[item.variant] ?? ghost.main
+        const state = item.disabled ? 'disabled' : 'default'
+
+        return variant[state].textColor
+      },
       initializeOptions() {
         this.expandedOptions = [...this.optionsList]
           .map((option, index) => {
@@ -457,17 +437,6 @@
         this.expanded = !this.expanded
         this.expandedOptions = this.optionsList
       },
-      handleExpandedOptionClick(item) {
-        if (item.disabled) return
-
-        if (!item.component) {
-          this.$emit('on-' + item.type)
-
-          return
-        }
-
-        this.toggleElement(item.type)
-      },
     },
   }
 </script>

package/src/components/selectedOptions/selectedOptions.spec.js

@@ -1,6 +1,8 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import RCSelectedOptions from '@/components/selectedOptions'
+import RCMainButton from '@/components/buttons/mainButton'
+import RCIcon from '@/components/icon/Icon.vue'
 import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
@@ -22,7 +24,7 @@ describe('RCSelectedOptions.vue', () => {
       {
         type: 'delete',
         name: 'Delete',
-        hoverColor: 'red',
+        variant: 'cancel',
       },
     ],
   }
@@ -58,7 +60,7 @@ describe('RCSelectedOptions.vue', () => {
     expect(selectedOptions.exists()).toBe(true)
 
     const noBulkActions = selectedOptions.find(
-      '[test-data-id="no_bulk_actions"]'
+      '[data-test-id="no_bulk_actions"]'
     )
     expect(noBulkActions.exists()).toBe(true)
   })
@@ -78,7 +80,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we have 2 options, and the limit is 4, we should not see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
+      '[data-test-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(false)
   })
@@ -111,7 +113,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we a component parameter, we should see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
+      '[data-test-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(true)
   })
@@ -146,7 +148,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we a component parameter, we should see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
+      '[data-test-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(true)
 
@@ -160,7 +162,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //toggle the element with the component parameter
     const expandedListItems = selectedOptions.findAll(
-      '[test-data-id="expanded_list_item"]'
+      '[data-test-id="expanded_list_item"]'
     )
 
     //there should be only one since we have only one option with the component parameter
@@ -173,4 +175,239 @@ describe('RCSelectedOptions.vue', () => {
     const setSupplierSlot = wrapper.find('[data-id="set_supplier"]')
     expect(setSupplierSlot.exists()).toBe(true)
   })
+  it('renders each collapsed option as a main button', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const optionButtons = wrapper.findAllComponents(RCMainButton)
+    expect(optionButtons).toHaveLength(2)
+    expect(optionButtons[0].props('text')).toBe('Close')
+    expect(optionButtons[1].props('text')).toBe('Delete')
+  })
+
+  it('passes the option data id straight through to the button', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [
+          { type: 'delete', name: 'Delete', dataId: 'button_bulk_delete' },
+        ],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.findComponent(RCMainButton).props('dataId')).toBe(
+      'button_bulk_delete'
+    )
+  })
+
+  it('leaves the button without a data id when the option carries none', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.findComponent(RCMainButton).props('dataId')).toBe('')
+  })
+
+  it('passes the option variant straight through to the button', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const optionButtons = wrapper.findAllComponents(RCMainButton)
+    expect(optionButtons[0].props('variant')).toBe('main')
+    expect(optionButtons[1].props('variant')).toBe('cancel')
+  })
+
+  it('marks a disabled option as a disabled button and does not emit on click', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [
+          {
+            type: 'delete',
+            name: 'Delete',
+            disabled: true,
+          },
+        ],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const deleteButton = wrapper.findComponent(RCMainButton)
+    expect(deleteButton.props('isDisabled')).toBe(true)
+
+    await deleteButton.trigger('click')
+    expect(wrapper.emitted('on-delete')).toBeUndefined()
+  })
+
+  it('emits the option event when an enabled option is clicked', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: simpleOptionsProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    await wrapper.findAllComponents(RCMainButton)[1].trigger('click')
+    expect(wrapper.emitted('on-delete')).toHaveLength(1)
+  })
+  it('renders the close button and emits on-close even when there are no options', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const closeButton = wrapper.find('[data-test-id="close_button"]')
+    expect(closeButton.exists()).toBe(true)
+
+    await closeButton.trigger('click')
+    expect(wrapper.emitted('on-close')).toHaveLength(1)
+  })
+
+  const expandedItemColors = async (optionsList) => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper
+      .find('[data-test-id="more_actions_button_wrapper"]')
+      .trigger('click')
+    await wrapper.vm.$nextTick()
+
+    return wrapper
+      .findAllComponents('[data-test-id="expanded_option"]')
+      .map((option) => option.props('textColor'))
+  }
+
+  it('styles a cancel option differently from the default options in the expanded list', async () => {
+    const [close, archive, remove] = await expandedItemColors([
+      { type: 'close', name: 'Close' },
+      { type: 'archive', name: 'Archive' },
+      { type: 'delete', name: 'Delete', variant: 'cancel' },
+      { type: 'supplier', name: 'Supplier', component: 'set_supplier' },
+    ])
+
+    expect(archive).toBe(close)
+    expect(remove).not.toBe(close)
+  })
+
+  it('styles disabled options alike whatever the variant in the expanded list', async () => {
+    const [close, remove] = await expandedItemColors([
+      { type: 'close', name: 'Close', disabled: true },
+      { type: 'delete', name: 'Delete', variant: 'cancel', disabled: true },
+      { type: 'supplier', name: 'Supplier', component: 'set_supplier' },
+    ])
+
+    expect(remove).toBe(close)
+  })
+
+  it('takes expanded option colours from the ghost button theme', async () => {
+    const [close, remove, archive, purge] = await expandedItemColors([
+      { type: 'close', name: 'Close' },
+      { type: 'delete', name: 'Delete', variant: 'cancel' },
+      { type: 'archive', name: 'Archive', disabled: true },
+      { type: 'purge', name: 'Purge', variant: 'cancel', disabled: true },
+      { type: 'supplier', name: 'Supplier', component: 'set_supplier' },
+    ])
+
+    const ghost = theme.mainButton.dark.ghost
+
+    expect(close).toBe(ghost.main.default.textColor)
+    expect(remove).toBe(ghost.cancel.default.textColor)
+    expect(archive).toBe(ghost.main.disabled.textColor)
+    expect(purge).toBe(ghost.cancel.disabled.textColor)
+  })
+
+  it('uses the same close colour in the expanded modal as in the collapsed bar', async () => {
+    const wrapper = mount(RCSelectedOptions, {
+      props: {
+        ...simpleOptionsProps,
+        optionsList: [
+          { type: 'close', name: 'Close' },
+          { type: 'supplier', name: 'Supplier', component: 'set_supplier' },
+        ],
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    await wrapper
+      .find('[data-test-id="more_actions_button_wrapper"]')
+      .trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const closeIcon = wrapper
+      .findAllComponents(RCIcon)
+      .find((icon) => icon.props('name') === 'close')
+
+    expect(closeIcon.props('color')).toBe(theme.semanticColors.red[500])
+  })
+
+  it('falls back to the main variant when an option has an unknown variant', async () => {
+    const [mystery] = await expandedItemColors([
+      { type: 'mystery', name: 'Mystery', variant: 'not_a_variant' },
+      { type: 'supplier', name: 'Supplier', component: 'set_supplier' },
+    ])
+
+    expect(mystery).toBe(theme.mainButton.dark.ghost.main.default.textColor)
+  })
 })

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -9,7 +9,7 @@ export default {
     optionsList: {
       control: 'object',
       description:
-        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
+        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, variant, dataId, and disabledInfo.',
     },
     numberSelected: {
       control: 'number',
@@ -49,7 +49,7 @@ Default.args = {
     {
       type: 'delete',
       name: 'Delete',
-      hoverColor: 'red',
+      variant: 'cancel',
     },
   ],
   numberSelected: 5,
@@ -98,7 +98,7 @@ ManyOptions.args = {
     {
       type: 'delete',
       name: 'Delete',
-      hoverColor: 'red',
+      variant: 'cancel',
     },
     {
       type: 'archive',
@@ -132,7 +132,7 @@ CustomLabels.args = {
     {
       type: 'delete',
       name: 'Delete',
-      hoverColor: 'red',
+      variant: 'cancel',
     },
   ],
   numberSelected: 1,
@@ -158,7 +158,8 @@ CustomLabels.args = {
 //   {
 //     type: 'delete',
 //     name: 'Delete',
-//     hoverColor: 'red' // default is green
+//     variant: 'cancel', // default is 'main'
+//     dataId: 'button_bulk_delete'
 //   }
 // ]
 //