gatsby-theme-carbon 2.0.0 → 2.1.0

package/index.js

@@ -13,6 +13,7 @@ export { default as Aside } from './src/components/Aside';
 export { default as FeatureCard } from './src/components/FeatureCard';
 export { default as FourOhFour } from './src/components/FourOhFour';
 export { default as ImageCard } from './src/components/ImageCard';
+export { default as SquareCard } from './src/components/SquareCard';
 export { Tabs, Tab } from './src/components/Tabs';
 export { default as InlineNotification } from './src/components/InlineNotification';
 // Homepage Template Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -25,6 +25,7 @@
     "@babel/core": "^7.14.6",
     "@carbon/elements": "^10.38.0",
     "@carbon/icons-react": "^10.35.0",
+    "@carbon/pictograms-react": "^11.14.0",
     "@carbon/themes": "^10.38.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",

package/src/components/MDXProvider/defaultComponents.js

@@ -30,6 +30,7 @@ import Title from '../Title';
 import { MiniCard, CardGroup } from '../MiniCard';
 import Sup from '../markdown/Sup';
 import Abbr from '../markdown/Abbr';
+import SquareCard from '../SquareCard';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -81,6 +82,7 @@ const components = {
   Title,
   MiniCard,
   CardGroup,
+  SquareCard,
 };
 
 export default components;

package/src/components/MiniCard/MiniCard.js

