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

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Image } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("image");
+
+withStore(
+  "Atoms/Story Elements/Image",
+  {
+    qt: {
+      config: {
+        "cdn-image": "gumlet.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default", () => <Image element={element} />)
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <p>{element.title}</p>;
+    return <Image element={element} render={customTemplate} />;
+  });

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

@@ -0,0 +1,13 @@
+# ImageSlideshow
+
+Displays the image slideshow/carousel story element.
+
+## Usage
+
+#### Default ImageSlideshow element
+
+```jsx
+ <ImageSlideshow element={element}  />);
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css

@@ -0,0 +1,49 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.slide {
+  position: relative;
+}
+
+.slideshow {
+  @include mobile {
+    width: 90vw;
+    margin: 0 auto;
+  }
+}
+
+.caption {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: var(--arrow-c-light);
+}
+
+.slideshow figure {
+  padding-top: 56.65%;
+  position: relative;
+  margin: 0;
+}
+
+.image-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to top, rgba(var(--arrow-c-dark), 0.5), transparent 70%, transparent);
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,63 @@
+import { LazyLoadImages, ResponsiveImage } from "@quintype/components";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import React from "react";
+import { shapeStory } from "../../../../utils/utils";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+import { withElementWrapper } from "../withElementWrapper";
+import { ScrollSnap } from "../../ScrollSnap";
+import "./image-slideshow.m.css";
+
+const ImageSlideshowBase = (props) => {
+  if (!props.element) return null;
+
+  const Slide = (image, index, onClickHandler) => {
+    const { id, "image-s3-key": imageS3Key, metadata, title } = image;
+    return (
+      <div onClick={() => onClickHandler(index)} styleName="slide" key={id}>
+        <figure key={id} styleName="image-container">
+          <LazyLoadImages margin={"0px"}>
+            <ResponsiveImage
+              slug={imageS3Key}
+              metadata={metadata}
+              aspect-ratio={[16, 9]}
+              defaultWidth={480}
+              widths={[250, 480, 640]}
+              imgParams={{ auto: ["format", "compress"] }}
+              styleName="image"
+              alt={title}
+            />
+          </LazyLoadImages>
+        </figure>
+        <p styleName="caption">{title}</p>
+      </div>
+    );
+  };
+
+  const ImageSlideshowTemplate = ({ onClickHandler }) => {
+    const storyElements = get(props, ["element", "story-elements"], []);
+
+    return (
+      <div className="arr--image-slideshow-element" styleName="slideshow" data-test-id="image-slideshow">
+        <ScrollSnap slideIndicator={"none"}>
+          {storyElements.map((image, index) => Slide(image, index, onClickHandler))}
+        </ScrollSnap>
+      </div>
+    );
+  };
+
+  ImageSlideshowTemplate.propTypes = {
+    onClickHandler: PropTypes.func
+  };
+
+  return <FullScreenImages template={ImageSlideshowTemplate} element={props.element} />;
+};
+
+ImageSlideshowBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.array
+  }),
+  story: shapeStory
+};
+
+export const ImageSlideshow = withElementWrapper(ImageSlideshowBase);

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import { ImageSlideshow } from "./index";
+import Readme from "./README.md";
+
+const element = generateStoryElementData("image-gallery");
+
+withStore(
+  "Atoms/Story Elements/Image Slideshow",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("Default", () => <ImageSlideshow element={element} />);
+
+withStore(
+  "Atoms/Story Elements/Image Slideshow",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        language: {
+          direction: "rtl"
+        }
+      }
+    }
+  },
+  Readme
+).add("Support Rtl", () => <ImageSlideshow element={element} />);

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

@@ -0,0 +1,56 @@
+# Question & Answer / Question / Answer
+
+Displays the question & answer/ question/ answer story element of the story
+
+## Usage
+
+#### Question & Answer/ Question/ Answer story element with default template
+
+```jsx
+const opts = { type: "q-and-a / question / answer" };
+
+<QuestionAnswer element={element} template="default" opts={opts} />;
+```
+
+#### Question & Answer/ Question/ Answer story element with author image
+
+```jsx
+const opts = { type: "q-and-a / question / answer" };
+
+<QuestionAnswer element={element} template="withAuthorImage" opts={opts} />;
+```
+
+#### Question & Answer/ Question/ Answer story element with external links opening in new tab
+
+```jsx
+const opts = { isExternalLink: true, type: "q-and-a / question / answer" };
+
+<QuestionAnswer element={element} template="default" opts={opts} />;
+```
+
+#### Question & Answer/ Question/ Answer story element with icon type for default template
+
+```jsx
+const opts = { defaultIconType: "curve", type: "q-and-a / question / answer" };
+
+<QuestionAnswer element={element} template="default" opts={opts} />;
+```
+
+#### Question & Answer/ Question/ Answer story element with icon color
+
+```jsx
+const opts = { type: "q-and-a / question / answer" };
+const css = {iconColor: "#ffff"}
+
+<QuestionAnswer element={element} template="default" opts={opts} css={css}/>;
+```
+
+#### Replace default question & answer/ question/ answer element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<QuestionAnswer element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,134 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { shapeConfig, shapeStory, updateContentLinks, getTextColor } from "../../../../utils/utils";
+import { withElementWrapper } from "../withElementWrapper";
+import "./question-answer.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const supportedTemplates = (type, element) => {
+  switch (type) {
+    case "q-and-a":
+      const { question: qaQuestion, answer: qaAnswer } = get(element, ["metadata"]);
+      const qaQuestionAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
+      const qaAnswerAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
+      return {
+        question: qaQuestion,
+        answer: qaAnswer,
+        questionAttribution: qaQuestionAttribution,
+        answerAttribution: qaAnswerAttribution
+      };
+    case "question":
+      const qQuestion = get(element, ["text"]);
+      const qAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
+      return {
+        question: qQuestion,
+        questionAttribution: qAttribution
+      };
+    case "answer":
+      const aAnswer = get(element, ["text"]);
+      const aAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
+      return {
+        answer: aAnswer,
+        answerAttribution: aAttribution
+      };
+  }
+};
+
+const QuestionAnswerBase = ({
+  element,
+  template,
+  css = {},
+  story = {},
+  config = {},
+  opts = {},
+  render,
+  ...restProps
+}) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  if (!element) return null;
+  const { type, defaultIconType, isExternalLink = true } = opts;
+  const { iconColor } = css;
+  const { question, answer, questionAttribution, answerAttribution } = supportedTemplates(type, element);
+
+  const theme = getTextColor(iconColor);
+  const questionData = question && ((isExternalLink && updateContentLinks(question)) || question);
+  const answerData = answer && ((isExternalLink && updateContentLinks(answer)) || answer);
+  const isAuthorImageTemplate = template === "withAuthorImage";
+  const templateStyle = isAuthorImageTemplate ? "qa-withAuthorImage" : "qa-default";
+  const iconType = defaultIconType === "curve" ? "curveIcon" : "edgeIcon";
+
+  const supportQuestionElement = isAuthorImageTemplate ? (
+    questionAttribution && (
+      <>
+        <div styleName="labelAttribution">
+          <img src={questionAttribution} loading="lazy" />
+        </div>
+        <span styleName="hidden"></span>
+      </>
+    )
+  ) : (
+    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={{ backgroundColor: iconColor }}>
+      Q
+    </div>
+  );
+
+  // EMPTY SPAN FOR EXTRA SPACE
+
+  const supportAnswerElement = isAuthorImageTemplate ? (
+    answerAttribution && (
+      <>
+        <div styleName="labelAttribution">
+          <img src={answerAttribution} loading="lazy" />
+        </div>
+        <span styleName="hidden"></span>
+      </>
+    )
+  ) : (
+    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={{ backgroundColor: iconColor }}>
+      A
+    </div>
+  );
+
+  return (
+    <div
+      className="arrow-component arr-custom-style arr--qa-element"
+      data-test-id="question-answer"
+      styleName={templateStyle}
+      {...restProps}>
+      {type !== "answer" && (
+        <div styleName="q-element" data-test-id="question">
+          {supportQuestionElement}
+          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: questionData }} />
+        </div>
+      )}
+      {type !== "question" && (
+        <div styleName="a-element" data-test-id="answer">
+          {supportAnswerElement}
+          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: answerData }} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+QuestionAnswerBase.propTypes = {
+  element: PropTypes.shape({
+    metadata: PropTypes.shape({
+      interviewer: PropTypes.shape({ "avatar-url": PropTypes.string }),
+      interviewee: PropTypes.shape({ "avatar-url": PropTypes.string }),
+      question: PropTypes.string,
+      answer: PropTypes.string
+    }),
+    text: PropTypes.string
+  }),
+  opts: PropTypes.shape({ type: PropTypes.string, defaultIconType: PropTypes.string, isExternalLink: PropTypes.bool }),
+  template: PropTypes.string,
+  css: PropTypes.object,
+  config: shapeConfig,
+  story: shapeStory,
+  render: PropTypes.func
+};
+
+export const QuestionAnswer = withElementWrapper(QuestionAnswerBase);

package/src/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css

@@ -0,0 +1,106 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.qa-withAuthorImage:global(.arrow-component) .a-element p,
+.qa-default:global(.arrow-component) .a-element p,
+.qa-withAuthorImage:global(.arrow-component) .q-element p,
+.qa-default:global(.arrow-component) .q-element p,
+.dark {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-5);
+  display: inline;
+  color: var(--arrow-c-mono2);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.q-element {
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element p,
+.qa-default:global(.arrow-component) .a-element p {
+  font-weight: var(--arrow-fw-normal);
+}
+
+.qa-withAuthorImage .hidden {
+  width: 35px;
+  display: inline-block;
+  @media (min-width: mobile) {
+    width: 38px;
+  }
+}
+
+.qa-default .curveIcon,
+.qa-default .edgeIcon {
+  width: 27px;
+  height: 27px;
+  color: var(--arrow-c-light);
+  background-color: var(--arrow-c-brand1);
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  display: inline-block;
+  line-height: var(--arrow-lh-5);
+  text-align: center;
+  margin-right: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    width: 30px;
+    height: 30px;
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.qa-default .edgeIcon {
+  border-radius: 2.8px;
+}
+
+.qa-default .curveIcon {
+  border-radius: 13.5px;
+  @media (min-width: mobile) {
+    border-radius: 15px;
+  }
+}
+
+.qa-withAuthorImage .q-element,
+.qa-withAuthorImage .a-element {
+  position: relative;
+}
+
+.qa-withAuthorImage .labelAttribution img {
+  width: 27px;
+  height: 27px;
+  border-radius: 16px;
+  position: absolute;
+  @media (min-width: mobile) {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element .light p,
+.qa-default:global(.arrow-component) .a-element .light p,
+.qa-withAuthorImage:global(.arrow-component) .q-element .light p,
+.qa-default:global(.arrow-component) .q-element .light p {
+  color: var(--arrow-c-invert-mono1);
+  a {
+    color: var(--arrow-c-invert-mono2);
+    border-bottom: 1px solid var(--arrow-c-invert-mono2);
+  }
+}
+
+.content {
+  display: inline;
+}
+
+html[dir="rtl"] {
+  .content {
+    margin-right: var(--arrow-spacing-s);
+  }
+  .qa-default .curveIcon,
+  .qa-default .edgeIcon {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xs);
+  }
+}

package/src/components/Atoms/StoryElements/QuestionAnswer/question-answer.test.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { QuestionAnswer } from "./index";
+
+const qaElement = generateStoryElementData("q-and-a");
+const qElement = generateStoryElementData("question");
+const aElement = generateStoryElementData("answer");
+
+describe("Question & Answer Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(<QuestionAnswer element={qaElement} template="default" opts={{ type: "q-and-a" }} />);
+    expect(wrapper.find({ "data-test-id": "question-answer" }).prop("className")).toMatch(/qa-default/);
+  });
+
+  it("Should render template with author image", () => {
+    const wrapper = mount(<QuestionAnswer element={qaElement} template="withAuthorImage" opts={{ type: "q-and-a" }} />);
+    expect(wrapper.find({ "data-test-id": "question-answer" }).prop("className")).toMatch(/qa-withAuthorImage/);
+  });
+
+  it("Should render default template with external link", () => {
+    const wrapper = shallow(
+      <QuestionAnswer template="default" opts={{ isExternalLink: true, type: "q-and-a" }} element={qaElement} />
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="question-answer" class="arrow-component arr-custom-style arr--qa-element question-answer-m_qa-default__2fGK3 "><div class="question-answer-m_q-element__1ZA5d" data-test-id="question"><div data-test-id="edgeIcon" class="question-answer-m_edgeIcon__3js6c question-answer-m_dark__O4Mnm">Q</div><div class="question-answer-m_content__16Ng7 question-answer-m_dark__O4Mnm"><p>Is Ready Player One book<a aria-label=\'content\' target=\'_blank\' href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one"> better </a>than the movie?</p></div></div><div class="question-answer-m_a-element__BTxfl" data-test-id="answer"><div data-test-id="edgeIcon" class="question-answer-m_edgeIcon__3js6c question-answer-m_dark__O4Mnm">A</div><div class="question-answer-m_content__16Ng7 question-answer-m_dark__O4Mnm"><p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline\'s <strong><a aria-label=\'content\' target=\'_blank\' href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">book</a></strong> a couple months before watching Steven Spielberg\'s <strong>movie</strong>. ... The <strong>book</strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p></div></div></div>'
+    );
+  });
+
+  it("Should render default template without external link", () => {
+    const wrapper = shallow(
+      <QuestionAnswer template="default" opts={{ isExternalLink: false, type: "q-and-a" }} element={qaElement} />
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="question-answer" class="arrow-component arr-custom-style arr--qa-element question-answer-m_qa-default__2fGK3 "><div class="question-answer-m_q-element__1ZA5d" data-test-id="question"><div data-test-id="edgeIcon" class="question-answer-m_edgeIcon__3js6c question-answer-m_dark__O4Mnm">Q</div><div class="question-answer-m_content__16Ng7 question-answer-m_dark__O4Mnm"><p>Is Ready Player One book<a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one"> better </a>than the movie?</p></div></div><div class="question-answer-m_a-element__BTxfl" data-test-id="answer"><div data-test-id="edgeIcon" class="question-answer-m_edgeIcon__3js6c question-answer-m_dark__O4Mnm">A</div><div class="question-answer-m_content__16Ng7 question-answer-m_dark__O4Mnm"><p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline\'s <strong><a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">book</a></strong> a couple months before watching Steven Spielberg\'s <strong>movie</strong>. ... The <strong>book</strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p></div></div></div>'
+    );
+  });
+
+  it("Should render the default template with icon type", () => {
+    const wrapper1 = mount(
+      <QuestionAnswer template="default" opts={{ type: "q-and-a", defaultIconType: "curve" }} element={qaElement} />
+    );
+    expect(wrapper1.find({ "data-test-id": "curveIcon" }).length).toEqual(2);
+    const wrapper2 = mount(
+      <QuestionAnswer template="default" opts={{ type: "q-and-a", defaultIconType: "edge" }} element={qaElement} />
+    );
+    expect(wrapper2.find({ "data-test-id": "edgeIcon" }).length).toEqual(2);
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(<QuestionAnswer element={qaElement} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      '<h3><div><div class="question"><p>Is Ready Player One book<a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one"> better </a>than the movie?</p></div><div class="answer"><p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline\'s <strong><a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">book</a></strong> a couple months before watching Steven Spielberg\'s <strong>movie</strong>. ... The <strong>book</strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p></div></div></h3>'
+    );
+  });
+});
+
+describe("Question Story Element", () => {
+  it("Should render question", () => {
+    const wrapper = mount(<QuestionAnswer element={qElement} template="default" opts={{ type: "question" }} />);
+    expect(wrapper.find({ "data-test-id": "answer" }).length).toEqual(0);
+    expect(wrapper.find({ "data-test-id": "question" }).length).toEqual(1);
+  });
+});
+
+describe("Answer Story Element", () => {
+  it("Should render answer", () => {
+    const wrapper = mount(<QuestionAnswer element={aElement} template="default" opts={{ type: "answer" }} />);
+    expect(wrapper.find({ "data-test-id": "question" }).length).toEqual(0);
+    expect(wrapper.find({ "data-test-id": "answer" }).length).toEqual(1);
+  });
+});

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

@@ -0,0 +1,79 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { generateStoryElementData } from "../../../Fixture";
+import { QuestionAnswer } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { color, boolean } from "@storybook/addon-knobs";
+
+const templateStyle = {
+  Default: "default",
+  "With Author Image": "withAuthorImage"
+};
+const qaElement = generateStoryElementData("q-and-a");
+const qElement = generateStoryElementData("question");
+const aElement = generateStoryElementData("answer");
+const iconType = {
+  edge: "edge",
+  curve: "curve"
+};
+
+withStore("Atoms/Story Elements/Question Answer", {}, Readme)
+  .add("Default", () => (
+    <QuestionAnswer
+      element={qaElement}
+      template={optionalSelect("Template Type", templateStyle)}
+      opts={{
+        type: "q-and-a",
+        defaultIconType: optionalSelect("Icon Type", iconType),
+        isExternalLink: boolean("External Link", true)
+      }}
+      css={{
+        iconColor: color("Icon Color", "#ff214b")
+      }}
+    />
+  ))
+  .add("Custom", () => {
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <QuestionAnswer element={qaElement} render={customTemplate} />;
+  });
+
+withStore("Atoms/Story Elements/Question", {}, Readme)
+  .add("Default", () => (
+    <QuestionAnswer
+      element={qElement}
+      template={optionalSelect("Template Type", templateStyle)}
+      opts={{
+        type: "question",
+        defaultIconType: optionalSelect("Icon Type", iconType),
+        isExternalLink: boolean("External Link", true)
+      }}
+      css={{
+        iconColor: color("Icon Color", "#ff214b")
+      }}
+    />
+  ))
+  .add("Custom", () => {
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <QuestionAnswer element={qElement} render={customTemplate} />;
+  });
+
+withStore("Atoms/Story Elements/Answer", {}, Readme)
+  .add("Default", () => (
+    <QuestionAnswer
+      element={aElement}
+      template={optionalSelect("Template Type", templateStyle)}
+      opts={{
+        type: "answer",
+        defaultIconType: optionalSelect("Icon Type", iconType),
+        isExternalLink: boolean("External Link", true)
+      }}
+      css={{
+        iconColor: color("Icon Color", "#ff214b")
+      }}
+    />
+  ))
+  .add("Custom", () => {
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <QuestionAnswer element={aElement} render={customTemplate} />;
+  });

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

@@ -0,0 +1,41 @@
+# Quote
+
+Displays the Quote story element of the story
+
+## Usage
+
+#### Quote story element with default template
+
+```jsx
+<Quote element={element} template="borderNone" />
+```
+
+#### Quote story element with border left template
+
+```jsx
+<Quote element={element} template="borderLeft" />
+```
+
+#### Quote story element with border top template
+
+```jsx
+<Quote element={element} template="borderTopSmall" />
+```
+
+#### Quote story element with border color
+
+```jsx
+const css = { borderColor: "#ff214b" };
+
+<Quote element={element} template="borderLeft" css={css} />;
+```
+
+#### Replace default quote element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<Quote element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->