@mrshmllw/smores-react 15.1.16 → 15.1.18
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.
|
@@ -59,7 +59,7 @@ const ProgressIndicator = styled(Box) `
|
|
|
59
59
|
: theme.color.feedback.positive[100]};
|
|
60
60
|
`;
|
|
61
61
|
const StyledText = styled(Text) `
|
|
62
|
-
margin-top:
|
|
62
|
+
margin-top: ${({ theme }) => theme.space['025']};
|
|
63
63
|
font-weight: ${oldTheme.font.weight.medium};
|
|
64
64
|
white-space: nowrap;
|
|
65
65
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAE/B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gDAAgD,CAAA;AAaxE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,SAAS,EACT,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,eAAe,GAAG,KAAK,EACvB,UAAU,GAAG,KAAK,EAClB,UAAU,GACI,EAAE,EAAE;IAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,KAAC,UAAU,kBACG,WAAW,oBACP,eAAe,EAC/B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAC,MAAM,GACb,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,YAAY,gBACX,WAAW,oBACP,eAAe,EAC/B,KAAK,EAAE,SAAS,aAEhB,MAAC,aAAa,IACZ,IAAI,uBACS,aAAa,KAAK,EAAE,EACjC,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,OAAO,iBACH,UAAU,aAEvB,KAAC,iBAAiB,kBACJ,WAAW,kBACT,aAAa,EAC3B,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,YAEtB,WAAW,IAAI,CACd,KAAC,aAAa,aAAQ,EAAE,YACtB,KAAC,eAAe,IACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GACtC,GACY,CACjB,GACiB,EACpB,KAAC,UAAU,IAAC,IAAI,EAAC,SAAS,YAAE,KAAK,GAAc,IACjC,EACf,WAAW,IAAI,CAAC,UAAU,IAAI,KAAC,YAAY,KAAG,IAClC,CAChB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;CAMxB,CAAA;AAED,MAAM,eAAe,GAAG,GAAG,CAAsB;;;;;IAK7C,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,IAAI,aAAa;CAC1D,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;IAGhD,eAAe;;gBAEH,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,CACtC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM;CAC3D,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;;;;;;;CASrD,CAAA;AACD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;YAE3C,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;CAClE,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;;;;gBAM3C,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,CACpD,UAAU,IAAI,YAAY;IACxB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;CACzC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA
|
|
1
|
+
{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box } from '../../Box'\nimport { StepData } from 'ProgressIndicator/types'\nimport styled, { css, useTheme } from 'styled-components'\nimport { theme as oldTheme } from '../../theme'\nimport { Text } from '../../Text'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\nexport interface StepItemProps extends Pick<StepData, 'label'> {\n isCompleted?: boolean\n isLastCompleted?: boolean\n isDisabled: boolean\n isCurrentStep: boolean\n isSimple?: boolean\n onClick: () => void\n stepWidth: string\n isLastItem: boolean\n}\n\nexport const StepItem = ({\n label,\n isSimple = false,\n isCurrentStep,\n stepWidth,\n onClick,\n isCompleted = false,\n isLastCompleted = false,\n isLastItem = false,\n isDisabled,\n}: StepItemProps) => {\n const theme = useTheme()\n if (isSimple) {\n return (\n <SimpleItem\n $completed={isCompleted}\n $lastCompleted={isLastCompleted}\n width={stepWidth}\n height=\"12px\"\n />\n )\n }\n\n return (\n <ProgressItem\n flex\n alignItems=\"flex-start\"\n $completed={isCompleted}\n $lastCompleted={isLastCompleted}\n width={stepWidth}\n >\n <ClickableArea\n flex\n data-testid={`step-item-${label}`}\n direction=\"column\"\n alignItems=\"center\"\n onClick={onClick}\n $isDisabled={isDisabled}\n >\n <ProgressIndicator\n $completed={isCompleted}\n $currentStep={isCurrentStep}\n flex\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {isCompleted && (\n <IconContainer $size={12}>\n <FontAwesomeIcon\n icon={faCheck}\n color={theme.color.surface.base['000']}\n />\n </IconContainer>\n )}\n </ProgressIndicator>\n <StyledText typo=\"caption\">{label}</StyledText>\n </ClickableArea>\n {isCompleted && !isLastItem && <CompletedBar />}\n </ProgressItem>\n )\n}\n\ninterface StyledComponentProps {\n $completed?: boolean\n $lastCompleted?: boolean\n $currentStep?: boolean\n $isDisabled?: boolean\n $completedStep?: boolean\n}\n\nconst lastCompleted = css`\n border-radius: 0 100px 100px 0;\n\n &:first-child {\n border-radius: 100px;\n }\n`\n\nconst borderRadiusCss = css<StyledComponentProps>`\n &:first-child {\n border-radius: 100px 0 0 100px;\n }\n\n ${({ $lastCompleted }) => $lastCompleted && lastCompleted}\n`\n\nconst SimpleItem = styled(Box)<StyledComponentProps>`\n position: relative;\n z-index: 1;\n ${borderRadiusCss}\n\n background: ${({ $completed, theme }) =>\n $completed ? theme.color.feedback.positive[200] : 'none'};\n`\n\nconst ProgressItem = styled(Box)<StyledComponentProps>`\n position: relative;\n z-index: 1;\n top: 9px;\n left: -10px;\n\n &:last-child {\n width: auto;\n }\n`\nconst ClickableArea = styled(Box)<StyledComponentProps>`\n position: relative;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};\n`\n\nconst ProgressIndicator = styled(Box)<StyledComponentProps>`\n border-radius: 50%;\n height: 24px;\n width: 24px;\n position: relative;\n z-index: 1;\n background: ${({ $completed, $currentStep, theme }) =>\n $completed || $currentStep\n ? theme.color.feedback.positive[200]\n : theme.color.feedback.positive[100]};\n`\n\nconst StyledText = styled(Text)`\n margin-top: ${({ theme }) => theme.space['025']};\n font-weight: ${oldTheme.font.weight.medium};\n white-space: nowrap;\n`\n\nconst CompletedBar = styled(Box)`\n position: absolute;\n height: 12px;\n width: 100%;\n top: 7px;\n left: 13px;\n background: ${({ theme }) => theme.color.feedback.positive[200]};\n z-index: 0;\n`\n"]}
|
|
@@ -15,7 +15,7 @@ export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, ico
|
|
|
15
15
|
display: 'flex',
|
|
16
16
|
justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',
|
|
17
17
|
}, children: iconComponent })) : icon ? (_jsx(IconWrapper, { "$iconPosition": iconPosition, children: _jsx(Icon, { render: icon, size: 24 }) })) : null;
|
|
18
|
-
return (_jsxs(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { "$visualUrl": visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "
|
|
18
|
+
return (_jsxs(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { "$visualUrl": visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "space.100", isDisabled: disabled }), _jsxs(Box, { children: [_jsx(RadioText, { "$isError": isError, children: label }), bodyCopy && (_jsx(Box, { children: typeof bodyCopy === 'string' ? (_jsx(Text, { typo: "caption", children: bodyCopy })) : (bodyCopy) }))] })] })] }));
|
|
19
19
|
});
|
|
20
20
|
const VisualWrapper = styled.div `
|
|
21
21
|
width: 100%;
|
|
@@ -24,7 +24,7 @@ const VisualWrapper = styled.div `
|
|
|
24
24
|
`;
|
|
25
25
|
const IconWrapper = styled.div `
|
|
26
26
|
display: flex;
|
|
27
|
-
padding-bottom:
|
|
27
|
+
padding-bottom: ${({ theme }) => theme.space[150]};
|
|
28
28
|
|
|
29
29
|
${({ $iconPosition }) => $iconPosition === 'center' &&
|
|
30
30
|
css `
|
|
@@ -94,6 +94,6 @@ const RadioText = styled.span `
|
|
|
94
94
|
font-size: 16px;
|
|
95
95
|
font-weight: ${oldTheme.font.weight.medium};
|
|
96
96
|
color: ${({ $isError, theme }) => $isError ? theme.color.feedback.negative[200] : theme.color.text.base};
|
|
97
|
-
margin-top:
|
|
97
|
+
margin-top: ${({ theme }) => theme.space['050']};
|
|
98
98
|
`;
|
|
99
99
|
//# sourceMappingURL=RadioItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,UAAU,CAAA;AAG5C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAqB7D,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAChB,EACE,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,aAAa,EACb,YAAY,GAAG,QAAQ,EACvB,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EACD,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAExB,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aACL,EAAE,EACT,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;SACpE,YAEA,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,WAAW,qBAAgB,YAAY,YACtC,KAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACpB,CACf,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,IACN,OAAO,EAAE,EAAE,EACX,OAAO,EAAE,OAAO,kBACF,WAAW,iBACZ,KAAK,cACR,OAAO,oBACD,aAAa,eAClB,QAAQ,gBACP,SAAS,aAEpB,MAAM,IAAI,CAAC,IAAI,IAAI,CAClB,KAAC,aAAa,cACZ,KAAC,MAAM,kBAAa,MAAM,GAAI,GAChB,CACjB,EACA,CAAC,MAAM,IAAI,YAAY,EACxB,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC3B,KAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n name: string\n visual?: string\n icon?: Icons\n iconComponent?: ReactNode\n iconPosition?: IconPosition\n value: BaseValueType\n label: string\n checked: boolean\n onChange: (value: BaseValueType) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n displayType: DisplayType\n isError: boolean\n fallbackStyle?: boolean\n bodyCopy?: string | ReactElement\n disabled?: boolean\n itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n function RadioItem(\n {\n name,\n visual,\n icon,\n iconComponent,\n iconPosition = 'center',\n label,\n value,\n checked,\n onChange,\n onBlur,\n displayType,\n isError,\n fallbackStyle,\n bodyCopy,\n disabled,\n itemWidth,\n },\n ref,\n ) {\n const id = useUniqueId()\n\n const iconToRender = iconComponent ? (\n <IconContainer\n $size={24}\n style={{\n display: 'flex',\n justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n }}\n >\n {iconComponent}\n </IconContainer>\n ) : icon ? (\n <IconWrapper $iconPosition={iconPosition}>\n <Icon render={icon} size={24} />\n </IconWrapper>\n ) : null\n\n return (\n <Wrapper\n htmlFor={id}\n checked={checked}\n $displayType={displayType}\n data-testid={value}\n $isError={isError}\n $fallbackStyle={fallbackStyle}\n $disabled={disabled}\n $itemWidth={itemWidth}\n >\n {visual && !icon && (\n <VisualWrapper>\n <Visual $visualUrl={visual} />\n </VisualWrapper>\n )}\n {!visual && iconToRender}\n <Box flex alignItems=\"center\">\n <RadioElement\n ref={ref}\n name={name}\n id={id}\n value={value}\n checked={checked}\n onChange={onChange}\n onBlur={onBlur}\n isError={isError}\n mr=\"space.100\"\n isDisabled={disabled}\n />\n <Box>\n <RadioText $isError={isError}>{label}</RadioText>\n {bodyCopy && (\n <Box>\n {typeof bodyCopy === 'string' ? (\n <Text typo=\"caption\">{bodyCopy}</Text>\n ) : (\n bodyCopy\n )}\n </Box>\n )}\n </Box>\n </Box>\n </Wrapper>\n )\n },\n)\n\nconst VisualWrapper = styled.div`\n width: 100%;\n max-width: 120px;\n margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n display: flex;\n padding-bottom: ${({ theme }) => theme.space[150]};\n\n ${({ $iconPosition }) =>\n $iconPosition === 'center' &&\n css`\n justify-content: center;\n `}\n\n ${({ $iconPosition }) =>\n $iconPosition === 'start' &&\n css`\n justify-content: flex-start;\n `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n width: 100%;\n padding-top: 100%;\n background-image: url('${(p) => p.$visualUrl}');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n`\n\nconst Wrapper = styled.label<\n TransientProps<\n Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n > & { checked: boolean; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n display: flex;\n flex-direction: column;\n cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n ${({\n $displayType,\n checked,\n $isError,\n $fallbackStyle,\n $disabled,\n $itemWidth,\n theme,\n }) => css`\n ${($displayType === 'horizontal-card' ||\n $displayType === 'vertical-card') &&\n css`\n border-radius: 12px;\n background-color: ${$fallbackStyle\n ? theme.color.surface.base['000']\n : theme.color.surface.base[300]};\n padding: ${checked ? '10px' : '12px'};\n border: ${checked &&\n ($isError\n ? `2px solid ${theme.color.feedback.negative[200]}`\n : `2px solid ${theme.color.border.contrast}`)};\n\n &:hover {\n ${!$disabled &&\n css`\n background-color: ${$fallbackStyle\n ? theme.color.surface.base[100]\n : theme.color.surface.base[400]};\n `}\n }\n `}\n ${$displayType === 'horizontal-card' &&\n css`\n justify-content: center;\n ${!$itemWidth &&\n css`\n @media (min-width: 420px) {\n width: calc(50% - ${ITEM_GAP / 2}px);\n }\n\n @media (min-width: 768px) {\n width: 201px;\n }\n `}\n `}\n width: ${$itemWidth ?? '100%'};\n `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n line-height: 16px;\n font-size: 16px;\n font-weight: ${oldTheme.font.weight.medium};\n color: ${({ $isError, theme }) =>\n $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n margin-top: ${({ theme }) => theme.space['050']};\n`\n"]}
|