@sima-land/moleculas 16.0.0-alpha.1 → 16.0.0-alpha.2

package/common/components/modifier/index.d.ts

@@ -0,0 +1,46 @@
+import { AnchorHTMLAttributes } from 'react';
+interface TextContent {
+    type: 'text';
+    text: string;
+}
+interface ColorContent {
+    type: 'color';
+    color: string;
+}
+interface ImageContent {
+    type: 'image';
+    src: string;
+}
+export type ModifierContent = TextContent | ColorContent | ImageContent;
+export interface ModifierProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Вывести выбранным. */
+    active?: boolean;
+    /** Вывести отключенным. */
+    disabled?: boolean;
+    /** Вывести зачеркнутым. */
+    crossedOut?: boolean;
+    /** Содержимое. */
+    content: ModifierContent;
+    /** Высота по дизайн-гайдам. */
+    size?: 's' | 'm';
+    /** Кол-во. */
+    count?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
+    count: number;
+};
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, 'data-testid': testId, ...props }: ModifierProps): JSX.Element;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): JSX.Element;
+export {};

package/common/components/modifier/index.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoreButton = exports.Modifier = void 0;
+const react_1 = __importStar(require("react"));
+const hint_1 = require("@sima-land/ui-nucleons/hint");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
+const cx = bind_1.default.bind(modifiers_module_scss_1.default);
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modifier(_a) {
+    var { size = 'm', active, crossedOut, disabled, content, count, className, 'data-testid': testId = 'modifier' } = _a, props = __rest(_a, ["size", "active", "crossedOut", "disabled", "content", "count", "className", 'data-testid']);
+    // текст хинта
+    const [hint, setHint] = (0, react_1.useState)('');
+    // состояние хинта
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // позиционирование хинта
+    const _b = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen }), { refs } = _b, floating = __rest(_b, ["refs"]);
+    // пользовательское взаимодействие для хинта
+    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
+    // определение необходимости активации хинта
+    (0, react_1.useEffect)(() => {
+        const textElement = refs.reference.current;
+        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
+            return;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
+        defineHint();
+        const observer = new ResizeObserver(defineHint);
+        observer.observe(textElement);
+        return () => observer.disconnect();
+    }, [content.text]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
+            content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
+            content.type === 'image' && (react_1.default.createElement("span", { className: cx('image'), role: 'banner', style: { backgroundImage: `url(${content.src})` } })),
+            content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
+            typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
+            crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
+                react_1.default.createElement("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)' })))),
+        hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
+}
+exports.Modifier = Modifier;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MoreButton(_a) {
+    var { count, className, 'data-testid': testId = 'more-modifiers' } = _a, rest = __rest(_a, ["count", "className", 'data-testid']);
+    return (react_1.default.createElement(Modifier, Object.assign({ role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438' }, rest, { className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId })));
+}
+exports.MoreButton = MoreButton;
+/**
+ * Определяет, обрезан ли текст в элементе.
+ * @param el Элемент.
+ * @return Обрезан ли текст в элементе.
+ */
+function isTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}

package/common/components/modifier/modifiers.module.scss

@@ -0,0 +1,121 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+
+.root {
+  display: inline-block;
+  text-decoration: none;
+  position: relative;
+  color: var(--modifier-text-color);
+  border-radius: 4px;
+  min-width: var(--modifier-size);
+  min-height: var(--modifier-size);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  --modifier-text-color: #{colors.$basic-gray87};
+  --modifier-border-width: 1px;
+  --modifier-border-color: #{colors.$basic-gray12};
+  &.active {
+    --modifier-border-color: #{colors.$basic-blue};
+  }
+  &:hover:not(.disabled) {
+    cursor: pointer;
+  }
+  &:hover:not(.disabled):not(.active) {
+    --modifier-border-width: 2px;
+  }
+  &.disabled {
+    --modifier-media-opacity: 0.24;
+    --modifier-overlay-color: rgba(0, 0, 0, 0.04);
+    --modifier-border-width: 0;
+    --modifier-text-color: #{colors.$basic-gray38};
+  }
+  &::after {
+    content: '';
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--modifier-border-width) var(--modifier-border-color);
+    background: var(--modifier-overlay-color);
+  }
+  &.more {
+    width: var(--modifier-size);
+    --modifier-text-color: #{colors.$basic-blue};
+    &.size-s {
+      --modifier-padding: 10px 0;
+    }
+    &.size-m {
+      --modifier-padding: 14px 0;
+    }
+  }
+}
+
+.size-s {
+  --modifier-size: 40px;
+  --modifier-padding: 10px;
+}
+
+.size-m {
+  --modifier-size: 48px;
+  --modifier-padding: 14px 15px;
+}
+
+.diagonal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.color,
+.image {
+  border-radius: inherit;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: var(--modifier-media-opacity);
+}
+
+.image {
+  background-position: center;
+  background-size: cover;
+}
+
+.text {
+  padding: var(--modifier-padding);
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  // ВАЖНО: чтобы диагональная черта была под текстом
+  position: relative;
+  z-index: 1;
+}
+
+.counter {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 14px;
+  height: 14px;
+  overflow: hidden;
+  padding: 0 4px;
+  background: colors.$additional-teal;
+  color: #fff;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-radius: 32px;
+  z-index: 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "16.0.0-alpha.1",
+  "version": "16.0.0-alpha.2",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
-    "@sima-land/ui-nucleons": "^45.0.0-alpha.0",
+    "@sima-land/ui-nucleons": "^45.0.0-alpha.3",
     "@sima-land/ui-quarks": "^3.6.0",
     "react": ">=17",
     "react-dom": ">=17"
@@ -56,7 +56,9 @@
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-svgo": "^6.5.1",
     "@svgr/webpack": "^6.5.1",
+    "@testing-library/dom": "^9.2.0",
     "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^29.4.0",
     "@types/lodash": "^4.14.191",