fix: implement box shadow and warning color

sombreroEnPuntas · Aug 28, 2020 · f247782 · f247782
1 parent 52e4dcc
commit f247782
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 79 deletions.
diff --git a/src/components/Box.md b/src/components/Box.md
@@ -7,5 +7,17 @@ Box
 Box error
 
 ```jsx
-<Box error>{"418: I'm a teapot"}</Box>
+<Box type="error">{"418: I'm a teapot"}</Box>
+```
+
+Box success
+
+```jsx
+<Box type="success">{'200: OK'}</Box>
+```
+
+Box warning
+
+```jsx
+<Box type="warning">{'503: Service Unavailable'}</Box>
 ```
diff --git a/src/components/Box.test.tsx b/src/components/Box.test.tsx
@@ -8,27 +8,25 @@ import { ThemeWrapper } from '../theme/ThemeWrapper'
 import Box from './Box'
 
 const getProps = (customProps: any) => ({
+  children: ':)',
   ...customProps,
 })
 
-test('Box renders a message correctly', () => {
-  const { getByText } = render(
-    <ThemeWrapper>
-      <Box {...getProps({ children: ':)' })} />
-    </ThemeWrapper>
-  )
+describe.each`
+  displayName      | props                  | css
+  ${'Box'}         | ${{}}                  | ${'background-color: white; box-shadow: 0 4px #4d5256,0 -4px #4d5256,4px 0 #4d5256,-4px 0 #4d5256; color: #212529;'}
+  ${'Box error'}   | ${{ type: 'error' }}   | ${'background-color: #ffd7cf; box-shadow: 0 4px #E9C46A,0 -4px #E9C46A,4px 0 #E9C46A,-4px 0 #E9C46A; color: #ce372b;'}
+  ${'Box success'} | ${{ type: 'success' }} | ${'background-color: #c9d68f; box-shadow: 0 4px #e76e55,0 -4px #e76e55,4px 0 #e76e55,-4px 0 #e76e55; color: #76c442;'}
+  ${'Box warning'} | ${{ type: 'warning' }} | ${'background-color: #FFE5A6; box-shadow: 0 4px #92cc41,0 -4px #92cc41,4px 0 #92cc41,-4px 0 #92cc41; color: #B38106;'}
+`(`$displayName`, ({ props, css }) => {
+  it(`renders with ${css}`, () => {
+    const { getByText } = render(
+      <ThemeWrapper>
+        <Box {...getProps(props)} />
+      </ThemeWrapper>
+    )
 
-  expect(getByText(':)')).toBeVisible()
-  expect(getByText(':)')).toHaveAttribute('type', 'black')
-})
-
-test('Box renders an error message correctly', () => {
-  const { getByText } = render(
-    <ThemeWrapper>
-      <Box {...getProps({ children: "418: I'm a teapot", error: true })} />
-    </ThemeWrapper>
-  )
-
-  expect(getByText("418: I'm a teapot")).toBeVisible()
-  expect(getByText("418: I'm a teapot")).toHaveAttribute('type', 'error')
+    expect(getByText(':)')).toBeVisible()
+    expect(getByText(':)')).toHaveStyle(css)
+  })
 })
diff --git a/src/components/Box.tsx b/src/components/Box.tsx
@@ -1,48 +1,23 @@
-import React from 'react'
-import styled from 'styled-components'
-
-export type MessageType = 'black' | 'error'
+import { styled, Theme } from '../theme/theme'
 
 interface Props {
-  type: MessageType
+  type: keyof Theme['colors']
 }
 
-export const BoxWrapper = styled.pre<Props>`
-  ${({ theme: { colors }, type }) => `
+export const Box = styled.div<Props>`
+  ${({ theme: { colors, fonts, snippets }, type = 'black' }) => `
     background-color: ${colors[type].background};
-    box-shadow: 4px 0 ${colors[type].shadow},
-      0 -4px ${colors[type].shadow},
-      -4px 0 ${colors[type].shadow},
-      0 4px ${colors[type].shadow};
-    display: block;
-    margin: 0.5em;
-    max-width: 450px;
-    overflow-x: auto;
-    padding: 0.5em;
-    white-space: pre-wrap;
-    `}
-`
-
-export const MessageWrapper = styled.code<Props>`
-  ${({ theme: { colors, fonts }, type }) => `
-    align-items: center;
     color: ${colors[type].outline};
-    display: flex;
     font-family: ${fonts.fontFamily};
     font-size: 0.65em;
     font-weight: bold;
-    justify-content: space-between;
     line-height: calc(2 * ${fonts.lineHeight});
-    `}
-`
+    overflow-x: auto;
+    padding: 0.5rem 1rem;
+    white-space: pre-wrap;
 
-export const Box: React.FunctionComponent<{ error?: boolean }> = ({
-  children,
-  error,
-}) => (
-  <BoxWrapper type={error ? 'error' : 'black'}>
-    <MessageWrapper type={error ? 'error' : 'black'}>{children}</MessageWrapper>
-  </BoxWrapper>
-)
+    ${snippets.boxShadow({ colors, type })}
+  `}
+`
 
 export default Box
diff --git a/src/components/Input.md b/src/components/Input.md
@@ -7,7 +7,7 @@ Input
 Input disabled
 
 ```jsx
-<Input disabled />
+<Input status="disabled" />
 ```
 
 Input error

diff --git a/src/components/Input.test.tsx b/src/components/Input.test.tsx
@@ -13,11 +13,11 @@ const getProps = (customProps: any) => ({
 })
 
 describe.each`
-  displayName         | props                    | css
-  ${'Input'}          | ${{}}                    | ${'background-color: white; box-shadow: 0 4px #4d5256, 0 -4px #4d5256, 4px 0 #4d5256, -4px 0 #4d5256; outline-color: #212529;'}
-  ${'Input disabled'} | ${{ disabled: true }}    | ${'background-color: #ebebe4; box-shadow: 0 4px #4d5256, 0 -4px #4d5256, 4px 0 #4d5256, -4px 0 #4d5256; outline-color: #212529;'}
-  ${'Input error'}    | ${{ status: 'error' }}   | ${'background-color: #ffd7cf; box-shadow: 0 4px #e76e55, 0 -4px #e76e55, 4px 0 #e76e55, -4px 0 #e76e55; outline-color: #ce372b;'}
-  ${'Input success'}  | ${{ status: 'success' }} | ${'background-color: #c9d68f; box-shadow: 0 4px #92cc41, 0 -4px #92cc41, 4px 0 #92cc41, -4px 0 #92cc41; outline-color: #76c442;'}
+  displayName         | props                     | css
+  ${'Input'}          | ${{}}                     | ${'box-shadow: 0 4px #4d5256,0 -4px #4d5256,4px 0 #4d5256,-4px 0 #4d5256; outline-color: #212529;'}
+  ${'Input disabled'} | ${{ status: 'disabled' }} | ${'box-shadow: 0 4px #E9C46A,0 -4px #E9C46A,4px 0 #E9C46A,-4px 0 #E9C46A; outline-color: #B38106;'}
+  ${'Input error'}    | ${{ status: 'error' }}    | ${'box-shadow: 0 4px #e76e55,0 -4px #e76e55,4px 0 #e76e55,-4px 0 #e76e55; outline-color: #ce372b;'}
+  ${'Input success'}  | ${{ status: 'success' }}  | ${'box-shadow: 0 4px #92cc41,0 -4px #92cc41,4px 0 #92cc41,-4px 0 #92cc41; outline-color: #76c442;'}
 `(`$displayName`, ({ props, css }) => {
   it(`renders with right styles`, () => {
     const { getByTestId } = render(

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,25 +1,24 @@
-import styled from 'styled-components'
+import { styled, Theme } from '../theme/theme'
 
 interface Props {
-  status?: 'error' | 'success'
+  status?: keyof Theme['colors'] | 'disabled'
 }
 
-export const Input = styled.input<Props>`
-  ${({ theme: { colors, fonts }, disabled, status }) => `
-    background-color: ${
-      disabled ? colors.disabled : colors[status || 'black'].background
-    };
-    border: none;
-    box-shadow: 0 4px ${colors[status || 'black'].shadow},
-      0 -4px ${colors[status || 'black'].shadow},
-      4px 0 ${colors[status || 'black'].shadow},
-      -4px 0 ${colors[status || 'black'].shadow};
-    font-family: ${fonts.fontFamily};
-    line-height: calc(2 * ${fonts.lineHeight});
-    margin: 4px;
-    outline-color: ${colors[status || 'black'].outline};
-    padding: 0.5rem 1rem;
-    `}
+export const Input = styled.input.attrs(({ status }: Props) => ({
+  disabled: status === 'disabled',
+}))<Props>`
+  ${({ theme: { colors, fonts, snippets }, status = 'black' }) => {
+    const type = status === 'disabled' ? 'warning' : status
+    return `
+      border: none;
+      font-family: ${fonts.fontFamily};
+      line-height: ${fonts.lineHeight};
+      outline-color: ${colors[type].outline};
+      padding: 0.5rem 1rem;
+
+      ${snippets.boxShadow({ colors, type })}
+    `
+  }}
 `
 
 /** @component */