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

package/esm/components/Atoms/StoryElements/BigFact/big-fact.test.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import { BigFact } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+import "./big-fact.m.css";
+var element = generateStoryElementData("bigfact");
+describe("Component: BigFact", function () {
+  test("It should display the big fact element content and attribution", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(BigFact, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "bigfact"
+    }).prop("className")).toMatch(/bigfact-element/);
+  });
+  it("Should not render attribution value if there is no data", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(BigFact, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "attribution"
+    }).length).toEqual(0);
+  });
+  test("It should not render the BigFact component if the data is null", function () {
+    var component = shallow( /*#__PURE__*/React.createElement(BigFact, null));
+    expect(component.contains( /*#__PURE__*/React.createElement(BigFact, null))).toBe(false);
+  });
+});

package/esm/components/Atoms/StoryElements/BigFact/index.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "story", "config"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./big-fact.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "bigfact-element": "big-fact-m_bigfact-element__3uAwv",
+    "light": "big-fact-m_light__ha49M",
+    "content": "big-fact-m_content__1u2Ul",
+    "attribution": "big-fact-m_attribution__3XK_P",
+    "dark": "big-fact-m_dark__7a_KC"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor } from "../../../../utils/utils";
+import "./big-fact.m.css";
+
+var BigFactBase = function BigFactBase(_ref) {
+  var element = _ref.element,
+      story = _ref.story,
+      config = _ref.config,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var _element$metadata = element.metadata,
+      content = _element$metadata.content,
+      attribution = _element$metadata.attribution;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "bigfact"
+  }, restProps, {
+    className: "arrow-component arr--bigfact-element " + _getClassName("bigfact-element ".concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "big-fact-m_content__1u2Ul"
+  }, content), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "attribution",
+    className: _getClassName("attribution ".concat(textInvertColor), _styleModuleImportMap)
+  }, attribution));
+};
+
+BigFactBase.propTypes = {
+  element: PropTypes.shape({
+    metadata: PropTypes.shape({
+      content: PropTypes.string,
+      attribution: PropTypes.string
+    })
+  }),
+  story: PropTypes.object,
+  config: PropTypes.object
+};
+export var BigFact = withElementWrapper(BigFactBase);

package/esm/components/Atoms/StoryElements/BigFact/stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { BigFact } from "./index";
+import { withStore } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+var element = generateStoryElementData("bigfact");
+withStore("Atoms/Story Elements/BigFact", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(BigFact, {
+    element: element
+  });
+});

package/esm/components/Atoms/StoryElements/BlockQuote/README.md

@@ -0,0 +1,49 @@
+# Block Quote
+
+Displays the Block quote story element of the story
+
+## Usage
+
+#### Block quote story element with default template
+
+```jsx
+<BlockQuote element={element} template="default" />
+```
+
+#### Block quote story element with background template
+
+```jsx
+<BlockQuote element={element} template="withBackground" />
+```
+
+#### Block quote story element with border template
+
+```jsx
+<BlockQuote element={element} template="withBorder" />
+```
+
+#### Block quote story element with background color
+
+```jsx
+const css = { backgroundShade: "#ff214b" };
+
+<BlockQuote element={element} template="withBackground" css={css} />;
+```
+
+#### Block quote story element with blockquote color
+
+```jsx
+const css = { blockQuoteColor: "#ff214b" };
+
+<BlockQuote element={element} template="default" css={css} />;
+```
+
+#### Replace default block quote element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<BlockQuote element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/BlockQuote/Svg/curve.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./icon.m.css";
+export var CurveIcon = function CurveIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      color = _ref.color,
+      opacity = _ref.opacity;
+  var lightColor = color === "light" && "#ffffff";
+  var darkColor = color === "dark" && "#0d0d0d";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-m_curve-wrapper__3-sLV",
+    style: {
+      fill: "".concat(lightColor || darkColor || color)
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 64 64"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "inherit",
+    opacity: opacity,
+    d: "M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"
+  })));
+};
+CurveIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.string
+};

package/esm/components/Atoms/StoryElements/BlockQuote/Svg/edge.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./icon.m.css";
+export var EdgeIcon = function EdgeIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      color = _ref.color,
+      opacity = _ref.opacity;
+  var lightColor = color === "light" && "#ffffff";
+  var darkColor = color === "dark" && "#0d0d0d";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-m_edge-wrapper__xUOdp",
+    style: {
+      fill: "".concat(lightColor || darkColor || color)
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 64 64"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "inherit",
+    opacity: opacity,
+    d: "M16.858 29.836v4.727H28V60H4V29.836c0-9.6 2.606-16.727 7.746-21.187C15.3 5.564 19.8 4 25.122 4v13.627c-2.888 0-8.264 0-8.264 12.209zm40.264-12.21V4c-5.32 0-9.82 1.564-13.376 4.65C38.606 13.108 36 20.236 36 29.835V60h24V34.563H48.857v-4.727c0-12.21 5.377-12.21 8.265-12.21z"
+  })));
+};
+EdgeIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.string
+};

package/esm/components/Atoms/StoryElements/BlockQuote/Svg/icon.m.css

