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

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

@@ -1,184 +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, rgbToHex } from "../../../utils/utils";
-import { StateProvider } from "../../SharedContext";
-
-import PropTypes from "prop-types";
-
-import "./storycard.m.css";
-
-const StoryCardBase = ({
-  story,
-  children,
-  isHorizontal,
-  aspectRatio,
-  border,
-  useImageAsBackground,
-  bgImgContentOverlap,
-  theme,
-  borderColor,
-  isHorizontalMobile,
-  centerAlign,
-  headerLevel,
-  hideAuthorImage,
-  prefix,
-  config,
-  isHorizontalWithImageLast
-}) => {
-  if (!story || isEmpty(story)) return <div />;
-  const borderOptions = ["default", "full", "bottom", "boxShadow"];
-  const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
-  // TODO optimize conditions
-
-  let horizontalCardStyle = "default-card";
-  if (isHorizontal) horizontalCardStyle = "horizontal-card";
-  else if (isHorizontalWithImageLast) horizontalCardStyle = "horizontal-image-last";
-
-  const bgImageClasses = useImageAsBackground ? "backgroung-img" : "";
-  const bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
-  const textColor = getTextColor(theme);
-  const horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
-
-  const defaultStorycard = (
-    <DefaultStoryCard
-      story={story}
-      aspectRatio={aspectRatio}
-      border={border}
-      isHorizontalMobile={isHorizontalMobile}
-      isHorizontal={isHorizontal}
-      centerAlign={centerAlign}
-      headerLevel={headerLevel}
-      borderColor={borderColor}
-      hideAuthorImage={hideAuthorImage}
-      prefix={prefix}
-      config={config}
-      isHorizontalWithImageLast={isHorizontalWithImageLast}
-    />
-  );
-  return (
-    <div
-      className="arr--story-card"
-      data-test-id="story-card"
-      style={{ backgroundColor: theme, color: textColor }}
-      styleName={`card ${horizontalCardStyle} ${borderTemplate} ${textColor} ${bgImageClasses} ${bgImgContentOverlapClass} ${horizontalMobileClasses}`}>
-      {children || defaultStorycard}
-    </div>
-  );
-};
-
-const DefaultStoryCard = ({
-  story,
-  border,
-  isHorizontal,
-  aspectRatio,
-  headerLevel,
-  isHorizontalMobile = false,
-  centerAlign = false,
-  borderColor,
-  hideAuthorImage,
-  prefix,
-  isHorizontalWithImageLast,
-  config
-}) => {
-  const alignment = centerAlign ? "center-align" : "";
-  const SectionTagborderColor = rgbToHex(borderColor);
-  const { localizationConfig = {} } = config;
-
-  return (
-    <>
-      {isHorizontal ? (
-        <HeroImage
-          config={config}
-          story={story}
-          isHorizontal
-          isHorizontalMobile={isHorizontalMobile}
-          aspectRatio={aspectRatio}
-        />
-      ) : isHorizontalWithImageLast ? (
-        <HeroImage
-          config={config}
-          story={story}
-          isHorizontalWithImageLast
-          isHorizontalMobile={isHorizontalMobile}
-          aspectRatio={aspectRatio}
-        />
-      ) : (
-        <HeroImage story={story} config={config} isHorizontalMobile={isHorizontalMobile} aspectRatio={aspectRatio} />
-      )}
-      <div className="arr--story-content" styleName={`content ${alignment}`}>
-        <SectionTag story={story} borderColor={SectionTagborderColor} />
-        <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
-        <AuthorWithTime
-          config={localizationConfig}
-          story={story}
-          isBottom
-          prefix={prefix}
-          hideAuthorImage={hideAuthorImage}
-        />
-        <Subheadline story={story} />
-      </div>
-    </>
-  );
-};
-
-DefaultStoryCard.propTypes = {
-  story: PropTypes.object.isRequired,
-  border: PropTypes.oneOfType([PropTypes.string]),
-  isBottom: PropTypes.bool,
-  isHorizontal: PropTypes.bool,
-  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
-  isHorizontalMobile: PropTypes.bool,
-  centerAlign: PropTypes.bool,
-  headerLevel: PropTypes.string,
-  borderColor: PropTypes.string,
-  hideAuthorImage: PropTypes.bool,
-  prefix: PropTypes.string,
-  config: PropTypes.object,
-  isHorizontalWithImageLast: PropTypes.bool
-};
-
-StoryCardBase.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  children: PropTypes.node,
-  /** Flip the Story Card to Horizonal mode */
-  isHorizontal: PropTypes.bool,
-  /** Add border to the Story Card  */
-  border: PropTypes.oneOfType([PropTypes.string]),
-  // story card with background image
-  useImageAsBackground: PropTypes.bool,
-  // story card  content overlap with image
-  bgImgContentOverlap: PropTypes.bool,
-  /** add aspect ratio for hero image  */
-  aspectRatio: PropTypes.oneOfType([PropTypes.array]),
-  /** add theme(dark /light/custom color) for storycard  */
-  theme: PropTypes.string,
-  /** flip the story card mobile design horizontal */
-  isHorizontalMobile: PropTypes.bool,
-  // make content center align in desktop and left align in mobile
-  centerAlign: PropTypes.bool,
-  headerLevel: PropTypes.string,
-  borderColor: PropTypes.string,
-  // handle author image through storycard
-  hideAuthorImage: PropTypes.bool,
-  // handle author prefix through storycard
-  prefix: PropTypes.string,
-  config: PropTypes.object,
-  isHorizontalWithImageLast: PropTypes.bool
-};
-
-StoryCardBase.defaultProps = {
-  isHorizontal: false,
-  isHorizontalMobile: false,
-  border: "default",
-  theme: "",
-  centerAlign: false,
-  borderColor: "",
-  isHorizontalWithImageLast: false
-};
-
-export const StoryCard = StateProvider(StoryCardBase);

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

