@eturnity/eturnity_reusable_components 9.37.2 → 9.37.3-ATE-87.2

package/README.md

@@ -10,7 +10,8 @@ npm install @eturnity/eturnity_reusable_components
 
 ### Setting up the theme
 
-The library now includes its own theme. You need to wrap your application with the `ThemeProvider` component from this library.
+The library now includes its own theme. You need to wrap your application with
+the `ThemeProvider` component from this library.
 
 **Recommended approach - Using the exported theme:**
 
@@ -66,7 +67,8 @@ import InputText from '@eturnity/eturnity_reusable_components/src/components/inp
 
 ### Overriding the theme (optional)
 
-If you need to customize or override the theme, you can pass your own theme when installing the plugin:
+If you need to customize or override the theme, you can pass your own theme when
+installing the plugin:
 
 ```javascript
 import EturnityComponentsPlugin, {
@@ -124,22 +126,32 @@ Customers load provided files from jsDelivr using stable tag-based URLs:
 <script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>
 ```
 
-Consent bridge integration documentation is maintained in `docs/eturnity-consent-bridge.md` and published to:
+Consent bridge integration documentation is maintained in
+`docs/eturnity-consent-bridge.md` and published to:
 
 ```text
 https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.md
 ```
 
-Provided files and docs are configured in `provided-assets.config.js`. Script and doc entries can both define their own `versionTag` (for example `latest-consent-bridge`). Because customers keep these URLs unchanged, we update what they receive by moving those npm dist-tags to a published package version.
+Provided files and docs are configured in `provided-assets.config.js`. Script
+and doc entries can both define their own `versionTag` (for example
+`latest-consent-bridge`). Because customers keep these URLs unchanged, we update
+what they receive by moving those npm dist-tags to a published package version.
 
 ### Build and publish behavior
 
-- `npm run build` runs `vite build` (library), `npm run build:provided-files` (JS CDN bundles), and `npm run copy:provided-docs` (published docs).
-- `npm run build:provided-files` builds files listed in `provided-assets.config.js` into `dist/*.min.js`.
-- `npm run copy:provided-docs` copies docs listed in `provided-assets.config.js` into `dist/*.md`.
-- `npm run verify:provided-files` checks expected provided files exist in `dist/` and are non-empty.
-- `npm run verify:provided-docs` checks expected provided docs exist in `dist/` and are non-empty.
-- `prepack` and `prepublishOnly` run both verification steps to reduce broken publish risk.
+- `npm run build` runs `vite build` (library), `npm run build:provided-files`
+  (JS CDN bundles), and `npm run copy:provided-docs` (published docs).
+- `npm run build:provided-files` builds files listed in
+  `provided-assets.config.js` into `dist/*.min.js`.
+- `npm run copy:provided-docs` copies docs listed in `provided-assets.config.js`
+  into `dist/*.md`.
+- `npm run verify:provided-files` checks expected provided files exist in
+  `dist/` and are non-empty.
+- `npm run verify:provided-docs` checks expected provided docs exist in `dist/`
+  and are non-empty.
+- `prepack` and `prepublishOnly` run both verification steps to reduce broken
+  publish risk.
 
 ### Standard release steps
 
@@ -149,9 +161,11 @@ Provided files and docs are configured in `provided-assets.config.js`. Script an
 npm publish
 ```
 
-2. Optional: promote provided-asset tag(s) so customer script/doc URLs point to that version.
+2. Optional: promote provided-asset tag(s) so customer script/doc URLs point to
+   that version.
 
-Use this only if you want to update what customers receive from stable CDN tag URLs:
+Use this only if you want to update what customers receive from stable CDN tag
+URLs:
 
 Script options (`--dry-run`, `--version=…`, `--name=…`, and combinations)
 
@@ -196,7 +210,8 @@ Optional tuning via environment variables:
 
 ### Optional rollback (re-point customer URL to older stable package)
 
-If a promoted version is broken, you can optionally promote a previously published version:
+If a promoted version is broken, you can optionally promote a previously
+published version:
 
 ```bash
 npm run promote:provided-files-tag -- --version=<older-published-version>
@@ -217,11 +232,19 @@ npm run promote:provided-files-tag -- --version=9.15.2
 
 Unit tests are Jest + `@vue/test-utils`, co-located with each component as
 `componentName.spec.js`. Run a single spec with `pnpm test <path>` or the full
-suite with `pnpm test`. See [`docs/component-testing.md`](docs/component-testing.md)
-for how we write tests (conventions, the TDD workflow, and using Claude Code).
+suite with `pnpm test`. See
+[`docs/component-testing.md`](docs/component-testing.md) for how we write tests
+(conventions, the TDD workflow, and using Claude Code).
 
 ## CI and pull requests
 
