@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

package/esm/components/Atoms/AuthorCard/index.js

@@ -0,0 +1,133 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { kebabCase } from "lodash";
+import { Dot } from "../Dot/dot";
+import { ResponsiveImage, Link } from "@quintype/components";
+import { Twitter } from "../../Svgs/SocialIcons/twitter";
+import "./author-card.m.css";
+import { useStateValue } from "../../SharedContext";
+import { getTextColor } from "../../../utils/utils";
+var _styleModuleImportMap = {
+  "./author-card.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "author-card-wrapper": "author-card-m_author-card-wrapper__2tErR",
+    "centerAligned": "author-card-m_centerAligned__2h4Yq",
+    "author-image-wrapper": "author-card-m_author-image-wrapper__1at-z",
+    "default": "author-card-m_default__2dkRY",
+    "author-image": "author-card-m_author-image__3Fu25",
+    "multi-author-image": "author-card-m_multi-author-image__zAm2h",
+    "first-author-image": "author-card-m_first-author-image__18Y3p",
+    "author-details-wrapper": "author-card-m_author-details-wrapper__1c2uc",
+    "leftAligned": "author-card-m_leftAligned__3B9ao",
+    "author-name-share": "author-card-m_author-name-share__3vb9q",
+    "multiple-author-style": "author-card-m_multiple-author-style__1Fd3D",
+    "dot-wrapper": "author-card-m_dot-wrapper__2soc1",
+    "author-bio": "author-card-m_author-bio__2WDsW",
+    "dark": "author-card-m_dark__1u0YB",
+    "light": "author-card-m_light__3z8S3"
+  }
+};
+
+var authorImage = function authorImage(author) {
+  var avatarUrl = author["avatar-url"],
+      avatarS3Key = author["avatar-s3-key"],
+      authorName = author.name;
+
+  if (!avatarUrl && !avatarS3Key) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("figure", {
+    "data-test-id": "author-image"
+  }, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+    slug: avatarS3Key,
+    "aspect-ratio": [1, 1],
+    defaultWidth: 48,
+    imgParams: {
+      auto: ["format", "compress"]
+    },
+    alt: authorName
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: avatarUrl
+  }));
+};
+
+export var AuthorCard = function AuthorCard(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "leftAligned" : _ref$template,
+      _ref$clazzName = _ref.clazzName,
+      clazzName = _ref$clazzName === void 0 ? "" : _ref$clazzName,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _ref$mountAt = _ref.mountAt,
+      mountAt = _ref$mountAt === void 0 ? "" : _ref$mountAt;
+  var configData = useStateValue() || {};
+  var _story$authors = story.authors,
+      authors = _story$authors === void 0 ? [] : _story$authors;
+  var isSingleAuthor = authors.length === 1;
+  var _opts$showBio = opts.showBio,
+      showBio = _opts$showBio === void 0 ? false : _opts$showBio,
+      _opts$showImage = opts.showImage,
+      showImage = _opts$showImage === void 0 ? true : _opts$showImage,
+      _opts$showName = opts.showName,
+      showName = _opts$showName === void 0 ? true : _opts$showName;
+  var textColor = getTextColor(configData.theme);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-card-".concat(kebabCase(template)),
+    className: (clazzName ? clazzName + " " : "") + _getClassName("author-card-wrapper ".concat(template), _styleModuleImportMap)
+  }, authors.map(function (author, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: author.id
+    }, showImage && (author["avatar-url"] || author["avatar-s3-key"]) && /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "author-image",
+      className: "author-card-m_author-image-wrapper__1at-z"
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: "".concat(mountAt, "/author/") + author.slug,
+      key: "author-image-".concat(index),
+      "aria-label": "author-image"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _getClassName("author-image ".concat(!index ? "first-author-image" : "", " ").concat(!isSingleAuthor ? "multi-author-image" : ""), _styleModuleImportMap)
+    }, authorImage(author)))));
+  }), showName && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-name",
+    className: "author-card-m_author-name-share__3vb9q"
+  }, authors.map(function (author, index) {
+    var spaceHolder = ",\xA0";
+    return /*#__PURE__*/React.createElement(React.Fragment, null, index !== 0 && (authors.length > 1 ? spaceHolder : ""), /*#__PURE__*/React.createElement(Link, {
+      href: "".concat(mountAt, "/author/") + author.slug,
+      "aria-label": "author-name"
+    }, /*#__PURE__*/React.createElement("h5", {
+      className: _getClassName("multiple-author-style ".concat(textColor), _styleModuleImportMap)
+    }, author.name)));
+  }), isSingleAuthor && template !== "centerAligned" && /*#__PURE__*/React.createElement(React.Fragment, null, authors[0]["twitter-handle"] && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "author-card-m_dot-wrapper__2soc1"
+  }, /*#__PURE__*/React.createElement(Dot, {
+    color: textColor
+  })), /*#__PURE__*/React.createElement("a", {
+    href: "http://twitter.com/" + authors[0]["twitter-handle"],
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(Twitter, null))))), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-info",
+    className: "author-card-m_author-details-wrapper__1c2uc"
+  }, showBio && isSingleAuthor && template !== "default" && /*#__PURE__*/React.createElement("p", {
+    className: _getClassName("author-bio ".concat(textColor), _styleModuleImportMap)
+  }, authors[0].bio)));
+};
+AuthorCard.propTypes = {
+  story: PropTypes.shape({
+    authors: PropTypes.array
+  }),
+  template: PropTypes.string,
+  opts: PropTypes.shape({
+    showImage: PropTypes.bool,
+    showBio: PropTypes.bool,
+    showName: PropTypes.bool
+  }),
+  mountAt: PropTypes.string,
+  clazzName: PropTypes.string
+};

