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

package/src/components/Rows/AsideCollection/index.js

@@ -0,0 +1,175 @@
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { isEmpty, getCollectionData } from "../../../utils/utils";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import KeyEvents from "../../Molecules/KeyEvents";
+import "./aside-collection.m.css";
+
+const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
+  const { theme = "", title = "", collectionSlug = "" } = slotData || config;
+  const heading = title || "Related Stories";
+  const isHorizontal = horizontal ? "horizontal-wrapper" : "";
+  const mountAt = get(config, ["mountAtPrefix"], "");
+  const [storyList, updateStoryList] = useState([]);
+  const [collectionData, updateCollectionData] = useState([]);
+  const updateStoryListItems = async (slug) => {
+    const collectionDataResponse = await getCollectionData(slug, mountAt);
+    updateCollectionData(collectionDataResponse);
+    const storyItems = collectionDataResponse.items;
+    updateStoryList(storyItems);
+  };
+
+  useEffect(() => {
+    if (collectionSlug) {
+      updateStoryListItems(collectionSlug);
+    }
+  }, [collectionSlug]);
+
+  useEffect(() => {
+    if (!collectionSlug && data) {
+      const storyItems = data.items || data;
+      updateStoryList(storyItems);
+    }
+  }, [data, collectionSlug]);
+
+  return (
+    <>
+      <CollectionName customCollectionName={heading} textColor collection={collectionData} />
+      <div styleName="stories">
+        {storyList && storyList.length > 0 ? (
+          storyList.slice(0, 4).map((item) => {
+            const story = item.story || item;
+            return (
+              <div styleName="story" key={story.id}>
+                <StoryCard story={story} isHorizontal theme={theme} config={config}>
+                  <div styleName="story-hero-image">
+                    <HeroImage story={story} aspectRatio={[[4, 3]]} />
+                  </div>
+                  <div>
+                    {isHorizontal && <SectionTag story={story} />}
+                    <Headline story={story} />
+                    <div styleName="story-byline">
+                      <AuthorWithTime config={opts} story={story} />
+                    </div>
+                  </div>
+                </StoryCard>
+              </div>
+            );
+          })
+        ) : (
+          <div data-test-id="no-stories" styleName="info">
+            No stories found.
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+StoryCollection.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slotData: PropTypes.object,
+  opts: PropTypes.object
+};
+
+const AsideCollection = ({
+  data = {},
+  config = {},
+  horizontal = false,
+  slots = [],
+  sticky = false,
+  keyEventsData = {},
+  enableKeyEvents = false,
+  adComponent,
+  widgetComp,
+  storyId,
+  opts = {}
+}) => {
+  if (isEmpty(data)) return null;
+  const { theme } = config;
+  const isHorizontal = horizontal ? "horizontal-wrapper" : "";
+
+  if (horizontal) {
+    return (
+      <div
+        className="arrow-component arr--aside-collection"
+        styleName={`wrapper ${isHorizontal}`}
+        style={{ backgroundColor: theme }}
+        data-test-id="aside-collection"
+        id={`aside-collection-${storyId}`}>
+        <StoryCollection data={data} horizontal={horizontal} config={config} opts={opts} />
+      </div>
+    );
+  }
+  const isSticky = sticky ? "sticky" : "";
+  const asideSlot = (type, slot, index) => {
+    switch (type) {
+      case "ad":
+        return (
+          <div styleName="ad-slot" className="aside-collection-ad-slot">
+            {adComponent({ ...slot, id: `ad-${index}_${storyId}` })}
+          </div>
+        );
+      case "widget":
+        return (
+          <div styleName="ad-slot" className="aside-collection-ad-slot">
+            {widgetComp({ ...slot, id: `widget-${index}_${storyId}` })}
+          </div>
+        );
+
+      case "collection":
+        return (
+          <div id={`aside-collection-${index}_${storyId}`}>
+            <StoryCollection slotData={slot} data={data} horizontal={horizontal} config={config} opts={opts} />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div
+      className="arrow-component arr--aside-collection"
+      styleName={["wrapper", isHorizontal, isSticky].join(" ")}
+      style={{ backgroundColor: theme }}
+      data-test-id="aside-collection">
+      {enableKeyEvents && (
+        <KeyEvents
+          story={keyEventsData.story}
+          showLoadMore={keyEventsData.showLoadMore}
+          config={keyEventsData.config}
+        />
+      )}
+      {slots.map((slot, index) => asideSlot(slot.type, slot, index))}
+    </div>
+  );
+};
+
+AsideCollection.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  opts: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slots: PropTypes.array,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  sticky: PropTypes.bool,
+  keyEventsData: PropTypes.shape({
+    story: PropTypes.object,
+    config: PropTypes.object,
+    showLoadMore: PropTypes.boolean
+  }),
+  enableKeyEvents: PropTypes.boolean,
+  storyId: PropTypes.string
+};
+
+export default StateProvider(AsideCollection);
+export { StoryCollection };

package/src/components/Rows/AsideCollection/stories.js

@@ -0,0 +1,52 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import AsideCollection from ".";
+import { collectionNameTemplates, optionalSelect, withStore } from "../../../../storybook";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateStory } from "../../Fixture";
+import { slotData } from "../../Fixture/slot-config";
+import Readme from "./README.md";
+
+const story = generateStory();
+const stories = [story, story, story];
+const label = "Background color";
+const defaultvalue = "#ffffff";
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Aside Collection",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("Aside Collection template", () => {
+  const config = {
+    title: text("Title", "Recommended Stories"),
+    theme: color(label, defaultvalue),
+    showAuthor: boolean("Author", true),
+    showTime: boolean("Timestamp", true),
+    showReadTime: boolean("Read time", true),
+    showRowTitle: boolean("Collection name", true),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue)
+  };
+  return (
+    <AsideCollection
+      data={stories}
+      config={config}
+      adComp={configurableSlot}
+      widgetComp={configurableSlot}
+      slots={slotData}
+      sticky={true}
+    />
+  );
+});

