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

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

@@ -0,0 +1,182 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import { getTextColor, generateNavigateSlug, navigateTo, getTheme } from "../../../utils/utils";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
+import { roundedCornerClass } from "../../../constants";
+
+import "./six-col-six-stories.m.css";
+import { useDispatch, useSelector } from "react-redux";
+
+const loadMore = ({ isLoading, stories, getMoreStories, subsequentLoadCount = 6 }) => {
+  if (isLoading) return;
+  const limit = subsequentLoadCount;
+  const offset = stories.length;
+  getMoreStories(offset, limit);
+};
+
+const SixColSixStories = ({
+  collection = {},
+  config = {},
+  getMoreStories,
+  isLoadMoreVisible,
+  isLoading,
+  isolatedLoadMore,
+  collectionIndex
+}) => {
+  const stories = collectionToStories(collection);
+  const isFirstCollection = collectionIndex === 0;
+  if (!stories.length) return null;
+
+  const {
+    collectionNameBorderColor = "",
+    borderColor = "",
+    theme = "",
+    collectionNameTemplate = "",
+    footerButton = "",
+    border = "",
+    localizationConfig = {},
+    subsequentLoadCount = 6,
+    customCollectionName
+  } = config;
+
+  const layout = "sixColSixStories";
+  const textColor = getTextColor(theme);
+  let borderStyle = "";
+  let isAroundBorder = false;
+  if (border === "fullBorder") {
+    borderStyle = "vertical-border";
+  } else if (border === "aroundBorder") {
+    borderStyle = "around-border";
+    isAroundBorder = true;
+  }
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const enableDarkModePreview =
+    theme === "#1d1d1d" || get(qtConfig, ["pagebuilder-config", "enableDarkModePreview"], false);
+
+  const enableRoundedCorners = get(qtConfig, ["pagebuilder-config", "general", "enableRoundedCorners"], false);
+  const roundedCorners = enableRoundedCorners && isAroundBorder ? roundedCornerClass : "";
+
+  const getLoadMore = (opts) => {
+    if (!isLoadMoreVisible) return null;
+
+    if (isolatedLoadMore) {
+      return (
+        <LoadMoreTarget
+          collection={collection}
+          componentName={"SixColSixStories"}
+          offset={stories.length}
+          limit={subsequentLoadCount}
+          theme={theme}
+        />
+      );
+    }
+
+    const url = generateNavigateSlug(collection, qtConfig);
+    return (
+      <ProgressiveHydration>
+        <LoadmoreButton
+          config={config}
+          collection={collection}
+          template={footerButton}
+          onClick={() => loadMore(opts)}
+          navigate={() => navigateTo(dispatch, url)}
+          qtConfig={qtConfig}
+        />
+      </ProgressiveHydration>
+    );
+  };
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="six-col-six-stories"
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="wrapper">
+        <CollectionName
+          customCollectionName={customCollectionName}
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+          headerLevel="2"
+        />
+        <div styleName={`row-wrapper ${isAroundBorder ? "around-border-wrapper" : ""}`}>
+          {stories.map((story, index) => (
+            <div
+              key={`six-col-six-stories-${index}`}
+              className={roundedCorners}
+              styleName={`card-wrapper ${borderStyle} ${textColor}`}
+              style={{ backgroundColor: getTheme(config, layout, enableDarkModePreview) || "initial" }}>
+              <StoryCard story={story} theme={getTheme(config, layout, enableDarkModePreview)} config={config}>
+                <HeroImage story={story} aspectRatio={[[16, 9], [16, 9]]} priority={isFirstCollection && index === 0} />
+                <div styleName="content-wrapper">
+                  <SectionTag
+                    story={story}
+                    borderColor={borderColor}
+                    layout={layout}
+                    enableDarkModePreview={enableDarkModePreview}
+                  />
+                  <Headline
+                    story={story}
+                    headerLevel="6"
+                    premiumStoryIconConfig={config}
+                    layout={layout}
+                    enableDarkModePreview={enableDarkModePreview}
+                  />
+                </div>
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  collectionId={collection.id}
+                  layout={layout}
+                  enableDarkModePreview={enableDarkModePreview}
+                />
+              </StoryCard>
+            </div>
+          ))}
+        </div>
+        {getLoadMore({ isLoading, stories, getMoreStories, subsequentLoadCount })}
+      </div>
+    </div>
+  );
+};
+export default StateProvider(SixColSixStories);
+
+SixColSixStories.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,
+    slotConfig: PropTypes.array,
+    footerButton: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    subsequentLoadCount: PropTypes.number
+  }),
+  getMoreStories: PropTypes.func,
+  isLoadMoreVisible: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool,
+  collectionIndex: PropTypes.number
+};
+
+SixColSixStories.defaultProps = {
+  getMoreStories: () => {},
+  isLoadMoreVisible: true,
+  isLoading: false
+};

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