-Opening or updating a pull request runs **Bitbucket Pipelines** ([`bitbucket-pipelines.yml`](bitbucket-pipelines.yml)): install with pnpm, **`pnpm test`**, then **`pnpm run build`**. PRs are expected to pass this pipeline.
+Opening or updating a pull request runs **Bitbucket Pipelines**
+([`bitbucket-pipelines.yml`](bitbucket-pipelines.yml)): install with pnpm,
+**`pnpm test`**, then **`pnpm run build`**. PRs are expected to pass this
+pipeline.
 
-**Blocking merges on failure** is configured in **Bitbucket repository settings** (not in this repo): enable merge checks that require a successful pull-request build—for example a minimum number of successful builds for the PR, or “require passing pipelines” if your plan supports it. Until that is enabled, a red pipeline is visible but may not stop merges automatically.
+**Blocking merges on failure** is configured in **Bitbucket repository
+settings** (not in this repo): enable merge checks that require a successful
+pull-request build—for example a minimum number of successful builds for the PR,
+or “require passing pipelines” if your plan supports it. Until that is enabled,
+a red pipeline is visible but may not stop merges automatically.

package/dist/eturnity-consent-bridge.md

@@ -1,20 +1,24 @@
 # eturnityConsentBridge
 
-Lightweight browser bridge for synchronizing consent-related cookie payloads between a host page and an embedded Eturnity iframe via `postMessage`.
+Lightweight browser bridge for synchronizing consent-related cookie payloads
+between a host page and an embedded Eturnity iframe via `postMessage`.
 
 ## Overview
 
-`eturnityConsentBridge` is a public browser/CDN script that exposes a global function:
+`eturnityConsentBridge` is a public browser/CDN script that exposes a global
+function:
 
 - `window.eturnityConsentBridge(...)`
 - `eturnityConsentBridge(...)`
 
-It is designed for third-party embedding on customer websites and supports multiple bridge instances (multiple iframes) on the same page.
+It is designed for third-party embedding on customer websites and supports
+multiple bridge instances (multiple iframes) on the same page.
 
 ## Features
 
 - Global API for plain HTML and JavaScript-based script injection flows
-- Safe message routing per iframe instance using `event.source` and origin checks
+- Safe message routing per iframe instance using `event.source` and origin
+  checks
 - Idempotent initialization for repeated calls with the same iframe ID
 - Non-throwing input validation (returns `null` on invalid init input)
 - Cookie fallback persistence and replay on iframe sync-ready handshake
@@ -57,7 +61,8 @@ Initialization returns:
 - instance object on success
 - `null` when validation fails
 
-The iframe can be missing at init time; the bridge will keep trying to resolve it during message handling.
+The iframe can be missing at init time; the bridge will keep trying to resolve
+it during message handling.
 
 ## Message Contract
 
@@ -88,9 +93,12 @@ Stored cookie replay can be triggered in two safe ways:
 - **on init**: right after bridge initialization (`eturnityConsentBridge(...)`)
 - **on handshake**: when iframe sends `eturnity_<type>_cookie_sync_ready`
 
-The init replay exists to avoid reload race conditions where the iframe handshake might be sent before the host bridge is fully attached.
+The init replay exists to avoid reload race conditions where the iframe
+handshake might be sent before the host bridge is fully attached.
 
-Delete events are also synchronized: when iframe sends `eturnity_<type>_cookie_delete`, host removes that entry from its cache and then emits `eturnity_<type>_cookie_sync` with `{ cookieName, isDeleted: true }`.
+Delete events are also synchronized: when iframe sends
+`eturnity_<type>_cookie_delete`, host removes that entry from its cache and then
+emits `eturnity_<type>_cookie_sync` with `{ cookieName, isDeleted: true }`.
 
 ## API
 
@@ -116,7 +124,8 @@ Destroys one bridge instance.
 
 ### `eturnityConsentBridge.destroyAll()`
 
-Destroys all bridge instances and removes the shared `message` listener when no instances remain.
+Destroys all bridge instances and removes the shared `message` listener when no
+instances remain.
 
 ### `BridgeInstance.destroy()`
 
