Feat/status sizes

.changeset/beige-grapes-fry.md

@@ -0,0 +1,9 @@
+---
+'@alfalab/core-components-status': minor
+---
+
+- Добавлен пропс `size`. Теперь помимо дефолтного значения `20` можно также установить `24, 32, 40`
+- Для значения `20` изменены скругления
+- Добавлен пропс `shape`. С помощью него можно задать тип скругления компонента - `rectangular, rounded`
+- Добавлен пропс `uppercase`. Изначально текст в компоненте всегда указывался в верхнем регистре - теперь регистр можно менять. Для обратной совместимости оставили по умолчанию `uppercase=true`
+- Внутренние улучшения кода компонента

packages/status/src/Component.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { Status, colors } from './index';
+import { Status } from './index';
+import { colors, sizes } from './consts';
 
 describe('Status', () => {
     describe('Snapshots tests', () => {
@@ -35,6 +36,21 @@ describe('Status', () => {
             expect(container.firstElementChild).toHaveClass('green');
         });
 
+        it('should set size=20 by default', () => {
+            const { container } = render(<Status />);
+            expect(container.firstElementChild).toHaveClass('size-20');
+        });
+
+        it('should set shape=rectangular by default', () => {
+            const { container } = render(<Status />);
+            expect(container.firstElementChild).toHaveClass('rectangular');
+        });
+
+        it('should set uppercase=true by default', () => {
+            const { container } = render(<Status />);
+            expect(container.firstElementChild).toHaveClass('uppercase');
+        });
+
         it.each(['muted-alt', 'contrast', 'muted'] as const)('should set view="%s"', (view) => {
             const { container } = render(<Status view={view}>Label</Status>);
 
@@ -46,6 +62,28 @@ describe('Status', () => {
 
             expect(container.firstElementChild).toHaveClass(color);
         });
+
+        it.each(sizes)('should set size="%s"', (size) => {
+            const { container } = render(<Status size={size}>Label</Status>);
+
+            expect(container.firstElementChild).toHaveClass(`size-${size}`);
+        });
+
+        it.each(['rectangular', 'rounded'] as const)('should set shape="%s"', (shape) => {
+            const { container } = render(<Status shape={shape}>Label</Status>);
+
+            expect(container.firstElementChild).toHaveClass(shape);
+        });
+
+        it('should set uppercase', () => {
+            const { container } = render(<Status uppercase={true}>Label</Status>);
+            expect(container.firstElementChild).toHaveClass('uppercase');
+        });
+
+        it('should not set uppercase', () => {
+            const { container } = render(<Status uppercase={false}>Label</Status>);
+            expect(container.firstElementChild).not.toHaveClass('uppercase');
+        });
     });
 
     it('should unmount without errors', () => {

packages/status/src/Component.tsx

@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react';
 import cn from 'classnames';
 
-import styles from './index.module.css';
+import { colors, sizes } from './consts';
 
-export const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'] as const;
+import styles from './index.module.css';
 
 export type StatusProps = {
     /**
@@ -31,6 +31,24 @@ export type StatusProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+
+    /**
+     * Размер компонента
+     * @default 20
+     */
+    size?: (typeof sizes)[number];
+
+    /**
+     * Форма компонента
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+
+    /**
+     * Текст компонента в верхнем регистре
+     * @default true
+     */
+    uppercase?: boolean;
 };
 
 const logWarning = () => {
@@ -53,14 +71,27 @@ export const Status: FC<StatusProps> = ({
     color = 'green',
     children,
     dataTestId,
+    size = 20,
+    shape = 'rectangular',
+    uppercase = true,
 }) => {
     if (view === 'soft') {
         logWarning();
     }
 
     return (
         <span
-            className={cn(styles.component, styles[color], styles[view], className)}
+            className={cn(
+                styles.component,
+                styles[color],
+                styles[view],
+                styles[`size-${size}`],
+                styles[shape],
+                className,
+                {
+                    [styles.uppercase]: uppercase,
+                },
+            )}
             data-test-id={dataTestId}
         >
             <span className={styles.ellipsis}>{children}</span>

packages/status/src/__snapshots__/Component.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Status Snapshots tests should match view="contrast" snapshot 1`] = `
 <div>
   <span
-    class="component green contrast"
+    class="component green contrast size-20 rectangular uppercase"
   >
     <span
       class="ellipsis"
@@ -17,7 +17,7 @@ exports[`Status Snapshots tests should match view="contrast" snapshot 1`] = `
 exports[`Status Snapshots tests should match view="muted" snapshot 1`] = `
 <div>
   <span
-    class="component green muted"
+    class="component green muted size-20 rectangular uppercase"
   >
     <span
       class="ellipsis"
@@ -31,7 +31,7 @@ exports[`Status Snapshots tests should match view="muted" snapshot 1`] = `
 exports[`Status Snapshots tests should match view="muted-alt" snapshot 1`] = `
 <div>
   <span
-    class="component green muted-alt"
+    class="component green muted-alt size-20 rectangular uppercase"
   >
     <span
       class="ellipsis"

packages/status/src/component.screenshots.test.tsx

@@ -1,6 +1,11 @@
-import { createPreview, generateTestCases, setupScreenshotTesting } from '../../screenshot-utils';
+import {
+    createPreview,
+    createSpriteStorybookUrl,
+    generateTestCases,
+    setupScreenshotTesting,
+} from '../../screenshot-utils';
 
-import { colors } from './Component';
+import { colors, sizes } from './consts';
 
 const screenshotTesting = setupScreenshotTesting({
     it,
@@ -38,3 +43,25 @@ describe(
         screenshotOpts: { clip },
     }),
 );
+
+describe(
+    'Status | size, shape, uppercase',
+    screenshotTesting({
+        cases: [
+            [
+                'sprite',
+                createSpriteStorybookUrl({
+                    componentName: 'Status',
+                    knobs: {
+                        children: 'Label',
+                        view: ['muted-alt'],
+                        color: ['blue'],
+                        size: [...sizes],
+                        shape: ['rectangular', 'rounded'],
+                        uppercase: [true, false],
+                    },
+                }),
+            ],
+        ],
+    }),
+);

packages/status/src/consts/index.ts

@@ -0,0 +1,2 @@
+export const colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'] as const;
+export const sizes = [20, 24, 32, 40] as const;

packages/status/src/docs/Component.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { select, text } from '@storybook/addon-knobs';
-import { Status, colors } from '@alfalab/core-components-status';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { Status } from '@alfalab/core-components-status';
+import { colors, sizes } from '../consts';
 
 const meta: Meta<typeof Status> = {
     title: 'Components/Status',
@@ -17,6 +18,9 @@ export const status: Story = {
         <Status
             color={select('color', colors, 'green')}
             view={select('view', ['muted-alt', 'contrast', 'muted'], 'muted-alt')}
+            size={select('size', sizes, 20)}
+            shape={select('shape', ['rectangular', 'rounded'], 'rectangular')}
+            uppercase={boolean('uppercase', true)}
         >
             {text('children', 'Label')}
         </Status>