@@ -36,6 +36,7 @@ const MiniCard = ({
   title,
   actionIcon,
   className,
+  linkProps,
   ...rest
 }) => {
   const cardContent = (
@@ -57,11 +58,11 @@ const MiniCard = ({
   }
 
   const cardContainer = isLink ? (
-    <Link to={href} className={`${prefix}--tile--clickable`}>
+    <Link to={href} className={`${prefix}--tile--clickable`} {...linkProps}>
       {cardContent}
     </Link>
   ) : (
-    <a href={href} className={`${prefix}--tile--clickable`}>
+    <a href={href} className={`${prefix}--tile--clickable`} {...linkProps}>
       {cardContent}
     </a>
   );

package/src/components/SquareCard/SquareCard.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link, withPrefix } from 'gatsby';
+import {
+  Launch20,
+  Download20,
+  ArrowRight20,
+  Error20,
+  Email20,
+} from '@carbon/icons-react';
+import { settings } from 'carbon-components';
+import { Column } from '../Grid';
+import * as styles from './SquareCard.module.scss';
+
+const { prefix } = settings;
+
+export default class SquareCard extends React.Component {
+  render() {
+    const {
+      children,
+      href,
+      title,
+      smallTitle,
+      disabled,
+      bodyText,
+      helperText,
+      className,
+      actionIcon,
+      color,
+      ...rest
+    } = this.props;
+
+    let isLink;
+    if (href !== undefined) {
+      isLink = href.charAt(0) === '/';
+    }
+
+    const SquareCardClassNames = cx(className, styles.squareCard, {
+      [styles.disabled]: disabled,
+      [styles.darkMode]: color === 'dark',
+    });
+
+    const SquareCardTitleClassNames = cx(className, styles.title, {
+      [styles.titleSmall]: smallTitle,
+    });
+
+    const carbonTileclassNames = cx(
+      [`${prefix}--tile`],
+      [`${prefix}--tile--clickable`]
+    );
+
+    const aspectRatioClassNames = cx(
+      `${prefix}--aspect-ratio`,
+      `${prefix}--aspect-ratio--1x1`
+    );
+
+    const cardContent = (
+      <>
+        <h2 className={SquareCardTitleClassNames}>{title}</h2>
+        {bodyText ? <p className={styles.body}>{bodyText}</p> : null}
+        {helperText ? <p className={styles.helperText}>{helperText}</p> : null}
+        {children ? <div className={styles.helperIcon}>{children}</div> : null}
+        <div className={styles.actionIcon}>
+          {actionIcon === 'arrowRight' && !disabled ? (
+            <ArrowRight20 aria-label="Open resource" />
+          ) : null}
+          {actionIcon === 'launch' && !disabled ? (
+            <Launch20 aria-label="Open resource" />
+          ) : null}
+          {actionIcon === 'download' && !disabled ? (
+            <Download20 aria-label="Download" />
+          ) : null}
+          {actionIcon === 'email' && !disabled ? (
+            <Email20 aria-label="Email" />
+          ) : null}
+          {actionIcon === 'disabled' || disabled === true ? (
+            <Error20 aria-label="disabled" />
+          ) : null}
+        </div>
+      </>
+    );
+
+    let cardContainer;
+    if (disabled === true) {
+      cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+    } else if (isLink === true) {
+      cardContainer = (
+        <Link to={href} className={carbonTileclassNames} {...rest}>
+          {cardContent}
+        </Link>
+      );
+    } else {
+      cardContainer = (
+        <a href={href} className={carbonTileclassNames} {...rest}>
+          {cardContent}
+        </a>
+      );
+    }
+
+    return (
+      <Column
+        colMd={4}
+        colLg={4}
+        noGutterSm
+        className={SquareCardClassNames}
+        {...rest}>
+        <div className={aspectRatioClassNames}>
+          <div className={`${prefix}--aspect-ratio--object`}>
+            {cardContainer}
+          </div>
+        </div>
+      </Column>
+    );
+  }
+}
+
+SquareCard.propTypes = {
+  /**
+   * Use to set a pictogram
+   */
+  children: PropTypes.node,
+
+  /**
+   * Set url for card
+   */
+  href: PropTypes.string,
+
+  /**
+   * Large heading
+   */
+  title: PropTypes.string,
+
+  /**
+   * Use to enable the smaller heading
+   */
+  smallTitle: PropTypes.bool,
+
+  /**
+   * Action icon, default is Arrow Right, options are Launch, ArrowRight, Download, Error
+   */
+  actionIcon: PropTypes.string,
+
+  /**
+   * Use for disabled card
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Body text
+   */
+  bodyText: PropTypes.string,
+
+  /**
+   * Helper text
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * set to "dark" for dark background card
+   */
+  color: PropTypes.string,
+
+  /**
+   * Specify a custom class
+   */
+  className: PropTypes.string,
+};
+
+SquareCard.defaultProps = {
+  color: 'light',
+  disabled: false,
+  smallTitle: false,
+  actionIcon: 'arrowRight',
+};

package/src/components/SquareCard/SquareCard.module.scss

@@ -0,0 +1,172 @@
+// Square Card Group
+:global(.square-card-group) > * {
+  margin-bottom: 0;
+}
+.squareCard {
+  //overrides global vertical spacing
+  --space: 0;
+  border-top: 1px solid #e0e0e0;
+  border-left: 1px solid transparent;
+
+  @include carbon--breakpoint('md') {
+    border-left: 1px solid #e0e0e0;
+  }
+}
+
+:global(.square-card-group) .squareCard:first-child {
+  border-top: 0 solid transparent;
+}
+:global(.square-card-group) .squareCard:nth-child(2) {
+  @include carbon--breakpoint('md') {
+    border-top: 0 solid transparent;
+  }
+}
+:global(.square-card-group) .squareCard:nth-child(3) {
+  @include carbon--breakpoint('lg') {
+    border-top: 0 solid transparent;
+  }
+}
+:global(.square-card-group) .squareCard:nth-child(2n + 1) {
+  @include carbon--breakpoint('md') {
+    border-left: 1px solid transparent;
+  }
+
+  @include carbon--breakpoint('lg') {
+    border-left: 1px solid #e0e0e0;
+  }
+}
+:global(.square-card-group) .squareCard:nth-child(3n + 1) {
+  @include carbon--breakpoint('lg') {
+    border-left: 1px solid transparent;
+  }
+}
+
+.squareCard :global(.#{$prefix}--tile) {
+  height: 100%;
+  padding: $spacing-05 15% $spacing-05 $spacing-05;
+  position: relative;
+  text-decoration: none;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    width: calc(100% - 1px); // 1px to offset negative `left` positioning
+    height: calc(100% - 1px); // 1px to offset negative `top` positioning
+    outline: 3px solid transparent;
+    outline-offset: -3px;
+    transition: outline motion(standard, productive) $duration--fast-01;
+  }
+}
+
+.squareCard :global(.#{$prefix}--tile:focus) {
+  outline: none;
+
+  &::after {
+    outline: 3px solid $focus;
+  }
+}
+
+.title {
+  @include carbon--type-style('productive-heading-04');
+
+  text-decoration: none;
+  position: relative;
+  z-index: 1;
+
+  @include carbon--breakpoint-between('lg', 'xlg') {
+    @include carbon--type-style('productive-heading-03');
+  }
+}
+
+.titleSmall {
+  @include carbon--type-style('productive-heading-03');
+
+  @include carbon--breakpoint-between('lg', 'xlg') {
+    @include carbon--type-style('productive-heading-02');
+  }
+}
+
+.body {
+  @include carbon--type-style('body-short-02');
+
+  padding-top: $spacing-05;
+}
+
+.titleSmall + .body {
+  @include carbon--breakpoint-between('lg', 'xlg') {
+    padding-top: 0;
+  }
+}
+
+.helperText {
+  @include carbon--type-style('body-short-01');
+
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  display: flex;
+  align-items: flex-end;
+  padding-right: $spacing-07;
+  margin-right: $spacing-06;
+}
+
+.helperIcon {
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.actionIcon {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  width: 20px;
+  height: 20px;
+}
+
+// Dark
+.darkMode :global(.#{$prefix}--tile) {
+  background: $carbon--gray-90; //$ui-background for gray 90 theme
+}
+
+.darkMode :global(.#{$prefix}--tile:hover) {
+  background: $carbon--gray-80; //$hover-ui for gray 90 theme
+}
+
+.darkMode .title,
+.darkMode .body,
+.darkMode .helperText {
+  color: $text-04;
+}
+
+.darkMode .actionIcon svg,
+.darkMode .helperIcon svg {
+  fill: $carbon--gray-10;
+}
+
+// Disabled
+.disabled {
+  cursor: not-allowed;
+}
+
+.disabled :global(.#{$prefix}--tile:hover) {
+  background: $ui-01;
+  cursor: not-allowed;
+}
+
+.disabled .title,
+.disabled .body,
+.disabled .helperText {
+  color: $disabled-03;
+}
+
+.disabled .actionIcon svg,
+.disabled .helperIcon svg {
+  fill: $disabled-02;
+}

package/src/components/SquareCard/index.js

@@ -0,0 +1,3 @@
+import SquareCard from './SquareCard';
+
+export default SquareCard;