@@ -132,7 +141,8 @@ type BridgeOptions = {
 ```
 
 - **`type`** (required): selects internal message/cookie namespace
-- **`logs`** (optional, default `false`): enables verbose console logging for this instance
+- **`logs`** (optional, default `false`): enables verbose console logging for
+  this instance
 
 Unknown option keys are ignored.
 
@@ -185,7 +195,8 @@ eturnityConsentBridge.destroyAll()
 ### `Iframe ... was not found during initialization`
 
 - Verify iframe ID matches exactly.
-- If iframe is rendered later, you can initialize early; bridge resolves context again during runtime.
+- If iframe is rendered later, you can initialize early; bridge resolves context
+  again during runtime.
 
 ### `Could not resolve iframe origin`
 
@@ -193,15 +204,22 @@ eturnityConsentBridge.destroyAll()
 
 ### `Ignoring ... due to origin mismatch`
 
-- Host and iframe messaging origins must match the iframe `src` origin resolved by the bridge.
+- Host and iframe messaging origins must match the iframe `src` origin resolved
+  by the bridge.
 
 ### Why replay may happen before `cookie_sync_ready`
 
-- This is expected behavior: replay on init is intentional and does not depend on handshake timing.
-- In some page-load orders, the iframe can emit `cookie_sync_ready` before the host bridge listener is attached; in that case you may not see a handshake log.
-- This does not break integration: the iframe consumes `eturnity_<type>_cookie_sync` messages directly, and `cookie_sync_ready` is only a replay signal from iframe to host.
+- This is expected behavior: replay on init is intentional and does not depend
+  on handshake timing.
+- In some page-load orders, the iframe can emit `cookie_sync_ready` before the
+  host bridge listener is attached; in that case you may not see a handshake
+  log.
+- This does not break integration: the iframe consumes
+  `eturnity_<type>_cookie_sync` messages directly, and `cookie_sync_ready` is
+  only a replay signal from iframe to host.
 
 ### Cookie warning on non-HTTPS host
 
-- The bridge writes cookies with `Secure`; on non-HTTPS pages browsers may reject persistence.
+- The bridge writes cookies with `Secure`; on non-HTTPS pages browsers may
+  reject persistence.
 - Use HTTPS in production embedding environments.

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.2",
+  "version": "9.37.3-ATE-87.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/_readme.md

@@ -2,6 +2,7 @@
 
 colors in icons will be replaced in paths only.
 
-if an svg contain a rect or polygon or circle you want color to be applied on, convert them into path using:
+if an svg contain a rect or polygon or circle you want color to be applied on,
+convert them into path using:
 
 https://thednp.github.io/svg-path-commander/convert.html

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/filter/parentDropdown.vue

@@ -65,6 +65,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    white-space: nowrap;
   `
 
   const Counter = styled.div`

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'
 //   }
 // ]
 //

package/src/assets/svgIcons/meter.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.99988 2C9.38419 2 10.7375 2.41068 11.8885 3.17969C13.0397 3.94883 13.9369 5.04227 14.4667 6.32129C14.9964 7.60027 15.1351 9.00747 14.8651 10.3652C14.6292 11.551 14.0911 12.6534 13.3065 13.5654L13.2294 13.6367C13.0359 13.7809 12.7574 13.7575 12.578 13.5781C12.3736 13.3731 12.3756 13.0424 12.5614 12.8203C13.1208 12.1523 13.5272 11.3687 13.7509 10.5254L13.8358 10.1611C14.0654 9.00695 13.9473 7.80988 13.4969 6.72266C13.0747 5.70353 12.3778 4.82341 11.4862 4.17871L11.3055 4.05273C10.3271 3.399 9.17662 3.0498 7.99988 3.0498C6.82316 3.04985 5.67263 3.39898 4.69421 4.05273C3.71591 4.70646 2.95314 5.63563 2.50281 6.72266L2.42273 6.92773C2.03943 7.95934 1.94869 9.07895 2.16394 10.1611C2.3593 11.143 2.79919 12.0571 3.43835 12.8203C3.62426 13.0425 3.62633 13.3731 3.42175 13.5781L3.33875 13.6455C3.16397 13.7608 2.93614 13.7604 2.77039 13.6367L2.69324 13.5654C2.00668 12.7673 1.50892 11.8234 1.23718 10.8057L1.13464 10.3652C0.881519 9.09233 0.987587 7.77593 1.43835 6.5625L1.53308 6.32129C2.02976 5.12224 2.84939 4.08667 3.89832 3.32812L4.11121 3.17969C5.26224 2.41066 6.61558 2.00004 7.99988 2ZM10.1093 5.1875C10.2817 4.97192 10.5968 4.93699 10.8124 5.10938C11.028 5.28188 11.063 5.59687 10.8905 5.8125L9.12781 8.01465C9.35847 8.27842 9.49988 8.62208 9.49988 9C9.49988 9.82843 8.82831 10.5 7.99988 10.5C7.17154 10.4999 6.49988 9.82836 6.49988 9C6.49988 8.17164 7.17154 7.50011 7.99988 7.5C8.08232 7.5 8.16324 7.50771 8.24207 7.52051L10.1093 5.1875ZM7.99988 8.5C7.72383 8.50011 7.49988 8.72392 7.49988 9C7.49988 9.27608 7.72383 9.49989 7.99988 9.5C8.27602 9.5 8.49988 9.27614 8.49988 9C8.49988 8.72386 8.27602 8.5 7.99988 8.5Z" fill="#263238"/>
-</svg>