diff --git a/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx b/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx index c4f8e5bf8d..0fb3f769a3 100644 --- a/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx +++ b/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. `, }, }, diff --git a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.stories.jsx b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.stories.jsx index 590aa2044f..e03cf494ec 100644 --- a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.stories.jsx +++ b/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. `, }, }, diff --git a/packages/unity-react-core/src/components/Article/Article.stories.jsx b/packages/unity-react-core/src/components/Article/Article.stories.jsx index 1ca69148d1..38e663d88f 100644 --- a/packages/unity-react-core/src/components/Article/Article.stories.jsx +++ b/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", diff --git a/packages/unity-react-core/src/components/Article/Article.test.jsx b/packages/unity-react-core/src/components/Article/Article.test.jsx index 15fbba2ce1..c2e3bed56b 100644 --- a/packages/unity-react-core/src/components/Article/Article.test.jsx +++ b/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", diff --git a/packages/unity-react-core/src/components/Card/Card.stories.jsx b/packages/unity-react-core/src/components/Card/Card.stories.jsx index 32d0bd0d65..2965c478b0 100644 --- a/packages/unity-react-core/src/components/Card/Card.stories.jsx +++ b/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: "(Bold!) Body copy goes here. 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: "(Bold!) Body copy goes here. 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 = { (Bold!) Body copy goes here. 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: "(Bold!) Body copy goes here. 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 = { (Bold!) Body copy goes here. 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" diff --git a/packages/unity-react-core/src/components/Hero/Hero.stories.jsx b/packages/unity-react-core/src/components/Hero/Hero.stories.jsx index caab92fb15..0d783bfca2 100644 --- a/packages/unity-react-core/src/components/Hero/Hero.stories.jsx +++ b/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", }, diff --git a/packages/unity-react-core/src/components/Hero/Hero.test.jsx b/packages/unity-react-core/src/components/Hero/Hero.test.jsx index b58450550a..6f178f5ba2 100644 --- a/packages/unity-react-core/src/components/Hero/Hero.test.jsx +++ b/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", }, diff --git a/packages/unity-react-core/src/components/Image/Image.stories.jsx b/packages/unity-react-core/src/components/Image/Image.stories.jsx index a11f1ba006..d9790007a7 100644 --- a/packages/unity-react-core/src/components/Image/Image.stories.jsx +++ b/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 => ; 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 caption.", 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 caption.", 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, }; diff --git a/packages/unity-react-core/src/components/Image/Image.test.jsx b/packages/unity-react-core/src/components/Image/Image.test.jsx index eeb21d0275..d026d2a5dc 100644 --- a/packages/unity-react-core/src/components/Image/Image.test.jsx +++ b/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", }); }); diff --git a/packages/unity-react-core/src/components/Pagination/Pagination.stories.jsx b/packages/unity-react-core/src/components/Pagination/Pagination.stories.jsx index 7a10fe852a..9e322a6f28 100644 --- a/packages/unity-react-core/src/components/Pagination/Pagination.stories.jsx +++ b/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. +`, }, }, }, diff --git a/packages/unity-react-core/src/components/RankingCard/RankingCard.stories.jsx b/packages/unity-react-core/src/components/RankingCard/RankingCard.stories.jsx index 127251399b..2e2e8e1b96 100644 --- a/packages/unity-react-core/src/components/RankingCard/RankingCard.stories.jsx +++ b/packages/unity-react-core/src/components/RankingCard/RankingCard.stories.jsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { imageAny } from "../../../../../shared/assets"; +import img from "../../../../../shared/assets/img/named/img001.jpg"; import { RankingCard } from "./RankingCard"; export default { @@ -22,7 +22,7 @@ const Template = args => ( export const Large = Template.bind({}); Large.args = { imageSize: "large", - image: imageAny(), + image: img, imageAlt: "Image alt text", heading: "Ranking title goes here, under the photo", body: "ASU has topped U.S. News & World Report’s “Most Innovative Schools list since the inception of the category in 2016. ASU again placed ahead of Stanford and MIT on the list, based on a survey of peers. College presidents, provosts and admissions deans around the country nominated up to 10 colleges or universities that are making the most innovative improvements.", @@ -32,7 +32,7 @@ Large.args = { export const Small = Template.bind({}); Small.args = { imageSize: "small", - image: imageAny(), + image: img, imageAlt: "Image alt text", heading: "Ranking title goes here, under the photo", body: "ASU has topped U.S. News & World Report’s “Most Innovative Schools list since the inception of the category in 2016. ASU again placed ahead of Stanford and MIT on the list, based on a survey of peers. College presidents, provosts and admissions deans around the country nominated up to 10 colleges or universities that are making the most innovative improvements.", diff --git a/packages/unity-react-core/src/components/RankingCard/RankingCard.test.jsx b/packages/unity-react-core/src/components/RankingCard/RankingCard.test.jsx index c589fc32bc..65f2c165cb 100644 --- a/packages/unity-react-core/src/components/RankingCard/RankingCard.test.jsx +++ b/packages/unity-react-core/src/components/RankingCard/RankingCard.test.jsx @@ -2,11 +2,12 @@ import { render, fireEvent, 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 { RankingCard } from "./RankingCard"; const rankingCardLarge = { imageSize: "large", - image: "https://source.unsplash.com/WLUHO9A_xik/600x400", + image: img, imageAlt: "Image alt text", heading: "Ranking title goes here, under the photo", body: "ASU has topped U.S. News & World Report’s “Most Innovative Schools list since the inception of the category in 2016. ASU again placed ahead of Stanford and MIT on the list, based on a survey of peers. College presidents, provosts and admissions deans around the country nominated up to 10 colleges or universities that are making the most innovative improvements.", @@ -15,7 +16,7 @@ const rankingCardLarge = { const rankingCardSmall = { imageSize: "small", - image: "https://source.unsplash.com/WLUHO9A_xik/600x400", + image: img, imageAlt: "Image alt text", heading: "Ranking title goes here, under the photo", body: "ASU has topped U.S. News & World Report’s “Most Innovative Schools list since the inception of the category in 2016. ASU again placed ahead of Stanford and MIT on the list, based on a survey of peers. College presidents, provosts and admissions deans around the country nominated up to 10 colleges or universities that are making the most innovative improvements.", diff --git a/packages/unity-react-core/src/components/Testimonial/Testimonial.stories.jsx b/packages/unity-react-core/src/components/Testimonial/Testimonial.stories.jsx index c56b1e8bab..966fba2c3f 100644 --- a/packages/unity-react-core/src/components/Testimonial/Testimonial.stories.jsx +++ b/packages/unity-react-core/src/components/Testimonial/Testimonial.stories.jsx @@ -2,6 +2,7 @@ // @ts-check import React from "react"; +import img from "../../../../../shared/assets/img/named/img006.jpg"; import { Testimonial } from "./Testimonial"; export default { @@ -87,7 +88,7 @@ WithImage.args = { name: `Han Solo`, }, }, - imageSource: "https://source.unsplash.com/WLUHO9A_xik/400x400", + imageSource: img, imageAltText: "Pretend this is Han Solo", itemStyle: { containerCssClass: itemColorCombinations.Gold, @@ -118,7 +119,7 @@ WithCitation.args = { description: `ASU Charter`, }, }, - imageSource: "https://source.unsplash.com/WLUHO9A_xik/400x400", + imageSource: img, imageAltText: "Pretend this is Michael M. Crow, President of ASU", itemStyle: { containerCssClass: itemColorCombinations.Gold, @@ -132,7 +133,7 @@ HightlightGold.args = { content: "Laughter is timeless, imagination has no age, dreams are forever.", }, - imageSource: "https://source.unsplash.com/WLUHO9A_xik/300x300", + imageSource: img, imageAltText: "Image of Walt DisneyImage of Walt Disney", itemStyle: { containerCssClass: itemColorCombinations.Gold, diff --git a/shared/assets/img/named/img001.jpg b/shared/assets/img/named/img001.jpg new file mode 100644 index 0000000000..a56f45d157 Binary files /dev/null and b/shared/assets/img/named/img001.jpg differ diff --git a/shared/assets/img/named/img002.jpg b/shared/assets/img/named/img002.jpg new file mode 100644 index 0000000000..74f78880b4 Binary files /dev/null and b/shared/assets/img/named/img002.jpg differ diff --git a/shared/assets/img/named/img003.jpg b/shared/assets/img/named/img003.jpg new file mode 100644 index 0000000000..e43bc6391b Binary files /dev/null and b/shared/assets/img/named/img003.jpg differ diff --git a/shared/assets/img/named/img004.jpg b/shared/assets/img/named/img004.jpg new file mode 100644 index 0000000000..0326a48256 Binary files /dev/null and b/shared/assets/img/named/img004.jpg differ diff --git a/shared/assets/img/named/img005.jpg b/shared/assets/img/named/img005.jpg new file mode 100644 index 0000000000..46835dbe35 Binary files /dev/null and b/shared/assets/img/named/img005.jpg differ diff --git a/shared/assets/img/named/img006.jpg b/shared/assets/img/named/img006.jpg new file mode 100644 index 0000000000..4147e88ccf Binary files /dev/null and b/shared/assets/img/named/img006.jpg differ diff --git a/shared/assets/img/named/img007.jpg b/shared/assets/img/named/img007.jpg new file mode 100644 index 0000000000..1e00058f3d Binary files /dev/null and b/shared/assets/img/named/img007.jpg differ