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

package/src/components/Molecules/KeyEvents/index.js

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { ClockIcon } from "../../Svgs/clock-icon";
+import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { StateProvider } from "../../SharedContext";
+import "./key-events.m.css";
+import { useSelector } from "react-redux";
+
+const KeyEventCards = (props) => {
+  const { config, index, cardLength, card = {}, slug, loadCards, showLoadMore } = props;
+  const { "card-added-at": cardAddedAt, "story-elements": storyElements = [], id } = card;
+  const { theme, mountAt = "" } = config;
+  const textColor = getTextColor(theme);
+  const dark = "#333";
+  const light = "#fff";
+  const updateColor = textColor === "dark" ? dark : light;
+  const lastElement = index === cardLength - 1;
+  const borderLeft = lastElement ? "borderNone" : "";
+
+  return (
+    <>
+      <div styleName={`time-wrapper ${textColor}`}>
+        <ClockIcon color={updateColor} />
+        {getTimeStamp(cardAddedAt, timestampToFormat, { showTime: true, isTimeFirst: true })}
+      </div>
+      <a href={`${mountAt}/${slug}#${id}`} aria-label="event-title">
+        <div styleName={`event-title ${textColor} ${borderLeft}`}>
+          {storyElements.map((element, index) => element.type === "title" && <h3 key={index}>{element.text}</h3>)}
+          {showLoadMore && lastElement && loadCards && (
+            <div
+              styleName="fade-out"
+              style={{
+                backgroundImage: `linear-gradient(to bottom, transparent, ${theme})`
+              }}
+            />
+          )}
+        </div>
+      </a>
+    </>
+  );
+};
+
+KeyEventCards.propTypes = {
+  card: PropTypes.shape({
+    "card-added-at": PropTypes.number,
+    "story-elements": PropTypes.array,
+    id: PropTypes.string
+  }),
+  config: PropTypes.object,
+  slug: PropTypes.string,
+  story: PropTypes.object,
+  elements: PropTypes.array,
+  index: PropTypes.number,
+  cardLength: PropTypes.number,
+  loadCards: PropTypes.bool,
+  showLoadMore: PropTypes.bool
+};
+
+const KeyEvents = ({ story = {}, config = {}, showLoadMore = true }) => {
+  const cards = get(story, ["cards"], []);
+  const { theme, initialLoadCount = 4 } = config;
+  const textColor = getTextColor(theme);
+  const [initialCount, updatedCount] = useState(initialLoadCount);
+  const cardsWithKeyEvents = cards.filter((card) => get(card.metadata, ["attributes", "key-event"]));
+  const lastElement = cardsWithKeyEvents.length > initialCount;
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+  const onClick = () => {
+    updatedCount(initialCount + initialLoadCount);
+  };
+
+  if (cardsWithKeyEvents.length < 1) {
+    return null;
+  }
+
+  const showAllCards = !showLoadMore ? cardsWithKeyEvents.slice(0, 4) : cardsWithKeyEvents.slice(0, initialCount);
+
+  const keyEvents = showAllCards.map((card, index, source) => (
+    <KeyEventCards
+      cardLength={source.length}
+      card={card}
+      key={card.id}
+      slug={story.slug}
+      config={config}
+      index={index}
+      loadCards={lastElement}
+      showLoadMore={showLoadMore}
+    />
+  ));
+
+  return (
+    <div className="arrow-component" style={{ background: theme }} styleName={`container ${textColor}`}>
+      <h3>Key Events</h3>
+      <div styleName="cards-wrapper">{keyEvents}</div>
+      {showLoadMore && lastElement && (
+        <LoadmoreButton onClick={onClick} template="SubsequentLoadCount" config={config} qtConfig={qtConfig} />
+      )}
+    </div>
+  );
+};
+KeyEvents.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.object,
+  showLoadMore: PropTypes.bool
+};
+
+export default StateProvider(KeyEvents);

package/src/components/Molecules/KeyEvents/key-events.m.css

@@ -0,0 +1,89 @@
+.container {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+}
+
+.event-title > h3 {
+  font-size: var(--arrow-fs-xs);
+}
+
+.container:global(.arrow-component) > h3 {
+  font-size: var(--arrow-fs-m);
+  padding: var(--arrow-spacing-xs);
+}
+
+.cards-wrapper {
+  margin-top: var(--arrow-spacing-s);
+}
+
+.time-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-tiny);
+  svg {
+    margin-right: var(--arrow-spacing-xxs);
+  }
+}
+
+.event-title {
+  position: relative;
+  padding: 0 14px 28px;
+  margin-left: var(--arrow-spacing-s);
+}
+
+.event-title.dark {
+  border-left: 1px solid var(--arrow-c-mono5);
+}
+
+.event-title.light {
+  border-left: 1px solid var(--arrow-c-invert-mono5);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.light.borderNone,
+.dark.borderNone {
+  border-left: none;
+}
+
+.fade-out {
+  position: absolute;
+  top: -20px;
+  height: 100%;
+  width: 100%;
+  background-image: inherit;
+  pointer-events: none;
+}
+
+.container.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono5);
+}
+
+html[dir="rtl"] {
+  .time-wrapper {
+    direction: ltr;
+    flex-direction: row-reverse;
+    svg {
+      margin-right: 0;
+      margin-left: var(--arrow-spacing-xxs);
+    }
+  }
+
+  .event-title.dark,
+  .event-title.light {
+    border-right: 1px solid var(--arrow-c-mono5);
+    border-left: none;
+    margin-left: 0;
+    margin-right: var(--arrow-spacing-s);
+  }
+
+  .light.borderNone,
+  .dark.borderNone {
+    border-right: none;
+  }
+}

package/src/components/Molecules/KeyEvents/stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Readme from "./README.md";
+import { withStore } from "../../../../storybook";
+import { generateStory } from "../../Fixture";
+import KeyEvents from "./index";
+import { color, text } from "@storybook/addon-knobs";
+
+const story = generateStory("live-blog");
+
+withStore(
+  "Molecules/Key Events",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Key Events", () => {
+  const config = {
+    theme: color("Color", "#ffffff"),
+    initialLoadCount: text("Initial Load Count", 4),
+    buttonText: text("Button text", "Load More")
+  };
+  return <KeyEvents story={story} config={config} />;
+});

package/src/components/Molecules/PageIntroductionCard/README.md

@@ -0,0 +1,25 @@
+# Page Introduction Card
+
+Page Introduction card is used to display the page information which consists of Page Title and Page Description.
+
+## Usage
+
+```jsx
+import { PageIntroductionCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+const config = {
+  pageTitle: "Page Title",
+  pageDescription: "This is the description of the page",
+  theme: #333333;,
+  showButton = false,
+  enableBorder = false,
+}
+
+<PageIntroductionCard config={config} />
+
+```

package/src/components/Molecules/PageIntroductionCard/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import upperCase from "lodash/upperCase";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash.get";
+import { getTextColor, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import "./page-intro-card.m.css";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+
+export const PageIntroductionCard = ({ config = {} }) => {
+  const {
+    pageTitle = "",
+    pageDescription = "",
+    theme = "#131922",
+    showButton = false,
+    enableBorder = false,
+    customUrlPath
+  } = config;
+  const textColor = getTextColor(theme);
+  const borderBottom = enableBorder ? "borderBottom" : "";
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const url = generateNavigateSlug({}, { ...qtConfig, config }, customUrlPath);
+
+  return (
+    <div
+      styleName="author-page-wrapper"
+      className="arrow-component full-width-with-padding"
+      style={{ background: theme }}>
+      <h2 styleName={`pageTitle ${textColor} ${borderBottom}`} data-test-id="page-title">
+        {upperCase(pageTitle)}
+      </h2>
+      <div styleName={`pageDescription ${textColor}`} data-test-id="page-description">
+        {pageDescription}
+      </div>
+      {showButton && (
+        <LoadmoreButton
+          template="customUrlPath"
+          config={config}
+          navigate={() => navigateTo(dispatch, url)}
+          qtConfig={qtConfig}
+        />
+      )}
+    </div>
+  );
+};
+
+PageIntroductionCard.propTypes = {
+  config: PropTypes.shape({ theme: PropTypes.string, pageTitle: PropTypes.string, pageDescription: PropTypes.string })
+};

package/src/components/Molecules/PageIntroductionCard/page-intro-card.m.css

@@ -0,0 +1,61 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.author-page-wrapper:global(.full-width-with-padding) {
+  text-align: center;
+  padding-top: 40px;
+  padding-bottom: 32px;
+  @media (min-width: mobile) {
+    padding-top: 48px;
+    padding-bottom: 48px;
+    @media (min-width: tablet) {
+      padding-right: 302px;
+      padding-left: 301px;
+      padding-top: 60px;
+    }
+  }
+}
+
+.pageTitle {
+  font-size: var(--arrow-fs-l);
+  color: var(--arrow-c-mono2);
+  padding-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-huge);
+  }
+}
+
+.borderBottom {
+  position: relative;
+  text-align: center;
+  padding-bottom: 34px;
+}
+
+.borderBottom:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 52px;
+  margin: 0 0 0 -26px;
+  bottom: 24px;
+  border-bottom: 5px solid;
+}
+
+.pageDescription {
+  margin: 0 auto var(--arrow-spacing-l) 0;
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono2);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Molecules/PageIntroductionCard/stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { PageIntroductionCard } from "./index.js";
+import { color } from "@storybook/addon-knobs";
+import Readme from "./README.md";
+
+withStore("Molecules/Page Intro Card", Readme).add("Default", () => {
+  const config = {
+    pageTitle: "Page Title",
+    pageDescription: "This is the page description",
+    theme: color("Color", "#131922"),
+    enableBorder: true,
+    showButton: true
+  };
+  return <PageIntroductionCard config={config} />;
+});

package/src/components/Molecules/SliderHorizontalCard/README.md

@@ -0,0 +1,14 @@
+# SliderHorizontalCard(Row/Organisms)
+
+The _SliderHorizontalCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#organisms) used to represent a molecule with atoms.
+
+Horizontal Slider Card is a horozontal card with same width for image and content.
+## Usage
+
+### Default SliderHorizontalCard
+
+```jsx
+<SliderHorizontalCard collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/src/components/Molecules/SliderHorizontalCard/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { Headline } from "../../Atoms/Headline/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { HeroImage } from "../../Atoms/HeroImage/index";
+import { SectionTag } from "../../Atoms/SectionTag/index";
+import { getTextColor, isEmpty } from "../../../utils/utils";
+
+import PropTypes from "prop-types";
+
+import "./slider-horizontal-card.m.css";
+
+export const SliderHorizontalCard = ({
+  story,
+  border = "",
+  theme = "",
+  headerLevel,
+  borderColor = "",
+  config = {}
+}) => {
+  if (!story || isEmpty(story)) return <div />;
+  const borderStyle = border === "full" ? "border" : "";
+  const textColor = getTextColor(theme);
+  const { localizationConfig = {} } = config;
+  return (
+    <div styleName={`horizontal ${borderStyle}`} style={{ backgroundColor: theme, color: textColor }}>
+      <HeroImage story={story} aspectRatio={[[4, 3], [16, 9]]} />
+      <div className="arr--content" styleName="content">
+        <SectionTag story={story} borderColor={borderColor} />
+        <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
+        <Subheadline story={story} />
+        <AuthorWithTime config={localizationConfig} story={story} isBottom prefix="By" />
+      </div>
+    </div>
+  );
+};
+
+SliderHorizontalCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.string,
+  theme: PropTypes.string,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object
+};

package/src/components/Molecules/SliderHorizontalCard/slider-horizontal-card.m.css

@@ -0,0 +1,42 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.horizontal {
+  display: flex;
+  flex-direction: column;
+  @media (--viewport-medium) {
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 24px;
+  }
+}
+.content {
+  flex-basis: 50%;
+  @media (--viewport-medium) {
+    margin: var(--arrow-spacing-l) 40px var(--arrow-spacing-l) 0;
+  }
+}
+
+.border .content {
+  @media (--viewport-medium) {
+    margin: var(--arrow-spacing-l) 40px var(--arrow-spacing-l) 0;
+  }
+}
+
+html[dir="rtl"] {
+  .content,
+  .border .content {
+    @media (--viewport-medium) {
+      margin: var(--arrow-spacing-l) 0 var(--arrow-spacing-l) 40px;
+    }
+  }
+}
+
+.horizontal > :first-child {
+  @media (--viewport-medium) {
+    margin-bottom: 0;
+  }
+}
+.border {
+  border: 1px solid var(--arrow-c-mono5);
+}

package/src/components/Molecules/SliderHorizontalCard/stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { SliderHorizontalCard } from "./index";
+import Readme from "./README.md";
+import { color } from "@storybook/addon-knobs";
+import { withStore } from "../../../../storybook";
+
+const story = generateStory();
+
+const defaultvalue = "#3a9fdd";
+const sectionTagBorderColor = "Section Tag Border Color";
+
+withStore(
+  "molecules/Horizontal Slider Card ",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default horizontal card for slider", () => (
+    <SliderHorizontalCard story={story} borderColor={color(sectionTagBorderColor, defaultvalue)} />
+  ))
+  .add("Horizontal card for slider with empty story", () => (
+    <SliderHorizontalCard story={null} borderColor={color(sectionTagBorderColor, defaultvalue)} />
+  ));

package/src/components/Molecules/SocialShareTemplate/README.md

@@ -0,0 +1,118 @@
+# Social Share Template
+
+A template for social share on story page
+
+## Usage
+
+#### Social share template with horizontal share
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with vertical share
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with plain svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with plain color svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "plain-color-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with square svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "square-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with circular svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "circular-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+#### Social share template with circular color svg
+
+```jsx
+const data = {
+  fbUrl: "https://www.facebook.com",
+  twitterUrl: "https://twitter.com/",
+  linkedinUrl: "https://twitter.com/",
+  whatsappUrl: "https://twitter.com/",
+  theme: "#ffff",
+  vertical: true
+  iconType: "circular-color-svg"
+};
+
+<SocialShareTemplate {...data} />;
+```
+
+<!-- PROPS -->