feat(component): added Badge props to Panel component (#1270)

bigcommerce · Jul 26, 2023 · 3a712b0 · 3a712b0
1 parent ece6c8f
commit 3a712b0
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 2 deletions.
diff --git a/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap
@@ -10,6 +10,7 @@ exports[`render danger Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   background-color: #DB3643;
 }
@@ -31,6 +32,7 @@ exports[`render default Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   background-color: #5E637A;
 }
@@ -52,6 +54,7 @@ exports[`render primary Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   background-color: #3C64F4;
 }
@@ -73,6 +76,7 @@ exports[`render secondary Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   background-color: #5E637A;
 }
@@ -94,6 +98,7 @@ exports[`render success Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   background-color: #208831;
 }
@@ -115,6 +120,7 @@ exports[`render warning Badge 1`] = `
   line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 0.5rem;
   color: #313440;
   background-color: #FFBF00;

diff --git a/packages/big-design/src/components/Badge/styled.tsx b/packages/big-design/src/components/Badge/styled.tsx
@@ -16,6 +16,7 @@ export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
   line-height: ${({ theme }) => theme.lineHeight.small};
   text-align: center;
   text-transform: uppercase;
+  vertical-align: middle;
   padding: 0 ${({ theme }) => theme.spacing.xSmall};
 
   ${({ theme, variant }) =>

diff --git a/packages/big-design/src/components/Panel/Panel.tsx b/packages/big-design/src/components/Panel/Panel.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef, HTMLAttributes, isValidElement, memo, Ref } from 're
 import { MarginProps } from '../../mixins';
 import { excludePaddingProps } from '../../mixins/paddings/paddings';
 import { warning } from '../../utils';
+import { Badge, BadgeProps } from '../Badge/Badge';
 import { Button, ButtonProps } from '../Button';
 import { Flex } from '../Flex';
 import { Text } from '../Typography';
@@ -23,11 +24,12 @@ export interface PanelProps extends HTMLAttributes<HTMLElement>, MarginProps {
   header?: string;
   headerId?: string;
   action?: PanelAction;
+  badge?: BadgeProps;
 }
 
 export const RawPanel: React.FC<PanelProps & PrivateProps> = memo(({ forwardedRef, ...props }) => {
   const filteredProps = excludePaddingProps(props);
-  const { action, children, description, header, headerId, ...rest } = filteredProps;
+  const { action, children, description, header, headerId, badge, ...rest } = filteredProps;
 
   const renderHeader = () => {
     if (!header && !action) {
@@ -43,6 +45,7 @@ export const RawPanel: React.FC<PanelProps & PrivateProps> = memo(({ forwardedRe
         {Boolean(header) && (
           <StyledH2 id={headerId} marginBottom={description ? 'xxSmall' : 'medium'}>
             {header}
+            {badge && <Badge marginLeft="xSmall" {...badge} />}
           </StyledH2>
         )}
         {action && <Button {...action}>{action.text}</Button>}

diff --git a/packages/big-design/src/components/Panel/spec.tsx b/packages/big-design/src/components/Panel/spec.tsx
@@ -56,6 +56,25 @@ test('renders a header and action', () => {
   expect(actionButton.textContent).toBe('Test Action');
 });
 
+test('renders a badge and header', () => {
+  const { getByRole, getByText } = render(
+    <Panel badge={{ label: 'danger', variant: 'danger' }} header="Test Header">
+      Dolore proident eiusmod sint est enim laboris anim minim quis ut adipisicing consectetur
+      officia ex. Ipsum eiusmod fugiat amet pariatur culpa tempor aliquip tempor nisi. Irure esse
+      deserunt nostrud ipsum id adipisicing enim velit labore. Nulla exercitation laborum laboris
+      Lorem irure sit esse nulla mollit aliquip consectetur velit
+    </Panel>,
+  );
+
+  const header = getByRole('heading');
+
+  expect(header).toBeInTheDocument();
+
+  const badge = getByText('danger');
+
+  expect(badge).toBeInTheDocument();
+});
+
 describe('description', () => {
   test('renders string description', async () => {
     render(

diff --git a/packages/docs/PropTables/PanelPropTable.tsx b/packages/docs/PropTables/PanelPropTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Code, Prop, PropTable, PropTableWrapper } from '../components';
+import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components';
 
 const panelProps: Prop[] = [
   {
@@ -31,6 +31,19 @@ const panelProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'badge',
+    types: [
+      <NextLink href="/badge" key="badge-type">
+        BadgeProps
+      </NextLink>,
+    ],
+    description: (
+      <>
+        See <NextLink href="/badge">Badge</NextLink> for usage.
+      </>
+    ),
+  },
   {
     name: 'description',
     types: ['string', 'React.ReactNode'],

diff --git a/packages/docs/pages/panel.tsx b/packages/docs/pages/panel.tsx
@@ -33,6 +33,10 @@ const PanelPage = () => {
                 // Do some action
               },
             }}
+            badge={{
+              label: 'primary',
+              variant: 'primary',
+            }}
             description="This is the panel's optional description."
             header="Panel header"
           >