refactor: badges (#271)

Author: snqb

.storybook/main.js

@@ -2,6 +2,7 @@ module.exports = {
   "stories": [
     "../src/**/*/stories.@(ts|tsx)",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../src/**/stories/index.@(js|jsx|ts|tsx)",
   ],
   "addons": [
     "@storybook/addon-links",

src/components/badges/badge.tsx src/components/badge/Badge.tsx

@@ -1,64 +1,39 @@
-import React, { FC } from 'react';
-import { Flex, FlexProps } from 'rebass';
+import React from 'react';
+import { Flex, FlexProps, SxStyleProp } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import { getIcon, IconName } from '../icon/list';
 import Value from '../typography/value';
-import getBorderAnimation from './animation';
-import { ITheme } from '../../theme/types';
+import { BadgeVariant } from './types';
+import { getBorderColor, getBorderAnimation } from './utils';
 
 type Mode = 'default' | 'bordered';
-type Variant =
-  | 'light'
-  | 'default'
-  | 'label'
-  | 'success'
-  | 'warning'
-  | 'notice'
-  | 'fail';
-
-export interface BadgeProps extends Omit<FlexProps, 'css'> {
+export interface Props extends Omit<FlexProps, 'css'> {
+  /** Value for the badge. E.g. 'pending' or 18 */
   value: string | number;
-  variant?: Variant;
+  /** One of badge variants. Defined by `BadgeVariant` type. E.g. `light` or `warning`... */
+  variant?: BadgeVariant;
+  /** Badge mode: `default` or `bordered` */
   mode?: Mode;
+  /** Whether to show loading spinner */
   loading?: boolean;
+  /** Icon, used as `IconName.nameOfTheIcon` e.g. `IconName.download` */
   icon?: IconName;
 }
 
-// this is a workaround because styled-system does not support theme colors for `linear-gradient`
-const getBorderColor = (theme: ITheme, variant: Variant) => {
-  switch (variant) {
-    case 'light':
-      return theme.colors.grayShade1;
-    case 'default':
-      return theme.colors.black;
-    case 'label':
-      return theme.colors.black;
-    case 'success':
-      return theme.colors.labels.green;
-    case 'warning':
-      return theme.colors.labels.orange;
-    case 'notice':
-      return theme.colors.labels.yellow;
-    case 'fail':
-      return theme.colors.labels.red;
-    default:
-      return theme.colors.black;
-  }
-};
-
 const THEME_PATH: Record<Mode, string> = {
   default: 'variants.badges.primary',
   bordered: 'variants.badges.bordered',
 };
 
-const Badge: FC<BadgeProps> = ({
+export const Badge = ({
   value,
   variant = 'light',
   mode = 'default',
   loading = false,
   icon,
+  sx,
   ...props
-}: BadgeProps) => {
+}: Props) => {
   const theme = useTheme();
 
   const borderColor = getBorderColor(theme, variant);
@@ -73,7 +48,7 @@ const Badge: FC<BadgeProps> = ({
       justifyContent="center"
       px="6px"
       height="19px"
-      sx={borderStyle}
+      sx={{ ...borderStyle, ...sx } as SxStyleProp}
       variant={variant}
       tx={loading ? THEME_PATH.bordered : THEME_PATH[mode]}
       {...props}
@@ -99,5 +74,3 @@ const Badge: FC<BadgeProps> = ({
     </Flex>
   );
 };
-
-export default Badge;

src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { Props as BadgeProps } from './Badge';

src/components/badge/stories.tsx

@@ -0,0 +1,47 @@
+import { Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import { Badge, Props } from './Badge';
+import { IconName } from '../icon/list';
+
+export default {
+  title: 'Quartz/Badges/Default',
+  component: Badge,
+  args: {
+    value: 'arizona',
+    mode: 'default',
+    variant: 'default',
+    loading: false,
+  },
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: ['download', 'card', 'birth', 'lock'],
+      mapping: {
+        download: IconName.download,
+        card: IconName.card,
+        birth: IconName.birth,
+        lock: IconName.lock,
+      },
+    },
+    variant: {
+      control: { type: 'select' },
+      options: [
+        'light',
+        'default',
+        'fail',
+        'warning',
+        'success',
+        'label',
+        'notice',
+      ],
+    },
+    mode: {
+      control: { type: 'select' },
+      options: ['default', 'bordered'],
+    },
+  },
+};
+
+const Template: Story<Props> = (props) => <Badge {...props} />;
+
+export const Default = Template.bind({});

src/components/badge/types.ts

@@ -0,0 +1,8 @@
+export type BadgeVariant =
+  | 'light'
+  | 'default'
+  | 'label'
+  | 'success'
+  | 'warning'
+  | 'notice'
+  | 'fail';

src/components/badges/animation.ts src/components/badge/utils/get-border-animation.ts

@@ -6,7 +6,7 @@ const rotate = keyframes`
   }
 `;
 
-const getBorderAnimation = (borderColor: string) => {
+export const getBorderAnimation = (borderColor: string) => {
   return {
     border: 'none',
     display: 'inline-block',
@@ -48,5 +48,3 @@ const getBorderAnimation = (borderColor: string) => {
     },
   };
 };
-
-export default getBorderAnimation;

src/components/badge/utils/get-border-color.ts

@@ -0,0 +1,24 @@
+import { ITheme } from '../../../theme/types';
+import { BadgeVariant } from '../types';
+
+// this is a workaround because styled-system does not support theme colors for `linear-gradient`
+export const getBorderColor = (theme: ITheme, variant: BadgeVariant) => {
+  switch (variant) {
+    case 'light':
+      return theme.colors.grayShade1;
+    case 'default':
+      return theme.colors.black;
+    case 'label':
+      return theme.colors.black;
+    case 'success':
+      return theme.colors.labels.green;
+    case 'warning':
+      return theme.colors.labels.orange;
+    case 'notice':
+      return theme.colors.labels.yellow;
+    case 'fail':
+      return theme.colors.labels.red;
+    default:
+      return theme.colors.black;
+  }
+};

src/components/badge/utils/index.ts

@@ -0,0 +1,2 @@
+export { getBorderColor } from './get-border-color';
+export { getBorderAnimation } from './get-border-animation';