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

package/src/components/Rows/ThreeColSixStories/three-col-six-stories.m.css

@@ -0,0 +1,32 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+}
+.storycards-row-two {
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+}
+.storycards-row-one {
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+}
+.card {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.wrapper :global(.arr--button) {
+  margin: 0 auto var(--arrow-spacing-xs) auto;
+}

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

@@ -0,0 +1,41 @@
+# Three Column Six Stories
+
+The _ThreeColTwelveStories_ is component that represents 3 child collections withing parent collection.
+
+Column numbers(2 or 3) can vary as per selection of slot type.
+
+config is the prop which is responsible for handling configuration of 12 stories, 8 stories 2 ad or 8 stories 2 widget row.
+
+### Import
+
+```jsx
+import { ThreeColTwelveStories } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  collectionNameBorderColor: "c70000",
+  theme: theme: "#ffffff",
+  withSeparator: true,
+  collectionNameTemplate: "borderLeft",
+  showAuthor: true,
+  showTime: true,
+  footerButton: {
+    NavigateToPage: "NavigateToPage"
+  },
+  buttonText: "Read More",
+  showButton: true,
+  showReadTime: true,
+  slotConfig: [{ type: "story", component: configurableSlot }, { type: "story", component: configurableSlot }]
+};
+```
+
+### Use as a component
+
+```jsx
+<ThreeColTwelveStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,153 @@
+import React from "react";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { HeroImage } from "../../Atoms/HeroImage";
+import "./three-col-twelve-stories.m.css";
+import { generateNavigateSlug, navigateTo, rgbToHex } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { useDispatch, useSelector } from "react-redux";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { roundedCornerClass } from "../../../constants";
+// The collectionIndex which was previously being used is renamed as childCollectionIndex as it represents the index of the child collection within the parent collection. As collectionIndex is used in PB to determine the order of collection in the page.
+const getChildCollectionData = (collection = {}, config = {}, childCollectionIndex, qtConfig, parentCollectionId, collectionIndex) => {
+  const stories = collectionToStories(collection);
+  const isFirstCollection = collectionIndex === 0;
+  const isFirstStoryImg = isFirstCollection && childCollectionIndex === 0;
+  if (!stories.length) return null;
+  const [firstStory, ...otherStories] = stories;
+  const {
+    collectionNameTemplate,
+    withSeparator = true,
+    theme,
+    footerButton = "",
+    localizationConfig = {},
+    collectionNameBorderColor = "",
+    borderColor = ""
+  } = config;
+
+  const sectionTagBorderColor = rgbToHex(borderColor);
+  const dispatch = useDispatch();
+  const url = generateNavigateSlug(collection, qtConfig);
+  const languageDirection = get(qtConfig, ["language", "direction"], "ltr");
+  const customClassName = languageDirection === "rtl" ? "rtl-threeColTwelveStories" : "ltr-threeColTwelveStories";
+
+  const enableRoundedCorners = get(qtConfig, ["pagebuilder-config", "general", "enableRoundedCorners"], false);
+
+  const roundedCorners = enableRoundedCorners ? roundedCornerClass : "";
+
+  return (
+    <div styleName="column" style={{ order: childCollectionIndex }}>
+      <CollectionName
+        collection={collection}
+        collectionNameTemplate={collectionNameTemplate}
+        collectionNameBorderColor={collectionNameBorderColor}
+      />
+      <div>
+        <div>
+          <StoryCard
+            story={firstStory}
+            theme={theme}
+            border={withSeparator ? "bottom" : ""}
+            config={config}
+            disableRoundedCorners={true}>
+            <div styleName="big-card">
+              <div styleName="big-card-hero-image" className={`${roundedCorners}`}>
+                <HeroImage story={firstStory} aspectRatio={[[16, 9]]} priority={isFirstStoryImg} />
+              </div>
+              <div styleName="big-card-content">
+                <SectionTag story={firstStory} borderColor={sectionTagBorderColor} />
+                <Headline story={firstStory} premiumStoryIconConfig={config} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={firstStory}
+                  hideAuthorImage={true}
+                  collectionId={`${parentCollectionId}-${collection.id}`}
+                />
+              </div>
+            </div>
+          </StoryCard>
+          {otherStories.slice(0, 3).map((story) => (
+            <div styleName="small-card" key={story.id}>
+              <StoryCard
+                story={story}
+                theme={theme}
+                border={withSeparator ? "bottom" : ""}
+                config={config}
+                disableRoundedCorners={true}>
+                <div styleName="small-card-top-row">
+                  <div styleName="small-card-content" className={`${customClassName}`}>
+                    <SectionTag story={story} borderColor={sectionTagBorderColor} />
+                    <Headline story={story} premiumStoryIconConfig={config} />
+                    <AuthorWithTime
+                      config={localizationConfig}
+                      story={story}
+                      hideAuthorImage={true}
+                      collectionId={`${parentCollectionId}-${collection.id}`}
+                    />
+                  </div>
+                  <div styleName="small-card-hero-image">
+                    <HeroImage story={story} aspectRatio={[[16, 9]]} />
+                  </div>
+                </div>
+              </StoryCard>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <LoadmoreButton
+        template={footerButton}
+        collection={collection}
+        config={config}
+        navigate={() => navigateTo(dispatch, url)}
+        qtConfig={qtConfig}
+      />
+    </div>
+  );
+};
+
+function ThreeColTwelveStories({ collection,collectionIndex, config = {} }) {
+  const childCollections = get(collection, ["items"], []).filter((collections) => collections.type === "collection");
+  if (childCollections.length < 2) return null; // if number of collection is less than 2 return null
+  const { theme = "", slotConfig = [] } = config;
+  const isSlotTypeStory = get(slotConfig, [0, "type"], "story") === "story";
+  const collectionCount = isSlotTypeStory ? 3 : 2;
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const adWidgetComponent = get(slotConfig, [0, "component"]);
+  return (
+    <div
+      className="full-width-with-padding arrow-component arr--three-col-twelve-stories"
+      data-test-id="three-col-twelve-stories"
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="wrapper">
+        {childCollections
+          .slice(0, collectionCount)
+          .map((childCollection, index) =>
+            getChildCollectionData(childCollection, config, index, qtConfig, collection.id, collectionIndex)
+          )}
+        {!isSlotTypeStory && adWidgetComponent && <div styleName="ad-widget-container">{adWidgetComponent()}</div>}
+      </div>
+    </div>
+  );
+}
+
+ThreeColTwelveStories.propTypes = {
+  collection: PropTypes.object.isRequired,
+  config: PropTypes.shape({
+    borderColor: PropTypes.string,
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    slotConfig: PropTypes.array,
+    footerButton: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+
+export default StateProvider(ThreeColTwelveStories);

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { generateCollections } from "../../Fixture";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import {
+  withStore,
+  optionalSelect,
+  collectionNameTemplates,
+  footerButton,
+  sectionTagTemplates
+} from "../../../../storybook";
+import Readme from "./README.md";
+import ThreeColTwelveStories from "./index";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+
+const collection = generateCollections(3);
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="600px" width="300px" />;
+};
+
+withStore(
+  "Rows/Three Col Twelve Stories",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1172px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color("Collection Name Border Color", "#c70000"),
+      theme: color("BG Color", "#ffffff"),
+      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+      borderColor: color("Section Tag Border Color", "#3a9fdd"),
+      withSeparator: boolean("Separator", true),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates, "borderLeft"),
+      showAuthor: boolean("Author disable", true),
+      showTime: boolean("Timestamp disable", true),
+      footerButton: optionalSelect("Footer Button", footerButton),
+      buttonText: text("Footer text", "Read More"),
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true),
+      slotConfig: [{ type: "story", component: configurableSlot }]
+    };
+
+    return <ThreeColTwelveStories collection={collection} config={contextConfig} />;
+  });

package/src/components/Rows/ThreeColTwelveStories/three-col-twelve-stories.m.css

@@ -0,0 +1,105 @@
+@custom-media --viewport-medium (width >=992px);
+@custom-media --viewport-tab (width >=768px);
+
+.wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-tab) {
+    padding: 0 var(--arrow-spacing-l);
+  }
+
+  @media (--viewport-medium) {
+    display: grid;
+    padding: 0;
+    grid-column-gap: var(--arrow-spacing-l);
+    grid-template-columns: repeat(3, 2fr);
+  }
+}
+
+/* big card */
+.big-card {
+  position: relative;
+}
+
+.big-card-hero-image {
+  background-color: var(--arrow-c-dark);
+}
+
+.big-card-hero-image img {
+  opacity: 0.5;
+}
+
+.big-card-content {
+  position: absolute;
+  bottom: 0;
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-s) var(--arrow-spacing-xs);
+
+  @media (--viewport-tab) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-l) var(--arrow-spacing-m);
+  }
+}
+
+.big-card-content :global(.arr--headline h6),
+.big-card-content :global(.arr--publish-time),
+.big-card-content :global(.arr-separator),
+.big-card-content :global(.arr--read-time),
+.big-card-content :global(.author-name),
+.big-card-content :global(.arr--section-name .section-tag) {
+  color: var(--arrow-c-light);
+}
+
+.big-card-content :global(.arr-separator svg),
+.big-card-content :global(.arr--read-time svg) {
+  fill: var(--arrow-c-light);
+}
+
+/* small card */
+.small-card-top-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--arrow-spacing-s);
+}
+
+.small-card-content {
+  padding-right: var(--arrow-spacing-s);
+}
+
+.small-card :global(.arr--story-card) {
+  padding-bottom: var(--arrow-spacing-xs);
+}
+
+.small-card-hero-image {
+  flex: 0 0 40%;
+}
+
+/* column */
+.column {
+  margin-bottom: var(--arrow-spacing-xl);
+  @media (--viewport-medium) {
+    display: grid;
+    grid-row: span 3;
+    grid-template-columns: 1fr;
+    grid-template-rows: subgrid;
+  }
+}
+
+.column :global(.arrow-component) a > h2 {
+  font-size: var(--arrow-fs-l);
+}
+
+.ad-widget-container {
+  margin-bottom: var(--arrow-spacing-xl);
+
+  @media (--viewport-medium) {
+    order: 3;
+    margin-top: 55px;
+    display: grid;
+    grid-row: span 3;
+    grid-template-columns: 1fr;
+  }
+}
+
+.small-card {
+  padding-top: var(--arrow-spacing-s);
+  margin-bottom: var(--arrow-spacing-xs);
+}
+

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

@@ -0,0 +1,33 @@
+# Two Column Four Stories
+
+The _TwoColFourStories_ component is a basic two column [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms).
+
+### Import
+```jsx
+import { TwoColFourStories } from "@quintype/arrow"
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  showRowTitle: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  footerSlotConfig: { footerSlot: () => <FooterComponent /> }
+};
+```
+
+### Use as a component
+```jsx
+<TwoColFourStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,162 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { roundedCornerClass } from "../../../constants";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+
+import "./two-col-four-story.m.css";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash.get";
+
+export const TwoColFourStories = ({ collection, config = {}, collectionIndex }) => {
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const enableRoundedCorners = get(qtConfig, ["pagebuilder-config", "general", "enableRoundedCorners"], false);
+  const roundedCorners = enableRoundedCorners ? roundedCornerClass : "";
+
+  const items = collectionToStories(collection);
+  const isFirstCollection = collectionIndex === 0;
+  if (!items.length) return null;
+
+  const {
+    border = "",
+    borderColor = "",
+    collectionNameBorderColor = "",
+    theme = "",
+    collectionNameTemplate = "",
+    footerSlotConfig = {},
+    footerButton = "",
+    customCollectionName
+  } = config;
+  const { footerSlot } = footerSlotConfig;
+  const borderStyle = border === "bottom" ? "border-box" : "";
+  const firstCardBorderStyle = border === "bottom" ? "first-card-border-box" : "";
+
+  const url = generateNavigateSlug(collection, qtConfig);
+
+  const textColor = getTextColor(theme);
+  const footerSlotComp = footerSlot ? footerSlot() : null;
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="two-col-four-stories"
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="two-col-four-story" style={{ backgroundColor: theme || "initial" }}>
+        <CollectionName
+          customCollectionName={customCollectionName}
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+        />
+        <div styleName="wrapper">
+          <div className={roundedCorners} styleName={`first-card ${borderStyle} ${textColor}`}>
+            <StoryCard
+              story={items[0]}
+              theme={theme}
+              headerLevel="3"
+              bgImgContentOverlap
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}
+              disableRoundedCorners={true}>
+              <HeroImage story={items[0]} aspectRatio={[[16, 9], [16, 9]]} priority={isFirstCollection} />
+              <StorycardContent
+                styleName={firstCardBorderStyle}
+                story={items[0]}
+                headerLevel="3"
+                theme={theme}
+                isHorizontal
+                borderColor={borderColor}
+                config={config}
+                collectionId={collection.id}
+                roundedCorners={roundedCorners}
+              />
+            </StoryCard>
+          </div>
+
+          <div className={roundedCorners} styleName={`storyCards ${borderStyle} ${textColor}`}>
+            {items.slice(1, 4).map((story, index) => {
+              if (index === 2) {
+                return (
+                  <div styleName="card" key={index}>
+                    <StoryCard
+                      story={story}
+                      theme={theme}
+                      headerLevel="4"
+                      isHorizontal
+                      aspectRatio={[[16, 9], [16, 9]]}
+                      config={config}
+                      disableRoundedCorners={true}>
+                      <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
+                      <StorycardContent
+                        theme={theme}
+                        story={story}
+                        borderColor={borderColor}
+                        config={config}
+                        collectionId={collection.id}
+                        roundedCorners={roundedCorners}
+                      />
+                    </StoryCard>
+                  </div>
+                );
+              }
+              return (
+                <div styleName="card" key={index}>
+                  <StoryCard
+                    story={story}
+                    theme={theme}
+                    headerLevel="4"
+                    isHorizontal
+                    border={border}
+                    aspectRatio={[[16, 9], [16, 9]]}
+                    config={config}
+                    disableRoundedCorners={true}>
+                    <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
+                    <StorycardContent
+                      theme={theme}
+                      story={story}
+                      isHorizontal
+                      borderColor={borderColor}
+                      config={config}
+                      collectionId={collection.id}
+                    />
+                  </StoryCard>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <LoadmoreButton
+          template={footerButton}
+          collection={collection}
+          config={config}
+          navigate={() => navigateTo(dispatch, url)}
+          qtConfig={qtConfig}
+        />
+        {footerSlotComp}
+      </div>
+    </div>
+  );
+};
+
+export default StateProvider(TwoColFourStories);
+
+TwoColFourStories.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,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import {
+  withStore,
+  optionalSelect,
+  sectionTagTemplates,
+  collectionNameTemplates,
+  footerButton
+} from "../../../../storybook";
+import TwoColFourStories from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+
+import { generateCollection } from "../../Fixture";
+
+const collection = generateCollection({ stories: 8 });
+
+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 borderTemplate = {
+  default: "",
+  border: "bottom"
+};
+
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+withStore(
+  "Rows/Two Col Four 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),
+      border: optionalSelect("Border", borderTemplate),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+      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),
+      footerSlotConfig: { footerSlot: footerSlot },
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true)
+    };
+
+    return <TwoColFourStories collection={collection} config={contextConfig} />;
+  });