Merge pull request #1449 from ASU/uds-1930-un-unsplash

fix(unity-react-core): fix broken images

Author: mlsamuelson

packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx

@@ -10,14 +10,14 @@ export default {
     docs: {
       description: {
         component: `The Accordion component can be used to generate an accordion of editable content cards.
-        ## Usage
+## Usage
 
-        Accordion users are responsible to meet all UDS design guidelines with their menu,
-        including rules on the use of Call-to-Action buttons and tags.
+Accordion users are responsible to meet all UDS design guidelines with their menu,
+including rules on the use of Call-to-Action buttons and tags.
 
-        View component examples and source code below.
+View component examples and source code below.
 
-        This story includes another components for demostration purposes.
+This story includes another components for demostration purposes.
         `,
       },
     },

packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.stories.jsx

@@ -12,14 +12,14 @@ export default {
     docs: {
       description: {
         component: `The Anchor Menu component can be used to generate a responsive anchor menu.
-        ## Usage
+## Usage
 
-        Anchor menu users are responsible to meet all UDS design guidelines with their menu,
-        including rules on the use of Call-to-Action buttons and tags.
+Anchor menu users are responsible to meet all UDS design guidelines with their menu,
+including rules on the use of Call-to-Action buttons and tags.
 
-        View component examples and source code below.
+View component examples and source code below.
 
-        This story includes another components for demostration purposes.
+This story includes another components for demostration purposes.
         `,
       },
     },

packages/unity-react-core/src/components/Article/Article.stories.jsx

@@ -1,6 +1,7 @@
 /* eslint react/jsx-props-no-spreading: "off" */
 import React from "react";
 
+import img from "../../../../../shared/assets/img/named/hero01.jpg";
 import { Article } from "./Article";
 
 export default {
@@ -44,7 +45,7 @@ export const News = Template.bind({});
 News.args = {
   type: "news",
   articleUrl: "https://example.com",
-  headerImageUrl: "https://source.unsplash.com/WLUHO9A_xik/1920x512",
+  headerImageUrl: img,
   title:
     "Clarisse Machanguana takes her skill set to the next level at ASU Thunderbird",
   publicationDate: "March 18, 2021",

packages/unity-react-core/src/components/Article/Article.test.jsx

@@ -4,12 +4,13 @@ import { render, cleanup } from "@testing-library/react";
 import React from "react";
 import { expect, describe, it, afterEach, beforeEach } from "vitest";
 
+import img from "../../../../../shared/assets/img/named/hero01.jpg";
 import { Article } from "./Article";
 
 const defaultArgs = {
   type: "news",
   articleUrl: "https://example.com",
-  headerImageUrl: "https://source.unsplash.com/random/1920x512",
+  headerImageUrl: img,
   title:
     "Clarisse Machanguana takes her skill set to the next level at ASU Thunderbird",
   publicationDate: "March 18, 2021",

packages/unity-react-core/src/components/Card/Card.stories.jsx

@@ -2,6 +2,7 @@
 import classNames from "classnames";
 import React from "react";
 
+import img1 from "../../../../../shared/assets/img/named/hero01.jpg";
 import { Card } from "./Card";
 
 export default {
@@ -49,7 +50,7 @@ export const Default = Template.bind({});
 Default.args = {
   type: "default",
   horizontal: false,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title: "Default title",
   body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
@@ -103,7 +104,7 @@ export const Degree = Template.bind({});
 Degree.args = {
   type: "degree",
   horizontal: false,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title: "Default title",
   body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
@@ -115,7 +116,7 @@ Degree.parameters = {
 
     <Card
         body="<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo."
-        image="https://source.unsplash.com/WLUHO9A_xik/300x200"
+        image=img1
         imageAltText="An example image"
         title="Default title"
         type="degree"
@@ -128,7 +129,7 @@ export const Event = Template.bind({});
 Event.args = {
   type: "event",
   horizontal: false,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title:
     "Event title Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore exercitationem ad voluptatem dolore dolores nulla ipsam quo distinctio expedita doloribus nisi similique obcaecati velit illo autem numquam iusto, rem nesciunt repellendus laborum. Rerum quisquam, soluta aspernatur a harum dolor ducimus nulla. Itaque aliquam cum fugiat error esse ipsam rerum consectetur!",
@@ -164,7 +165,7 @@ The event props, \`eventLocation\` and \`eventTime\` are allowed to contain basi
         eventFormat="stack"
         eventLocation="Downtown Phoenix campus"
         eventTime="Wed, November 21st, 2021<br>11:30 a.m - 12:30 p.m."
-        image="https://source.unsplash.com/WLUHO9A_xik/300x200"
+        image=img1
         imageAltText="An example image"
         title="Event title"
         type="event"
@@ -177,7 +178,7 @@ export const Story = Template.bind({});
 Story.args = {
   type: "story",
   horizontal: false,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title: "Story title",
   body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
@@ -212,7 +213,7 @@ Story.parameters = {
             size: 'default'
           }
         ]}
-        image="https://source.unsplash.com/WLUHO9A_xik/300x200"
+        image=img1
         imageAltText="An example image"
         linkLabel="Default link"
         linkUrl="http://google.com"
@@ -244,7 +245,7 @@ export const HorizontalStoryCard = HorizontalTemplate.bind({});
 HorizontalStoryCard.args = {
   type: "story",
   horizontal: true,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title: "Horizontal story",
   body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
@@ -262,7 +263,7 @@ HorizontalStoryCard.parameters = {
     <Card
         body="<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo."
         horizontal
-        image="https://source.unsplash.com/WLUHO9A_xik/300x200"
+        image=img1
         imageAltText="An example image"
         tags={[
           {
@@ -292,7 +293,7 @@ export const AsuNewsStory = Template.bind({});
 AsuNewsStory.args = {
   type: "story",
   horizontal: false,
-  image: "https://source.unsplash.com/WLUHO9A_xik/300x200",
+  image: img1,
   imageAltText: "An example image",
   title: "ASU News Story title",
   body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
@@ -318,7 +319,7 @@ AsuNewsStory.parameters = {
             size: 'default'
           }
         ]}
-        image="https://source.unsplash.com/WLUHO9A_xik/300x200"
+        image=img1
         imageAltText="An example image"
         title="ASU News Story title"
         type="story"

packages/unity-react-core/src/components/Hero/Hero.stories.jsx

@@ -2,6 +2,7 @@
 // @ts-check
 import React from "react";
 
+import img1 from "../../../../../shared/assets/img/named/hero01.jpg";
 import { Hero } from "./Hero";
 
 /**
@@ -48,7 +49,7 @@ export const HeroSmall = Template.bind({});
 
 HeroSmall.args = {
   image: {
-    url: "https://source.unsplash.com/WLUHO9A_xik/800x400?a=1",
+    url: img1,
     altText: "Hero image",
     size: "small",
   },
@@ -72,7 +73,7 @@ export const HeroLongTitle = Template.bind({});
 
 HeroLongTitle.args = {
   image: {
-    url: "https://source.unsplash.com/WLUHO9A_xik/800x400?a=1",
+    url: img1,
     altText: "Hero image",
     size: "small",
   },
@@ -97,7 +98,7 @@ export const HeroMedium = Template.bind({});
 
 HeroMedium.args = {
   image: {
-    url: "https://source.unsplash.com/WLUHO9A_xik/800x400?a=1",
+    url: img1,
     altText: "Hero image",
     size: "medium",
   },
@@ -128,7 +129,7 @@ export const HeroLarge = Template.bind({});
 
 HeroLarge.args = {
   image: {
-    url: "https://source.unsplash.com/WLUHO9A_xik/800x400?a=1",
+    url: img1,
     altText: "Hero image",
     size: "large",
   },

packages/unity-react-core/src/components/Hero/Hero.test.jsx

@@ -4,11 +4,12 @@ import { render, cleanup } from "@testing-library/react";
 import React from "react";
 import { expect, describe, it, afterEach, beforeEach, test } from "vitest";
 
+import img1 from "../../../../../shared/assets/img/named/hero01.jpg";
 import { Hero } from "./Hero";
 
 const defaultArgs = {
   image: {
-    url: "https://source.unsplash.com/random/800x400?a=1",
+    url: img1,
     altText: "Hero image",
     size: "large",
   },
@@ -18,7 +19,7 @@ const defaultArgs = {
   contents: [
     {
       text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
     },
   ],
 };
@@ -56,7 +57,7 @@ describe("#Hero without content and subtitle", () => {
   it("should render the title only", () => {
     const props = {
       image: {
-        url: "https://source.unsplash.com/random/800x400?a=1",
+        url: img1,
         altText: "Hero image",
         size: "small",
       },

packages/unity-react-core/src/components/Image/Image.stories.jsx

@@ -1,6 +1,10 @@
 // @ts-check
 import React from "react";
 
+import img1 from "../../../../../shared/assets/img/named/img001.jpg";
+import img2 from "../../../../../shared/assets/img/named/img002.jpg";
+import img3 from "../../../../../shared/assets/img/named/img003.jpg";
+import img4 from "../../../../../shared/assets/img/named/img004.jpg";
 import { Image } from "./Image";
 
 export default {
@@ -20,21 +24,21 @@ const Template = args => <Image {...args} />;
 
 export const ImageWithNoCaption = Template.bind({});
 ImageWithNoCaption.args = {
-  src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+  src: img1,
   alt: "Placeholder image",
   border: true,
 };
 
 export const ImageWithNoCaptionBorderless = Template.bind({});
 ImageWithNoCaptionBorderless.args = {
-  src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+  src: img1,
   alt: "Placeholder image",
   border: false,
 };
 
 export const ImageWithCaption = Template.bind({});
 ImageWithCaption.args = {
-  src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+  src: img2,
   alt: "Placeholder image",
   caption: "This is a <a href='#'>caption</a>.",
   captionTitle: "Caption title",
@@ -43,7 +47,7 @@ ImageWithCaption.args = {
 
 export const ImageWithCaptionAndDropshadow = Template.bind({});
 ImageWithCaptionAndDropshadow.args = {
-  src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+  src: img3,
   alt: "Placeholder image",
   caption: "This is a <a href='#'>caption</a>.",
   captionTitle: "Caption title",
@@ -72,5 +76,5 @@ export const GridImages = GridTemplate.bind({});
 GridImages.args = {
   alt: "Placeholder image",
   width: "100%",
-  src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+  src: img4,
 };

packages/unity-react-core/src/components/Image/Image.test.jsx

@@ -2,6 +2,7 @@ import { render, cleanup } from "@testing-library/react";
 import React from "react";
 import { expect, describe, it, afterEach, beforeEach } from "vitest";
 
+import img from "../../../../../shared/assets/img/named/img001.jpg";
 import { Image } from "./Image";
 
 const renderImage = props => {
@@ -13,7 +14,7 @@ describe("#Image", () => {
 
   beforeEach(() => {
     component = renderImage({
-      src: "https://source.unsplash.com/WLUHO9A_xik/800x600",
+      src: img,
       alt: "Placeholder image",
     });
   });

packages/unity-react-core/src/components/Pagination/Pagination.stories.jsx

@@ -11,14 +11,14 @@ export default {
     docs: {
       description: {
         component: `The Pagintaion component can be used to generate pagination.
-        ## Usage
+## Usage
 
-        All props are valid options for all pagination types.
-        Pagination users are responsible to meet all UDS design guidelines with their Pagination,
-        including rules on the use of Call-to-Action buttons and tags.
+All props are valid options for all pagination types.
+Pagination users are responsible to meet all UDS design guidelines with their Pagination,
+including rules on the use of Call-to-Action buttons and tags.
 
-        View component examples and source code below.
-        `,
+View component examples and source code below.
+`,
       },
     },
   },