gatsby-theme-carbon 2.0.0 → 2.1.3

package/gatsby-config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const { uiBackground, interactive01 } = require('@carbon/elements');
+const { gray100 } = require('@carbon/elements');
 const defaultLunrOptions = require('./config/lunr-options');
 
 const carbonThemes = {
@@ -162,8 +162,8 @@ module.exports = (themeOptions) => {
           name: 'Carbon Design Gatsby Theme',
           short_name: 'Gatsby Theme Carbon',
           start_url: '/',
-          background_color: uiBackground,
-          theme_color: interactive01,
+          background_color: gray100,
+          theme_color: gray100,
           display: 'browser',
           icon: iconPath
             ? path.resolve(iconPath)

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.3",
   "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/Header/Header.module.scss

@@ -138,38 +138,43 @@ header.header {
   transition: background-color $duration--fast-02 $carbon--standard-easing;
 }
 
-// Switcher button, extra specificity to override Carbon styles
+// Switcher button, extra specificity to override Carbon tooltip button styles
 // Hex values used pending shell theming
-.header .header-button.switcher-button {
-  background-color: $carbon--gray-100;
-  position: relative;
-  border: none;
-  border-color: $ui-05;
-  border-bottom: 1px solid $carbon--gray-80;
+.header :global(.bx--tooltip__trigger).header-button.switcher-button {
   &:focus {
-    outline: 2px solid $carbon--white-0;
-    outline-offset: -2px;
+    box-shadow: none;
+    border-color: $carbon--white-0;
   }
+}
+
+.header :global(a.bx--header__menu-item:hover) {
+  color: $carbon--white-0;
+}
+
+.header .header-button.switcher-button {
   &:hover {
     background-color: $carbon--gray-80;
   }
+  &:focus,
+  &:focus:active {
+    outline: 2px solid $carbon--white-0;
+    outline-offset: -2px;
+  }
   &:active {
     background-color: #3d3d3d;
-    border-left: 1px solid $ui-05;
-    border-right: 1px solid $ui-05;
+    border-left: 2px solid $ui-05;
+    border-right: 2px solid $ui-05;
   }
 }
 
 .header-button.switcher-button.switcher-button--open {
-  border: 1px solid transparent;
-  border-left: 1px solid $carbon--gray-80;
-  border-bottom: 1px solid $carbon--gray-100;
+  border: 2px solid transparent;
+  border-left: 2px solid $carbon--gray-80;
+  border-bottom: 2px solid $carbon--gray-100;
   background-color: $carbon--gray-100;
   &:active {
-    border-left: 1px solid $carbon--white-0;
+    border-left: 2px solid $carbon--white-0;
+    box-shadow: none;
+    border-color: $carbon--white-0;
   }
 }
-
-.header :global(a.bx--header__menu-item:hover) {
-  color: $carbon--white-0;
-}

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/ResourceCard/resource-card-group.scss

@@ -19,7 +19,7 @@
 }
 
 .resource-card-group .#{$prefix}--resource-card--dark {
-  border-top-color: $ui-03;
+  border-color: transparent !important;
 }
 
 .resource-card-group

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;

package/src/components/markdown/Markdown.module.scss

@@ -44,15 +44,14 @@
 .h3,
 .h4,
 .h5,
-.h6,
-.list {
-  padding-right: 0;
+.h6 {
+  padding-right: $spacing-05;
   margin-right: 0;
   margin-left: 0;
 
   @include carbon--breakpoint('md') {
-    width: 100%;
-    padding-right: 0;
+    width: 75%;
+    padding-right: $spacing-07;
     margin-right: 0;
     margin-left: 0;
   }
@@ -66,6 +65,23 @@
   --space: 0;
 }
 
+.list {
+  padding-right: $spacing-05;
+  margin-right: 0;
+  margin-left: 0;
+
+  @include carbon--breakpoint('md') {
+    width: 100%;
+    padding-right: $spacing-07;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  @include carbon--breakpoint('lg') {
+    width: 66.667%;
+  }
+}
+
 //spacing exception for nested list items
 :global(.bx--list--nested) {
   --space: 0;

package/src/styles/internal/_page.scss

@@ -13,7 +13,7 @@
 
   @include carbon--breakpoint('lg') {
     padding-left: calc(
-      25% + 2rem
+      25% + 1.5rem
     ); //2rem to account for 2rem left padding default on grid
     padding-right: 2rem;
   }