11740220383

Committed 08 Nov 2024 10:15AM UTC coverage: 89.271% (+0.2%) from 89.093%

Build # 11740220383

Build Type

Pull #1303

github

Committed by

web-flow

Commit Message

Merge 42603c636 into 5b5e09ba2

Pull Request Pull Request #1303: feat(Pill): add new PillButton variant

Run Details

1411 of 1795 branches covered (78.61%)

Branch coverage included in aggregate %.

60 of 60 new or added lines in 6 files covered. (100.0%)

1 existing line in 1 file now uncovered.

3465 of 3667 relevant lines covered (94.49%)

60.32 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.0

/src/components/PrioritySelector/PrioritySelector.tsx

import * as React from 'react';
import Close from '@material-design-icons/svg/round/close.svg';
import KeyboardDoubleArrowUp from '@material-design-icons/svg/round/keyboard_double_arrow_up.svg';
import KeyboardArrowUp from '@material-design-icons/svg/round/keyboard_arrow_up.svg';
import KeyboardArrowDown from '@material-design-icons/svg/round/keyboard_arrow_down.svg';
import { DropdownMenuItem, Root, Portal } from '@radix-ui/react-dropdown-menu';
import { Size } from '@textkernel/oneui';
import { DropdownTrigger } from '../Dropdown/DropdownTrigger';
import { DropdownContent } from '../Dropdown/DropdownContent';
import { bem } from '../../utils/bem';
import { Text } from '../Text';
import { IconButton } from '../Buttons';
import itemStyles from '../Dropdown/Items/Item.scss';
import styles from './PrioritySelector.scss';

const iconMap = {
    mandatory: KeyboardDoubleArrowUp,
    important: KeyboardArrowUp,
    optional: KeyboardArrowDown,
    exclude: Close,
};

export type Priority = 'mandatory' | 'important' | 'optional' | 'exclude';

export type PriorityItemType<PriorityItemValue> = {
    /** priority types: mandatory, important, optional or exclude. Makes correct icon show up */
    priority: Priority;
    /** text that should accompany the icon in the dropdown */
    label: string;
    /** optional: used in case of application-specific values / custom priorities */
    value?: PriorityItemValue;
};

export interface Props<PriorityItemValue>
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /** Currently selected priority item that indicates the importance of the component. */
    selectedItem: PriorityItemType<PriorityItemValue>;
    /** Array of availible priority items. */
    list: PriorityItemType<PriorityItemValue>[];
    /** Callback function triggered when a new priority is selected. */
    onChange: (newPriorityItem: PriorityItemType<PriorityItemValue>) => void;
    /** Boolean indicating whether the whole badge should be disabled. */
    isDisabled?: boolean;
    /** Priority button label name for ARIA labelling */
    buttonLabel?: string;
    /** ref to possible parent div, if it is a badge */
    parentRef?: React.RefObject<HTMLElement | null> | React.ForwardedRef<HTMLDivElement>;
    /** ref to iconButton, used for keyboard navigation */
    buttonRef?: React.RefObject<HTMLElement>;
    /** the size of the trigger button */
    size?: Size;
}

const { block, elem } = bem('PrioritySelector', styles);
const itemStylesBem = bem('DropdownItem', itemStyles);
export function PrioritySelector<PriorityItemValue>({
    onChange,
    selectedItem,
    isDisabled = false,
    buttonLabel,
    list,
    parentRef,
    buttonRef,
    size,
    ...rest
}: Props<PriorityItemValue>) {
    const renderPriorityIcon = (
        priorityType?: Priority,
        disabled: boolean = false,
        inList?: boolean
    ) => {
        if (!priorityType) {
            return null;
        }
        const IconComponent = iconMap[priorityType];
        return IconComponent ? (
            <IconComponent
                {...elem('icon', { [priorityType]: true, inList })}
                disabled={disabled}
                viewBox="0 0 24 24"
            />
        ) : null;
    };

    const priorityOrder: Record<Priority, number> = {
        mandatory: 1,
        important: 2,
        optional: 3,
        exclude: 4,
    };

    // Sort the list based on the priority order
    const sortedList = list
        .slice()
        .sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);

    return (
        <Root {...block({ ...rest })} refElement={parentRef}>
            <DropdownTrigger>
                <IconButton
                    {...elem('icon', { [selectedItem.priority]: true })}
                    variant="ghost"
                    aria-label={buttonLabel || selectedItem.label}
                    disabled={isDisabled}
                    type="button"
                    ref={buttonRef}
                    size={size}
                >
                    {renderPriorityIcon(selectedItem.priority, isDisabled)}
                </IconButton>
            </DropdownTrigger>
            <Portal>
                <DropdownContent
                    {...elem('badgeDropdownList', { fixedWidth: !parentRef })}
                    sideOffset={6}
                    refElement={parentRef}
                >
                    {sortedList.map((item) => (
                        <DropdownMenuItem
                            key={item.priority}
                            onSelect={(e) => {
                                e.stopPropagation();
                                onChange(item);
                            }}
                            role="option"
                            aria-selected={selectedItem.priority === item.priority}
                            tabIndex={isDisabled ? -1 : 0}
                            {...rest}
                            {...itemStylesBem.block({
                                isSelected: selectedItem === item,
                                disabled: isDisabled,
                                ...rest,
                            })}
                        >
                            <div {...elem('badgeListItem')}>
                                {renderPriorityIcon(item.priority, false, true)}
                                <Text inline size="small">
                                    {item.label}
                                </Text>
                            </div>
                        </DropdownMenuItem>
                    ))}
                </DropdownContent>
            </Portal>
        </Root>
    );
}

PrioritySelector.displayName = 'PrioritySelector';

