@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1

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

@@ -1,185 +0,0 @@
-@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

@@ -1,74 +0,0 @@
-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

@@ -1,79 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-# 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

@@ -1,45 +0,0 @@
-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

@@ -1,125 +0,0 @@
-@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

@@ -1,58 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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