@waves.exchange/wx-react-uikit - npm Package Compare versions

Comparing version 1.2.12 to 1.3.0

dist/cjs/components/ExternalLink/ExternalLink.d.ts

@@ -609,3 +609,3 @@ /// <reference types="@emotion/core" />
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
@@ -1207,4 +1207,4 @@ } & {
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
 }, object>;

dist/cjs/components/Label/Label.d.ts

@@ -609,3 +609,3 @@ /// <reference types="@emotion/core" />
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
@@ -1207,4 +1207,4 @@ } & {
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
 }, object>;

dist/cjs/components/Text/styles.d.ts

@@ -1,67 +0,1 @@
-export declare const variants: {
-    body1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    bodySemiBold1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    body2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    bodySemiBold2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    bodyXL: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    caption: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    line: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    heading1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading3: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading4: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading5: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    button1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    button2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-};
+export declare const variants: Record<string, Partial<Record<'fontSize' | 'lineHeight' | 'fontWeight', string>>>;

dist/cjs/components/Text/Text.d.ts

@@ -7,3 +7,3 @@ /// <reference types="@emotion/core" />
 import { variants } from './styles';
-export declare type TTextVariant = keyof typeof variants;
+export declare type TTextVariant = keyof typeof variants | Array<keyof typeof variants | undefined | null>;
 declare type TextSpecificProps = {
@@ -10,0 +10,0 @@ isTruncated?: boolean;

dist/cjs/components/Text/Text.js

@@ -7,2 +7,3 @@ "use strict";
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
+var css_1 = tslib_1.__importDefault(require("@styled-system/css"));
 var styles_1 = require("./styles");
@@ -18,6 +19,35 @@ var truncate = function (props) {
 };
+var getStyleFabric = function (breakpoints, _variantsKeys) {
+    return function (property) {
+        var findVariantKey = function (index) {
+            if (index === 0) {
+                return _variantsKeys[index];
+            }
+            return _variantsKeys[index]
+                ? _variantsKeys[index]
+                : findVariantKey(index - 1);
+        };
+        var getValidKey = function (i) { return findVariantKey(i) || 'body1'; };
+        return breakpoints.map(function (bp, i) {
+            return styles_1.variants[getValidKey(i)][property];
+        });
+    };
+};
 exports.Text = styled_1.default(Box_1.Box)(truncate, styled_system_1.textShadow, styled_system_1.system({ textDecoration: true }), styled_system_1.variant({
     prop: 'variant',
     variants: styles_1.variants,
-}));
+}), function (props) {
+    var _variantsKeys = props.variant;
+    if (!Array.isArray(_variantsKeys)) {
+        return {};
+    }
+    var stylesByVariant = getStyleFabric(props.theme.breakpoints, _variantsKeys);
+    var fontProps = {
+        fontSize: stylesByVariant('fontSize'),
+        lineHeight: stylesByVariant('lineHeight'),
+        fontWeight: stylesByVariant('fontWeight'),
+        variant: undefined,
+    };
+    return css_1.default(tslib_1.__assign({}, fontProps))(props.theme);
+});
 exports.Text.defaultProps = {
@@ -24,0 +54,0 @@ as: 'span',

dist/esm/components/ExternalLink/ExternalLink.d.ts

@@ -609,3 +609,3 @@ /// <reference types="@emotion/core" />
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
@@ -1207,4 +1207,4 @@ } & {
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
 }, object>;

dist/esm/components/Label/Label.d.ts

@@ -609,3 +609,3 @@ /// <reference types="@emotion/core" />
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
@@ -1207,4 +1207,4 @@ } & {
     isTruncated?: boolean | undefined;
-    variant?: "caption" | "line" | "body2" | "body1" | "bodySemiBold1" | "bodySemiBold2" | "bodyXL" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "button1" | "button2" | undefined;
+    variant?: string | (string | null | undefined)[] | undefined;
     textDecoration?: string | undefined;
 }, object>;

dist/esm/components/Text/styles.d.ts

@@ -1,67 +0,1 @@
-export declare const variants: {
-    body1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    bodySemiBold1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    body2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    bodySemiBold2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    bodyXL: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    caption: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    line: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    heading1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading3: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading4: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    heading5: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    button1: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    button2: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-};
+export declare const variants: Record<string, Partial<Record<'fontSize' | 'lineHeight' | 'fontWeight', string>>>;

dist/esm/components/Text/Text.d.ts

@@ -7,3 +7,3 @@ /// <reference types="@emotion/core" />
 import { variants } from './styles';
-export declare type TTextVariant = keyof typeof variants;
+export declare type TTextVariant = keyof typeof variants | Array<keyof typeof variants | undefined | null>;
 declare type TextSpecificProps = {
@@ -10,0 +10,0 @@ isTruncated?: boolean;

dist/esm/components/Text/Text.js

 import { Box } from '../Box/Box';
 import { system, textShadow, variant, } from 'styled-system';
 import styled from '@emotion/styled';
+import css from '@styled-system/css';
 import { variants } from './styles';
@@ -14,6 +15,33 @@ const truncate = (props) => {
 };
+const getStyleFabric = (breakpoints, _variantsKeys) => (property) => {
+    const findVariantKey = (index) => {
+        if (index === 0) {
+            return _variantsKeys[index];
+        }
+        return _variantsKeys[index]
+            ? _variantsKeys[index]
+            : findVariantKey(index - 1);
+    };
+    const getValidKey = (i) => findVariantKey(i) || 'body1';
+    return breakpoints.map((bp, i) => {
+        return variants[getValidKey(i)][property];
+    });
+};
 export const Text = styled(Box)(truncate, textShadow, system({ textDecoration: true }), variant({
     prop: 'variant',
     variants,
-}));
+}), (props) => {
+    const _variantsKeys = props.variant;
+    if (!Array.isArray(_variantsKeys)) {
+        return {};
+    }
+    const stylesByVariant = getStyleFabric(props.theme.breakpoints, _variantsKeys);
+    const fontProps = {
+        fontSize: stylesByVariant('fontSize'),
+        lineHeight: stylesByVariant('lineHeight'),
+        fontWeight: stylesByVariant('fontWeight'),
+        variant: undefined,
+    };
+    return css(Object.assign({}, fontProps))(props.theme);
+});
 Text.defaultProps = {
@@ -20,0 +48,0 @@ as: 'span',

package.json

 {
   "name": "@waves.exchange/wx-react-uikit",
-  "version": "1.2.12",
+  "version": "1.3.0",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

1136108

increased by3.47%

Number of package files

495

increased by1.43%

Worsened metrics

Lines of code

20616

decreased by-0.36%

No dependency changes