package/src/components/Rows/AuthorIntroductionCard/README.md

@@ -0,0 +1,43 @@
+# Author Introduction Card
+
+Author Introduction card is used to display the author information which consists of name, bio with author image and social connect of the author.
+
+## Usage
+
+Import the AuthorIntroductionCard and pass authorDetails as props and config.
+
+```jsx
+import { AuthorIntroductionCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} >
+
+```
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} template="square" >
+
+```
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+  enableBio: false;
+  enableSocialLinks: true;
+};
+<AuthorIntroductionCard props={authorDetails} config={contextConfig} template="smallCircle" >
+
+```

package/src/components/Rows/AuthorIntroductionCard/author-intro.m.css

@@ -0,0 +1,278 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.connect {
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  align-self: center;
+  margin-bottom: var(--arrow-spacing-xxs);
+}
+
+.social-share {
+  flex: 1;
+  padding: var(--arrow-spacing-xs);
+}
+
+.share-icon {
+  display: flex;
+  align-items: flex-end;
+  margin-right: var(--arrow-spacing-l);
+}
+
+.default .author-image {
+  align-self: center;
+  @media (min-width: mobile) {
+    grid-column: 8/12;
+  }
+}
+
+.default .author-name {
+  color: var(--arrow-c-mono2);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-5);
+  align-self: center;
+  margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    line-height: var(--arrow-lh-2);
+    align-self: flex-start;
+  }
+}
+
+.default .author-description {
+  margin: var(--arrow-spacing-s) 0;
+  color: var(--arrow-c-mono4);
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  white-space: pre-line;
+}
+
+.default .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-m) var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    display: grid;
+    grid-gap: var(--arrow-fs-l);
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0 0 var(--arrow-fs-xxl) 0;
+  }
+}
+
+.default .introduction-card {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  @media (min-width: mobile) {
+    grid-column: 2/8;
+  }
+  @media (min-width: tablet) {
+    grid-column: 2/7;
+  }
+}
+
+.default .social-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: mobile) {
+    align-items: center;
+  }
+  @media (min-width: tablet) {
+    margin-top: unset;
+    position: relative;
+    align-items: unset;
+  }
+}
+
+.default .connect {
+  @media (min-width: tablet) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.default .linkWrapper {
+  display: flex;
+}
+
+.default .social-connect-wrapper {
+  @media (min-width: mobile) {
+    display: flex;
+  }
+  @media (min-width: tablet) {
+    margin-top: var(--arrow-spacing-xs);
+    display: block;
+  }
+}
+
+.default :global(.desktop-share-wrapper) {
+  @media (min-width: tablet) {
+    position: absolute;
+    right: 0;
+    max-width: 42px;
+  }
+}
+
+.default .social-wrapper > :nth-child(2) {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: unset;
+  }
+}
+
+.default .social-connect-wrapper > :nth-child(2) {
+  margin-left: unset;
+  @media (min-width: mobile) {
+    margin-left: var(--arrow-spacing-xs);
+  }
+  @media (min-width: tablet) {
+    margin-left: unset;
+  }
+}
+
+.default .wrapper.dark {
+  border-bottom: 1px solid var(--dark-border);
+}
+
+.default .wrapper.light {
+  border-bottom: 1px solid var(--light-border);
+}
+
+.small-circle {
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+    height: 100%;
+    @media (min-width: tablet) {
+      padding: var(--arrow-spacing-xl);
+    }
+  }
+}
+
+.small-circle.border {
+  border-radius: 3px;
+  padding: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  }
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-xl);
+  }
+}
+
+.small-circle.border.dark {
+  border: solid 1px var(--dark-border);
+}
+
+.small-circle.border.light {
+  border: solid 1px var(--light-border);
+}
+
+.small-circle .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.small-circle .introduction-card {
+  @media (min-width: mobile) {
+    text-align: center;
+  }
+}
+
+.small-circle .author-image {
+  display: flex;
+  align-items: center;
+  @media (min-width: mobile) {
+    justify-content: center;
+    align-items: unset;
+  }
+}
+
+.small-circle .social-wrapper {
+  @media (min-width: mobile) {
+    justify-content: center;
+  }
+}
+
+.small-circle .author-name {
+  color: var(--arrow-c-mono2);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.small-circle .author-image > div {
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-right: unset;
+  }
+}
+
+.small-circle .author-description,
+.small-circle .connect {
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.small-circle .author-description {
+  position: relative;
+  max-height: 63px;
+  overflow: hidden;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.small-circle .fade-out {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 90%;
+  height: 21px;
+  background-image: inherit;
+}
+
+.small-circle .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: var(--arrow-spacing-xs);
+  }
+}
+
+.small-circle.border .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.default .dark,
+.small-circle .dark {
+  color: var(--arrow-c-mono2);
+}
+
+.default .light,
+.small-circle .light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.default .social-connect-wrapper > :nth-child(2),
+.small-circle .social-connect-wrapper > :nth-child(1) {
+  padding-left: unset;
+}
+
+.small-circle .social-share {
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+html[dir="rtl"] {
+  .default :global(.desktop-share-wrapper) {
+    @media (min-width: tablet) {
+      position: static;
+    }
+  }
+}

package/src/components/Rows/AuthorIntroductionCard/author-intro.test.js

@@ -0,0 +1,106 @@
+import React from "react";
+import { mount } from "enzyme";
+import AuthorIntroductionCard from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+
+describe("Author Intro component", () => {
+  it("Should render default template with border, author bio and social-links enabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+  });
+
+  it("Should render default template with border, author bio and social-links disabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+  });
+
+  it("Should render square template with border, author bio and social-links enabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+  });
+
+  it("Should render square template with border, author bio and social-links disabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+  });
+
+  it("Should render small cirlce template with border, author bio and social-links enabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true,
+      borderSupport: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/border/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(7);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(1);
+  });
+
+  it("Should render small cirlce template with border, author bio and social-links disabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false,
+      borderSupport: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "author-intro" }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({ "data-test-id": "social-link" }).length).toBe(0);
+    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toBe(0);
+  });
+});