1	import * as React from 'react';	8✔
2	import Close from '@material-design-icons/svg/round/close.svg';	8✔
3	import KeyboardDoubleArrowUp from '@material-design-icons/svg/round/keyboard_double_arrow_up.svg';	8✔
4	import KeyboardArrowUp from '@material-design-icons/svg/round/keyboard_arrow_up.svg';	8✔
5	import KeyboardArrowDown from '@material-design-icons/svg/round/keyboard_arrow_down.svg';	8✔
6	import { DropdownMenuItem, Root, Portal } from '@radix-ui/react-dropdown-menu';	8✔
7	import { Size } from '@textkernel/oneui';
8	import { DropdownTrigger } from '../Dropdown/DropdownTrigger';	8✔
9	import { DropdownContent } from '../Dropdown/DropdownContent';	8✔
10	import { bem } from '../../utils/bem';	8✔
11	import { Text } from '../Text';	8✔
12	import { IconButton } from '../Buttons';	8✔
13	import itemStyles from '../Dropdown/Items/Item.scss';	8✔
14	import styles from './PrioritySelector.scss';	8✔
15
16	const iconMap = {	8✔
17	mandatory: KeyboardDoubleArrowUp,
18	important: KeyboardArrowUp,
19	optional: KeyboardArrowDown,
20	exclude: Close,
21	};
22
23	export type Priority = 'mandatory' \| 'important' \| 'optional' \| 'exclude';
24
25	export type PriorityItemType<PriorityItemValue> = {
26	/** priority types: mandatory, important, optional or exclude. Makes correct icon show up */
27	priority: Priority;
28	/** text that should accompany the icon in the dropdown */
29	label: string;
30	/** optional: used in case of application-specific values / custom priorities */
31	value?: PriorityItemValue;
32	};
33
34	export interface Props<PriorityItemValue>
35	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
36	/** Currently selected priority item that indicates the importance of the component. */
37	selectedItem: PriorityItemType<PriorityItemValue>;
38	/** Array of availible priority items. */
39	list: PriorityItemType<PriorityItemValue>[];
40	/** Callback function triggered when a new priority is selected. */
41	onChange: (newPriorityItem: PriorityItemType<PriorityItemValue>) => void;
42	/** Boolean indicating whether the whole badge should be disabled. */
43	isDisabled?: boolean;
44	/** Priority button label name for ARIA labelling */
45	buttonLabel?: string;
46	/** ref to possible parent div, if it is a badge */
47	parentRef?: React.RefObject<HTMLElement \| null> \| React.ForwardedRef<HTMLDivElement>;
48	/** ref to iconButton, used for keyboard navigation */
49	buttonRef?: React.RefObject<HTMLElement>;
50	/** the size of the trigger button */
51	size?: Size;
52	}
53
54	const { block, elem } = bem('PrioritySelector', styles);	8✔
55	const itemStylesBem = bem('DropdownItem', itemStyles);	8✔
56	export function PrioritySelector<PriorityItemValue>({	8✔
57	onChange,	7✔
58	selectedItem,	7✔
59	isDisabled = false,	7!
60	buttonLabel,	7✔
61	list,	7✔
62	parentRef,	7✔
63	buttonRef,	7✔
64	size,	7✔
65	...rest	7✔
66	}: Props<PriorityItemValue>) {
67	const renderPriorityIcon = (	7✔
68	priorityType?: Priority,
69	disabled: boolean = false,	35!
70	inList?: boolean
71	) => {
72	if (!priorityType) {	35!
UNCOV 73	return null;	×
74	}
75	const IconComponent = iconMap[priorityType];	35✔
76	return IconComponent ? (	35!
77	<IconComponent
78	{...elem('icon', { [priorityType]: true, inList })}
79	disabled={disabled}
80	viewBox="0 0 24 24"
81	/>
82	) : null;
83	};
84
85	const priorityOrder: Record<Priority, number> = {	7✔
86	mandatory: 1,
87	important: 2,
88	optional: 3,
89	exclude: 4,
90	};
91
92	// Sort the list based on the priority order
93	const sortedList = list	7✔
94	.slice()
95	.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);	23✔
96
97	return (	7✔
98	<Root {...block({ ...rest })} refElement={parentRef}>
99	<DropdownTrigger>
100	<IconButton
101	{...elem('icon', { [selectedItem.priority]: true })}
102	variant="ghost"
103	aria-label={buttonLabel \|\| selectedItem.label}	13✔
104	disabled={isDisabled}
105	type="button"
106	ref={buttonRef}
107	size={size}
108	>
109	{renderPriorityIcon(selectedItem.priority, isDisabled)}
110	</IconButton>
111	</DropdownTrigger>
112	<Portal>
113	<DropdownContent
114	{...elem('badgeDropdownList', { fixedWidth: !parentRef })}
115	sideOffset={6}
116	refElement={parentRef}
117	>
118	{sortedList.map((item) => (	28✔
119	<DropdownMenuItem
120	key={item.priority}
121	onSelect={(e) => {
122	e.stopPropagation();	2✔
123	onChange(item);	2✔
124	}}
125	role="option"
126	aria-selected={selectedItem.priority === item.priority}
127	tabIndex={isDisabled ? -1 : 0}	28!
128	{...rest}
129	{...itemStylesBem.block({
130	isSelected: selectedItem === item,
131	disabled: isDisabled,
132	...rest,
133	})}
134	>
135	<div {...elem('badgeListItem')}>
136	{renderPriorityIcon(item.priority, false, true)}
137	<Text inline size="small">
138	{item.label}
139	</Text>
140	</div>
141	</DropdownMenuItem>
142	))}
143	</DropdownContent>
144	</Portal>
145	</Root>
146	);
147	}
148
149	PrioritySelector.displayName = 'PrioritySelector';	8✔

textkernel / oneui / 11740220383

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous