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

package/src/components/Atoms/AuthorWithTimestamp/index.js

@@ -0,0 +1,115 @@
+import React from "react";
+import get from "lodash.get";
+import { TimeStamp } from "../TimeStamp";
+import PropTypes from "prop-types";
+import { Author } from "../Author";
+import { useStateValue } from "../../SharedContext";
+import { useSelector } from "react-redux";
+import "./author-with-timestamp.m.css";
+import { getTextColor, getSeparator, getTheme } from "../../../utils/utils";
+import { ReadTime } from "../ReadTime";
+import { SponsoredLabel } from "../SponsoredLabel";
+
+export const AuthorWithTime = ({
+  story,
+  separator,
+  isBottom,
+  hideAuthorImage,
+  prefix,
+  config = {},
+  isLightTheme,
+  collectionId,
+  layout,
+  enableDarkModePreview = false
+}) => {
+  const configState = useStateValue() || {};
+  const isAuthor = get(config, ["showAuthor"], get(configState, ["showAuthor"], true));
+  const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
+  const isReadTime = get(configState, ["showReadTime"], true);
+  const separatorStyle = separator === "dot" ? "dot" : "dash";
+  const theme = getTheme(configState, layout, enableDarkModePreview);
+  const textColor = isLightTheme ? "light" : getTextColor(theme);
+  const isSeparatorEnabled = isAuthor && (isTime || isReadTime);
+  const { localization = {}, sponsoredStoryConfig = {} } = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
+  );
+  const { localizedElements = {}, enableLocalization = false } = localization;
+  const timeToRead = (enableLocalization && get(localizedElements, ["buttonLabels", "timeToRead"])) || "min read";
+
+  const getTimeStamp = () => {
+    return (
+      <>
+        {isSeparatorEnabled && (
+          <div className="arr-separator" styleName={separatorStyle}>
+            {getSeparator(separator, textColor)}
+          </div>
+        )}
+        {isTime &&
+          (collectionId ? (
+            <div id={`publish-time-${collectionId}-${story.id}`}>
+              <TimeStamp story={story} config={config} layout={layout} enableDarkModePreview={enableDarkModePreview} />
+            </div>
+          ) : (
+            <TimeStamp story={story} config={config} layout={layout} enableDarkModePreview={enableDarkModePreview} />
+          ))}
+        {isReadTime && (
+          <ReadTime
+            story={story}
+            opts={{ ...config, showDotIndicator: isTime, separator, localizedTimeToRead: timeToRead }}
+            isLightTheme={isLightTheme}
+            layout={layout}
+            enableDarkModePreview={enableDarkModePreview}
+          />
+        )}
+        <div styleName="space-8"></div>
+      </>
+    );
+  };
+
+  return (
+    <div className="arr--author-time" styleName="author-time-wrapper">
+      {isAuthor ? (
+        <>
+          <Author
+            story={story}
+            isBottom
+            hideAuthorImage={hideAuthorImage}
+            prefix={prefix}
+            layout={layout}
+            enableDarkModePreview={enableDarkModePreview}
+          />
+          {getTimeStamp()}
+        </>
+      ) : (
+        getTimeStamp()
+      )}
+      <SponsoredLabel story={story} sponsoredStoryConfig={sponsoredStoryConfig} />
+    </div>
+  );
+};
+
+AuthorWithTime.propTypes = {
+  story: PropTypes.object,
+  /** Style of separator between the Author & Timestamp */
+  separator: PropTypes.oneOf(["dot", "divider"]),
+  /** hide the author image */
+  hideAuthorImage: PropTypes.bool,
+  // fix author and time at the end
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isLightTheme: PropTypes.bool,
+  collectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  layout: PropTypes.string,
+  enableDarkModePreview: PropTypes.bool
+};
+
+AuthorWithTime.defaultProps = {
+  separator: "dot",
+  isBottom: false,
+  hideAuthorImage: true,
+  prefix: "",
+  isLightTheme: false,
+  layout: ""
+};

