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

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

@@ -1,33 +0,0 @@
-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";
-
-const BigFactBase = ({ element, story, config, ...restProps }) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const { content, attribution } = element.metadata;
-
-  return (
-    <div
-      className="arrow-component arr--bigfact-element"
-      data-test-id="bigfact"
-      styleName={`bigfact-element ${textInvertColor}`}
-      {...restProps}>
-      <div styleName="content">{content}</div>
-      <div styleName={`attribution ${textInvertColor}`} data-test-id="attribution">
-        {attribution}
-      </div>
-    </div>
-  );
-};
-
-BigFactBase.propTypes = {
-  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
-  story: PropTypes.object,
-  config: PropTypes.object
-};
-
-export const BigFact = withElementWrapper(BigFactBase);

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { BigFact } from "./index";
-import { withStore } from "../../../../../storybook";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-
-const element = generateStoryElementData("bigfact");
-
-withStore("Atoms/Story Elements/BigFact", {}, Readme).add("Default", () => <BigFact element={element} />);

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

@@ -1,49 +0,0 @@
-# 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/src/components/Atoms/StoryElements/BlockQuote/Svg/curve.js

@@ -1,27 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./icon.m.css";
-
-export const CurveIcon = ({ width, height, color, opacity }) => {
-  const lightColor = color === "light" && "#ffffff";
-  const darkColor = color === "dark" && "#0d0d0d";
-  const fillColor = lightColor || darkColor || color;
-  return (
-    <div styleName="curve-wrapper" style={fillColor ? { fill: fillColor } : {}}>
-      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
-        <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"
-        />
-      </svg>
-    </div>
-  );
-};
-
-CurveIcon.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  opacity: PropTypes.string
-};

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

@@ -1,27 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./icon.m.css";
-
-export const EdgeIcon = ({ width, height, color, opacity }) => {
-  const lightColor = color === "light" && "#ffffff";
-  const darkColor = color === "dark" && "#0d0d0d";
-  const fillColor = lightColor || darkColor || color;
-  return (
-    <div styleName="edge-wrapper" style={fillColor ? { fill: fillColor } : {}}>
-      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
-        <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"
-        />
-      </svg>
-    </div>
-  );
-};
-
-EdgeIcon.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  opacity: PropTypes.string
-};

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

@@ -1,11 +0,0 @@
-.edge-wrapper,
-.curve-wrapper {
-  fill: var(--arrow-c-brand1);
-}
-
-html[dir="rtl"] {
-  .edge-wrapper,
-  .curve-wrapper {
-    transform: scaleX(-1);
-  }
-}

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

