feat: CU-1n5w3vb add loading and variants to badge

src/components/badges/animation.ts

@@ -0,0 +1,52 @@
+import { keyframes } from '@emotion/core';
+
+const rotate = keyframes`
+  to {
+    transform: rotate(1turn);
+  }
+`;
+
+const getBorderAnimation = (borderColor: string) => {
+  return {
+    border: 'none',
+    display: 'inline-block',
+    position: 'relative',
+    zIndex: '0',
+    width: 'auto',
+    height: 'auto',
+    overflow: 'hidden',
+    padding: '3px 6px',
+    fontFamily: 'arial',
+    fontSize: '12px',
+    fontWeight: '500',
+    borderRadius: '1px',
+    color: '#f2994a',
+    ':before': {
+      content: "''",
+      position: 'absolute',
+      zIndex: '-2',
+      left: '-150%',
+      top: '-450%',
+      width: '400%',
+      height: '1000%',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '50% 50%, 50% 50%',
+      backgroundPosition: '0 0, 100% 0, 100% 100%, 0 100%',
+      backgroundImage: `linear-gradient(${borderColor}, ${borderColor})`,
+      animation: `${rotate} 4s linear infinite`,
+    },
+    ':after': {
+      content: "''",
+      position: 'absolute',
+      zIndex: '-1',
+      left: '1px',
+      top: '1px',
+      width: 'calc(100% - 2px)',
+      height: 'calc(100% - 2px)',
+      background: 'inherit',
+      borderRadius: '1px',
+    },
+  };
+};
+
+export default getBorderAnimation;

src/components/badges/badge.tsx

@@ -1,41 +1,103 @@
 import React, { FC } from 'react';
+import { useTheme } from 'emotion-theming';
 import { Flex, FlexProps } from 'rebass';
-
-// Components
+import { getIcon, IconName } from '../icon/list';
 import Value from '../typography/value';
+import getBorderAnimation from './animation';
+import { ITheme } from '../../theme/types';
+
+type Mode = 'default' | 'bordered';
+type Variant =
+  | 'light'
+  | 'default'
+  | 'label'
+  | 'success'
+  | 'warning'
+  | 'notice'
+  | 'fail';
 
 export interface BadgeProps extends Omit<FlexProps, 'css'> {
   value: string | number;
-  variant?: 'light' | 'bold' | 'fail' | 'warning' | 'success' | 'label' | 'border';
+  variant?: Variant;
+  mode?: Mode;
+  loading?: boolean;
+  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> = ({
   value,
   variant = 'light',
+  mode = 'default',
+  loading = false,
+  icon,
   ...props
-}: BadgeProps) => (
-  <Flex
-    alignItems="center"
-    justifyContent="center"
-    px="7px"
-    py="4px"
-    {...props}
-    sx={{
-      borderRadius: '2px',
-    }}
-    as="span"
-    tx="variants.badges.primary"
-    variant={variant}
-  >
-    <Value
+}: BadgeProps) => {
+  const theme = useTheme<ITheme>();
+
+  const borderColor = getBorderColor(theme, variant);
+  const borderStyle = loading
+    ? getBorderAnimation(borderColor)
+    : { borderRadius: '1px' };
+
+  return (
+    <Flex
       as="span"
-      lineHeight="13px"
-      fontFamily="IBM Plex Mono"
-      fontWeight="normal"
+      alignItems="center"
+      justifyContent="center"
+      px="6px"
+      height="19px"
+      sx={borderStyle}
+      variant={variant}
+      tx={loading ? THEME_PATH.bordered : THEME_PATH[mode]}
+      {...props}
     >
-      {value}
-    </Value>
-  </Flex>
-);
+      <Value
+        as="span"
+        display="flex"
+        alignItems="center"
+        lineHeight="13px"
+        fontFamily="IBM Plex Mono"
+        fontWeight="normal"
+        sx={{
+          svg: {
+            height: '13px',
+            width: 'auto',
+            marginLeft: '5px',
+          },
+        }}
+      >
+        {value}
+        {icon && getIcon(icon, 'currentColor')}
+      </Value>
+    </Flex>
+  );
+};
 
 export default Badge;

src/components/badges/badges.stories.tsx

@@ -4,6 +4,7 @@ import Badge, { BadgeProps } from './badge';
 import Dot, { DotProps } from './dot';
 import TextValueBadge, { TextValueBadgeProps } from './text-value-badge';
 import ProjectBadge, { ProjectBadgeProps } from './project-badge';
