blob: 586301fbfda7b4d3c13e3ccb8d592dbda7d556f2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import type { FC, ReactNode } from 'react';
import {
Icon,
Label,
VisuallyHidden,
type LabelProps,
Flip,
FlipSide,
} from '../../../atoms';
import styles from './flipping-label.module.scss';
export type FlippingLabelProps = Omit<
LabelProps,
'children' | 'isHidden' | 'isRequired'
> & {
/**
* The front icon.
*/
icon: ReactNode;
/**
* Which side of the label should be displayed? True for the close icon.
*/
isActive: boolean;
/**
* An accessible name for the label.
*/
label: string;
};
export const FlippingLabel: FC<FlippingLabelProps> = ({
className = '',
icon,
isActive,
label,
...props
}) => {
const wrapperClass = `${styles.wrapper} ${className}`;
return (
<Label {...props} className={wrapperClass}>
<VisuallyHidden>{label}</VisuallyHidden>
<Flip
aria-hidden
// eslint-disable-next-line react/jsx-no-literals -- Shape allowed
showBack={isActive}
>
<FlipSide className={styles.front}>{icon}</FlipSide>
<FlipSide className={styles.back} isBack>
<Icon aria-hidden shape="cross" />
</FlipSide>
</Flip>
</Label>
);
};
|