@@ -1,223 +0,0 @@
-import { StoryCard } from "./index";
-
-import { Headline } from "../../Atoms/Headline/index";
-import { HeroImage } from "../../Atoms/HeroImage/index";
-import { TimeStamp } from "../../Atoms/TimeStamp/index";
-import { Author } from "../../Atoms/Author/index";
-import { Subheadline } from "../../Atoms/Subheadline/index";
-import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-import { StorycardContent } from "../StorycardContent/index";
-
-import React from "react";
-import { generateStory } from "../../Fixture";
-
-import { optionalSelect, withStore } from "../../../../storybook";
-import Readme from "./README.md";
-import ReadmeForBorder from "./READMEBORDER.md";
-import ReadmeForBgImage from "./READMEBGIMAGE.md";
-import { color } from "@storybook/addon-knobs";
-import "./storycard.m.css";
-
-const story = generateStory();
-
-const aspectRatioOptions = {
-  "[16,9]": [16, 9],
-  "[8,3]": [8, 3],
-  "[1,1]": [1, 1],
-  "[4, 3]": [4, 3],
-  "[2, 3]": [2, 3]
-};
-const label = "color";
-const defaultvalue = "#929292";
-const sectionTagBorderColor = "Section Tag Border Color";
-const defaultBorderColor = "#3a9fdd";
-const config = {};
-withStore(
-  "Molecules/StoryCard",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "480px" }}>{story()}</div>)
-  .add("Default Story Card", () => (
-    <StoryCard story={story} borderColor={color(sectionTagBorderColor, defaultBorderColor)} config={config} />
-  ))
-  .add("Default with theme", () => (
-    <StoryCard
-      story={story}
-      theme={color(label, defaultvalue)}
-      centerAlign
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Default with mobile horizontal design", () => (
-    <StoryCard
-      story={story}
-      isHorizontalMobile
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Horizontal Story Card", () => (
-    <StoryCard
-      story={story}
-      isHorizontal
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Story Card w/ Image & Headline", () => (
-    <StoryCard story={story}>
-      <HeroImage story={story} />
-      <Headline story={story} />
-    </StoryCard>
-  ))
-  .add("Story Card w/ Image & Timestamp", () => (
-    <StoryCard story={story}>
-      <Headline story={story} />
-      <TimeStamp story={story} />
-    </StoryCard>
-  ))
-  .add("Story Card w/ Headline, Author & Subheadline", () => (
-    <div style={{ height: 200 }}>
-      <StoryCard story={story} isBottom>
-        <Headline story={story} />
-        <Subheadline story={story} />
-        <Author story={story} isBottom />
-      </StoryCard>
-    </div>
-  ))
-
-  .add("Story Card w/ Image, Headline & Subheadline Author+Timestamp ", () => (
-    <StoryCard story={story}>
-      <HeroImage story={story} />
-      <Headline story={story} />
-      <Subheadline story={story} />
-      <AuthorWithTime story={story} isBottom />
-    </StoryCard>
-  ))
-  .add("Story Card w/o Image, Headline, Author+Timestamp & Subheadline", () => (
-    <StoryCard story={story} isHorizontal>
-      <HeroImage story={story} isHorizontal />
-      <div>
-        <Headline story={story} />
-        <AuthorWithTime story={story} />
-        <Subheadline story={story} />
-      </div>
-    </StoryCard>
-  ))
-  .add("Story Card using Story content", () => (
-    <StoryCard story={story} borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} />
-      <StorycardContent story={story} borderColor={color(sectionTagBorderColor, defaultBorderColor)} />
-    </StoryCard>
-  ))
-  .add("Story card with aspect ratio", () => (
-    <StoryCard
-      story={story}
-      aspectRatio={optionalSelect("Aspect Ratio", aspectRatioOptions)}
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Story card with story object as null", () => <StoryCard story={null} />)
-  .add("Story card with an empty story object", () => <StoryCard story={{}} />);
-
-withStore(
-  "Molecules/StoryCard(with Border)",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  ReadmeForBorder
-)
-  .addDecorator((story) => <div style={{ maxWidth: "650px" }}>{story()}</div>)
-  .add("without border", () => (
-    <StoryCard story={story} border="" borderColor={color(sectionTagBorderColor, defaultBorderColor)} config={config} />
-  ))
-  .add("Default Story Card with Full Border", () => (
-    <StoryCard
-      story={story}
-      border="full"
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Default Story Card with Border Bottom", () => (
-    <StoryCard
-      story={story}
-      border="bottom"
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("Default Story Card with Box Shadow", () => (
-    <StoryCard
-      story={story}
-      border="boxShadow"
-      borderColor={color(sectionTagBorderColor, defaultBorderColor)}
-      config={config}
-    />
-  ))
-  .add("StoryCard using StoryCardContent ", () => (
-    <StoryCard story={story} border="full" borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} />
-      <StorycardContent story={story}>
-        <Headline story={story} />
-        <AuthorWithTime story={story} />
-      </StorycardContent>
-    </StoryCard>
-  ))
-  .add("StoryCard using StoryCardContent border Box and fullBleed False", () => (
-    <StoryCard story={story} border="box" borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} FullBleed={false} />
-      <StorycardContent story={story}>
-        <Headline story={story} />
-        <AuthorWithTime story={story} />
-      </StorycardContent>
-    </StoryCard>
-  ))
-  .add("Horizontal StoryCard using StoryCardContent border full ", () => (
-    <StoryCard story={story} border="full" isHorizontal borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} isHorizontal />
-      <StorycardContent story={story}>
-        <Headline story={story} />
-        <AuthorWithTime story={story} />
-      </StorycardContent>
-    </StoryCard>
-  ));
-
-withStore(
-  "Molecules/StoryCard(with background image)",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  ReadmeForBgImage
-)
-  .addDecorator((story) => <div style={{ maxWidth: "400px" }}>{story()}</div>)
-  .add("Story Card with background image", () => (
-    <StoryCard story={story} useImageAsBackground borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} />
-      <StorycardContent story={story} />
-    </StoryCard>
-  ))
-  .add("Story Card with background image and overlap with content", () => (
-    <StoryCard story={story} bgImgContentOverlap borderColor={color(sectionTagBorderColor, defaultBorderColor)}>
-      <HeroImage story={story} />
-      <StorycardContent story={story} />
-    </StoryCard>
-  ));

