@uncinc/uncinc-react-kitchen-sink 2.5.4 → 2.6.0

package/dist/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "CallToAction", {
+  enumerable: true,
+  get: function get() {
+    return _CallToAction.default;
+  }
+});
 Object.defineProperty(exports, "ChipFacet", {
   enumerable: true,
   get: function get() {
@@ -63,6 +69,18 @@ Object.defineProperty(exports, "Dialog", {
     return _Dialog.default;
   }
 });
+Object.defineProperty(exports, "Download", {
+  enumerable: true,
+  get: function get() {
+    return _Download.default;
+  }
+});
+Object.defineProperty(exports, "Downloads", {
+  enumerable: true,
+  get: function get() {
+    return _Downloads.default;
+  }
+});
 Object.defineProperty(exports, "FontSizeSwitcher", {
   enumerable: true,
   get: function get() {
@@ -207,6 +225,12 @@ Object.defineProperty(exports, "MagicLine", {
     return _MagicLine.default;
   }
 });
+Object.defineProperty(exports, "MediaPlayer", {
+  enumerable: true,
+  get: function get() {
+    return _MediaPlayer.default;
+  }
+});
 Object.defineProperty(exports, "NavigationScroll", {
   enumerable: true,
   get: function get() {
@@ -231,6 +255,12 @@ Object.defineProperty(exports, "QuickLayout", {
     return _QuickLayout.default;
   }
 });
+Object.defineProperty(exports, "Quote", {
+  enumerable: true,
+  get: function get() {
+    return _Quote.default;
+  }
+});
 Object.defineProperty(exports, "SearchFacets", {
   enumerable: true,
   get: function get() {
@@ -303,6 +333,18 @@ Object.defineProperty(exports, "SliderRelated", {
     return _SliderRelated.default;
   }
 });
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _Text.default;
+  }
+});
+Object.defineProperty(exports, "TitleWithText", {
+  enumerable: true,
+  get: function get() {
+    return _TitleWithText.default;
+  }
+});
 Object.defineProperty(exports, "ViewportContext", {
   enumerable: true,
   get: function get() {
@@ -416,8 +458,10 @@ var _Background = _interopRequireDefault(require("./components/Image/Background"
 var _Lottie = _interopRequireDefault(require("./components/Lottie"));
 var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
 var _WysiwygField = _interopRequireDefault(require("./components/WysiwygField"));
+var _CallToAction = _interopRequireDefault(require("./components/CallToAction"));
 var _ChipFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ChipFacet"));
 var _Dialog = _interopRequireDefault(require("./components/Dialog"));
+var _Download = _interopRequireDefault(require("./components/Download"));
 var _FontSizeSwitcher = _interopRequireDefault(require("./components/FontSizeSwitcher"));
 var _Checkbox = _interopRequireDefault(require("./components/Form/Checkbox"));
 var _Checkboxes = _interopRequireDefault(require("./components/Form/Checkboxes"));
@@ -448,11 +492,16 @@ var _SearchResults = _interopRequireDefault(require("./components/SearchKit/Sear
 var _SearchSelectedFilters = _interopRequireDefault(require("./components/SearchKit/SearchSelectedFilters"));
 var _SearchSorting = _interopRequireDefault(require("./components/SearchKit/SearchSorting"));
 var _SelectFacet = _interopRequireDefault(require("./components/SearchKit/Facets/SelectFacet"));
+var _TitleWithText = _interopRequireDefault(require("./components/TitleWithText"));
 var _ApiAutocomplete = _interopRequireDefault(require("./components/ApiAutocomplete"));
 var _Cookie = _interopRequireDefault(require("./components/Cookie"));
+var _Downloads = _interopRequireDefault(require("./organisms/Downloads"));
 var _Header = _interopRequireDefault(require("./components/Header"));
+var _MediaPlayer = _interopRequireDefault(require("./components/MediaPlayer"));
+var _Quote = _interopRequireDefault(require("./organisms/Quote"));
 var _Share = _interopRequireDefault(require("./components/Share"));
 var _SliderRelated = _interopRequireDefault(require("./components/Sliders/SliderRelated"));
+var _Text = _interopRequireDefault(require("./organisms/Text"));
 var _Container = _interopRequireDefault(require("./components/Layout/Container"));
 var _QuickLayout = _interopRequireDefault(require("./components/Layout/QuickLayout"));
 var _KitchenSinkComponentMapperContext = _interopRequireDefault(require("./Context/KitchenSinkComponentMapperContext"));

package/dist/organisms/Downloads/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DownloadProps } from '../../components/Download';
+export interface DownloadsProps {
+    title?: string;
+    text?: string;
+    downloads: DownloadProps[];
+    target?: string;
+    className?: string;
+}
+declare const Downloads: React.FC<DownloadsProps>;
+export default Downloads;

package/dist/organisms/Downloads/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Download = _interopRequireDefault(require("../../components/Download"));
+var _TitleWithText = _interopRequireDefault(require("../../components/TitleWithText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Downloads = function Downloads(_ref) {
+  var title = _ref.title,
+    text = _ref.text,
+    downloads = _ref.downloads,
+    target = _ref.target,
+    className = _ref.className;
+  var classes = (0, _classnames.default)('Downloads', className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement(_TitleWithText.default, {
+    title: title,
+    text: text
+  }), downloads.map(function (download) {
+    return /*#__PURE__*/_react.default.createElement(_Download.default, {
+      source: download.source,
+      title: download.title,
+      description: download.description,
+      filesize: download.filesize,
+      filename: download.filename,
+      target: target,
+      mime: download.mime
+    });
+  }));
+};
+var _default = Downloads;
+exports.default = _default;

package/dist/organisms/Downloads/stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './stories.scss';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").DownloadsProps>;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Downloads/stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = {
+  title: 'Organisms/Downloads',
+  component: _.default
+};
+exports.default = _default;
+var Default = function Default(args) {
+  var dummyPdf = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
+  var downloadItems = [{
+    source: dummyPdf,
+    title: "Filetitle",
+    description: "Filedescription",
+    filename: "manual.pdf",
+    filesize: 1254894381,
+    mime: "application/pdf"
+  }, {
+    source: dummyPdf,
+    title: "Filetitle",
+    filesize: 84384313,
+    mime: "application/pdf"
+  }, {
+    source: dummyPdf,
+    title: "Filetitle",
+    filename: "picture.jpg",
+    mime: "image/jpeg"
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    title: "Downloads",
+    text: "These are some things you can download!",
+    downloads: downloadItems
+  }, args)));
+};
+exports.Default = Default;

package/dist/organisms/Downloads/stories.scss

@@ -0,0 +1,67 @@
+@import '../../styles/assets/variables';
+
+.Download {
+  display: flex;
+  align-items: center;
+
+  max-width: 80rem;
+  margin-bottom: 3rem;
+  padding: 1rem;
+  padding: 1rem;
+
+  text-decoration: none;
+
+  background-color: $color--grey--lighter;
+  border: 2px solid $color--grey;
+  border-radius: 1rem;
+  border-radius: 1rem;
+
+
+  &:hover {
+    color: $color--white;
+    background-color: $color--primary;
+    border-radius: 1rem;
+
+    div {
+      color: $color--white;
+    }
+
+    &__icon {
+      background-position-y: -1em;
+    }
+  }
+
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    margin: 3rem 3rem 3rem 2rem;
+    font-size: 3rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 1rem;
+
+    margin-right: 1rem;
+    padding: 1rem;
+
+    border: 2px solid $color--grey;
+    border-radius: 1rem;
+  }
+
+  &__title,
+  &__description,
+  &__attributes {
+    margin: 0;
+    padding: 1rem;
+    border: 2px solid $color--grey;
+    border-radius: 1rem;
+  }
+
+  &__extension {
+    margin-right: 1rem;
+    text-decoration: none;
+  }
+}

package/dist/organisms/Quote/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type ImageType = {
+    [key: number]: string;
+} | string;
+export interface QuoteProps {
+    quote: string;
+    className?: string;
+    writer?: string;
+    position?: string;
+    profileImage?: ImageType;
+    profileImageAlt?: string;
+    profileImageLarge?: ImageType;
+    profileImageLargeAlt?: string;
+    icon?: string;
+    flipped?: boolean;
+}
+declare const Quote: React.FC<QuoteProps>;
+export default Quote;

package/dist/organisms/Quote/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Image = _interopRequireDefault(require("../../components/Image"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Quote = function Quote(_ref) {
+  var quote = _ref.quote,
+    className = _ref.className,
+    writer = _ref.writer,
+    position = _ref.position,
+    profileImage = _ref.profileImage,
+    _ref$profileImageAlt = _ref.profileImageAlt,
+    profileImageAlt = _ref$profileImageAlt === void 0 ? 'writer' : _ref$profileImageAlt,
+    profileImageLarge = _ref.profileImageLarge,
+    _ref$profileImageLarg = _ref.profileImageLargeAlt,
+    profileImageLargeAlt = _ref$profileImageLarg === void 0 ? 'writer' : _ref$profileImageLarg,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? 'quotes' : _ref$icon,
+    flipped = _ref.flipped;
+  var classes = (0, _classnames.default)('Quote', flipped && 'Quote--flipped', className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, profileImageLarge && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Quote__profileImageLarge"
+  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: profileImageLarge,
+    alt: profileImageAlt
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Quote__quotewrapper"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Quote__icon icon icon-".concat(icon)
+  }), /*#__PURE__*/_react.default.createElement("h3", {
+    className: "Quote__quote"
+  }, quote), writer && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Quote__writer"
+  }, profileImage && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Quote__profileImage"
+  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: profileImage,
+    alt: profileImageLargeAlt
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "Quote__name large"
+  }, writer), /*#__PURE__*/_react.default.createElement("p", {
+    className: "Quote__function small"
+  }, position)))));
+};
+var _default = Quote;
+exports.default = _default;

package/dist/organisms/Quote/stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './stories.scss';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").QuoteProps>;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Quote/stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Organisms/Quote',
+  component: _.default
+};
+exports.default = _default;
+var Default = function Default(args) {
+  var imageUrl = "https://upload.wikimedia.org/wikipedia/en/thumb/9/97/Doc_Brown.JPG/220px-Doc_Brown.JPG";
+  var imageSrc = {
+    400: imageUrl,
+    1000: imageUrl
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, {
+    quote: "Roads? Where we're going we don't need roads.",
+    writer: "Emmett Lathrop Brown, Ph.D.",
+    position: "Scientist, Physicist, Blacksmith",
+    profileImage: imageSrc,
+    profileImageLarge: imageUrl,
+    icon: "marker"
+  }), /*#__PURE__*/_react.default.createElement(_.default, {
+    quote: "Roads? Where we're going we don't need roads.",
+    writer: "Emmett Lathrop Brown, Ph.D.",
+    position: "Scientist, Physicist, Blacksmith",
+    profileImage: imageSrc,
+    profileImageLarge: imageUrl,
+    icon: "arrow",
+    flipped: true
+  }));
+};
+exports.Default = Default;

