@itcase/ui-web 1.10.13 → 1.10.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/types/components/Segmented/Segmented.interface.d.ts +1 -1
- package/dist/types/components/Segmented/Segmented.js +3 -1
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.js +10 -10
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),l=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const t={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},o={appearance:t,setAppearance:e=>{o.appearance=e}};exports.Segmented=t=>{const{appearance:c,className:s,dataTestId:n,dataTour:d,name:v,activeSegment:m,segments:u,isDisabled:f,isSkeleton:x,setActiveSegment:y,onChange:b}=t,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),l=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const t={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},o={appearance:t,setAppearance:e=>{o.appearance=e}};exports.Segmented=t=>{const{appearance:c,className:s,dataTestId:n,dataTour:d,name:v,activeSegment:m,segments:u,isDisabled:f,isSkeleton:x,setActiveSegment:y,onChange:b}=t,_=r.useRef(null),A=r.useMemo(()=>new Map(u.map(e=>[e.value,r.createRef()])),[u]),T=r.useCallback(e=>{b&&b(e.value,v),y&&y(e)},[v,b,y]);r.useEffect(()=>{let e=0,r=0;const i=A.get(m.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),_.current?.style.setProperty("--segmented-active-width",`${e}px`),_.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[m,A]);const C=l.useAppearanceConfig(c,o,f),g=l.useDevicePropsGenerator(t,C),{fillActiveClass:p,fillActiveHoverClass:S,fillClass:P,fillHoverClass:z,labelTextActiveColor:h,labelTextActiveColorHover:F,labelTextColor:H,labelTextColorHover:$,labelTextSize:I,labelTextWrap:w,borderColorClass:j,borderTypeClass:q,borderWidthClass:B,iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,indicatorFillClass:k,shapeClass:M,sizeClass:X,widthClass:W}=g;return e.jsx("div",{className:i(s,"segmented",M&&`shape_${M}`,P&&`fill_${P}`,W&&`segmented_width_${W}`,X&&`segmented_size_${X}`,j&&`border-color_${j}`,B&&`border-width_${B}`,q&&`border_type_${q}`,x&&"skeleton"),ref:_,"data-testid":n,"data-tour":d,children:e.jsx("div",{className:"segmented__wrapper",children:e.jsxs("div",{className:i("segmented__wrapper-inner"),children:[u?.map(r=>{const l=m.value===r.value;return e.jsx("div",{className:i("segmented__item",!r.label&&"segmented__item_icon",X&&`segmented__item_size_${X}`,l&&"segmented__item_active",!l&&f&&"segmented__item_state_disabled",l&&f&&"segmented__item_active_state_disabled",l?S&&`fill_active_hover_${S}`:z&&`fill_hover_${z}`,l&&p&&`fill_active_${p}`),ref:A.get(r.value),"data-testid":n?`${n}${String(r.value).replace(/(^|[_-])([a-zA-Z0-9])/g,(e,r,i)=>i.toUpperCase())}Option`:void 0,onClick:()=>!f&&T(r),children:e.jsxs("div",{className:i("segmented__item-label",X&&`segmented_size_${X}`),children:[r.iconBefore||r.iconBeforeActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconBeforeActive||r.iconBefore,isActive:l,isDisabled:f}):null,r.label&&e.jsx(a.Text,{size:I,textColor:H,textColorActive:h,textColorActiveHover:F,textColorHover:$,textWrap:w,isActive:l,children:r.label}),r.icon||r.iconActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconActive||r.icon,isActive:l,isDisabled:f}):null,r.iconAfter||r.iconAfterActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconAfterActive||r.iconAfter,isActive:l,isDisabled:f}):null]})},`${v}-${r.value}`)}),e.jsx("div",{className:i("segmented__indicator",k&&`fill_${k}`)})]})})})},exports.segmentedAppearance=t,exports.segmentedConfig=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useMemo as l,createRef as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useMemo as l,createRef as t,useCallback as o,useEffect as a}from"react";import c from"clsx";import{useAppearanceConfig as s,useDevicePropsGenerator as n}from"@itcase/ui-core/hooks";import{I as d,T as m}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const v={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},u={appearance:v,setAppearance:e=>{u.appearance=e}},f=v=>{const{appearance:f,className:y,dataTestId:x,dataTour:b,name:_,activeSegment:T,segments:A,isDisabled:p,isSkeleton:C,setActiveSegment:g,onChange:S}=v,P=i(null),z=l(()=>new Map(A.map(e=>[e.value,t()])),[A]),h=o(e=>{S&&S(e.value,_),g&&g(e)},[_,S,g]);a(()=>{let e=0,r=0;const i=z.get(T.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),P.current?.style.setProperty("--segmented-active-width",`${e}px`),P.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[T,z]);const F=s(f,u,p),H=n(v,F),{fillActiveClass:$,fillActiveHoverClass:w,fillClass:I,fillHoverClass:B,labelTextActiveColor:N,labelTextActiveColorHover:D,labelTextColor:Q,labelTextColorHover:L,labelTextSize:X,labelTextWrap:k,borderColorClass:M,borderTypeClass:W,borderWidthClass:j,iconFill:q,iconFillActive:O,iconFillDisabled:U,iconSize:Z,indicatorFillClass:E,shapeClass:G,sizeClass:J,widthClass:K}=H;return e("div",{className:c(y,"segmented",G&&`shape_${G}`,I&&`fill_${I}`,K&&`segmented_width_${K}`,J&&`segmented_size_${J}`,M&&`border-color_${M}`,j&&`border-width_${j}`,W&&`border_type_${W}`,C&&"skeleton"),ref:P,"data-testid":x,"data-tour":b,children:e("div",{className:"segmented__wrapper",children:r("div",{className:c("segmented__wrapper-inner"),children:[A?.map(i=>{const l=T.value===i.value;return e("div",{className:c("segmented__item",!i.label&&"segmented__item_icon",J&&`segmented__item_size_${J}`,l&&"segmented__item_active",!l&&p&&"segmented__item_state_disabled",l&&p&&"segmented__item_active_state_disabled",l?w&&`fill_active_hover_${w}`:B&&`fill_hover_${B}`,l&&$&&`fill_active_${$}`),ref:z.get(i.value),"data-testid":x?`${x}${String(i.value).replace(/(^|[_-])([a-zA-Z0-9])/g,(e,r,i)=>i.toUpperCase())}Option`:void 0,onClick:()=>!p&&h(i),children:r("div",{className:c("segmented__item-label",J&&`segmented_size_${J}`),children:[i.iconBefore||i.iconBeforeActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:O,iconFillDisabled:U,iconSize:Z,SvgImage:l&&i.iconBeforeActive||i.iconBefore,isActive:l,isDisabled:p}):null,i.label&&e(m,{size:X,textColor:Q,textColorActive:N,textColorActiveHover:D,textColorHover:L,textWrap:k,isActive:l,children:i.label}),i.icon||i.iconActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:O,iconFillDisabled:U,iconSize:Z,SvgImage:l&&i.iconActive||i.icon,isActive:l,isDisabled:p}):null,i.iconAfter||i.iconAfterActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:O,iconFillDisabled:U,iconSize:Z,SvgImage:l&&i.iconAfterActive||i.iconAfter,isActive:l,isDisabled:p}):null]})},`${_}-${i.value}`)}),e("div",{className:c("segmented__indicator",E&&`fill_${E}`)})]})})})};export{f as Segmented,v as segmentedAppearance,u as segmentedConfig};
|
|
@@ -57,5 +57,5 @@ type SegmentedAppearanceStyle = AppearanceRecord<AppearanceStyleKey, SegmentedAp
|
|
|
57
57
|
type SegmentedAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, SegmentedAppearanceProps, 'shape'>;
|
|
58
58
|
type SegmentedAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, SegmentedAppearanceProps, 'iconSize' | 'labelTextSize' | 'size'>;
|
|
59
59
|
type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>;
|
|
60
|
-
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
60
|
+
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'dataTestId' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
61
61
|
export type { Segment, SegmentedAppearance, SegmentedAppearanceKey, SegmentedAppearanceShape, SegmentedAppearanceSize, SegmentedAppearanceStyle, SegmentedConfig, SegmentedGalleryStory, SegmentedProps, };
|
|
@@ -42,7 +42,9 @@ const Segmented = (props) => {
|
|
|
42
42
|
: fillActiveHoverClass &&
|
|
43
43
|
`fill_active_hover_${fillActiveHoverClass}`, isActive &&
|
|
44
44
|
fillActiveClass &&
|
|
45
|
-
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value),
|
|
45
|
+
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), "data-testid": dataTestId
|
|
46
|
+
? `${dataTestId}${String(item.value).replace(/(^|[_-])([a-zA-Z0-9])/g, (_, __, char) => char.toUpperCase())}Option`
|
|
47
|
+
: undefined, onClick: () => !isDisabled && onChangeValue(item), children: _jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
46
48
|
? item.iconBeforeActive || item.iconBefore
|
|
47
49
|
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
48
50
|
? item.iconAfterActive || item.iconAfter
|
|
@@ -18,6 +18,10 @@ const meta = {
|
|
|
18
18
|
};
|
|
19
19
|
export default meta;
|
|
20
20
|
export const Disabled = {
|
|
21
|
+
args: {
|
|
22
|
+
isDisabled: true,
|
|
23
|
+
setActiveSegment: storybookTest['fn'](),
|
|
24
|
+
},
|
|
21
25
|
play: async ({ args, canvas, step, userEvent }) => {
|
|
22
26
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
23
27
|
await step('Segmented items is disabled', async () => {
|
|
@@ -34,13 +38,12 @@ export const Disabled = {
|
|
|
34
38
|
await storybookTest.expect(setActiveSegment).not.toHaveBeenCalled();
|
|
35
39
|
});
|
|
36
40
|
},
|
|
37
|
-
args: {
|
|
38
|
-
isDisabled: true,
|
|
39
|
-
setActiveSegment: storybookTest['fn'](),
|
|
40
|
-
},
|
|
41
41
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
42
42
|
};
|
|
43
43
|
export const Skeleton = {
|
|
44
|
+
args: {
|
|
45
|
+
isSkeleton: true,
|
|
46
|
+
},
|
|
44
47
|
play: async ({ args, canvas, step }) => {
|
|
45
48
|
await step('Segmented renders with skeleton class', async () => {
|
|
46
49
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
@@ -48,12 +51,12 @@ export const Skeleton = {
|
|
|
48
51
|
await storybookTest.expect(segmented).toHaveClass('skeleton');
|
|
49
52
|
});
|
|
50
53
|
},
|
|
51
|
-
args: {
|
|
52
|
-
isSkeleton: true,
|
|
53
|
-
},
|
|
54
54
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
55
55
|
};
|
|
56
56
|
export const WithIcon = {
|
|
57
|
+
args: {
|
|
58
|
+
segments: segmentedIconMock,
|
|
59
|
+
},
|
|
57
60
|
play: async ({ args, canvas, step }) => {
|
|
58
61
|
await step('Segmented with icon in DOM', async () => {
|
|
59
62
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
@@ -63,8 +66,5 @@ export const WithIcon = {
|
|
|
63
66
|
await storybookTest.expect(iconEl).toBeInTheDocument();
|
|
64
67
|
});
|
|
65
68
|
},
|
|
66
|
-
args: {
|
|
67
|
-
segments: segmentedIconMock,
|
|
68
|
-
},
|
|
69
69
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
70
70
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.15",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@itcase/tokens-am": "^1.1.57",
|
|
54
54
|
"@itcase/tokens-baikal": "^1.1.54",
|
|
55
55
|
"@itcase/tokens-palette": "^1.1.50",
|
|
56
|
-
"@itcase/ui-core": "^1.10.
|
|
56
|
+
"@itcase/ui-core": "^1.10.15",
|
|
57
57
|
"@rc-component/tooltip": "^1.4.0",
|
|
58
58
|
"axios": "^1.16.1",
|
|
59
59
|
"clsx": "^2.1.1",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"storybook": "^10.4.1",
|
|
117
117
|
"typescript": "^6.0.3"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "604ead249375ebd4f4673633779c50e853e1824c"
|
|
120
120
|
}
|