@eturnity/eturnity_reusable_components 9.37.3-ATE-87.2 → 9.37.3

package/dist/index.es3.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.37.3-ATE-87.2",
+  "version": "9.37.3",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

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

package/src/components/selectedOptions/index.vue

@@ -5,12 +5,7 @@
         <TitleContainer>
           <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              :color="theme.semanticColors.red[500]"
-              cursor="pointer"
-              name="close"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </TitleContainer>
         <DividerContainer>
@@ -20,18 +15,17 @@
           <ExpandedListItem
             v-for="item in expandedOptions"
             :key="item.type"
-            data-test-id="expanded_option"
             :disabled="item.disabled || false"
             :has-component="!!item?.component"
-            :text-color="expandedItemColor(item)"
+            :hover-color="item.hoverColor"
             @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>
@@ -44,6 +38,7 @@
               <Icon
                 :color="theme.colors.white"
                 :cursor="item.disabled ? 'not-allowed' : 'pointer'"
+                :hovered-color="theme.colors.white"
                 name="arrow_right"
                 size="20px"
               />
@@ -65,44 +60,42 @@
         <SelectedContainer>
           {{ numberSelected }} {{ selectedText }}
         </SelectedContainer>
-        <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')">
+        <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')">
             <Icon
-              :color="theme.semanticColors.red[500]"
+              :color="theme.colors.white"
               cursor="pointer"
+              :hovered-color="theme.colors.white"
               name="close"
               size="14px"
             />
           </IconContainer>
-        </ActionsContainer>
+        </CloseContainer>
       </BoxContainer>
     </PageContainer>
   </PageWrapper>
@@ -125,8 +118,7 @@
   //   {
   //     type: 'delete',
   //     name: 'Delete',
-  //     variant: 'cancel', // default is 'main'
-  //     dataId: 'button_bulk_delete'
+  //     hoverColor: 'red' // default is green
   //   }
   // ]
   // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
@@ -145,7 +137,6 @@
   // </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'
 
@@ -158,7 +149,7 @@
   `
 
   const Divider = styled.div`
-    border-bottom: 1px solid ${(props) => props.theme.semanticColors.teal[600]};
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     width: 95%;
     margin: 0 auto;
   `
@@ -168,6 +159,7 @@
     bottom: 30px;
     left: 50%;
     width: auto;
+    max-width: 70%;
     transform: translateX(-50%);
     z-index: 999;
   `
@@ -178,12 +170,13 @@
     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.transparentBlack2};
+    background-color: ${(props) => props.theme.colors.black};
     border-radius: 4px;
     padding: 15px;
   `
@@ -192,9 +185,9 @@
     display: grid;
     align-items: center;
     height: 100%;
-    padding: 0 24px;
+    padding-right: 20px;
     white-space: nowrap;
-    border-right: 1px solid ${(props) => props.theme.semanticColors.teal[600]};
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
   `
 
   const TitleContainer = styled.div`
@@ -217,11 +210,13 @@
   const BoxContainer = styled.div`
     display: flex;
     align-items: center;
-    background-color: ${(props) => props.theme.colors.transparentBlack2};
+    background-color: ${(props) => props.theme.colors.black};
+    opacity: 90%;
     color: ${(props) => props.theme.colors.white};
     border-radius: 4px;
-    font-size: 14px;
-    height: 62px;
+    padding: 0px 10px 0px 20px;
+    font-size: 13px;
+    height: 45px;
   `
 
   const CenterBox = styled(BoxContainer)`
@@ -244,10 +239,14 @@
 
     div {
       // This is the dot color
-      background: ${(props) => props.theme.semanticColors.grey[600]};
+      background: ${(props) => props.theme.colors.white};
     }
   `
 
+  const CloseContainer = styled.div`
+    margin-left: 20px;
+  `
+
   const DotItem = styled.div`
     width: 4px;
     height: 4px;
@@ -255,15 +254,38 @@
     border-radius: 50%;
   `
 
-  const ActionsContainer = styled.div`
+  const ListContainer = 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;
@@ -271,9 +293,10 @@
     height: 30px;
     width: 30px;
     cursor: pointer;