@@ -0,0 +1,92 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value desktop from viewports;
+
+.wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (min-width: desktop) {
+    padding: 0;
+  }
+}
+
+.row-wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: var(--arrow-spacing-28);
+  }
+  @media (min-width: desktop) {
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: var(--arrow-spacing-28);
+  }
+}
+
+.card-wrapper {
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.card-wrapper.vertical-border {
+  position: relative;
+}
+
+.card-wrapper.vertical-border::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: -13px;
+}
+
+.card-wrapper.vertical-border.light::after {
+  background-color: var(--light-border);
+}
+
+.card-wrapper.vertical-border.dark::after {
+  background-color: var(--dark-border);
+}
+
+.card-wrapper.vertical-border:nth-child(2n)::after {
+  content: none;
+  @media (min-width: mobile) {
+    content: "";
+  }
+}
+
+.card-wrapper.vertical-border:nth-child(3n)::after {
+  @media (min-width: mobile) {
+    content: none;
+  }
+  @media (min-width: desktop) {
+    content: "";
+  }
+}
+
+.card-wrapper.vertical-border:nth-child(6n)::after {
+  @media (min-width: desktop) {
+    content: none;
+  }
+}
+
+.content-wrapper {
+  height: 100%;
+}
+
+.around-border-wrapper {
+  grid-column-gap: 10px;
+}
+
+.card-wrapper.around-border.light {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: solid 1px var(--light-border);
+}
+
+.card-wrapper.around-border.dark {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: solid 1px var(--dark-border);
+}
+

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import {
+  withStore,
+  optionalSelect,
+  sectionTagTemplates,
+  collectionNameTemplates,
+  footerButton
+} from "../../../../storybook";
+import SixColSixStories from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+
+import { generateCollection } from "../../Fixture";
+
+const collection = generateCollection({ stories: 6 });
+
+const label = "color";
+const defaultvalue = "#ffffff";
+
+const collectionNameDefaultValue = "#ff5858";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+const sectionTagBorderColor = "Section Tag Border Color";
+const sectionTagDefaultvalue = "#ff5858";
+
+const borderTemplate = {
+  default: "noBorder",
+  verticalBorder: "fullBorder",
+  aroundBorder: "aroundBorder"
+};
+
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Six Col Six 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),
+      slotConfig: [{ type: "story", component: configurableSlot }],
+      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),
+      showCardBgColor: boolean("Story Card Background Color", true),
+      cardBgColor: boolean("Story Card Background", "#ffffff")
+    };
+
+    return <SixColSixStories collection={collection} config={contextConfig} />;
+  });

package/src/components/Rows/StoryTemplates/EventStoryTemplates/CustomAttributes/custom-attributes.m.css