package/esm/components/Atoms/AuthorCard/stories.js

@@ -0,0 +1,68 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore, optionalSelect } from "../../../../storybook";
+import { AuthorCard } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean } from "@storybook/addon-knobs";
+var authorTemplate = {
+  "No value": "",
+  "default": "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+var story = generateStory();
+
+var singleAuthorStory = _objectSpread(_objectSpread({}, story), {}, {
+  authors: [{
+    id: 123981,
+    name: "Ravigopal Kesari",
+    slug: "ravigopal-kesari",
+    "avatar-url": "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+    "avatar-s3-key": null,
+    "twitter-handle": "quintype_inc",
+    bio: "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+    "contributor-role": {
+      id: 873,
+      name: "Author"
+    }
+  }]
+});
+
+withStore("Atoms/Author Card", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1000px",
+      margin: "auto"
+    }
+  }, story());
+}).add("Default", function () {
+  return /*#__PURE__*/React.createElement(AuthorCard, {
+    story: story,
+    template: optionalSelect("Template Options", authorTemplate),
+    opts: {
+      showBio: _boolean("bio", false),
+      showImage: _boolean("image", true)
+    }
+  });
+}).add("single author template", function () {
+  return /*#__PURE__*/React.createElement(AuthorCard, {
+    story: singleAuthorStory,
+    template: optionalSelect("Template Options", authorTemplate),
+    opts: {
+      showBio: _boolean("bio", true),
+      showImage: _boolean("image", true)
+    }
+  });
+});

package/esm/components/Atoms/AuthorImage/README.md

@@ -0,0 +1,31 @@
+# Author Image
+
+Author image is a generic component which picks a specific author's image.
+
+## Usage
+
+Import the AuthorImage component and pass author details as props.
+
+```jsx
+import { AuthorImage } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+<AuthorImage author={authorDetails}>
+
+```
+
+```jsx
+
+<AuthorImage author={authorDetails} template="square">
+
+```
+
+```jsx
+
+<AuthorImage author={authorDetails} template="smallCircle">
+
+```

package/esm/components/Atoms/AuthorImage/author-image.m.css

