@sentecacommerce-theme/lib 0.12.90 → 0.12.91
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/cjs/ui/components/GridStyles.js +36 -0
- package/dist/cjs/ui/components/index.js +12 -0
- package/dist/esm/ui/components/GridStyles.js +26 -0
- package/dist/esm/ui/components/index.js +1 -0
- package/dist/types/ui/components/GridStyles.d.ts +10 -0
- package/dist/types/ui/components/index.d.ts +1 -0
- package/package.json +4 -4
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
Object.defineProperty(exports, "__esModule", {
|
|
2
|
+
value: true
|
|
3
|
+
});
|
|
4
|
+
exports.GridStyles = void 0;
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
function _interopRequireDefault(obj) {
|
|
7
|
+
return obj && obj.__esModule ? obj : {
|
|
8
|
+
default: obj
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
var GridStyles = function(param) {
|
|
12
|
+
var spaceX = param.spaceX, breakpoints = param.breakpoints, _remSize = param.remSize, remSize = _remSize === void 0 ? 10 : _remSize;
|
|
13
|
+
function getSize(width) {
|
|
14
|
+
return "min-width: calc(".concat(width, "% - ").concat(spaceX / remSize, "rem);") + "max-width: calc(".concat(width, "% - ").concat(spaceX / remSize, "rem);") + "margin: 0 ".concat(spaceX / 2 / remSize, "rem;");
|
|
15
|
+
}
|
|
16
|
+
var keys = Object.keys(breakpoints || {
|
|
17
|
+
xs: {
|
|
18
|
+
min: null
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
var transforms = {
|
|
22
|
+
xs: 'default'
|
|
23
|
+
};
|
|
24
|
+
var queries = keys.reduce(function(str, key, index) {
|
|
25
|
+
var min = ((breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[key]) || {}).min;
|
|
26
|
+
var k = transforms[key] || key;
|
|
27
|
+
if (index && !min) return str;
|
|
28
|
+
return str += "\n @media(min-width: ".concat(min || '1px', ") {\n .size-").concat(k, "-full-bleed {\n width: 100%;\n }\n\n .size-").concat(k, "-full-bleed .Section--inner {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n }\n\n .size-").concat(k, "-100 {\n ").concat(getSize(100), "\n }\n\n .size-").concat(k, "-90 {\n ").concat(getSize(90), "\n }\n\n .size-").concat(k, "-80 {\n ").concat(getSize(80), "\n }\n\n .size-").concat(k, "-75 {\n ").concat(getSize(75), "\n }\n\n .size-").concat(k, "-70 {\n ").concat(getSize(70), "\n }\n \n .size-").concat(k, "-66 {\n ").concat(getSize(66.666666), "\n }\n\n .size-").concat(k, "-60 {\n ").concat(getSize(60), "\n }\n\n .size-").concat(k, "-50 {\n ").concat(getSize(50), "\n }\n\n .size-").concat(k, "-40 {\n ").concat(getSize(40), "\n }\n\n .size-").concat(k, "-33 {\n ").concat(getSize(33.333333), "\n }\n\n .size-").concat(k, "-30 {\n ").concat(getSize(30), "\n }\n\n .size-").concat(k, "-25 {\n ").concat(getSize(25), "\n }\n\n .size-").concat(k, "-20 {\n ").concat(getSize(20), "\n }\n\n .size-").concat(k, "-10 {\n ").concat(getSize(10), "\n }\n }\n");
|
|
29
|
+
}, '');
|
|
30
|
+
return(/*#__PURE__*/ _react.default.createElement("style", {
|
|
31
|
+
dangerouslySetInnerHTML: {
|
|
32
|
+
__html: "\n .Page--row {\n display: flex;\n display: -webkit-flex;\n flex-wrap: wrap;\n -webkit-flex-wrap: wrap;\n margin: 0 -".concat(spaceX / remSize / 2, "rem;\n }\n\n .Page__section {\n padding-bottom: 8rem;\n }\n\n .Page--col {\n display: block;\n width: 100%;\n }\n \n .size-default-inherit {\n width: 100%;\n }\n ").concat(queries, "\n ")
|
|
33
|
+
}
|
|
34
|
+
}));
|
|
35
|
+
};
|
|
36
|
+
exports.GridStyles = GridStyles;
|
|
@@ -26,6 +26,18 @@ Object.keys(_lazyImage).forEach(function(key) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
|
+
var _gridStyles = _interopRequireWildcard(require("./GridStyles"));
|
|
30
|
+
Object.keys(_gridStyles).forEach(function(key) {
|
|
31
|
+
if (key === "default" || key === "__esModule") return;
|
|
32
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
33
|
+
if (key in exports && exports[key] === _gridStyles[key]) return;
|
|
34
|
+
Object.defineProperty(exports, key, {
|
|
35
|
+
enumerable: true,
|
|
36
|
+
get: function() {
|
|
37
|
+
return _gridStyles[key];
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
});
|
|
29
41
|
function _interopRequireWildcard(obj) {
|
|
30
42
|
if (obj && obj.__esModule) {
|
|
31
43
|
return obj;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var GridStyles = function(param) {
|
|
3
|
+
var spaceX = param.spaceX, breakpoints = param.breakpoints, _remSize = param.remSize, remSize = _remSize === void 0 ? 10 : _remSize;
|
|
4
|
+
var getSize = function getSize(width) {
|
|
5
|
+
return "min-width: calc(".concat(width, "% - ").concat(spaceX / remSize, "rem);") + "max-width: calc(".concat(width, "% - ").concat(spaceX / remSize, "rem);") + "margin: 0 ".concat(spaceX / 2 / remSize, "rem;");
|
|
6
|
+
};
|
|
7
|
+
var keys = Object.keys(breakpoints || {
|
|
8
|
+
xs: {
|
|
9
|
+
min: null
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var transforms = {
|
|
13
|
+
xs: 'default'
|
|
14
|
+
};
|
|
15
|
+
var queries = keys.reduce(function(str, key, index) {
|
|
16
|
+
var min = ((breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[key]) || {}).min;
|
|
17
|
+
var k = transforms[key] || key;
|
|
18
|
+
if (index && !min) return str;
|
|
19
|
+
return str += "\n @media(min-width: ".concat(min || '1px', ") {\n .size-").concat(k, "-full-bleed {\n width: 100%;\n }\n\n .size-").concat(k, "-full-bleed .Section--inner {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n }\n\n .size-").concat(k, "-100 {\n ").concat(getSize(100), "\n }\n\n .size-").concat(k, "-90 {\n ").concat(getSize(90), "\n }\n\n .size-").concat(k, "-80 {\n ").concat(getSize(80), "\n }\n\n .size-").concat(k, "-75 {\n ").concat(getSize(75), "\n }\n\n .size-").concat(k, "-70 {\n ").concat(getSize(70), "\n }\n \n .size-").concat(k, "-66 {\n ").concat(getSize(66.666666), "\n }\n\n .size-").concat(k, "-60 {\n ").concat(getSize(60), "\n }\n\n .size-").concat(k, "-50 {\n ").concat(getSize(50), "\n }\n\n .size-").concat(k, "-40 {\n ").concat(getSize(40), "\n }\n\n .size-").concat(k, "-33 {\n ").concat(getSize(33.333333), "\n }\n\n .size-").concat(k, "-30 {\n ").concat(getSize(30), "\n }\n\n .size-").concat(k, "-25 {\n ").concat(getSize(25), "\n }\n\n .size-").concat(k, "-20 {\n ").concat(getSize(20), "\n }\n\n .size-").concat(k, "-10 {\n ").concat(getSize(10), "\n }\n }\n");
|
|
20
|
+
}, '');
|
|
21
|
+
return(/*#__PURE__*/ React.createElement("style", {
|
|
22
|
+
dangerouslySetInnerHTML: {
|
|
23
|
+
__html: "\n .Page--row {\n display: flex;\n display: -webkit-flex;\n flex-wrap: wrap;\n -webkit-flex-wrap: wrap;\n margin: 0 -".concat(spaceX / remSize / 2, "rem;\n }\n\n .Page__section {\n padding-bottom: 8rem;\n }\n\n .Page--col {\n display: block;\n width: 100%;\n }\n \n .size-default-inherit {\n width: 100%;\n }\n ").concat(queries, "\n ")
|
|
24
|
+
}
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StringField } from '@sentecacommerce-theme/cms';
|
|
2
|
+
export declare const GridStyles: ({ spaceX, breakpoints, remSize, }: {
|
|
3
|
+
breakpoints?: {
|
|
4
|
+
[key: string]: {
|
|
5
|
+
min: StringField;
|
|
6
|
+
};
|
|
7
|
+
} | undefined;
|
|
8
|
+
spaceX: number;
|
|
9
|
+
remSize?: number | undefined;
|
|
10
|
+
}) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sentecacommerce-theme/lib",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.12.
|
|
4
|
+
"version": "0.12.91",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/types/index.d.ts",
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
"watch:cjs": "swc src --out-dir dist/cjs -w",
|
|
32
32
|
"watch:esm": "swc src --out-dir dist/esm --no-swcrc -w"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "bb0947520feb34f8271e3be4c9e76cfaeb3b5c5f",
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react-query": "^2.26.2"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@sentecacommerce-theme/base": "^0.12.
|
|
40
|
-
"@sentecacommerce-theme/cms": "^0.12.
|
|
39
|
+
"@sentecacommerce-theme/base": "^0.12.91",
|
|
40
|
+
"@sentecacommerce-theme/cms": "^0.12.91",
|
|
41
41
|
"@sentecacommerce/sdk": "2.0.161",
|
|
42
42
|
"body-scroll-lock": "^3.1.5",
|
|
43
43
|
"copy-to-clipboard": "^3.3.1",
|