Merge branch 'range-slider-docs' of https://github.com/laurenmrice/ca…

…rbon-website into range-slider-docs

.env.production

@@ -1 +1 @@
-BACKEND_URI=https://carbondesignsystem.vercel.app/api/survey
+BACKEND_URI=https://carbondesignsystem.vercel.app/api/survey

README.md

@@ -2,7 +2,9 @@
 
 ![Deployment status](https://github.com/carbon-design-system/carbon-website/workflows/Deployment%20status/badge.svg)
 
-This is the [Carbon Design System website](http://www.carbondesignsystem.com). It's built using the [gatsby-theme-carbon](https://gatsby-theme-carbon.now.sh/) with [GatsbyJS](https://www.gatsbyjs.org/).
+This is the [Carbon Design System website](http://www.carbondesignsystem.com).
+It's built using the [gatsby-theme-carbon](https://gatsby.carbondesignsystem.com/)
+with [GatsbyJS](https://www.gatsbyjs.org/).
 
 ## 📂 Structure
 
@@ -29,11 +31,14 @@ src
 - `lint:js` – lint your JavaScript files
 - `format` - run Prettier
 
-If you need more detailed information on how to set up your machine to develop locally, please take a look at our [wiki](https://github.com/carbon-design-system/carbon-website/wiki).
+If you need more detailed information on how to set up your machine to develop
+locally, please take a look at our
+[wiki](https://github.com/carbon-design-system/carbon-website/wiki).
 
 ## 🚀 Build
 
-Runing the build command generates all the files and places them in the `public` folder.
+Running the build command generates all the files and places them in the
+`public` folder.
 
 ```
 yarn build

gatsby-node.js

@@ -76,4 +76,9 @@ exports.createPages = ({ actions }) => {
     toPath: '/guidelines/typography/style-strategies',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/whats-happening/releases',
+    toPath: '/all-about-carbon/releases',
+    isPermanent: true,
+  });
 };

src/data/nav-items.yaml

@@ -124,12 +124,14 @@
       path: /components/loading/usage/
     - title: Modal
       path: /components/modal/usage/
+    - title: Menu
+      path: /components/menu/usage/
+    - title: Menu buttons
+      path: /components/menu-buttons/usage/
     - title: Notification
       path: /components/notification/usage/
     - title: Number input
       path: /components/number-input/usage/
-    - title: Overflow menu
-      path: /components/overflow-menu/usage/
     - title: Pagination
       path: /components/pagination/usage/
     - title: Popover

src/gatsby-theme-carbon/components/ArticleCard/ArticleCard.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link } from 'gatsby';
+import {
+  Launch,
+  Download,
+  ArrowRight,
+  Error,
+  Email,
+} from '@carbon/react/icons';
+
+export default class ArticleCard extends React.Component {
+  render() {
+    const {
+      children,
+      href,
+      title,
+      subTitle,
+      author,
+      date,
+      readTime,
+      color,
+      disabled,
+      actionIcon,
+      className,
+      ...rest
+    } = this.props;
+
+    // const prefix = 'cds';
+
+    let isLink;
+    if (href !== undefined) {
+      isLink = href.charAt(0) === '/';
+    }
+
+    const ArticleCardClassNames = cx(className, `cds--article-card`, {
+      [`cds--article-card--disabled`]: disabled,
+      [`cds--article-card--dark`]: color === 'dark',
+    });
+
+    const aspectRatioClassNames = cx(
+      [`cds--aspect-ratio`],
+      [`cds--aspect-ratio--2x1`]
+    );
+
+    const cardContentClassNames = cx(
+      [`cds--tile`],
+      [`cds--tile--clickable`],
+      [`cds--article-card_content`]
+    );
+
+    const cardContent = (
+      <>
+        <div className="cds--article-card__img">{children}</div>
+        <div className={aspectRatioClassNames}>
+          <div className="cds--aspect-ratio--object cds--article-card__tile">
+            {subTitle ? (
+              <h5 className="cds--article-card__subtitle">{subTitle}</h5>
+            ) : null}
+            {title ? (
+              <h4 className="cds--article-card__title">{title}</h4>
+            ) : null}
+            <div className="cds--article-card__info">
+              {author ? (
+                <p className="cds--article-card__author">{author}</p>
+              ) : null}
+              {date ? <p className="cds--article-card__date">{date}</p> : null}
+              {readTime ? (
+                <p className="cds--article-card__read-time">{readTime}</p>
+              ) : null}
+            </div>
+            <div className="cds--article-card__icon--action">
+              {actionIcon === 'launch' && !disabled ? (
+                <Launch size={20} aria-label="Open" />
+              ) : null}
+              {actionIcon === 'arrowRight' && !disabled ? (
+                <ArrowRight size={20} aria-label="Open" />
+              ) : null}
+              {actionIcon === 'download' && !disabled ? (
+                <Download size={20} aria-label="Download" />
+              ) : null}
+              {actionIcon === 'email' && !disabled ? (
+                <Email size={20} aria-label="Email" />
+              ) : null}
+              {actionIcon === 'disabled' || disabled === true ? (
+                <Error size={20} aria-label="disabled" />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </>
+    );
+
+    let cardContainer;
+    if (disabled === true) {
+      cardContainer = (
+        <div className={cardContentClassNames}>{cardContent}</div>
+      );
+    } else if (isLink === true) {
+      cardContainer = (
+        <Link to={href} className={cardContentClassNames} {...rest}>
+          {cardContent}
+        </Link>
+      );
+    } else {
+      cardContainer = (
+        <a href={href} className={cardContentClassNames} {...rest}>
+          {cardContent}
+        </a>
+      );
+    }
+
+    return <div className={ArticleCardClassNames}>{cardContainer}</div>;
+  }
+}
+
+ArticleCard.propTypes = {
+  /**
+   * Action icon, default is blank, options are Launch, ArrowRight, Download
+   */
+  actionIcon: PropTypes.string,
+
+  /**
+   * Author
+   */
+  author: PropTypes.string,
+
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom class
+   */
+  className: PropTypes.string,
+
+  /**
+   * set to "dark" for dark background card
+   */
+  color: PropTypes.string,
+
+  /**
+   * date
+   */
+  date: PropTypes.string,
+
+  /**
+   * Use for disabled card
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Set url for card
+   */
+  href: PropTypes.string,
+
+  /**
+   * Reat time of article
+   */
+  readTime: PropTypes.string,
+
+  /**
+   * sub title
+   */
+  subTitle: PropTypes.string,
+
+  /**
+   * Title
+   */
+  title: PropTypes.string,
+};
+
+ArticleCard.defaultProps = {
+  color: 'light',
+  disabled: false,
+  actionIcon: '',
+};

src/gatsby-theme-carbon/components/ArticleCard/article-card.scss

@@ -0,0 +1,142 @@
+// $carbon--white-0
+@use '@carbon/react/scss/colors' as *;
+// $spacing-0X
+@use '@carbon/react/scss/spacing' as *;
+// carbon--type-style
+@use '@carbon/react/scss/type' as *;
+// color tokens
+@use '@carbon/react/scss/compat/theme' as *;
+// $standard-easing $transition-x
+@use '@carbon/react/scss/motion' as *;
+// carbon--breakpoint
+@use '@carbon/react/scss/breakpoint' as *;
+
+.cds--article-card .cds--tile {
+  height: 100%;
+  padding: 0;
+  position: relative;
+  transition: background $duration-fast-01;
+  text-decoration: none;
+  border: 1px solid $border-tile-01;
+
+  @include breakpoint('lg') {
+    margin-bottom: var(--space);
+  }
+}
+
+.cds--article-card__tile {
+  border-top: 1px solid $border-tile-01;
+  padding: $spacing-05 25% $spacing-05 $spacing-05;
+}
+
+// Dark
+.cds--article-card--dark .cds--article-card__tile {
+  background: $gray-90; //$ui-background for gray 90 theme
+}
+
+.cds--article-card:hover .cds--article-card__tile {
+  background: $hover-ui;
+}
+
+.cds--article-card__title {
+  @include type-style('body-short-02');
+  text-decoration: none;
+  color: $text-01;
+}
+
+.cds--article-card__subtitle {
+  @include type-style('heading-01');
+  font-weight: 400;
+  text-decoration: none;
+  color: $text-01;
+}
+
+.cds--article-card__info {
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  padding: 0;
+  color: $text-02;
+}
+
+.cds--article-card__info p {
+  @include type-style('label-01');
+}
+
+// At the moment, we force 16:9 for medium posts, this
+// is how we would force 16:9 for all article cards
+// .cds--article-card__img {
+//   aspect-ratio: 16 / 9;
+// }
+
+.cds--article-card__img .gatsby-resp-image-wrapper {
+  margin-bottom: 0;
+}
+
+.cds--article-card__icon--action {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  width: 20px;
+  height: 20px;
+}
+
+.cds--article-card__icon--action svg {
+  fill: $icon-01;
+}
+
+.cds--article-card--dark:hover .cds--article-card__tile {
+  background: $gray-80; //$hover-ui for gray 90 theme
+}
+
+.cds--article-card--dark .cds--article-card__title,
+.cds--article-card--dark .cds--article-card__subtitle {
+  color: $text-04;
+}
+
+.cds--article-card--dark .cds--article-card__info {
+  color: $gray-30; //$text-02 for gray 90 theme
+}
+
+.cds--article-card--dark .cds--article-card__icon--action svg {
+  fill: $gray-10; //$icon-01 for grsay 90 theme
+}
+
+// Disabled
+.cds--article-card--disabled {
+  cursor: not-allowed;
+}
+
+.cds--article-card--disabled .cds--article-card__tile:hover {
+  background: $ui-01;
+  cursor: not-allowed;
+}
+
+.cds--article-card--disabled .cds--article-card__title,
+.cds--article-card--disabled .cds--article-card__subtitle,
+.cds--article-card--disabled .cds--article-card__info {
+  color: $disabled-03;
+}
+
+.cds--article-card--disabled .cds--article-card__icon--action svg {
+  fill: $disabled-02;
+}
+
+// Disabled dark
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__tile:hover {
+  background: $gray-90; //$ui-background for gray 90 theme
+}
+
+.cds--article-card--disabled.cds--article-card--dark .cds--article-card__title,
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__subtitle,
+.cds--article-card--disabled.cds--article-card--dark .cds--article-card__info {
+  color: $gray-50; //$disabled-03 for gray 90
+}
+
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__icon--action
+  svg {
+  fill: $gray-70; //$disabled-02 for gray 90
+}

src/gatsby-theme-carbon/components/ArticleCard/index.js

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