gatsby-theme-carbon 2.0.0-next.2 → 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-next.2",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -22,47 +22,48 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@babel/core": "^7.13.16",
-    "@carbon/elements": "^10.32.0",
-    "@carbon/icons-react": "^10.30.0",
-    "@carbon/themes": "^10.32.0",
+    "@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",
     "@reach/router": "^1.2.1",
     "@vimeo/player": "^2.9.1",
     "beautiful-react-hooks": "^0.23.1",
-    "carbon-components": "^10.33.0",
-    "carbon-components-react": "^7.33.0",
+    "carbon-components": "^10.39.0",
+    "carbon-components-react": "^7.39.0",
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "focus-trap-react": "^8.4.2",
-    "gatsby-plugin-catch-links": "^3.3.0",
+    "gatsby-plugin-catch-links": "^3.7.1",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^3.3.0",
-    "gatsby-plugin-mdx": "^2.3.0",
-    "gatsby-plugin-offline": "^4.3.0",
-    "gatsby-plugin-react-helmet": "^4.3.0",
-    "gatsby-plugin-sass": "^4.3.0",
+    "gatsby-plugin-manifest": "^3.7.1",
+    "gatsby-plugin-mdx": "^2.7.1",
+    "gatsby-plugin-offline": "^4.7.1",
+    "gatsby-plugin-react-helmet": "^4.7.1",
+    "gatsby-plugin-sass": "^4.7.1",
     "gatsby-plugin-sass-resources": "^2.0.0",
-    "gatsby-plugin-sharp": "^3.3.1",
+    "gatsby-plugin-sharp": "^3.7.1",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
-    "gatsby-remark-copy-linked-files": "^4.0.0",
-    "gatsby-remark-images": "^5.0.0",
-    "gatsby-remark-responsive-iframe": "^4.0.0",
-    "gatsby-remark-smartypants": "^4.0.0",
+    "gatsby-remark-copy-linked-files": "^4.4.1",
+    "gatsby-remark-images": "^5.4.1",
+    "gatsby-remark-responsive-iframe": "^4.4.1",
+    "gatsby-remark-smartypants": "^4.4.1",
     "gatsby-remark-unwrap-images": "^1.0.1",
-    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-source-filesystem": "^3.7.1",
     "gatsby-source-medium-feed": "^1.0.6",
-    "gatsby-transformer-yaml": "^3.3.0",
+    "gatsby-transformer-yaml": "^3.7.1",
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^1.0.3",
-    "node-sass": "^4.11.0",
-    "prism-react-renderer": "^1.0.2",
+    "node-sass": "5",
+    "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-helmet": "^6.0.0-beta",
-    "react-transition-group": "^4.3.0",
+    "react-transition-group": "^4.4.2",
     "react-use": "^15.3.4",
     "remark-slug": "^6.0.0",
     "slugify": "^1.3.4",

package/src/components/FourOhFour/FourOhFour.module.scss

@@ -43,6 +43,10 @@
   }
 }
 
+:global(.container--dark) .link {
+  color: $carbon--gray-10;
+}
+
 .paragraph {
   @include carbon--type-style('body-long-01');
   font-size: 1.25rem;

package/src/components/Layout.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import Meta from './Meta';
 import LeftNav from './LeftNav';
@@ -24,7 +24,7 @@ const Layout = ({
   const is404 = children.key === null;
   const { isSwitcherEnabled } = useMetadata();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line global-require
     const scroll = require('smooth-scroll')('a[href*="#"]', {
       speed: 400,

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/PageTabs/PageTabs.module.scss

@@ -3,7 +3,7 @@
   width: 100%;
   background: $carbon--black-100;
   position: sticky;
-  top: 3rem;
+  top: calc(3rem - 1px);
   z-index: 6000; /* old z('header') #940 */
 }
 

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/Switcher/Switcher.js

@@ -1,10 +1,4 @@
-import React, {
-  useContext,
-  useRef,
-  useLayoutEffect,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import cx from 'classnames';
 import useMedia from 'use-media';
 import { Locked16 } from '@carbon/icons-react';
@@ -32,7 +26,7 @@ const Switcher = ({ children }) => {
   }, [toggleNavState]);
 
   // calculate and update height
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (switcherIsOpen) {
       setHeight(listRef.current.offsetHeight + 40);
     } else {
@@ -102,7 +96,7 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.carbondesignsystem.com/">
       Carbon Design System
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/">
+    <SwitcherLink href="https://www.ibm.com/standards/carbon/">
       Carbon for IBM.com
     </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/design/event/">

package/src/util/hooks/useId.js

@@ -5,6 +5,10 @@ let globalIndex = 0;
 // eslint-disable-next-line no-plusplus
 const genId = () => ++globalIndex;
 
+// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 export const useId = (label) => {
   /*
    * If this instance isn't part of the initial render, we don't have to do the
@@ -14,7 +18,7 @@ export const useId = (label) => {
 
   const [id, setId] = useState(initialId);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (id === null) {
       /*
        * Patch the ID after render. We do this in `useLayoutEffect` to avoid any