@sberdevices/ui - npm Package Compare versions

Comparing version 1.0.0-rc.80 to 1.0.0-rc.81

components/Grid/Col.d.ts

@@ -1,31 +0,7 @@
-import React from 'react';
-declare type ColCount = 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 | 8.5 | 9 | 9.5 | 10 | 10.5 | 11 | 11.5 | 12;
-interface MediaProps {
-    sizeS?: ColCount;
-    sizeM?: ColCount;
-    sizeL?: ColCount;
-    sizeXL?: ColCount;
-}
-interface OffsetProps {
-    offsetS?: ColCount;
-    offsetM?: ColCount;
-    offsetL?: ColCount;
-    offsetXL?: ColCount;
-}
-interface StyledColProps extends MediaProps, OffsetProps {
-    $type: 'rel' | 'calc';
-}
-export interface ColProps extends MediaProps, OffsetProps, React.HTMLAttributes<HTMLDivElement> {
+import { ColProps as BaseProps } from '@sberdevices/plasma-core/components/Grid';
+export interface ColProps extends BaseProps {
     /**
      * Тип ячейки
      */
-    type?: StyledColProps['$type'];
-    /**
-     * Размер ячейки, зависящий от максимального количества столбцов
-     */
-    size?: ColCount;
-    /**
-     * Отступ ячейки, сдвинет ее на n ячеек вправо
-     */
-    offset?: ColCount;
+    type?: 'rel' | 'calc';
 }
@@ -42,4 +18,3 @@ /**
  */
-export declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Col: import("styled-components").StyledComponent<"div", any, ColProps, never>;
 //# sourceMappingURL=Col.d.ts.map

components/Grid/Col.js

@@ -6,13 +6,2 @@ "use strict";
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -48,44 +37,8 @@ if (k2 === undefined) k2 = k;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Col = void 0;
-var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var Grid_1 = require("@sberdevices/plasma-core/components/Grid");
+var Col_1 = require("@sberdevices/plasma-core/components/Grid/Col");
 var utils_1 = require("@sberdevices/plasma-core/utils");
-var sizes = {
-    /**
-     * Размер ячейки при разрешении S
-     */
-    S: 'sizeS',
-    /**
-     * Размер ячейки при разрешении M
-     */
-    M: 'sizeM',
-    /**
-     * Размер ячейки при разрешении L
-     */
-    L: 'sizeL',
-    /**
-     * Размер ячейки при разрешении XL
-     */
-    XL: 'sizeXL',
-};
-var offsets = {
-    S: 'offsetS',
-    M: 'offsetM',
-    L: 'offsetL',
-    XL: 'offsetXL',
-};
-var StyledColBase = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n\n    padding-left: var(--plasma-grid-gutter);\n    padding-right: var(--plasma-grid-gutter);\n"], ["\n    box-sizing: border-box;\n\n    padding-left: var(--plasma-grid-gutter);\n    padding-right: var(--plasma-grid-gutter);\n"])));
-var StyledCol = styled_components_1.default(StyledColBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
-    "\n"])), function (_a) {
-    var $type = _a.$type, theme = _a.theme, props = __rest(_a, ["$type", "theme"]);
-    return utils_1.gridSizes.map(function (breakpoint) {
-        var size = props[sizes[breakpoint]];
-        var offset = props[offsets[breakpoint]];
-        return utils_1.mediaQuery(breakpoint, theme.deviceScale)(styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                ", "\n                ", "\n                ", "\n                ", "\n            "], ["\n                ", "\n                ", "\n                ", "\n                ", "\n            "])), $type === 'rel' && size && "width: " + (100 / utils_1.gridColumns[breakpoint]) * size + "%;", $type === 'rel' && offset && "margin-left: " + (100 / utils_1.gridColumns[breakpoint]) * offset + "%;", $type === 'calc' && size && "width: calc(var(--plasma-grid-column-width) * " + size + ");", $type === 'calc' && offset && "margin-left: calc(var(--plasma-grid-column-width) * " + offset + ");"));
-    });
-});
 /**
@@ -101,21 +54,14 @@ * Блок для размещения контента или строк (``Row``) внутри себя.
  */