+import { IconName } from '../icon/list';
 
 export default {
   title: 'Quartz/Badges',
@@ -14,8 +15,8 @@ const Template: Story<TextValueBadgeProps> = (props) => (
   <TextValueBadge {...props} />
 );
 
+export const Default = (props: BadgeProps) => <Badge {...props} />;
 export const TextValue = Template.bind({});
-export const Default: Story<BadgeProps> = (props) => <Badge {...props} />;
 export const DotBadge: Story<DotProps> = (props) => <Dot p="5px" {...props} />;
 export const ProjectBadgeBadge: Story<ProjectBadgeProps> = (props) => (
   <ProjectBadge p="5px" {...props} />
@@ -55,7 +56,10 @@ TextValue.argTypes = {
 };
 
 Default.args = {
-  value: 'azirona',
+  value: 'arizona',
+  mode: 'default',
+  variant: 'default',
+  loading: false
 };
 
 Default.argTypes = {
@@ -67,23 +71,55 @@ Default.argTypes = {
       required: true,
     },
   },
+  icon: {
+    options: ['download', 'card', 'birth', 'lock'],
+    mapping: {
+      download: IconName.download,
+      card: IconName.card,
+      birth: IconName.birth,
+      lock: IconName.lock,
+    },
+    control: {
+      type: 'select',
+    },
+    type: {
+      required: false,
+    },
+  },
   variant: {
     control: {
       type: 'select',
       options: [
         'light',
-        'bold',
+        'default',
         'fail',
         'warning',
         'success',
         'label',
-        'border',
+        'notice',
       ],
     },
     type: {
       required: false,
     },
   },
+  mode: {
+    control: {
+      type: 'select',
+      options: ['default', 'bordered'],
+    },
+    type: {
+      required: false,
+    },
+  },
+  loading: {
+    control: {
+      type: 'boolean',
+    },
+    type: {
+      required: false,
+    },
+  },
 };
 
 DotBadge.args = {

src/theme/badges/bordered.ts

@@ -0,0 +1,66 @@
+const variants = {
+  default: {
+    '> span': {
+      color: 'black',
+    },
+
+    bg: 'grayShade2',
+    border: '1px solid',
+    borderColor: 'black',
+  },
+  fail: {
+    '> span': {
+      color: 'labels.red',
+    },
+
+    bg: 'labels.redShade3',
+    border: '1px solid',
+    borderColor: 'labels.red',
+  },
+  label: {
+    '> span': {
+      color: 'black',
+    },
+
+    bg: 'white',
+    border: '1px solid',
+    borderColor: 'black',
+  },
+  light: {
+    '> span': {
+      color: 'black',
+    },
+
+    bg: 'grayShade3',
+    border: '1px solid',
+    borderColor: 'grayShade1',
+  },
+  success: {
+    '> span': {
+      color: 'labels.green',
+    },
+
+    bg: 'primaryShade2',
+    border: '1px solid',
+    borderColor: 'labels.green',
+  },
+  warning: {
+    '> span': {
+      color: 'labels.orange',
+    },
+
+    bg: 'labels.orangeShade3',
+    border: '1px solid',
+    borderColor: 'labels.orange',
+  },
+  notice: {
+    '> span': {
+      color: 'black',
+    },
+    bg: 'labels.yellowLight',
+    border: '1px solid',
+    borderColor: 'labels.yellow',
+  },
+};
+
+export default variants;

src/theme/badges/index.ts

@@ -1,10 +1,12 @@
 import keyValue from './keyValue';
 import primary from './primary';
+import bordered from './bordered';
 import dot from './dot';
 
 const variants = {
   keyValue,
   primary,
+  bordered,
   dot,
 };
 

src/theme/badges/primary.ts

@@ -1,7 +1,7 @@
 const variants = {
-  bold: {
+  default: {
     '> span': {
-      color: 'white',
+      color: 'grayShade3',
     },
     bg: 'gray',
   },
@@ -35,18 +35,16 @@ const variants = {
   },
   warning: {
     '> span': {
-      color: 'black',
+      color: 'grayShade3',
     },
 
-    bg: 'labels.yellow',
+    bg: 'labels.orange',
   },
-  border: {
+  notice: {
     '> span': {
       color: 'black',
     },
-    bg: 'grayShade3',
-    border: '1px solid',
-    borderColor: 'grayShade1',
+    bg: 'labels.yellow',
   },
 };
 

src/theme/theme.ts

@@ -69,7 +69,8 @@ const theme: ITheme = {
       red: '#EB5757',
       orange: '#f2994a',
       purple: '#9B51E0',
-      yellow: '#FFF066',
+      yellow: '#FFE600',
+      yellowLight: '#FFF8B3',
       green: '#21B182',
       skyblue: '#56CCF2',
       blue: '#41B7DC',