@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

package/src/components/Atoms/StoryElements/Summary/summary.m.css

@@ -0,0 +1,121 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.headline {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content p {
+  font-style: italic;
+}
+
+.summary:global(.arrow-component) .content > p,
+.summary-header:global(.arrow-component) .content > p,
+.summary-border:global(.arrow-component) .content > p,
+.dark {
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-dark);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content.light > p,
+.summary-header:global(.arrow-component) .content.light > p,
+.summary-border:global(.arrow-component) .content.light > p {
+  color: var(--arrow-c-light);
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+/* default template */
+.summary .headline {
+  margin-bottom: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+/* headline template */
+.summary-header .headline {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-s);
+  font-size: var(--arrow-fs-s);
+  background-color: var(--arrow-c-brand1);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  }
+}
+.summary-header .content {
+  background-color: var(--arrow-c-invert-mono7);
+  padding: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+/* border template */
+.summary-border .heading-wrapper {
+  display: flex;
+  margin-bottom: -22px;
+}
+
+.summary-border .heading-wrapper::before {
+  content: " ";
+  position: relative;
+  width: var(--arrow-spacing-m);
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+}
+
+.summary-border .heading-wrapper.light::before {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .heading-wrapper::after {
+  content: " ";
+  position: relative;
+  flex: 1 1 auto;
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+  margin-right: 0;
+}
+
+.summary-border .heading-wrapper.light::after {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .content {
+  border: 1px solid var(--arrow-c-dark);
+  border-top: none;
+  padding: var(--arrow-spacing-l);
+}
+
+.summary-border .content.light {
+  border: 1px solid var(--arrow-c-light);
+}
+.summary-border .headline {
+  background-color: var(--arrow-c-brand1);
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  line-height: var(--arrow-lh-4);
+  border-radius: 2px;
+  margin: 0 var(--arrow-spacing-xs);
+}
+
+.summary-border .content-border.dark {
+  border: 1px solid var(--arrow-c-mono5);
+}
+
+.summary-border .content-border.light {
+  border: 1px solid var(--arrow-c-invert-mono5);
+}

package/src/components/Atoms/StoryElements/Summary/summary.test.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import expect from "expect";
+import { generateStoryElementData } from "../../../Fixture";
+import { Summary } from "./index";
+
+const element = generateStoryElementData("summary");
+
+describe("Summary Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(<Summary element={element} />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary/);
+  });
+
+  it("Should render border left template", () => {
+    const wrapper = mount(<Summary element={element} template="header" />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary-header/);
+  });
+
+  it("Should render border top template", () => {
+    const wrapper = mount(<Summary element={element} template="border" />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary-border/);
+  });
+
+  it("Should render template without headline", () => {
+    const wrapper = shallow(<Summary element={element} opts={{ hideHeadline: true }} />);
+    expect(wrapper.find({ "data-test-id": "summary-headline" }).length).toEqual(0);
+  });
+
+  it("Should render template with custom headline", () => {
+    const wrapper = mount(<Summary element={element} opts={{ headline: "in short" }} />);
+    expect(wrapper.find({ "data-test-id": "summary-headline" }).text()).toEqual("in short");
+  });
+
+  it("Should render template with header background color", () => {
+    const wrapper = mount(<Summary element={element} template="header" css={{ headerBgColor: " #b3243e" }} />);
+    expect(wrapper.html()).toBe(
+      `<div data-test-id="summary" class="arrow-component arr--summary-element arr-custom-style summary-m_summary-header__UKVHi "><div data-test-id="summary-headline" class="summary-m_heading-wrapper__23S51 summary-m_dark__1ZuzR"><div style="background-color: rgb(179, 36, 62);" class="summary-m_headline__30sie summary-m_dark__1ZuzR summary-m_dark__1ZuzR">Summary</div></div><div class="summary-m_content__37n8C summary-m_dark__1ZuzR"><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div>`
+    );
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(<Summary element={element} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      "<h3><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></h3>"
+    );
+  });
+});

package/src/components/Atoms/StoryElements/Text/README.md

@@ -0,0 +1,32 @@
+# Text Story Element
+
+Displays the text story element of the story
+
+## Usage
+
+#### Default text story element
+```jsx
+<Text element={element} />
+```
+
+#### Text story element with external links opening in new tab
+```jsx
+const opts = { isExternalLink: true };
+
+<Text element={element} opts={opts} />
+```
+
+#### Text story element as promotional message
+```jsx
+const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+<Text element={promotionalMessage} opts={opts} />
+```
+
+#### Replace default text story element template with custom template passed using render
+```jsx
+const customTemplate = ({element}) => <h3 dangerouslySetInnerHTML={{ __html: element.text }}/>;
+
+<Text element={element} render={customTemplate} />
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/Text/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { withElementWrapper } from "../withElementWrapper";
+import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import "./text.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const TextBase = ({ element = {}, opts = {}, css = {}, story = {}, config = {}, ...restProps }) => {
+  const content = element.text;
+  if (!content) return null;
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { textColor } = css;
+  const { isExternalLink = true } = opts;
+  const text = (isExternalLink && updateContentLinks(content)) || content;
+  const isPromotionalMessage = get(element, ["metadata", "promotional-message"], false);
+  const updatedStyle = isPromotionalMessage ? "promotionalMessage" : "textElement";
+
+  return (
+    <div
+      className="arrow-component arr--text-element"
+      styleName={`${updatedStyle} ${textInvertColor}`}
+      style={!isPromotionalMessage ? { color: textColor } : {}}
+      data-test-id={isPromotionalMessage ? "promotional-message" : "text"}
+      dangerouslySetInnerHTML={{ __html: text }}
+      id="text-element"
+      {...restProps}
+    />
+  );
+};
+
+TextBase.propTypes = {
+  element: PropTypes.shape({ text: PropTypes.string }),
+  opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
+  css: PropTypes.shape({ hyperlinkColor: PropTypes.string, textColor: PropTypes.string }),
+  story: shapeStory,
+  config: shapeConfig
+};
+
+export const Text = withElementWrapper(TextBase);

package/src/components/Atoms/StoryElements/Text/stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Text } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("text");
+
+withStore("Atoms/Story Elements/Text", {}, Readme)
+  .add("Default", () => (
+    <Text
+      element={element}
+      opts={{ isExternalLink: boolean("External Link", true) }}
+      css={{ hyperlinkColor: color("Hyperlink Color", "#ff214b"), textColor: color("Text Color", "#000") }}
+    />
+  ))
+  .add("Promotional Message", () => {
+    const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+    return (
+      <Text
+        element={promotionalMessage}
+        opts={{ isExternalLink: boolean("External Link", true) }}
+        css={{ hyperlinkColor: color("Hyperlink Color", "#ff214b") }}
+      />
+    );
+  })
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <Text element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Text/text.m.css

@@ -0,0 +1,48 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.promotionalMessage p {
+  font-size: var(--arrow-fs-tiny);
+  padding-bottom: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+    padding-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.textElement p,
+.dark {
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.promotionalMessage a,
+.textElement a {
+  color: var(--textElementHyperlinkColor);
+}
+
+.textElement a:hover {
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+  transition: border 0.3s ease;
+}
+
+.textElement.light p {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.promotionalMessage a:hover {
+  color: var(--arrow-c-brand1);
+  border-bottom: 1px solid;
+  padding-bottom: 3px;
+  transition: all 0.3s ease 0s;
+}
+
+.promotionalMessage.dark p {
+  color: var(--arrow-c-mono4);
+}
+.promotionalMessage.light p {
+  color: var(--arrow-c-invert-mono4);
+}

package/src/components/Atoms/StoryElements/Text/text.test.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { Text } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("text");
+
+describe("Text Story Element", () => {
+  it("should render default template", () => {
+    const wrapper = mount(<Text element={element} />);
+    expect(wrapper.find({ "data-test-id": "text" }).prop("className")).toMatch(/text-element/);
+  });
+
+  it("should render promotional message when it is enabled", () => {
+    const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+    const wrapper = mount(<Text element={promotionalMessage} />);
+    expect(wrapper.find({ "data-test-id": "promotional-message" }).prop("className")).toMatch(/promotionalMessage/);
+  });
+
+  it("should render default template with external link", () => {
+    const wrapper = shallow(<Text opts={{ isExternalLink: true }} element={element} />);
+    expect(wrapper.html()).toBe(
+      "<div data-test-id=\"text\" id=\"text-element\" class=\"arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 \"><p><a aria-label='content' target='_blank' href=\"https://www.theguardian.com/technology/virtual-reality\">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/stevenspielberg\">Steven Spielberg</a> 2019s <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/ready-player-one\">Ready Player One</a>.</p></div>"
+    );
+  });
+
+  it("should render default template without external link", () => {
+    const wrapper = shallow(<Text opts={{ isExternalLink: false }} element={element} />);
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="text" id="text-element" class="arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 "><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></div>'
+    );
+  });
+
+  it("should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(<Text element={element} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      '<h3><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></h3>'
+    );
+  });
+});

package/src/components/Atoms/StoryElements/Video/README.md

@@ -0,0 +1,9 @@
+# Video Story Element
+
+Video story element is a simple component used to display a video story.
+
+## Usage
+
+```jsx
+<Video element={element} />
+```

package/src/components/Atoms/StoryElements/Video/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { StoryElement } from "@quintype/components";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { shapeStory, shapeConfig } from "../../../../utils/utils";
+import "./video.m.css";
+
+const Videobase = ({ element, story = {}, config = {}, loadIframeOnClick = false, ...restProps }) => {
+  return (
+    <div styleName="container" {...restProps} data-test-id="video">
+      <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} />
+    </div>
+  );
+};
+
+Videobase.propTypes = {
+  element: PropTypes.object,
+  story: shapeStory,
+  config: shapeConfig,
+  loadIframeOnClick: PropTypes.bool
+};
+
+export const Video = withElementWrapper(Videobase);

package/src/components/Atoms/StoryElements/Video/stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Video } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const elementYoutube = generateStoryElementData("youtube-video");
+const elementDailyMotion = generateStoryElementData("dailymotion-video");
+const elementTwitter = generateStoryElementData("tweet");
+withStore(
+  "Atoms/Story Elements/Video",
+
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default with youtube video", () => <Video element={elementYoutube} />)
+  .add("Dailymotion video", () => <Video element={elementDailyMotion} />)
+  .add("Twitter video", () => <Video element={elementTwitter} />);

package/src/components/Atoms/StoryElements/Video/video.m.css

@@ -0,0 +1,3 @@
+.container iframe {
+  max-width: 100%;
+}

package/src/components/Atoms/StoryElements/Video/video.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Video } from ".";
+import { generateStoryElementData } from "../../../Fixture";
+import { StoryElement } from "@quintype/components";
+const element = generateStoryElementData("youtube-video");
+
+describe("Video Story Element", () => {
+  it("should render with correct elements", () => {
+    const wrapper = shallow(<Video element={element} />).dive();
+    expect(wrapper.find(StoryElement).length).toEqual(1);
+  });
+});

package/src/components/Atoms/StoryElements/imageGallery/README.md

@@ -0,0 +1,18 @@
+# Image Gallery Element
+
+Displays the image gallery story element of the story
+
+## Usage
+
+#### Default Image story element
+
+```jsx
+ <ImageGallery element={element}  />);
+```
+#### template (with 6 images and rest count on the last image for desktop and 4 images for mobile and rest count on last image) Image story element
+
+```jsx
+ <ImageGallery element={element} template="template-2" />);
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/imageGallery/image-gallery.m.css

