@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

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

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

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

@@ -1,65 +0,0 @@
-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";
-import { HyperLink } from "../../Hyperlink";
-
-const ImageSlideshowBase = (props) => {
-  if (!props.element) return null;
-
-  const Slide = (image, index, onClickHandler) => {
-    const { id, "image-s3-key": imageS3Key, metadata, title, hyperlink = "" } = image;
-    return (
-      <div styleName="slide" key={id}>
-        <figure key={id} styleName="image-container" onClick={() => onClickHandler(index)}>
-          <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>
-        {hyperlink && <HyperLink hyperLink={hyperlink} />}
-        <p styleName="caption" dangerouslySetInnerHTML={{ __html: title }} />
-      </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

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

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

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

@@ -1,106 +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);
-  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

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