From 7af938b2d51efbea254158ad3a358d8d0df590c9 Mon Sep 17 00:00:00 2001 From: Stephen Marsh Date: Mon, 3 Jan 2022 14:33:26 -0500 Subject: [PATCH] refactor content card stories to use controls instead of knobs --- .storybook/helpers/index.js | 14 ++- .storybook/helpers/srcSet.js | 8 ++ .../card/content-card/content-card.stories.js | 119 +++++++----------- .../image-container.stories.js | 21 +--- src/components/tile/tile.stories.js | 7 +- src/global/lazyload/lazyload.stories.js | 5 +- 6 files changed, 77 insertions(+), 97 deletions(-) create mode 100644 .storybook/helpers/srcSet.js diff --git a/.storybook/helpers/index.js b/.storybook/helpers/index.js index 0ba4eeec..630f3c18 100644 --- a/.storybook/helpers/index.js +++ b/.storybook/helpers/index.js @@ -5,5 +5,17 @@ import idHelper from "./idHelper"; import parentWrapper from "./parentWrapper"; import repeat from "./repeat"; import scalingRuleWrapper from "./scalingRuleWrapper"; +import srcSet from "./srcSet"; + +export { + backgroundOverride, + exampleComponent, + idHelper, + html, + parentWrapper, + repeat, + scalingRuleWrapper, + srcSet + }; + -export { backgroundOverride, exampleComponent, idHelper, html, parentWrapper, repeat, scalingRuleWrapper }; diff --git a/.storybook/helpers/srcSet.js b/.storybook/helpers/srcSet.js new file mode 100644 index 00000000..f388482b --- /dev/null +++ b/.storybook/helpers/srcSet.js @@ -0,0 +1,8 @@ +export default (srcSet) => { + const widths = Object.keys(srcSet.sizes); + return widths + .map((width) => { + return `${srcSet.sizes[width]} ${width},`; + }) + .join("\n"); +}; \ No newline at end of file diff --git a/src/components/card/content-card/content-card.stories.js b/src/components/card/content-card/content-card.stories.js index d69b0647..6d26a953 100644 --- a/src/components/card/content-card/content-card.stories.js +++ b/src/components/card/content-card/content-card.stories.js @@ -1,105 +1,76 @@ -import { html } from ".storybook/helpers"; -import { withKnobs, text, boolean, number } from "@storybook/addon-knobs"; - +import { html, srcSet} from ".storybook/helpers"; import scssExports from "../../../global/exports.scss"; - -import image768 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg"; -import image960 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg"; -import image1440 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg"; -import image2160 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-2160.jpg"; - -const imageWidth = 3920; -const imageHeight = 2621; +import image from ".storybook/assets/images/full-width-image"; export default { - decorators: [withKnobs], title: "Cards/Content Card", + args: { + cardMode: "", + index: 0, + heading: { + withHeading: true, + headingLink: true, + headingText: "Heading Text That Can Extend to Three Lines Maximum, Character Count 100", + }, + tagText: "", + description: "This illustrated volume presents a comprehensive overview of the Sahel's diverse cultural traditions.Order yours today." + } }; -const Heading = (index) => { - return html` ${text( - "Heading", - "Heading Text That Can Extend to Three Lines Maximum, Character Count 100", - `Card ${index}` - )}`; -}; - -const HeadingWithLink = (index) => { - return html` ${Heading(index)}`; -}; - -const srcSet = `${image768} 768w, -${image960} 960w, -${image1440} 1440w, -${image2160} 2160w`; - -const ContentCardTemplate = (cardMode = "", index = "", withHeading = true) => { - return html` -
+const ContentCardTemplate = (args) => html` +
- An image alt, for accessibility + An image alt, for accessibility
- ${text("Tag Text", "tag text", `Card ${index}`)} + ${args.tagText ? args.tagText : `Card ${args.index}`}
- ${withHeading ? html` + ${args.heading.withHeading ? html`

- ${boolean("Heading Is A Link?", true, `Card ${index}`) - ? HeadingWithLink(index) - : Heading(index)} + ${args.heading.headingLink ? html`${args.heading.headingText}` : args.heading.headingText}

` : ""}

- ${text("Description", `This illustrated volume presents a comprehensive overview of the Sahel's diverse cultural - traditions. Order yours today.`, `Card ${index}`)} + ${args.description ? args.description : `Card ${args.index} description.`}

`; -}; -const ContentCard = () => { - return ContentCardTemplate(); -}; -const ContentCards = () => { - const cardCount = number("Card Count", 2, { range: true, min: 2, max: 4 }); - const cards = Array.apply(null, Array(cardCount)).map((card, index) => - ContentCardTemplate("has-border", index + 1) - ); - return html`
- ${cards.reduce((total, card) => total + card, "")} +export const ContentCard = (args) => ContentCardTemplate(args); + +export const ContentCards = (args) => html` +
+ ${ [...Array(args.cardCount).keys()] + .map((index) => ContentCardTemplate({ ...args, index: (index + 1) })) + .join("\n") +}
`; -}; -const TwoUpContentCard = () => { - return ContentCardTemplate("two-up"); +ContentCards.args = { + cardCount: 2, + cardMode: "has-border" }; -const TwoUpContentCardMixedHeadings = () => html` +export const TwoUpContentCard = (args) => ContentCardTemplate(args); +TwoUpContentCard.args = {cardMode: "two-up"}; + +export const TwoUpContentCardMixedHeadings = (args) => html`
- ${ContentCardTemplate("two-up", 1, false)} - ${ContentCardTemplate("two-up", 2, true)} + ${ContentCardTemplate({...args, index: 1, heading: {withHeading: false}})} + ${ContentCardTemplate({...args, index: 2})}
`; -const ThreeUpContentCard = () => { - return ContentCardTemplate("three-up"); -}; - -const ProductiveContentCard = () => { - return ContentCardTemplate("content-card--productive"); +export const ThreeUpContentCard = (args) => ContentCardTemplate(args); +ThreeUpContentCard.args = { + cardMode: "three-up" }; -export { - ContentCard, - ContentCards, - ThreeUpContentCard, - TwoUpContentCard, - TwoUpContentCardMixedHeadings, - ProductiveContentCard, -}; +export const ProductiveContentCard = (args) => ContentCardTemplate(args); +ProductiveContentCard.args = { + cardMode: "content-card--productive" +}; \ No newline at end of file diff --git a/src/components/image-container/image-container.stories.js b/src/components/image-container/image-container.stories.js index c34bb6b3..15b93025 100644 --- a/src/components/image-container/image-container.stories.js +++ b/src/components/image-container/image-container.stories.js @@ -1,20 +1,11 @@ -import { html } from ".storybook/helpers"; +import { html, srcSet } from ".storybook/helpers"; import defaultImage from ".storybook/assets/images/full-width-image"; export default { title: "Image Containers", - includeStories: ["fullWidth", "halfWidth", "lazyLoaded"], - excludeStories: "sizesTemplate" + includeStories: ["fullWidth", "halfWidth", "lazyLoaded"] }; -const sizesTemplate = (srcSet) => { - const widths = Object.keys(srcSet.sizes); - return widths - .map((width) => { - return `${srcSet.sizes[width]} ${width},`; - }) - .join("\n"); -}; const fullWidth = () => { // Don't forget alt attribute. @@ -29,7 +20,7 @@ const fullWidth = () => { width="${image.width}" height="${image.height}" src="${image.srcSet.fallback}" - srcset="${sizesTemplate(image.srcSet)}" + srcset="${srcSet(image.srcSet)}" sizes="100vw" />
@@ -47,7 +38,7 @@ const halfWidth = () => { width="${image.width}" height="${image.height}" src="${image.srcSet.fallback}" - srcset="${sizesTemplate(image.srcSet)}" + srcset="${srcSet(image.srcSet)}" sizes="50vw" /> @@ -75,11 +66,11 @@ const lazyLoaded = () => { width="${image.width}" height="${image.height}" data-src="${image.srcSet.fallback}" - data-srcset="${sizesTemplate(image.srcSet)}" + data-srcset="${srcSet(image.srcSet)}" data-sizes="100vw" /> `; }; -export { fullWidth, halfWidth, lazyLoaded, sizesTemplate }; +export { fullWidth, halfWidth, lazyLoaded }; diff --git a/src/components/tile/tile.stories.js b/src/components/tile/tile.stories.js index d2f2a79d..f33a44ac 100644 --- a/src/components/tile/tile.stories.js +++ b/src/components/tile/tile.stories.js @@ -1,5 +1,4 @@ -import { html, repeat } from ".storybook/helpers"; -import { sizesTemplate } from "../image-container/image-container.stories"; +import { html, repeat, srcSet } from ".storybook/helpers"; import greekHall from ".storybook/assets/images/greek-hall"; const { image16x9 } = greekHall; @@ -20,7 +19,7 @@ const Tile = (args) => html`
${args.link ? html`` : ""} ${args.image16x9.alt} + src="${image16x9.srcSet.fallback}" srcset="${srcSet(image16x9.srcSet)}" sizes="(orientation: landscape) 21vw, 50vw" />

${args.link ? html`${args.heading}` : args.heading}

@@ -34,7 +33,7 @@ const HeroTile = (args) => html`
${args.link ? html`` : ""} ${image16x9.alt} + src="${image16x9.srcSet.fallback}" srcset="${srcSet(image16x9.srcSet)}" sizes="(orientation: landscape) 42.5vw, 85vw" />

${args.link ? html`${args.heading}` : args.heading}

diff --git a/src/global/lazyload/lazyload.stories.js b/src/global/lazyload/lazyload.stories.js index c065d7cb..edb8c277 100644 --- a/src/global/lazyload/lazyload.stories.js +++ b/src/global/lazyload/lazyload.stories.js @@ -1,6 +1,5 @@ -import { html } from ".storybook/helpers"; +import { html, srcSet } from ".storybook/helpers"; import defaultImage from ".storybook/assets/images/full-width-image"; -import { sizesTemplate } from "../../components/image-container/image-container.stories"; export default { title: "Elements/Images/Lazyloaded" @@ -16,7 +15,7 @@ const loadedImage = () => { alt="${image.alt}" width="${image.width}" height="${image.height}" - srcset="${sizesTemplate(image.srcSet)}" + srcset="${srcSet(image.srcSet)}" sizes="100vw" />