@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

package/src/components/Molecules/FullScreenImages/fullscreenimages.scss

@@ -1,56 +0,0 @@
-@import "../../../../node_modules/react-image-lightbox/style.css";
-
-.arr--image-lightbox {
-  .icon.loader {
-    color: var(--arrow-c-brand1);
-  }
-
-  .ril__toolbarRightSide {
-    flex-grow: 1;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .ril__toolbar {
-    bottom: 0;
-    top: auto;
-  }
-
-  img.ril__image {
-    width: unset;
-    max-width: 100%;
-  }
-
-  .ril__zoomInButton {
-    position: relative;
-    border-right: 1px solid var(--arrow-c-mono7);
-    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZD0iTS0zLTRoMjR2MjRILTN6IiBvcGFjaXR5PSIuMzg0Ii8+CiAgICAgICAgPGcgZmlsbD0iI0ZGRiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik04IDBoMXYxN0g4eiIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMTcgOHYxSDBWOHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=")
-      no-repeat center;
-  }
-
-  .ril__zoomOutButton {
-    position: relative;
-    border-right: 1px solid var(--arrow-c-mono7);
-    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMTcgMSI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgIDxwYXRoIGQ9Ik0tMy0xMmgyNHYyNEgtM3oiIG9wYWNpdHk9Ii4zODQiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTcgMHYxSDBWMHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
-      no-repeat center;
-  }
-
-  .ril__zoomInButton,
-  .ril__zoomOutButton,
-  .ril__closeButton {
-    width: 48px;
-    height: 48px;
-  }
-  .ril__navButtons {
-    outline: none;
-    border-radius: 0;
-  }
-
-  .ril__toolbarItem .arr--hyperlink-button {
-    position: unset;
-    svg {
-      position: relative;
-      top: 10px;
-    }
-  }
-}

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

@@ -1,98 +0,0 @@
-import React, { useState, Suspense, lazy } from "react";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import "./fullscreenimages.scss";
-import { Loading } from "../../Svgs/Loading/loading";
-import { HyperLink } from "../../Atoms/Hyperlink";
-
-const Lightbox = lazy(() => import("react-image-lightbox"));
-
-export const FullScreenImages = ({ imageSlug = "", template, element = {}, props }) => {
-  const cdnImage = useSelector((state) => get(state, ["qt", "config", "cdn-image"]));
-  let [photoIndex, handleImage] = useState(0);
-  let [isOpen, handleOpen] = useState(false);
-  const deviceWidth = get(global, ["innerWidth"], 0);
-
-  const hyperlinks = get(element, ["story-elements"], []).map((image) => image.hyperlink);
-
-  let imageUrlList = [];
-  if (!imageSlug) {
-    imageUrlList = get(element, ["story-elements"], []).map(
-      (image) => `//${cdnImage}/${image["image-s3-key"]}?w=${deviceWidth}`
-    );
-  }
-
-  const onClickHandler = (index) => {
-    handleOpen(true);
-    handleImage(index);
-  };
-  const onClickKey = imageSlug ? "onClick" : "onClickHandler";
-
-  const imageUrlListLength = imageUrlList.length;
-  const onMoveNext = (imageUrlListLength) => {
-    const next = (photoIndex + 1) % imageUrlListLength;
-    handleImage(next);
-  };
-
-  const onMovePrev = (imageUrlListLength) => {
-    const prev = (photoIndex + imageUrlListLength - 1) % imageUrlListLength;
-    handleImage(prev);
-  };
-
-  const onClose = () => {
-    handleImage(0);
-    handleOpen(false);
-  };
-
-  const getHyperLink = () => {
-    if (element.hyperlink || hyperlinks[photoIndex]) {
-      return <HyperLink hyperLink={element.hyperlink || hyperlinks[photoIndex]} />;
-    }
-    return null;
-  };
-
-  const lightboxProps = imageSlug
-    ? {
-        mainSrc: `//${cdnImage}/${imageSlug}?w=${deviceWidth}`,
-        toolbarButtons: [getHyperLink()]
-      }
-    : {
-        mainSrc: imageUrlList[photoIndex],
-        nextSrc: imageUrlList[(photoIndex + 1) % imageUrlListLength],
-        prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
-        onMoveNextRequest: () => onMoveNext(imageUrlListLength),
-        onMovePrevRequest: () => onMovePrev(imageUrlListLength),
-        toolbarButtons: [getHyperLink()]
-      };
-
-  const LoadingScreen = () => {
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      {React.createElement(template, {
-        [onClickKey]: onClickHandler,
-        ...props
-      })}
-      {isOpen ? (
-        <Suspense fallback={<LoadingScreen />}>
-          <Lightbox wrapperClassName="arr--image-lightbox" onCloseRequest={onClose} {...lightboxProps} />
-        </Suspense>
-      ) : null}
-    </div>
-  );
-};
-FullScreenImages.propTypes = {
-  imageSlug: PropTypes.string,
-  template: PropTypes.func,
-  element: PropTypes.shape({
-    "story-elements": PropTypes.array
-  }),
-  props: PropTypes.object
-};

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

@@ -1,21 +0,0 @@
-# Key Events
-
-Key events is used to represent the event templates for a live blog story.
-
-## Usage
-
-```jsx
-import { KeyEvents } from "@quintype/arrow";
-```
-
-### Use as a component
-
-```jsx
-
-const config = {
-   theme: #333333;
-}
-
-<KeyEvents config={config} />
-
-```

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

@@ -1,132 +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, getTimeStampConfig } 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, qtConfig } = props;
-  const { "card-added-at": cardAddedAt, "story-elements": storyElements = [], id } = card;
-  const { theme } = 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" : "";
-  const timeStampConfig = getTimeStampConfig(qtConfig);
-  const direction = get(qtConfig, ["language", "direction"], "ltr");
-
-  function scrollToCard(event) {
-    event.preventDefault();
-    const cardToView = document.getElementById(`${slug}-${id}`);
-    cardToView.scrollIntoView();
-  }
-
-  const rltDateTimeWithOutLocalization =
-    direction === "rtl" && !timeStampConfig.enableLocalization ? "rtl-date-time" : "";
-
-  const updatedConfig = {
-    showTime: true,
-    isTimeFirst: true,
-    direction,
-    ...timeStampConfig
-  };
-
-  return (
-    <>
-      <div styleName={`time-wrapper ${rltDateTimeWithOutLocalization} ${textColor}`}>
-        <ClockIcon color={updateColor} />
-        {getTimeStamp({ date: cardAddedAt, formatter: timestampToFormat, config: updatedConfig })}
-      </div>
-      <a href="#" onClick={scrollToCard} 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})` || "none"
-              }}
-            />
-          )}
-        </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,
-  qtConfig: PropTypes.object
-};
-
-const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDetails = {} }) => {
-  const keyEventsTitle = get(publishedDetails, ["localizedKeyEvents"], "Key Events") || "Key Events";
-  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}
-      qtConfig={qtConfig}
-    />
-  ));
-
-  return (
-    <div className="arrow-component" style={{ background: theme || "initial" }} styleName={`container ${textColor}`}>
-      <h3>{keyEventsTitle}</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,
-  publishedDetails: PropTypes.object
-};
-
-export default StateProvider(KeyEvents);

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

@@ -1,103 +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);
-    }
-  }
-  .time-wrapper > time {
-    direction: rtl;
-  }
-
-  .rtl-date-time.time-wrapper > time {
-    direction: ltr;
-  }
-
-  .event-title,
-  .event-title {
-    border-left: none;
-    margin-left: 0;
-    margin-right: var(--arrow-spacing-s);
-  }
-
-  .event-title.dark {
-    border-right: 1px solid var(--arrow-c-mono5);
-  }
-  
-  .event-title.light {
-    border-right: 1px solid var(--arrow-c-invert-mono5);
-  }
-
-  .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 || "initial" }}>
-      <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,54 +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 = "",
-  collectionId,
-  isHighPriority
-}) => {
-  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]]} priority={isHighPriority} />
-        <StorycardContent
-          story={story}
-          config={config}
-          separator={separator}
-          borderColor={borderColor}
-          headerLevel={headerLevel}
-          collectionId={collectionId}
-        />
-      </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,
-  collectionId: PropTypes.number,
-  isHighPriority: PropTypes.bool
-};
-
-export default StateProvider(PortraitStoryCard);