@snack-uikit/skeleton 0.5.1 → 0.6.1-preview-20b0f520.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2024-11-29)
+
+
+### Features
+
+* **PDS-801:** add typography prop ([b0e8495](https://github.com/cloud-ru-tech/snack-uikit/commit/b0e84950550b866c3a4460b4b31143df498d705b))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-801:** use skeleton text tokens ([930bcb0](https://github.com/cloud-ru-tech/snack-uikit/commit/930bcb01500e5754457a8d1e8fdf2c0487bc2526))
+
+
+
+
 ## 0.5.1 (2024-11-14)
 
 

package/README.md

@@ -37,11 +37,11 @@
 |------|------|---------------|-------------|
 | loading | `boolean` | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |
 | width | `Width<string \| number>` | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример `'60%'`, `'400px'` и т.д) |
-| borderRadius | `BorderRadius<string \| number>` | 0.4em | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример `'10px'`, `'50%'` и т.д) |
 | className | `string` | - | CSS-класс |
 | lines | `number` | 3 | Количество строк. |
 | rowClassName | `string` | - | CSS-класс строки |
 | lineClassName | `string` | - | CSS-класс линии |
+| typography | "display-l" \| "display-m" \| "display-s" \| "headline-l" \| "headline-m" \| "headline-s" \| "title-l" \| "title-m" \| "title-s" \| "label-l" \| "label-m" \| "label-s" \| "body-l" \| "body-m" \| "body-s" | body-m | Типографика |
 ## WithSkeleton
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/SkeletonText/SkeletonText.d.ts

@@ -1,11 +1,14 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { SkeletonProps } from '../Skeleton';
-export type SkeletonTextProps = WithSupportProps<Omit<SkeletonProps, 'height'> & {
+import { Variant } from './types';
+export type SkeletonTextProps = WithSupportProps<Omit<SkeletonProps, 'height' | 'borderRadius'> & {
     /** Количество строк. */
     lines?: number;
     /** CSS-класс строки */
     rowClassName?: string;
     /** CSS-класс линии */
     lineClassName?: string;
+    /** Типографика */
+    typography?: Variant;
 }>;
-export declare function SkeletonText({ width, className, rowClassName, lineClassName, children, loading, lines, borderRadius, ...restProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ width, className, rowClassName, lineClassName, children, loading, lines, typography, ...restProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SkeletonText/SkeletonText.js

@@ -32,26 +32,30 @@ function SkeletonText(_a) {
       children,
       loading,
       lines = 3,
-      borderRadius = '0.4em'
+      typography = 'body-m'
     } = _a,
-    restProps = __rest(_a, ["width", "className", "rowClassName", "lineClassName", "children", "loading", "lines", "borderRadius"]);
+    restProps = __rest(_a, ["width", "className", "rowClassName", "lineClassName", "children", "loading", "lines", "typography"]);
   const lineTestId = restProps['data-test-id'] ? `${restProps['data-test-id']}_line` : undefined;
   const rows = (0, react_1.useMemo)(() => Array(lines).fill(true).map((_, index) => (0, jsx_runtime_1.jsx)("div", {
     className: (0, classnames_1.default)(styles_module_scss_1.default.skeletonTextRow, rowClassName),
+    style: {
+      lineHeight: `var(--size-skeleton-text-line-height-${typography})`
+    },
     children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {
       "data-test-id": lineTestId,
       loading: true,
-      borderRadius: borderRadius,
+      height: `var(--size-skeleton-text-font-size-${typography})`,
+      borderRadius: `var(--radius-skeleton-text-${typography})`,
       className: (0, classnames_1.default)(styles_module_scss_1.default.skeletonTextLine, lineClassName)
     })
-  }, index)), [lines, borderRadius, rowClassName, lineClassName, lineTestId]);
+  }, index)), [lines, rowClassName, lineTestId, typography, lineClassName]);
   const isLoading = (0, hooks_1.useIsLoadingValue)(loading);
   if (isLoading) {
     return (0, jsx_runtime_1.jsx)("div", Object.assign({}, restProps, {
+      className: (0, classnames_1.default)(className, styles_module_scss_1.default.skeletonText),
       style: {
         width
       },
-      className: (0, classnames_1.default)(className, styles_module_scss_1.default.skeletonText),
       children: rows
     }));
   }

