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

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

@@ -0,0 +1,168 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { collectionToStories } from "@quintype/components";
+import { StateProvider } from "../../SharedContext";
+import { generateNavigateSlug, getTextColor, navigateTo, getSlot } from "../../../utils/utils";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StoryCardWithBulletPoint } from "../../Molecules/StoryCardWithBulletPoint";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+import "./two-col-ten-stories-sidebar.m.css";
+
+export const TwoColTenStoriesSidebar = ({ collection, 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 firstCollectionStories = collectionToStories(childCollections[0]);
+  const sidebarCollectionStories = collectionToStories(childCollections[1]);
+
+  if (!firstCollectionStories.length && !sidebarCollectionStories.length) return null;
+
+  const {
+    border = "",
+    borderColor = "",
+    collectionNameBorderColor = "",
+    theme = "",
+    slotConfig = [],
+    collectionNameTemplate = ""
+  } = config;
+  const textColor = getTextColor(theme);
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const firstCardBorderStyle = border === "bottom" ? "first-card-border-box" : "";
+  const { type = "story", component } = get(slotConfig, [0], {});
+  const isAdWidgetEnabled = type === "ad" || type === "widget";
+  const adWidgetSlot = isAdWidgetEnabled ? getSlot(type, component) : null;
+  let storyCounter = 0;
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="two-col-ten-stories-sidebar"
+      style={{ backgroundColor: theme, color: textColor }}
+      styleName="component-wrapper">
+      <div styleName="collection-wrapper">
+        <CollectionName
+          collection={childCollections[0]}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+          headerLevel="2"
+        />
+        <div styleName="story-cards">
+          <div styleName="first-card">
+            <StoryCard
+              story={firstCollectionStories[0]}
+              theme={theme}
+              headerLevel="3"
+              bgImgContentOverlap
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={firstCollectionStories[0]} aspectRatio={[[16, 9], [16, 9]]} />
+              <StorycardContent
+                styleName={firstCardBorderStyle}
+                story={firstCollectionStories[0]}
+                headerLevel="3"
+                theme={theme}
+                isHorizontal
+                borderColor={borderColor}
+                config={config}
+              />
+            </StoryCard>
+          </div>
+          {firstCollectionStories.slice(1, 5).map((story, index) => {
+            return (
+              <div styleName="card" key={index}>
+                <StoryCard
+                  story={story}
+                  theme={theme}
+                  headerLevel="4"
+                  isHorizontal
+                  border={border}
+                  aspectRatio={[[16, 9], [16, 9]]}
+                  config={config}>
+                  <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
+                  <StorycardContent
+                    theme={theme}
+                    story={story}
+                    isHorizontal
+                    borderColor={borderColor}
+                    config={config}
+                  />
+                </StoryCard>
+              </div>
+            );
+          })}
+        </div>
+        <LoadmoreButton
+          template="NavigateToPage"
+          collection={childCollections[0]}
+          config={config}
+          navigate={() => navigateTo(dispatch, generateNavigateSlug(childCollections[0], qtConfig))}
+          qtConfig={qtConfig}
+        />
+      </div>
+      <div styleName="sidebar-collection-wrapper">
+        <CollectionName
+          collection={childCollections[1]}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+          headerLevel="2"
+        />
+        <div styleName="sidebar-cards-container">
+          <div>
+            {sidebarCollectionStories.slice(0, 4).map((story) => (
+              <div styleName="card" key={story.id}>
+                <StoryCardWithBulletPoint story={story} bulletValue={`${++storyCounter}`} config={config} />
+              </div>
+            ))}
+          </div>
+          <div>
+            <div styleName="card">
+              <StoryCardWithBulletPoint
+                story={sidebarCollectionStories[4]}
+                bulletValue={`${++storyCounter}`}
+                config={config}
+              />
+            </div>
+            {adWidgetSlot ? (
+              <div>{adWidgetSlot}</div>
+            ) : (
+              sidebarCollectionStories.slice(5, 8).map((story) => (
+                <div styleName="card" key={story.id}>
+                  <StoryCardWithBulletPoint story={story} bulletValue={`${++storyCounter}`} config={config} />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+        <LoadmoreButton
+          template="NavigateToPage"
+          collection={childCollections[1]}
+          config={config}
+          navigate={() => navigateTo(dispatch, generateNavigateSlug(childCollections[1], qtConfig))}
+          qtConfig={qtConfig}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default StateProvider(TwoColTenStoriesSidebar);
+
+TwoColTenStoriesSidebar.propTypes = {
+  collection: PropTypes.object.isRequired,
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    showBorder: PropTypes.bool,
+    collectionNameTemplate: PropTypes.string,
+    slotConfig: PropTypes.array,
+    collectionNameBorderColor: PropTypes.string,
+    borderColor: PropTypes.string,
+    localizationConfig: PropTypes.object
+  })
+};

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import TwoColTenStoriesHighlight from "./index";
+import Readme from "./README.md";
+import { generateCollections } from "../../Fixture";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+
+const collection = generateCollections(2);
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Two Col Ten Stories Sidebar ",
+  {
+    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("Collection Name Border Color", "#3a9fdd"),
+      borderColor: color("Section Tag Border Color", "#3a9fdd"),
+      theme: color("color", "#ffffff"),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+      showSection: boolean("Show Section", true),
+      showAuthor: boolean("Show Author", true),
+      showTime: boolean("Show Time", true),
+      buttonText: text("Footer text", "Read More"),
+      showRowTitle: boolean("Row title", true),
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true),
+      slotConfig: [{ type: "ad", component: configurableSlot }]
+    };
+
+    return <TwoColTenStoriesHighlight collection={collection} config={contextConfig} />;
+  });

package/src/components/Rows/TwoColTenStoriesSidebar/two-col-ten-stories-sidebar.m.css

@@ -0,0 +1,52 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value desktop from viewports;
+
+.component-wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (min-width: desktop) {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    padding: 0;
+  }
+}
+
+.collection-wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (min-width: desktop) {
+    padding: 0;
+  }
+}
+
+.sidebar-collection-wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (min-width: desktop) {
+    padding: 0;
+    padding-left: var(--arrow-spacing-m);
+  }
+}
+
+.sidebar-cards-container {
+  @media (min-width: mobile) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    margin: var(--arrow-spacing-l) 0;
+  }
+  @media (min-width: desktop) {
+    display: block;
+  }
+}
+
+.story-cards > .card,
+.story-cards > .first-card {
+  margin-bottom: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.sidebar-cards-container .card {
+  margin-bottom: var(--arrow-spacing-m);
+}

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

@@ -0,0 +1,36 @@
+# TwoColThreeStories
+
+The _TwoColThreeStories_ component is a basic [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms) with three StoryCards. 
+
+There are no configurable slots in this row.
+
+## Usage
+
+### Import 
+```jsx
+import { TwoColThreeStories } from "@quintype/arrow" 
+```
+
+### Setting the Row context
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  showFooterButton: true,
+  buttonText: "LoadMore",
+  showRowTitle: true,
+  footerSlotConfig: { footerSlot: () => <CustomFooterComponent /> }
+};
+```
+
+### Use as a component
+```jsx
+<TwoColThreeStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,137 @@
+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 { LoadmoreButton } from "../../Atoms/Loadmore";
+
+import "./two-col-three-story.m.css";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash.get";
+
+export const TwoColThreeStories = ({ collection, config = {} }) => {
+  const items = collectionToStories(collection);
+  const {
+    border = "",
+    borderColor = "",
+    collectionNameBorderColor = "",
+    theme = "",
+    collectionNameTemplate = "",
+    footerSlotConfig = {},
+    footerButton = ""
+  } = config;
+  const { footerSlot } = footerSlotConfig;
+
+  if (items.length < 1) {
+    return null;
+  }
+
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  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-three-stories"
+      style={{ backgroundColor: theme, color: textColor }}>
+      <div styleName="two-col-three-story">
+        <CollectionName
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+        />
+        <div styleName="wrapper">
+          <div styleName="first-card">
+            <StoryCard
+              story={items[0]}
+              theme={theme}
+              border={border}
+              bgImgContentOverlap
+              headerLevel="2"
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
+              <StorycardContent
+                story={items[0]}
+                headerLevel="2"
+                border={border}
+                theme={theme}
+                borderColor={borderColor}
+                config={config}
+              />
+            </StoryCard>
+          </div>
+
+          <div>
+            {items.slice(1, 3).map((story, index) => {
+              if (index === 1) {
+                return (
+                  <div key={index}>
+                    <StoryCard story={story} border={border} theme={theme} isHorizontalMobile config={config}>
+                      <HeroImage story={story} isHorizontalMobile />
+                      <StorycardContent
+                        theme={theme}
+                        border={border}
+                        story={story}
+                        isHorizontalMobile
+                        borderColor={borderColor}
+                        config={config}
+                      />
+                    </StoryCard>
+                  </div>
+                );
+              } else
+                return (
+                  <div styleName="storycard" key={index}>
+                    <StoryCard story={story} border={border} theme={theme} isHorizontalMobile config={config}>
+                      <HeroImage story={story} isHorizontalMobile />
+                      <StorycardContent
+                        theme={theme}
+                        border={border}
+                        story={story}
+                        isHorizontalMobile
+                        borderColor={borderColor}
+                        config={config}
+                      />
+                    </StoryCard>
+                  </div>
+                );
+            })}
+          </div>
+        </div>
+        <LoadmoreButton
+          template={footerButton}
+          collection={collection}
+          config={config}
+          navigate={() => navigateTo(dispatch, url)}
+          qtConfig={qtConfig}
+        />
+        {footerSlotComp}
+      </div>
+    </div>
+  );
+};
+
+export default StateProvider(TwoColThreeStories);
+
+TwoColThreeStories.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/TwoColThreeStory/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 TwoColThreeStories 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: "full"
+};
+
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+withStore(
+  "Rows/Two Col Three 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 <TwoColThreeStories collection={collection} config={contextConfig} />;
+  });