package/dist/organisms/Quote/stories.scss

@@ -0,0 +1,48 @@
+@import '../../styles/assets/variables';
+
+.Quote {
+  display: flex;
+  flex-direction: row;
+
+  &__quotewrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 3rem;
+  }
+
+  &__icon {
+    font-size: 5rem;
+  }
+
+  &__writer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__profileImage {
+    margin-right: 2rem;
+    border-radius: 50%;
+    max-height: 6.6rem;
+    max-width: 6.6rem;
+    overflow: hidden;
+
+    img {
+      overflow: auto;
+    }
+
+    &Large {
+      border-radius: 50%;
+    }
+  }
+
+  &--flipped {
+    flex-direction: row-reverse;
+
+    .Quote__quotewrapper {
+      margin-left: 0rem;
+      margin-right: 3rem;
+    }
+  }
+}

package/dist/organisms/Text/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TextProps {
+    title?: string;
+    text: string;
+    readMore?: string;
+    duration?: number;
+    easing?: string;
+    readMoreHeight?: number;
+    link?: string;
+    linkText?: string;
+    target?: string;
+    className?: string;
+}
+declare const Text: React.FC<TextProps>;
+export default Text;

package/dist/organisms/Text/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TitleWithText = _interopRequireDefault(require("../../components/TitleWithText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Text = function Text(_ref) {
+  var title = _ref.title,
+    text = _ref.text,
+    readMore = _ref.readMore,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 333 : _ref$duration,
+    _ref$easing = _ref.easing,
+    easing = _ref$easing === void 0 ? 'cubic-bezier(0.65, 0, 0.35, 1)' : _ref$easing,
+    _ref$readMoreHeight = _ref.readMoreHeight,
+    readMoreHeight = _ref$readMoreHeight === void 0 ? 0 : _ref$readMoreHeight,
+    link = _ref.link,
+    linkText = _ref.linkText,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    className = _ref.className;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    readMoreOpened = _useState2[0],
+    setReadMoreOpened = _useState2[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var classes = (0, _classnames.default)('Text', className);
+  var readMoreClasses = (0, _classnames.default)('Text__read_more', {
+    'Text__read_more--open': readMoreOpened
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement(_TitleWithText.default, {
+    title: title,
+    text: text
+  }), readMore && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: readMoreClasses
+  }, /*#__PURE__*/_react.default.createElement(_reactAnimateHeight.default, {
+    duration: duration,
+    easing: easing,
+    height: readMoreOpened ? 'auto' : readMoreHeight
+  }, /*#__PURE__*/_react.default.createElement(_TitleWithText.default, {
+    text: readMore
+  }))), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "Text__read_more__button",
+    onClick: function onClick() {
+      return setReadMoreOpened(!readMoreOpened);
+    }
+  }, readMoreOpened ? t('organisms.text.read_less') : t('organisms.text.read_more'))), link && /*#__PURE__*/_react.default.createElement("a", {
+    className: "Text__link",
+    href: link,
+    target: target,
+    rel: "noreferrer"
+  }, linkText));
+};
+var _default = Text;
+exports.default = _default;

