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

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

@@ -0,0 +1,173 @@
+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 PropTypes from "prop-types";
+
+import "./storycard.m.css";
+
+export const StoryCard = ({
+  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 story={story} isHorizontal isHorizontalMobile={isHorizontalMobile} aspectRatio={aspectRatio} />
+      ) : isHorizontalWithImageLast ? (
+        <HeroImage
+          story={story}
+          isHorizontalWithImageLast
+          isHorizontalMobile={isHorizontalMobile}
+          aspectRatio={aspectRatio}
+        />
+      ) : (
+        <HeroImage story={story} 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
+};
+
+StoryCard.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
+};
+
+StoryCard.defaultProps = {
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  border: "default",
+  theme: "",
+  centerAlign: false,
+  borderColor: "",
+  isHorizontalWithImageLast: false
+};

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

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

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

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

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

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

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

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