@snack-uikit/status 0.7.2-preview-7eeb1bc1.0 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.8.0 (2024-12-17)
+
+
+### Features
+
+* **PDS-77:** added Spinner to Status ([12ed8bc](https://github.com/cloud-ru-tech/snack-uikit/commit/12ed8bcb0568aeb33c48b21751ac0e9bdd09d687))
+
+
+
+
+
+## 0.7.2 (2024-12-12)
+
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.6.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.7.1 (2024-11-14)
 
 

package/README.md

@@ -33,6 +33,7 @@ import { Status, StatusIndicator } from '@snack-uikit/status';
 | size | enum Size: `"xs"`, `"s"` | xs | Размер |
 | appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Внешний вид |
 | hasBackground | `boolean` | - | Наличие фона |
+| loading | `boolean` | - |  |
 | className | `string` | - | CSS-класс |
 ## StatusIndicator
 ### Props

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

@@ -10,6 +10,7 @@ export type StatusProps = WithSupportProps<{
     appearance?: Appearance;
     /** Наличие фона */
     hasBackground?: boolean;
+    loading?: boolean;
     className?: string;
 }>;
-export declare function Status({ label, size, appearance, hasBackground, className, ...rest }: StatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function Status({ label, size, appearance, hasBackground, loading, className, ...rest }: StatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Status/Status.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Status = Status;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const loaders_1 = require("@snack-uikit/loaders");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const StatusIndicator_1 = require("../StatusIndicator");
@@ -30,15 +31,19 @@ function Status(_a) {
       size = constants_2.SIZE.Xs,
       appearance = constants_1.APPEARANCE.Primary,
       hasBackground,
+      loading,
       className
     } = _a,
-    rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "className"]);
+    rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "loading", "className"]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
   }, (0, utils_1.extractSupportProps)(rest), {
     "data-size": size,
     "data-has-background": hasBackground || undefined,
-    children: [(0, jsx_runtime_1.jsx)(StatusIndicator_1.StatusIndicator, {
+    "data-appearance": loading ? constants_1.APPEARANCE.Neutral : appearance,
+    children: [loading ? (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {
+      size: constants_2.LOADER_SIZE_MAP[size]
+    }) : (0, jsx_runtime_1.jsx)(StatusIndicator_1.StatusIndicator, {
       appearance: appearance,
       size: constants_2.STATUS_INDICATOR_SIZE_MAP[size]
     }), (0, jsx_runtime_1.jsx)("span", {

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

@@ -6,3 +6,7 @@ export declare const STATUS_INDICATOR_SIZE_MAP: {
     xs: "xs";
     s: "s";
 };
+export declare const LOADER_SIZE_MAP: {
+    readonly xs: "xxs";
+    readonly s: "xs";
+};

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STATUS_INDICATOR_SIZE_MAP = exports.SIZE = void 0;
+exports.LOADER_SIZE_MAP = exports.STATUS_INDICATOR_SIZE_MAP = exports.SIZE = void 0;
 const constants_1 = require("../StatusIndicator/constants");
 exports.SIZE = {
   Xs: 'xs',
@@ -12,4 +12,8 @@ exports.SIZE = {
 exports.STATUS_INDICATOR_SIZE_MAP = {
   [exports.SIZE.Xs]: constants_1.SIZE.Xs,
   [exports.SIZE.S]: constants_1.SIZE.S
+};
+exports.LOADER_SIZE_MAP = {
+  [exports.SIZE.Xs]: 'xxs',
+  [exports.SIZE.S]: 'xs'
 };

package/dist/cjs/components/Status/styles.module.css

@@ -2,9 +2,60 @@
   display:inline-flex;
   align-items:center;
 }
-.container[data-has-background]{
+.container[data-has-background][data-appearance=primary]{
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.container[data-has-background][data-appearance=primary] .label{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.container[data-has-background][data-appearance=neutral]{
   background-color:var(--sys-neutral-decor-default, #dde0ea);
 }
+.container[data-has-background][data-appearance=neutral] .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.container[data-has-background][data-appearance=red]{
+  background-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.container[data-has-background][data-appearance=red] .label{
+  color:var(--sys-red-text-support, #ae514c);
+}
+.container[data-has-background][data-appearance=orange]{
+  background-color:var(--sys-orange-decor-default, #fed8b8);
+}
+.container[data-has-background][data-appearance=orange] .label{
+  color:var(--sys-orange-text-support, #bb733e);
+}
+.container[data-has-background][data-appearance=blue]{
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+}
+.container[data-has-background][data-appearance=blue] .label{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.container[data-has-background][data-appearance=violet]{
+  background-color:var(--sys-violet-decor-default, #e6dcf3);
+}
+.container[data-has-background][data-appearance=violet] .label{
+  color:var(--sys-violet-text-support, #8c639b);
+}
+.container[data-has-background][data-appearance=pink]{
+  background-color:var(--sys-pink-decor-default, #f5d9e1);
+}
+.container[data-has-background][data-appearance=pink] .label{
+  color:var(--sys-pink-text-support, #ae5e80);
+}
+.container[data-has-background][data-appearance=yellow]{
+  background-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.container[data-has-background][data-appearance=yellow] .label{
+  color:var(--sys-yellow-text-support, #b78c32);
+}
+.container[data-has-background][data-appearance=green]{
+  background-color:var(--sys-green-decor-default, #d2ead0);
+}
+.container[data-has-background][data-appearance=green] .label{
+  color:var(--sys-green-text-support, #55915a);
+}
 .container[data-has-background][data-size=xs]{
   height:var(--size-status-background-container-xs, 16px);
   padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);

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

@@ -10,6 +10,7 @@ export type StatusProps = WithSupportProps<{
     appearance?: Appearance;
     /** Наличие фона */
     hasBackground?: boolean;
+    loading?: boolean;
     className?: string;
 }>;
-export declare function Status({ label, size, appearance, hasBackground, className, ...rest }: StatusProps): import("react/jsx-runtime").JSX.Element;
+export declare function Status({ label, size, appearance, hasBackground, loading, className, ...rest }: StatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Status/Status.js

@@ -11,12 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE } from '../../constants';
 import { StatusIndicator } from '../StatusIndicator';
-import { SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
+import { LOADER_SIZE_MAP, SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function Status(_a) {
-    var { label, size = SIZE.Xs, appearance = APPEARANCE.Primary, hasBackground, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined, children: [_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] }), _jsx("span", { className: styles.label, children: label })] })));
+    var { label, size = SIZE.Xs, appearance = APPEARANCE.Primary, hasBackground, loading, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "loading", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined, "data-appearance": loading ? APPEARANCE.Neutral : appearance, children: [loading ? (_jsx(Spinner, { size: LOADER_SIZE_MAP[size] })) : (_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] })), _jsx("span", { className: styles.label, children: label })] })));
 }

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

@@ -6,3 +6,7 @@ export declare const STATUS_INDICATOR_SIZE_MAP: {
     xs: "xs";
     s: "s";
 };
+export declare const LOADER_SIZE_MAP: {
+    readonly xs: "xxs";
+    readonly s: "xs";
+};

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

@@ -7,3 +7,7 @@ export const STATUS_INDICATOR_SIZE_MAP = {
     [SIZE.Xs]: StatusIndicatorSize.Xs,
     [SIZE.S]: StatusIndicatorSize.S,
 };
+export const LOADER_SIZE_MAP = {
+    [SIZE.Xs]: 'xxs',
+    [SIZE.S]: 'xs',
+};

package/dist/esm/components/Status/styles.module.css

@@ -2,9 +2,60 @@
   display:inline-flex;
   align-items:center;
 }
-.container[data-has-background]{
+.container[data-has-background][data-appearance=primary]{
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.container[data-has-background][data-appearance=primary] .label{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.container[data-has-background][data-appearance=neutral]{
   background-color:var(--sys-neutral-decor-default, #dde0ea);
 }
+.container[data-has-background][data-appearance=neutral] .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.container[data-has-background][data-appearance=red]{
+  background-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.container[data-has-background][data-appearance=red] .label{
+  color:var(--sys-red-text-support, #ae514c);
+}
+.container[data-has-background][data-appearance=orange]{
+  background-color:var(--sys-orange-decor-default, #fed8b8);
+}
+.container[data-has-background][data-appearance=orange] .label{
+  color:var(--sys-orange-text-support, #bb733e);
+}
+.container[data-has-background][data-appearance=blue]{
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+}
+.container[data-has-background][data-appearance=blue] .label{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.container[data-has-background][data-appearance=violet]{
+  background-color:var(--sys-violet-decor-default, #e6dcf3);
+}
+.container[data-has-background][data-appearance=violet] .label{
+  color:var(--sys-violet-text-support, #8c639b);
+}
+.container[data-has-background][data-appearance=pink]{
+  background-color:var(--sys-pink-decor-default, #f5d9e1);
+}
+.container[data-has-background][data-appearance=pink] .label{
+  color:var(--sys-pink-text-support, #ae5e80);
+}
+.container[data-has-background][data-appearance=yellow]{
+  background-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.container[data-has-background][data-appearance=yellow] .label{
+  color:var(--sys-yellow-text-support, #b78c32);
+}
+.container[data-has-background][data-appearance=green]{
+  background-color:var(--sys-green-decor-default, #d2ead0);
+}
+.container[data-has-background][data-appearance=green] .label{
+  color:var(--sys-green-text-support, #55915a);
+}
 .container[data-has-background][data-size=xs]{
   height:var(--size-status-background-container-xs, 16px);
   padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Status",
-  "version": "0.7.2-preview-7eeb1bc1.0",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,8 +36,9 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.5.1-preview-7eeb1bc1.0",
+    "@snack-uikit/loaders": "0.9.0",
+    "@snack-uikit/utils": "3.6.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "0d9e8006b8465b19a5b96b418ee2edbe536f1e58"
+  "gitHead": "33a6d8bc270bd11dec3e4834f2ba8e97c57d5c15"
 }

package/src/components/Status/Status.tsx

@@ -1,11 +1,12 @@
 import cn from 'classnames';
 
+import { Spinner } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE } from '../../constants';
 import { Appearance } from '../../types';
 import { StatusIndicator } from '../StatusIndicator';
-import { SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
+import { LOADER_SIZE_MAP, SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 import { Size } from './types';
 
@@ -18,6 +19,7 @@ export type StatusProps = WithSupportProps<{
   appearance?: Appearance;
   /** Наличие фона */
   hasBackground?: boolean;
+  loading?: boolean;
   className?: string;
 }>;
 
@@ -26,6 +28,7 @@ export function Status({
   size = SIZE.Xs,
   appearance = APPEARANCE.Primary,
   hasBackground,
+  loading,
   className,
   ...rest
 }: StatusProps) {
@@ -35,8 +38,13 @@ export function Status({
       {...extractSupportProps(rest)}
       data-size={size}
       data-has-background={hasBackground || undefined}
+      data-appearance={loading ? APPEARANCE.Neutral : appearance}
     >
-      <StatusIndicator appearance={appearance} size={STATUS_INDICATOR_SIZE_MAP[size]} />
+      {loading ? (
+        <Spinner size={LOADER_SIZE_MAP[size]} />
+      ) : (
+        <StatusIndicator appearance={appearance} size={STATUS_INDICATOR_SIZE_MAP[size]} />
+      )}
       <span className={styles.label}>{label}</span>
     </div>
   );

package/src/components/Status/constants.ts

@@ -9,3 +9,8 @@ export const STATUS_INDICATOR_SIZE_MAP = {
   [SIZE.Xs]: StatusIndicatorSize.Xs,
   [SIZE.S]: StatusIndicatorSize.S,
 };
+
+export const LOADER_SIZE_MAP = {
+  [SIZE.Xs]: 'xxs',
+  [SIZE.S]: 'xs',
+} as const;

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

@@ -5,13 +5,22 @@ $label-typography: (
   's': styles-tokens-status.$sans-label-m
 );
 $sizes: 'xs', 's';
+$appearances: 'primary', 'neutral', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
 
 .container {
   display: inline-flex;
   align-items: center;
 
   &[data-has-background] {
-    background-color: styles-tokens-status.$sys-neutral-decor-default;
+    @each $appearance in $appearances {
+      &[data-appearance='#{$appearance}'] {
+        background-color: styles-tokens-status.simple-var(styles-tokens-status.$theme-variables, 'sys', $appearance, 'decor-default');
+  
+        .label {
+          color: styles-tokens-status.simple-var(styles-tokens-status.$theme-variables, 'sys', $appearance, 'text-support')
+        }
+      }
+    }
 
     @each $size in $sizes {
       &[data-size='#{$size}'] {