@uncinc/uncinc-react-kitchen-sink 2.6.0 → 2.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AbbreviationAnnotation/stories.js +14 -16
- package/dist/components/Accordion/stories.js +11 -3
- package/dist/components/ApiAutocomplete/stories.js +13 -4
- package/dist/components/Button/stories.js +7 -0
- package/dist/components/CallToAction/stories.d.ts +7 -0
- package/dist/components/CallToAction/stories.js +7 -0
- package/dist/components/Cookie/stories.js +17 -1
- package/dist/components/Dialog/DialogHookStory/index.js +15 -23
- package/dist/components/Dialog/stories.js +7 -6
- package/dist/components/Download/stories.d.ts +7 -0
- package/dist/components/Download/stories.js +7 -0
- package/dist/components/FontSizeSwitcher/stories.js +16 -7
- package/dist/components/Form/Checkbox/index.js +2 -1
- package/dist/components/Form/Checkbox/stories.js +20 -9
- package/dist/components/Form/Checkboxes/stories.js +22 -14
- package/dist/components/Form/Date/stories.js +16 -4
- package/dist/components/Form/DatePicker/stories.js +16 -4
- package/dist/components/Form/DateSelect/stories.js +34 -22
- package/dist/components/Form/Email/stories.js +16 -4
- package/dist/components/Form/Number/stories.js +16 -4
- package/dist/components/Form/RadioButtons/stories.js +25 -14
- package/dist/components/Form/Select/stories.js +19 -7
- package/dist/components/Form/TextField/index.js +2 -1
- package/dist/components/Form/TextField/stories.js +21 -10
- package/dist/components/Form/Textarea/stories.js +16 -4
- package/dist/components/Hamburger/index.js +5 -3
- package/dist/components/Hamburger/stories.js +11 -3
- package/dist/components/Header/stories.js +22 -13
- package/dist/components/Image/stories.js +29 -25
- package/dist/components/InlineMenu/stories.js +66 -53
- package/dist/components/Layout/Container/stories.js +8 -1
- package/dist/components/Layout/QuickLayout/stories.js +17 -9
- package/dist/components/Lottie/stories.js +8 -1
- package/dist/components/MagicLine/stories.js +13 -5
- package/dist/components/MediaPlayer/stories.d.ts +7 -0
- package/dist/components/MediaPlayer/stories.js +8 -1
- package/dist/components/NavigationScroll/stories.js +11 -3
- package/dist/components/Pagination/index.js +8 -4
- package/dist/components/Pagination/stories.js +53 -2
- package/dist/components/Share/stories.js +11 -3
- package/dist/components/Sliders/SliderRelated/stories.js +18 -10
- package/dist/components/TitleWithText/stories.d.ts +7 -0
- package/dist/components/TitleWithText/stories.js +8 -1
- package/dist/components/WysiwygField/stories.js +15 -7
- package/dist/hooks/useClickOutside.js +1 -1
- package/dist/hooks/useOnScreen.d.ts +2 -0
- package/dist/hooks/useOnScreen.js +6 -6
- package/dist/hooks/usePrevious.d.ts +1 -0
- package/dist/hooks/usePrevious.js +1 -7
- package/dist/hooks/useScrollPosition.d.ts +2 -0
- package/dist/hooks/useScrollPosition.js +1 -1
- package/dist/hooks/useWindowDimensions.d.ts +4 -0
- package/dist/index.js +7 -0
- package/dist/organisms/Downloads/stories.d.ts +7 -0
- package/dist/organisms/Downloads/stories.js +8 -1
- package/dist/organisms/ImageGrid/index.d.ts +25 -0
- package/dist/organisms/ImageGrid/index.js +30 -0
- package/dist/organisms/ImageGrid/stories.d.ts +18 -0
- package/dist/organisms/ImageGrid/stories.js +95 -0
- package/dist/organisms/ImageGrid/style.scss +53 -0
- package/dist/organisms/Quote/stories.d.ts +7 -0
- package/dist/organisms/Quote/stories.js +12 -4
- package/dist/organisms/Text/stories.d.ts +7 -0
- package/dist/organisms/Text/stories.js +8 -1
- package/dist/styles/assets/_variables.scss +5 -1
- package/package.json +1 -3
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: React.FC<import(".").ImageGridProps>;
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
|
15
|
+
export declare const TwoImages: (args: any) => React.JSX.Element;
|
|
16
|
+
export declare const ThreeImages: (args: any) => React.JSX.Element;
|
|
17
|
+
export declare const FourImages: (args: any) => React.JSX.Element;
|
|
18
|
+
export declare const FiveImages: (args: any) => React.JSX.Element;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.TwoImages = exports.ThreeImages = exports.FourImages = exports.FiveImages = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _ = _interopRequireDefault(require("."));
|
|
9
|
+
var _Image = _interopRequireDefault(require("../../components/Image"));
|
|
10
|
+
require("./style.scss");
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
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); }
|
|
13
|
+
var _default = {
|
|
14
|
+
title: 'Organisms/ImageGrid',
|
|
15
|
+
component: _.default,
|
|
16
|
+
parameters: {
|
|
17
|
+
docs: {
|
|
18
|
+
description: {
|
|
19
|
+
component: '`import { ImageGrid } from "@uncinc/uncinc-react-kitchen-sink";`'
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
exports.default = _default;
|
|
25
|
+
var imageSrc = 'https://i0.wp.com/vat.or.th/wp-content/uploads/2021/03/placeholder.png';
|
|
26
|
+
var TwoImages = function TwoImages(args) {
|
|
27
|
+
var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
28
|
+
src: imageSrc,
|
|
29
|
+
alt: "image"
|
|
30
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
31
|
+
src: imageSrc,
|
|
32
|
+
alt: "image"
|
|
33
|
+
})];
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
35
|
+
items: items
|
|
36
|
+
}, args));
|
|
37
|
+
};
|
|
38
|
+
exports.TwoImages = TwoImages;
|
|
39
|
+
var ThreeImages = function ThreeImages(args) {
|
|
40
|
+
var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
41
|
+
src: imageSrc,
|
|
42
|
+
alt: "image"
|
|
43
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
44
|
+
src: imageSrc,
|
|
45
|
+
alt: "image"
|
|
46
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
47
|
+
src: imageSrc,
|
|
48
|
+
alt: "image"
|
|
49
|
+
})];
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
51
|
+
items: items
|
|
52
|
+
}, args));
|
|
53
|
+
};
|
|
54
|
+
exports.ThreeImages = ThreeImages;
|
|
55
|
+
var FourImages = function FourImages(args) {
|
|
56
|
+
var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
57
|
+
src: imageSrc,
|
|
58
|
+
alt: "image"
|
|
59
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
60
|
+
src: imageSrc,
|
|
61
|
+
alt: "image"
|
|
62
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
63
|
+
src: imageSrc,
|
|
64
|
+
alt: "image"
|
|
65
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
66
|
+
src: imageSrc,
|
|
67
|
+
alt: "image"
|
|
68
|
+
})];
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
70
|
+
items: items
|
|
71
|
+
}, args));
|
|
72
|
+
};
|
|
73
|
+
exports.FourImages = FourImages;
|
|
74
|
+
var FiveImages = function FiveImages(args) {
|
|
75
|
+
var items = [/*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
76
|
+
src: imageSrc,
|
|
77
|
+
alt: "image"
|
|
78
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
79
|
+
src: imageSrc,
|
|
80
|
+
alt: "image"
|
|
81
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
82
|
+
src: imageSrc,
|
|
83
|
+
alt: "image"
|
|
84
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
85
|
+
src: imageSrc,
|
|
86
|
+
alt: "image"
|
|
87
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
88
|
+
src: imageSrc,
|
|
89
|
+
alt: "image"
|
|
90
|
+
})];
|
|
91
|
+
return /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
92
|
+
items: items
|
|
93
|
+
}, args));
|
|
94
|
+
};
|
|
95
|
+
exports.FiveImages = FiveImages;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@import '../../styles/assets/variables';
|
|
2
|
+
|
|
3
|
+
.ImageGrid {
|
|
4
|
+
display: grid;
|
|
5
|
+
gap: var(--image-grid-gap--mobile, 2rem);
|
|
6
|
+
|
|
7
|
+
@media #{$tablet} {
|
|
8
|
+
gap: var(--image-grid-gap--desktop, 4rem);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ImageGrid--size-2 {
|
|
13
|
+
grid-template-columns: 1fr;
|
|
14
|
+
|
|
15
|
+
@media #{$tablet} {
|
|
16
|
+
grid-template-columns: 1fr 1fr;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ImageGrid--size-3 {
|
|
21
|
+
grid-template-columns: 1fr 1fr;
|
|
22
|
+
|
|
23
|
+
> div {
|
|
24
|
+
&:first-child {
|
|
25
|
+
grid-column: 1 / span 2;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ImageGrid--size-4 {
|
|
31
|
+
grid-template-columns: 1fr 1fr;
|
|
32
|
+
|
|
33
|
+
> div {
|
|
34
|
+
&:nth-child(1),
|
|
35
|
+
&:nth-child(4) {
|
|
36
|
+
grid-column: 1 / span 2;
|
|
37
|
+
|
|
38
|
+
@media #{$tablet} {
|
|
39
|
+
grid-column: unset;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ImageGrid--size-5 {
|
|
46
|
+
grid-template-columns: 1fr 1fr;
|
|
47
|
+
|
|
48
|
+
> div {
|
|
49
|
+
&:nth-child(3) {
|
|
50
|
+
grid-column: 1 / span 2;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -3,6 +3,13 @@ import './stories.scss';
|
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: React.FC<import(".").QuoteProps>;
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
6
13
|
};
|
|
7
14
|
export default _default;
|
|
8
15
|
export declare const Default: (args: any) => React.JSX.Element;
|
|
@@ -8,9 +8,17 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _ = _interopRequireDefault(require("."));
|
|
9
9
|
require("./stories.scss");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
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); }
|
|
11
12
|
var _default = {
|
|
12
13
|
title: 'Organisms/Quote',
|
|
13
|
-
component: _.default
|
|
14
|
+
component: _.default,
|
|
15
|
+
parameters: {
|
|
16
|
+
docs: {
|
|
17
|
+
description: {
|
|
18
|
+
component: '`import { Quote } from "@uncinc/uncinc-react-kitchen-sink";`'
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
14
22
|
};
|
|
15
23
|
exports.default = _default;
|
|
16
24
|
var Default = function Default(args) {
|
|
@@ -19,14 +27,14 @@ var Default = function Default(args) {
|
|
|
19
27
|
400: imageUrl,
|
|
20
28
|
1000: imageUrl
|
|
21
29
|
};
|
|
22
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
23
31
|
quote: "Roads? Where we're going we don't need roads.",
|
|
24
32
|
writer: "Emmett Lathrop Brown, Ph.D.",
|
|
25
33
|
position: "Scientist, Physicist, Blacksmith",
|
|
26
34
|
profileImage: imageSrc,
|
|
27
35
|
profileImageLarge: imageUrl,
|
|
28
36
|
icon: "marker"
|
|
29
|
-
}), /*#__PURE__*/_react.default.createElement(_.default, {
|
|
37
|
+
}, args)), /*#__PURE__*/_react.default.createElement(_.default, _extends({
|
|
30
38
|
quote: "Roads? Where we're going we don't need roads.",
|
|
31
39
|
writer: "Emmett Lathrop Brown, Ph.D.",
|
|
32
40
|
position: "Scientist, Physicist, Blacksmith",
|
|
@@ -34,6 +42,6 @@ var Default = function Default(args) {
|
|
|
34
42
|
profileImageLarge: imageUrl,
|
|
35
43
|
icon: "arrow",
|
|
36
44
|
flipped: true
|
|
37
|
-
}));
|
|
45
|
+
}, args)));
|
|
38
46
|
};
|
|
39
47
|
exports.Default = Default;
|
|
@@ -3,6 +3,13 @@ import './stories.scss';
|
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: React.FC<import(".").TextProps>;
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
6
13
|
};
|
|
7
14
|
export default _default;
|
|
8
15
|
export declare const Default: (args: any) => React.JSX.Element;
|
|
@@ -11,7 +11,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
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); }
|
|
12
12
|
var _default = {
|
|
13
13
|
title: 'Organisms/Text',
|
|
14
|
-
component: _.default
|
|
14
|
+
component: _.default,
|
|
15
|
+
parameters: {
|
|
16
|
+
docs: {
|
|
17
|
+
description: {
|
|
18
|
+
component: '`import { Text } from "@uncinc/uncinc-react-kitchen-sink";`'
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
15
22
|
};
|
|
16
23
|
exports.default = _default;
|
|
17
24
|
var Default = function Default(args) {
|
|
@@ -251,5 +251,9 @@ $desktop--navigation-height: 10rem;
|
|
|
251
251
|
// -----------------------------------------------------------------------------
|
|
252
252
|
$animation-timing--cubic-bezier: cubic-bezier(0.23, 0, 0.03, 1.01);
|
|
253
253
|
|
|
254
|
-
//
|
|
254
|
+
// -----------------------------------------------------------------------------
|
|
255
|
+
//
|
|
256
|
+
// Settings
|
|
257
|
+
//
|
|
258
|
+
// -----------------------------------------------------------------------------
|
|
255
259
|
$enable-deprecation-messages: 1;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uncinc/uncinc-react-kitchen-sink",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.3",
|
|
4
4
|
"description": "Default React components that are easily extended.",
|
|
5
5
|
"author": "uncinc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -55,11 +55,9 @@
|
|
|
55
55
|
"@types/react-router": "^5.1.20",
|
|
56
56
|
"@types/video.js": "^7.3.52",
|
|
57
57
|
"@types/webpack-env": "^1.18.0",
|
|
58
|
-
"@uncinc/react-drupal-core": "^2.3.4",
|
|
59
58
|
"apollo-server-micro": "^3.4.0",
|
|
60
59
|
"bootstrap": "^4",
|
|
61
60
|
"eslint-webpack-plugin": "^2",
|
|
62
|
-
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
|
|
63
61
|
"formik": "^2.2.6",
|
|
64
62
|
"graphql": "^15.7.0",
|
|
65
63
|
"i18next": "^22.4.13",
|