@itcase/ui-web 1.10.13 → 1.10.14
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 +2 -1
- package/dist/types/components/Segmented/Segmented.js +3 -1
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.d.ts +1 -0
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.js +10 -10
- package/dist/types/components/Segmented/stories/__mock__/index.d.ts +5 -0
- package/dist/types/components/Segmented/stories/__mock__/index.js +5 -0
- 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,T=r.useRef(null),_=r.useMemo(()=>new Map(u.map(e=>[e.value,r.createRef()])),[u]),A=r.useCallback(e=>{b&&b(e.value,v),y&&y(e)},[v,b,y]);r.useEffect(()=>{let e=0,r=0;const i=_.get(m.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),T.current?.style.setProperty("--segmented-active-width",`${e}px`),T.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[m,_]);const C=l.useAppearanceConfig(c,o,f),g=l.useDevicePropsGenerator(t,C),{fillActiveClass:S,fillActiveHoverClass:p,fillClass:P,fillHoverClass:z,labelTextActiveColor:h,labelTextActiveColorHover:F,labelTextColor:H,labelTextColorHover:I,labelTextSize:$,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:T,"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?p&&`fill_active_hover_${p}`:z&&`fill_hover_${z}`,l&&S&&`fill_active_${S}`),ref:_.get(r.value),onClick:()=>!f&&A(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:$,textColor:H,textColorActive:h,textColorActiveHover:F,textColorHover:I,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
|
+
"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,T=r.useRef(null),_=r.useMemo(()=>new Map(u.map(e=>[e.value,r.createRef()])),[u]),A=r.useCallback(e=>{b&&b(e.value,v),y&&y(e)},[v,b,y]);r.useEffect(()=>{let e=0,r=0;const i=_.get(m.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),T.current?.style.setProperty("--segmented-active-width",`${e}px`),T.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[m,_]);const C=l.useAppearanceConfig(c,o,f),g=l.useDevicePropsGenerator(t,C),{fillActiveClass:S,fillActiveHoverClass:p,fillClass:P,fillHoverClass:z,labelTextActiveColor:h,labelTextActiveColorHover:F,labelTextColor:H,labelTextColorHover:I,labelTextSize:$,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:T,"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?p&&`fill_active_hover_${p}`:z&&`fill_hover_${z}`,l&&S&&`fill_active_${S}`),ref:_.get(r.value),"data-testid":n&&r.dataTestId?`${n}${r.dataTestId}`:void 0,onClick:()=>!f&&A(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:$,textColor:H,textColorActive:h,textColorActiveHover:F,textColorHover:I,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 a,useEffect as o}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:T,activeSegment:_,segments:A,isDisabled:C,isSkeleton:p,setActiveSegment:S,onChange:g}=v,P=i(null),z=l(()=>new Map(A.map(e=>[e.value,t()])),[A]),h=a(e=>{g&&g(e.value,T),S&&S(e)},[T,g,S]);o(()=>{let e=0,r=0;const i=z.get(_.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`)},[_,z]);const F=s(f,u,C),H=n(v,F),{fillActiveClass:$,fillActiveHoverClass:I,fillClass:w,fillHoverClass:B,labelTextActiveColor:N,labelTextActiveColorHover:D,labelTextColor:Q,labelTextColorHover:L,labelTextSize:X,labelTextWrap:k,borderColorClass:M,borderTypeClass:W,borderWidthClass:j,iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,indicatorFillClass:K,shapeClass:O,sizeClass:R,widthClass:U}=H;return e("div",{className:c(y,"segmented",O&&`shape_${O}`,w&&`fill_${w}`,U&&`segmented_width_${U}`,R&&`segmented_size_${R}`,M&&`border-color_${M}`,j&&`border-width_${j}`,W&&`border_type_${W}`,p&&"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=_.value===i.value;return e("div",{className:c("segmented__item",!i.label&&"segmented__item_icon",R&&`segmented__item_size_${R}`,l&&"segmented__item_active",!l&&C&&"segmented__item_state_disabled",l&&C&&"segmented__item_active_state_disabled",l?I&&`fill_active_hover_${I}`:B&&`fill_hover_${B}`,l&&$&&`fill_active_${$}`),ref:z.get(i.value),"data-testid":x&&i.dataTestId?`${x}${i.dataTestId}`:void 0,onClick:()=>!C&&h(i),children:r("div",{className:c("segmented__item-label",R&&`segmented_size_${R}`),children:[i.iconBefore||i.iconBeforeActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconBeforeActive||i.iconBefore,isActive:l,isDisabled:C}):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:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconActive||i.icon,isActive:l,isDisabled:C}):null,i.iconAfter||i.iconAfterActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconAfterActive||i.iconAfter,isActive:l,isDisabled:C}):null]})},`${T}-${i.value}`)}),e("div",{className:c("segmented__indicator",K&&`fill_${K}`)})]})})})};export{f as Segmented,v as segmentedAppearance,u as segmentedConfig};
|
|
@@ -42,6 +42,7 @@ type SegmentedProps = SegmentedAppearanceProps & StyleAttributes & {
|
|
|
42
42
|
setActiveSegment?: (item: Segment) => void;
|
|
43
43
|
};
|
|
44
44
|
type Segment = {
|
|
45
|
+
dataTestId?: string;
|
|
45
46
|
icon?: IconProps['SvgImage'];
|
|
46
47
|
iconActive?: IconProps['SvgImage'];
|
|
47
48
|
iconAfter?: IconProps['SvgImage'];
|
|
@@ -57,5 +58,5 @@ type SegmentedAppearanceStyle = AppearanceRecord<AppearanceStyleKey, SegmentedAp
|
|
|
57
58
|
type SegmentedAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, SegmentedAppearanceProps, 'shape'>;
|
|
58
59
|
type SegmentedAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, SegmentedAppearanceProps, 'iconSize' | 'labelTextSize' | 'size'>;
|
|
59
60
|
type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>;
|
|
60
|
-
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
61
|
+
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'dataTestId' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
61
62
|
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 && item.dataTestId
|
|
46
|
+
? `${dataTestId}${item.dataTestId}`
|
|
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
|
};
|
|
@@ -3,6 +3,7 @@ declare const segmentedMock: {
|
|
|
3
3
|
value: string;
|
|
4
4
|
};
|
|
5
5
|
segments: {
|
|
6
|
+
dataTestId: string;
|
|
6
7
|
label: string;
|
|
7
8
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
8
9
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
@@ -10,6 +11,7 @@ declare const segmentedMock: {
|
|
|
10
11
|
}[];
|
|
11
12
|
};
|
|
12
13
|
declare const segmentedLabelMock: {
|
|
14
|
+
dataTestId: string;
|
|
13
15
|
label: string;
|
|
14
16
|
value: string;
|
|
15
17
|
}[];
|
|
@@ -21,18 +23,21 @@ declare const segmentedMockSize: {
|
|
|
21
23
|
14: {
|
|
22
24
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
23
25
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
26
|
+
dataTestId: string;
|
|
24
27
|
label: string;
|
|
25
28
|
value: string;
|
|
26
29
|
}[];
|
|
27
30
|
16: {
|
|
28
31
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
29
32
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
33
|
+
dataTestId: string;
|
|
30
34
|
label: string;
|
|
31
35
|
value: string;
|
|
32
36
|
}[];
|
|
33
37
|
20: {
|
|
34
38
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
35
39
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
40
|
+
dataTestId: string;
|
|
36
41
|
label: string;
|
|
37
42
|
value: string;
|
|
38
43
|
}[];
|
|
@@ -5,24 +5,28 @@ const segmentedMock = {
|
|
|
5
5
|
},
|
|
6
6
|
segments: [
|
|
7
7
|
{
|
|
8
|
+
dataTestId: '1Option',
|
|
8
9
|
label: 'Label 1',
|
|
9
10
|
iconAfter: icons24.Placeholder.Default,
|
|
10
11
|
iconBefore: icons24.Placeholder.Default,
|
|
11
12
|
value: '1',
|
|
12
13
|
},
|
|
13
14
|
{
|
|
15
|
+
dataTestId: '2Option',
|
|
14
16
|
label: 'Label 2',
|
|
15
17
|
iconAfter: icons24.Placeholder.Default,
|
|
16
18
|
iconBefore: icons24.Placeholder.Default,
|
|
17
19
|
value: '2',
|
|
18
20
|
},
|
|
19
21
|
{
|
|
22
|
+
dataTestId: '3Option',
|
|
20
23
|
label: 'Label 3',
|
|
21
24
|
iconAfter: icons24.Placeholder.Default,
|
|
22
25
|
iconBefore: icons24.Placeholder.Default,
|
|
23
26
|
value: '3',
|
|
24
27
|
},
|
|
25
28
|
{
|
|
29
|
+
dataTestId: '4Option',
|
|
26
30
|
label: 'Label 4',
|
|
27
31
|
iconAfter: icons24.Placeholder.Default,
|
|
28
32
|
iconBefore: icons24.Placeholder.Default,
|
|
@@ -31,6 +35,7 @@ const segmentedMock = {
|
|
|
31
35
|
],
|
|
32
36
|
};
|
|
33
37
|
const segmentedLabelMock = segmentedMock?.segments.map((segment) => ({
|
|
38
|
+
dataTestId: segment.dataTestId,
|
|
34
39
|
label: segment.label,
|
|
35
40
|
value: segment.value,
|
|
36
41
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.14",
|
|
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.14",
|
|
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": "f163770bae77f16cb99748b546e8608351d4d9da"
|
|
120
120
|
}
|