package/dist/organisms/Text/stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './stories.scss';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").TextProps>;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Text/stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _default = {
+  title: 'Organisms/Text',
+  component: _.default
+};
+exports.default = _default;
+var Default = function Default(args) {
+  var html = "<p>This is some text in a <code>WysiwygField</code> so you can put whatever you like in here.<br /><br />\n  For example, a <ul><li>list</li><li>with</li><li>items</li></ul> perhaps?</p>";
+  var more = "<p>If you like, you can have some text behind a read-more button, like so.<br />\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt\n  in culpa qui officia deserunt mollit anim id est laborum.</p>";
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    title: "Text",
+    text: html,
+    readMore: more,
+    readMoreHeight: 60,
+    link: "https://www.uncinc.nl/",
+    linkText: "Optionally, this component can have a seperate link element",
+    target: "_blank"
+  }, args));
+};
+exports.Default = Default;

package/dist/organisms/Text/stories.scss

@@ -0,0 +1,29 @@
+@import '../../styles/assets/variables';
+
+.Text {
+  &__read_more {
+    position: relative;
+    overflow: hidden;
+    transition: height .33s linear;
+
+    &:not(.Text__read_more--open):after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      opacity: 1;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, $color--white 100%);
+
+      transition: opacity .33s linear;
+    }
+
+    &__button {
+      display: block;
+      margin-bottom: 2rem;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -53,6 +53,7 @@
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router": "^5.1.20",
+    "@types/video.js": "^7.3.52",
     "@types/webpack-env": "^1.18.0",
     "@uncinc/react-drupal-core": "^2.3.4",
     "apollo-server-micro": "^3.4.0",
@@ -78,6 +79,7 @@
     "react-datepicker": "^3.0.0",
     "react-dom": "^16 || ^17 || ^18",
     "react-global-configuration": "^1.4.0",
+    "react-hook-videojs": "^3.0.2",
     "react-html-parser": "^2.0.2",
     "react-i18next": "^11.5.0",
     "react-immutable-proptypes": "^2.2.0",
@@ -96,7 +98,9 @@
     "sass-loader": "^8.0.2",
     "slick-carousel": "^1.8.1",
     "typescript": "^5.0.4",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "videojs-vimeo-tech": "^1.0.0",
+    "videojs-youtube": "^2"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.44",