-exports.Col = react_1.default.forwardRef(function (_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? 'rel' : _b, size = _a.size, offset = _a.offset, children = _a.children, props = __rest(_a, ["type", "size", "offset", "children"]);
-    if (size) {
-        Object.values(sizes).forEach(function (sizeProp) {
-            if (!props[sizeProp]) {
-                props[sizeProp] = size;
-            }
-        });
-    }
-    if (offset) {
-        Object.values(offsets).forEach(function (offsetProp) {
-            if (!props[offsetProp]) {
-                props[offsetProp] = offset;
-            }
-        });
-    }
-    return (react_1.default.createElement(StyledCol, __assign({ ref: ref, "$type": type }, props), children));
+exports.Col = styled_components_1.default(Grid_1.Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
+    "\n"])), function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'rel' : _b, theme = _a.theme, size = _a.size, offset = _a.offset, props = __rest(_a, ["type", "theme", "size", "offset"]);
+    return utils_1.gridSizes.map(function (breakpoint) {
+        var bpSize = Col_1.sizes[breakpoint];
+        var bpOffset = Col_1.offsets[breakpoint];
+        var colSize = props[bpSize] || size;
+        var colOffset = props[bpOffset] || offset;
+        return utils_1.mediaQuery(breakpoint, theme.deviceScale)(styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            ", "\n            ", "\n            ", "\n            ", "\n        "], ["\n            ", "\n            ", "\n            ", "\n            ", "\n        "])), type === 'rel' && colSize && "width: " + (100 / utils_1.gridColumns[breakpoint]) * colSize + "%;", type === 'rel' && colOffset && "margin-left: " + (100 / utils_1.gridColumns[breakpoint]) * colOffset + "%;", type === 'calc' && colSize && "width: calc(var(--plasma-grid-column-width) * " + colSize + ");", type === 'calc' && colOffset && "margin-left: calc(var(--plasma-grid-column-width) * " + colOffset + ");"));
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=Col.js.map

components/Grid/Container.js

@@ -54,6 +54,7 @@ "use strict";
 var styled_components_1 = __importStar(require("styled-components"));
-var plasma_tokens_1 = require("@sberdevices/plasma-tokens");
+var Grid_1 = require("@sberdevices/plasma-core/components/Grid");
 var utils_1 = require("@sberdevices/plasma-core/utils");
 var sidesCount = 2;
-var StyledContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 auto;\n\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n\n    width: 100%;\n    padding-left: var(--plasma-grid-margin);\n    padding-right: var(--plasma-grid-margin);\n\n    ", "\n"], ["\n    margin: 0 auto;\n\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n\n    width: 100%;\n    padding-left: var(--plasma-grid-margin);\n    padding-right: var(--plasma-grid-margin);\n\n    ",
+var htmlFontSizePx = 16;
+var StyledContainer = styled_components_1.default(Grid_1.Container)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
     "\n"])), function (_a) {
@@ -63,6 +64,4 @@ var $width = _a.$width, theme = _a.theme;
         var containerWidth = $width;
-        var margins = (utils_1.gridMargins[breakpoint] * sidesCount - utils_1.gridGutters[breakpoint]) *
-            plasma_tokens_1.scalingPixelBasis *
-            theme.deviceScale;
-        return utils_1.mediaQuery(breakpoint, theme.deviceScale)(styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                --plasma-grid-margin: ", "rem;\n                --plasma-grid-gutter: ", "rem;\n                --plasma-grid-column-width: ", "px;\n            "], ["\n                --plasma-grid-margin: ", "rem;\n                --plasma-grid-gutter: ", "rem;\n                --plasma-grid-column-width: ", "px;\n            "])), utils_1.gridMargins[breakpoint], utils_1.gridGutters[breakpoint] / sidesCount, (containerWidth - margins) / utils_1.gridColumns[breakpoint]));
+        var margins = (utils_1.gridMargins[breakpoint] * sidesCount - utils_1.gridGutters[breakpoint]) * htmlFontSizePx * theme.deviceScale;
+        return utils_1.mediaQuery(breakpoint, theme.deviceScale)(styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                --plasma-grid-column-width: ", "px;\n                --plasma-grid-margin: ", "rem;\n                --plasma-grid-gutter: ", "rem;\n            "], ["\n                --plasma-grid-column-width: ", "px;\n                --plasma-grid-margin: ", "rem;\n                --plasma-grid-gutter: ", "rem;\n            "])), (containerWidth - margins) / utils_1.gridColumns[breakpoint], utils_1.gridMargins[breakpoint], utils_1.gridGutters[breakpoint] / sidesCount));
     });
@@ -69,0 +68,0 @@ });

components/Grid/index.d.ts

@@ -0,5 +1,5 @@
+export { Row } from '@sberdevices/plasma-core/components/Grid';
 export { Container } from './Container';
 export { Col } from './Col';
 export type { ColProps } from './Col';
-export { Row } from './Row';
 //# sourceMappingURL=index.d.ts.map

components/Grid/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var Grid_1 = require("@sberdevices/plasma-core/components/Grid");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Grid_1.Row; } });
 var Container_1 = require("./Container");
@@ -7,4 +9,2 @@ Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return Container_1.Container; } });
 Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return Col_1.Col; } });
-var Row_1 = require("./Row");
-Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Row_1.Row; } });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@sberdevices/ui",
-  "version": "1.0.0-rc.80",
+  "version": "1.0.0-rc.81",
   "description": "SberDevices Design System",
@@ -102,3 +102,3 @@ "main": "index.js",
   "sideEffects": false,
-  "gitHead": "45e9668292823a8d69ed169267bd7b3a5bc7c431"
+  "gitHead": "f937f57d3d5f6bca8448b83cfa19c06cf42a4d0a"
 }

No alert changes

Worsened metrics

Total package byte prevSize

928797

decreased by-1.14%

Number of package files

504

decreased by-0.79%

Lines of code

9926

decreased by-1.59%

No dependency changes