Merge branch 'master' into search-placeholder-color

carbon-design-system · Jan 14, 2021 · ccecec9 · ccecec9
2 parents afe0549 + 3613d7b
commit ccecec9
Show file tree

Hide file tree

Showing 213 changed files with 2,368 additions and 2,441 deletions.
diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
diff --git a/packages/react/src/components/CTA/__stories__/CTA.stories.js b/packages/react/src/components/CTA/__stories__/CTA.stories.js
@@ -1,12 +1,13 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
 import CTA from '../CTA';
+import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import React from 'react';
 import readme from '../README.stories.mdx';
 import { select } from '@storybook/addon-knobs';
@@ -65,8 +66,7 @@ const miscCTAData = {
           },
         },
         image: {
-          defaultSrc:
-            'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
+          defaultSrc: imgLg1x1,
           alt: 'Image alt text',
         },
       },
@@ -264,8 +264,7 @@ FeatureCard.story = {
               },
             },
             image: {
-              defaultSrc:
-                'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
+              defaultSrc: imgLg1x1,
               alt: 'Image alt text',
             },
           },

diff --git a/packages/react/src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js b/packages/react/src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js
@@ -1,12 +1,15 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { select, text } from '@storybook/addon-knobs';
 import CalloutWithMedia from '../CalloutWithMedia';
+import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
+import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';
+import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';
 import React from 'react';
 import readme from '../README.stories.mdx';
 
@@ -16,24 +19,20 @@ const mediaDataByType = {
     image: {
       sources: [
         {
-          src:
-            'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
+          src: imgSm16x9,
           breakpoint: 320,
         },
         {
-          src:
-            'https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
+          src: imgMd16x9,
           breakpoint: 400,
         },
         {
-          src:
-            'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
+          src: imgLg16x9,
           breakpoint: 672,
         },
       ],
       alt: 'Image alt text',
-      defaultSrc:
-        'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
+      defaultSrc: imgLg16x9,
     },
   },
   video: {

diff --git a/packages/react/src/components/Card/__stories__/Card.stories.js b/packages/react/src/components/Card/__stories__/Card.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
 import Bee from '@carbon/pictograms-react/lib/bee';
 import { Card } from '../';
 import { DDS_CARD_WITH_PICTOGRAM } from '../../../internal/FeatureFlags';
+import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
 import React from 'react';
 import readme from '../README.stories.mdx';
 
@@ -26,8 +27,7 @@ export default {
         return {
           image:
             (boolean('image', false, groupId) && {
-              defaultSrc:
-                'https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616',
+              defaultSrc: imgLg2x1,
               alt: 'Image alt text',
             }) ||
             undefined,

diff --git a/packages/react/src/components/CardGroup/__stories__/CardGroup.stories.js b/packages/react/src/components/CardGroup/__stories__/CardGroup.stories.js
@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import CardGroup from '../CardGroup';
+import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--001.jpg';
 import { number } from '@storybook/addon-knobs';
 import React from 'react';
 import readme from '../README.stories.mdx';
@@ -77,8 +78,7 @@ const defaultCard = {
 
 const cardWithImages = {
   image: {
-    defaultSrc:
-      'https://fpoimg.com/1056x792?text=4:3&bg_color=ee5396&text_color=161616',
+    defaultSrc: imgXlg4x3,
     alt: 'Image alt text',
   },
   type: 'local',

diff --git a/packages/react/src/components/CardGroup/__stories__/data/cards.js b/packages/react/src/components/CardGroup/__stories__/data/cards.js
@@ -0,0 +1,169 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import imgXlg16x9 from '../../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
+import imgXlg1x1 from '../../../../../../storybook-images/assets/1312/fpo--1x1--1312x1312--001.jpg';
+import imgXlg2x1 from '../../../../../../storybook-images/assets/1312/fpo--2x1--1312x656--003.jpg';
+import imgXlg3x2 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
+import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--002.jpg';
+
+const cards = {
+  Simple: [
+    {
+      heading: 'Nunc convallis lobortis Nunc convallis lobortis',
+      copy:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
+      cta: {
+        href: 'https://www.example.com',
+        copy: 'cta text here',
+      },
+    },
+    {
+      heading: 'Fusce gravida eu arcu',
+      copy:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
+      cta: {
+        href: 'https://www.example.com',
+        copy: 'cta text here',
+      },
+    },
+    {
+      heading: 'Interdum et malesuada',
+      copy:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.',
+      cta: {
+        href: 'https://www.example.com',
+        copy: 'cta text here',
+      },
+    },
+    {
+      heading: 'Nunc convallis loborti',
+      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      cta: {
+        href: 'https://www.example.com',
+        copy: 'cta text here',
+      },
+    },
+    {
+      heading: 'Nunc convallis lbortis',
+      copy:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
+      cta: {
+        href: 'https://www.example.com',
+        copy: 'cta text here',
+      },
+    },
+  ],
+  Images: [
+    {
+      image: {
+        defaultSrc: imgXlg1x1,
+        alt: 'Image alt text',
+      },
+      eyebrow: 'Topic',
+      heading: 'Natural language processing.',
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      image: {
+        defaultSrc: imgXlg4x3,
+        alt: 'Image alt text',
+      },
+      eyebrow: 'Blog',
+      heading: 'Natural language processing.',
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      image: {
+        defaultSrc: imgXlg2x1,
+        alt: 'Image alt text',
+      },
+      eyebrow: 'Topic',
+      heading: 'Natural language processing.',
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      image: {
+        defaultSrc: imgXlg3x2,
+        alt: 'Image alt text',
+      },
+      eyebrow: 'Blog',
+      heading:
+        'Serving society ethically in the age of Artificial Intelligence.',
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      image: {
+        defaultSrc: imgXlg16x9,
+        alt: 'Image alt text',
+      },
+      eyebrow: 'Topic',
+      heading:
+        'Serving society ethically in the age of Artificial Intelligence.',
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+  ],
+  Videos: [
+    {
+      media: {
+        src: '1_9h94wo6b',
+        type: 'video',
+      },
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      media: {
+        src: '1_9h94wo6b',
+        type: 'video',
+      },
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      media: {
+        src: '1_9h94wo6b',
+        type: 'video',
+      },
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      media: {
+        src: '1_9h94wo6b',
+        type: 'video',
+      },
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+    {
+      media: {
+        src: '1_9h94wo6b',
+        type: 'video',
+      },
+      cta: {
+        href: 'https://www.example.com',
+      },
+    },
+  ],
+};
+
+export default cards;