Merge pull request #288 from sima-land/285-badge-upd

Шаг 1 #285 Badge: доработать в соответствии с новыми дизайн-гайдами
sima-land · Aug 27, 2024 · 909b1bc · 909b1bc
2 parents 7cbfc3a + 7db8e4b
commit 909b1bc
Show file tree

Hide file tree

Showing 10 changed files with 303 additions and 68 deletions.
diff --git a/docs/public/images/logo_white.svg b/docs/public/images/logo_white.svg
diff --git a/docs/public/images/placeholder_black.svg b/docs/public/images/placeholder_black.svg
diff --git a/docs/stories/common/components/badge/01-primary.stories.tsx b/docs/stories/common/components/badge/01-primary.stories.tsx
@@ -10,10 +10,17 @@ export const meta = {
 
 export default function Primary() {
   return (
-    <Badge
-      href='https://sima-land.ru'
-      color='#002b41'
-      fields={[{ type: 'text', value: 'Товар партнёра' }]}
-    />
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
+      <Badge
+        color='#002b41'
+        href='https://sima-land.ru'
+        fields={[
+          {
+            type: 'text',
+            value: 'Товар партнёра',
+          },
+        ]}
+      />
+    </div>
   );
 }
diff --git a/docs/stories/common/components/badge/03-icon-view.stories.tsx b/docs/stories/common/components/badge/03-icon-view.stories.tsx
@@ -1,4 +1,5 @@
-import { Badge } from '@sima-land/moleculas/common/components/badge';
+import { Badge, BadgeField } from '@sima-land/moleculas/common/components/badge';
+import { CSSProperties } from 'react';
 
 export const meta = {
   category: 'common/Badge',
@@ -8,17 +9,50 @@ export const meta = {
   },
 };
 
+const styles = {
+  container: {
+    display: 'flex',
+    gap: 4,
+    maxWidth: 320,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  } satisfies CSSProperties,
+};
+
+const FIELD = {
+  icon: {
+    type: 'svg-url',
+    value: 'public/images/placeholder_black.svg',
+  } satisfies BadgeField,
+
+  textShort: {
+    type: 'text',
+    value: 'Товар партнёра',
+  } satisfies BadgeField,
+
+  textLong: {
+    type: 'text',
+    value: 'Специальная коллекция сезонных товаров по низкой цене',
+  } satisfies BadgeField,
+};
+
 export default function IconView() {
+  const props = {
+    color: '#000',
+    href: 'https://sima-land.ru',
+  };
+
   return (
-    <Badge
-      color='#ff7200'
-      href='https://sima-land.ru'
-      fields={[
-        {
-          type: 'svg-url',
-          value: 'https://static2.static1-sima-land.com/image/mobile_app/common/notice_icon.svg',
-        },
-      ]}
-    />
+    <div style={styles.container}>
+      <Badge {...props} fields={[FIELD.icon]} />
+
+      <Badge {...props} fields={[FIELD.icon, FIELD.textShort]} />
+
+      <Badge {...props} fields={[FIELD.textShort, FIELD.icon]} />
+
+      <Badge {...props} fields={[FIELD.icon, FIELD.textLong]} />
+
+      <Badge {...props} fields={[FIELD.textLong, FIELD.icon]} />
+    </div>
   );
 }
diff --git a/docs/stories/common/components/badge/05-timer-text-view.stories.tsx b/docs/stories/common/components/badge/05-timer-text-view.stories.tsx
@@ -20,7 +20,7 @@ export default function TimerTextView() {
           { type: 'text', value: ' — Специальные цены на музыкальные инструменты' },
         ]}
       />
-      <div style={{ height: 8 }} />
+      <div style={{ height: 4 }} />
       <Badge
         color='#b52ea8'
         href='https://sima-land.ru'

diff --git a/docs/stories/common/components/badge/09-different-states.stories.tsx b/docs/stories/common/components/badge/09-different-states.stories.tsx
@@ -1,7 +1,7 @@
-import { Sandbox } from '#docs-utils';
 import { Badge, BadgeProps } from '@sima-land/moleculas/common/components/badge';
 import { COLORS } from '@sima-land/ui-nucleons/colors';
 import { useState } from 'react';
