@uncinc/uncinc-react-kitchen-sink 2.6.1 → 2.6.3

package/dist/organisms/ImageGrid/stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TwoImages = exports.ThreeImages = exports.FourImages = exports.FiveImages = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _Image = _interopRequireDefault(require("../../components/Image"));
+require("./style.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/ImageGrid',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { ImageGrid } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
+};
+exports.default = _default;
+var imageSrc = 'https://i0.wp.com/vat.or.th/wp-content/uploads/2021/03/placeholder.png';
+var TwoImages = function TwoImages(args) {
+  var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  })];
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    items: items
+  }, args));
+};
+exports.TwoImages = TwoImages;
+var ThreeImages = function ThreeImages(args) {
+  var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  })];
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    items: items
+  }, args));
+};
+exports.ThreeImages = ThreeImages;
+var FourImages = function FourImages(args) {
+  var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  })];
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    items: items
+  }, args));
+};
+exports.FourImages = FourImages;
+var FiveImages = function FiveImages(args) {
+  var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    src: imageSrc,
+    alt: "image"
+  })];
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    items: items
+  }, args));
+};
+exports.FiveImages = FiveImages;

package/dist/organisms/ImageGrid/style.scss

@@ -0,0 +1,53 @@
+@import '../../styles/assets/variables';
+
+.ImageGrid {
+  display: grid;
+  gap: var(--image-grid-gap--mobile, 2rem);
+
+  @media #{$tablet} {
+    gap: var(--image-grid-gap--desktop, 4rem);
+  }
+}
+
+.ImageGrid--size-2 {
+  grid-template-columns: 1fr;
+
+  @media #{$tablet} {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.ImageGrid--size-3 {
+  grid-template-columns: 1fr 1fr;
+
+  > div {
+    &:first-child {
+      grid-column: 1 / span 2;
+    }
+  }
+}
+
+.ImageGrid--size-4 {
+  grid-template-columns: 1fr 1fr;
+
+  > div {
+    &:nth-child(1),
+    &:nth-child(4) {
+      grid-column: 1 / span 2;
+
+      @media #{$tablet} {
+        grid-column: unset;
+      }
+    }
+  }
+}
+
+.ImageGrid--size-5 {
+  grid-template-columns: 1fr 1fr;
+
+  > div {
+    &:nth-child(3) {
+      grid-column: 1 / span 2;
+    }
+  }
+}

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

@@ -3,6 +3,13 @@ import './stories.scss';
 declare const _default: {
     title: string;
     component: React.FC<import(".").QuoteProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Quote/stories.js

@@ -8,9 +8,17 @@ 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/Quote',
-  component: _.default
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Quote } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Default = function Default(args) {
@@ -19,14 +27,14 @@ var Default = function Default(args) {
     400: imageUrl,
     1000: imageUrl
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
     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, {
+  }, args)), /*#__PURE__*/_react.default.createElement(_.default, _extends({
     quote: "Roads? Where we're going we don't need roads.",
     writer: "Emmett Lathrop Brown, Ph.D.",
     position: "Scientist, Physicist, Blacksmith",
@@ -34,6 +42,6 @@ var Default = function Default(args) {
     profileImageLarge: imageUrl,
     icon: "arrow",
     flipped: true
-  }));
+  }, args)));
 };
 exports.Default = Default;

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

@@ -3,6 +3,13 @@ import './stories.scss';
 declare const _default: {
     title: string;
     component: React.FC<import(".").TextProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;

package/dist/organisms/Text/stories.js

@@ -11,7 +11,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: '`import { Text } from "@uncinc/uncinc-react-kitchen-sink";`'
+      }
+    }
+  }
 };
 exports.default = _default;
 var Default = function Default(args) {

package/dist/styles/assets/_variables.scss

@@ -251,5 +251,9 @@ $desktop--navigation-height: 10rem;
 // -----------------------------------------------------------------------------
 $animation-timing--cubic-bezier: cubic-bezier(0.23, 0, 0.03, 1.01);
 
-// Settings.
+// -----------------------------------------------------------------------------
+//
+// Settings
+//
+// -----------------------------------------------------------------------------
 $enable-deprecation-messages: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",