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

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

@@ -0,0 +1,150 @@
+import React from "react";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { collectionToStories } from "@quintype/components";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { SectionTag } from "../../Atoms/SectionTag";
+import PropTypes from "prop-types";
+import { StateProvider } from "../../SharedContext";
+import "./list-component.m.css";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash.get";
+
+const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideButton }) => {
+  const storyItems = collectionToStories(collection);
+  if (storyItems.length < 1) {
+    return null;
+  }
+  const {
+    collectionNameBorderColor = "",
+    borderColor = "",
+    theme = "",
+    border = "",
+    collectionNameTemplate = "",
+    footerButton = "",
+    localizationConfig = {}
+  } = config;
+
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const url = generateNavigateSlug(collection, qtConfig);
+
+  const borderHandler = (story) => {
+    switch (border) {
+      case "bottom":
+        return (
+          <div styleName="one-col-border-bottom">
+            <StoryCard
+              story={story}
+              theme={theme}
+              headerLevel="4"
+              isHorizontal
+              border={border}
+              aspectRatio={[[4, 3]]}
+              borderColor={borderColor}
+              prefix="By"
+              config={config}
+            />
+          </div>
+        );
+      case "full":
+        return (
+          <div styleName="one-col-border-full">
+            <StoryCard
+              story={story}
+              border={border}
+              theme={theme}
+              isHorizontal
+              borderColor={borderColor}
+              config={config}>
+              <HeroImage story={story} isHorizontal aspectRatio={[[4, 3]]} />
+              <div styleName="story-card-content-wrapper">
+                <StorycardContent story={story} borderColor={borderColor} config={config}>
+                  <SectionTag story={story} />
+                  <Headline story={story} headerLevel="4" premiumStoryIconConfig={config} />
+                  <Subheadline story={story} />
+                  <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
+                </StorycardContent>
+              </div>
+            </StoryCard>
+          </div>
+        );
+      default:
+        return (
+          <div styleName="one-col-border-default">
+            <StoryCard
+              story={story}
+              theme={theme}
+              headerLevel="4"
+              isHorizontal
+              border={border}
+              aspectRatio={[[4, 3]]}
+              borderColor={borderColor}
+              prefix="By"
+              config={config}
+            />
+          </div>
+        );
+    }
+  };
+
+  const textColor = getTextColor(theme);
+
+  return (
+    <div className="full-width-with-padding arrow-component" style={{ backgroundColor: theme, color: textColor }}>
+      <div styleName="list-wrapper ">
+        <CollectionName
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+        />
+        <div styleName="wrapper" style={{ backgroundColor: theme, color: textColor }}>
+          <div styleName="list">
+            {storyItems.slice(0, limit).map((story, index) => {
+              return <div key={`default-${index}`}>{borderHandler(story)}</div>;
+            })}
+          </div>
+        </div>
+        {!hideButton && (
+          <div>
+            {getMoreStories ? (
+              <LoadmoreButton
+                onClick={getMoreStories}
+                template={footerButton}
+                config={config}
+                navigate={() => navigateTo(dispatch, url)}
+                qtConfig={qtConfig}
+              />
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+ListComponent.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+  /** The config for the Row */
+  config: PropTypes.shape({
+    borderColor: PropTypes.string,
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    footerButton: PropTypes.string,
+    // row title style
+    collectionNameTemplate: PropTypes.string,
+    // row title style colour
+    collectionNameBorderColor: PropTypes.string
+  }),
+  getMoreStories: PropTypes.object.isRequired,
+  limit: PropTypes.number,
+  hideButton: PropTypes.bool
+};
+
+export default StateProvider(ListComponent);

package/src/components/Rows/ListComponent/list-component.m.css

@@ -0,0 +1,65 @@
+@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-small (width < 768px);
+
+.list-wrapper {
+  padding: var(--arrow-spacing-s);
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: var(--arrow-spacing-xs) 0;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 44px;
+    margin: var(--arrow-spacing-m) 0;
+  }
+}
+
+.one-col-border-full {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+.one-col-border-bottom {
+  padding-top: var(--arrow-spacing-m);
+}
+.one-col-border-default {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+.list {
+  grid-column: 1/3;
+  grid-row: 2/3;
+}
+
+.story-card-content-wrapper {
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0;
+  @media (--viewport-medium) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 0;
+  }
+}
+
+.list :global .arr--hero-image {
+  @media (--viewport-medium) {
+    padding-right: 24px;
+  }
+}
+
+html[dir="rtl"] {
+  .list :global .arr--hero-image {
+    @media (--viewport-medium) {
+      padding-left: 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+.list-wrapper :global(.arr--sub-headline) {
+  @media (--viewport-small) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,63 @@
+import ListComponent from "./index";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+
+import React from "react";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import { generateCollection } from "../../Fixture/";
+import readme from "./README.md";
+
+const label = "color";
+const defaultvalue = "#ffffff";
+
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+const sectionTagBorderColor = "Section Tag Border Color";
+const sectionTagDefaultvalue = "#3a9fdd";
+
+const collection = generateCollection({ stories: 10 });
+const borderOptions = {
+  "No Value": "",
+  bottom: "bottom",
+  full: "full"
+};
+const footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount"
+};
+
+const getMoreStories = () => {
+  console.log("load more data");
+};
+
+withStore(
+  "Rows/List stories",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+      borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+      theme: color(label, defaultvalue),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+      border: optionalSelect("Border Level", borderOptions),
+      showSection: boolean("Section disable", true),
+      showAuthor: boolean("Author disable", true),
+      showTime: boolean("Timestamp disable", true),
+      footerButton: optionalSelect("Footer Button", footerButton),
+      buttonText: text("Footer text", "Read More"),
+      showRowTitle: boolean("Row title", true),
+      initialLoadCount: text("Initial Load Count", 6),
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true)
+    };
+    return <ListComponent collection={collection} config={contextConfig} getMoreStories={getMoreStories} />;
+  });

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

@@ -0,0 +1,21 @@
+# MagazineEditions
+
+Magazine Editions is used to represent the issues of a magazine.
+
+## Usage
+
+Import the MagazineEditions and pass magazine collection, props and the config.
+
+```jsx
+import { MagazineEditions } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineEditions collection={magazineCollection} config={contextConfig} >
+
+```

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

@@ -0,0 +1,91 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "./magazine-editions.m.css";
+import { StateProvider } from "../../SharedContext";
+import get from "lodash/get";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+
+const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLoadmore = false }) => {
+  if (!collection.length) return null;
+  const {
+    theme = "",
+    collectionNameTemplate = "",
+    showRowTitle = true,
+    rowTitle = "Other Issues",
+    editionNameFormat = "magazineDate",
+    template = "NavigateToPage"
+  } = config;
+  const textColor = getTextColor(theme);
+  let issues = collection.map((issue) => issue.collection) || [];
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const dispatch = useDispatch();
+  const url = generateNavigateSlug(collection, { ...qtConfig, ...config });
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component arr-magazine-issues"
+      style={{ backgroundColor: theme, color: textColor }}
+      data-test-id="editions">
+      <div styleName={`container ${textColor}`}>
+        {showRowTitle && (
+          <CollectionName
+            collection={issues}
+            collectionNameTemplate={collectionNameTemplate}
+            customCollectionName={rowTitle}
+            navigate={false}
+          />
+        )}
+        <div styleName="issues">
+          {issues.slice(0, limit).map((issue, index) => {
+            const { name, "created-at": createdAt, "collection-date": issueDate } = issue;
+            const date = issueDate || createdAt;
+            const timeStampConfig = {
+              isUpperCase: true,
+              disableMeridiem: true
+            };
+            return (
+              <div key={index} data-test-id={`current-issue-${index}`}>
+                <MagazineCoverImageCard collection={issue} config={{ ...config, isArchivePage: false }} />
+                <div styleName="date" data-test-id="issue-label">
+                  {editionNameFormat === "magazineTitle"
+                    ? name
+                    : getTimeStamp(date, timestampToFormat, timeStampConfig)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {showLoadmore && (
+          <LoadmoreButton
+            onClick={onClick}
+            template={template}
+            config={config}
+            qtConfig={qtConfig}
+            navigate={() => navigateTo(dispatch, url)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+MagazineEditions.propTypes = {
+  collection: PropTypes.array,
+  config: PropTypes.shape({
+    rowTitle: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    theme: PropTypes.string,
+    editionNameFormat: PropTypes.string,
+    showRowTitle: PropTypes.bool
+  }),
+  onClick: PropTypes.func,
+  limit: PropTypes.number,
+  showLoadmore: PropTypes.bool
+};
+
+export default StateProvider(MagazineEditions);

package/src/components/Rows/MagazineEditions/magazine-editions.m.css

@@ -0,0 +1,50 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.container {
+  margin: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin: var(--arrow-spacing-l);
+    @media (min-width: tablet) {
+      margin: 0;
+    }
+  }
+}
+
+.issues {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: var(--arrow-spacing-l);
+  grid-row-gap: var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    grid-template-columns: repeat(4, 1fr);
+    @media (min-width: tablet) {
+      grid-column-gap: 70px;
+    }
+  }
+}
+
+.date {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--arrow-spacing-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-2);
+  font-size: var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.info {
+  text-align: center;
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Rows/MagazineEditions/magazine-editions.test.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import MagazineEditions from ".";
+import { generateStore, generateMagazineIssues } from "../../Fixture";
+import { Provider } from "react-redux";
+
+const magazineCollection = generateMagazineIssues();
+
+describe("MagazineEditions component", () => {
+  it("Should render template with array of collections", () => {
+    const contextConfig = {
+      collectionNameBorderColor: "",
+      theme: "",
+      collectionNameTemplate: "",
+      footerButton: "",
+      editionsTitle: "",
+      enableEditionsTitle: true,
+      title: ""
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <MagazineEditions collection={magazineCollection} config={contextConfig} />
+        );
+      </Provider>
+    );
+    expect(wrapper.find(MagazineEditions)).toHaveLength(1);
+  });
+
+  it("Should render `no editions message` if there are no editions", () => {
+    const wrapper = shallow(<MagazineEditions />);
+    expect(wrapper.find(MagazineEditions)).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { generateMagazineIssues } from "../../Fixture";
+import MagazineEditions from "./index";
+import Readme from "./README.md";
+import { color, text, boolean } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+
+const magazineCollection = generateMagazineIssues();
+
+const footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  CustomUrlPath: "CustomUrlPath"
+};
+
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+withStore(
+  "Rows/Magazine Editions",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Magazine Editions", () => {
+  const contextConfig = {
+    theme: color("Background Color", "#ffffff"),
+    showRowTitle: boolean("Show Row Title", true),
+    title: text("Magazine Row title", "Magazine Editions"),
+    collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    buttonText: text("Footer text", "Read More"),
+    footerButton: optionalSelect("Button Settings", footerButton),
+    customUrlPath: text("Custom URL", ""),
+    enableEditionsTitle: boolean("Show Editions Title", true),
+    editionsTitle: text("Editions Title", "Magazine Title"),
+    showButton: boolean("Show Button", true),
+    initialLoadCount: text("Initial Load Count", 4)
+  };
+  return <MagazineEditions collection={magazineCollection} config={contextConfig} showLoadmore={true} />;
+});

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

@@ -0,0 +1,21 @@
+# MagazineHeaderCard
+
+Magazine Header Card is used to display the brief content of the magazine.
+
+## Usage
+
+Import the MagazineHeaderCard and pass collection as props and the config.
+
+```jsx
+import { MagazineHeaderCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineHeaderCard collection={collection} config={contextConfig}>
+
+```

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

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "./magazine-cards.m.css";
+import { StateProvider } from "../../SharedContext";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+import upperCase from "lodash/upperCase";
+
+const MagazineHeaderCard = ({ collection = {}, config = {} }) => {
+  const { "created-at": createdAt, "collection-date": issueDate, summary } = collection;
+  const { theme = "", customUrlPath = "", magazineTitle = "", magazinePageUrl = "", magazineSlug = "" } = config;
+  const textColor = getTextColor(theme);
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const url = generateNavigateSlug(collection, qtConfig, customUrlPath);
+  const date = issueDate || createdAt;
+  const timeStampConfig = {
+    isUpperCase: true,
+    disableMeridiem: true
+  };
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      style={{ backgroundColor: theme }}
+      data-test-id="magazine-header-card">
+      <div className="arr-magazine-card" styleName="magazine-header intro-button">
+        <MagazineCoverImageCard collection={collection} config={{ ...config, magazineSlug }} />
+        <div styleName="content">
+          <div styleName={`time ${textColor}`} data-test-id="title-time">
+            <a href={magazinePageUrl} data-test-id="magazine-title" aria-label="magazine-title">
+              {upperCase(magazineTitle)}
+            </a>
+            &nbsp; | &nbsp;
+            {getTimeStamp(date, timestampToFormat, timeStampConfig)}
+          </div>
+          <CollectionName collection={collection} headerLevel="2" navigate={false} />
+          <div styleName={`summary ${textColor}`} data-test-id="magazine-summary">
+            {summary}
+          </div>
+          <LoadmoreButton
+            collection={collection}
+            template="customUrlPath"
+            config={config}
+            navigate={() => navigateTo(dispatch, url)}
+            qtConfig={qtConfig}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MagazineHeaderCard.propTypes = {
+  collection: PropTypes.shape({
+    "created-at": PropTypes.number,
+    summary: PropTypes.string,
+    items: PropTypes.array
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    footerButton: PropTypes.string,
+    magazineTitle: PropTypes.string,
+    magazinePageUrl: PropTypes.string,
+    customUrlPath: PropTypes.string
+  })
+};
+
+export default StateProvider(MagazineHeaderCard);