@snack-uikit/counter 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2023-12-28)
+
+
+### Features
+
+* **FF-3960:** add new prop color ([3adaa4c](https://github.com/cloud-ru-tech/snack-uikit/commit/3adaa4c7cc3018607a50446caec2fb62dd680fd3))
+
+
+
+
+
+# 0.5.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.4.1 (2023-12-06)
 
 ### Only dependencies have been changed
@@ -122,7 +144,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## 0.2.6 (2023-06-23)
 
-**Note:** Version bump only for package @snack-uikit/counter
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.2.0](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/utils/CHANGELOG.md)
 
 
 

package/README.md

@@ -8,17 +8,17 @@
 ## Example
 
 ```typescript jsx
-import {Counter} from "@snack-uikit/counter";
+import { Counter } from "@snack-uikit/counter";
 
 <Counter
   value={42}
-  size={Counter.sizes.M}
+  size='m'
 />
 
 <Counter 
   value={101}
-  appearance={Counter.appearances.Critical}
-  variant={Counter.variants.CountPlus}
+  appearance='critical'
+  variant='count-plus'
   plusLimit={100}
 />
 ```
@@ -31,11 +31,12 @@ import {Counter} from "@snack-uikit/counter";
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | value* | `number` | - | Значение |
-| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"` | Appearance.Primary | Внешний вид |
-| variant | enum Variant: `"count"`, `"count-plus"`, `"count-k"` | Variant.Count | Вариант |
-| size | enum Size: `"s"`, `"m"` | Size.S | Размер |
+| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"` | primary | Внешний вид |
+| variant | enum Variant: `"count"`, `"count-plus"`, `"count-k"` | count | Вариант |
+| size | enum Size: `"s"`, `"m"` | s | Размер |
 | plusLimit | `number` | 10 | Порог сокращения значения в формат v+. Например `1500` -> `999+` для 1000 |
 | className | `string` | - | CSS-класс |
+| color | enum Color: `"accent"`, `"decor"` | accent | Семантический цвет |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Counter.d.ts

@@ -1,5 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size, Variant } from './constants';
+import { Appearance, Color, Size, Variant } from './types';
 export type CounterProps = WithSupportProps<{
     /** Значение */
     value: number;
@@ -13,11 +13,8 @@ export type CounterProps = WithSupportProps<{
     plusLimit?: number;
     /** CSS-класс */
     className?: string;
+    /** Семантический цвет */
+    color?: Color;
 }>;
 /** Компонент счетчик */
-export declare function Counter({ value, appearance, variant, size, plusLimit, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Counter {
-    var appearances: typeof Appearance;
-    var variants: typeof Variant;
-    var sizes: typeof Size;
-}
+export declare function Counter({ value, appearance, variant, size, plusLimit, color, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Counter.js

@@ -12,15 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Appearance, DEFAULT_PLUS_LIMIT, Size, Variant } from './constants';
+import { APPEARANCE, COLOR, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
 import classNames from './styles.module.css';
 import { formatValue } from './utils';
 /** Компонент счетчик */
 export function Counter(_a) {
-    var { value, appearance = Appearance.Primary, variant = Variant.Count, size = Size.S, plusLimit = DEFAULT_PLUS_LIMIT, className } = _a, rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "className"]);
+    var { value, appearance = APPEARANCE.Primary, variant = VARIANT.Count, size = SIZE.S, plusLimit = DEFAULT_PLUS_LIMIT, color = COLOR.Accent, className } = _a, rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "color", "className"]);
     const formattedValue = formatValue({ value, variant, plusLimit });
-    return (_jsx("div", Object.assign({ className: cn(classNames.counter, className) }, extractSupportProps(rest), { "data-size": size, "data-variant": variant, "data-appearance": appearance }, { children: formattedValue })));
+    return (_jsx("div", Object.assign({ className: cn(classNames.counter, className) }, extractSupportProps(rest), { "data-size": size, "data-variant": variant, "data-appearance": appearance, "data-color": color, children: formattedValue })));
 }
-Counter.appearances = Appearance;
-Counter.variants = Variant;
-Counter.sizes = Size;

package/dist/components/constants.d.ts

@@ -1,17 +1,21 @@
-export declare enum Appearance {
-    Primary = "primary",
-    Neutral = "neutral",
-    Red = "red"
-}
-export declare enum Variant {
-    Count = "count",
-    CountPlus = "count-plus",
-    CountK = "count-k"
-}
-export declare enum Size {
-    S = "s",
-    M = "m"
-}
+export declare const APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+};
+export declare const VARIANT: {
+    readonly Count: "count";
+    readonly CountPlus: "count-plus";
+    readonly CountK: "count-k";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const COLOR: {
+    readonly Accent: "accent";
+    readonly Decor: "decor";
+};
 export declare const DEFAULT_PLUS_LIMIT = 10;
 export declare const DEFAULT_KEY_LIMIT = 1000;
 export declare const DEFAULT_KEY_POSTFIX = "K";

package/dist/components/constants.js

@@ -1,20 +1,21 @@
-export var Appearance;
-(function (Appearance) {
-    Appearance["Primary"] = "primary";
-    Appearance["Neutral"] = "neutral";
-    Appearance["Red"] = "red";
-})(Appearance || (Appearance = {}));
-export var Variant;
-(function (Variant) {
-    Variant["Count"] = "count";
-    Variant["CountPlus"] = "count-plus";
-    Variant["CountK"] = "count-k";
-})(Variant || (Variant = {}));
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-})(Size || (Size = {}));
+export const APPEARANCE = {
+    Primary: 'primary',
+    Neutral: 'neutral',
+    Red: 'red',
+};
+export const VARIANT = {
+    Count: 'count',
+    CountPlus: 'count-plus',
+    CountK: 'count-k',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+};
+export const COLOR = {
+    Accent: 'accent',
+    Decor: 'decor',
+};
 export const DEFAULT_PLUS_LIMIT = 10;
 export const DEFAULT_KEY_LIMIT = 1000;
 export const DEFAULT_KEY_POSTFIX = 'K';

