@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

@@ -1,109 +0,0 @@
-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

@@ -1,89 +0,0 @@
-.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

@@ -1,28 +0,0 @@
-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

@@ -1,25 +0,0 @@
-# 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

@@ -1,50 +0,0 @@
-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

@@ -1,61 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-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/PortraitStoryCard/README.md

@@ -1,10 +0,0 @@
-# Portrait Story Card
-
-The _PortraitStoryCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#molecules) used to represent a story in portrait view within a Row.
-
-
-## Usage
-
-
-```jsx
-<PortraitStoryCard story={story} config={contextConfig}  />

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

@@ -1,49 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import { StoryCard } from "../StoryCard";
-import { StorycardContent } from "../StorycardContent";
-import { HeroImage } from "../../Atoms/HeroImage";
-import { isEmpty } from "../../../utils/utils";
-import { StateProvider } from "../../SharedContext";
-
-import "./portrait-story-card.m.css";
-
-const PortraitStoryCard = ({
-  story,
-  border = "",
-  theme = "",
-  headerLevel = "6",
-  separator = "",
-  config = {},
-  borderColor = ""
-}) => {
-  if (isEmpty(story)) return null;
-
-  return (
-    <div styleName="wrapper">
-      <StoryCard story={story} border={border} theme={theme} config={config} useImageAsBackground>
-        <HeroImage story={story} aspectRatio={[[9, 16]]} />
-        <StorycardContent
-          story={story}
-          config={config}
-          separator={separator}
-          borderColor={borderColor}
-          headerLevel={headerLevel}
-        />
-      </StoryCard>
-    </div>
-  );
-};
-
-PortraitStoryCard.propTypes = {
-  border: PropTypes.string,
-  theme: PropTypes.string,
-  headerLevel: PropTypes.string,
-  separator: PropTypes.string,
-  borderColor: PropTypes.string,
-  config: PropTypes.object,
-  story: PropTypes.object
-};
-
-export default StateProvider(PortraitStoryCard);

package/src/components/Molecules/PortraitStoryCard/portrait-story-card.m.css

@@ -1,38 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.wrapper {
-  :global {
-    .arr--story-card > div:nth-child(2) {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding: var(--arrow-spacing-xs);
-
-      @media (--viewport-medium) {
-        padding: var(--arrow-spacing-m);
-      }
-    }
-    .arr--headline > a > h6,
-    .author-name,
-    .arr--content-wrapper time,
-    .arr--read-time,
-    .section-tag {
-      color: var(--arrow-c-light);
-    }
-
-    .arr--hero-image {
-      margin-bottom: 0;
-    }
-
-    .arr--hero-image figure::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background: linear-gradient(0deg, var(--arrow-c-mono3), transparent 70%, transparent);
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-import React from "react";
-
-import Readme from "./README.md";
-import { generateStory } from "../../Fixture";
-import PortraitStoryCard from "./index";
-import { withStore } from "../../../../storybook";
-
-const story = generateStory();
-
-withStore(
-  "molecules/Portrait Story Card ",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "320px" }}>{story()}</div>)
-
-  .add("Default", () => <PortraitStoryCard story={story} />);

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

@@ -1,14 +0,0 @@
-# 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

@@ -1,45 +0,0 @@
-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 config={config} 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

@@ -1,42 +0,0 @@
-@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

@@ -1,30 +0,0 @@
-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)} />
-  ));