feat(badge): reinvented icon view, visibleIconOutline prop (#499)

BREAKING CHANGE: new icon view without fixed size
core-ds · Feb 8, 2021 · bad9140 · bad9140
1 parent 927adde
commit bad9140
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 59 deletions.
diff --git a/.storybook/blocks/grid/Col.css b/.storybook/blocks/grid/Col.css
@@ -1,6 +1,6 @@
 .col {
-    flex: 1 1 auto;
-    margin: 0 8px 0 0;
+    flex: 0 1 auto;
+    margin: 0 var(--gap-xs) 0 0;
 }
 
 .col:last-child {

diff --git a/.storybook/blocks/grid/Row.tsx b/.storybook/blocks/grid/Row.tsx
@@ -10,11 +10,12 @@ type RowProps = {
     flex?: boolean;
 };
 
-export const Row: React.FC<RowProps> = ({ align, flex, className, children }) => (
+export const Row: React.FC<RowProps> = ({ align, flex, className, children, ...restProps }) => (
     <div
         className={cn(styles.row, className, styles[align], {
             [styles.flex]: flex,
         })}
+        {...restProps}
     >
         {children}
     </div>

diff --git a/package.json b/package.json
@@ -53,10 +53,10 @@
     "dependencies": {
         "@alfalab/data": "^0.3.0",
         "@alfalab/hooks": "^1.0.0",
-        "@alfalab/icons-classic": "^1.39.0",
+        "@alfalab/icons-classic": "^1.56.0",
         "@alfalab/icons-flag": "^1.3.0",
-        "@alfalab/icons-glyph": "^1.80.0",
-        "@alfalab/icons-logotype": "^1.8.0",
+        "@alfalab/icons-glyph": "^1.96.0",
+        "@alfalab/icons-logotype": "^1.9.0",
         "@alfalab/utils": "^1.0.1",
         "@popperjs/core": "^2.3.3",
         "alfa-ui-primitives": "^2.105.0",

diff --git a/packages/badge/src/Component.stories.mdx b/packages/badge/src/Component.stories.mdx
@@ -3,7 +3,12 @@ import { select, number } from '@storybook/addon-knobs';
 import { Container, Row, Col } from 'storybook/blocks/grid';
 import { ComponentHeader } from 'storybook/blocks/component-header';
 
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
+import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph';
+import { AlertCircleMIcon } from '@alfalab/icons-glyph';
+import { CrossCircleMIcon } from '@alfalab/icons-glyph';
+import { StopCircleMIcon } from '@alfalab/icons-glyph';
+import { InformationCircleMIcon } from '@alfalab/icons-glyph';
+import { ClockMIcon } from '@alfalab/icons-glyph';
 
 import { Badge } from './Component';
 import { name, version } from '../package.json';
@@ -39,15 +44,14 @@ import { name, version } from '../package.json';
 import { Badge } from '@alfalab/core-components-badge';
 ```
 
-Компонент бейдж.
+Бывает двух видов: бейдж и стикер.
 
-<Badge view='count' content={1} />
-
-## Виды бейджей
 ### Бейдж
 
-- `view="count"`: cчётчик действий, уведомлений или сообщений. Если `content` не передан, то отображается точка.
-Если `content` больше 99, то отображается 99+
+`view="count"`
+
+Счётчик действий, уведомлений или сообщений. Если `content` не передан, то отображается точка.
+Если `content` больше 99, то отображается 99+.
 
 <Preview>
     <Container>
@@ -66,16 +70,81 @@ import { Badge } from '@alfalab/core-components-badge';
 </Preview>
 
 ### Стикер
+`view="icon"`
 
-- `view="icon"`: Отражает статус компонента или тип уведомления. Внутри стикера используется двухцветная иконка.
+Отражает иконку статуса. Внутри стикера используется любая круглая одноцветная иконка.
 Для управления цветом иконки используется проп `iconColor`, для управления цветом подложки используется css-переменная
-`--badge-icon-bg-color`
+`--badge-icon-bg-color` (по дефолту белый).
 
 <Preview>
     <Container>
-        <Row>
+        <Row style={{margin: 0, padding: 12}}>
+            <Col>
+                <Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='attention' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='negative' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='negative' content={<CrossCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='primary' content={<StopCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='tertiary' content={<ClockMIcon/>} />
+            </Col>
+        </Row>
+        <Row style={{margin: 0, padding: 12, backgroundColor: '#DBDEE1'}}>
+            <Col>
+                <Badge view='icon' iconColor='positive' content={<CheckmarkOnCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='attention' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='negative' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='negative' content={<CrossCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='primary' content={<StopCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='tertiary' content={<ClockMIcon/>} />
+            </Col>
+        </Row>
+        <Row style={{margin: 0, padding: 12, paddingTop: 0, backgroundColor: '#DBDEE1'}}>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='positive' content={<CheckmarkOnCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='attention' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='negative' content={<AlertCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='negative' content={<CrossCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='primary' content={<StopCircleMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='secondary' content={<InformationCircleMIcon/>} />
+            </Col>
             <Col>
-                <Badge view='icon' iconColor='positive' content={<CheckmarkCircleMIcon/>} />
+                <Badge view='icon' visibleIconOutline={true} iconColor='tertiary' content={<ClockMIcon/>} />
             </Col>
         </Row>
     </Container>

diff --git a/packages/badge/src/Component.test.tsx b/packages/badge/src/Component.test.tsx
@@ -48,6 +48,12 @@ describe('Badge', () => {
             expect(container.firstElementChild).toHaveClass(view);
         });
 
+        it('should set `outline` class', () => {
+            const { container } = render(<Badge view='icon' visibleIconOutline={true} />);
+
+            expect(container.firstElementChild).toHaveClass('outline');
+        });
+
         it('should set `positive` class if `iconColor` prop is `positive`', () => {
             const iconColor = 'positive';
             const { container } = render(<Badge view='icon' iconColor={iconColor} />);

diff --git a/packages/badge/src/Component.tsx b/packages/badge/src/Component.tsx
@@ -10,14 +10,19 @@ export type BadgeProps = {
     className?: string;
 
     /**
-     * Размер компонента
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+
+    /**
+     * Размер компонента (только для view=count)
      */
     size?: 's' | 'm' | 'l';
 
     /**
-     *  Вид компонента
+     *  Видимость обводки вокруг иконки (только для view=icon)
      */
-    view: 'icon' | 'count';
+    visibleIconOutline?: boolean;
 
     /**
      * Контент компонента
@@ -27,7 +32,7 @@ export type BadgeProps = {
     /**
      * Цветовое оформление иконки
      */
-    iconColor?: 'positive' | 'attention' | 'negative' | 'tertiary' | 'primary';
+    iconColor?: 'positive' | 'attention' | 'negative' | 'tertiary' | 'secondary' | 'primary';
 
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -39,6 +44,7 @@ export const Badge = ({
     className,
     size = 'm',
     view,
+    visibleIconOutline = false,
     content,
     iconColor,
     dataTestId,
@@ -58,6 +64,7 @@ export const Badge = ({
                 {
                     [styles.isHidden]: isHidden,
                     [styles.dot]: !content,
+                    [styles.outline]: visibleIconOutline,
                 },
                 className,
             )}

diff --git a/packages/badge/src/index.module.css b/packages/badge/src/index.module.css
@@ -8,11 +8,12 @@
     @mixin accent_secondary_medium;
 
     position: relative;
+    z-index: 2;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    border-radius: 16px;
+    border-radius: 99px;
     background-color: var(--color-light-bg-accent);
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
@@ -21,28 +22,27 @@
 .s {
     height: 16px;
     min-width: 16px;
-    padding-left: var(--gap-2xs);
-    padding-right: var(--gap-2xs);
+    padding: 0 var(--gap-2xs);
 }
 
 .m {
     height: 20px;
     min-width: 20px;
-    padding-left: 6px;
-    padding-right: 6px;
+    padding: 0 6px;
 }
 
 .l {
     height: 24px;
     min-width: 24px;
-    padding-left: 6px;
-    padding-right: 6px;
+    padding: 0 6px;
 }
 
 .icon {
+    height: auto;
+    min-width: 0;
     padding: 0;
     color: var(--color-light-graphic-positive);
-    background-color: var(--badge-icon-bg-color);
+    background-color: transparent;
 
     &.positive {
         color: var(--color-light-graphic-positive);
@@ -60,29 +60,32 @@
         color: var(--color-light-graphic-tertiary);
     }
 
+    &.secondary {
+        color: var(--color-light-graphic-secondary);
+    }
+
     &.primary {
         color: var(--color-light-graphic-primary);
     }
 }
 
-/* Нужно из-за того, что иконка в виде кружка занимает не все пространство свг */
-.icon svg {
+.icon:before {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.icon.s svg {
-    max-height: 18px;
-}
-
-.icon.m svg {
-    max-height: 24px;
+    z-index: -1;
+    left: 16%;
+    right: 16%;
+    top: 16%;
+    bottom: 16%;
+    background-color: var(--badge-icon-bg-color);
+    border-radius: 99px;
+    content: '';
 }
 
-.icon.l svg {
-    max-height: 24px;
+.outline:before {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 }
 
 .dot {

diff --git a/yarn.lock b/yarn.lock
@@ -47,15 +47,6 @@
     react-merge-refs "^1.1.0"
     react-virtual "^2.2.0"
 
-"@alfalab/core-components-tag@1.6.4":
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/@alfalab/core-components-tag/-/core-components-tag-1.6.4.tgz#4974856e355fe48aaf6b2a80fe6ca67ff12c8101"
-  integrity sha512-IamOgzXbYboP8CjZ7SztvfVkGw1SAGG0Glw5GqZBYJ/zB1aQvaOm4ZOZ4cZpm6rFcilPcAcFbbgqWNYpbXSOOw==
-  dependencies:
-    "@alfalab/hooks" "^1.0.0"
-    classnames "^2.2.6"
-    react-merge-refs "^1.1.0"
-
 "@alfalab/data@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@alfalab/data/-/data-0.3.0.tgz#0c424ed39186bcd05d0f76d93a70610e01d9a38a"
@@ -71,7 +62,12 @@
   resolved "https://registry.yarnpkg.com/@alfalab/hooks/-/hooks-1.1.1.tgz#c61e839983cb915e2e4de730bf9c9b0f1c0aea45"
   integrity sha512-4NBh/BzFE/W7Wxgxa0SByodjpDgUQT5RHzc/9wLbMlhljpo+S145mavFdtK+YcJ2Sg4GK6OZon61KqV5w7Nafw==
 
-"@alfalab/icons-classic@^1.39.0", "@alfalab/icons-classic@^1.7.0":
+"@alfalab/icons-classic@^1.56.0":
+  version "1.56.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/icons-classic/-/icons-classic-1.56.0.tgz#6a7e26dfa34fde90f497e6cab9dda6bf8a56cd6c"
+  integrity sha512-RezEx/XHzV5nE9G9afx2oS9RFmBwH1FTHSvZJ2EXqJn0h5+lhFkRPuaPkVH2pYNDPewKbke+Bl2It3tacXoUhg==
+
+"@alfalab/icons-classic@^1.7.0":
   version "1.43.0"
   resolved "https://registry.yarnpkg.com/@alfalab/icons-classic/-/icons-classic-1.43.0.tgz#c26df73436e2e97f6572283c95ab44f8280e8601"
   integrity sha512-SqnpPxrtp50A1zYcGf6IZcl7Da2AF1Ol1z2HsapM7XOAAc3uObLtdfk02vk+kw/+fECrTVnDexhp8bLfq4lnzA==
@@ -81,16 +77,26 @@
   resolved "https://registry.yarnpkg.com/@alfalab/icons-flag/-/icons-flag-1.3.0.tgz#edd1b82a92954ed5339d51083d83ec41f7ff77fb"
   integrity sha512-kvVrwjKw6TZfbr9xaK7/e/QtkOAT5HzsWTI2rtvrIp0tzwnkQzp1cCHsiX/mt6h+YOixWfDGYbYEL2RKHFrBaw==
 
-"@alfalab/icons-glyph@^1.26.0", "@alfalab/icons-glyph@^1.70.0", "@alfalab/icons-glyph@^1.71.0", "@alfalab/icons-glyph@^1.80.0":
-  version "1.85.0"
-  resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.85.0.tgz#a427d58d96d8332d69ebbb1d8f775d6fedffc1b1"
-  integrity sha512-djjNmljT6J4EmdAuh2s9SQOXAFUki1tjEJBL43tCin9VP315m2KXmrcTje/SMqhq/2YBoj2wvhl33/7VndUTTg==
+"@alfalab/icons-glyph@^1.26.0", "@alfalab/icons-glyph@^1.70.0", "@alfalab/icons-glyph@^1.71.0":
+  version "1.99.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.99.0.tgz#6c39d80750644b739fa8c599344404697e8d4920"
+  integrity sha512-iA23rxX/DEJYdzuG92GbORJLAg3HAQtL8xjg8n3wk573VLftJuPV8nQHPKtXSTX2V2bfH+LE0BRS6x2Y8F1TnQ==
+
+"@alfalab/icons-glyph@^1.96.0":
+  version "1.96.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.96.0.tgz#4fbf352d02f208c13119c1cc33cc94fb6632d90a"
+  integrity sha512-VmxKoyZLPiJhhOlbN7XQIoV1jMeJhyzj4KFd3r0evhThORhJpB8Tga0Ufcj7r7OVYXXHxllMFducWqiFT9Ji3Q==
 
-"@alfalab/icons-logotype@^1.4.0", "@alfalab/icons-logotype@^1.8.0":
+"@alfalab/icons-logotype@^1.4.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@alfalab/icons-logotype/-/icons-logotype-1.8.0.tgz#b81e4aa24767172af498043688c0bd853e3e743f"
   integrity sha512-+KezJJRVQefF1vooTWgMf+kHm6MtWHf5egOhkHVmh8Js5OpPUlwZcrsEeAxAjs+1aoX/ZOglzhhMyTFPbZjxMw==
 
+"@alfalab/icons-logotype@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/icons-logotype/-/icons-logotype-1.9.0.tgz#5e0b96830cdd6cfaa49039f10abc39e05ef6e03e"
+  integrity sha512-rpHRXXhsER+YyYSn63sMVLhXU5BpY0nkfjKNffsJvOv+8+eTbjjzEDfdxtN+1/C1ZiqcXQXTJ1ItKJnrKzf5Jg==
+
 "@alfalab/rollup-plugin-postcss@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@alfalab/rollup-plugin-postcss/-/rollup-plugin-postcss-3.2.0.tgz#5ace0c087ad816884e7fdcea8ac1c0508a45d2dc"