+import { Sandbox } from '#docs-utils';
 
 export const meta = {
   category: 'common/Badge',
@@ -21,11 +21,11 @@ export default function DifferentStates() {
   let fields: BadgeProps['fields'];
 
   switch (content) {
-    case 'icon': {
+    case 'text': {
       fields = [
         {
-          type: 'svg-url',
-          value: 'https://static2.static1-sima-land.com/image/mobile_app/common/notice_icon.svg',
+          type: 'text',
+          value: 'Товар партнёра',
         },
       ];
       break;
@@ -39,13 +39,38 @@ export default function DifferentStates() {
       ];
       break;
     }
-    case 'text':
-    default: {
+    case 'icon': {
+      fields = [
+        {
+          type: 'svg-url',
+          value: 'public/images/placeholder_black.svg',
+        },
+      ];
+      break;
+    }
+    case 'icon+text': {
+      fields = [
+        {
+          type: 'svg-url',
+          value: 'public/images/placeholder_black.svg',
+        },
+        {
+          type: 'text',
+          value: 'Товар партнёра',
+        },
+      ];
+      break;
+    }
+    case 'text+icon': {
       fields = [
         {
           type: 'text',
           value: 'Товар партнёра',
         },
+        {
+          type: 'svg-url',
+          value: 'public/images/placeholder_black.svg',
+        },
       ];
       break;
     }
@@ -91,6 +116,14 @@ export default function DifferentStates() {
               displayName: 'Иконка',
               value: 'icon',
             },
+            {
+              displayName: 'Иконка + текст',
+              value: 'icon+text',
+            },
+            {
+              displayName: 'Текст + иконка',
+              value: 'text+icon',
+            },
           ],
           bind: [content, setContent],
         },

diff --git a/src/common/components/badge/__test__/badge.test.tsx b/src/common/components/badge/__test__/badge.test.tsx
@@ -192,4 +192,91 @@ describe('Badge', () => {
 
     expect(getByRole('img').hasAttribute('alt')).toBe(true);
   });
+
+  it('should render icon and text', () => {
+    const { getByTestId } = render(
+      <Badge
+        color='#ff7200'
+        href='https://sima-land.ru'
+        fields={[
+          {
+            type: 'text',
+            value: 'Hello, world!',
+          },
+          {
+            type: 'svg-url',
+            value: 'public/icon_notice.svg',
+          },
+        ]}
+      />,
+    );
+
+    expect(getByTestId('badge').querySelectorAll('img')).toHaveLength(1);
+    expect(getByTestId('badge').textContent).toBe('Hello, world!');
+  });
+
+  it('should merge text and text to one span', () => {
+    const { getByTestId } = render(
+      <Badge
+        color='#ff7200'
+        href='https://sima-land.ru'
+        fields={[
+          {
+            type: 'text',
+            value: 'Hello',
+          },
+          {
+            type: 'text',
+            value: 'World',
+          },
+          {
+            type: 'svg-url',
+            value: 'public/icon_notice.svg',
+          },
+        ]}
+      />,
+    );
+
+    expect(getByTestId('badge').querySelectorAll('img')).toHaveLength(1);
+    expect(getByTestId('badge').querySelectorAll('span')).toHaveLength(1);
+    expect(getByTestId('badge').textContent).toBe('Hello World');
+  });
+
+  it('should merge text and timer to one span', () => {
+    const { getByTestId } = render(
+      <Badge
+        color='#ff7200'
+        href='https://sima-land.ru'
+        fields={[
+          {
+            type: 'text',
+            value: 'Hello',
+          },
+          {
+            type: 'timer',
+            value: addDays(new Date(), 7).toISOString(),
+          },
+          {
+            type: 'svg-url',
+            value: 'public/icon_notice.svg',
+          },
+        ]}
+      />,
+    );
+
+    expect(getByTestId('badge').querySelectorAll('img')).toHaveLength(1);
+    expect(getByTestId('badge').querySelectorAll('span')).toHaveLength(1);
+    expect(getByTestId('badge').textContent).toBe('Hello 07:00:00');
+  });
+
+  it('should handle children', () => {
+    const { getByTestId } = render(
+      <Badge color='#ff7200' href='https://sima-land.ru'>
+        <b>Some text here</b>
+      </Badge>,
+    );
+
+    expect(getByTestId('badge').querySelectorAll('b')).toHaveLength(1);
+    expect(getByTestId('badge').textContent).toBe('Some text here');
+  });
 });
diff --git a/src/common/components/badge/badge.m.scss b/src/common/components/badge/badge.m.scss
@@ -1,5 +1,5 @@
 $badge-size: 20px;
-$icon-size: 14px;
+$icon-size: 16px;
 
 .root {
   display: inline-flex;
@@ -15,15 +15,23 @@ $icon-size: 14px;
 }
 
 .padding-x-default {
-  // ВАЖНО: учитываем border
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 6px;
+  padding-right: 6px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 .padding-x-pill {
-  // ВАЖНО: учитываем border
-  padding-left: 7px;
+  padding-left: 8px;
   padding-right: 8px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 7px;
+    padding-right: 7px;
+  }
 }
 
 .shape-round {
@@ -74,8 +82,13 @@ $icon-size: 14px;
 }
 
 .icon {
-  display: inline-block;
+  display: block;
   width: $icon-size;
   height: $icon-size;
   line-height: $icon-size;
 }
+
+.icon + .content,
+.content + .icon {
+  margin-left: 4px;
+}