Split Card types and variants in separate props and add more variants

src/lib/components/layout/CardList/__tests__/__snapshots__/CardList.test.jsx.snap

@@ -10,7 +10,8 @@ exports[`rendering renders correctly with a single child 1`] = `
     inList={true}
     key=".0"
     raised={false}
-    type="flat"
+    type={null}
+    variant="flat"
   >
     content
   </Card>
@@ -27,7 +28,8 @@ exports[`rendering renders correctly with multiple children 1`] = `
     inList={true}
     key=".0"
     raised={false}
-    type="flat"
+    type={null}
+    variant="flat"
   >
     content 1
   </Card>
@@ -37,7 +39,8 @@ exports[`rendering renders correctly with multiple children 1`] = `
     inList={true}
     key=".1"
     raised={false}
-    type="flat"
+    type={null}
+    variant="flat"
   >
     content 2
   </Card>
@@ -47,7 +50,8 @@ exports[`rendering renders correctly with multiple children 1`] = `
     inList={true}
     key=".2"
     raised={false}
-    type="flat"
+    type={null}
+    variant="flat"
   >
     content 3
   </Card>

src/lib/components/ui/Card/Card.jsx

@@ -11,15 +11,31 @@ export const Card = (props) => {
     inList,
     raised,
     type,
+    variant,
   } = props;
 