package/src/components/Molecules/StoryCard/storycard.m.css

@@ -1,158 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.author-timestamp-wrapper {
-  display: flex;
-  align-items: center;
-}
-.default-card {
-  display: flex;
-  flex-direction: column;
-}
-.horizontal-card {
-  display: flex;
-  flex-direction: row;
-}
-
-.backgroung-img > a > figure::after {
-  @media (--viewport-medium) {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 50%, transparent);
-  }
-}
-.backgroung-img > div:nth-child(2) {
-  @media (--viewport-medium) {
-    padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 48px;
-    position: absolute;
-    bottom: 0;
-    left: 15%;
-    right: 15%;
-  }
-}
-.backgroung-img img {
-  position: absolute;
-  bottom: 0;
-}
-
-.content-overlap > div:nth-child(2) {
-  @media (--viewport-medium) {
-    margin: 0 var(--arrow-spacing-m);
-    width: calc(100% - 32px);
-    background-color: var(--arrow-c-light);
-    padding: var(--arrow-spacing-m);
-    position: absolute;
-    bottom: 0;
-  }
-}
-.content-overlap img {
-  @media (--viewport-medium) {
-    position: absolute;
-    bottom: 0;
-  }
-}
-
-/* TODO: Refactor targetting of child  */
-.horizontal-card > div:first-child {
-  flex-basis: 30%;
-}
-
-.horizontal-card > div:nth-child(2) {
-  flex-basis: 70%;
-}
-
-.border-full.light {
-  border: 1px solid var(--light-border);
-}
-
-.border-full.dark {
-  border: 1px solid var(--dark-border);
-}
-
-.border-bottom.light {
-  border-bottom: 1px solid var(--light-border);
-  padding-bottom: var(--arrow-spacing-m);
-}
-
-.border-bottom.dark {
-  border-bottom: 1px solid var(--dark-border);
-  padding-bottom: var(--arrow-spacing-m);
-}
-
-.border-boxShadow {
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-}
-.center-align {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  @media (--viewport-medium) {
-    align-items: center;
-    text-align: center;
-  }
-}
-
-.content-bottom {
-  /* padding: 0 0 0 8px; */
-}
-.content-full,
-.content-boxShadow {
-  padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
-}
-.backgroung-img,
-.content-overlap {
-  position: relative;
-}
-
-.hero-image {
-  margin-bottom: var(--arrow-spacing-xs);
-  padding-right: 0;
-}
-.right-padding {
-  padding-bottom: 0;
-  padding-right: var(--arrow-spacing-xs);
-}
-
-.horizontal-mob {
-  display: flex;
-  flex-direction: row;
-  @media (--viewport-medium) {
-    flex-direction: column;
-  }
-}
-.horizontal-mob .hero-image {
-  flex-basis: 30%;
-  @media (--viewport-medium) {
-    flex-basis: 100%;
-  }
-}
-.horizontal-mob .content {
-  flex-basis: 70%;
-  @media (--viewport-medium) {
-    flex-basis: 100%;
-  }
-}
-
-.border-default {
-  border: none;
-  height: 100%;
-}
-.card {
-  height: 100%;
-}
-
-.horizontal-image-last {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.horizontal-image-last > div:first-child {
-  flex-basis: 30%;
-}
-
-.horizontal-image-last > div:nth-child(2) {
-  flex-basis: 70%;
-}

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

@@ -1,9 +0,0 @@
-# Story Card With Bullet Point
-
-Modified Story Card, with numbered bullet point
-
-## Usage
-
-```jsx
-<StoryCardWithBulletPoint story={story} card={card} bulletValue={bulletValue} />
-```

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

@@ -1,32 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { StorycardContent } from "../../Molecules/StorycardContent";
-import { StoryCard } from "../../Molecules/StoryCard";
-import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-import { Headline } from "../../Atoms/Headline";
-import { BulletPoint } from "../../Atoms/BulletPoint";
-import "./story-card-with-bullet-point.m.css";
-
-export const StoryCardWithBulletPoint = ({ story, config, bulletValue }) => {
-  const { theme = "", localizationConfig = {} } = config;
-  return (
-    <div styleName="card-with-bullet-wrapper">
-      <BulletPoint bulletValue={bulletValue} />
-      <StoryCard story={story} bgImgContentOverlap config={config} theme={theme}>
-        <StorycardContent>
-          <Headline story={story} headerLevel="6" premiumStoryIconConfig={config} />
-          <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
-        </StorycardContent>
-      </StoryCard>
-    </div>
-  );
-};
-
-StoryCardWithBulletPoint.propTypes = {
-  story: PropTypes.object.isRequired,
-  config: PropTypes.shape({
-    theme: PropTypes.string,
-    localizationConfig: PropTypes.object
-  }),
-  bulletValue: PropTypes.string
-};

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { StoryCardWithBulletPoint } from "./index";
-import Readme from "./README.md";
-import { color, boolean } from "@storybook/addon-knobs";
-import { withStore } from "../../../../storybook";
-
-const story = generateStory();
-
-withStore(
-  "molecules/Story Card With Bullet Point ",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const contextConfig = {
-    theme: color("color", "#ffffff"),
-    showSection: boolean("Show Section", true),
-    showAuthor: boolean("Show Author", true),
-    showTime: boolean("Show Time", true),
-    showReadTime: boolean("Read time", true)
-  };
-
-  return <StoryCardWithBulletPoint story={story} bulletValue={"1"} config={contextConfig} />;
-});

package/src/components/Molecules/StoryCardWithBulletPoint/story-card-with-bullet-point.m.css

@@ -1,7 +0,0 @@
-.card-with-bullet-wrapper {
-  display: flex;
-}
-
-.card-with-bullet-wrapper :global(.arrow-component.arr--headline h6) {
-  font-weight: normal;
-}

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

@@ -1,9 +0,0 @@
-# Story Element Card
-
-Story Element Card is used to render story elements of a story card.
-
-## Usage
-
-```jsx
-<StoryElementCard story={story} card={card} />
-```