package/dist/cjs/components/SkeletonText/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const PURPOSE: {
+    readonly Display: "display";
+    readonly Headline: "headline";
+    readonly Title: "title";
+    readonly Label: "label";
+    readonly Body: "body";
+};
+export declare const SIZE: {
+    readonly L: "l";
+    readonly M: "m";
+    readonly S: "s";
+};

package/dist/cjs/components/SkeletonText/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = exports.PURPOSE = void 0;
+exports.PURPOSE = {
+  Display: 'display',
+  Headline: 'headline',
+  Title: 'title',
+  Label: 'label',
+  Body: 'body'
+};
+exports.SIZE = {
+  L: 'l',
+  M: 'm',
+  S: 's'
+};

package/dist/cjs/components/SkeletonText/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { PURPOSE, SIZE } from './constants';
+type Purpose = ValueOf<typeof PURPOSE>;
+type Size = ValueOf<typeof SIZE>;
+export type Variant = `${Purpose}-${Size}`;
+export {};

package/dist/cjs/components/SkeletonText/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/components/SkeletonText/SkeletonText.d.ts

@@ -1,11 +1,14 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { SkeletonProps } from '../Skeleton';
-export type SkeletonTextProps = WithSupportProps<Omit<SkeletonProps, 'height'> & {
+import { Variant } from './types';
+export type SkeletonTextProps = WithSupportProps<Omit<SkeletonProps, 'height' | 'borderRadius'> & {
     /** Количество строк. */
     lines?: number;
     /** CSS-класс строки */
     rowClassName?: string;
     /** CSS-класс линии */
     lineClassName?: string;
+    /** Типографика */
+    typography?: Variant;
 }>;
-export declare function SkeletonText({ width, className, rowClassName, lineClassName, children, loading, lines, borderRadius, ...restProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ width, className, rowClassName, lineClassName, children, loading, lines, typography, ...restProps }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -16,14 +16,16 @@ import { useIsLoadingValue } from '../../hooks';
 import { Skeleton } from '../Skeleton';
 import styles from './styles.module.css';
 export function SkeletonText(_a) {
-    var { width, className, rowClassName, lineClassName, children, loading, lines = 3, borderRadius = '0.4em' } = _a, restProps = __rest(_a, ["width", "className", "rowClassName", "lineClassName", "children", "loading", "lines", "borderRadius"]);
+    var { width, className, rowClassName, lineClassName, children, loading, lines = 3, typography = 'body-m' } = _a, restProps = __rest(_a, ["width", "className", "rowClassName", "lineClassName", "children", "loading", "lines", "typography"]);
     const lineTestId = restProps['data-test-id'] ? `${restProps['data-test-id']}_line` : undefined;
     const rows = useMemo(() => Array(lines)
         .fill(true)
-        .map((_, index) => (_jsx("div", { className: cn(styles.skeletonTextRow, rowClassName), children: _jsx(Skeleton, { "data-test-id": lineTestId, loading: true, borderRadius: borderRadius, className: cn(styles.skeletonTextLine, lineClassName) }) }, index))), [lines, borderRadius, rowClassName, lineClassName, lineTestId]);
+        .map((_, index) => (_jsx("div", { className: cn(styles.skeletonTextRow, rowClassName), style: {
+            lineHeight: `var(--size-skeleton-text-line-height-${typography})`,
+        }, children: _jsx(Skeleton, { "data-test-id": lineTestId, loading: true, height: `var(--size-skeleton-text-font-size-${typography})`, borderRadius: `var(--radius-skeleton-text-${typography})`, className: cn(styles.skeletonTextLine, lineClassName) }) }, index))), [lines, rowClassName, lineTestId, typography, lineClassName]);
     const isLoading = useIsLoadingValue(loading);
     if (isLoading) {
-        return (_jsx("div", Object.assign({}, restProps, { style: { width }, className: cn(className, styles.skeletonText), children: rows })));
+        return (_jsx("div", Object.assign({}, restProps, { className: cn(className, styles.skeletonText), style: { width }, children: rows })));
     }
     return _jsx(_Fragment, { children: children });
 }

package/dist/esm/components/SkeletonText/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const PURPOSE: {
+    readonly Display: "display";
+    readonly Headline: "headline";
+    readonly Title: "title";
+    readonly Label: "label";
+    readonly Body: "body";
+};
+export declare const SIZE: {
+    readonly L: "l";
+    readonly M: "m";
+    readonly S: "s";
+};

package/dist/esm/components/SkeletonText/constants.js

@@ -0,0 +1,12 @@
+export const PURPOSE = {
+    Display: 'display',
+    Headline: 'headline',
+    Title: 'title',
+    Label: 'label',
+    Body: 'body',
+};
+export const SIZE = {
+    L: 'l',
+    M: 'm',
+    S: 's',
+};

package/dist/esm/components/SkeletonText/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { PURPOSE, SIZE } from './constants';
+type Purpose = ValueOf<typeof PURPOSE>;
+type Size = ValueOf<typeof SIZE>;
+export type Variant = `${Purpose}-${Size}`;
+export {};

package/dist/esm/components/SkeletonText/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Skeleton",
-  "version": "0.5.1",
+  "version": "0.6.1-preview-20b0f520.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,8 +36,8 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.5.0",
+    "@snack-uikit/utils": "3.5.1-preview-20b0f520.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "b9670e68c6af5fdd5dfceeae29ef3af8c89e5e6b"
+  "gitHead": "3d9f58d349ce6413d2242d7a42b8ba624815dcc0"
 }

