@greensight/gds
Version:
Greensight Design System
167 lines (142 loc) • 7.81 kB
JavaScript
var useTheme = require('./useTheme-DeOpgGLJ.js');
var React = require('react');
var styleInject_es = require('./style-inject.es-XZHJH68X.js');
var classnames = {exports: {}};
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function (module) {
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue (arg) {
if (typeof arg === 'string' || typeof arg === 'number') {
return arg;
}
if (typeof arg !== 'object') {
return '';
}
if (Array.isArray(arg)) {
return classNames.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
return arg.toString();
}
var classes = '';
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes = appendClass(classes, key);
}
}
return classes;
}
function appendClass (value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + ' ' + newClass;
}
return value + newClass;
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
} (classnames));
var classnamesExports = classnames.exports;
var cn = /*@__PURE__*/useTheme.getDefaultExportFromCjs(classnamesExports);
var css_248z = ".styles-module_layoutAutokit__-rvsY {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.styles-module_layoutAutokitError__1yBtA {\n font-family: \"PT Root UI\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4;\n}\n@media (max-width: 1440px) {\n .styles-module_layoutAutokitError__1yBtA {\n font-size: calc(0.875rem + (100vw - 48rem) / 42 * 0.125);\n }\n}\n@media (max-width: 768px) {\n .styles-module_layoutAutokitError__1yBtA {\n font-size: 0.875rem;\n }\n}\n\n.styles-module_layoutAutokitItem_title__L5ypa {\n text-align: center;\n margin-bottom: 16px;\n font-family: \"PT Root UI\", sans-serif;\n font-weight: 700;\n font-size: 1.5rem;\n line-height: 1.2;\n}\n@media (max-width: 1440px) {\n .styles-module_layoutAutokitItem_title__L5ypa {\n font-size: calc(1.25rem + (100vw - 48rem) / 42 * 0.25);\n }\n}\n@media (max-width: 768px) {\n .styles-module_layoutAutokitItem_title__L5ypa {\n font-size: 1.25rem;\n }\n}\n.styles-module_layoutAutokitItem_layout__YJu85 {\n height: 88px;\n}\n\n.styles-module_layoutAutokitItemLayout__MDnA1 {\n display: flex;\n flex-wrap: nowrap;\n justify-items: center;\n}\n.styles-module_layoutAutokitItemLayout_item__2leLR {\n display: flex;\n justify-content: center;\n align-items: center;\n color: #121314;\n font-family: \"PT Root UI\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.4;\n}\n@media (max-width: 1440px) {\n .styles-module_layoutAutokitItemLayout_item__2leLR {\n font-size: calc(0.75rem + (100vw - 48rem) / 42 * 0.125);\n }\n}\n@media (max-width: 768px) {\n .styles-module_layoutAutokitItemLayout_item__2leLR {\n font-size: 0.75rem;\n }\n}\n.styles-module_layoutAutokitItemLayout_item__padding__XnfZd {\n background-color: #68c1dd;\n width: var(--layout-item-padding-width);\n}\n.styles-module_layoutAutokitItemLayout_item__col__qNBl6 {\n background-color: #f1f2f5;\n width: var(--layout-item-col-width);\n}\n.styles-module_layoutAutokitItemLayout_item__gap__CVRLE {\n background-color: #f0b621;\n width: var(--layout-item-gap-width);\n}";
var styles = {"layoutAutokit":"styles-module_layoutAutokit__-rvsY","layoutAutokitError":"styles-module_layoutAutokitError__1yBtA","layoutAutokitItem_title":"styles-module_layoutAutokitItem_title__L5ypa","layoutAutokitItem_layout":"styles-module_layoutAutokitItem_layout__YJu85","layoutAutokitItemLayout":"styles-module_layoutAutokitItemLayout__MDnA1","layoutAutokitItemLayout_item":"styles-module_layoutAutokitItemLayout_item__2leLR","layoutAutokitItemLayout_item__padding":"styles-module_layoutAutokitItemLayout_item__padding__XnfZd","layoutAutokitItemLayout_item__col":"styles-module_layoutAutokitItemLayout_item__col__qNBl6","layoutAutokitItemLayout_item__gap":"styles-module_layoutAutokitItemLayout_item__gap__CVRLE"};
styleInject_es.styleInject(css_248z);
var Item = function Item(_ref) {
var breakpointName = _ref.breakpointName,
breakpointValue = _ref.breakpointValue;
var theme = useTheme.useAutokitsTheme();
var layout = theme.layout;
var cols = getLayoutValue(layout.cols, breakpointName);
var gap = getLayoutValue(layout.gap, breakpointName);
var container = getLayoutValue(layout.container, breakpointName);
var marginLeft = getLayoutValue(layout.marginLeft, breakpointName);
var marginRight = getLayoutValue(layout.marginRight, breakpointName);
var padding = getLayoutValue(layout.padding, breakpointName);
var paddingStyles = {
className: cn(styles.layoutAutokitItemLayout_item, styles.layoutAutokitItemLayout_item__padding),
style: {
'--layout-item-padding-width': "".concat(container !== 'none' ? (breakpointValue - container) / 2 : padding, "px")
}
};
var colStyles = {
className: cn(styles.layoutAutokitItemLayout_item, styles.layoutAutokitItemLayout_item__col),
style: {
'--layout-item-col-width': "".concat(container !== 'none' ? (container + gap) / cols - gap : (breakpointValue - padding * 2 + gap) / cols - gap, "px")
}
};
var gapStyles = {
className: cn(styles.layoutAutokitItemLayout_item, styles.layoutAutokitItemLayout_item__gap),
style: {
'--layout-item-gap-width': "".concat(gap, "px")
}
};
return useTheme.jsx("div", null, useTheme.jsx("div", {
className: styles.layoutAutokitItem_title
}, breakpointValue, " (", breakpointName, ")"), useTheme.jsx("div", {
className: cn(styles.layoutAutokitItem_layout, styles.layoutAutokitItemLayout)
}, useTheme.jsx("div", paddingStyles, marginLeft || padding), new Array(cols - 1).fill('').map(function (item, index) {
return useTheme.jsx(React.Fragment, {
key: index
}, useTheme.jsx("div", colStyles), useTheme.jsx("div", gapStyles, gap));
}), useTheme.jsx("div", colStyles), useTheme.jsx("div", paddingStyles, marginRight || padding)));
};
var getLayoutValue = function getLayoutValue(param, name) {
var breakpointsAbove = useTheme.BREAKPOINTS_NAMES.slice(0, useTheme.BREAKPOINTS_NAMES.indexOf(name) + 1);
var value;
breakpointsAbove.reverse().some(function (name) {
if (param[name] === undefined) return false;
value = param[name];
return true;
});
return value;
};
var LayoutAutokit = function LayoutAutokit() {
var _useAutokitsTheme = useTheme.useAutokitsTheme(),
layout = _useAutokitsTheme.layout;
if (!layout) return useTheme.jsx("div", {
className: styles.layoutAutokitError
}, useTheme.jsx("span", {
role: "img",
"aria-label": "Error"
}, "\u26D4\uFE0F"), ' ', "Layout is not defined. Use tokens or add ", useTheme.jsx("strong", null, "layout"), " property in theme settings manually");
return useTheme.jsx("div", {
className: styles.layoutAutokit
}, Object.entries(layout.breakpoints).map(function (_ref) {
var _ref2 = useTheme._slicedToArray(_ref, 2),
name = _ref2[0],
value = _ref2[1];
return useTheme.jsx("div", {
key: name,
style: {
width: value
}
}, useTheme.jsx(Item, {
breakpointName: name,
breakpointValue: value
}));
}));
};
exports.LayoutAutokit = LayoutAutokit;