package/dist/components/styles.module.css

@@ -7,21 +7,36 @@
   width:max-content;
   border:0 solid transparent;
 }
-.counter[data-appearance=primary]{
+.counter[data-color=accent][data-appearance=primary]{
   color:var(--sys-primary-on-accent, #fdfbff);
   background-color:var(--sys-primary-accent-default, #794ed3);
   border-color:var(--sys-neutral-background1-level, #f9f9f9);
 }
-.counter[data-appearance=neutral]{
+.counter[data-color=accent][data-appearance=neutral]{
   color:var(--sys-neutral-on-accent, #fdfdfd);
   background-color:var(--sys-neutral-accent-default, #757575);
   border-color:var(--sys-neutral-background1-level, #f9f9f9);
 }
-.counter[data-appearance=red]{
+.counter[data-color=accent][data-appearance=red]{
   color:var(--sys-red-on-accent, #fffbfa);
   background-color:var(--sys-red-accent-default, #d93f2f);
   border-color:var(--sys-neutral-background1-level, #f9f9f9);
 }
+.counter[data-color=decor][data-appearance=primary]{
+  color:var(--sys-primary-text-main, #382a62);
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+}
+.counter[data-color=decor][data-appearance=neutral]{
+  color:var(--sys-neutral-text-main, #333333);
+  background-color:var(--sys-neutral-decor-default, #dedede);
+  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+}
+.counter[data-color=decor][data-appearance=red]{
+  color:var(--sys-red-text-main, #621c1e);
+  background-color:var(--sys-red-decor-default, #ffd8d0);
+  border-color:var(--sys-neutral-background1-level, #f9f9f9);
+}
 .counter[data-size=s]{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);
   font-weight:var(--sans-label-s-font-weight, Semibold);

package/dist/components/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, COLOR, SIZE, VARIANT } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;
+export type Color = ValueOf<typeof COLOR>;

package/dist/components/types.js

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

package/dist/components/utils.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Variant } from './constants';
+import { Variant } from './types';
 export declare function formatValue({ value, variant, plusLimit, }: {
     value: number;
     variant: Variant;

package/dist/components/utils.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, Variant } from './constants';
+import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, VARIANT } from './constants';
 import styles from './styles.module.css';
 export function formatValue({ value, variant, plusLimit, }) {
-    if (variant === Variant.Count) {
+    if (variant === VARIANT.Count) {
         return value;
     }
-    if (variant === Variant.CountPlus) {
-        return value < plusLimit ? (value) : (_jsxs(_Fragment, { children: [plusLimit - 1, _jsx("span", Object.assign({ className: styles.plus }, { children: "+" }))] }));
+    if (variant === VARIANT.CountPlus) {
+        return value < plusLimit ? (value) : (_jsxs(_Fragment, { children: [plusLimit - 1, _jsx("span", { className: styles.plus, children: "+" })] }));
     }
-    if (variant === Variant.CountK) {
-        return value < DEFAULT_KEY_LIMIT ? (value) : (_jsxs(_Fragment, { children: [Math.round(value / DEFAULT_KEY_LIMIT), _jsx("span", Object.assign({ className: styles.key }, { children: DEFAULT_KEY_POSTFIX }))] }));
+    if (variant === VARIANT.CountK) {
+        return value < DEFAULT_KEY_LIMIT ? (value) : (_jsxs(_Fragment, { children: [Math.round(value / DEFAULT_KEY_LIMIT), _jsx("span", { className: styles.key, children: DEFAULT_KEY_POSTFIX })] }));
     }
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Counter",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,8 +32,8 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/Counter.tsx

@@ -2,8 +2,9 @@ import cn from 'classnames';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Appearance, DEFAULT_PLUS_LIMIT, Size, Variant } from './constants';
+import { APPEARANCE, COLOR, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
 import classNames from './styles.module.scss';
+import { Appearance, Color, Size, Variant } from './types';
 import { formatValue } from './utils';
 
 export type CounterProps = WithSupportProps<{
@@ -19,15 +20,18 @@ export type CounterProps = WithSupportProps<{
   plusLimit?: number;
   /** CSS-класс */
   className?: string;
+  /** Семантический цвет */
+  color?: Color;
 }>;
 
 /** Компонент счетчик */
 export function Counter({
   value,
-  appearance = Appearance.Primary,
-  variant = Variant.Count,
-  size = Size.S,
+  appearance = APPEARANCE.Primary,
+  variant = VARIANT.Count,
+  size = SIZE.S,
   plusLimit = DEFAULT_PLUS_LIMIT,
+  color = COLOR.Accent,
   className,
   ...rest
 }: CounterProps) {
@@ -40,12 +44,9 @@ export function Counter({
       data-size={size}
       data-variant={variant}
       data-appearance={appearance}
+      data-color={color}
     >
       {formattedValue}
     </div>
   );
 }
-
-Counter.appearances = Appearance;
-Counter.variants = Variant;
-Counter.sizes = Size;

package/src/components/constants.ts

@@ -1,19 +1,24 @@
-export enum Appearance {
-  Primary = 'primary',
-  Neutral = 'neutral',
-  Red = 'red',
-}
+export const APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+  Red: 'red',
+} as const;
 
-export enum Variant {
-  Count = 'count',
-  CountPlus = 'count-plus',
-  CountK = 'count-k',
-}
+export const VARIANT = {
+  Count: 'count',
+  CountPlus: 'count-plus',
+  CountK: 'count-k',
+} as const;
 
-export enum Size {
-  S = 's',
-  M = 'm',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+} as const;
+
+export const COLOR = {
+  Accent: 'accent',
+  Decor: 'decor',
+} as const;
 
 export const DEFAULT_PLUS_LIMIT = 10;
 export const DEFAULT_KEY_LIMIT = 1000;

package/src/components/styles.module.scss

@@ -3,6 +3,7 @@
 $appearances: 'primary', 'neutral', 'red';
 $sizes: 's', 'm';
 $variants: 'count', 'count-plus', 'count-k';
+$colors: 'accent', 'decor';
 
 $value-typography: (
   s: $sans-label-s,
@@ -16,6 +17,14 @@ $key-typography: (
   s: $sans-label-s,
   m: $sans-label-l
 );
+$text-color: (
+  accent: 'on-accent',
+  decor: 'text-main'
+);
+$bg-color: (
+  accent: 'accent-default',
+  decor: 'decor-default'
+);
 
 .counter {
   display: inline-flex;
@@ -27,11 +36,18 @@ $key-typography: (
 
   border: 0 solid transparent;
 
-  @each $appearance in $appearances {
-    &[data-appearance='#{$appearance}'] {
-      color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
-      background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
-      border-color: $sys-neutral-background1-level;
+  @each $color in $colors {
+    @each $appearance in $appearances {
+      &[data-color='#{$color}'] {
+        &[data-appearance='#{$appearance}'] {
+          $text: simple-var($text-color, $color);
+          $background: simple-var($bg-color, $color);
+
+          color: simple-var($theme-variables, 'sys', $appearance, $text);
+          background-color: simple-var($theme-variables, 'sys', $appearance, $background);
+          border-color: $sys-neutral-background1-level;
+        }
+      }
     }
   }
 

package/src/components/types.ts

@@ -0,0 +1,8 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE, COLOR, SIZE, VARIANT } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;
+export type Color = ValueOf<typeof COLOR>;

package/src/components/utils.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 
-import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, Variant } from './constants';
+import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, VARIANT } from './constants';
 import styles from './styles.module.scss';
+import { Variant } from './types';
 
 export function formatValue({
   value,
@@ -12,11 +13,11 @@ export function formatValue({
   variant: Variant;
   plusLimit: number;
 }): ReactNode {
-  if (variant === Variant.Count) {
+  if (variant === VARIANT.Count) {
     return value;
   }
 
-  if (variant === Variant.CountPlus) {
+  if (variant === VARIANT.CountPlus) {
     return value < plusLimit ? (
       value
     ) : (
@@ -27,7 +28,7 @@ export function formatValue({
     );
   }
 
-  if (variant === Variant.CountK) {
+  if (variant === VARIANT.CountK) {
     return value < DEFAULT_KEY_LIMIT ? (
       value
     ) : (