Update Lozenge to Badge and add tests & docs

packages/big-design/src/components/Badge/Badge.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { MarginProps } from '../../mixins';
+
+import { StyledBadge } from './styled';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, MarginProps {
+  variant?: 'danger' | 'secondary' | 'success' | 'warning';
+}
+
+export const Badge: React.FC<BadgeProps> = ({ className, style, ...props }) => <StyledBadge {...props} />;

packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render danger Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0.25rem;
+  background-color: #DB3643;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;
+
+exports[`render default Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0.25rem;
+  background-color: #5E637A;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;
+
+exports[`render secondary Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0.25rem;
+  background-color: #5E637A;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;
+
+exports[`render success Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0.25rem;
+  background-color: #208831;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;
+
+exports[`render warning Badge 1`] = `
+.c0 {
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0.25rem;
+  color: #313440;
+  background-color: #FFBF00;
+}
+
+<span
+  class="c0"
+>
+  Badge
+</span>
+`;

packages/big-design/src/components/Badge/index.ts

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

packages/big-design/src/components/Badge/spec.tsx

@@ -0,0 +1,51 @@
+import { theme } from '@bigcommerce/big-design-theme';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import React from 'react';
+
+import { Badge } from './index';
+
+test('has margin props', () => {
+  const { container, rerender } = render(<Badge />);
+
+  expect(container.firstChild).not.toHaveStyle('margin: 1rem');
+
+  rerender(<Badge margin="medium" />);
+
+  expect(container.firstChild).toHaveStyle('margin: 1rem');
+});
+
+test('render default Badge', () => {
+  const { container } = render(<Badge>Badge</Badge>);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
+});
+
+test('render success Badge', () => {
+  const { container } = render(<Badge variant="success">Badge</Badge>);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.success50}`);
+});
+
+test('render danger Badge', () => {
+  const { container } = render(<Badge variant="danger">Badge</Badge>);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.danger40}`);
+});
+
+test('render warning Badge', () => {
+  const { container } = render(<Badge variant="warning">Badge</Badge>);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.warning40}`);
+});
+
+test('render secondary Badge', () => {
+  const { container } = render(<Badge variant="secondary">Badge</Badge>);
+
+  expect(container.firstChild).toMatchSnapshot();
+  expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
+});

packages/big-design/src/components/Lozenge/styled.tsx → packages/big-design/src/components/Badge/styled.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 
 import { withMargins } from '../../mixins';
 
-import { LozengeProps } from './Lozenge';
+import { BadgeProps } from './Badge';
 
-export const StyledLozenge = styled.span<LozengeProps>`
+export const StyledBadge = styled.span<BadgeProps>`
   ${withMargins()};
 
   color: ${({ theme }) => theme.colors.white};
@@ -23,12 +23,6 @@ export const StyledLozenge = styled.span<LozengeProps>`
       background-color: ${theme.colors.secondary60};
     `}
 
-  ${({ theme, variant }) =>
-    variant === 'primary' &&
-    css`
-      background-color: ${theme.colors.brand};
-    `}
-
   ${({ theme, variant }) =>
     variant === 'success' &&
     css`
@@ -49,7 +43,7 @@ export const StyledLozenge = styled.span<LozengeProps>`
     `}
 `;
 
-StyledLozenge.defaultProps = {
+StyledBadge.defaultProps = {
   theme: defaultTheme,
   variant: 'secondary',
 };

packages/big-design/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Badge';
 export * from './Box';
 export * from './Button';
 export * from './Checkbox';
@@ -8,7 +9,6 @@ export * from './GlobalStyle';
 export * from './Grid';
 export * from './Input';
 export * from './Link';
-export * from './Lozenge';
 export * from './Modal';
 export * from './Panel';
 export * from './ProgressBar';

packages/storybook/stories/Badge/Badge.story.tsx

@@ -0,0 +1,57 @@
+import { Badge, Grid, H0, H1, H2, Link, Text } from '@bigcommerce/big-design';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+
+import { Code, CodePreview, Collapsible } from '../../components';
+import { MarginPropTable } from '../Utilities/index';
+
+import { BadgePropTable } from './BadgePropTable';
+
+storiesOf('Badge', module).add('Overview', () => (
+  <>
+    <H0>Badges</H0>
+
+    <Text>
+      Badges are used to quickly indicate status or information to a user visually. Each variant correlates to a
+      specific status or value.{' '}
+      <Link href="https://bigcommerce.design/badges" target="_blank">
+        Badges Design Guidelines
+      </Link>
+    </Text>
+
+    <CodePreview>
+      {/* jsx-to-string:start */}
+      <Badge variant="success">active</Badge>
+      {/* jsx-to-string:end */}
+    </CodePreview>
+
+    <H1>API</H1>
+
+    <BadgePropTable />
+
+    <H2>Inherited Props</H2>
+
+    <Collapsible title="Margin Props">
+      <MarginPropTable />
+    </Collapsible>
+
+    <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{' '}
+      <Code primary>variant</Code> prop.
+    </Text>
+
+    <CodePreview>
+      {/* jsx-to-string:start */}
+      <Grid columns="repeat(4, min-content)">
+        <Badge variant="secondary">secondary</Badge>
+        <Badge variant="success">success</Badge>
+        <Badge variant="warning">warning</Badge>
+        <Badge variant="danger">danger</Badge>
+      </Grid>
+      {/* jsx-to-string:end */}
+    </CodePreview>
+  </>
+));

packages/storybook/stories/Badge/BadgePropTable.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PropTable } from '../../components';
+
+export const BadgePropTable: React.FC = () => (
+  <PropTable>
+    <PropTable.Prop name="variant" defaults="secondary" types={['danger', 'secondary', 'success', 'warning']}>
+      Determines which badge to display.
+    </PropTable.Prop>
+  </PropTable>
+);

packages/storybook/stories/Badge/index.ts

@@ -0,0 +1 @@
+export { BadgePropTable } from './BadgePropTable';