@@ -0,0 +1,53 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.image-container {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.author-image img,
+.author-image svg {
+  border-radius: 50%;
+  width: 160px;
+  height: 160px;
+  @media (min-width: mobile) {
+    position: relative;
+    width: 224px;
+    height: 224px;
+    @media (min-width: tablet) {
+      width: 364px;
+      height: 364px;
+    }
+  }
+}
+
+.square img {
+  border-radius: 0;
+}
+
+.small-circle.author-image img,
+.small-circle.author-image svg {
+  border-radius: 133.5px;
+  width: 40px;
+  height: 40px;
+  @media (min-width: mobile) {
+    width: 88px;
+    height: 88px;
+  }
+  @media (min-width: tablet) {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+.smaller-circle.author-image img,
+.smaller-circle.author-image svg {
+  width: 64px;
+  height: 64px;
+}

package/esm/components/Atoms/AuthorImage/index.js

@@ -0,0 +1,69 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { ResponsiveImage, Link } from "@quintype/components";
+import { UserFallbackIcon } from "../../Svgs/user-fallback-icon";
+import "./author-image.m.css";
+var _styleModuleImportMap = {
+  "./author-image.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "image-container": "author-image-m_image-container__19WNd",
+    "author-image": "author-image-m_author-image__D8GMB",
+    "square": "author-image-m_square__bjK7M",
+    "small-circle": "author-image-m_small-circle__DbQMN",
+    "smaller-circle": "author-image-m_smaller-circle__2yMOZ"
+  }
+};
+
+var authorWithImage = function authorWithImage(author, templateStyle) {
+  var avatarUrl = author["avatar-url"],
+      avatarS3Key = author["avatar-s3-key"],
+      name = author.name;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-image",
+    className: "arr--author-image " + _getClassName("author-image ".concat(templateStyle), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("figure", {
+    className: "author-image-m_image-container__19WNd"
+  }, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+    slug: avatarS3Key,
+    alt: name,
+    defaultWidth: 250,
+    widths: [250, 480],
+    aspectRatio: [[1, 1], [1, 1]],
+    sizes: "98vw",
+    imgParams: {
+      auto: ["format", "compress"]
+    }
+  }) : avatarUrl ? /*#__PURE__*/React.createElement("img", {
+    src: avatarUrl
+  }) : /*#__PURE__*/React.createElement(UserFallbackIcon, null)));
+};
+
+var AuthorImage = function AuthorImage(_ref) {
+  var _ref$author = _ref.author,
+      author = _ref$author === void 0 ? {} : _ref$author,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var slug = author.slug;
+  var mountAt = config.mountAt || "";
+  var templateStyle = "";
+  if (template === "smallerCircle") templateStyle = "smaller-circle";else if (template === "smallCircle") templateStyle = "small-circle";else if (template === "square") templateStyle = "square";
+  if (slug) return /*#__PURE__*/React.createElement(Link, {
+    href: "".concat(mountAt, "/author/") + slug
+  }, authorWithImage(author, templateStyle));else return authorWithImage(author, templateStyle);
+};
+
+AuthorImage.propTypes = {
+  author: PropTypes.shape({
+    "avatar-url": PropTypes.string,
+    "avatar-s3-key": PropTypes.string,
+    name: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  template: PropTypes.string
+};
+export default AuthorImage;

package/esm/components/Atoms/AuthorImage/stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import AuthorImage from "./index";
+import Readme from "./README.md";
+import { authorData } from "../../Fixture";
+withStore("Atoms/AuthorImage", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(AuthorImage, {
+    author: authorData
+  });
+}).add("Square Image", function () {
+  return /*#__PURE__*/React.createElement(AuthorImage, {
+    author: authorData,
+    template: "square"
+  });
+}).add("Small Circle Image", function () {
+  return /*#__PURE__*/React.createElement(AuthorImage, {
+    author: authorData,
+    template: "smallCircle"
+  });
+});

package/esm/components/Atoms/AuthorWithTimestamp/README.md

@@ -0,0 +1,12 @@
+# AuthorWithTimestamp
+A combination of the Author and Timestamp atoms.
+
+## Usage
+
+```jsx
+<AuthorWithTime story={story} />
+```
+```jsx
+<AuthorWithTime story={story} separator="divider" />
+```
+<!-- PROPS -->

package/esm/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css

@@ -0,0 +1,42 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author-time-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--arrow-c-mono2);
+}
+
+.author-image {
+  border-radius: 100%;
+  width: var(--arrow-spacing-l);
+  height: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.dot {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+  top: -6px;
+}
+.bottom-fix {
+  margin-top: auto;
+}
+.dash {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+  top: -1px;
+  @media (--viewport-medium) {
+    top: -3px;
+  }
+}
+
+html[dir="rtl"] {
+  .dot {
+    margin-left: var(--arrow-spacing-xs);
+  }
+
+  .dash {
+    padding-left: var(--arrow-spacing-xs);
+  }
+}

package/esm/components/Atoms/AuthorWithTimestamp/index.js

@@ -0,0 +1,95 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { get } from "lodash";
+import { TimeStamp } from "../TimeStamp";
+import PropTypes from "prop-types";
+import { Author } from "../Author";
+import { Dot } from "../Dot/dot";
+import { Divider } from "../Divider/";
+import { useStateValue } from "../../SharedContext";
+import "./author-with-timestamp.m.css";
+import { getTextColor } from "../../../utils/utils";
+import { ReadTime } from "../ReadTime";
+var _styleModuleImportMap = {
+  "./author-with-timestamp.m.css": {
+    "author-time-wrapper": "author-with-timestamp-m_author-time-wrapper__G7_eI",
+    "author-image": "author-with-timestamp-m_author-image__24xrD",
+    "dot": "author-with-timestamp-m_dot__1LHXD",
+    "bottom-fix": "author-with-timestamp-m_bottom-fix__1rWGv",
+    "dash": "author-with-timestamp-m_dash__2L5XC"
+  }
+};
+export var AuthorWithTime = function AuthorWithTime(_ref) {
+  var story = _ref.story,
+      separator = _ref.separator,
+      isBottom = _ref.isBottom,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      isLightTheme = _ref.isLightTheme;
+  var configState = useStateValue() || {};
+  var isAuthor = get(config, ["showAuthor"], get(configState, ["showAuthor"], true));
+  var isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
+  var isReadTime = get(configState, ["showReadTime"], true);
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var seperatorStyle = separator === "dot" ? "dot" : "dash";
+  var textColor = isLightTheme ? "light" : getTextColor(configState.theme);
+
+  var getSeparator = function getSeparator() {
+    if (separator === "divider") {
+      return /*#__PURE__*/React.createElement(Divider, {
+        color: textColor
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(Dot, {
+      color: textColor
+    });
+  };
+
+  var getTimeStamp = function getTimeStamp() {
+    if (!isTime) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement("span", {
+      className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap)
+    }, getSeparator()), /*#__PURE__*/React.createElement(TimeStamp, {
+      story: story,
+      config: config
+    }), isReadTime && /*#__PURE__*/React.createElement(ReadTime, {
+      story: story,
+      opts: config,
+      isLightTheme: isLightTheme
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap)
+  }, isAuthor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    isBottom: true,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix
+  }), getTimeStamp()) : getTimeStamp());
+};
+AuthorWithTime.propTypes = {
+  story: PropTypes.object,
+
+  /** Style of separator between the Author & Timestamp */
+  separator: PropTypes.oneOf(["dot", "divider"]),
+
+  /** hide the author image */
+  hideAuthorImage: PropTypes.bool,
+  // fix author and time at the end
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isLightTheme: PropTypes.bool
+};
+AuthorWithTime.defaultProps = {
+  separator: "dot",
+  isBottom: false,
+  hideAuthorImage: true,
+  prefix: "",
+  isLightTheme: false
+};

