diff --git a/.changeset/beige-grapes-fry.md b/.changeset/beige-grapes-fry.md new file mode 100644 index 0000000000..7643a07c98 --- /dev/null +++ b/.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` +- Внутренние улучшения кода компонента diff --git a/packages/status/src/Component.test.tsx b/packages/status/src/Component.test.tsx index 1ded747260..af1f8c194a 100644 --- a/packages/status/src/Component.test.tsx +++ b/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(); + expect(container.firstElementChild).toHaveClass('size-20'); + }); + + it('should set shape=rectangular by default', () => { + const { container } = render(); + expect(container.firstElementChild).toHaveClass('rectangular'); + }); + + it('should set uppercase=true by default', () => { + const { container } = render(); + expect(container.firstElementChild).toHaveClass('uppercase'); + }); + it.each(['muted-alt', 'contrast', 'muted'] as const)('should set view="%s"', (view) => { const { container } = render(Label); @@ -46,6 +62,28 @@ describe('Status', () => { expect(container.firstElementChild).toHaveClass(color); }); + + it.each(sizes)('should set size="%s"', (size) => { + const { container } = render(Label); + + expect(container.firstElementChild).toHaveClass(`size-${size}`); + }); + + it.each(['rectangular', 'rounded'] as const)('should set shape="%s"', (shape) => { + const { container } = render(Label); + + expect(container.firstElementChild).toHaveClass(shape); + }); + + it('should set uppercase', () => { + const { container } = render(Label); + expect(container.firstElementChild).toHaveClass('uppercase'); + }); + + it('should not set uppercase', () => { + const { container } = render(Label); + expect(container.firstElementChild).not.toHaveClass('uppercase'); + }); }); it('should unmount without errors', () => { diff --git a/packages/status/src/Component.tsx b/packages/status/src/Component.tsx index c2044e8a18..736d21a707 100644 --- a/packages/status/src/Component.tsx +++ b/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,6 +71,9 @@ export const Status: FC = ({ color = 'green', children, dataTestId, + size = 20, + shape = 'rectangular', + uppercase = true, }) => { if (view === 'soft') { logWarning(); @@ -60,7 +81,17 @@ export const Status: FC = ({ return ( {children} diff --git a/packages/status/src/__image_snapshots__/status-dark-preview-snap.png b/packages/status/src/__image_snapshots__/status-dark-preview-snap.png index c2303e02ac..d2155a7fc6 100644 --- a/packages/status/src/__image_snapshots__/status-dark-preview-snap.png +++ b/packages/status/src/__image_snapshots__/status-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0faa36cac4cdbdca45c5b2acb2779e1e207980141c0ba4e740fbb3199f6c9313 -size 7416 +oid sha256:99299704533f876ad74fddbcaafd4b3e1de16ac692f794bfc7cf3ad88b478413 +size 7804 diff --git a/packages/status/src/__image_snapshots__/status-preview-snap.png b/packages/status/src/__image_snapshots__/status-preview-snap.png index 20b504899e..199022b599 100644 --- a/packages/status/src/__image_snapshots__/status-preview-snap.png +++ b/packages/status/src/__image_snapshots__/status-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7493dd64f3f98a8d5947c9cb3d3f3d63b8892ee36a3f5f6fc09d586cb87e60fe -size 6693 +oid sha256:87c0b09c993c3f487c3632580a5951ed22671bff882862641a1c4c8a9942266d +size 7265 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-0-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-0-snap.png index 17917c41c4..db5995fe51 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-0-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54f5fdce5c1f90872c2ed0e3d67af99e1bb79769d7fa840212171f68fa3607c7 -size 898 +oid sha256:8d6cbe3e04f59417bf193b013b668bd74f3c8a12786372e88683a51b71b0f9ce +size 981 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-1-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-1-snap.png index fbe480ed3c..5332f66d8b 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-1-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:934c06e375658baa4c1a97e64ce325431314500cb2cb054cb6c165e2ff8ec31b -size 855 +oid sha256:241e32f95042c4e731aa97d30295ec4b231df3776309267964f589f66f08237e +size 913 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-2-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-2-snap.png index fb99988fee..64d9ce2a3a 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-2-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ed9a1213d004fddab143df8cb3da3f02bfe064831fcef4d1e9e077f21509033b -size 846 +oid sha256:60712532bcdd594d571d73da36501616b6ba2df243985c2c4a1591b34c12ef50 +size 911 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-3-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-3-snap.png index 3511079268..4d01efb8c4 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-3-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:824eedc7ecaf460d943fdef0099fca0b18f90690d4635dd03a293f12fdd72be5 -size 848 +oid sha256:602d71993668c4c9da57f81d6ad7c7514034adbc4d628ee310e3e0ac71bd7c85 +size 904 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-4-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-4-snap.png index e43a87bacb..ed91ba15f8 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-4-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:66b88d9488101c946a07fcd28b52357648b4fec9a7b477dd875d4338f88e5b58 -size 863 +oid sha256:7687448d20cf2e06b12b4c4c7f7b1ff2f40e329c50ff10e617ab73a21929aa95 +size 934 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-5-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-5-snap.png index 24b9fff83d..ad1cb3460d 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-5-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5c462a546546843f2f7fe3741994a13996e864e47f06ad6134c7cc1a8632a9f5 -size 883 +oid sha256:a75bde84b564ddb7719df4cad86b43e5d7e72548c6c2bb9892c912531e1df8e1 +size 955 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-6-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-6-snap.png index c65b6290e6..a72e7544ae 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-6-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-0-color-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4510d187dc42d2cf63239ba53602322f7e3129802c6b32273565cff020d0ea13 -size 823 +oid sha256:31b71f4a564e8f384c33f79c4366ab48b95051fcbab0c4ce23970257b57b22f8 +size 869 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-0-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-0-snap.png index 87645ffdb4..b94df05c45 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-0-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3191dd60b48702c01f2d7522afe621c51da41ade8af56b0b340e4d653f689b29 -size 887 +oid sha256:3686fe28af5e90a41387670fff11f94a57ebabecd9bc66f695f0da0d9f9b061f +size 972 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-1-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-1-snap.png index e0aa4db6a2..d5cfa1c6e4 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-1-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:63e2f2542d800a5a0fa470a03cfce608839f0d6c7375ae2c7168a40df6816947 -size 832 +oid sha256:32e022bbf1e61fff638bf1e1e9bfbeeb9a0488a625b3d764bbe4f8a790118036 +size 922 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-2-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-2-snap.png index b18be22688..5db10932e3 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-2-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b2fa6b47db09f3963e51973cddef832e0c2f1788a57df8ea179042139003545c -size 810 +oid sha256:4843f4ef4a9e14abf96d73c872e2e6441c4370277cbb0c378dc9af864fe7ed42 +size 872 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-3-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-3-snap.png index 20a570693c..1a03b102fc 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-3-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:22d02fc2d1de2a1ff240ef31047798d5ccee5500865f059817f2ea7d6a36bea8 -size 825 +oid sha256:7bb331892a04f438d27451acf882f176dd25333d51de7c1c1689c7ea4bfae5aa +size 884 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-4-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-4-snap.png index 885b409b87..889c78bdc9 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-4-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7268ceafbc6f3fc61caaaac09415c321a205dee55d6727523be8aaa2c4f8aaa2 -size 863 +oid sha256:2b32213860e192f45b5ba46c8ef5884879840e96c83778c5e39e8a27736fd29b +size 937 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-5-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-5-snap.png index 7d0755aa1e..b6714eb8b4 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-5-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9673018c5f6516518cd594c69945d8060bf83dce6d78e0d9611093b1d0cf3dc1 -size 888 +oid sha256:8ebcf90bc4bbf9bc0334a882b167f5da5f9cb9f653f90b9e454dafd398907efa +size 962 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-6-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-6-snap.png index 00eebf1999..5746a1d39c 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-6-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-1-color-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9f770a7fe9140b630c89bb9317b3dc07892253639e8c71a096012359d885a20e -size 756 +oid sha256:42b8649652cafb284f64fe41a6c35b6a518d59b19d14b0883627fd261313e1d7 +size 793 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-0-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-0-snap.png index e8c29995c1..4f141d4471 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-0-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:40c6b8bd43db0df8ddd54d5d30d5816bc456bdca7717ea15474d4b20dc41d284 -size 912 +oid sha256:68c735de61a6217f9a12d39d98f6d6769c51e99cc33f78382a3a8cc5fe969521 +size 980 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-1-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-1-snap.png index 27f2d08263..569e481db5 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-1-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:134b3863983afb35b6e7b2ef5cfe6b99865f5de61e88973e2afaa3c27b07d20a -size 859 +oid sha256:3cd1f6cfcda79f5540aada13e0036e0d1c3dc020c9cc1f2449399b83f6d286fe +size 899 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-2-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-2-snap.png index 60e2ad1f4b..743be5de16 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-2-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cc8783a6f644c0b1ead9629706f9471059b011cdf968d8920cee430a6245900f -size 837 +oid sha256:5ca49686ad6a740309da0882fb35d16c0613e067d92ad3a0dcaf29b0a9f5a27b +size 880 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-3-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-3-snap.png index 68b2bdf0ac..99f6c4cdbc 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-3-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:291cf5b702dc6d8697697c46d2f73b2a813703b0646f3fe1fe69ec9be56bf02a -size 847 +oid sha256:e1d78f3d42c185e89e94606f1d8eb512d08c11d46c5bf8308a2d7a58ff0b78c9 +size 890 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-4-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-4-snap.png index 2ff0332184..8167ef2bfd 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-4-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6aa3f8d0062e2dbcb468fbc6bbf9800c69ed8b02df23e26d7249e6ecec63f3c0 -size 864 +oid sha256:2e61f8b3f36eb0d1b418470c0e1fc8028e097bc6e23e374c752ff9324bb4e214 +size 937 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-5-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-5-snap.png index 18fcf4bf18..023ed66d51 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-5-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4288a7acc82464cc6c74d7bd31718370d6c8cd6b5ba3a82076faa25259a67890 -size 880 +oid sha256:05dca407fe529ac8e390275f0589257de6b9840b4011b988a7049f62dfd8db29 +size 933 diff --git a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-6-snap.png b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-6-snap.png index 5f3a8b502f..dd6c10ab55 100644 --- a/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-6-snap.png +++ b/packages/status/src/__image_snapshots__/status-screenshots-views-and-colors-view-2-color-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ce1549af3ab1b11c754a89368b3ee7a63288f0dba32af09277d748ed36f7e34c -size 828 +oid sha256:ada724c7fa799b4c0e7f4103fe85ea8183af60e80a7a1b127c34ceff316e2fcf +size 863 diff --git a/packages/status/src/__image_snapshots__/status-size-shape-uppercase-sprite-snap.png b/packages/status/src/__image_snapshots__/status-size-shape-uppercase-sprite-snap.png new file mode 100644 index 0000000000..b74dbc3f63 --- /dev/null +++ b/packages/status/src/__image_snapshots__/status-size-shape-uppercase-sprite-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:27a7d98b52a964c5ba1322255fe51f77ffcf228fc714d3c680cab01f9470fc35 +size 34599 diff --git a/packages/status/src/__snapshots__/Component.test.tsx.snap b/packages/status/src/__snapshots__/Component.test.tsx.snap index 777fd40d9e..4c6901e58f 100644 --- a/packages/status/src/__snapshots__/Component.test.tsx.snap +++ b/packages/status/src/__snapshots__/Component.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Status Snapshots tests should match view="contrast" snapshot 1`] = `
= { title: 'Components/Status', @@ -17,6 +18,9 @@ export const status: Story = { {text('children', 'Label')} diff --git a/packages/status/src/docs/description.mdx b/packages/status/src/docs/description.mdx index f1de1d6dd7..1dde06c4ce 100644 --- a/packages/status/src/docs/description.mdx +++ b/packages/status/src/docs/description.mdx @@ -1,38 +1,100 @@ -## Примеры +## Размеры + +Кнопка доступна в размерах 40, 32, 24, 20. ```jsx live -
- {colors.map((color) => ( - <> - - Label - - - - ))} +
+ + Всё в порядке + + + + Всё в порядке + + + + Всё в порядке + + + + Всё в порядке +
- -
- {colors.map((color) => ( - <> - - Label - - - - ))} + +``` + +## Форма + +Для статуса доступно два варианта скругления углов. + +```jsx live + +
+ + Всё в порядке + + + + Всё в порядке + +
+
+``` + +## Стиль лейбла + +Для лейбла можно включить опцию `uppercase`. + +```jsx live + +
+ + Всё в порядке + + + Всё в порядке
- -
- {colors.map((color) => ( - <> - - Label - - - - ))} + +``` + +## Цвета + +```jsx live + +
+
+ {colors.map((color) => ( + <> + + Label + + + + ))} +
+ +
+ {colors.map((color) => ( + <> + + Label + + + + ))} +
+ +
+ {colors.map((color) => ( + <> + + Label + + + + ))} +
``` diff --git a/packages/status/src/index.module.css b/packages/status/src/index.module.css index 8005d1387c..d771d9bf66 100644 --- a/packages/status/src/index.module.css +++ b/packages/status/src/index.module.css @@ -2,16 +2,14 @@ @import '../../vars/src/colors-decorative.css'; .component { - @mixin accent_secondary_small; - display: inline-flex; align-items: center; justify-content: center; - height: 20px; - padding: var(--gap-0) var(--gap-8); - border-radius: var(--border-radius-s); + height: initial; + padding: 0; + border-radius: 0; text-align: center; - text-transform: uppercase; + text-transform: initial; letter-spacing: 0.5px; & .ellipsis { @@ -22,6 +20,51 @@ &:empty { padding: var(--gap-0); } + + &.size-20 { + @mixin accent_secondary_medium; + height: 20px; + padding: 0 var(--gap-8); + border-radius: var(--border-radius-6); + } + + &.size-24 { + @mixin accent_secondary_medium; + height: 24px; + padding: 0 var(--gap-12); + border-radius: var(--border-radius-6); + } + + &.size-32 { + @mixin accent_primary_small; + height: 32px; + padding: 0 var(--gap-16); + border-radius: var(--border-radius-10); + } + + &.size-40 { + @mixin accent_primary_small; + height: 40px; + padding: 0 var(--gap-20); + border-radius: var(--border-radius-12); + } + + &.rounded { + border-radius: var(--border-radius-pill); + } + + &.uppercase { + &.size-20, + &.size-24 { + @mixin accent_secondary_small; + text-transform: uppercase; + } + + &.size-32, + &.size-40 { + @mixin accent_caps; + } + } } .soft, diff --git a/packages/status/src/index.ts b/packages/status/src/index.ts index e51a5d2440..acba8762f2 100644 --- a/packages/status/src/index.ts +++ b/packages/status/src/index.ts @@ -1 +1,2 @@ export * from './Component'; +export { colors } from './consts';