@@ -0,0 +1,4 @@
+.edge-wrapper,
+.curve-wrapper {
+  fill: var(--arrow-c-brand1);
+}

package/esm/components/Atoms/StoryElements/BlockQuote/block-quote.m.css

@@ -0,0 +1,161 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.blockquote-withBackground::before {
+  @media (min-width: mobile) {
+    content: "";
+    padding-top: 56.25%;
+  }
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  @media (min-width: mobile) {
+    width: 64px;
+    height: 64px;
+  }
+}
+
+.icon-border {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.blockquote .icon,
+.blockquote-default .icon {
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: unset;
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.blockquote-withBorder .icon {
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.blockquote-withBackground .icon {
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.blockquote-withBorder .border {
+  width: 100%;
+  height: 2px;
+  background-color: var(--arrow-c-brand1);
+  margin-top: 36px;
+}
+
+.blockquote .content,
+.blockquote-default .content,
+.blockquote-withBorder .content,
+.blockquote-withBackground .content {
+  font-family: var(--arrow-typeface-primary);
+  font-size: var(--arrow-fs-l);
+  font-weight: var(--arrow-fw-bold);
+  margin-bottom: var(--arrow-spacing-s);
+  line-height: var(--arrow-lh-3);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-huge);
+  }
+}
+
+.blockquote .content,
+.blockquote-default .content {
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.blockquote-withBorder .content {
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.blockquote-withBorder .wrapper {
+  border-bottom: solid 2px var(--arrow-c-brand1);
+}
+
+.blockquote .attribution,
+.blockquote-default .attribution,
+.blockquote-withBorder .attribution,
+.blockquote-withBackground .attribution {
+  font-family: var(--arrow-typeface-secondary);
+  font-size: var(--arrow-fs-m);
+  font-weight: var(--arrow-fw-bold);
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.blockquote-withBorder .attribution {
+  margin-bottom: var(--arrow-spacing-l);
+}
+
+.blockquote-withBackground .attribution {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.blockquote-withBackground {
+  background-color: var(--arrow-c-brand1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blockquote-withBorder {
+  display: block;
+}
+
+.blockquote-withBackground .attribution::before {
+  content: "–";
+  color: inherit;
+  margin-right: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    margin-right: var(--arrow-spacing-s);
+  }
+}
+
+.blockquote-withBackground .quote-wrapper {
+  padding: 48px;
+  @media (min-width: mobile) {
+    padding: 96px;
+  }
+}
+
+.blockquote .quote-wrapper,
+.blockquote-default .quote-wrapper {
+  @media (min-width: mobile) {
+    display: flex;
+  }
+}
+
+html[dir="rtl"] .wrapper {
+  margin-right: var(--arrow-spacing-l);
+}
+
+.attribution.dark {
+  color: var(--arrow-c-mono4);
+}
+.attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.content.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.content.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Atoms/StoryElements/BlockQuote/block-quote.test.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { BlockQuote } from "./index";
+var element = generateStoryElementData("blockquote");
+describe("Block Quote Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(BlockQuote, {
+      element: element,
+      template: "default"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blockquote"
+    }).prop("className")).toMatch(/blockquote-default/);
+  });
+  it("Should render with background template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(BlockQuote, {
+      element: element,
+      template: "withBackground"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blockquote"
+    }).prop("className")).toMatch(/blockquote-withBackground/);
+  });
+  it("Should render with border template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(BlockQuote, {
+      element: element,
+      template: "withBorder"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blockquote"
+    }).prop("className")).toMatch(/blockquote-withBorder/);
+  });
+  it("Should render background template with background color", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(BlockQuote, {
+      template: "withBackground",
+      element: element,
+      css: {
+        backgroundColor: "#ff214b"
+      }
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-withBackground__1yW-u block-quote-m_dark__HaZuG "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#0d0d0d"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" opacity=".4" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>');
+  });
+  it("Should render default template with blockquote color", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(BlockQuote, {
+      template: "default",
+      element: element,
+      css: {
+        blockQuoteColor: "#ff214b"
+      }
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-default__fZ8a1 "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#ff214b"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw" style="border-color:#ff214b"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>');
+  });
+  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.metadata.content
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(BlockQuote, {
+      element: element,
+      render: customTemplate
+    }));
+    expect(wrapper.html()).toBe("<h3>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</h3>");
+  });
+});

