@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import "./quote.m.css";
+import { shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+
+const QuoteBase = ({ element, template = "", css = {}, story = {}, config = {}, render, ...restProps }) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { content, attribution } = element.metadata;
+  if (!content) return null;
+  const { borderColor } = css;
+  const updateBorderColor = template === "borderLeft" && `4px solid ${borderColor}`;
+  const templateStyle = template ? `quote-${template}` : "quote";
+
+  return (
+    <div className="arrow-component arr--quote-element" data-test-id="quote" styleName={templateStyle} {...restProps}>
+      {template === "borderTopSmall" && (
+        <div styleName="line" style={borderColor && { backgroundColor: borderColor }} />
+      )}
+      <p
+        styleName={`text ${textInvertColor}`}
+        style={borderColor && { borderLeft: updateBorderColor }}
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
+      <p data-test-id="quote-attribution" styleName={`attribution ${textInvertColor}`}>
+        {attribution}
+      </p>
+    </div>
+  );
+};
+
+QuoteBase.propTypes = {
+  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
+  /** template can be default, borderTopSmall and borderLeft  */
+  template: PropTypes.string,
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+
+export const Quote = withElementWrapper(QuoteBase);

package/src/components/Atoms/StoryElements/Quote/quote.m.css

@@ -0,0 +1,111 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.quote .text,
+.quote-borderNone .text,
+.quote-borderTopSmall .text,
+.quote-borderLeft .text,
+.dark {
+  font-weight: var(--arrow-fw-semi-bold);
+  color: var(--arrow-c-mono2);
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.quote .text.light,
+.quote-borderNone .text.light,
+.quote-borderTopSmall .text.light,
+.quote-borderLeft .text.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.quote .text,
+.quote-borderNone .text {
+  font-style: italic;
+}
+
+.quote-borderLeft .text {
+  border-left: 4px solid var(--arrow-c-brand1);
+  padding-left: var(--arrow-spacing-l);
+}
+
+.quote .attribution,
+.quote-borderNone .attribution,
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution,
+.dark {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-semi-bold);
+  font-family: var(--arrow-typeface-secondary);
+  color: var(--arrow-c-mono4);
+  font-style: italic;
+  display: flex;
+  margin-top: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+.quote .attribution.light,
+.quote-borderNone .attribution.light,
+.quote-borderLeft .attribution.light,
+.quote-borderTopSmall .attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.quote-borderLeft .attribution {
+  margin-left: var(--arrow-spacing-l);
+}
+
+.quote .attribution,
+.quote-borderNone .attribution {
+  justify-content: flex-end;
+}
+
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution {
+  justify-content: flex-start;
+}
+
+.quote .attribution:before,
+.quote-borderNone .attribution:before {
+  content: " ";
+  width: 12px;
+  height: 2px;
+  background-color: var(--arrow-c-mono4);
+  margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
+}
+
+.quote .attribution.light:before,
+.quote-borderNone .attribution.light:before {
+  background-color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .quote .attribution,
+  .quote-borderNone .attribution {
+    &::before {
+      content: none;
+    }
+    &::after {
+      content: " ";
+      width: 12px;
+      height: 2px;
+      background-color: var(--arrow-c-mono4);
+      margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
+    }
+  }
+}
+
+.quote-borderTopSmall .line {
+  width: 32px;
+  height: 4px;
+  background-color: var(--arrow-c-brand1);
+  margin-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-s);
+  }
+}

package/src/components/Atoms/StoryElements/Quote/quote.test.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { Quote } from "./index";
+
+const element = generateStoryElementData("quote");
+
+describe("Quote Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(<Quote element={element} template="borderNone" />);
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderNone/);
+  });
+
+  it("Should render border left template", () => {
+    const wrapper = mount(<Quote element={element} template="borderLeft" />);
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderLeft/);
+  });
+
+  it("Should render border top template", () => {
+    const wrapper = mount(<Quote element={element} template="borderTopSmall" />);
+    expect(wrapper.find({ "data-test-id": "quote" }).prop("className")).toMatch(/quote-borderTopSmall/);
+  });
+
+  it("Should render border left template with border color", () => {
+    const wrapper = shallow(<Quote template="borderLeft" element={element} css={{ borderColor: "#ff214b" }} />);
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">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.</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Player</p></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(<Quote 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/Quote/stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Quote } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("quote");
+const collectionTemplates = {
+  default: "borderNone",
+  borderLeft: "borderLeft",
+  borderTopSml: "borderTopSmall"
+};
+
+withStore("Atoms/Story Elements/Quote", {}, Readme)
+  .add("Default", () => (
+    <Quote
+      element={element}
+      template={optionalSelect("templates", collectionTemplates)}
+      opts={{ isExternalLink: boolean("External Link", true) }}
+      css={{ borderColor: color("Color", "#ff214b") }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
+    return <Quote element={element} render={customTemplate} />;
+  });

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

@@ -0,0 +1,9 @@
+## Reference
+
+Reference element displays the referenced content to the story.
+
+# Usage
+
+```jsx
+<Reference element={element} >
+```

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,21 @@
+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";
+
+const StoryElementBase = ({ element, story = {}, config = {}, ...restProps }) => {
+  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.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,68 @@
+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 configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const content = element.text;
+  if (!content) return null;
+
+  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}` : "";
+  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} />;
+  });