feat(component): add individual border props to Box

bigcommerce · Apr 26, 2019 · 2559e28 · 2559e28
1 parent b6ebbd2
commit 2559e28
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 2 deletions.
diff --git a/packages/big-design/src/components/Box/Box.tsx b/packages/big-design/src/components/Box/Box.tsx
@@ -11,6 +11,10 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, MarginPr
   backgroundColor?: keyof Colors;
   elevation?: keyof Elevation;
   border?: keyof Border;
+  borderBottom?: keyof Border;
+  borderLeft?: keyof Border;
+  borderRight?: keyof Border;
+  borderTop?: keyof Border;
   borderRadius?: keyof BorderRadius;
 }
 

diff --git a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap
@@ -21,3 +21,14 @@ exports[`has elevation props 1`] = `
   elevation="floating"
 />
 `;
+
+exports[`has individual border props 1`] = `
+.c0 {
+  border-right: 1px solid #D9DCE9;
+  border-bottom: 1px solid #D9DCE9;
+}
+
+<div
+  class="c0"
+/>
+`;
diff --git a/packages/big-design/src/components/Box/spec.tsx b/packages/big-design/src/components/Box/spec.tsx
@@ -50,6 +50,12 @@ test('has border props', () => {
   expect(container.firstChild).toMatchSnapshot();
 });
 
+test('has individual border props', () => {
+  const { container } = render(<Box borderBottom="box" borderRight="box" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
 test('has elevation props', () => {
   const { container } = render(<Box elevation="floating" />);
 

diff --git a/packages/big-design/src/components/Box/styled.tsx b/packages/big-design/src/components/Box/styled.tsx
@@ -16,8 +16,42 @@ export const StyledBox = styled.div<BoxProps>`
     `};
 
   ${({ elevation, theme }) => elevation && theme.elevation[elevation]};
-  ${({ border, theme }) => border && theme.border[border]};
-  ${({ borderRadius, theme }) => borderRadius && theme.borderRadius[borderRadius]};
+
+  ${({ border, theme }) =>
+    border &&
+    css`
+      border: ${theme.border[border]};
+    `};
+
+  ${({ borderTop, theme }) =>
+    borderTop &&
+    css`
+      border-top: ${theme.border[borderTop]};
+    `};
+
+  ${({ borderRight, theme }) =>
+    borderRight &&
+    css`
+      border-right: ${theme.border[borderRight]};
+    `};
+
+  ${({ borderBottom, theme }) =>
+    borderBottom &&
+    css`
+      border-bottom: ${theme.border[borderBottom]};
+    `};
+
+  ${({ borderLeft, theme }) =>
+    borderLeft &&
+    css`
+      border-left: ${theme.border[borderLeft]};
+    `};
+
+  ${({ borderRadius, theme }) =>
+    borderRadius &&
+    css`
+      border-radius: ${theme.borderRadius[borderRadius]};
+    `};
 `;
 
 StyledBox.defaultProps = { theme: defaultTheme };