@alfalab/core-components-steps 3.0.2 → 3.0.3-alfasans
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/Component.d.ts +1 -1
- package/Component.js.map +1 -1
- package/components/step/Component.d.ts +1 -1
- package/components/step/Component.js.map +1 -1
- package/components/step/index.css +38 -35
- package/components/step/index.module.css.js +1 -1
- package/components/step/index.module.css.js.map +1 -1
- package/components/step-indicator/Component.d.ts +1 -1
- package/components/step-indicator/index.css +1 -1
- package/components/step-indicator/index.module.css.js +1 -1
- package/components/step-indicator/index.module.css.js.map +1 -1
- package/cssm/Component.d.ts +1 -1
- package/cssm/Component.js.map +1 -1
- package/cssm/components/step/Component.d.ts +1 -1
- package/cssm/components/step/Component.js.map +1 -1
- package/cssm/components/step/index.module.css +7 -4
- package/cssm/components/step-indicator/Component.d.ts +1 -1
- package/cssm/types/common-props.d.ts +1 -1
- package/esm/Component.d.ts +1 -1
- package/esm/Component.js.map +1 -1
- package/esm/components/step/Component.d.ts +1 -1
- package/esm/components/step/Component.js.map +1 -1
- package/esm/components/step/index.css +38 -35
- package/esm/components/step/index.module.css.js +1 -1
- package/esm/components/step/index.module.css.js.map +1 -1
- package/esm/components/step-indicator/Component.d.ts +1 -1
- package/esm/components/step-indicator/index.css +1 -1
- package/esm/components/step-indicator/index.module.css.js +1 -1
- package/esm/components/step-indicator/index.module.css.js.map +1 -1
- package/esm/index.css +2 -2
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/types/common-props.d.ts +1 -1
- package/index.css +2 -2
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +1 -1
- package/modern/Component.js.map +1 -1
- package/modern/components/step/Component.d.ts +1 -1
- package/modern/components/step/Component.js.map +1 -1
- package/modern/components/step/index.css +38 -35
- package/modern/components/step/index.module.css.js +1 -1
- package/modern/components/step/index.module.css.js.map +1 -1
- package/modern/components/step-indicator/Component.d.ts +1 -1
- package/modern/components/step-indicator/index.css +1 -1
- package/modern/components/step-indicator/index.module.css.js +1 -1
- package/modern/components/step-indicator/index.module.css.js.map +1 -1
- package/modern/index.css +2 -2
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/types/common-props.d.ts +1 -1
- package/moderncssm/Component.d.ts +1 -1
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/step/Component.d.ts +1 -1
- package/moderncssm/components/step/Component.js.map +1 -1
- package/moderncssm/components/step/index.module.css +4 -2
- package/moderncssm/components/step-indicator/Component.d.ts +1 -1
- package/moderncssm/types/common-props.d.ts +1 -1
- package/package.json +5 -5
- package/src/components/step/index.module.css +1 -1
- package/src/components/step-indicator/index.module.css +1 -1
- package/src/index.module.css +1 -1
- package/types/common-props.d.ts +1 -1
package/Component.d.ts
CHANGED
package/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":";;;;;;;;;;;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
@@ -23,8 +23,9 @@
|
|
|
23
23
|
--gap-16: var(--gap-m);
|
|
24
24
|
}
|
|
25
25
|
:root {
|
|
26
|
-
--font-family-
|
|
27
|
-
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
26
|
+
--font-family-alfasans:
|
|
27
|
+
'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
28
|
+
Helvetica, sans-serif;
|
|
28
29
|
}
|
|
29
30
|
:root {
|
|
30
31
|
--focus-color: var(--color-light-status-info);
|
|
@@ -33,44 +34,45 @@
|
|
|
33
34
|
--steps-option-svg-color: var(--color-light-status-positive);
|
|
34
35
|
--steps-dash-border: 2px solid var(--color-light-status-positive);
|
|
35
36
|
}
|
|
36
|
-
.
|
|
37
|
+
.steps__step_1cth5 {
|
|
37
38
|
display: flex;
|
|
38
39
|
outline: none;
|
|
39
40
|
}
|
|
40
|
-
.
|
|
41
|
+
.steps__step_1cth5.steps__horizontal_1cth5 {
|
|
41
42
|
flex-grow: 1;
|
|
42
43
|
}
|
|
43
|
-
.
|
|
44
|
+
.steps__step_1cth5:not(.steps__vertical_1cth5) {
|
|
44
45
|
align-items: center;
|
|
45
46
|
}
|
|
46
|
-
.
|
|
47
|
+
.steps__step_1cth5:last-of-type .steps__textWrapper_1cth5.steps__vertical_1cth5 {
|
|
47
48
|
margin-bottom: var(--gap-0);
|
|
48
49
|
}
|
|
49
|
-
.
|
|
50
|
+
.steps__step_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):hover {
|
|
50
51
|
cursor: pointer;
|
|
51
52
|
}
|
|
52
|
-
.
|
|
53
|
+
.steps__step_1cth5.steps__disabled_1cth5:hover .steps__text_1cth5 {
|
|
53
54
|
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
|
|
54
55
|
background: initial;
|
|
55
56
|
}
|
|
56
|
-
.
|
|
57
|
+
.steps__step_1cth5.steps__disabled_1cth5 .steps__indicator_1cth5 {
|
|
57
58
|
cursor: inherit;
|
|
58
59
|
}
|
|
59
|
-
.
|
|
60
|
+
.steps__indicator_1cth5 {
|
|
60
61
|
cursor: pointer;
|
|
61
62
|
display: flex;
|
|
62
63
|
align-items: center;
|
|
63
64
|
margin-right: var(--gap-4);
|
|
64
65
|
}
|
|
65
|
-
.
|
|
66
|
+
.steps__indicator_1cth5.steps__vertical_1cth5 {
|
|
66
67
|
flex-direction: column;
|
|
67
68
|
margin-right: var(--gap-8);
|
|
68
69
|
}
|
|
69
|
-
.
|
|
70
|
+
.steps__option_1cth5 {
|
|
70
71
|
font-size: 14px;
|
|
71
72
|
line-height: 20px;
|
|
72
73
|
font-weight: 700;
|
|
73
|
-
|
|
74
|
+
letter-spacing: 0.47px;
|
|
75
|
+
font-family: var(--font-family-alfasans);
|
|
74
76
|
|
|
75
77
|
display: flex;
|
|
76
78
|
align-items: center;
|
|
@@ -81,19 +83,19 @@
|
|
|
81
83
|
height: 24px;
|
|
82
84
|
border-radius: var(--border-radius-circle);
|
|
83
85
|
}
|
|
84
|
-
.
|
|
86
|
+
.steps__option_1cth5.steps__vertical_1cth5 {
|
|
85
87
|
margin-top: var(--gap-8);
|
|
86
88
|
}
|
|
87
|
-
.
|
|
89
|
+
.steps__dash_1cth5 {
|
|
88
90
|
flex: 1 1 auto;
|
|
89
91
|
min-width: 24px;
|
|
90
92
|
border-top: 2px solid var(--color-light-neutral-translucent-300);
|
|
91
93
|
margin-right: var(--gap-8);
|
|
92
94
|
}
|
|
93
|
-
.
|
|
95
|
+
.steps__dash_1cth5.steps__completed_1cth5 {
|
|
94
96
|
border-top: var(--steps-dash-border);
|
|
95
97
|
}
|
|
96
|
-
.
|
|
98
|
+
.steps__dash_1cth5.steps__vertical_1cth5 {
|
|
97
99
|
min-width: 0;
|
|
98
100
|
min-width: initial;
|
|
99
101
|
min-height: 8px;
|
|
@@ -102,23 +104,24 @@
|
|
|
102
104
|
border-left: 2px solid var(--color-light-neutral-translucent-300);
|
|
103
105
|
border-top: none;
|
|
104
106
|
}
|
|
105
|
-
.
|
|
107
|
+
.steps__dash_1cth5.steps__completed_1cth5.steps__vertical_1cth5 {
|
|
106
108
|
border-left: var(--steps-dash-border);
|
|
107
109
|
}
|
|
108
|
-
.
|
|
110
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5 {
|
|
109
111
|
min-height: 48px;
|
|
110
112
|
}
|
|
111
|
-
.
|
|
113
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5.steps__gap-24_1cth5 {
|
|
112
114
|
margin-bottom: var(--gap-8);
|
|
113
115
|
}
|
|
114
|
-
.
|
|
116
|
+
.steps__textWrapper_1cth5.steps__vertical_1cth5.steps__gap-32_1cth5 {
|
|
115
117
|
margin-bottom: var(--gap-16);
|
|
116
118
|
}
|
|
117
|
-
.
|
|
119
|
+
.steps__text_1cth5 {
|
|
118
120
|
font-size: 16px;
|
|
119
121
|
line-height: 24px;
|
|
120
122
|
font-weight: 400;
|
|
121
|
-
|
|
123
|
+
letter-spacing: -0.24px;
|
|
124
|
+
font-family: var(--font-family-alfasans);
|
|
122
125
|
|
|
123
126
|
transition: background 0.2s;
|
|
124
127
|
padding: var(--gap-8);
|
|
@@ -127,24 +130,24 @@
|
|
|
127
130
|
height: -moz-min-content;
|
|
128
131
|
height: min-content;
|
|
129
132
|
}
|
|
130
|
-
.
|
|
133
|
+
.steps__text_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):hover {
|
|
131
134
|
background: var(--color-light-transparent-default-hover);
|
|
132
135
|
}
|
|
133
|
-
.
|
|
136
|
+
.steps__text_1cth5.steps__interactive_1cth5:not(.steps__disabled_1cth5):active {
|
|
134
137
|
background: var(--color-light-transparent-default-press);
|
|
135
138
|
}
|
|
136
|
-
.
|
|
139
|
+
.steps__focused_1cth5 {
|
|
137
140
|
outline: var(--gap-2) solid var(--focus-color);
|
|
138
141
|
outline-offset: var(--gap-2);
|
|
139
142
|
}
|
|
140
|
-
.
|
|
143
|
+
.steps__selected_1cth5 .steps__text_1cth5 {
|
|
141
144
|
color: var(--color-light-text-primary);
|
|
142
145
|
}
|
|
143
|
-
.
|
|
146
|
+
.steps__selected_1cth5 .steps__option_1cth5 {
|
|
144
147
|
color: var(--color-light-text-primary-inverted);
|
|
145
148
|
background: var(--color-light-neutral-translucent-1300);
|
|
146
149
|
}
|
|
147
|
-
.
|
|
150
|
+
.steps__checkbox_1cth5 {
|
|
148
151
|
display: flex;
|
|
149
152
|
justify-content: center;
|
|
150
153
|
align-items: center;
|
|
@@ -153,26 +156,26 @@
|
|
|
153
156
|
height: 20px;
|
|
154
157
|
border: 2px solid var(--color-light-neutral-translucent-300);
|
|
155
158
|
}
|
|
156
|
-
.
|
|
159
|
+
.steps__dot_1cth5 {
|
|
157
160
|
width: 10px;
|
|
158
161
|
height: 10px;
|
|
159
162
|
border-radius: var(--border-radius-circle);
|
|
160
163
|
background: var(--color-light-neutral-translucent-300);
|
|
161
164
|
}
|
|
162
|
-
.
|
|
165
|
+
.steps__selected_1cth5 .steps__checkbox_1cth5 {
|
|
163
166
|
border: 2px solid var(--color-light-neutral-translucent-1300);
|
|
164
167
|
}
|
|
165
|
-
.
|
|
168
|
+
.steps__selected_1cth5 .steps__checkbox_1cth5 .steps__dot_1cth5 {
|
|
166
169
|
background: var(--color-light-neutral-translucent-1300);
|
|
167
170
|
}
|
|
168
|
-
.
|
|
171
|
+
.steps__option_1cth5:not(.steps__error_1cth5).steps__unordered_1cth5 {
|
|
169
172
|
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
|
|
170
173
|
background: initial;
|
|
171
174
|
}
|
|
172
|
-
.
|
|
175
|
+
.steps__completedIndicator_1cth5 > [class*='positive'] {
|
|
173
176
|
color: var(--steps-option-svg-color);
|
|
174
177
|
background-color: var(--steps-option-svg-color);
|
|
175
178
|
}
|
|
176
|
-
.
|
|
179
|
+
.steps__fullWidth_1cth5 {
|
|
177
180
|
width: 100%;
|
|
178
181
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"step":"
|
|
5
|
+
var styles = {"step":"steps__step_1cth5","horizontal":"steps__horizontal_1cth5","vertical":"steps__vertical_1cth5","textWrapper":"steps__textWrapper_1cth5","interactive":"steps__interactive_1cth5","disabled":"steps__disabled_1cth5","text":"steps__text_1cth5","indicator":"steps__indicator_1cth5","option":"steps__option_1cth5","dash":"steps__dash_1cth5","completed":"steps__completed_1cth5","gap-24":"steps__gap-24_1cth5","gap-32":"steps__gap-32_1cth5","focused":"steps__focused_1cth5","selected":"steps__selected_1cth5","checkbox":"steps__checkbox_1cth5","dot":"steps__dot_1cth5","error":"steps__error_1cth5","unordered":"steps__unordered_1cth5","completedIndicator":"steps__completedIndicator_1cth5","fullWidth":"steps__fullWidth_1cth5"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --steps-option-svg-color: var(--color-light-status-positive);\n --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n display: flex;\n outline: none;\n\n &.horizontal {\n flex-grow: 1;\n }\n\n &:not(.vertical) {\n align-items: center;\n }\n\n &:last-of-type .textWrapper.vertical {\n margin-bottom: var(--gap-0);\n }\n}\n\n.step.interactive:not(.disabled):hover {\n cursor: pointer;\n}\n\n.step.disabled:hover {\n & .text {\n background: unset;\n }\n}\n\n.step.disabled {\n & .indicator {\n cursor: unset;\n }\n}\n\n.indicator {\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-right: var(--gap-4);\n\n &.vertical {\n flex-direction: column;\n margin-right: var(--gap-8);\n }\n}\n\n.option {\n @mixin accent_primary_small;\n\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-light-text-primary);\n background: var(--color-light-neutral-translucent-300);\n min-width: 24px;\n height: 24px;\n border-radius: var(--border-radius-circle);\n\n &.vertical {\n margin-top: var(--gap-8);\n }\n}\n\n.dash {\n flex: 1 1 auto;\n min-width: 24px;\n border-top: 2px solid var(--color-light-neutral-translucent-300);\n margin-right: var(--gap-8);\n\n &.completed {\n border-top: var(--steps-dash-border);\n }\n\n &.vertical {\n min-width: unset;\n min-height: 8px;\n margin-right: var(--gap-0);\n margin-top: var(--gap-8);\n border-left: 2px solid var(--color-light-neutral-translucent-300);\n border-top: none;\n }\n\n &.completed.vertical {\n border-left: var(--steps-dash-border);\n }\n}\n\n.textWrapper {\n &.vertical {\n min-height: 48px;\n\n &.gap-24 {\n margin-bottom: var(--gap-8);\n }\n\n &.gap-32 {\n margin-bottom: var(--gap-16);\n }\n }\n}\n\n.text {\n @mixin paragraph_primary_medium;\n\n transition: background 0.2s;\n padding: var(--gap-8);\n color: var(--color-light-text-primary);\n border-radius: var(--gap-8);\n height: min-content;\n\n &.interactive:not(.disabled) {\n &:hover {\n background: var(--color-light-transparent-default-hover);\n }\n\n &:active {\n background: var(--color-light-transparent-default-press);\n }\n }\n}\n\n.focused {\n outline: var(--gap-2) solid var(--focus-color);\n outline-offset: var(--gap-2);\n}\n\n.selected {\n & .text {\n color: var(--color-light-text-primary);\n }\n\n & .option {\n color: var(--color-light-text-primary-inverted);\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.checkbox {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-circle);\n width: 20px;\n height: 20px;\n border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n width: 10px;\n height: 10px;\n border-radius: var(--border-radius-circle);\n background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n border: 2px solid var(--color-light-neutral-translucent-1300);\n\n & .dot {\n background: var(--color-light-neutral-translucent-1300);\n }\n}\n\n.option:not(.error).unordered {\n background: unset;\n}\n\n.completedIndicator > [class*='positive'] {\n color: var(--steps-option-svg-color);\n background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n width: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BadgeProps } from '@alfalab/core-components-badge';
|
|
3
|
-
export
|
|
3
|
+
export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
|
|
4
4
|
export declare const StepIndicator: React.FC<StepIndicatorProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n padding: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
|
package/cssm/Component.d.ts
CHANGED
package/cssm/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":";;;;;;;;;;;;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { type StepIndicatorProps } from './components/step-indicator';\nimport { type CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom?.(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8EO,IAAM,IAAI,GAAkB,UAAC,EAqBnC,EAAA;;AApBG,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAyB,GAAA,EAAA,CAAA,oBAAA,EAAzB,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACzB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA;AAEV,IAAA,IAAM,OAAO,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAErC,IAAA,OAAO,GAAIC,cAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA,CAAA,CAAjC;AAEd,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,IAAI,WAAW,IAAI,OAAO,EAAE;YACrC,OAAO,CAAC,UAAU,CAAC;AACtB;AACL,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,CAAgC,EAAA;QACrD,IAAI,CAAC,WAAW,EAAE;YACd,CAAC,CAAC,eAAe,EAAE;AACtB;AACL,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,KAA0B,EAAA;AAC7C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACvB,YAAA,iBAAiB,EAAE;AACtB;AACL,KAAC;AAED,IAAA,IAAM,gBAAgB,GAAG,YAAA;AACrB,QAAA,IAAI,mBAAmB,EAAE;AACrB,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAKC,cAAA,CAAA,EAAA,EAAA,mBAAmB,EAAI;AACpD;AACD,QAAA,IAAI,eAAe,EAAE;AACjB,YAAA,OAAOF,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAC,EAAA,SAAS,EAAC,UAAU,EAAC,OAAO,EAAED,sBAAA,CAAA,aAAA,CAACG,mCAAiB,EAAA,IAAA,CAAG,GAAI;AAChF;AACD,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAOH,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAC,EAAA,SAAS,EAAC,UAAU,EAAC,OAAO,EAAED,sBAAA,CAAA,aAAA,CAACI,6CAAsB,EAAA,IAAA,CAAG,GAAI;AACrF;AACD,QAAA,IAAI,SAAS,EAAE;AACX,YAAA,OAAOJ,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAC,EAAA,SAAS,EAAC,WAAW,EAAC,OAAO,EAAED,sBAAA,CAAA,aAAA,CAACI,6CAAsB,EAAA,IAAA,CAAG,GAAI;AACtF;AACD,QAAA,IAAI,SAAS,EAAE;AACX,YAAA,OAAOJ,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAC,EAAA,SAAS,EAAC,WAAW,EAAC,OAAO,EAAED,sBAAA,CAAA,aAAA,CAACK,qBAAU,EAAA,IAAA,CAAG,GAAI;AAC1E;AACD,QAAA,IAAI,UAAU,EAAE;AACZ,YAAA,OAAOL,sBAAC,CAAA,aAAA,CAAAC,uBAAa,EAAC,EAAA,SAAS,EAAC,UAAU,EAAC,OAAO,EAAED,sBAAA,CAAA,aAAA,CAACM,yCAAoB,EAAA,IAAA,CAAG,GAAI;AACnF;AACD,QAAA,IAAI,eAAe,EAAE;YACjB,QACIN,qCAACC,uBAAa,EAAA,EACV,SAAS,EAAC,UAAU,EACpB,OAAO,EAAED,qCAACM,yCAAoB,EAAA,IAAA,CAAG,EACjC,SAAS,EAAEC,uBAAM,CAAC,kBAAkB,EACtC,CAAA;AAET;QACD,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,QACIP,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEO,uBAAM,CAAC,QAAQ,EAAA;gBAC3BP,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEO,uBAAM,CAAC,GAAG,EAAI,CAAA,CAC7B;AAEb;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,YAAA;QACvB,IAAI,eAAe,IAAI,kBAAkB,EAAE;YACvC,OAAO;AACH,gBAAA,WAAW,EAAE,kBAAkB;aAClC;AACJ;AAED,QAAA,OAAO,EAAE;AACb,KAAC;AAED,IAAA,IAAM,UAAU,GAAG,YAAA;;QAAM,QACrBP,8CACI,SAAS,EAAEQ,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACrC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAAL,cAAA,CAAA,EAAA,EACE,kBAAkB,EAAE,IAE7B;AATmB,KAUxB;IAED,QACIF,sBACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAAS,kBAAa,CAAC,UAAU,EAAE,MAAM,CAAC,EAC/C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,OAAO,EACZ,SAAS,EAAED,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,YAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACnC,YAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAA,GAAG,OAAO;AACvB,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,YAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,YAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAG,GAAA,SAAS,IAAI,eAAe;AAChD,YAAA,EAAA,CAACA,uBAAM,CAAC,UAAU,CAAA,GAAG,CAAC,eAAe;AACvC,YAAA,EAAA,EAAA,EACF,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,aAAa,EAAA;AAExB,QAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEQ,mBAAE,CAACD,uBAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACnC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEQ,mBAAE,CAACD,uBAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AACvB,oBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,CAAC,OAAO;AAC5B,oBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,oBAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAA,GAAG,OAAO;wBACzB,EAED,EAAA,gBAAgB,EAAE,CACjB;AACL,YAAA,aAAa,IAAI,eAAe,IAAI,UAAU,EAAE,CAC/C;AACN,QAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEQ,mBAAE,CAACD,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,MAAO,CAAA,MAAA,CAAA,oBAAoB,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AACnE,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AACpC,gBAAA,EAAA,EAAA,EAAA;AAGF,YAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEQ,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,oBAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAG,GAAA,SAAS,IAAI,eAAe;AAClD,oBAAA,EAAA,EAAA,EACF,OAAO,EAAE,eAAe,EAEvB,EAAA,QAAQ,CACP,CACJ;QACL,aAAa,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE,CAChD;AAEd;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|
|
@@ -23,8 +23,9 @@
|
|
|
23
23
|
--gap-16: var(--gap-m);
|
|
24
24
|
}
|
|
25
25
|
:root {
|
|
26
|
-
--font-family-
|
|
27
|
-
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
26
|
+
--font-family-alfasans:
|
|
27
|
+
'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
28
|
+
Helvetica, sans-serif;
|
|
28
29
|
}
|
|
29
30
|
:root {
|
|
30
31
|
--focus-color: var(--color-light-status-info);
|
|
@@ -70,7 +71,8 @@
|
|
|
70
71
|
font-size: 14px;
|
|
71
72
|
line-height: 20px;
|
|
72
73
|
font-weight: 700;
|
|
73
|
-
|
|
74
|
+
letter-spacing: 0.47px;
|
|
75
|
+
font-family: var(--font-family-alfasans);
|
|
74
76
|
|
|
75
77
|
display: flex;
|
|
76
78
|
align-items: center;
|
|
@@ -118,7 +120,8 @@
|
|
|
118
120
|
font-size: 16px;
|
|
119
121
|
line-height: 24px;
|
|
120
122
|
font-weight: 400;
|
|
121
|
-
|
|
123
|
+
letter-spacing: -0.24px;
|
|
124
|
+
font-family: var(--font-family-alfasans);
|
|
122
125
|
|
|
123
126
|
transition: background 0.2s;
|
|
124
127
|
padding: var(--gap-8);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type BadgeProps } from '@alfalab/core-components-badge/cssm';
|
|
3
|
-
export
|
|
3
|
+
export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
|
|
4
4
|
export declare const StepIndicator: React.FC<StepIndicatorProps>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
/** Обобщенный набор типов который подходит для Steps, но также прокинут в дочерний Step */
|
|
3
|
-
export
|
|
3
|
+
export type CommonProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Идентификатор для систем автоматизированного тестирования
|
|
6
6
|
*/
|
package/esm/Component.d.ts
CHANGED