package/esm/components/Atoms/AuthorWithTimestamp/stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { AuthorWithTime } from "./index";
+import Readme from "./README.md";
+var story = generateStory();
+withStore("Atoms/Author With Time Stamp", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("default", function () {
+  return /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story
+  });
+}).add("Author without Divider and Time", function () {
+  return /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: story,
+    separator: "divider"
+  });
+});

package/esm/components/Atoms/BulletPoint/README.md

@@ -0,0 +1,9 @@
+# Bullet Point
+
+Component to add a bullet point to a story card.
+
+## Usage
+
+```jsx
+<BulletPoint bulletValue={bulletValue} />
+```

package/esm/components/Atoms/BulletPoint/bullet-point.m.css

@@ -0,0 +1,14 @@
+.bullet {
+  margin-right: var(--arrow-spacing-l);
+  font-size: var(--arrow-fs-huge);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+}
+
+.dark {
+  color: var(--arrow-c-mono6);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono6);
+}

package/esm/components/Atoms/BulletPoint/index.js

@@ -0,0 +1,27 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { useStateValue } from "../../SharedContext";
+import { getTextColor } from "../../../utils/utils";
+import "./bullet-point.m.css";
+var _styleModuleImportMap = {
+  "./bullet-point.m.css": {
+    "bullet": "bullet-point-m_bullet__SbeId",
+    "dark": "bullet-point-m_dark__Po6Ze",
+    "light": "bullet-point-m_light__1Xy6_"
+  }
+};
+export var BulletPoint = function BulletPoint(_ref) {
+  var _ref$bulletValue = _ref.bulletValue,
+      bulletValue = _ref$bulletValue === void 0 ? "" : _ref$bulletValue;
+  var configData = useStateValue() || {};
+  var textColor = getTextColor(configData.theme);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arrow-component arr--bullet-point"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _getClassName("bullet ".concat(textColor), _styleModuleImportMap)
+  }, bulletValue));
+};
+BulletPoint.propTypes = {
+  bulletValue: PropTypes.string
+};

package/esm/components/Atoms/BulletPoint/stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { BulletPoint } from "./index";
+import Readme from "./README.md";
+withStore("Atoms/Bullet Point", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(BulletPoint, {
+    bulletValue: "1"
+  });
+});

package/esm/components/Atoms/CaptionAttribution/README.md

@@ -0,0 +1,15 @@
+# CaptionAttribution
+
+Displays the Caption and Attribution of Hero Image or Image Element of the Story.
+
+## Usage
+
+```jsx
+<CaptionAttribution story={story} config={{ theme: "ffff" }} />
+```
+
+```jsx
+<CaptionAttribution element={element} config={{ theme: "ffff" }} />
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/CaptionAttribution/caption-attribution.m.css

@@ -0,0 +1,40 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.caption {
+  font-size: 12px;
+  font-family: var(--arrow-typeface-secondary);
+  margin: var(--arrow-spacing-xs) 0;
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.wrapper {
+  padding-left: var(--arrow-spacing-s);
+}
+
+.caption.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.attribution.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.caption.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .wrapper {
+    padding-left: 0;
+    padding-right: var(--arrow-spacing-s);
+    display: inline-block;
+  }
+}