@tds/core-card - npm Package Compare versions

Comparing version 2.4.3 to 2.5.0

__tests__/Card.spec.jsx

@@ -31,2 +31,5 @@ import React from 'react'
     expect(card).toMatchSnapshot()
+
+    card = doMount({ variant: 'defaultOnlyBorder' })
+    expect(card).toMatchSnapshot()
   })
@@ -33,0 +36,0 @@

Card.jsx

@@ -16,7 +16,10 @@ import React from 'react'
 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,
     }
@@ -133,3 +136,3 @@ }
    *
-   * @since 2.1.0  added `default`, `defaultWithBorder`, `branded`, `alternative`.
+   * @since 2.5.0  added `defaultOnlyBorder`.
    *
@@ -146,2 +149,3 @@ * **Deprecated:** `white`, `lavendar`,`grey`
     'defaultWithBorder',
+    'defaultOnlyBorder',
   ]),
@@ -148,0 +152,0 @@ /**

Card.md

@@ -116,2 +116,44 @@ Cards will stretch to fill the width of their container. Wrap the card in another element to apply size.
 
+#### 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
@@ -118,0 +160,0 @@

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.5.0](https://github.com/telusdigital/tds/compare/@tds/core-card@2.4.3...@tds/core-card@2.5.0) (2020-12-03)
+
+
+### Features
+
+* **core-card:** add variant to remove shadows ([ec1acaf](https://github.com/telusdigital/tds/commit/ec1acafa3a3521a1ea8a9b0009393286212a3a1b))
+
+
+
+
+
 ## [2.4.3](https://github.com/telusdigital/tds/compare/@tds/core-card@2.4.2...@tds/core-card@2.4.3) (2020-09-21)
@@ -8,0 +19,0 @@

dist/index.cjs.js

@@ -93,7 +93,7 @@ 'use strict';
 
-  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: coreColours.colorWhite,
-      border: variant === 'defaultWithBorder' ? "1px solid ".concat(coreColours.colorGreyGainsboro) : undefined
+      border: variant === 'defaultWithBorder' || variant === 'defaultOnlyBorder' ? "1px solid ".concat(coreColours.colorGreyGainsboro) : undefined
     };
@@ -230,7 +230,7 @@ }
    *
-   * @since 2.1.0  added `default`, `defaultWithBorder`, `branded`, `alternative`.
+   * @since 2.5.0  added `defaultOnlyBorder`.
    *
    * **Deprecated:** `white`, `lavendar`,`grey`
    */
-  variant: PropTypes.oneOf(['white', 'lavender', 'grey', 'default', 'branded', 'alternative', 'defaultWithBorder']),
+  variant: PropTypes.oneOf(['white', 'lavender', 'grey', 'default', 'branded', 'alternative', 'defaultWithBorder', 'defaultOnlyBorder']),
 
@@ -237,0 +237,0 @@ /**

dist/index.es.js

@@ -87,7 +87,7 @@ import React from 'react';
 
-  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 ".concat(colorGreyGainsboro) : undefined
+      border: variant === 'defaultWithBorder' || variant === 'defaultOnlyBorder' ? "1px solid ".concat(colorGreyGainsboro) : undefined
     };
@@ -224,7 +224,7 @@ }
    *
-   * @since 2.1.0  added `default`, `defaultWithBorder`, `branded`, `alternative`.
+   * @since 2.5.0  added `defaultOnlyBorder`.
    *
    * **Deprecated:** `white`, `lavendar`,`grey`
    */
-  variant: PropTypes.oneOf(['white', 'lavender', 'grey', 'default', 'branded', 'alternative', 'defaultWithBorder']),
+  variant: PropTypes.oneOf(['white', 'lavender', 'grey', 'default', 'branded', 'alternative', 'defaultWithBorder', 'defaultOnlyBorder']),
 
@@ -231,0 +231,0 @@ /**

package.json

 {
   "name": "@tds/core-card",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "description": "A content container",
@@ -38,3 +38,3 @@ "main": "index.cjs.js",
   },
-  "gitHead": "d7d3a39a3a12877438e8544f5825044375e89eb1"
+  "gitHead": "8076b3dfd5a5ab430b190b6979858b8f6efbd9fa"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109721

increased by5.84%

Lines of code

692

increased by0.87%

No dependency changes