feat(card): implement showShadow prop for controlling shadows

vickonrails · Jun 22, 2021 · 442ca05 · 442ca05
1 parent aa3c94a
commit 442ca05
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 18 deletions.
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
@@ -88,6 +88,7 @@ describe('Card', () => {
     expect(getByTestId(widthPx)).toHaveStyle(`width:10%`)
   })
 
+  // Test that Card renders correct background color
   test('Card renders correct background color', () => {
     const testIdBackgroundless = `card-bg-default`
     const testIdRed = `card-bg-reg`
@@ -106,4 +107,29 @@ describe('Card', () => {
     )
     expect(getByTestId(testIdRed)).toHaveStyle(`background-color:red`)
   })
+
+  // Test that br sets current border radius
+  test('br prop sets the correct border radius', () => {
+    const testIdBackgroundless = `card`
+
+    const { getByTestId } = render(
+      <Card data-testid={testIdBackgroundless} br={3}>
+        Card Content
+      </Card>
+    )
+
+    expect(getByTestId(testIdBackgroundless)).toHaveStyle(`border-radius:3px`)
+  })
+
+  test('Card has shadow when showShadows prop is set to true', () => {
+    const testId = `card`
+
+    const { getByTestId } = render(
+      <Card data-testid={testId} showShadow>
+        Card Content
+      </Card>
+    )
+
+    expect(getByTestId(testId)).toHaveStyle(`box-shadow:0 0 6px 3px #F2F2F2`)
+  })
 })
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -35,6 +35,10 @@ const StyledCard = styled.article<CardProps>`
   ${PaddingStyle};
 
   background-color: ${({ bgColor }) => bgColor};
+
+  border-radius: ${({ br }) => br && `${br}px`};
+
+  box-shadow: ${({ showShadow }) => showShadow && `0 0 6px 3px #F2F2F2`};
 `
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -77,6 +81,16 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
    * bgColor: set background color of Card
    */
   bgColor?: string
+
+  /**
+   * br - Set border radius of the Card
+   */
+  br?: number
+
+  /**
+   * showShadow - when set to `true`, shows shadow in Card component
+   */
+  showShadow?: boolean
 }
 
 Card.defaultProps = {

diff --git a/src/components/card/readme.md b/src/components/card/readme.md
@@ -14,33 +14,33 @@ function App() {
 
 ## Props
 
-| property    | description                                             | type                | default       |
-| ----------- | ------------------------------------------------------- | ------------------- | ------------- |
-| pr          | right padding of the Card                               | `number`            | 0             |
-| pl          | left padding of the Card                                | `number`            | 0             |
-| pt          | top padding of the Card                                 | `number`            | 0             |
-| pb          | bottom padding of the Card                              | `number`            | 0             |
-| fullWidth   | sets the Card to span entire horizontal available space | `boolean`           | `false`       |
-| width       | sets the horizontal size of the Card                    | `string` , `string` | `fit-content` |
-| br          | sets the border radius of the Card                      | `number`            | 0             |
-| brt         | sets the top border radius of the Card                  | `number`            | 0             |
-| brb         | sets the bottom border radius of the Card               | `number`            | 0             |
-| showShadows | confirms if the Card should show shadows                | `boolean`           | `false`       |
+| property   | description                                             | type                | default       |
+| ---------- | ------------------------------------------------------- | ------------------- | ------------- |
+| pr         | right padding of the Card                               | `number`            | 0             |
+| pl         | left padding of the Card                                | `number`            | 0             |
+| pt         | top padding of the Card                                 | `number`            | 0             |
+| pb         | bottom padding of the Card                              | `number`            | 0             |
+| fullWidth  | sets the Card to span entire horizontal available space | `boolean`           | `false`       |
+| width      | sets the horizontal size of the Card                    | `string` , `string` | `fit-content` |
+| br         | sets the border radius of the Card                      | `number`            | 0             |
+| brt        | sets the top border radius of the Card                  | `number`            | 0             |
+| brb        | sets the bottom border radius of the Card               | `number`            | 0             |
+| showShadow | confirms if the Card should show shadows                | `boolean`           | `false`       |
 
 ## Todo
 
 - [x] padding props
 - [x] width & fullWidth
-- [ ] background color
-- [ ] border radius & border radius, top and bottom
-- [ ] shadows
+- [x] background color
+- [x] border radius & border radius, top and bottom
+- [ ] showShadow
 
 ## Tests suites
 
 - [x] Card renders correctly
 - [x] Card receives padding correctly
 - [x] `fullWidth` prop creates a block card
 - [x] `width` sets the horizontal size of the card
-- [ ] `br` prop sets the correct border radius
-- [ ] Card has shadow when `showShadows` prop is set to true
-- [ ] Card renders correct background color
+- [x] `br` prop sets the correct border radius
+- [x] Card has shadow when `showShadows` prop is set to true
+- [x] Card renders correct background color