package/src/components/Atoms/AuthorWithTimestamp/stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { AuthorWithTime } from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const config = {
+  localizationConfig: {
+    localizedTimeToRead: "মিনিট পড়া"
+  }
+};
+
+withStore(
+  "Atoms/Author With Time Stamp",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("default", () => <AuthorWithTime story={story} />)
+  .add("Author without Divider and Time", () => <AuthorWithTime story={story} separator="divider" />)
+  .add("Author with Localization Time", () => <AuthorWithTime story={story} config={config} />);

package/src/components/Atoms/BulletPoint/README.md

@@ -0,0 +1,9 @@
+# Bullet Point
+
+Component to add a bullet point to a story card.
+
+## Usage
+
+```jsx
+<BulletPoint bulletValue={bulletValue} />
+```

package/src/components/Atoms/BulletPoint/bullet-point.m.css

@@ -0,0 +1,25 @@
+.bullet {
+  font-size: var(--arrow-fs-huge);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+}
+
+.dark {
+  color: var(--arrow-c-mono6);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono6);
+}
+
+html[dir="ltr"] {
+  .bullet {
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+html[dir="rtl"] {
+  .bullet {
+    margin-left: var(--arrow-spacing-l);
+  }
+}

package/src/components/Atoms/BulletPoint/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useStateValue } from "../../SharedContext";
+import { getTextColor } from "../../../utils/utils";
+import "./bullet-point.m.css";
+
+export const BulletPoint = ({ bulletValue = "" }) => {
+  const configData = useStateValue() || {};
+  const textColor = getTextColor(configData.theme);
+  return (
+    <div className="arrow-component arr--bullet-point">
+      <span styleName={`bullet ${textColor}`}>{bulletValue}</span>
+    </div>
+  );
+};
+
+BulletPoint.propTypes = {
+  bulletValue: PropTypes.string
+};

package/src/components/Atoms/BulletPoint/stories.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { BulletPoint } from "./index";
+import Readme from "./README.md";
+
+withStore("Atoms/Bullet Point", {}, Readme).add("Default", () => <BulletPoint bulletValue={"1"} />);

package/src/components/Atoms/CaptionAttribution/README.md

@@ -0,0 +1,15 @@
+# CaptionAttribution
+
+Displays the Caption and Attribution of Hero Image or Image Element of the Story.
+
+## Usage
+
+```jsx
+<CaptionAttribution story={story} config={{ theme: "ffff" }} />
+```
+
+```jsx
+<CaptionAttribution element={element} config={{ theme: "ffff" }} />
+```
+
+<!-- PROPS -->

package/src/components/Atoms/CaptionAttribution/caption-attribution.m.css

@@ -0,0 +1,40 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.caption {
+  font-size: 12px;
+  font-family: var(--arrow-typeface-secondary);
+  margin: var(--arrow-spacing-xs) 0;
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.wrapper {
+  padding-left: var(--arrow-spacing-s);
+}
+
+.caption.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.attribution.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.caption.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .wrapper {
+    padding-left: 0;
+    padding-right: var(--arrow-spacing-s);
+    display: inline-block;
+  }
+}

package/src/components/Atoms/CaptionAttribution/caption-attribution.test.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { CaptionAttribution } from "./index";
+import { generateStory, generateStoryElementData } from "../../Fixture";
+
+describe("Caption Attribution Component", () => {
+  it("Should display the Caption and Attribution of Image element", () => {
+    const element = generateStoryElementData("image");
+    const wrapper = mount(<CaptionAttribution element={element} story="" />);
+    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
+    // the below test is to check if the attribution is present
+    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
+    // the below test is to check if the caption is present
+    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
+  });
+
+  it("Should display the Caption and Attribution of Story", () => {
+    const story = generateStory();
+    const wrapper = mount(<CaptionAttribution story={story} element="" />);
+    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
+    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
+    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
+  });
+
+  test("Should not render the Caption and Attribution if the data is null", () => {
+    const component = shallow(<CaptionAttribution story="" element="" />);
+    expect(component.contains(<CaptionAttribution story="" element="" />)).toBe(false);
+  });
+});

package/src/components/Atoms/CaptionAttribution/index.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./caption-attribution.m.css";
+import { getTextColor, shapeStory } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+
+export const CaptionAttribution = ({ story, element, config = {} }) => {
+  if (!(story || element)) return null;
+  const configData = useStateValue() || {};
+  const textColor = getTextColor(configData.theme);
+
+  const { "hero-image-caption": heroImageCaption = "", "hero-image-attribution": heroImageAttribution = "" } =
+    story || {};
+  const { title = "", "image-attribution": imageAttribution = "" } = element || {};
+
+  const caption = heroImageCaption || title;
+  const attribution = heroImageAttribution || imageAttribution;
+  const updateStyle = caption ? "wrapper" : "";
+  return (
+    <div data-test-id="caption" className="arr--caption-attribution" styleName={`caption ${textColor}`}>
+      <span dangerouslySetInnerHTML={{ __html: caption }} />
+      {attribution && (
+        <span
+          data-test-id="attribution"
+          styleName={`attribution ${textColor} ${updateStyle}`}
+          dangerouslySetInnerHTML={{ __html: attribution }}
+        />
+      )}
+    </div>
+  );
+};
+
+CaptionAttribution.propTypes = {
+  config: PropTypes.shape({ theme: PropTypes.string }),
+  story: shapeStory,
+  element: PropTypes.shape({
+    "image-attribution": PropTypes.string,
+    title: PropTypes.string
+  })
+};

package/src/components/Atoms/CaptionAttribution/stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { CaptionAttribution } from "./index";
+import Readme from "./README.md";
+import { withStore } from "../../../../storybook";
+import { color } from "@storybook/addon-knobs";
+import { generateStory, generateStoryElementData } from "../../Fixture";
+
+const story = generateStory();
+const element = generateStoryElementData("image");
+withStore("Atoms/Caption Attribution", Readme)
+  .add("Hero Image", () => {
+    const config = {
+      theme: color("BG Color", "#ffffff")
+    };
+    return <CaptionAttribution story={story} config={config} />;
+  })
+  .add("Image Element", () => {
+    const config = {
+      theme: color("BG Color", "#ffffff")
+    };
+    return <CaptionAttribution element={element} config={config} />;
+  })
+  .add("Caption", () => {
+    const config = {
+      theme: color("BG Color", "#ffffff")
+    };
+    const data = {
+      title: "Caption"
+    };
+    return <CaptionAttribution element={data} config={config} />;
+  })
+  .add("Attribution", () => {
+    const config = {
+      theme: color("BG Color", "#ffffff")
+    };
+    const data = {
+      "image-attribution": "Attribution"
+    };
+    return <CaptionAttribution element={data} config={config} />;
+  });

package/src/components/Atoms/CollectionName/README.md

@@ -0,0 +1,11 @@
+# CollectionName
+
+Displays the collection name, usually for a Row, and links it to a collection or section page accordingly.
+
+## Usage 
+
+```jsx
+<CollectionName collection={collection} collectionNameTemplate="borderBottom">
+```
+
+<!-- PROPS -->

package/src/components/Atoms/CollectionName/collection-name.m.css

@@ -0,0 +1,106 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.collection {
+  font-size: var(--arrow-fs-m);
+  margin-bottom: var(--arrow-spacing-m);
+  font-weight: var(--arrow-fw-bold);
+  @media (--viewport-medium) {
+    font-size: var(--arrow-fs-l);
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.collection-borderLeft {
+  display: flex;
+  align-items: baseline;
+
+  .border-left {
+    margin-right: var(--arrow-spacing-xs);
+    min-width: 5px;
+    width: 5px;
+    overflow: hidden;
+  }
+
+  .border-left::before {
+    content: "I";
+    font-family: var(--arrow-sans-serif);
+  }
+}
+
+.collection-borderBottomFull {
+  display: inline-block;
+}
+
+.collection-borderBottom {
+  display: block;
+}
+.collection-crossLine {
+  display: flex;
+  align-items: center;
+}
+.collection-crossLine:before {
+  content: " ";
+  position: relative;
+  flex: 1 1 auto;
+  margin-right: var(--arrow-spacing-l);
+}
+.collection-crossLine:after {
+  content: " ";
+  position: relative;
+  flex: 1 1 auto;
+  margin-left: var(--arrow-spacing-l);
+}
+
+.dark.collection-crossLine:before {
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+.light.collection-crossLine:before {
+  border-top: 1px solid var(--arrow-c-invert-mono2);
+}
+
+.dark.collection-crossLine:after {
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+.light.collection-crossLine:after {
+  border-top: 1px solid var(--arrow-c-invert-mono2);
+}
+
+html[dir="rtl"] {
+  .collection-borderLeft {
+    .border-left {
+      margin-right: 0;
+      margin-left: var(--arrow-spacing-xs);
+    }
+  }
+
+  .collection-crossLine:before {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-l);
+  }
+  .collection-crossLine:after {
+    margin-left: 0;
+    margin-right: var(--arrow-spacing-l);
+  }
+}
+
+.border-bottom {
+  width: 20px;
+  height: 4px;
+  margin-top: var(--arrow-spacing-xxs);
+}
+
+.collection-crossLine .border-bottom {
+  visibility: hidden;
+}
+.dark a,
+.dark h3,
+.dark h2,
+.dark h5 {
+  color: var(--arrow-c-mono2);
+}
+.light a,
+.light h3,
+.light h2,
+.light h5 {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Atoms/CollectionName/index.js

@@ -0,0 +1,147 @@
+import React from "react";
+import { connect } from "react-redux";
+import { PropTypes } from "prop-types";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import get from "lodash.get";
+import { getTextColor, getSlug, rgbToHex, clientWidth } from "../../../utils/utils";
+
+import "./collection-name.m.css";
+
+export const CollectionNameBase = ({
+  collectionNameBorderColor = "",
+  collection,
+  config,
+  collectionNameTemplate,
+  headerLevel,
+  customCollectionName = "",
+  navigate = true
+}) => {
+  const collectionTitle = useStateValue() || {};
+  const showRowTitle = get(collectionTitle, ["showRowTitle"], true);
+  const supportedTemplates = ["borderLeft", "borderBottom", "crossLine", "borderBottomFull"];
+  const templateStyle = supportedTemplates.includes(collectionNameTemplate)
+    ? ` collection-${collectionNameTemplate}`
+    : "";
+  const slug = (navigate && collection && getSlug(collection, config)) || "";
+  const collectionName = customCollectionName || collection.name || "";
+  const textColor = getTextColor(collectionTitle.theme);
+  const HeaderTag = "h" + headerLevel;
+  const CollectionNameBorderColor = rgbToHex(collectionNameBorderColor);
+
+  const borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull")
+    ? `4px solid ${CollectionNameBorderColor}`
+    : "none";
+
+  const borderBottomStyle = () => {
+    return templateStyle.includes("collection-borderBottom") &&
+      !templateStyle.includes("collection-borderBottomFull") ? (
+      <div
+        styleName="border-bottom"
+        style={{
+          borderBottom: CollectionNameBorderColor ? `4px solid ${CollectionNameBorderColor}` : "none"
+        }}></div>
+    ) : (
+      ""
+    );
+  };
+
+  const isMobile = clientWidth("mobile");
+
+  const getBorderHeight = () => {
+    if (isMobile) {
+      switch (headerLevel) {
+        case "1":
+          return "32px";
+        case "2":
+          return "24px";
+        case "3":
+          return "20px";
+        case "4":
+          return "18px";
+        case "5":
+          return "16px";
+        case "6":
+          return "16px";
+        default:
+          return "20px";
+      }
+    }
+    switch (headerLevel) {
+      case "1":
+        return "40px";
+      case "2":
+        return "32px";
+      case "3":
+        return "24px";
+      case "4":
+        return "20px";
+      case "5":
+        return "18px";
+      case "6":
+        return "16px";
+      default:
+        return "24px";
+    }
+  };
+
+  return (
+    <>
+      {showRowTitle && collectionName && (
+        <div
+          className={`arr--collection-name arrow-component ${templateStyle}`}
+          styleName={`collection ${templateStyle} ${textColor}`}
+          style={{
+            borderBottom: borderBottomFullStyle
+          }}
+          data-test-id="collection-name">
+          {templateStyle.includes("collection-borderLeft") && (
+            <span
+              styleName="border-left"
+              className="arr-collection-name-border-left"
+              style={{
+                color: CollectionNameBorderColor || "initial",
+                fontSize: getBorderHeight()
+              }}></span>
+          )}
+          {slug && !slug.includes(undefined) ? (
+            <Link href={slug} aria-label="collection-name">
+              <HeaderTag>{collectionName}</HeaderTag>
+            </Link>
+          ) : (
+            <HeaderTag>{collectionName}</HeaderTag>
+          )}
+          {borderBottomStyle()}
+        </div>
+      )}
+    </>
+  );
+};
+
+CollectionNameBase.propTypes = {
+  /** Collection name border color */
+  collectionNameBorderColor: PropTypes.string,
+  /** The Collection Object from the API response */
+  collection: PropTypes.object,
+  /** The publisher config from the API response */
+  config: PropTypes.object,
+  /** The style template for the component  */
+  collectionNameTemplate: PropTypes.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  customCollectionName: PropTypes.string,
+  navigate: PropTypes.bool
+};
+
+CollectionNameBase.defaultProps = {
+  collectionNameTemplate: "",
+  headerLevel: "2"
+};
+
+function mapStateToProps(state) {
+  return {
+    config: get(state, ["qt", "config"], {})
+  };
+}
+
+export const CollectionName = connect(mapStateToProps)(CollectionNameBase);