@@ -0,0 +1,78 @@
+@import "../../../../../../assets/stylesheets/mixins.scss";
+
+.container {
+  padding: var(--arrow-spacing-20);
+  border-radius: var(--arrow-spacing-s);
+  width: 100%;
+  @include tablet {
+    max-width: 383px;
+    position: sticky;
+    top: 230px;
+  }
+}
+
+.dark.container {
+  background-color: #fbf9f1;
+  border: 1px solid #0000000f;
+}
+
+.light.container {
+  background-color: #2e2e2e;
+  border: 1px solid #00000014;
+}
+
+.location,
+.timings {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-m);
+  font-family: var(--secondaryFont);
+}
+
+.location,
+.timings-wrapper {
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-normal);
+  line-height: 25px;
+}
+
+.dark .location,
+.dark .timings-wrapper {
+  color: #202226;
+}
+
+.light .location,
+.light .timings-wrapper {
+  color: #fff;
+}
+
+.separator {
+  height: 1px;
+  margin-bottom: 10px;
+}
+
+.dark .separator {
+  background-color: #0000000a;
+}
+
+.light .separator {
+  background-color: #ffffff0a;
+}
+
+.container svg {
+  margin: 5px var(--arrow-spacing-s) 0 0;
+  flex-shrink: 0;
+}
+
+.link-wrapper {
+  border-radius: var(--arrow-spacing-s);
+  margin-top: 10px;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--arrow-fs-xs);
+  font-style: normal;
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-spacing-l);
+  font-family: var(--primaryFont);
+}

package/src/components/Rows/StoryTemplates/EventStoryTemplates/CustomAttributes/index.js

