From a936732b941247f913d30e2d49ed9de8e3c1c746 Mon Sep 17 00:00:00 2001
From: Anastasiia Mishchenko <76526539+AnastasiiaMP@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:19:46 +0100
Subject: [PATCH] feat(SelectBadge): Components improvements (#1238)

* feat: improve selected badge

* test: update tests

* refactor: remove unused console.log and simplify docs

* chore: take care of undefined priority item

* refactor: correct punctuation in docs

* refactor: remove unnecessary "?"

* refactor: change rendering conditions

* refactor: remove redundant logic

* refactor: remove redundant logic

* test: update tes descriptions

* refactor: address review comments

* chore: change optionItem value in storybook to something real

* refactor: Select Badge story simplification

* refactor: simplify names

* refactor: address final comments

* refactor: remove unnecessary string literal

---------

Co-authored-by: Anastasiia Mishchenko <mishchenko@textkernel.nl>
---
 src/components/SelectBadge/SelectBadge.scss   |  39 +--
 src/components/SelectBadge/SelectBadge.tsx    | 188 ++++++-------
 .../__tests__/SelectBadge.spec.tsx            | 168 ++++++------
 .../__snapshots__/SelectBadge.spec.tsx.snap   | 106 ++++----
 src/components/SelectBadge/index.ts           |   7 +-
 stories/organisms/SelectBadge.stories.tsx     | 252 +++++++++++-------
 6 files changed, 430 insertions(+), 330 deletions(-)

diff --git a/src/components/SelectBadge/SelectBadge.scss b/src/components/SelectBadge/SelectBadge.scss
index 5273f42b2..1b3cbc9c9 100644
--- a/src/components/SelectBadge/SelectBadge.scss
+++ b/src/components/SelectBadge/SelectBadge.scss
@@ -5,14 +5,14 @@
     $activeColor: var(--color-background-neutral-subtlest-pressed)
 ) {
     & {
+        width: var(--space-400);
+        height: var(--space-400);
         align-items: center;
         background-color: var(--transparent);
         cursor: pointer;
         display: flex;
         flex-shrink: 0;
-        height: var(--space-400);
         justify-content: center;
-        width: var(--space-400);
     }
 
     &:hover:not([disabled]) {
@@ -66,6 +66,7 @@ $icon-status-colors: (
 );
 
 .SelectBadge {
+    width: 100%;
     height: var(--space-400);
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--space-100);
@@ -97,18 +98,19 @@ $icon-status-colors: (
     }
 
     &__optionText {
-        min-width: var(--space-600);
+        max-width: var(--space-600);
+        min-width: var(--space-200);
         color: var(--color-text-information-default);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        flex-shrink: 0;
     }
 
     &__optionButton {
         width: 100%;
         padding: 0 var(--space-100);
         border: 0;
-        justify-content: space-around;
         flex-grow: 1;
         gap: var(--space-50);
 
@@ -127,10 +129,13 @@ $icon-status-colors: (
     }
 
     &__valueContainer {
+        width: 100%;
+        padding: 0 var(--space-100);
+        float: left;
         display: flex;
-        align-items: center;
         justify-content: center;
-        flex-grow: 1;
+        gap: var(--space-50);
+        overflow: auto;
         cursor: default;
     }
 
@@ -152,19 +157,17 @@ $icon-status-colors: (
         }
     }
 
-    .Dropdown {
-        &__list {
-            width: 100%;
-            border-radius: var(--space-100);
-            overflow: hidden;
+    .badgeDropdownList {
+        width: 100%;
+        border-radius: var(--space-100);
+        overflow: hidden;
+    }
 
-            .ListItem {
-                display: flex;
-                align-items: center;
-                justify-content: flex-start;
-                gap: var(--space-100);
-            }
-        }
+    .badgeListItem {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--space-100);
     }
 
     &__deleteButton {
diff --git a/src/components/SelectBadge/SelectBadge.tsx b/src/components/SelectBadge/SelectBadge.tsx
index c46cd16e1..94acf9d2b 100644
--- a/src/components/SelectBadge/SelectBadge.tsx
+++ b/src/components/SelectBadge/SelectBadge.tsx
@@ -18,88 +18,69 @@ const iconMap = {
 
 export type Priority = 'mandatory' | 'important' | 'optional' | 'exclude';
 
-export interface Option {
-    value: string;
+export type PriorityItem<PriorityItemValue> = {
+    priority: Priority;
     label: string;
-}
+    value?: PriorityItemValue;
+};
+
+// Priority related props
+type PriorityProps<PriorityItemValue> = {
+    /** Currently selected priority item that indicates the importance of the component. */
+    selectedItem?: PriorityItem<PriorityItemValue>;
+    /** Array of availible priority items. */
+    list: Array<PriorityItem<PriorityItemValue>>;
+    /** Callback function triggered when a new priority is selected. */
+    onChange: (newPriorityItem: PriorityItem<PriorityItemValue>) => void;
+    /** Priority button label name for ARIA labelling */
+    buttonAriaLabel: string;
+};
 
-export interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+// Option related props
+type OptionProps<OptionItem> = {
+    /** Currently selected option item. */
+    selectedItem?: OptionItem;
+    /** Header title for the options list. */
+    listHeader?: string;
+    /** Array of options available for selection. */
+    list?: Array<OptionItem>;
+    /** Converts an option to a string label for display. */
+    toLabel: (option: OptionItem) => string;
+    /** Generates a unique key for an option. */
+    toKey: (option: OptionItem) => string;
+    /** Callback function triggered when a new option is selected. */
+    onChange?: (newOptionItem: OptionItem) => void;
+    /** Option button label name for ARIA labelling */
+    buttonAriaLabel: string;
+};
+
+export interface Props<PriorityItemValue, OptionItem>
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * Children nodes to be rendered within the component,
      * specifically used to display the selected value from parent component.
      */
     children: React.ReactNode;
-    /**
-     * Optional object containing labels for different priorities, used primarily for localization.
-     */
-    priorityLabels?: {
-        mandatory?: string;
-        important?: string;
-        optional?: string;
-        exclude?: string;
-    };
-    /**
-     * Current priority value that indicates the importance of the component.
-     * Uses the Priority type which can be 'mandatory', 'important', 'optional', or 'exclude'.
-     */
-    priority: Priority;
-    /**
-     * Optional object specifying the currently selected option with value and label properties.
-     */
-    option?: Option;
-    /**
-     * Array of options available for selection.
-     * Each option is an object with a value and a label.
-     */
-    optionList?: Array<Option>;
-    /**
-     * Optional header title for the options list when displayed, such as in a dropdown.
-     */
-    optionListHeader?: string;
-    /**
-     * Function to be called when the delete button is clicked.
-     */
+    /** Function to be called when the delete button is clicked. */
     onDelete?: (e: React.KeyboardEvent | React.MouseEvent) => void;
-    /**
-     * Callback function triggered when a new priority is selected.
-     * Provides the newly selected priority as an argument.
-     */
-    onPriorityChange?: (newPriority: Priority) => void;
-    /**
-     * Callback function triggered when a new option is selected.
-     * Provides the newly selected option object as an argument.
-     */
-    onChange: (newOption: Option) => void;
-    /**
-     * Boolean indicating whether the whole badge should be disabled.
-     */
+    /** Boolean indicating whether the whole badge should be disabled. */
     isDisabled?: boolean;
-    /** Priority button label name for ARIA labelling */
-    priorityButtonLabel: string;
-    /** Option button label name for ARIA labelling */
-    optionButtonLabel: string;
     /** Delete button label name for ARIA labelling */
-    deleteButtonLabel: string;
+    deleteButtonAriaLabel?: string;
+    priority?: PriorityProps<PriorityItemValue>;
+    option?: OptionProps<OptionItem>;
 }
 
 const { block, elem } = bem('SelectBadge', styles);
-
-export const SelectBadge: React.FC<Props> = ({
+export function SelectBadge<PriorityItemValue, OptionItem>({
     children,
     isDisabled = false,
-    onChange,
     onDelete = undefined,
-    onPriorityChange = undefined,
+    deleteButtonAriaLabel,
+    priority,
     option,
-    optionList,
-    optionListHeader,
-    priority = 'mandatory',
-    priorityLabels,
-    priorityButtonLabel,
-    optionButtonLabel,
-    deleteButtonLabel,
     ...rest
-}) => {
+}: Props<PriorityItemValue, OptionItem>) {
     const [dropdownStates, setDropdownStates] = React.useState({
         priority: false,
         option: false,
@@ -107,9 +88,15 @@ export const SelectBadge: React.FC<Props> = ({
 
     const badgeRef = React.useRef<HTMLDivElement | null>(null);
 
-    const hasPriorityLabels = priorityLabels && Object.keys(priorityLabels).length > 0;
+    const hasPriorityList = priority && priority.list && priority.list.length > 0;
+
+    const hasOptionList = option && option.list && option.list.length > 0;
+
+    const renderPriorityIcon = (priorityType?: Priority, disabled: boolean = false) => {
+        if (!priorityType) {
+            return null;
+        }
 
-    const renderPriorityIcon = (priorityType: Priority, disabled: boolean = false) => {
         const IconComponent = iconMap[priorityType];
 
         return IconComponent ? (
@@ -138,47 +125,49 @@ export const SelectBadge: React.FC<Props> = ({
 
     return (
         <div {...rest} {...block({ ...rest })} ref={badgeRef}>
-            {hasPriorityLabels && onPriorityChange && (
-                <Dropdown<Priority>
+            {hasPriorityList && (
+                <Dropdown<PriorityItem<PriorityItemValue>>
                     button={
                         <button
-                            aria-label={`${priorityButtonLabel}`}
-                            disabled={isDisabled}
-                            type="button"
                             {...elem('priorityButton', {
                                 isSelected: dropdownStates.priority,
                             })}
+                            aria-label={priority.buttonAriaLabel}
+                            disabled={isDisabled}
+                            type="button"
                         >
-                            {renderPriorityIcon(priority, isDisabled)}
+                            {renderPriorityIcon(priority.selectedItem?.priority, isDisabled)}
                         </button>
                     }
                     additionalSelectProps={{
                         onStateChange: (state) => toggleDropdown('priority', state.isOpen),
                     }}
-                    onChange={(newPriority) => onPriorityChange(newPriority)}
+                    onChange={(newPriorityItem) => priority.onChange(newPriorityItem)}
                     placement="bottom-start"
+                    listClassName={styles.badgeDropdownList}
                     refElement={badgeRef}
                 >
-                    {Object.entries(priorityLabels).map(([key, label]) => (
-                        <ListItem key={key} value={key}>
-                            {renderPriorityIcon(key as Priority)}
+                    {priority.list.map((item) => (
+                        <ListItem className={styles.badgeListItem} key={item.priority} value={item}>
+                            {renderPriorityIcon(item.priority)}
                             <Text inline size="small">
-                                {label}
+                                {item.label}
                             </Text>
                         </ListItem>
                     ))}
                 </Dropdown>
             )}
 
-            {optionList ? (
-                <Dropdown<Option>
+            {hasOptionList ? (
+                <Dropdown<OptionItem>
                     button={
                         <button
                             {...elem('optionButton', {
                                 isSelected: dropdownStates.option,
                             })}
-                            aria-label={`${option?.label} ${optionButtonLabel}`}
+                            aria-label={option.buttonAriaLabel}
                             disabled={isDisabled}
+                            type="button"
                         >
                             <Text
                                 inline
@@ -188,14 +177,14 @@ export const SelectBadge: React.FC<Props> = ({
                             >
                                 {children}
                             </Text>
-                            {option && (
+                            {option.selectedItem && (
                                 <Text
                                     {...elem('optionText')}
                                     inline
-                                    title={option?.label}
+                                    title={option.toLabel(option.selectedItem)}
                                     size="small"
                                 >
-                                    {option.label}
+                                    {option.toLabel(option.selectedItem)}
                                 </Text>
                             )}
                         </button>
@@ -203,21 +192,26 @@ export const SelectBadge: React.FC<Props> = ({
                     additionalSelectProps={{
                         onStateChange: (state) => toggleDropdown('option', state.isOpen),
                     }}
-                    onChange={(newOption) => onChange(newOption)}
+                    onChange={(newOptionItem) => option.onChange?.(newOptionItem)}
                     placement="bottom"
                     refElement={badgeRef}
+                    listClassName={styles.badgeDropdownList}
                 >
-                    {optionListHeader ? (
+                    {option.listHeader ? (
                         <div {...elem('listHeadline')}>
-                            <Text inline title={optionListHeader}>
-                                {optionListHeader?.toUpperCase()}
+                            <Text inline title={option.listHeader}>
+                                {option.listHeader.toUpperCase()}
                             </Text>
                         </div>
                     ) : null}
-                    {optionList?.map((opt) => (
-                        <ListItem key={opt.value} value={opt}>
+                    {option.list?.map((opt) => (
+                        <ListItem
+                            className={styles.badgeListItem}
+                            key={option.toKey(opt)}
+                            value={opt}
+                        >
                             <Text inline size="small">
-                                {opt.label}
+                                {option.toLabel(opt)}
                             </Text>
                         </ListItem>
                     ))}
@@ -232,13 +226,23 @@ export const SelectBadge: React.FC<Props> = ({
                     >
                         {children}
                     </Text>
+                    {option && option.selectedItem && (
+                        <Text
+                            {...elem('optionText')}
+                            inline
+                            title={option.toLabel(option.selectedItem)}
+                            size="small"
+                        >
+                            {option.toLabel(option.selectedItem)}
+                        </Text>
+                    )}
                 </div>
             )}
 
             {onDelete && (
                 <button
                     {...elem('deleteButton')}
-                    aria-label={deleteButtonLabel}
+                    aria-label={deleteButtonAriaLabel}
                     disabled={isDisabled}
                     onClick={handleOnDelete}
                     type="button"
@@ -254,6 +258,6 @@ export const SelectBadge: React.FC<Props> = ({
             )}
         </div>
     );
-};
+}
 
 SelectBadge.displayName = 'SelectBadge';
diff --git a/src/components/SelectBadge/__tests__/SelectBadge.spec.tsx b/src/components/SelectBadge/__tests__/SelectBadge.spec.tsx
index c4e193496..a6dcd8781 100644
--- a/src/components/SelectBadge/__tests__/SelectBadge.spec.tsx
+++ b/src/components/SelectBadge/__tests__/SelectBadge.spec.tsx
@@ -2,31 +2,35 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
-import { Priority, SelectBadge } from '../SelectBadge';
+import { SelectBadge } from '../SelectBadge';
+import { SelectBadgeProps } from '..';
 
-const mockOnChange = jest.fn();
-const mockOnPriorityChange = jest.fn();
+const mockOnOptionItemChange = jest.fn();
+const mockOnPriorityItemChange = jest.fn();
 const mockOnDelete = jest.fn();
 
-const defaultProps = {
+const defaultProps: SelectBadgeProps<string, string> = {
     children: 'Test Child',
-    priorityLabels: {
-        mandatory: 'Mandatory',
-        important: 'Important',
-        optional: 'Optional',
-        exclude: 'Exclude',
+    priority: {
+        selectedItem: { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+        list: [
+            { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+            { priority: 'important', label: 'Important', value: 'strongly_favored' },
+            { priority: 'optional', label: 'Optional', value: 'favored' },
+            { priority: 'exclude', label: 'Exclude', value: 'banned' },
+        ],
+        buttonAriaLabel: 'priority button',
+        onChange: mockOnPriorityItemChange,
     },
-    priority: 'mandatory' as Priority,
-    option: { value: 'opt1', label: 'Option 1' },
-    optionList: [
-        { value: 'opt1', label: 'Option 1' },
-        { value: 'opt2', label: 'Option 2' },
-    ],
-    priorityButtonLabel: 'priority button',
-    optionButtonLabel: 'option button',
-    deleteButtonLabel: 'delete button',
-    onChange: mockOnChange,
-    onPriorityChange: mockOnPriorityChange,
+    option: {
+        selectedItem: '15',
+        list: ['5', '15', '25'],
+        toLabel: (option) => `Label for ${option}`,
+        toKey: (option) => `key-${option}`,
+        onChange: mockOnOptionItemChange,
+        buttonAriaLabel: 'option button',
+    },
+    deleteButtonAriaLabel: 'delete button',
     onDelete: mockOnDelete,
 };
 
@@ -39,31 +43,6 @@ describe('SelectBadge', () => {
             expect(view.container).toMatchSnapshot();
         });
 
-        it('renders only the priorities for which labels are provided', async () => {
-            const priorityLabels = {
-                mandatory: 'Mandatory',
-                important: 'Important',
-            };
-            const { getByLabelText, getByText, queryByText } = renderSelectBadge({
-                priorityLabels,
-            });
-
-            const user = userEvent.setup();
-            const priorityButton = getByLabelText('priority button');
-            await user.click(priorityButton);
-
-            expect(getByText('Mandatory')).toBeInTheDocument();
-            expect(getByText('Important')).toBeInTheDocument();
-            expect(queryByText('Optional')).not.toBeInTheDocument();
-            expect(queryByText('Exclude')).not.toBeInTheDocument();
-        });
-
-        it('renders no priority buttons when priorityLabels is empty', () => {
-            const { queryByLabelText } = renderSelectBadge({ priorityLabels: {} });
-
-            expect(queryByLabelText('priority button')).not.toBeInTheDocument();
-        });
-
         it('should handle priority change correctly', async () => {
             const view = renderSelectBadge();
 
@@ -75,44 +54,47 @@ describe('SelectBadge', () => {
 
             await user.click(screen.getByText('Important'));
 
-            expect(mockOnPriorityChange).toHaveBeenCalledTimes(1);
-            expect(mockOnPriorityChange).toHaveBeenCalledWith('important');
+            expect(mockOnPriorityItemChange).toHaveBeenCalledTimes(1);
+            expect(mockOnPriorityItemChange).toHaveBeenCalledWith({
+                priority: 'important',
+                label: 'Important',
+                value: 'strongly_favored',
+            });
         });
 
-        it('does not render the priority button when priorityLabels are not provided', () => {
+        it('does not render the priority button when priority is not provided', () => {
             const { queryByLabelText } = renderSelectBadge({
-                priorityLabels: undefined,
-                onPriorityChange: jest.fn(),
+                priority: undefined,
             });
 
             expect(queryByLabelText('priority button')).not.toBeInTheDocument();
         });
 
-        it('does not render the priority button when onPriorityChange is not provided', () => {
-            const { queryByText } = renderSelectBadge({
-                priorityLabels: { mandatory: 'Mandatory' },
-                onPriorityChange: undefined,
+        it('does not render the priority button when priority list is not provided', () => {
+            const { queryByLabelText } = renderSelectBadge({
+                priority: { list: undefined },
             });
 
-            expect(queryByText('priority button')).not.toBeInTheDocument();
+            expect(queryByLabelText('priority button')).not.toBeInTheDocument();
         });
 
-        it('does not render the priority button when neither priorityLabels nor onPriorityChange are provided', () => {
-            const { queryByText } = renderSelectBadge({
-                priorityLabels: undefined,
-                onPriorityChange: undefined,
+        it('does not render the priority button when priority list is empty', () => {
+            const { queryByLabelText } = renderSelectBadge({
+                priority: { list: [] },
             });
 
-            expect(queryByText('priority button')).not.toBeInTheDocument();
+            expect(queryByLabelText('priority button')).not.toBeInTheDocument();
         });
     });
 
     describe('Option button', () => {
         it('renders option list headline when provided', async () => {
-            const { getByText } = renderSelectBadge({ optionListHeader: 'Select an Option' });
+            const { getByLabelText, getByText } = renderSelectBadge({
+                option: { ...defaultProps.option, listHeader: 'Select an Option' },
+            });
 
             const user = userEvent.setup();
-            const optionButton = screen.getByText('Option 1');
+            const optionButton = getByLabelText('option button');
             await user.click(optionButton);
 
             expect(getByText('SELECT AN OPTION')).toBeInTheDocument();
@@ -122,34 +104,64 @@ describe('SelectBadge', () => {
             const view = renderSelectBadge();
 
             const user = userEvent.setup();
-            const optionButton = screen.getByText('Option 1');
+            const optionButton = screen.getByLabelText('option button');
             await user.click(optionButton);
 
             expect(view.container).toMatchSnapshot();
 
-            await user.click(screen.getByText('Option 2'));
+            await user.click(screen.getByText('Label for 25'));
 
-            expect(mockOnChange).toHaveBeenCalledTimes(1);
-            expect(mockOnChange).toHaveBeenCalledWith({ value: 'opt2', label: 'Option 2' });
+            expect(mockOnOptionItemChange).toHaveBeenCalledTimes(1);
+            expect(mockOnOptionItemChange).toHaveBeenCalledWith('25');
         });
 
-        it('does not render option button but displays plain text with passed children if optionList is not provided.', () => {
+        it('renders the correct labels using toLabel', async () => {
+            const { getAllByText, getByLabelText } = renderSelectBadge();
+
+            const user = userEvent.setup();
+            const optionButton = getByLabelText('option button');
+            await user.click(optionButton);
+
+            defaultProps?.option?.list?.forEach((opt) =>
+                expect(getAllByText(`Label for ${opt}`)[0]).toBeInTheDocument()
+            );
+        });
+
+        it('does not render the option button but displays plain text with passed children if option is not provided', () => {
+            const { getByText, queryByText } = renderSelectBadge({
+                option: undefined,
+            });
+
+            expect(queryByText('option button')).not.toBeInTheDocument();
+            expect(getByText('Test Child')).toBeInTheDocument();
+        });
+
+        it('does not render the option button but displays plain text with passed children if option list is not provided', () => {
             const { getByText, queryByText } = renderSelectBadge({
-                optionList: undefined,
+                option: { list: undefined },
             });
 
             expect(queryByText('option button')).not.toBeInTheDocument();
-            expect(getByText(defaultProps.children)).toBeInTheDocument();
+            expect(getByText('Test Child')).toBeInTheDocument();
+        });
+
+        it('does not render the option button but displays plain text with passed children if option list is empty', () => {
+            const { getByText, queryByText } = renderSelectBadge({
+                option: { list: [] },
+            });
+
+            expect(queryByText('option button')).not.toBeInTheDocument();
+            expect(getByText('Test Child')).toBeInTheDocument();
         });
     });
 
     describe('Delete button', () => {
-        it('should not render delete button if onDelete is not provided', () => {
+        it('should not render the delete button if onDelete is not provided', () => {
             const { queryByLabelText } = renderSelectBadge({ onDelete: undefined });
             expect(queryByLabelText('delete button')).not.toBeInTheDocument();
         });
 
-        it('should handle delete button functionality', async () => {
+        it('should handle the delete button functionality correctly', async () => {
             const { getByLabelText } = renderSelectBadge();
 
             const user = userEvent.setup();
@@ -166,7 +178,7 @@ describe('SelectBadge', () => {
         });
 
         expect(getByLabelText('priority button')).toBeDisabled();
-        expect(getByLabelText('Option 1 option button')).toBeDisabled();
+        expect(getByLabelText('option button')).toBeDisabled();
         expect(getByLabelText('delete button')).toBeDisabled();
     });
 
@@ -180,13 +192,17 @@ describe('SelectBadge', () => {
         await user.click(priorityButton); // Close
         await user.click(priorityButton); // Re-open
 
-        Object.values(defaultProps.priorityLabels).forEach((label) => {
-            expect(getByText(label)).toBeInTheDocument();
+        defaultProps?.priority?.list?.forEach(({ label }) => {
+            expect(screen.getByText(label)).toBeInTheDocument();
         });
 
         await user.click(getByText('Optional'));
 
-        expect(defaultProps.onPriorityChange).toHaveBeenCalledTimes(1);
-        expect(defaultProps.onPriorityChange).toHaveBeenCalledWith('optional');
+        expect(defaultProps?.priority?.onChange).toHaveBeenCalledTimes(1);
+        expect(defaultProps?.priority?.onChange).toHaveBeenCalledWith({
+            label: 'Optional',
+            priority: 'optional',
+            value: 'favored',
+        });
     });
 });
diff --git a/src/components/SelectBadge/__tests__/__snapshots__/SelectBadge.spec.tsx.snap b/src/components/SelectBadge/__tests__/__snapshots__/SelectBadge.spec.tsx.snap
index f6c4fd9d8..c183a8752 100644
--- a/src/components/SelectBadge/__tests__/__snapshots__/SelectBadge.spec.tsx.snap
+++ b/src/components/SelectBadge/__tests__/__snapshots__/SelectBadge.spec.tsx.snap
@@ -7,13 +7,13 @@ exports[`SelectBadge Option button should handle option change correctly 1`] = `
   >
     <button
       aria-activedescendant=""
-      aria-controls="downshift-:rc:-menu"
+      aria-controls="downshift-:r9:-menu"
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-label="priority button"
-      aria-labelledby="downshift-:rc:-label"
+      aria-labelledby="downshift-:r9:-label"
       class="SelectBadge__priorityButton"
-      id="downshift-:rc:-toggle-button"
+      id="downshift-:r9:-toggle-button"
       role="combobox"
       tabindex="0"
       type="button"
@@ -25,22 +25,23 @@ exports[`SelectBadge Option button should handle option change correctly 1`] = `
       />
     </button>
     <ul
-      aria-labelledby="downshift-:rc:-label"
+      aria-labelledby="downshift-:r9:-label"
       class="List"
-      id="downshift-:rc:-menu"
+      id="downshift-:r9:-menu"
       role="listbox"
     />
     <button
       aria-activedescendant=""
-      aria-controls="downshift-:rd:-menu"
+      aria-controls="downshift-:ra:-menu"
       aria-expanded="true"
       aria-haspopup="listbox"
-      aria-label="Option 1 option button"
-      aria-labelledby="downshift-:rd:-label"
+      aria-label="option button"
+      aria-labelledby="downshift-:ra:-label"
       class="SelectBadge__optionButton SelectBadge__optionButton--isSelected"
-      id="downshift-:rd:-toggle-button"
+      id="downshift-:ra:-toggle-button"
       role="combobox"
       tabindex="0"
+      type="button"
     >
       <span
         class="Text--size_small SelectBadge__valueText"
@@ -50,45 +51,58 @@ exports[`SelectBadge Option button should handle option change correctly 1`] = `
       </span>
       <span
         class="Text--size_small SelectBadge__optionText"
-        title="Option 1"
+        title="Label for 15"
       >
-        Option 1
+        Label for 15
       </span>
     </button>
     <ul
-      aria-labelledby="downshift-:rd:-label"
-      class="List Dropdown__list"
+      aria-labelledby="downshift-:ra:-label"
+      class="List Dropdown__list badgeDropdownList"
       data-popper-escaped="true"
       data-popper-placement="bottom"
       data-popper-reference-hidden="true"
-      id="downshift-:rd:-menu"
+      id="downshift-:ra:-menu"
       role="listbox"
       style="position: absolute; left: 0px; top: 0px; width: 0px; transform: translate(0px, 3px);"
     >
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:rd:-item-0"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:ra:-item-0"
         role="option"
       >
         <span
           class="Text--size_small"
         >
-          Option 1
+          Label for 5
         </span>
       </li>
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:rd:-item-1"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:ra:-item-1"
         role="option"
       >
         <span
           class="Text--size_small"
         >
-          Option 2
+          Label for 15
+        </span>
+      </li>
+      <li
+        aria-disabled="false"
+        aria-selected="false"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:ra:-item-2"
+        role="option"
+      >
+        <span
+          class="Text--size_small"
+        >
+          Label for 25
         </span>
       </li>
     </ul>
@@ -141,12 +155,13 @@ exports[`SelectBadge Priority button renders correctly with all props provided 1
       aria-controls="downshift-:r1:-menu"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-label="Option 1 option button"
+      aria-label="option button"
       aria-labelledby="downshift-:r1:-label"
       class="SelectBadge__optionButton"
       id="downshift-:r1:-toggle-button"
       role="combobox"
       tabindex="0"
+      type="button"
     >
       <span
         class="Text--size_small SelectBadge__valueText"
@@ -156,9 +171,9 @@ exports[`SelectBadge Priority button renders correctly with all props provided 1
       </span>
       <span
         class="Text--size_small SelectBadge__optionText"
-        title="Option 1"
+        title="Label for 15"
       >
-        Option 1
+        Label for 15
       </span>
     </button>
     <ul
@@ -188,13 +203,13 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
   >
     <button
       aria-activedescendant=""
-      aria-controls="downshift-:r5:-menu"
+      aria-controls="downshift-:r2:-menu"
       aria-expanded="true"
       aria-haspopup="listbox"
       aria-label="priority button"
-      aria-labelledby="downshift-:r5:-label"
+      aria-labelledby="downshift-:r2:-label"
       class="SelectBadge__priorityButton SelectBadge__priorityButton--isSelected"
-      id="downshift-:r5:-toggle-button"
+      id="downshift-:r2:-toggle-button"
       role="combobox"
       tabindex="0"
       type="button"
@@ -206,20 +221,20 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
       />
     </button>
     <ul
-      aria-labelledby="downshift-:r5:-label"
-      class="List Dropdown__list"
+      aria-labelledby="downshift-:r2:-label"
+      class="List Dropdown__list badgeDropdownList"
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      id="downshift-:r5:-menu"
+      id="downshift-:r2:-menu"
       role="listbox"
       style="position: absolute; left: 0px; top: 0px; width: 0px; transform: translate(0px, 3px);"
     >
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:r5:-item-0"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:r2:-item-0"
         role="option"
       >
         <test-file-stub
@@ -236,8 +251,8 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:r5:-item-1"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:r2:-item-1"
         role="option"
       >
         <test-file-stub
@@ -254,8 +269,8 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:r5:-item-2"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:r2:-item-2"
         role="option"
       >
         <test-file-stub
@@ -272,8 +287,8 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
       <li
         aria-disabled="false"
         aria-selected="false"
-        class="ListItem ListItem--clickable List__item"
-        id="downshift-:r5:-item-3"
+        class="ListItem ListItem--clickable List__item badgeListItem"
+        id="downshift-:r2:-item-3"
         role="option"
       >
         <test-file-stub
@@ -290,15 +305,16 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
     </ul>
     <button
       aria-activedescendant=""
-      aria-controls="downshift-:r6:-menu"
+      aria-controls="downshift-:r3:-menu"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-label="Option 1 option button"
-      aria-labelledby="downshift-:r6:-label"
+      aria-label="option button"
+      aria-labelledby="downshift-:r3:-label"
       class="SelectBadge__optionButton"
-      id="downshift-:r6:-toggle-button"
+      id="downshift-:r3:-toggle-button"
       role="combobox"
       tabindex="0"
+      type="button"
     >
       <span
         class="Text--size_small SelectBadge__valueText"
@@ -308,15 +324,15 @@ exports[`SelectBadge Priority button should handle priority change correctly 1`]
       </span>
       <span
         class="Text--size_small SelectBadge__optionText"
-        title="Option 1"
+        title="Label for 15"
       >
-        Option 1
+        Label for 15
       </span>
     </button>
     <ul
-      aria-labelledby="downshift-:r6:-label"
+      aria-labelledby="downshift-:r3:-label"
       class="List"
-      id="downshift-:r6:-menu"
+      id="downshift-:r3:-menu"
       role="listbox"
     />
     <button
diff --git a/src/components/SelectBadge/index.ts b/src/components/SelectBadge/index.ts
index 681ee27a2..00e74ed45 100644
--- a/src/components/SelectBadge/index.ts
+++ b/src/components/SelectBadge/index.ts
@@ -1 +1,6 @@
-export { SelectBadge, Props as SelectBadgeProps, Priority, Option } from './SelectBadge';
+export {
+    SelectBadge,
+    Props as SelectBadgeProps,
+    Priority as SelectBadgePriority,
+    PriorityItem as SelectBadgePriorityItem,
+} from './SelectBadge';
diff --git a/stories/organisms/SelectBadge.stories.tsx b/stories/organisms/SelectBadge.stories.tsx
index 22d68601e..3f25626ce 100644
--- a/stories/organisms/SelectBadge.stories.tsx
+++ b/stories/organisms/SelectBadge.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Option, Priority, SelectBadge } from '@textkernel/oneui';
+import { SelectBadge, SelectBadgePriorityItem } from '@textkernel/oneui';
 
 const meta: Meta<typeof SelectBadge> = {
     title: 'Organisms/SelectBadge',
@@ -9,53 +9,58 @@ const meta: Meta<typeof SelectBadge> = {
 
 export default meta;
 
-type Story = StoryObj<typeof SelectBadge>;
-
-const commonArgs = {
-    children: 'London',
-    option: { value: '15', label: '+15 km' },
-    optionList: [
-        { value: '5', label: '+5 km' },
-        { value: '15', label: '+15 km' },
-        { value: '25', label: '+25 km' },
-    ],
-    optionListHeader: 'Radius',
-};
+type Story = StoryObj<typeof SelectBadge<string, string>>;
+
+const priorityList: Array<SelectBadgePriorityItem<string>> = [
+    { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+    { priority: 'important', label: 'Important', value: 'strongly_favored' },
+    { priority: 'optional', label: 'Optional', value: 'favored' },
+    { priority: 'exclude', label: 'Exclude', value: 'banned' },
+];
 
 export const _SelectBadge: Story = {
     name: 'SelectBadge',
     args: {
-        ...commonArgs,
-        priority: 'mandatory',
-        priorityLabels: {
-            mandatory: 'Mandatory',
-            important: 'Important',
-            optional: 'Optional',
-            exclude: 'Exclude',
+        children: 'London',
+        priority: {
+            list: priorityList,
+            buttonAriaLabel: 'Priority',
+            onChange: () => {},
+            selectedItem: undefined,
+        },
+        option: {
+            selectedItem: undefined,
+            list: ['5', '10', '15', '25'],
+            listHeader: 'Radius',
+            buttonAriaLabel: 'Option button',
+            toLabel: (option: string) => `+${option}`,
+            toKey: (option: string) => `key-${option}`,
         },
     },
     render: (args) => {
-        const [priority, setPriority] = React.useState<Priority>(args.priority);
-        const [selectedOption, setSelectedOption] = React.useState(args.option);
+        const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
+            SelectBadgePriorityItem<string> | undefined
+        >(args.priority?.selectedItem);
+        const [selectedOptionItem, setSelectedOptionItem] = React.useState(
+            args.option?.selectedItem
+        );
 
         React.useEffect(() => {
-            setPriority(args.priority);
-        }, [args.priority]);
+            setSelectedPriorityItem(selectedPriorityItem);
+        }, [selectedPriorityItem]);
 
         React.useEffect(() => {
-            setSelectedOption(args.option);
-        }, [args.option]);
-
-        const handlePriorityChange = (newPriority: Priority) => {
-            setPriority(newPriority);
+            setSelectedOptionItem(selectedOptionItem);
+        }, [selectedOptionItem]);
 
-            console.log(`Priority changed to ${newPriority}`);
+        const handlePriorityChange = (newPriorityItem: SelectBadgePriorityItem<string>) => {
+            setSelectedPriorityItem(newPriorityItem);
+            console.log(`Priority changed to ${newPriorityItem.priority}`);
         };
 
-        const handleOptionChange = (newOption: Option) => {
-            setSelectedOption(newOption);
-
-            console.log(`Option changed to ${newOption.value}`);
+        const handleOptionChange = (newOptionItem: string) => {
+            setSelectedOptionItem(newOptionItem);
+            console.log(`Option changed to ${newOptionItem}`);
         };
 
         const handleDelete = () => {
@@ -66,10 +71,20 @@ export const _SelectBadge: Story = {
             <div style={{ width: '200px' }}>
                 <SelectBadge
                     {...args}
-                    priority={priority}
-                    option={selectedOption}
-                    onPriorityChange={handlePriorityChange}
-                    onChange={handleOptionChange}
+                    priority={
+                        args.priority && {
+                            ...args.priority,
+                            selectedItem: selectedPriorityItem,
+                            onChange: handlePriorityChange,
+                        }
+                    }
+                    option={
+                        args.option && {
+                            ...args.option,
+                            selectedItem: selectedOptionItem,
+                            onChange: handleOptionChange,
+                        }
+                    }
                     onDelete={handleDelete}
                 >
                     {args.children}
@@ -82,21 +97,30 @@ export const _SelectBadge: Story = {
 export const SelectBadgeWithoutPriorityButton: Story = {
     name: 'SelectBadge - No Priority Control',
     args: {
-        ...commonArgs,
-        onPriorityChange: undefined,
+        children: 'London',
+        priority: undefined,
+        option: {
+            selectedItem: '5',
+            list: ['5', '10', '15', '25'],
+            listHeader: 'Radius',
+            buttonAriaLabel: 'Option button',
+            toLabel: (option: string) => `+${option}`,
+            toKey: (option: string) => `key-${option}`,
+        },
     },
     render: (args) => {
-        const [selectedOption, setSelectedOption] = React.useState(args.option);
+        const [selectedOptionItem, setSelectedOptionItem] = React.useState(
+            args.option?.selectedItem
+        );
 
         React.useEffect(() => {
-            setSelectedOption(args.option);
-        }, [args.option]);
+            setSelectedOptionItem(selectedOptionItem);
+        }, [selectedOptionItem]);
 
-        const handleOptionChange = React.useCallback((newOption: Option) => {
-            setSelectedOption(newOption);
-
-            console.log(`Option changed to ${newOption}`);
-        }, []);
+        const handleOptionChange = (newOptionItem: string) => {
+            setSelectedOptionItem(newOptionItem);
+            console.log(`Option changed to ${newOptionItem}`);
+        };
 
         const handleDelete = () => {
             console.log('SelectBadge deleted');
@@ -106,8 +130,13 @@ export const SelectBadgeWithoutPriorityButton: Story = {
             <div style={{ width: '200px' }}>
                 <SelectBadge
                     {...args}
-                    option={selectedOption}
-                    onChange={handleOptionChange}
+                    option={
+                        args.option && {
+                            ...args.option,
+                            selectedItem: selectedOptionItem,
+                            onChange: handleOptionChange,
+                        }
+                    }
                     onDelete={handleDelete}
                 >
                     {args.children}
@@ -118,32 +147,35 @@ export const SelectBadgeWithoutPriorityButton: Story = {
 };
 
 export const SelectBadgeWithoutOptions: Story = {
-    name: 'SelectBadge - No Options',
+    name: 'SelectBadge - No Options Control',
     args: {
-        ...commonArgs,
-        onChange: undefined,
-        option: undefined,
-        optionList: undefined,
-        priority: 'mandatory',
-        priorityLabels: {
-            mandatory: 'Mandatory',
-            important: 'Important',
-            optional: 'Optional',
-            exclude: 'Exclude',
+        children: 'London',
+        priority: {
+            list: priorityList,
+            buttonAriaLabel: 'Priority button',
+            onChange: () => {},
+            selectedItem: { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+        },
+        option: {
+            selectedItem: '5',
+            buttonAriaLabel: 'Option button',
+            toLabel: (option: string) => `+${option}`,
+            toKey: (option: string) => `key-${option}`,
         },
     },
     render: (args) => {
-        const [priority, setPriority] = React.useState<Priority>(args.priority);
+        const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
+            SelectBadgePriorityItem<string> | undefined
+        >(args.priority?.selectedItem);
 
         React.useEffect(() => {
-            setPriority(args.priority);
-        }, [args.priority]);
-
-        const handlePriorityChange = React.useCallback((newPriority: Priority) => {
-            setPriority(newPriority);
+            setSelectedPriorityItem(selectedPriorityItem);
+        }, [selectedPriorityItem]);
 
-            console.log(`Priority changed to ${newPriority}`);
-        }, []);
+        const handlePriorityChange = (newPriorityItem: SelectBadgePriorityItem<string>) => {
+            setSelectedPriorityItem(newPriorityItem);
+            console.log(`Priority changed to ${newPriorityItem.priority}`);
+        };
 
         const handleDelete = () => {
             console.log('SelectBadge deleted');
@@ -153,8 +185,13 @@ export const SelectBadgeWithoutOptions: Story = {
             <div style={{ width: '200px' }}>
                 <SelectBadge
                     {...args}
-                    priority={priority}
-                    onPriorityChange={handlePriorityChange}
+                    priority={
+                        args.priority && {
+                            ...args.priority,
+                            selectedItem: selectedPriorityItem,
+                            onChange: handlePriorityChange,
+                        }
+                    }
                     onDelete={handleDelete}
                 >
                     {args.children}
@@ -167,48 +204,67 @@ export const SelectBadgeWithoutOptions: Story = {
 export const SelectBadgeWithoutCloseButton: Story = {
     name: 'SelectBadge - No Delete Functionality',
     args: {
-        ...commonArgs,
-        priority: 'mandatory',
-        priorityLabels: {
-            mandatory: 'Mandatory',
-            important: 'Important',
-            optional: 'Optional',
-            exclude: 'Exclude',
+        children: 'London',
+        priority: {
+            list: priorityList,
+            buttonAriaLabel: 'Priority button',
+            onChange: () => {},
+            selectedItem: { priority: 'mandatory', label: 'Mandatory', value: 'required' },
+        },
+        option: {
+            selectedItem: '5',
+            list: ['5', '10', '15', '25'],
+            listHeader: 'Radius',
+            buttonAriaLabel: 'Option button',
+            toLabel: (option: string) => `+${option}`,
+            toKey: (option: string) => `key-${option}`,
         },
         onDelete: undefined,
     },
     render: (args) => {
-        const [priority, setPriority] = React.useState<Priority>(args.priority);
-        const [selectedOption, setSelectedOption] = React.useState(args.option);
+        const [selectedPriorityItem, setSelectedPriorityItem] = React.useState<
+            SelectBadgePriorityItem<string> | undefined
+        >(args.priority?.selectedItem);
+        const [selectedOptionItem, setSelectedOptionItem] = React.useState(
+            args.option?.selectedItem
+        );
 
         React.useEffect(() => {
-            setPriority(args.priority);
-        }, [args.priority]);
+            setSelectedPriorityItem(selectedPriorityItem);
+        }, [selectedPriorityItem]);
 
         React.useEffect(() => {
-            setSelectedOption(args.option);
-        }, [args.option]);
+            setSelectedOptionItem(selectedOptionItem);
+        }, [selectedOptionItem]);
 
-        const handlePriorityChange = React.useCallback((newPriority: Priority) => {
-            setPriority(newPriority);
-
-            console.log(`Priority changed to ${newPriority}`);
-        }, []);
-
-        const handleOptionChange = React.useCallback((newOption: Option) => {
-            setSelectedOption(newOption);
+        const handlePriorityChange = (newPriorityItem: SelectBadgePriorityItem<string>) => {
+            setSelectedPriorityItem(newPriorityItem);
+            console.log(`Priority changed to ${newPriorityItem.priority}`);
+        };
 
-            console.log(`Option changed to ${newOption.value}`);
-        }, []);
+        const handleOptionChange = (newOptionItem: string) => {
+            setSelectedOptionItem(newOptionItem);
+            console.log(`Option changed to ${newOptionItem}`);
+        };
 
         return (
             <div style={{ width: '200px' }}>
                 <SelectBadge
                     {...args}
-                    priority={priority}
-                    option={selectedOption}
-                    onPriorityChange={handlePriorityChange}
-                    onChange={handleOptionChange}
+                    priority={
+                        args.priority && {
+                            ...args.priority,
+                            selectedItem: selectedPriorityItem,
+                            onChange: handlePriorityChange,
+                        }
+                    }
+                    option={
+                        args.option && {
+                            ...args.option,
+                            selectedItem: selectedOptionItem,
+                            onChange: handleOptionChange,
+                        }
+                    }
                 >
                     {args.children}
                 </SelectBadge>