package/src/components/Rows/TwoColThreeStory/two-col-three-story.m.css

@@ -0,0 +1,36 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.two-col-three-story {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+}
+.wrapper {
+  margin: var(--arrow-spacing-xs) 0;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 9fr 3fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    margin: var(--arrow-spacing-m) 0;
+  }
+}
+
+.first-card {
+  padding: 0;
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: 0;
+  }
+}
+
+.storycard {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.border-full {
+  padding: var(--arrow-spacing-m);
+}

package/src/components/SharedContext.js

@@ -0,0 +1,13 @@
+import React, { createContext, useContext } from "react";
+
+export const StateContext = createContext();
+
+// eslint-disable-next-line react/display-name
+export const StateProvider = RowComponent => props => (
+  // eslint-disable-next-line react/prop-types
+  <StateContext.Provider value={props.config}>
+    <RowComponent {...props} />
+  </StateContext.Provider>
+);
+
+export const useStateValue = () => useContext(StateContext);

package/src/components/Svgs/Loading/loading.js

@@ -0,0 +1,133 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./loading.m.css";
+
+export const Loading = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
+  return (
+    <div styleName="loading-indicator">
+      <svg
+        width="40"
+        height="40"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid">
+        <circle cx="84" cy="50" r="0" fill="currentColor">
+          <animate
+            attributeName="r"
+            values="10;0;0;0;0"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+          <animate
+            attributeName="cx"
+            values="84;84;84;84;84"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+        </circle>
+        <circle cx="84" cy="50" r=".709" fill="currentColor">
+          <animate
+            attributeName="r"
+            values="0;10;10;10;0"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="-1s"
+          />
+          <animate
+            attributeName="cx"
+            values="16;16;50;84;84"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="-1s"
+          />
+        </circle>
+        <circle cx="81.59" cy="50" r="10" fill="currentColor">
+          <animate
+            attributeName="r"
+            values="0;10;10;10;0"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="-0.5s"
+          />
+          <animate
+            attributeName="cx"
+            values="16;16;50;84;84"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="-0.5s"
+          />
+        </circle>
+        <circle cx="47.59" cy="50" r="10" fill="currentColor">
+          <animate
+            attributeName="r"
+            values="0;10;10;10;0"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+          <animate
+            attributeName="cx"
+            values="16;16;50;84;84"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+        </circle>
+        <circle cx="16" cy="50" r="9.291" fill="currentColor">
+          <animate
+            attributeName="r"
+            values="0;0;10;10;10"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+          <animate
+            attributeName="cx"
+            values="16;16;16;50;84"
+            keyTimes="0;0.25;0.5;0.75;1"
+            keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+            calcMode="spline"
+            dur="2s"
+            repeatCount="indefinite"
+            begin="0s"
+          />
+        </circle>
+      </svg>
+    </div>
+  );
+};
+
+Loading.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};