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

package/dist/components/TitleWithText/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TitleWithTextProps {
+    title?: string;
+    text: string;
+    className?: string;
+}
+declare const TitleWithText: React.FC<TitleWithTextProps>;
+export default TitleWithText;

package/dist/components/TitleWithText/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _WysiwygField = _interopRequireDefault(require("../WysiwygField"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var TitleWithText = function TitleWithText(_ref) {
+  var title = _ref.title,
+    text = _ref.text,
+    className = _ref.className;
+  var classes = (0, _classnames.default)('TitleWithText', className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, title && /*#__PURE__*/_react.default.createElement("h2", {
+    className: "TitleWithText__title"
+  }, title), /*#__PURE__*/_react.default.createElement(_WysiwygField.default, {
+    className: "TitleWithText__text",
+    property: "schema:text",
+    customElementHandler: function customElementHandler() {},
+    html: text
+  }));
+};
+var _default = TitleWithText;
+exports.default = _default;

package/dist/components/TitleWithText/stories.d.ts

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

package/dist/components/TitleWithText/stories.js

@@ -0,0 +1,24 @@
+"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: 'Molecules/TitleWithText',
+  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?<br />\n  Or a good old <a href='https://www.uncinc.nl' target=\"_blank\">a-tag</a>.</p>";
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    title: "This is a title",
+    text: html
+  }, args));
+};
+exports.Default = Default;

package/dist/components/WysiwygField/index.d.ts

@@ -0,0 +1,18 @@
+export default WysiwygField;
+declare function WysiwygField({ html, customElementHandler, ...props }: {
+    [x: string]: any;
+    html: any;
+    customElementHandler: any;
+}): React.JSX.Element;
+declare namespace WysiwygField {
+    namespace propTypes {
+        let html: PropTypes.Validator<string>;
+        let customElementHandler: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        export function customElementHandler_1(): void;
+        export { customElementHandler_1 as customElementHandler };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/config/constants.d.ts

@@ -0,0 +1,15 @@
+export const APP_ENV: string;
+export const __DEBUG__: boolean;
+export const DEFAULT_LANGUAGE: "nl";
+export const SITE_NAME: "Unc Inc";
+export const MAPBOX_API_TOKEN: "pk.eyJ1IjoidW5jaW5jYnYiLCJhIjoiY2pxeHhxd2FlMDMyeTQzbWp1a3hleHRscCJ9.QMfmlryTLEyrSyjU7FfBiw";
+export const IS_SERVER: boolean;
+export const IS_CLIENT: boolean;
+export const SCREEN_MOBILE: 0;
+export const SCREEN_TABLET: 768;
+export const SCREEN_NORMAL: 992;
+export const SCREEN_WIDE: 1240;
+export const SCREEN_HUGE: 2000;
+export const VIEW_ACTION_REPLACE: "replace";
+export const VIEW_ACTION_APPEND: "append";
+export let API_URL: string;

package/dist/config/i18next/locales/en.json

@@ -22,5 +22,14 @@
   "form": {
     "required": "required",
     "optional": "optional"
+  },
+  "searchkit": {
+    "reset_search": "Reconfigure search"
+  },
+  "organisms": {
+    "text": {
+      "read_more": "Read more",
+      "read_less": "Read less"
+    }
   }
 }

package/dist/config/i18next/locales/nl.json

@@ -25,5 +25,11 @@
   },
   "searchkit": {
     "reset_search": "Zoeken opnieuw instellen"
+  },
+  "organisms": {
+    "text": {
+      "read_more": "Lees meer",
+      "read_less": "Lees minder"
+    }
   }
 }

package/dist/helpers/gtm.d.ts

@@ -0,0 +1,44 @@
+export default gtm;
+declare namespace gtm {
+    /**
+     * gtm.loaded
+     *
+     * @description
+     *   Check wether google tag manager has been loaded.
+     * @return {bool}
+     *   A boolean wether the GTM is loaded or not.
+     */
+    function loaded(): bool;
+    /**
+     * gtm.register
+     *
+     * @description
+     *   Register a GTM helper function, used internally in the webapp.
+     *
+     * @param {string} fn
+     *   The name of the function to register.
+     * @param {function} callback
+     *   The callback of the function being registered.
+     * @return {void}
+     */
+    function register(fn: string, callback: Function): void;
+    /**
+     * gtm.push
+     *
+     * @description
+     *   A wrapper function to only pusb data into the dataLayer if GTM is loaded.
+     * @param {object} data
+     *   Event data to be sent to GTM.
+     * @return {array|bool}
+     *   An array containing the new dataLayer result or `false`.
+     */
+    function push(data: any): any;
+    /**
+     * gtm.attachEventListeners
+     *
+     * @description
+     *   Attach event listeners related to GTM.
+     * @return {void}
+     */
+    function attachEventListeners(): void;
+}

package/dist/helpers/link.d.ts

@@ -0,0 +1,2 @@
+export function isExternalLink(uri?: string): boolean;
+export function normalizeLink(link: any): any;

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() {
@@ -231,6 +249,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 +327,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 +452,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 +486,15 @@ 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 _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;