@@ -1,170 +0,0 @@
-@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"] {
-  .blockquote .icon,
-  .blockquote-default .icon {
-    @media (min-width: mobile) {
-      margin: 0 0 0 var(--arrow-spacing-l);
-    }
-  }
-
-  .icon {
-    margin: 0 0 0 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/src/components/Atoms/StoryElements/BlockQuote/block-quote.test.js

@@ -1,48 +0,0 @@
-import * as React from "react";
-import { shallow, mount } from "enzyme";
-import { generateStoryElementData } from "../../../Fixture";
-import { BlockQuote } from "./index";
-
-const element = generateStoryElementData("blockquote");
-
-describe("Block Quote Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(<BlockQuote element={element} template="default" />);
-    expect(wrapper.find({ "data-test-id": "blockquote" }).prop("className")).toMatch(/blockquote-default/);
-  });
-
-  it("Should render with background template", () => {
-    const wrapper = mount(<BlockQuote element={element} template="withBackground" />);
-    expect(wrapper.find({ "data-test-id": "blockquote" }).prop("className")).toMatch(/blockquote-withBackground/);
-  });
-
-  it("Should render with border template", () => {
-    const wrapper = mount(<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", () => {
-    const wrapper = shallow(
-      <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" style="border-color:unset"><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", () => {
-    const wrapper = shallow(<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", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
-    const wrapper = shallow(<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/src/components/Atoms/StoryElements/BlockQuote/index.js

@@ -1,82 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-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";
-
-const SelectionOfIcon = (iconType, template, blockQuoteColor, quoteColor) => {
-  const isMobile = clientWidth("mobile");
-  const dimension = isMobile ? "48px" : "64px";
-
-  if (template === "withBackground") {
-    if (iconType === "edgeIcon") {
-      return <EdgeIcon width={dimension} height={dimension} color={quoteColor} opacity=".4" />;
-    }
-    return <CurveIcon width={dimension} height={dimension} color={quoteColor} opacity=".4" />;
-  }
-
-  if (template !== "withBackground") {
-    if (iconType === "edgeIcon") {
-      return <EdgeIcon width={dimension} height={dimension} color={blockQuoteColor} />;
-    }
-    return <CurveIcon width={dimension} height={dimension} color={blockQuoteColor} />;
-  }
-};
-
-export const BlockQuoteBase = ({ element, template, css = {}, story = {}, config = {}, render, ...restProps }) => {
-  const { content, attribution } = get(element, ["metadata"]);
-  if (!content) return null;
-
-  const { blockQuoteColor, backgroundShade, iconType } = css;
-  const templateStyle = template ? `blockquote-${template}` : "blockquote";
-  const isBackground = template === "withBackground";
-  const textColor = isBackground ? getTextColor(backgroundShade) : "";
-  const theme = isBackground && backgroundShade ? { backgroundColor: backgroundShade } : {};
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(isBackground ? theme.backgroundColor : configData.theme);
-
-  const updateStructure = () => {
-    return template === "withBorder" ? (
-      <div styleName="icon-border">
-        <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
-        <div styleName="border" style={{ backgroundColor: blockQuoteColor || "initial" }} />
-      </div>
-    ) : (
-      <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
-    );
-  };
-
-  return (
-    <div
-      className="arrow-component arr--block-quote"
-      data-test-id="blockquote"
-      styleName={`${templateStyle} ${textColor}`}
-      style={theme}
-      {...restProps}>
-      <div styleName="quote-wrapper">
-        {updateStructure()}
-        <div styleName="wrapper" style={{ borderColor: blockQuoteColor || "unset" }}>
-          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: content }} />
-          <div styleName={`attribution ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: attribution }} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-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 const BlockQuote = withElementWrapper(BlockQuoteBase);

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

@@ -1,35 +0,0 @@
-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";
-
-const templateStyle = {
-  Default: "default",
-  "With Background": "withBackground",
-  "With Border": "withBorder"
-};
-const element = generateStoryElementData("blockquote");
-const iconStyle = {
-  "Curve Icon": "curveIcon",
-  "Edge Icon": "edgeIcon"
-};
-
-withStore("Atoms/Story Elements/Block Quote", {}, Readme)
-  .add("Default", () => (
-    <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", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
-    return <BlockQuote element={element} render={customTemplate} />;
-  });

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

@@ -1,43 +0,0 @@
-# Blurb
-
-Displays the blurb story element of the story
-
-## Usage
-
-#### Blurb story element with default template
-
-```jsx
-<Blurb element={element} template="default" />
-```
-
-#### Blurb story element with border template
-
-```jsx
-<Blurb element={element} template="withBorder" />
-```
-
-#### Blurb story element with external links opening in new tab
-
-```jsx
-const opts = { isExternalLink: true };
-
-<Blurb element={element} template="default" opts={opts} />;
-```
-
-#### Blurb story element with border color
-
-```jsx
-const css = { borderColor: "#ff214b" };
-
-<Blurb element={element} template="withBorder" css={css} />;
-```
-
-#### Replace default blurb element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-
-<Blurb element={element} render={customTemplate} />;
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/Blurb/blurb.m.css

@@ -1,56 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.blurb blockquote,
-.blurb-default blockquote,
-.blurb-withBorder blockquote {
-  font-family: var(--arrow-typeface-secondary);
-  font-size: var(--arrow-fs-s);
-  line-height: var(--arrow-lh-5);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-  }
-}
-
-.blurb blockquote,
-.blurb-default blockquote {
-  font-style: italic;
-  padding-left: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    padding-left: var(--arrow-spacing-l);
-  }
-}
-
-.blurb-withBorder blockquote {
-  padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
-  }
-}
-
-html[dir="rtl"] {
-  .blurb blockquote,
-  .blurb-default blockquote {
-    padding-left: 0;
-    padding-right: var(--arrow-spacing-m);
-    @media (min-width: mobile) {
-      padding-right: var(--arrow-spacing-l);
-    }
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono1);
-  a {
-    color: var(--primaryColor, var(--arrow-c-mono2));
-    border-bottom: 1px solid var(--primaryColor, var(--arrow-c-mono2));
-  }
-}
-
-.light {
-  color: var(--arrow-c-invert-mono1);
-  a {
-    color: var(--primaryColor, var(--arrow-c-invert-mono2));
-    border-bottom: 1px solid var(--primaryColor, var(--arrow-c-invert-mono2));
-  }
-}

package/src/components/Atoms/StoryElements/Blurb/blurb.test.js

@@ -1,71 +0,0 @@
-import * as React from "react";
-import { shallow, mount } from "enzyme";
-import { generateStoryElementData, generateStore } from "../../../Fixture";
-import { Blurb } from "./index";
-import { Provider } from "react-redux";
-
-const element = generateStoryElementData("blurb");
-
-describe("Blurb Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Blurb element={element} template="default" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-default/);
-  });
-
-  it("Should render border template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Blurb element={element} template="withBorder" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-withBorder/);
-  });
-
-  it("Should render default template with external link", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <Blurb template="default" opts={{ isExternalLink: true }} element={element} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a aria-label=\'content\' target=\'_blank\' href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
-    );
-  });
-
-  it("Should render default template without external link", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <Blurb template="default" opts={{ isExternalLink: false }} element={element} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
-    );
-  });
-
-  it("Should render the border template with border color", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Blurb template="withBorder" element={element} css={{ borderColor: "#ff214b" }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("style")).toEqual({ border: "2px solid #ff214b" });
-  });
-
-  it("Should render custom template", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <Blurb element={element} render={customTemplate} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe(
-      '<h3><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></h3>'
-    );
-  });
-});