@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,185 @@
+@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);
+  color: var(--arrow-c-mono2);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.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 {
+  margin-bottom: 15px;
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element ul,
+.qa-default:global(.arrow-component) .a-element ul,
+.qa-withAuthorImage:global(.arrow-component) .q-element ul,
+.qa-default:global(.arrow-component) .q-element ul {
+  list-style: initial;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element ol,
+.qa-default:global(.arrow-component) .a-element ol,
+.qa-withAuthorImage:global(.arrow-component) .q-element ol,
+.qa-default:global(.arrow-component) .q-element ol {
+  list-style: auto;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element li,
+.qa-default:global(.arrow-component) .a-element li,
+.qa-withAuthorImage:global(.arrow-component) .q-element li,
+.qa-default:global(.arrow-component) .q-element li {
+  display: list-item;
+  font-size: var(--arrow-fs-m);
+  margin-bottom: 15px;
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element li > p,
+.qa-default:global(.arrow-component) .a-element li > p,
+.qa-withAuthorImage:global(.arrow-component) .q-element li > p,
+.qa-default:global(.arrow-component) .q-element li > p {
+  margin-bottom: unset;
+}
+
+.qa-withAuthorImage:global(.arrow-component) .a-element a,
+.qa-default:global(.arrow-component) .a-element a,
+.qa-withAuthorImage:global(.arrow-component) .q-element a,
+.qa-default:global(.arrow-component) .q-element a {
+  color: var(--textElementHyperlinkColor);
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+  transition: border 0.3s ease;
+}
+
+.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 .q-element,
+.qa-default .a-element {
+  .light {
+    color: var(--arrow-c-light);
+  }
+  .dark {
+    color: var(--arrow-c-dark);
+  }
+}
+
+.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 .fallbackImage svg {
+  width: 27px;
+  height: 27px;
+  position: relative;
+  top: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.qa-withAuthorImage .fallbackAttribution {
+  display: inline-block;
+  width: 36px;
+}
+
+.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);
+  margin-bottom: 15px;
+  a {
+    color: var(--arrow-c-invert-mono2);
+    border-bottom: 1px solid var(--arrow-c-invert-mono2);
+  }
+}
+
+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);
+  }
+}
+
+.content,
+.content :first-child {
+  display: inline;
+}
+
+.content p:nth-child(2) {
+  margin-top: 15px;
+}

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 -->

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

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+import { withElementWrapper } from "../withElementWrapper";
+import "./quote.m.css";
+import { shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+
+const QuoteBase = ({ element, template = "borderLeft", css = {}, story = {}, config = {}, render, ...restProps }) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { content, attribution } = element.metadata;
+  if (!content) return null;
+  const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
+  const { borderColor = "" } = css;
+  const updateBorderColor = template === "borderLeft" && borderColor ? `4px solid ${borderColor}` : "none";
+  const templateStyle = template ? `quote-${template}` : "quote";
+  const defaultBorderStyle = updateBorderColor === "none" ? "default-border-style" : "";
+  return (
+    <div className="arrow-component arr--quote-element" data-test-id="quote" styleName={templateStyle} {...restProps}>
+      {template === "borderTopSmall" && <div styleName="line" style={{ backgroundColor: borderColor || "initial" }} />}
+      <p
+        styleName={`text ${textInvertColor} ${defaultBorderStyle}`}
+        style={languageDirection === "ltr" ? { borderLeft: updateBorderColor } : { borderRight: updateBorderColor }}
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+      <p data-test-id="quote-attribution" styleName={`attribution ${textInvertColor}`}>
+        {attribution}
+      </p>
+    </div>
+  );
+};
+
+QuoteBase.propTypes = {
+  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
+  /** template can be default, borderTopSmall and borderLeft  */
+  template: PropTypes.string,
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+
+export const Quote = withElementWrapper(QuoteBase);

package/src/components/Atoms/StoryElements/Quote/quote.m.css

@@ -0,0 +1,125 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.quote .text,
+.quote-borderNone .text,
+.quote-borderTopSmall .text,
+.quote-borderLeft .text,
+.dark {
+  font-weight: var(--arrow-fw-semi-bold);
+  color: var(--arrow-c-mono2);
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.quote .text.light,
+.quote-borderNone .text.light,
+.quote-borderTopSmall .text.light,
+.quote-borderLeft .text.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.quote .text,
+.quote-borderNone .text {
+  font-style: italic;
+}
+
+.quote .attribution,
+.quote-borderNone .attribution,
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution,
+.dark {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-semi-bold);
+  font-family: var(--arrow-typeface-secondary);
+  color: var(--arrow-c-mono4);
+  font-style: italic;
+  display: flex;
+  margin-top: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+.quote .attribution.light,
+.quote-borderNone .attribution.light,
+.quote-borderLeft .attribution.light,
+.quote-borderTopSmall .attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.quote .attribution,
+.quote-borderNone .attribution {
+  justify-content: flex-end;
+}
+
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution {
+  justify-content: flex-start;
+}
+
+.quote .attribution:before,
+.quote-borderNone .attribution:before {
+  content: " ";
+  width: 12px;
+  height: 2px;
+  background-color: var(--arrow-c-mono4);
+  margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
+}
+
+.quote .attribution.light:before,
+.quote-borderNone .attribution.light:before {
+  background-color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="ltr"] {
+  .quote-borderLeft .text {
+    padding-left: var(--arrow-spacing-l);
+  }
+
+  .quote-borderLeft .default-border-style.text {
+    border-left: 4px solid var(--arrow-c-brand1);
+  }
+
+  .quote-borderLeft .attribution {
+    margin-left: var(--arrow-spacing-l);
+  }
+}
+
+html[dir="rtl"] {
+  .quote .attribution,
+  .quote-borderNone .attribution {
+    &::before {
+      content: " ";
+      width: 12px;
+      height: 2px;
+      background-color: var(--arrow-c-mono4);
+      margin: var(--arrow-spacing-s) 0 0 var(--arrow-spacing-xs);
+    }
+  }
+
+  .quote-borderLeft .text {
+    padding-right: var(--arrow-spacing-l);
+  }
+
+  .quote-borderLeft .default-border-style.text {
+    border-right: 4px solid var(--arrow-c-brand1);
+  }
+
+  .quote-borderLeft .attribution {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.quote-borderTopSmall .line {
+  width: 32px;
+  height: 4px;
+  background-color: var(--arrow-c-brand1);
+  margin-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-s);
+  }
+}

package/src/components/Atoms/StoryElements/Quote/quote.test.js

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+import { Quote } from "./index";
+import { Provider } from "react-redux";
+
+const element = generateStoryElementData("quote");
+
+describe("Quote Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Quote element={element} template="borderNone" />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderNone/);
+  });
+
+  it("Should render border left template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Quote element={element} template="borderLeft" />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderLeft/);
+  });
+
+  it("Should render border top template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Quote element={element} template="borderTopSmall" />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderTopSmall/);
+  });
+
+  it("Should render border left template with border color", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Quote template="borderLeft" element={element} css={{ borderColor: "#ff214b" }} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">Quote: Rajasthan Chief Minister Ashok</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Ashok</p></div>'
+    );
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Quote element={element} render={customTemplate} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe("<h3>Quote: Rajasthan Chief Minister Ashok</h3>");
+  });
+});

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Quote } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("quote");
+const collectionTemplates = {
+  default: "borderNone",
+  borderLeft: "borderLeft",
+  borderTopSml: "borderTopSmall"
+};
+
+withStore("Atoms/Story Elements/Quote", {}, Readme)
+  .add("Default", () => (
+    <Quote
+      element={element}
+      template={optionalSelect("templates", collectionTemplates)}
+      opts={{ isExternalLink: boolean("External Link", true) }}
+      css={{ borderColor: color("Color", "#ff214b") }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
+    return <Quote element={element} render={customTemplate} />;
+  });

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

@@ -0,0 +1,9 @@
+## Reference
+
+Reference element displays the referenced content to the story.
+
+# Usage
+
+```jsx
+<Reference element={element} >
+```