feat(core-card): add variant to remove shadows

telus · Dec 3, 2020 · ec1acaf · ec1acaf
1 parent 5be7d11
commit ec1acaf
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/packages/Card/Card.jsx b/packages/Card/Card.jsx
@@ -13,11 +13,14 @@ import { safeRest, handleResponsiveStyles } from '@tds/util-helpers'
 import { deprecate } from '../../shared/utils/warn'
 
 const getVariant = ({ variant }) => {
-  if (variant === 'white' || variant === 'default' || variant === 'defaultWithBorder') {
+  if (['white', 'default', 'defaultWithBorder', 'defaultOnlyBorder'].indexOf(variant) >= 0) {
     return {
-      boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
+      boxShadow: variant === 'defaultOnlyBorder' ? undefined : '0 0 16px 0 rgba(0, 0, 0, 0.1)',
       backgroundColor: colorWhite,
-      border: variant === 'defaultWithBorder' ? `1px solid ${colorGreyGainsboro}` : undefined,
+      border:
+        variant === 'defaultWithBorder' || variant === 'defaultOnlyBorder'
+          ? `1px solid ${colorGreyGainsboro}`
+          : undefined,
     }
   }
   if (variant === 'lavender' || variant === 'branded') {
@@ -129,7 +132,7 @@ Card.propTypes = {
   /**
    * The style.
    *
-   * @since 2.1.0  added `default`, `defaultWithBorder`, `branded`, `alternative`.
+   * @since 2.5.0  added `defaultOnlyBorder`.
    *
    * **Deprecated:** `white`, `lavendar`,`grey`
    */
@@ -141,6 +144,7 @@ Card.propTypes = {
     'branded',
     'alternative',
     'defaultWithBorder',
+    'defaultOnlyBorder',
   ]),
   /**
    * The content. Can be text, any HTML element, or any component.

diff --git a/packages/Card/Card.md b/packages/Card/Card.md
@@ -113,6 +113,48 @@ Teams can use the `defaultWithBorder` variant to add a border to the `Card` for
 </FlexGrid>
 ```
 
+#### Without shadows
+
+Cards with the `defaultOnlyBorder` variant are to be used to create less visual emphasis than other variants of cards with a border or shadow. It also matches the same z-index as other coloured variant cards without shadow. It should be used near forms, but not containing forms.
+
+```jsx
+<FlexGrid>
+  <FlexGrid.Row>
+    <FlexGrid.Col xs={12} md={7}>
+      <Card spacing="compact" variant="defaultOnlyBorder">
+        <FlexGrid gutter={false}>
+          <FlexGrid.Row verticalAlign="middle" horizontalAlign="center">
+            <FlexGrid.Col md={2} xs={0}>
+              <Bank size="48" />
+            </FlexGrid.Col>
+            <FlexGrid.Col md={6} xs={12} horizontalAlign="left">
+              <Box horizontal={2}>
+                <Text>Chequing account number</Text>
+                <Heading level="h3">**********1234</Heading>
+              </Box>
+            </FlexGrid.Col>
+            <FlexGrid.Col md={1} xs={12} horizontalAlign="left">
+              <Box inline between={1}>
+                <HairlineDivider vertical />
+                <Box vertical={4}>
+                  <div />
+                </Box>
+              </Box>
+            </FlexGrid.Col>
+            <FlexGrid.Col md={3} xs={12} horizontalAlign="left">
+              <Box between={2}>
+                <Link href="#">Update Card</Link>
+                <Link href="#">Delete Card</Link>
+              </Box>
+            </FlexGrid.Col>
+          </FlexGrid.Row>
+        </FlexGrid>
+      </Card>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+</FlexGrid>
+```
+
 ### Full Height Cards
 
 In some cases you want cards to match the height of their parent so that the bottom edge of the cards are aligned. This is usually needed when using cards in a `FlexGrid`. Use the `fullHeight` prop to achieve this.