@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor, shapeConfig } from "../../../../utils/utils";
+import { Link } from "@quintype/components";
+import "./reference.m.css";
+
+const ReferenceBase = ({ element, config = {}, opts = {}, ...restProps }) => {
+  if (!element) return null;
+
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+
+  const eleArr = element["story-elements"] && element["story-elements"].map((ref) => ref.metadata);
+  const { showHeadline = true, headlineText } = opts;
+
+  return (
+    <div className="arrow-component arr--reference-element" {...restProps}>
+      {eleArr &&
+        eleArr.map((metadata, index) => {
+          const { name = "", description = "", url } = metadata;
+          return (
+            <div styleName={`wrapper ${textInvertColor}`} key={index}>
+              <Link href={url} aria-label="reference-headline">
+                {showHeadline && (
+                  <div styleName="name" data-test-id="ref-headline">
+                    {headlineText || name}
+                  </div>
+                )}
+                <div styleName="description">{description}</div>
+              </Link>
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+ReferenceBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.arrayOf(
+      PropTypes.shape({
+        metadata: PropTypes.shape({ name: PropTypes.string, description: PropTypes.string, url: PropTypes.string })
+      })
+    )
+  }),
+  opts: PropTypes.shape({ hideHeadline: PropTypes.bool }),
+  config: shapeConfig
+};
+
+export const Reference = withElementWrapper(ReferenceBase);

package/src/components/Atoms/StoryElements/Reference/reference.m.css

@@ -0,0 +1,42 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.wrapper {
+  border-radius: var(--arrow-spacing-xxs);
+  padding: var(--arrow-spacing-m);
+  margin-bottom: var(--arrow-spacing-l);
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+.name {
+  font-size: var(--arrow-fs-m);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  margin-bottom: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.description {
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.dark {
+  background-color: var(--arrow-c-mono7);
+  border: solid 1px var(--arrow-c-mono7);
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  background-color: var(--arrow-c-invert-mono7);
+  border: solid 1px var(--arrow-c-invert-mono7);
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Atoms/StoryElements/Reference/reference.test.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { Provider } from "react-redux";
+import { Reference } from ".";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+
+const element = generateStoryElementData("references");
+
+describe("Reference element", () => {
+  it("Should render default template of the reference element", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Reference element={element} />;
+      </Provider>
+    );
+    expect(wrapper.find(Reference)).toHaveLength(1);
+  });
+
+  it("Should render headline if it is enabled", () => {
+    const wrapper = shallow(<Reference element={element} opts={{ hideHeadline: true }} />);
+    expect(wrapper.find({ "data-test-id": "ref-headline" }).length).toEqual(0);
+  });
+
+  it("Should not render headline if it is disabled", () => {
+    const wrapper = shallow(<Reference element={element} opts={{ hideHeadline: false }} />);
+    expect(wrapper.find({ "data-test-id": "ref-headline" }).length).toEqual(0);
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Reference } from "./index";
+import { withStore } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, text } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("references");
+
+withStore("Atoms/Story Elements/Reference", {}, Readme).add("Default", () => (
+  <Reference
+    element={element}
+    opts={{
+      showHeadline: boolean("Show Headline", true),
+      headlineText: text("Headline", "References")
+    }}
+  />
+));

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

@@ -0,0 +1,10 @@
+# Wrapper Story Element
+
+Story element is a a wrapper around `qt/components/StoryElement` which can be used as the fallback element handler component.
+For example, we can use `qt/arrow/StoryElement` for elements like, Table, File, JSEmbed, Polltype, Soundcloud etc
+
+## Usage
+
+```jsx
+<StoryElement element={element} />
+```

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { StoryElement as QTCStoryElement } from "@quintype/components";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { shapeStory, shapeConfig } from "../../../../utils/utils";
+import "./storyElement.m.css";
+
+const StoryElementBase = ({ element, story = {}, config = {}, ...restProps }) => {
+  if (element.type === "title" && element.hasDashedBullet) {
+    return (
+      <div data-test-id="story-elements">
+        <div className="story-element story-element-title">
+          <h2>
+            <div styleName="bullet-style-dash"></div>
+            {element.text}
+          </h2>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div {...restProps} data-test-id="story-elements">
+      <QTCStoryElement element={element} />
+    </div>
+  );
+};
+
+export const StoryElement = withElementWrapper(StoryElementBase);
+
+StoryElementBase.propTypes = {
+  element: PropTypes.object,
+  story: shapeStory,
+  config: shapeConfig
+};

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { StoryElement } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const elementJsembed = generateStoryElementData("jsembed");
+
+withStore(
+  "Atoms/Story Elements/StoryElement",
+
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("should work with any jsembed ", () => <StoryElement element={elementJsembed} />);

package/src/components/Atoms/StoryElements/StoryElement/storyElement.m.css

@@ -0,0 +1,23 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.bullet-style-dash {
+  width: 16px;
+  height: 16px;
+  background-color: var(--arrow-c-brand1);
+  display: inline-block;
+  @include tablet {
+    margin-bottom: 2px;
+  }
+}
+
+html[dir="ltr"] {
+  .bullet-style-dash {
+    margin-right: 5px;
+  }
+}
+
+html[dir="rtl"] {
+  .bullet-style-dash {
+    margin-left: 5px;
+  }
+}

package/src/components/Atoms/StoryElements/StoryElement/storyelement.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { StoryElement } from ".";
+import { generateStoryElementData } from "../../../Fixture";
+import { StoryElement as QTCStoryElement } from "@quintype/components";
+const element = generateStoryElementData("jsembed");
+
+describe("Story Element", () => {
+  it("should render with correct elements", () => {
+    const wrapper = shallow(<StoryElement element={element} />).dive();
+    expect(wrapper.find(QTCStoryElement).length).toEqual(1);
+  });
+});

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

@@ -0,0 +1,56 @@
+# Summary
+
+Displays the Summary element of the story
+
+## Usage
+
+#### Summary story element with default template
+
+```jsx
+<Summary element={element} />
+```
+
+#### Summary story element with header template
+
+```jsx
+<Summary element={element} template="header" />
+```
+
+#### Summary story element with border template
+
+```jsx
+<Summary element={element} template="border" />
+```
+
+#### Summary story element with header background color
+
+```jsx
+const css = { headerBgColor: "#ff214b" };
+
+<Summary element={element} template="borderLeft" css={css} />;
+```
+
+#### Summary story element without headline.
+
+```jsx
+const opts = { hideHeadline: true };
+
+<Summary element={element} template="borderLeft" opts={opts} />;
+```
+
+#### Summary story element with custom headline.
+
+```jsx
+const opts = { headline: true };
+<Summary element={element} template="borderLeft" opts={opts} />;
+```
+
+#### Replace default Summary element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<Summary element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { getTextColor, updateContentLinks, shapeStory, shapeConfig } from "../../../../utils/utils";
+
+import "./summary.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const SummaryBase = ({
+  element,
+  template = "",
+  opts = {},
+  css = {},
+  story = {},
+  config = {},
+  render,
+  ...restProps
+}) => {
+  const content = element.text;
+  if (!content) return null;
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { headerBgColor } = css;
+  const { isExternalLink = true, headline = "Summary", hideHeadline = false } = opts;
+  let text = (isExternalLink && updateContentLinks(content)) || content;
+
+  const supportedTemplates = ["header", "border"];
+  const templateStyle = supportedTemplates.includes(template) ? `summary-${template}` : "summary";
+
+  const contentBorder = hideHeadline ? `content-border` : "";
+  const renderTemplate = template === "header" || template === "border";
+  const updateHeaderColor = renderTemplate ? headerBgColor : "initial";
+  const textColor = renderTemplate ? getTextColor(headerBgColor) : "";
+  const updateContentColor = template === "header" ? "" : textInvertColor;
+
+  return (
+    <div
+      className="arrow-component arr--summary-element arr-custom-style"
+      styleName={templateStyle}
+      data-test-id="summary"
+      {...restProps}>
+      {!hideHeadline && (
+        <div styleName={`heading-wrapper ${textInvertColor}`} data-test-id="summary-headline">
+          <div styleName={`headline ${textColor} ${textInvertColor}`} style={{ backgroundColor: updateHeaderColor }}>
+            {headline}
+          </div>
+        </div>
+      )}
+      <div
+        styleName={`content ${contentBorder} ${updateContentColor} ${textInvertColor}`}
+        dangerouslySetInnerHTML={{ __html: text }}
+      />
+    </div>
+  );
+};
+
+SummaryBase.propTypes = {
+  element: PropTypes.shape({ text: PropTypes.string }),
+  template: PropTypes.string,
+  opts: PropTypes.shape({ isExternalLink: PropTypes.bool, headline: PropTypes.string, hideHeadline: PropTypes.bool }),
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.shape({ headerBgColor: PropTypes.string })
+};
+
+export const Summary = withElementWrapper(SummaryBase);

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+import { Summary } from "./index";
+import { color, boolean, text } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("summary");
+
+const summaryTemplate = {
+  default: "",
+  header: "header",
+  border: "border"
+};
+
+withStore("Atoms/Story Elements/Summary", {}, Readme)
+  .add("Default", () => (
+    <Summary
+      element={element}
+      template={optionalSelect("templates", summaryTemplate)}
+      css={{ headerBgColor: color("Color", "#ff214b") }}
+      opts={{
+        isExternalLink: boolean("External Link", true),
+        headline: text("Headline", "Summary"),
+        hideHeadline: boolean("Hide Headline", false)
+      }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <Summary element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Summary/summary.m.css

@@ -0,0 +1,169 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.headline {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content p {
+  font-style: italic;
+  margin-bottom: 15px;
+}
+
+.summary:global(.arrow-component) .content > ul,
+.summary-header:global(.arrow-component) .content > ul,
+.summary-border:global(.arrow-component) .content > ul {
+  list-style: initial;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.summary:global(.arrow-component) .content > ol,
+.summary-header:global(.arrow-component) .content > ol,
+.summary-border:global(.arrow-component) .content > ol {
+  list-style: auto;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.summary:global(.arrow-component) .content li,
+.summary-header:global(.arrow-component) .content li,
+.summary-border:global(.arrow-component) .content li {
+  display: list-item;
+  font-size: var(--arrow-fs-m);
+  margin-bottom: 15px;
+}
+
+.summary:global(.arrow-component) .content li > p,
+.summary-header:global(.arrow-component) .content li > p,
+.summary-border:global(.arrow-component) .content li > p {
+  margin-bottom: unset;
+}
+
+.summary:global(.arrow-component) .content a,
+.summary-header:global(.arrow-component) .content a,
+.summary-border:global(.arrow-component) .content a {
+  color: var(--textElementHyperlinkColor);
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+}
+
+.summary:global(.arrow-component) .content > p,
+.summary-header:global(.arrow-component) .content > p,
+.summary-border:global(.arrow-component) .content > p,
+.dark {
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-dark);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content > p,
+.summary-header:global(.arrow-component) .content > p,
+.summary-border:global(.arrow-component) .content > p {
+  margin-bottom: 15px;
+}
+
+.summary:global(.arrow-component) .content.light > p,
+.summary-header:global(.arrow-component) .content.light > p,
+.summary-border:global(.arrow-component) .content.light > p {
+  color: var(--arrow-c-light);
+  margin-bottom: 15px;
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.light a {
+  color: var(--arrow-c-invert-mono1);
+  border-bottom: 1px solid var(--arrow-c-invert-mono1);
+}
+
+/* default template */
+.summary .headline {
+  margin-bottom: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+/* headline template */
+.summary-header .headline {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-s);
+  font-size: var(--arrow-fs-s);
+  background-color: var(--arrow-c-brand1);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  }
+}
+.summary-header .content {
+  background-color: var(--arrow-c-invert-mono7);
+  padding: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+/* border template */
+.summary-border .heading-wrapper {
+  display: flex;
+  margin-bottom: -22px;
+}
+
+.summary-border .heading-wrapper::before {
+  content: " ";
+  position: relative;
+  width: var(--arrow-spacing-m);
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+}
+
+.summary-border .heading-wrapper.light::before {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .heading-wrapper::after {
+  content: " ";
+  position: relative;
+  flex: 1 1 auto;
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+  margin-right: 0;
+}
+
+.summary-border .heading-wrapper.light::after {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .content {
+  border: 1px solid var(--arrow-c-dark);
+  border-top: none;
+  padding: var(--arrow-spacing-l);
+}
+
+.summary-border .content.light {
+  border: 1px solid var(--arrow-c-light);
+}
+.summary-border .headline {
+  background-color: var(--arrow-c-brand1);
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  line-height: var(--arrow-lh-4);
+  border-radius: 2px;
+  margin: 0 var(--arrow-spacing-xs);
+}
+
+.summary-border .content-border.dark {
+  border: 1px solid var(--arrow-c-mono5);
+}
+
+.summary-border .content-border.light {
+  border: 1px solid var(--arrow-c-invert-mono5);
+}

package/src/components/Atoms/StoryElements/Summary/summary.test.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import expect from "expect";
+import { generateStoryElementData } from "../../../Fixture";
+import { Summary } from "./index";
+
+const element = generateStoryElementData("summary");
+
+describe("Summary Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(<Summary element={element} />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary/);
+  });
+
+  it("Should render border left template", () => {
+    const wrapper = mount(<Summary element={element} template="header" />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary-header/);
+  });
+
+  it("Should render border top template", () => {
+    const wrapper = mount(<Summary element={element} template="border" />);
+    expect(wrapper.find({ "data-test-id": "summary" }).prop("className")).toMatch(/summary-border/);
+  });
+
+  it("Should render template without headline", () => {
+    const wrapper = shallow(<Summary element={element} opts={{ hideHeadline: true }} />);
+    expect(wrapper.find({ "data-test-id": "summary-headline" }).length).toEqual(0);
+  });
+
+  it("Should render template with custom headline", () => {
+    const wrapper = mount(<Summary element={element} opts={{ headline: "in short" }} />);
+    expect(wrapper.find({ "data-test-id": "summary-headline" }).text()).toEqual("in short");
+  });
+
+  it("Should render template with header background color", () => {
+    const wrapper = mount(<Summary element={element} template="header" css={{ headerBgColor: " #b3243e" }} />);
+    expect(wrapper.html()).toBe(
+      `<div data-test-id="summary" class="arrow-component arr--summary-element arr-custom-style summary-m_summary-header__UKVHi "><div data-test-id="summary-headline" class="summary-m_heading-wrapper__23S51 summary-m_dark__1ZuzR"><div style="background-color: rgb(179, 36, 62);" class="summary-m_headline__30sie summary-m_dark__1ZuzR summary-m_dark__1ZuzR">Summary</div></div><div class="summary-m_content__37n8C summary-m_dark__1ZuzR"><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div>`
+    );
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(<Summary element={element} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      "<h3><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></h3>"
+    );
+  });
+});

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

@@ -0,0 +1,32 @@
+# Text Story Element
+
+Displays the text story element of the story
+
+## Usage
+
+#### Default text story element
+```jsx
+<Text element={element} />
+```
+
+#### Text story element with external links opening in new tab
+```jsx
+const opts = { isExternalLink: true };
+
+<Text element={element} opts={opts} />
+```
+
+#### Text story element as promotional message
+```jsx
+const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+<Text element={promotionalMessage} opts={opts} />
+```
+
+#### Replace default text story element template with custom template passed using render
+```jsx
+const customTemplate = ({element}) => <h3 dangerouslySetInnerHTML={{ __html: element.text }}/>;
+
+<Text element={element} render={customTemplate} />
+```
+
+<!-- PROPS -->