+    margin-left: 8px;
 
     &:hover {
-      background: ${(props) => props.theme.semanticColors.transparentTeal[400]};
+      background: rgba(255, 255, 255, 0.1);
       border-radius: 4px;
     }
   `
@@ -286,8 +309,8 @@
 
   const ExpandedListItem = styled('div', {
     disabled: Boolean,
+    hoverColor: String,
     hasComponent: Boolean,
-    textColor: String,
   })`
     width: 100%;
     display: flex;
@@ -295,10 +318,12 @@
     align-items: center;
     padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    color: ${(props) => props.textColor};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
 
     &:hover {
-      background: ${(props) => props.theme.semanticColors.transparentTeal[400]};
+      background: rgba(255, 255, 255, 0.1);
+      color: ${(props) =>
+        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
     }
   `
 
@@ -318,7 +343,8 @@
 
   const EmptyText = styled.div`
     color: ${(props) => props.theme.colors.white};
-    font-size: 14px;
+    font-size: 13px;
+    padding-left: 16px;
   `
 
   export default {
@@ -327,10 +353,10 @@
       PageContainer,
       BoxContainer,
       SelectedContainer,
-      ActionsContainer,
+      ListContainer,
       ButtonContainer,
       DotItem,
-      RCMainButton,
+      ListItem,
       InfoText,
       CenterBox,
       Icon,
@@ -347,6 +373,7 @@
       Divider,
       DividerContainer,
       ExpandedList,
+      CloseContainer,
     },
     props: {
       optionsList: {
@@ -407,13 +434,6 @@
       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) => {
@@ -437,6 +457,17 @@
         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,8 +1,6 @@
 /* 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', () => ({
@@ -24,7 +22,7 @@ describe('RCSelectedOptions.vue', () => {
       {
         type: 'delete',
         name: 'Delete',
-        variant: 'cancel',
+        hoverColor: 'red',
       },
     ],
   }
@@ -60,7 +58,7 @@ describe('RCSelectedOptions.vue', () => {
     expect(selectedOptions.exists()).toBe(true)
 
     const noBulkActions = selectedOptions.find(
-      '[data-test-id="no_bulk_actions"]'
+      '[test-data-id="no_bulk_actions"]'
     )
     expect(noBulkActions.exists()).toBe(true)
   })
@@ -80,7 +78,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we have 2 options, and the limit is 4, we should not see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[data-test-id="more_actions_button_wrapper"]'
+      '[test-data-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(false)
   })
@@ -113,7 +111,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we a component parameter, we should see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[data-test-id="more_actions_button_wrapper"]'
+      '[test-data-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(true)
   })
@@ -148,7 +146,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //since we a component parameter, we should see "•••" button
     const moreActionsButton = selectedOptions.find(
-      '[data-test-id="more_actions_button_wrapper"]'
+      '[test-data-id="more_actions_button_wrapper"]'
     )
     expect(moreActionsButton.exists()).toBe(true)
 
@@ -162,7 +160,7 @@ describe('RCSelectedOptions.vue', () => {
 
     //toggle the element with the component parameter
     const expandedListItems = selectedOptions.findAll(
-      '[data-test-id="expanded_list_item"]'
+      '[test-data-id="expanded_list_item"]'
     )
 
     //there should be only one since we have only one option with the component parameter
@@ -175,239 +173,4 @@ 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, variant, dataId, and disabledInfo.',
+        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
     },
     numberSelected: {
       control: 'number',
@@ -49,7 +49,7 @@ Default.args = {
     {
       type: 'delete',
       name: 'Delete',
-      variant: 'cancel',
+      hoverColor: 'red',
     },
   ],
   numberSelected: 5,
@@ -98,7 +98,7 @@ ManyOptions.args = {
     {
       type: 'delete',
       name: 'Delete',
-      variant: 'cancel',
+      hoverColor: 'red',
     },
     {
       type: 'archive',
@@ -132,7 +132,7 @@ CustomLabels.args = {
     {
       type: 'delete',
       name: 'Delete',
-      variant: 'cancel',
+      hoverColor: 'red',
     },
   ],
   numberSelected: 1,
@@ -158,8 +158,7 @@ CustomLabels.args = {
 //   {
 //     type: 'delete',
 //     name: 'Delete',
-//     variant: 'cancel', // default is 'main'
-//     dataId: 'button_bulk_delete'
+//     hoverColor: 'red' // default is green
 //   }
 // ]
 //