@@ -0,0 +1,103 @@
+import React from "react";
+import LocationIcon from "../../../../Svgs/location";
+import CalenderIcon from "../../../../Svgs/calender";
+import "./custom-attributes.m.css";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../../../utils/utils";
+import get from "lodash.get";
+
+const getIconColors = (mode, enableDarkMode) => {
+  const iconColor = mode === "dark" ? "#000" : "#fff";
+  const ctaBgColor =
+    useSelector((state) =>
+      enableDarkMode
+        ? get(state, ["qt", "config", "pagebuilder-config", "general", "darkPrimaryColor"])
+        : get(state, ["qt", "config", "pagebuilder-config", "general", "primaryColor"])
+    ) || "#bc346d";
+  const ctaTextColor = getTextColor(ctaBgColor) === "dark" ? "#000000" : "#ffffff";
+  return { iconColor, ctaBgColor, ctaTextColor };
+};
+
+const getDate = (eventDate, eventMonth, eventYear, dateFormat) => {
+  if (eventDate && eventMonth && eventYear) {
+    const date = new Date(`${eventDate} ${eventMonth} ${eventYear}`);
+    const month = date?.toLocaleDateString?.("en-US", { month: "long" }) || "";
+
+    switch (dateFormat) {
+      case "dd-mon-yyyy":
+        return `${eventDate} ${month} ${eventYear}`;
+      case "mon-dd-yyyy":
+        return `${month} ${eventDate}, ${eventYear}`;
+    }
+  }
+  return null;
+};
+
+export const CustomAttributes = ({ story, mode, enableDarkMode }) => {
+  const attributes = story?.metadata?.["story-attributes"] || {};
+  const [eventLocation] = attributes.eventlocation || [];
+  const [eventStartDate] = attributes.eventstartdate || [];
+  const [eventEndDate] = attributes.eventenddate || [];
+  const [eventStartMonth] = attributes.eventstartmonth || [];
+  const [eventEndMonth] = attributes.eventendmonth || [];
+  const [eventStartYear] = attributes.eventstartyear || [];
+  const [eventEndYear] = attributes.eventendyear || [];
+  const [eventStartTime] = attributes.eventstarttime || [];
+  const [eventEndTime] = attributes.eventendtime || [];
+  const [registrationLink] = attributes.eventregistrationlink || [];
+  const dateFormat = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general", "dateFormat"], "dd-mon-yyyy")
+  );
+  const { iconColor, ctaBgColor, ctaTextColor } = getIconColors(mode, enableDarkMode);
+  const startDate = getDate(eventStartDate, eventStartMonth, eventStartYear, dateFormat);
+  const endDate = getDate(eventEndDate, eventEndMonth, eventEndYear, dateFormat);
+  if (!eventLocation && !startDate && !registrationLink) {
+    return null;
+  }
+
+  return (
+    <div className="arr--custom-attributes" styleName={`container ${mode}`}>
+      {eventLocation && (
+        <div styleName="location">
+          <LocationIcon color={iconColor} />
+          <div dangerouslySetInnerHTML={{ __html: eventLocation }} />
+        </div>
+      )}
+      {startDate && (
+        <div styleName="timings">
+          <CalenderIcon color={iconColor} />
+          <div styleName="timings-wrapper">
+            {startDate && <span>{startDate}</span>}
+            {endDate && <span>{` - ${endDate}`}</span>}
+            {eventStartTime && (
+              <div>
+                <span>{eventStartTime}</span>
+                {eventEndTime && <span>{`- ${eventEndTime}`}</span>}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      {registrationLink && (
+        <>
+          <div styleName="separator" />
+          <a
+            styleName="link-wrapper"
+            href={registrationLink}
+            style={{ backgroundColor: ctaBgColor, color: ctaTextColor }}
+            target="_blank"
+            rel="noreferrer">
+            Register Now
+          </a>
+        </>
+      )}
+    </div>
+  );
+};
+
+CustomAttributes.propTypes = {
+  story: PropTypes.object,
+  enableDarkMode: PropTypes.bool,
+  mode: PropTypes.string
+};

package/src/components/Rows/StoryTemplates/EventStoryTemplates/event-story.m.css

@@ -0,0 +1,138 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.wrapper:global(.arr-story-grid) {
+  display: block;
+  @include tablet {
+    display: grid;
+  }
+}
+
+.events-listing {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  margin-top: var(--arrow-spacing-l);
+  font-family: var(--primaryFont);
+  justify-self: flex-start;
+  @include tablet {
+    margin-top: 18px;
+  }
+}
+
+.header-details,
+.body-details {
+  @include tablet {
+    grid-column: container-start / 10;
+  }
+}
+
+.section-tag {
+  margin-top: var(--arrow-spacing-20);
+  @include tablet {
+    margin-top: var(--arrow-spacing-l);
+  }
+}
+
+.header-details :global(.section-tag) {
+  border-radius: var(--arrow-spacing-xxs);
+  margin: unset !important;
+}
+
+.header-details :global(.arr--story-headline) {
+  margin: var(--arrow-spacing-20) 0;
+  @include tablet {
+    margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-l) 0;
+  }
+}
+
+.body-details :global(.arr--hero-image),
+.slot-after-story,
+.header-details :global(.arr--sub-headline) {
+  margin-bottom: var(--arrow-spacing-20);
+  @include tablet {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.light .events-listing {
+  color: #fff;
+}
+
+.dark .events-listing {
+  color: #000;
+}
+
+.events-listing > svg {
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.body-details :global(.arr--hero-image) {
+  padding: 0;
+}
+
+.custom-data {
+  margin-bottom: var(--arrow-spacing-20);
+  @include tablet {
+    grid-row: 2/4;
+    grid-column: 10 / container-end;
+  }
+}
+
+.header-details :global(.arr--share),
+.body-details :global(.arr--element-container) {
+  margin: var(--arrow-spacing-20) 0;
+  @include tablet {
+    margin: var(--arrow-spacing-l) 0;
+  }
+}
+
+.separator {
+  margin: var(--arrow-spacing-l) 0 var(--arrow-spacing-xl) 0;
+  @include tablet {
+    grid-column: grid-start / grid-end;
+    margin: 30px 0 64px 0;
+  }
+}
+
+.dark .separator {
+  border-top: 1px solid #00000014;
+}
+
+.light .separator {
+  border-top: 1px solid #fbfbfb14;
+}
+
+.events-listing,
+.slot-after-story,
+.aside-collection {
+  @include tablet {
+    grid-column: container-start / container-end;
+  }
+}
+
+.aside-collection :global(.arr--aside-collection .arr--story-card) {
+  @include mobile {
+    display: block;
+  }
+}
+
+.aside-collection :global(.aside-hero-image) {
+  margin-right: unset;
+  margin-bottom: var(--arrow-spacing-s);
+}
+
+.aside-collection h6 {
+  font-size: var(--arrow-fs-m);
+}
+
+.aside-collection :global(.aside-story) {
+  margin-bottom: var(--arrow-spacing-l);
+}
+
+.sticky .index-2 :global(.arr--hero-image),
+.tablet-index-2 {
+  @include tablet {
+    z-index: 2;
+  }
+}