@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

package/esm/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/esm/components/Atoms/StoryElements/QuestionAnswer/index.js

@@ -0,0 +1,176 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "template", "css", "story", "config", "opts", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./question-answer.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "qa-withAuthorImage": "question-answer-m_qa-withAuthorImage__1JB3N",
+    "a-element": "question-answer-m_a-element__BTxfl",
+    "qa-default": "question-answer-m_qa-default__2fGK3",
+    "q-element": "question-answer-m_q-element__1ZA5d",
+    "dark": "question-answer-m_dark__O4Mnm",
+    "hidden": "question-answer-m_hidden__K0n4n",
+    "curveIcon": "question-answer-m_curveIcon__64641",
+    "edgeIcon": "question-answer-m_edgeIcon__3js6c",
+    "labelAttribution": "question-answer-m_labelAttribution__Rq-v3",
+    "light": "question-answer-m_light__3Iqv4",
+    "content": "question-answer-m_content__16Ng7"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { get } from "lodash";
+import { shapeConfig, shapeStory, updateContentLinks, getTextColor } from "../../../../utils/utils";
+import { withElementWrapper } from "../withElementWrapper";
+import "./question-answer.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+var supportedTemplates = function supportedTemplates(type, element) {
+  switch (type) {
+    case "q-and-a":
+      var _get = get(element, ["metadata"]),
+          qaQuestion = _get.question,
+          qaAnswer = _get.answer;
+
+      var qaQuestionAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
+      var qaAnswerAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
+      return {
+        question: qaQuestion,
+        answer: qaAnswer,
+        questionAttribution: qaQuestionAttribution,
+        answerAttribution: qaAnswerAttribution
+      };
+
+    case "question":
+      var qQuestion = get(element, ["text"]);
+      var qAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
+      return {
+        question: qQuestion,
+        questionAttribution: qAttribution
+      };
+
+    case "answer":
+      var aAnswer = get(element, ["text"]);
+      var aAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
+      return {
+        answer: aAnswer,
+        answerAttribution: aAttribution
+      };
+  }
+};
+
+var QuestionAnswerBase = function QuestionAnswerBase(_ref) {
+  var element = _ref.element,
+      template = _ref.template,
+      _ref$css = _ref.css,
+      css = _ref$css === void 0 ? {} : _ref$css,
+      _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      render = _ref.render,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  if (!element) return null;
+  var type = opts.type,
+      defaultIconType = opts.defaultIconType,
+      _opts$isExternalLink = opts.isExternalLink,
+      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink;
+  var iconColor = css.iconColor;
+
+  var _supportedTemplates = supportedTemplates(type, element),
+      question = _supportedTemplates.question,
+      answer = _supportedTemplates.answer,
+      questionAttribution = _supportedTemplates.questionAttribution,
+      answerAttribution = _supportedTemplates.answerAttribution;
+
+  var theme = getTextColor(iconColor);
+  var questionData = question && (isExternalLink && updateContentLinks(question) || question);
+  var answerData = answer && (isExternalLink && updateContentLinks(answer) || answer);
+  var isAuthorImageTemplate = template === "withAuthorImage";
+  var templateStyle = isAuthorImageTemplate ? "qa-withAuthorImage" : "qa-default";
+  var iconType = defaultIconType === "curve" ? "curveIcon" : "edgeIcon";
+  var supportQuestionElement = isAuthorImageTemplate ? questionAttribution && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "question-answer-m_labelAttribution__Rq-v3"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: questionAttribution,
+    loading: "lazy"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "question-answer-m_hidden__K0n4n"
+  })) : /*#__PURE__*/React.createElement("div", {
+    "data-test-id": iconType,
+    style: {
+      backgroundColor: iconColor
+    },
+    className: _getClassName("".concat(iconType, " ").concat(theme), _styleModuleImportMap)
+  }, "Q"); // EMPTY SPAN FOR EXTRA SPACE
+
+  var supportAnswerElement = isAuthorImageTemplate ? answerAttribution && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "question-answer-m_labelAttribution__Rq-v3"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: answerAttribution,
+    loading: "lazy"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "question-answer-m_hidden__K0n4n"
+  })) : /*#__PURE__*/React.createElement("div", {
+    "data-test-id": iconType,
+    style: {
+      backgroundColor: iconColor
+    },
+    className: _getClassName("".concat(iconType, " ").concat(theme), _styleModuleImportMap)
+  }, "A");
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "question-answer"
+  }, restProps, {
+    className: "arrow-component arr-custom-style arr--qa-element " + _getClassName(templateStyle, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), type !== "answer" && /*#__PURE__*/React.createElement("div", {
+    className: "question-answer-m_q-element__1ZA5d",
+    "data-test-id": "question"
+  }, supportQuestionElement, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: questionData
+    },
+    className: _getClassName("content ".concat(textInvertColor), _styleModuleImportMap)
+  })), type !== "question" && /*#__PURE__*/React.createElement("div", {
+    className: "question-answer-m_a-element__BTxfl",
+    "data-test-id": "answer"
+  }, supportAnswerElement, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: answerData
+    },
+    className: _getClassName("content ".concat(textInvertColor), _styleModuleImportMap)
+  })));
+};
+
+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 var QuestionAnswer = withElementWrapper(QuestionAnswerBase);