@@ -0,0 +1,48 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: var(--arrow-spacing-xs);
+  }
+}
+
+.image-gallery figure,
+.image-gallery .image {
+  padding-top: 100%;
+}
+
+.image-gallery figure.image {
+  position: relative;
+  cursor: pointer;
+}
+
+.image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+.template-2 .left-images {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  font-size: var(--arrow-fs-l);
+  color: var(--arrow-c-light);
+}
+.left-images::before {
+  content: "+";
+}

package/src/components/Atoms/StoryElements/imageGallery/image-gallery.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import { ImageGallery } from ".";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+
+const element = generateStoryElementData("image-gallery");
+
+describe("Image Gallery Story Element", () => {
+  it("should render with correct elements", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <ImageGallery element={element} />
+      </Provider>
+    );
+    expect(wrapper.find(FullScreenImages).length).toEqual(1);
+  });
+});

package/src/components/Atoms/StoryElements/imageGallery/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ResponsiveImage } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+
+import { shapeStory, shapeConfig, clientWidth } from "../../../../utils/utils";
+
+import "./image-gallery.m.css";
+
+const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, config = {}, ...restProps }) => {
+  if (!element) return null;
+  const isMobile = clientWidth("mobile");
+  const imageArr = element["story-elements"];
+  const imageBaseOnTemp = template === "template-2" && imageArr.length;
+  const renderImageDesktop = imageBaseOnTemp > 6 ? imageArr.slice(0, 6) : imageArr;
+  const renderMobile = imageBaseOnTemp > 4 ? imageArr.slice(0, 4) : imageArr;
+  const renderImage = isMobile ? renderMobile : renderImageDesktop;
+  const classes = template === "template-2" ? "template-2" : "";
+
+  const LeftImages = () => {
+    const imageCountDesktop = imageBaseOnTemp > 6 && imageArr.length - 6;
+    const imageCountMobile = imageBaseOnTemp > 4 && imageArr.length - 4;
+    const imageCount = isMobile ? imageCountMobile : imageCountDesktop;
+    return <div styleName="left-images">{imageCount}</div>;
+  };
+
+  const ImageGalleryImagesTemplate = ({ onClickHandler }) => {
+    const images = renderImage.map((image, index) => (
+      <figure
+        key={index}
+        data-text-id={`image-${index}`}
+        styleName={`image ${classes}`}
+        onClick={() => onClickHandler && onClickHandler(index)}>
+        <ResponsiveImage
+          slug={image["image-s3-key"]}
+          metadata={image["image-metadata"]}
+          alt={image["title"]}
+          aspectRatio={[1, 1]}
+          defaultWidth={640}
+          imgParams={{ auto: ["format", "compress"] }}
+        />
+        {renderImage.length - 1 === index && <LeftImages />}
+      </figure>
+    ));
+    return (
+      <div
+        styleName="image-gallery"
+        className=" arrow-component arr--image-element"
+        {...restProps}
+        data-test-id="image-gallery">
+        {images}
+      </div>
+    );
+  };
+
+  ImageGalleryImagesTemplate.propTypes = {
+    onClickHandler: PropTypes.func
+  };
+
+  return <FullScreenImages template={ImageGalleryImagesTemplate} element={element} />;
+};
+
+ImageGalleryBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.array
+  }),
+  opts: PropTypes.shape({ imageWidths: PropTypes.array }),
+  story: shapeStory,
+  config: shapeConfig,
+  template: PropTypes.string
+};
+
+export const ImageGallery = withElementWrapper(ImageGalleryBase);

package/src/components/Atoms/StoryElements/imageGallery/stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { ImageGallery } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("image-gallery");
+const imgaeGalleryTemplate = {
+  default: "",
+  template2: "template-2"
+};
+
+withStore(
+  "Atoms/Story Elements/Image gallery",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("Default", () => <ImageGallery element={element} template={optionalSelect("templates", imgaeGalleryTemplate)} />);

package/src/components/Atoms/StoryElements/withElementWrapper.js

@@ -0,0 +1,13 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const withElementWrapper = (StoryElement) => (props) => {
+  const { element, render, ...restProps } = props;
+  if (!element) return null;
+  if (render && typeof render === "function") return render(props);
+  return <StoryElement {...restProps} element={element} />;
+};
+
+withElementWrapper.propTypes = {
+  StoryElement: PropTypes.element
+};