feat(component): allow Box to render with a different tag (#242)

bigcommerce · Nov 8, 2019 · a933b45 · a933b45
1 parent 17e3c57
commit a933b45
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/big-design/src/components/Box/Box.tsx b/packages/big-design/src/components/Box/Box.tsx
@@ -6,6 +6,7 @@ import { MarginProps, PaddingProps } from '../../mixins';
 import { StyledBox } from './styled';
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, MarginProps, PaddingProps {
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
   backgroundColor?: keyof Colors;
   shadow?: keyof Shadow;
   border?: keyof Border;

diff --git a/packages/big-design/src/components/Box/spec.tsx b/packages/big-design/src/components/Box/spec.tsx
@@ -76,3 +76,10 @@ test('theme prop overrides default theme', () => {
 
   expect(container.firstChild).toHaveStyle(`background-color: red`);
 });
+
+test('renders as a different tag', () => {
+  const { getByTestId } = render(<Box data-testid="box" as="section" />);
+  const tag = getByTestId('box').tagName;
+
+  expect(tag).toBe('SECTION');
+});
diff --git a/packages/docs/PropTables/BoxPropTable.tsx b/packages/docs/PropTables/BoxPropTable.tsx
@@ -3,6 +3,11 @@ import React from 'react';
 import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
 
 const boxProps: Prop[] = [
+  {
+    name: 'as',
+    types: ['string', 'React.ComponentType<any>'],
+    description: 'Use a different HTML tag or a different custom component',
+  },
   {
     name: 'backgroundColor',
     types: (