package/esm/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/esm/components/Atoms/StoryElements/QuestionAnswer/question-answer.test.js

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { QuestionAnswer } from "./index";
+var qaElement = generateStoryElementData("q-and-a");
+var qElement = generateStoryElementData("question");
+var aElement = generateStoryElementData("answer");
+describe("Question & Answer Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(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", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(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", function () {
+    var wrapper1 = mount( /*#__PURE__*/React.createElement(QuestionAnswer, {
+      template: "default",
+      opts: {
+        type: "q-and-a",
+        defaultIconType: "curve"
+      },
+      element: qaElement
+    }));
+    expect(wrapper1.find({
+      "data-test-id": "curveIcon"
+    }).length).toEqual(2);
+    var wrapper2 = mount( /*#__PURE__*/React.createElement(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", function () {
+    // eslint-disable-next-line react/prop-types
+    var customTemplate = function customTemplate(_ref) {
+      var element = _ref.element;
+      return /*#__PURE__*/React.createElement("h3", {
+        dangerouslySetInnerHTML: {
+          __html: element.text
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(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", function () {
+  it("Should render question", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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", function () {
+  it("Should render answer", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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/esm/components/Atoms/StoryElements/QuestionAnswer/stories.js

@@ -0,0 +1,102 @@
+/* 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 as _boolean } from "@storybook/addon-knobs";
+var templateStyle = {
+  Default: "default",
+  "With Author Image": "withAuthorImage"
+};
+var qaElement = generateStoryElementData("q-and-a");
+var qElement = generateStoryElementData("question");
+var aElement = generateStoryElementData("answer");
+var iconType = {
+  edge: "edge",
+  curve: "curve"
+};
+withStore("Atoms/Story Elements/Question Answer", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(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", function () {
+  var customTemplate = function customTemplate(_ref) {
+    var element = _ref.element;
+    return /*#__PURE__*/React.createElement("h3", {
+      dangerouslySetInnerHTML: {
+        __html: element.text
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(QuestionAnswer, {
+    element: qaElement,
+    render: customTemplate
+  });
+});
+withStore("Atoms/Story Elements/Question", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(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", function () {
+  var customTemplate = function customTemplate(_ref2) {
+    var element = _ref2.element;
+    return /*#__PURE__*/React.createElement("h3", {
+      dangerouslySetInnerHTML: {
+        __html: element.text
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(QuestionAnswer, {
+    element: qElement,
+    render: customTemplate
+  });
+});
+withStore("Atoms/Story Elements/Answer", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(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", function () {
+  var customTemplate = function customTemplate(_ref3) {
+    var element = _ref3.element;
+    return /*#__PURE__*/React.createElement("h3", {
+      dangerouslySetInnerHTML: {
+        __html: element.text
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(QuestionAnswer, {
+    element: aElement,
+    render: customTemplate
+  });
+});

package/esm/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 -->