@coveord/plasma-mantine 56.9.0 → 56.10.0

package/src/components/StatusToken/StatusToken.tsx

@@ -0,0 +1,152 @@
+import {
+    Box,
+    BoxProps,
+    createVarsResolver,
+    Factory,
+    getSize,
+    MantineSize,
+    MantineTheme,
+    polymorphicFactory,
+    StylesApiProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+
+import Circle from './icons/circle.svg?raw';
+import Ring from './icons/ring.svg?raw';
+import Square from './icons/square.svg?raw';
+import Triangle from './icons/triangle.svg?raw';
+import Info from './icons/info.svg?raw';
+import classes from './StatusToken.module.css';
+
+export type StatusTokenFactory = Factory<{
+    props: StatusTokenProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: StatusTokenComponentStylesNames;
+    vars: StatusTokenCssVariables;
+    variant: StatusTokenVariant;
+}>;
+export type StatusTokenComponentStylesNames = 'root';
+export type StatusTokenVariant = 'info' | 'success' | 'caution' | 'error' | 'disabled' | 'waiting' | 'edited' | 'new';
+export type StatusTokenSize = Extract<MantineSize, 'sm' | 'lg'>;
+export type StatusTokenCssVariables = {
+    root: '--status-token-color' | '--status-token-size';
+};
+
+export interface StatusTokenProps extends BoxProps, StylesApiProps<StatusTokenFactory> {
+    /**
+     * The size of the token.
+     *
+     * @default 'lg'
+     */
+    size?: StatusTokenSize;
+    /**
+     * The variant of the token.
+     *
+     * @default 'info'
+     */
+    variant?: StatusTokenVariant;
+}
+
+const defaultProps: Partial<StatusTokenProps> = {size: 'lg', variant: 'info'};
+
+const resolveThemeColorFromVariant = (variant: StatusTokenVariant, theme: MantineTheme): string => {
+    switch (variant) {
+        case 'success':
+            return theme.colors.green[4];
+        case 'caution':
+            return theme.colors.yellow[4];
+        case 'error':
+            return theme.colors.red[5];
+        case 'disabled':
+        case 'waiting':
+            return theme.colors.gray[5];
+        case 'edited':
+        case 'new':
+            return 'var(--mantine-primary-color-filled)';
+        case 'info':
+            return theme.colors.gray[3];
+        default:
+            return theme.colors.navy[5];
+    }
+};
+const resolveSize = (size: StatusTokenSize): number => (size === 'sm' ? 8 : 12);
+
+const resolveIconSrcFromVariant = (variant: StatusTokenVariant): string => {
+    switch (variant) {
+        case 'caution':
+            return Triangle;
+        case 'error':
+            return Square;
+        case 'disabled':
+            return Ring;
+        case 'info':
+            return Info;
+        case 'success':
+        case 'waiting':
+        case 'edited':
+        case 'new':
+        default:
+            return Circle;
+    }
+};
+
+const varsResolver = createVarsResolver<StatusTokenFactory>((theme, {variant, size}) => {
+    const color = resolveThemeColorFromVariant(variant, theme);
+    return {
+        root: {
+            '--status-token-color': color,
+            '--status-token-size': getSize(resolveSize(size), 'status-token-size'),
+        },
+    };
+});
+
+const statusTokenLabels: Record<StatusTokenVariant, string> = {
+    info: 'Info',
+    success: 'Success',
+    caution: 'Caution',
+    error: 'Error',
+    disabled: 'Disabled',
+    waiting: 'Waiting',
+    edited: 'Edited',
+    new: 'New',
+};
+
+export const StatusToken: ReturnType<typeof polymorphicFactory<StatusTokenFactory>> =
+    polymorphicFactory<StatusTokenFactory>((props, ref) => {
+        const {variant, vars, size, className, style, unstyled, styles, classNames, ...others} = useProps(
+            'StatusToken',
+            defaultProps,
+            props,
+        );
+        const getStyles = useStyles<StatusTokenFactory>({
+            name: 'StatusToken',
+            classes,
+            className,
+            props,
+            style,
+            styles,
+            unstyled,
+            vars,
+            varsResolver,
+        });
+        return (
+            <Box
+                ref={ref}
+                variant={variant}
+                role="img"
+                aria-label={statusTokenLabels[variant]}
+                {...getStyles('root', {
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                })}
+                dangerouslySetInnerHTML={{__html: resolveIconSrcFromVariant(variant)}}
+                {...others}
+            />
+        );
+    });
+
+StatusToken.displayName = 'StatusToken';

package/src/components/StatusToken/__tests__/StatusToken.component.spec.tsx

@@ -0,0 +1,28 @@
+import {render, screen} from '@test-utils';
+import {StatusToken, type StatusTokenVariant} from '../StatusToken.js';
+
+describe('StatusToken', () => {
+    it('renders with default props', () => {
+        render(<StatusToken data-testid="status-token" />);
+        expect(screen.getByTestId('status-token')).toHaveAttribute('data-variant', 'info');
+    });
+
+    it('renders with custom size and variant', () => {
+        render(<StatusToken size="sm" data-testid="status-token" variant="success" />);
+        expect(screen.getByTestId('status-token')).toHaveAttribute('data-variant', 'success');
+    });
+
+    it.each<{variant: StatusTokenVariant; expected: string}>([
+        {variant: 'info', expected: 'Info'},
+        {variant: 'success', expected: 'Success'},
+        {variant: 'caution', expected: 'Caution'},
+        {variant: 'error', expected: 'Error'},
+        {variant: 'disabled', expected: 'Disabled'},
+        {variant: 'waiting', expected: 'Waiting'},
+        {variant: 'edited', expected: 'Edited'},
+        {variant: 'new', expected: 'New'},
+    ])('is accessible for the $variant variant', ({variant, expected}) => {
+        render(<StatusToken variant={variant} />);
+        expect(screen.getByRole('img', {name: expected})).toBeVisible();
+    });
+});

package/src/components/StatusToken/icons/circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <circle cx="6" cy="6" r="5.5" fill="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/info.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6 0.125C9.3138 0.125 12 2.81014 12 6.12263C12.0012 7.69729 11.3829 9.20927 10.2785 10.3321C9.17415 11.455 7.67229 12.0987 6.09721 12.1242C4.52214 12.1497 3.0002 11.555 1.86 10.4685C0.719794 9.38199 0.0527931 7.89082 0.00300007 6.31695L0 6.12263L0.00239997 5.95469C0.0912 2.72017 2.742 0.125 6 0.125ZM6 5.52286H5.4L5.3298 5.52706C5.18397 5.5444 5.04957 5.6146 4.95205 5.72436C4.85453 5.83413 4.80067 5.97583 4.80067 6.12263C4.80067 6.26943 4.85453 6.41113 4.95205 6.52089C5.04957 6.63065 5.18397 6.70085 5.3298 6.71819L5.4 6.72239V8.52168L5.4042 8.59185C5.41999 8.72573 5.48045 8.85038 5.57581 8.9457C5.67117 9.04103 5.79587 9.10145 5.9298 9.11724L6 9.12144H6.6L6.6702 9.11724C6.80413 9.10145 6.92883 9.04103 7.02419 8.9457C7.11955 8.85038 7.18 8.72573 7.1958 8.59185L7.2 8.52168L7.1958 8.45151C7.18146 8.32914 7.12976 8.21416 7.04774 8.1222C6.96573 8.03023 6.85737 7.96575 6.7374 7.93751L6.6702 7.92551L6.6 7.92192V6.12263L6.5958 6.05246C6.58 5.91858 6.51955 5.79392 6.42419 5.6986C6.32883 5.60328 6.20413 5.54285 6.0702 5.52706L6 5.52286ZM6.006 3.72358L5.9298 3.72777C5.78397 3.74511 5.64957 3.81531 5.55205 3.92508C5.45453 4.03484 5.40067 4.17654 5.40067 4.32334C5.40067 4.47014 5.45453 4.61184 5.55205 4.7216C5.64957 4.83136 5.78397 4.90156 5.9298 4.9189L6 4.9231L6.0762 4.9189C6.22203 4.90156 6.35643 4.83136 6.45395 4.7216C6.55147 4.61184 6.60533 4.47014 6.60533 4.32334C6.60533 4.17654 6.55147 4.03484 6.45395 3.92508C6.35643 3.81531 6.22203 3.74511 6.0762 3.72777L6.006 3.72358Z"
+        fill="currentColor" />
+</svg>

package/src/components/StatusToken/icons/ring.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="5" stroke="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/square.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="10" height="10" rx="2.2" fill="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/triangle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 6">
+  <path fill="currentColor" d="M3 .475c.25 0 .482.122.625.326l.027.042 2.12 3.54a.762.762 0 0 1-.602 1.141l-.051.002H.879A.762.762 0 0 1 .202 4.43l.028-.05L2.35.842A.762.762 0 0 1 3 .475Z"/>
+</svg>

package/src/index.ts

@@ -86,6 +86,9 @@ export {
 // Info Token
 export * from './components/InfoToken/InfoToken.js';
 
+// Status Token
+export * from './components/StatusToken/StatusToken.js';
+
 // Inline Confirm
 export * from './components/InlineConfirm/InlineConfirm.js';
 export * from './components/InlineConfirm/InlineConfirmContext.js';

package/src/types/svg-raw/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg?raw' {
+    const content: string;
+    export default content;
+}