-  let typeClass = styles.isTypeFlat;
-  if (type === 'warning') {
+  const overriddenVariant = type === null ? variant : 'bordered';
+
+  let typeClass = '';
+  if (type === 'success') {
+    typeClass = styles.isTypeSuccess;
+  } else if (type === 'warning') {
     typeClass = styles.isTypeWarning;
   } else if (type === 'error') {
     typeClass = styles.isTypeError;
-  } else if (type === 'bordered') {
-    typeClass = styles.isTypeBordered;
+  } else if (type === 'help') {
+    typeClass = styles.isTypeHelp;
+  } else if (type === 'info') {
+    typeClass = styles.isTypeInfo;
+  } else if (type === 'note') {
+    typeClass = styles.isTypeNote;
+  }
+
+  let variantClass = '';
+  if (overriddenVariant === 'flat') {
+    variantClass = styles.isVariantFlat;
+  } else if (overriddenVariant === 'bordered') {
+    variantClass = styles.isVariantBordered;
   }
 
   let denseClass = '';
@@ -47,6 +63,7 @@ export const Card = (props) => {
       className={(`
         ${styles.root}
         ${typeClass}
+        ${variantClass}
         ${denseClass}
         ${disabledClass}
         ${inListClass}
@@ -65,7 +82,8 @@ Card.defaultProps = {
   id: undefined,
   inList: false,
   raised: false,
-  type: 'flat',
+  type: null,
+  variant: 'flat',
 };
 
 Card.propTypes = {
@@ -75,7 +93,8 @@ Card.propTypes = {
   id: PropTypes.string,
   inList: PropTypes.bool,
   raised: PropTypes.bool,
-  type: PropTypes.oneOf(['flat', 'bordered', 'warning', 'error']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'help', 'info', 'note']),
+  variant: PropTypes.oneOf(['flat', 'bordered']),
 };
 
 export default Card;

src/lib/components/ui/Card/Card.scss

@@ -19,12 +19,16 @@
   padding: $card-padding;
 }
 
-.isTypeFlat {
-  @include card-type(flat);
+.isVariantFlat {
+  @include card-variant(flat);
 }
 
-.isTypeBordered {
-  @include card-type(bordered);
+.isVariantBordered {
+  @include card-variant(bordered);
+}
+
+.isTypeSuccess {
+  @include card-type(success);
 }
 
 .isTypeWarning {
@@ -35,9 +39,20 @@
   @include card-type(error);
 }
 
+.isTypeHelp {
+  @include card-type(help);
+}
+
+.isTypeInfo {
+  @include card-type(info);
+}
+
+.isTypeNote {
+  @include card-type(note);
+}
+
 .isDisabled {
   opacity: map-get($card-disabled, opacity);
-  border-color: map-get($card-disabled, border-color);
   background-color: map-get($card-disabled, background-color);
 }
 

src/lib/components/ui/Card/_mixins.scss

@@ -5,3 +5,9 @@
 
   border-color: map-get($type-properties, border-color);
 }
+
+@mixin card-variant($variant) {
+  $variant-properties: map-get($card-variants, $variant);
+
+  border-color: map-get($variant-properties, border-color);
+}

src/lib/components/ui/Card/_theme.scss

@@ -5,23 +5,37 @@ $card-border-width: var(--rui-card-border-width);
 $card-border-radius: var(--rui-card-border-radius);
 
 $card-types: (
-  flat: (
-    border-color: var(--rui-card-flat-border-color),
+  success: (
+    border-color: var(--rui-card-success-border-color),
   ),
-  bordered: (
-    border-color: var(--rui-card-bordered-border-color),
+  warning: (
+    border-color: var(--rui-card-warning-border-color),
   ),
   error: (
     border-color: var(--rui-card-error-border-color),
   ),
-  warning: (
-    border-color: var(--rui-card-warning-border-color),
+  help: (
+    border-color: var(--rui-card-help-border-color),
+  ),
+  info: (
+    border-color: var(--rui-card-info-border-color),
+  ),
+  note: (
+    border-color: var(--rui-card-note-border-color),
+  ),
+);
+
+$card-variants: (
+  flat: (
+    border-color: var(--rui-card-flat-border-color),
+  ),
+  bordered: (
+    border-color: var(--rui-card-bordered-border-color),
   ),
 );
 
 $card-disabled: (
   background-color: var(--rui-card-disabled-background-color),
-  border-color: var(--rui-card-disabled-border-color),
   opacity: var(--rui-card-disabled-opacity),
 );
 

src/lib/components/ui/Card/tests/Card.test.jsx

@@ -35,6 +35,7 @@ describe('rendering', () => {
         id="custom-id"
         raised
         type="warning"
+        variant="flat"
       >
         <p>Card content</p>
       </Card>,

src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap

@@ -3,7 +3,8 @@
 exports[`rendering renders correctly 1`] = `
 <div
   className="root
-        isTypeFlat"
+
+        isVariantFlat"
 >
   <p>
     Card content
@@ -14,7 +15,8 @@ exports[`rendering renders correctly 1`] = `
 exports[`rendering renders correctly disabled 1`] = `
 <div
   className="root
-        isTypeFlat
+
+        isVariantFlat
 
         isDisabled"
 >
@@ -27,7 +29,8 @@ exports[`rendering renders correctly disabled 1`] = `
 exports[`rendering renders correctly error 1`] = `
 <div
   className="root
-        isTypeError"
+        isTypeError
+        isVariantBordered"
 >
   <p>
     Card content
@@ -38,7 +41,8 @@ exports[`rendering renders correctly error 1`] = `
 exports[`rendering renders correctly raised 1`] = `
 <div
   className="root
-        isTypeFlat
+
+        isVariantFlat
 
 
 
@@ -54,6 +58,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <div
   className="root
         isTypeWarning
+        isVariantBordered
         isDense
         isDisabled
 

src/lib/theme.scss

@@ -432,17 +432,17 @@
   --rui-card-border-radius: var(--rui-border-radius);
   --rui-card-background-color: var(--rui-color-white);
 
-  // Cards: type: flat
+  // Cards: variants
   --rui-card-flat-border-color: transparent;
-
-  // Cards: type: bordered
   --rui-card-bordered-border-color: var(--rui-color-gray-200);
 
-  // Cards: type: warning
+  // Cards: types
+  --rui-card-success-border-color: var(--rui-color-success);
   --rui-card-warning-border-color: var(--rui-color-warning);
-
-  // Cards: type: error
   --rui-card-error-border-color: var(--rui-color-error);
+  --rui-card-help-border-color: var(--rui-color-help);
+  --rui-card-info-border-color: var(--rui-color-info);
+  --rui-card-note-border-color: var(--rui-color-note);
 
   // Cards: raised
   --rui-card-raised-box-shadow: 0 0.01rem 0.65rem -0.1rem #{rgba(0, 0, 0, 0.3)};
@@ -451,7 +451,6 @@
   --rui-card-in-list-max-width: 400px;
 
   // Cards: disabled
-  --rui-card-disabled-border-color: transparent;
   --rui-card-disabled-background-color: var(--rui-color-gray-50);
   --rui-card-disabled-opacity: 0.6;