package/src/components/SkeletonText/SkeletonText.tsx

@@ -6,15 +6,18 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { useIsLoadingValue } from '../../hooks';
 import { Skeleton, SkeletonProps } from '../Skeleton';
 import styles from './styles.module.scss';
+import { Variant } from './types';
 
 export type SkeletonTextProps = WithSupportProps<
-  Omit<SkeletonProps, 'height'> & {
+  Omit<SkeletonProps, 'height' | 'borderRadius'> & {
     /** Количество строк. */
     lines?: number;
     /** CSS-класс строки */
     rowClassName?: string;
     /** CSS-класс линии */
     lineClassName?: string;
+    /** Типографика */
+    typography?: Variant;
   }
 >;
 
@@ -26,7 +29,7 @@ export function SkeletonText({
   children,
   loading,
   lines = 3,
-  borderRadius = '0.4em',
+  typography = 'body-m',
   ...restProps
 }: SkeletonTextProps) {
   const lineTestId = restProps['data-test-id'] ? `${restProps['data-test-id']}_line` : undefined;
@@ -36,23 +39,30 @@ export function SkeletonText({
       Array(lines)
         .fill(true)
         .map((_, index) => (
-          <div key={index} className={cn(styles.skeletonTextRow, rowClassName)}>
+          <div
+            key={index}
+            className={cn(styles.skeletonTextRow, rowClassName)}
+            style={{
+              lineHeight: `var(--size-skeleton-text-line-height-${typography})`,
+            }}
+          >
             <Skeleton
               data-test-id={lineTestId}
               loading
-              borderRadius={borderRadius}
+              height={`var(--size-skeleton-text-font-size-${typography})`}
+              borderRadius={`var(--radius-skeleton-text-${typography})`}
               className={cn(styles.skeletonTextLine, lineClassName)}
             />
           </div>
         )),
-    [lines, borderRadius, rowClassName, lineClassName, lineTestId],
+    [lines, rowClassName, lineTestId, typography, lineClassName],
   );
 
   const isLoading = useIsLoadingValue(loading);
 
   if (isLoading) {
     return (
-      <div {...restProps} style={{ width }} className={cn(className, styles.skeletonText)}>
+      <div {...restProps} className={cn(className, styles.skeletonText)} style={{ width }}>
         {rows}
       </div>
     );

package/src/components/SkeletonText/constants.ts

@@ -0,0 +1,13 @@
+export const PURPOSE = {
+  Display: 'display',
+  Headline: 'headline',
+  Title: 'title',
+  Label: 'label',
+  Body: 'body',
+} as const;
+
+export const SIZE = {
+  L: 'l',
+  M: 'm',
+  S: 's',
+} as const;

package/src/components/SkeletonText/styles.module.scss

@@ -1,3 +1,5 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-skeleton';
+
 .skeletonText {
   position: relative;
 }

package/src/components/SkeletonText/types.ts

@@ -0,0 +1,8 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { PURPOSE, SIZE } from './constants';
+
+type Purpose = ValueOf<typeof PURPOSE>;
+type Size = ValueOf<typeof SIZE>;
+
+export type Variant = `${Purpose}-${Size}`;