feat(component): add primary variant to badge (#518)

bigcommerce · Apr 14, 2021 · e1bacf3 · e1bacf3
1 parent 0bf2a97
commit e1bacf3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/packages/big-design/src/components/Badge/Badge.tsx b/packages/big-design/src/components/Badge/Badge.tsx
@@ -6,7 +6,7 @@ import { StyledBadge } from './styled';
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, MarginProps {
   label: string;
-  variant?: 'danger' | 'secondary' | 'success' | 'warning';
+  variant?: 'danger' | 'secondary' | 'success' | 'warning' | 'primary';
 }
 
 export const Badge: React.FC<BadgeProps> = memo(({ className, style, label, ...props }) =>

diff --git a/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap
@@ -42,6 +42,27 @@ exports[`render default Badge 1`] = `
 </span>
 `;
 
+exports[`render primary Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0 0.5rem;
+  background-color: #3C64F4;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;
+
 exports[`render secondary Badge 1`] = `
 .c0 {
   color: #FFFFFF;

diff --git a/packages/big-design/src/components/Badge/spec.tsx b/packages/big-design/src/components/Badge/spec.tsx
@@ -51,6 +51,13 @@ test('render secondary Badge', () => {
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
 });
 
+test('render primary Badge', () => {
+  const { container } = render(<Badge label="Badge" variant="primary" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.primary40}`);
+});
+
 test("doesn't render if label prop is invalid", () => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore

diff --git a/packages/big-design/src/components/Badge/styled.tsx b/packages/big-design/src/components/Badge/styled.tsx
@@ -42,6 +42,12 @@ export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
     css`
       background-color: ${theme.colors.danger40};
     `}
+
+  ${({ theme, variant }) =>
+    variant === 'primary' &&
+    css`
+      background-color: ${theme.colors.primary40};
+    `}
 `;
 
 StyledBadge.defaultProps = {

diff --git a/packages/docs/PropTables/BadgePropTable.tsx b/packages/docs/PropTables/BadgePropTable.tsx
@@ -11,7 +11,7 @@ const badgeProps: Prop[] = [
   },
   {
     name: 'variant',
-    types: ['danger', 'secondary', 'success', 'warning'],
+    types: ['danger', 'secondary', 'success', 'warning', 'primary'],
     description: 'Determines which badge to display.',
     defaultValue: 'secondary',
   },

diff --git a/packages/docs/pages/Badge/BadgePage.tsx b/packages/docs/pages/Badge/BadgePage.tsx
@@ -32,18 +32,19 @@ const BadgePage = () => (
     <H1>Variants</H1>
 
     <Text>
-      There are four types of variants to choose from: <Code>success</Code>, <Code>secondary</Code>,{' '}
-      <Code>warning</Code>, and <Code>danger</Code>. You can determine what type by using the{' '}
+      There are five types of variants to choose from: <Code>success</Code>, <Code>secondary</Code>,{' '}
+      <Code>warning</Code>, <Code>danger</Code>, and <Code>primary</Code>. You can determine what type by using the{' '}
       <Code primary>variant</Code> prop.
     </Text>
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Grid gridColumns="repeat(4, min-content)">
+      <Grid gridColumns="repeat(5, min-content)">
         <Badge variant="secondary" label="secondary" />
         <Badge variant="success" label="success" />
         <Badge variant="warning" label="warning" />
         <Badge variant="danger" label="danger" />
+        <Badge variant="primary" label="primary" />
       </Grid>
       {/* jsx-to-string:end */}
     </CodePreview>