package/esm/components/Atoms/StoryElements/BlockQuote/index.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "template", "css", "story", "config", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./block-quote.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "blockquote-withBackground": "block-quote-m_blockquote-withBackground__1yW-u",
+    "icon": "block-quote-m_icon__m-EIZ",
+    "icon-border": "block-quote-m_icon-border__2xQQY",
+    "blockquote": "block-quote-m_blockquote__HPVh0",
+    "blockquote-default": "block-quote-m_blockquote-default__fZ8a1",
+    "blockquote-withBorder": "block-quote-m_blockquote-withBorder__1GVQL",
+    "border": "block-quote-m_border__1ZTPR",
+    "content": "block-quote-m_content__xpMqX",
+    "wrapper": "block-quote-m_wrapper__2KEhw",
+    "attribution": "block-quote-m_attribution__2m4s2",
+    "quote-wrapper": "block-quote-m_quote-wrapper__83bEy",
+    "dark": "block-quote-m_dark__HaZuG",
+    "light": "block-quote-m_light__1QrNc"
+  }
+};
+import React from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { clientWidth, getTextColor, shapeConfig, shapeStory } from "../../../../utils/utils";
+import { withElementWrapper } from "../withElementWrapper";
+import { CurveIcon } from "./Svg/curve";
+import { EdgeIcon } from "./Svg/edge";
+import "./block-quote.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+var SelectionOfIcon = function SelectionOfIcon(iconType, template, blockQuoteColor, quoteColor) {
+  var isMobile = clientWidth("mobile");
+  var dimension = isMobile ? "48px" : "64px";
+
+  if (template === "withBackground") {
+    if (iconType === "edgeIcon") {
+      return /*#__PURE__*/React.createElement(EdgeIcon, {
+        width: dimension,
+        height: dimension,
+        color: quoteColor,
+        opacity: ".4"
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(CurveIcon, {
+      width: dimension,
+      height: dimension,
+      color: quoteColor,
+      opacity: ".4"
+    });
+  }
+
+  if (template !== "withBackground") {
+    if (iconType === "edgeIcon") {
+      return /*#__PURE__*/React.createElement(EdgeIcon, {
+        width: dimension,
+        height: dimension,
+        color: blockQuoteColor
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(CurveIcon, {
+      width: dimension,
+      height: dimension,
+      color: blockQuoteColor
+    });
+  }
+};
+
+export var BlockQuoteBase = function BlockQuoteBase(_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,
+      render = _ref.render,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _get = get(element, ["metadata"]),
+      content = _get.content,
+      attribution = _get.attribution;
+
+  if (!content) return null;
+  var blockQuoteColor = css.blockQuoteColor,
+      backgroundShade = css.backgroundShade,
+      iconType = css.iconType;
+  var templateStyle = template ? "blockquote-".concat(template) : "blockquote";
+  var isBackground = template === "withBackground";
+  var textColor = isBackground ? getTextColor(backgroundShade) : "";
+  var theme = isBackground && backgroundShade ? {
+    backgroundColor: backgroundShade
+  } : {};
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(isBackground ? theme.backgroundColor : configData.theme);
+
+  var updateStructure = function updateStructure() {
+    return template === "withBorder" ? /*#__PURE__*/React.createElement("div", {
+      className: "block-quote-m_icon-border__2xQQY"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "block-quote-m_icon__m-EIZ"
+    }, SelectionOfIcon(iconType, template, blockQuoteColor, textColor)), /*#__PURE__*/React.createElement("div", {
+      className: "block-quote-m_border__1ZTPR",
+      style: blockQuoteColor && {
+        backgroundColor: blockQuoteColor
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: "block-quote-m_icon__m-EIZ"
+    }, SelectionOfIcon(iconType, template, blockQuoteColor, textColor));
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "blockquote",
+    style: theme
+  }, restProps, {
+    className: "arrow-component arr--block-quote " + _getClassName("".concat(templateStyle, " ").concat(textColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "block-quote-m_quote-wrapper__83bEy"
+  }, updateStructure(), /*#__PURE__*/React.createElement("div", {
+    className: "block-quote-m_wrapper__2KEhw",
+    style: blockQuoteColor && {
+      borderColor: blockQuoteColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: content
+    },
+    className: _getClassName("content ".concat(textInvertColor), _styleModuleImportMap)
+  }), /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: attribution
+    },
+    className: _getClassName("attribution ".concat(textInvertColor), _styleModuleImportMap)
+  }))));
+};
+BlockQuoteBase.propTypes = {
+  element: PropTypes.shape({
+    metadata: PropTypes.shape({
+      content: PropTypes.string,
+      attribution: PropTypes.string
+    })
+  }),
+  template: PropTypes.string,
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+export var BlockQuote = withElementWrapper(BlockQuoteBase);

package/esm/components/Atoms/StoryElements/BlockQuote/stories.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { generateStoryElementData } from "../../../Fixture";
+import { BlockQuote } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { color } from "@storybook/addon-knobs";
+var templateStyle = {
+  Default: "default",
+  "With Background": "withBackground",
+  "With Border": "withBorder"
+};
+var element = generateStoryElementData("blockquote");
+var iconStyle = {
+  "Curve Icon": "curveIcon",
+  "Edge Icon": "edgeIcon"
+};
+withStore("Atoms/Story Elements/Block Quote", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(BlockQuote, {
+    element: element,
+    template: optionalSelect("Template Options", templateStyle),
+    css: {
+      blockQuoteColor: color("Block quote color", "#ff214b"),
+      backgroundShade: color("Background color", "#ff214b"),
+      iconType: optionalSelect("Icon Types", iconStyle)
+    }
+  });
+}).add("Custom", 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.metadata.content
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(BlockQuote, {
+    element: element,
+    render: customTemplate
+  });
+});