luna-one 3.1.592 → 3.1.594

package/dist/luna/components/PullQuote/PullQuote.stories.js

@@ -0,0 +1,556 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Variant3Light = exports.Variant3Dark = exports.Variant3BackgroundLight = exports.Variant3BackgroundDarkWithVideo = exports.Variant3BackgroundDarkLottie = exports.Variant3BackgroundDark = exports.Variant2DLightRight = exports.Variant2CLightLeft = exports.Variant2BDarkRight = exports.Variant2ADarkLeft = exports.Variant1Right = exports.Variant1LeftLottieAnimation = exports.Variant1Left = exports.Variant1Background = exports.NoImageLight = exports.NoImageDark = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _PullQuote = _interopRequireDefault(require("./PullQuote"));
+var _PullQuoteDocumentation = _interopRequireDefault(require("./PullQuoteDocumentation.mdx"));
+var quote = {
+  source: "Gariatur Nostrud Pariatur",
+  sourceTitle: "TITLE OR CREDENTIALS FOR THE QUOTEE",
+  text: '"Pull Quote can be aliquip© aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat"'
+};
+var ctaLight = {
+  className: "primary--2",
+  text: "Call To Action",
+  onClick: function onClick() {
+    console.log("clicked - cta light");
+  }
+};
+var ctaDark = {
+  className: "secondary--1",
+  text: "Call To Action",
+  url: "https://example.com",
+  onClick: function onClick() {
+    console.log("clicked - cta dark");
+  }
+};
+var lottieAnimation = {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+  style: {
+    maxHeight: "100vh"
+  }
+};
+var variant1A = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Left",
+  imageOptions: "1/4",
+  appearance: "Light"
+};
+var variant1ALottie = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: lottieAnimation,
+  imagePosition: "Left",
+  imageOptions: "1/4",
+  appearance: "Light"
+};
+var variant1B = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Right",
+  imageOptions: "1/4",
+  appearance: "Light"
+};
+var variant2ADark = {
+  quote: quote,
+  cta: ctaDark,
+  topImage: {},
+  // sideImage: {
+  //   alt: "Image 400x580",
+  //   focalPointImage: {
+  //     height: 580,
+  //     title: "Image 400x580",
+  //     url: "//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg",
+  //     width: 400,
+  //     x: 149,
+  //     y: 254,
+  //   },
+  // },
+  sideImage: lottieAnimation,
+  imagePosition: "Left",
+  imageOptions: "1/4",
+  appearance: "Dark",
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  }
+};
+var variant2ALight = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Left",
+  imageOptions: "1/4",
+  appearance: "Light"
+};
+var variant2BLight = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Right",
+  imageOptions: "1/4",
+  appearance: "Light"
+};
+var noImageLightContent = {
+  quote: quote,
+  cta: ctaLight,
+  appearance: "Light",
+  imageOptions: "No Image"
+};
+var noImageDarkContent = {
+  quote: quote,
+  cta: ctaDark,
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  },
+  appearance: "Dark",
+  imageOptions: "No Image"
+};
+var variant2BDark = {
+  quote: quote,
+  cta: ctaDark,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 580,
+      title: "Image 400x580",
+      url: "//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg",
+      width: 400,
+      x: 149,
+      y: 254
+    }
+  },
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  },
+  imagePosition: "Right",
+  imageOptions: "1/4",
+  appearance: "Dark"
+};
+var variant2CLight = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Left",
+  imageOptions: "1/2",
+  appearance: "Light"
+};
+var variant2DLight = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "720x720",
+    focalPointImage: {
+      height: 720,
+      title: "720x720",
+      url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+      width: 720,
+      x: 358,
+      y: 224
+    }
+  },
+  imagePosition: "Right",
+  imageOptions: "1/2",
+  appearance: "Light",
+  wrapperHeight: undefined
+};
+var variant3Light = {
+  quote: quote,
+  cta: ctaLight,
+  // sideImage: {},
+  topImage: lottieAnimation,
+  // topImage: {
+  //   alt: "River",
+  //   focalPointImage: {
+  //     height: 500,
+  //     title: "River",
+  //     url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+  //     width: 500,
+  //     x: 490,
+  //     y: 323,
+  //   },
+  // },
+  appearance: "Light",
+  imagePosition: ""
+};
+var variant3Dark = {
+  quote: quote,
+  cta: ctaDark,
+  sideImage: {},
+  topImage: {
+    alt: "River",
+    focalPointImage: {
+      height: 500,
+      title: "River",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+      width: 500,
+      x: 490,
+      y: 323
+    }
+  },
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  },
+  appearance: "Dark",
+  imagePosition: ""
+};
+var backgroundDark = {
+  quote: quote,
+  cta: ctaDark,
+  sideImage: {},
+  topImage: {
+    alt: "River",
+    focalPointImage: {
+      height: 500,
+      title: "River",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+      width: 500,
+      x: 490,
+      y: 323
+    }
+  },
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  },
+  appearance: "Dark",
+  imagePosition: "",
+  backgroundImage: {
+    alt: "FPO Placeholder",
+    focalPointImage: {
+      height: 960,
+      width: 1280,
+      title: "FPO Placeholder",
+      url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+      x: 480,
+      y: 640
+    }
+  }
+};
+var backgroundDarkLottie = {
+  quote: quote,
+  cta: ctaDark,
+  sideImage: {},
+  topImage: lottieAnimation,
+  theme: {
+    backgroundColor: "#252a2e",
+    color: "#fff"
+  },
+  appearance: "Dark",
+  imagePosition: "",
+  backgroundImage: lottieAnimation
+};
+var backgroundLight = {
+  quote: quote,
+  cta: ctaLight,
+  sideImage: {},
+  topImage: {
+    alt: "River",
+    focalPointImage: {
+      height: 500,
+      title: "River",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+      width: 500,
+      x: 490,
+      y: 323
+    }
+  },
+  appearance: "Light",
+  imagePosition: "",
+  backgroundImage: {
+    alt: "FPO Placeholder",
+    focalPointImage: {
+      height: 960,
+      width: 1280,
+      title: "FPO Placeholder",
+      url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+      x: 480,
+      y: 640
+    }
+  }
+};
+var background2Light = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Right",
+  imageOptions: "1/4",
+  appearance: "Light",
+  backgroundImage: {
+    alt: "FPO Placeholder",
+    focalPointImage: {
+      height: 960,
+      width: 1280,
+      title: "FPO Placeholder",
+      url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+      x: 480,
+      y: 640
+    }
+  }
+};
+var Variant1Left = function Variant1Left() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1A,
+    variant: "variant1"
+  });
+};
+exports.Variant1Left = Variant1Left;
+var Variant1LeftLottieAnimation = function Variant1LeftLottieAnimation() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1ALottie,
+    variant: "variant1"
+  });
+};
+exports.Variant1LeftLottieAnimation = Variant1LeftLottieAnimation;
+var Variant1Right = function Variant1Right() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1B,
+    variant: "variant1"
+  });
+};
+exports.Variant1Right = Variant1Right;
+var Variant1Background = function Variant1Background() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: background2Light,
+    variant: "variant1"
+  });
+};
+exports.Variant1Background = Variant1Background;
+var Variant2ADarkLeft = function Variant2ADarkLeft() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant2ADark,
+    variant: "variant2"
+  });
+};
+exports.Variant2ADarkLeft = Variant2ADarkLeft;
+var Variant2BDarkRight = function Variant2BDarkRight() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant2BDark,
+    variant: "variant2"
+  });
+};
+exports.Variant2BDarkRight = Variant2BDarkRight;
+var Variant2CLightLeft = function Variant2CLightLeft() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant2CLight,
+    variant: "variant2"
+  });
+};
+exports.Variant2CLightLeft = Variant2CLightLeft;
+var Variant2DLightRight = function Variant2DLightRight() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant2DLight,
+    variant: "variant2"
+  });
+};
+exports.Variant2DLightRight = Variant2DLightRight;
+var Variant3Light = function Variant3Light() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant3Light,
+    variant: "variant3"
+  });
+};
+exports.Variant3Light = Variant3Light;
+var Variant3Dark = function Variant3Dark() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant3Dark,
+    variant: "variant3"
+  });
+};
+exports.Variant3Dark = Variant3Dark;
+var Variant3BackgroundLight = function Variant3BackgroundLight() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: backgroundLight,
+    variant: "variant3"
+  });
+};
+exports.Variant3BackgroundLight = Variant3BackgroundLight;
+var Variant3BackgroundDark = function Variant3BackgroundDark() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: backgroundDark,
+    variant: "variant3"
+  });
+};
+exports.Variant3BackgroundDark = Variant3BackgroundDark;
+var Variant3BackgroundDarkLottie = function Variant3BackgroundDarkLottie() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: backgroundDarkLottie,
+    variant: "variant3"
+  });
+};
+exports.Variant3BackgroundDarkLottie = Variant3BackgroundDarkLottie;
+var Variant3BackgroundDarkWithVideo = function Variant3BackgroundDarkWithVideo() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    override = _useState2[0],
+    setOverride = _useState2[1];
+  var thumbnail1 = {
+    src: "https://fpoimg.com/720x450",
+    alt: "fpo"
+  };
+  var video1 = {
+    url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+    allowFullScreen: true,
+    uuid: "UrtwArRETP23TP9yGgCEd6"
+  };
+  var videoContent1 = {
+    transcript: "View Transcript",
+    closeTranscript: "Hide Transcript",
+    transcriptText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    video: video1,
+    thumbnail: thumbnail1,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  var ctaVideo = {
+    className: "secondary--1",
+    text: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override
+  };
+  var backgroundDark = {
+    quote: quote,
+    cta: ctaVideo,
+    sideImage: {},
+    topImage: {
+      alt: "River",
+      focalPointImage: {
+        height: 500,
+        title: "River",
+        url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+        width: 500,
+        x: 490,
+        y: 323
+      }
+    },
+    theme: {
+      backgroundColor: "#252a2e",
+      color: "#fff"
+    },
+    appearance: "Dark",
+    imagePosition: "",
+    backgroundImage: {
+      alt: "FPO Placeholder",
+      focalPointImage: {
+        height: 960,
+        width: 1280,
+        title: "FPO Placeholder",
+        url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+        x: 480,
+        y: 640
+      }
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: backgroundDark,
+    variant: "variant3"
+  });
+};
+exports.Variant3BackgroundDarkWithVideo = Variant3BackgroundDarkWithVideo;
+var NoImageLight = function NoImageLight() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: noImageLightContent,
+    variant: "variant2"
+  });
+};
+exports.NoImageLight = NoImageLight;
+var NoImageDark = function NoImageDark() {
+  return /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: noImageDarkContent,
+    variant: "variant2"
+  });
+};
+exports.NoImageDark = NoImageDark;
+var _default = {
+  component: _PullQuote["default"],
+  title: "MXP Components/Pull Quote",
+  parameters: {
+    docs: {
+      page: _PullQuoteDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;

package/dist/luna/components/PullQuote/PullQuoteDocumentation.mdx

@@ -0,0 +1,60 @@
+#### PullQuote
+
+###### Props -
+
+- content **(required)** - object containing quotes, ctas, button
+  - `quote` **(required)** - object consisting of text, source, and sourceTitle strings
+    - `text` **(required)** - string that generates the quote text
+    - `source` **(required)** - string that generates the text of the person who said the thing
+    - `sourceTitle` **(required)** - string that generates the text of the source's job title
+  - `sideImage` - This will be the side image if there is no top image
+    - `alt` **(required)** - string that generates image accessibility text
+    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+  - `topImage` - This is the top image
+    - `alt` **(required)** - string that generates image accessibility text
+    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+  - `cta` - object for generating a CTA below the quote
+    - `url` - string for generating link href
+    - `text` - string for generating CTA text
+    - className -string that represents theme for CTA (or custom className) light themes use `primary--1` and `secondary--1`, dark themes use `primary--2` and `secondary--2`
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+  - `imagePosition` - This determines the side of the side image. Only if there is no top image
+  - `imageWidth` - This determines the width of the image and quote on side image variant
+  - `appearance` - This determines light or dark theme
+- variant **(required)** - This determines the type of variant to use for styling. reference storybook for all styles
+
+###### Example -
+
+```
+const content = {
+  quote: {
+    source: 'Gariatur Nostrud Pariatur',
+    sourceTitle: 'TITLE OR CREDENTIALS FOR THE QUOTEE',
+    text: '"Pull Quote can be aliquip aliqua    aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat"',
+  },
+  cta: {
+    className: 'primary--2',
+    text: 'Call To Action',
+    url: 'https://example.com',},
+  topImage: {},
+  sideImage: {
+    alt: 'Image 400x580',
+    focalPointImage: {
+      height: 580,
+      title: 'Image 400x580',
+      url: '//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg',
+      width: 400,
+      x: 149,
+      y: 254,
+    },
+  },
+  imagePosition: 'Left',
+  imageWidth: '1/4',
+  appearance: 'Dark',
+  theme: { backgroundColor: '#252a2e', color: '#fff' },
+}
+
+return (
+  <PullQuote content={content}    variant="variant1" />
+
+```