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

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.3",
+  "version": "2.5.5",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -79,7 +79,7 @@
     "react-dom": "^16 || ^17 || ^18",
     "react-global-configuration": "^1.4.0",
     "react-html-parser": "^2.0.2",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "^11.5.0",
     "react-immutable-proptypes": "^2.2.0",
     "react-lazyload": "^3.0.0",
     "react-paginate": "^7.1.3",