fix: card design revisions v1

packages/experimental/src/components/Card/Card.js

@@ -6,9 +6,9 @@ import { pkgPrefix } from '../../global/js/settings';
 
 export const Card = ({
   actionIcon: ActionIcon,
+  caption,
   children,
   className,
-  href,
   label,
   media,
   mediaPosition,
@@ -22,13 +22,16 @@ export const Card = ({
   secondaryButtonText,
   title,
 }) => {
-  const cardClasses = cx({
-    [`${pkgPrefix}-card`]: true,
+  const cardClasses = cx(`${pkgPrefix}-card`, {
     [`${pkgPrefix}-card--clickable`]: onClick,
     [`${pkgPrefix}-card--media-left`]: mediaPosition === 'left',
     className,
   });
 
+  const headerClasses = cx(`${pkgPrefix}-card-header`, {
+    [`${pkgPrefix}-card-header--label-only`]: label && !title && !caption,
+  });
+
   const CardContent = (
     <div className={cardClasses}>
       {media && <div className={`${pkgPrefix}-card-media`}>{media}</div>}
@@ -38,19 +41,26 @@ export const Card = ({
         </div>
       )}
       <div className={`${pkgPrefix}-card-content-container`}>
-        <div className={`${pkgPrefix}-card-header`}>
-          <p className={`${pkgPrefix}-card-label`}>{label}</p>
-          <p className={`${pkgPrefix}-card-title`}>{title}</p>
+        <div className={headerClasses}>
+          {label && <p className={`${pkgPrefix}-card-label`}>{label}</p>}
+          {title && <p className={`${pkgPrefix}-card-title`}>{title}</p>}
+          {caption && <p className={`${pkgPrefix}-card-caption`}>{caption}</p>}
         </div>
         <div className={`${pkgPrefix}-card-body`}>{children}</div>
         <div className={`${pkgPrefix}-card-actions`}>
           {secondaryButtonText && (
-            <Button kind={secondaryButtonKind} onClick={onSecondaryButtonClick}>
+            <Button
+              kind={secondaryButtonKind}
+              onClick={onSecondaryButtonClick}
+              size="field">
               {secondaryButtonText}
             </Button>
           )}
           {primaryButtonText && (
-            <Button kind={primaryButtonKind} onClick={onPrimaryButtonClick}>
+            <Button
+              kind={primaryButtonKind}
+              onClick={onPrimaryButtonClick}
+              size="field">
               {primaryButtonText}
             </Button>
           )}
@@ -65,20 +75,18 @@ export const Card = ({
     </div>
   );
 
-  if (!href) return CardContent;
-
-  return (
-    <a className={`${pkgPrefix}-card-link`} href={href}>
-      {CardContent}
-    </a>
-  );
+  return CardContent;
 };
 
 Card.propTypes = {
   /**
    * Icon to display in the bottom right of the card
    */
   actionIcon: PropTypes.object,
+  /**
+   * Optional header caption
+   */
+  caption: PropTypes.string,
   /**
    * Content that shows in the body of the card
    */
@@ -87,10 +95,6 @@ Card.propTypes = {
    * Optional user provided class
    */
   className: PropTypes.string,
-  /**
-   * Providing an href turns the card into a clickable link
-   */
-  href: PropTypes.string,
   /**
    * Optional label for the top of the card
    */
@@ -143,9 +147,9 @@ Card.propTypes = {
 
 Card.defaultProps = {
   actionIcon: null,
+  caption: '',
   children: '',
   className: '',
-  href: '',
   label: '',
   media: null,
   mediaPosition: 'top',

packages/experimental/src/components/Card/Card.stories.js

@@ -6,10 +6,12 @@
 //
 
 import React from 'react';
+import cx from 'classnames';
 import { Card } from '.';
 import styles from './_storybook-styles.scss'; // import index in case more files are added later.
 import mdx from './Card.mdx';
 import { ArrowRight24, Cloud32 } from '@carbon/icons-react';
+import { AspectRatio } from 'carbon-components-react';
 import {
   storybookPrefixCanary as storybookPrefix /* , storybookPrefixReleased */,
 } from '../../../config';
@@ -24,19 +26,24 @@ export default {
     },
   },
   argTypes: {
-    cards: {
-      defaultValue: 1,
+    columnSize: {
+      defaultValue: 'lg-4',
       control: {
-        type: 'range',
-        min: 1,
-        max: 4,
-        step: 1,
+        type: 'select',
+        options: ['sm-4', 'md-4', 'lg-4', 'max-4'],
+      },
+    },
+    mediaRatio: {
+      defaultValue: '1x1',
+      control: {
+        type: 'select',
+        options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
       },
     },
   },
   decorators: [
     (Story) => (
-      <div className="bx--grid">
+      <div className="bx--grid card-story">
         <Story />
       </div>
     ),
@@ -58,30 +65,61 @@ const defaultProps = {
 };
 
 const Template = (opts) => {
-  const { children, cols, cards, ...args } = opts;
-  const cardsArray = [];
-  for (let i = 0; i < cards; i++) {
-    cardsArray.push(
-      <div className={`bx--col-lg-${cols}`}>
+  const { children, columnSize, ...args } = opts;
+  const colClasses = cx(`bx--col-${columnSize}`);
+  return (
+    <div className="bx--row">
+      <div className={colClasses}>
         <Card {...args}>{children}</Card>
       </div>
-    );
-  }
-  return <div className="bx--row">{cardsArray.map((c) => c)}</div>;
+    </div>
+  );
+};
+
+const MediaTemplate = (opts) => {
+  const { children, columnSize, mediaRatio, ...args } = opts;
+  const colClasses = cx(`bx--col-${columnSize}`);
+  return (
+    <div className="bx--row">
+      <div className={colClasses}>
+        <Card
+          media={<AspectRatio ratio={mediaRatio}>{mediaRatio}</AspectRatio>}
+          {...args}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export const Default = Template.bind({});
 Default.args = {
   ...defaultProps,
-  media: <img src="https://via.placeholder.com/600x400/000/fff" alt="img" />,
 };
 
-export const MediaLeft = Template.bind({});
+export const LabelOnly = Template.bind({});
+LabelOnly.args = {
+  ...defaultProps,
+  title: '',
+};
+
+export const WithCaption = Template.bind({});
+WithCaption.args = {
+  ...defaultProps,
+  caption: 'Description or long caption',
+  label: '',
+};
+
+export const WithMedia = MediaTemplate.bind({});
+WithMedia.args = {
+  ...defaultProps,
+};
+
+export const MediaLeft = MediaTemplate.bind({});
 MediaLeft.args = {
   ...defaultProps,
   mediaPosition: 'left',
-  media: <img src="https://via.placeholder.com/600x450/000/fff" alt="img" />,
-  cols: 8,
+  columnSize: 'md-4',
 };
 
 export const WithActionIcon = Template.bind({});
@@ -97,12 +135,12 @@ WithPictogram.args = {
   pictogram: Cloud32,
 };
 
-export const WithSeondaryAction = Template.bind({});
-WithSeondaryAction.args = {
+export const WithSecondaryAction = Template.bind({});
+WithSecondaryAction.args = {
   ...defaultProps,
   secondaryButtonText: 'Secondary',
-  secondaryButtonKind: 'secondary',
-  cols: 8,
+  secondaryButtonKind: 'ghost',
+  columnSize: 'md-4',
 };
 
 export const ClickableCardWithOnclick = Template.bind({});
@@ -111,10 +149,3 @@ ClickableCardWithOnclick.args = {
   onClick: () => {},
   primaryButtonText: '',
 };
-
-export const ClickableCardWithLink = Template.bind({});
-ClickableCardWithLink.args = {
-  ...defaultProps,
-  href: '/',
-  primaryButtonText: '',
-};

packages/experimental/src/components/Card/_card.scss

@@ -9,6 +9,11 @@
 
 .#{$pkg-prefix}-card--clickable {
   cursor: pointer;
+  transition: background $duration--fast-02;
+}
+
+.#{$pkg-prefix}-card--clickable:hover {
+  background: $hover-ui;
 }
 
 .#{$pkg-prefix}-card--media-left {
@@ -18,6 +23,7 @@
 
 .#{$pkg-prefix}-card--media-left .#{$pkg-prefix}-card-content-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
 
@@ -35,12 +41,28 @@
   padding: $spacing-05;
 }
 
+.#{$pkg-prefix}-card-header--label-only {
+  padding-bottom: $spacing-03;
+}
+
+.#{$pkg-prefix}-card-header--label-only .#{$pkg-prefix}-card-label {
+  margin-bottom: 0;
+}
+
 .#{$pkg-prefix}-card-title {
   @include carbon--type-style('productive-heading-03');
 }
 
 .#{$pkg-prefix}-card-label {
   @include carbon--type-style('label-01');
+
+  margin-bottom: $spacing-01;
+}
+
+.#{$pkg-prefix}-card-caption {
+  @include carbon--type-style('caption-01');
+
+  margin-top: $spacing-01;
 }
 
 .#{$pkg-prefix}-card-body {

packages/experimental/src/components/Card/_storybook-styles.scss

@@ -1,8 +1,23 @@
 @import './index';
+@import '../../global/styles/project-settings';
+@import '../../global/styles/carbon-settings';
 
 // make the root full width to get a better idea of how the cards
 // look in a real grid situation
 
 #root {
   width: 100%;
 }
+
+// aspect ratio box styling
+.card-story .bx--aspect-ratio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $ui-03;
+}
+
+.#{$pkg-prefix}-card--media-left .#{$pkg-prefix}-card-media {
+  width: 100%;
+  max-width: 300px;
+}