@mrshmllw/smores-react 12.2.1 → 12.2.2
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/RadioGroup/RadioElement.d.ts +1 -0
- package/dist/RadioGroup/RadioElement.js +2 -2
- package/dist/RadioGroup/RadioElement.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +4 -1
- package/dist/RadioGroup/RadioGroup.js +4 -3
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +3 -1
- package/dist/RadioGroup/RadioItem.js +25 -18
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/RadioGroup/types.d.ts +2 -0
- package/dist/RadioGroup/types.js.map +1 -1
- package/package.json +10 -10
|
@@ -9,4 +9,5 @@ export declare const RadioElement: React.ForwardRefExoticComponent<{
|
|
|
9
9
|
onChange: (value: BaseValueType) => void;
|
|
10
10
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
11
11
|
isError: boolean;
|
|
12
|
+
isDisabled?: boolean;
|
|
12
13
|
} & MarginProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -4,9 +4,9 @@ import { theme } from '../theme';
|
|
|
4
4
|
import { focusOutline } from '../utils/focusOutline';
|
|
5
5
|
import { visuallyHidden } from '../utils/visuallyHidden';
|
|
6
6
|
import { Box } from '../Box';
|
|
7
|
-
export const RadioElement = forwardRef(function RadioElement({ name, id, value, checked, onChange, onBlur, isError, ...marginProps }, ref) {
|
|
7
|
+
export const RadioElement = forwardRef(function RadioElement({ name, id, value, isDisabled, checked, onChange, onBlur, isError, ...marginProps }, ref) {
|
|
8
8
|
return (React.createElement(React.Fragment, null,
|
|
9
|
-
React.createElement(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur }),
|
|
9
|
+
React.createElement(StyledInput, { ref: ref, type: "radio", name: name, id: id, value: `${value}`, checked: checked, onChange: () => onChange(value), onBlur: onBlur, disabled: isDisabled }),
|
|
10
10
|
React.createElement(RadioCircle, { "$isError": isError, "$checked": checked, ...marginProps })));
|
|
11
11
|
});
|
|
12
12
|
const StyledInput = styled.input `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAc5B,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,IAAI,EACJ,EAAE,EACF,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,WAAW,EACf,EACD,GAAG;IAEH,OAAO,CACL;QACE,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,GAAG,KAAK,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAU,GACpB;QACF,oBAAC,WAAW,gBAAW,OAAO,cAAY,OAAO,KAAM,WAAW,GAAI,CACrE,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,cAAc;CACjB,CAAA;AAED,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0C;;WAE9D,UAAU;YACT,UAAU;mBACH,UAAU;sBACP,KAAK,CAAC,MAAM,CAAC,KAAK;;MAElC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;IAE1D,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3B,CAAC,QAAQ;IACT,CAAC,QAAQ;IACT;;0BAEsB,KAAK,CAAC,MAAM,CAAC,SAAS;;GAE7C;;IAEC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3B,QAAQ;IACR,qBACE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SACpD,GAAG;;IAEH,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,oBAAoB,EAAE,CAAC;CACjE,CAAA","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { visuallyHidden } from '../utils/visuallyHidden'\n\nimport { Box } from '../Box'\nimport { BaseValueType } from './types'\n\ntype RadioElementProps = {\n name: string\n id: string\n value: BaseValueType\n checked: boolean\n onChange: (value: BaseValueType) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n isError: boolean\n isDisabled?: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n function RadioElement(\n {\n name,\n id,\n value,\n isDisabled,\n checked,\n onChange,\n onBlur,\n isError,\n ...marginProps\n },\n ref,\n ) {\n return (\n <>\n <StyledInput\n ref={ref}\n type=\"radio\"\n name={name}\n id={id}\n value={`${value}`}\n checked={checked}\n onChange={() => onChange(value)}\n onBlur={onBlur}\n disabled={isDisabled}\n />\n <RadioCircle $isError={isError} $checked={checked} {...marginProps} />\n </>\n )\n },\n)\n\nconst StyledInput = styled.input`\n ${visuallyHidden}\n`\n\nconst RADIO_SIZE = 24\n\nconst RadioCircle = styled(Box)<{ $isError: boolean; $checked: boolean }>`\n flex-shrink: 0;\n width: ${RADIO_SIZE}px;\n height: ${RADIO_SIZE}px;\n border-radius: ${RADIO_SIZE}px;\n background-color: ${theme.colors.cream};\n border: 2px solid\n ${({ $isError }) =>\n $isError ? theme.colors.strawberry : theme.colors.sesame};\n\n ${({ $checked, $isError }) =>\n !$checked &&\n !$isError &&\n `\n &:hover {\n border: 2px solid ${theme.colors.liquorice};\n }\n `}\n\n ${({ $checked, $isError }) =>\n $checked &&\n `border: 8px solid ${\n $isError ? theme.colors.strawberry : theme.colors.liquorice\n };`}\n\n ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { FocusEvent, ReactElement } from 'react';
|
|
2
2
|
import { CommonFieldProps } from '../fields/commonFieldTypes';
|
|
3
3
|
import { Icons } from '../Icon/iconsList';
|
|
4
|
-
import { BaseValueType, DisplayType, IconPosition } from './types';
|
|
4
|
+
import { BaseValueType, DisplayType, IconPosition, ItemWidth, JustifyContent } from './types';
|
|
5
5
|
export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
|
|
6
6
|
options: Array<{
|
|
7
7
|
visual?: string;
|
|
@@ -10,7 +10,10 @@ export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
|
|
|
10
10
|
label: string;
|
|
11
11
|
value: Value;
|
|
12
12
|
bodyCopy?: string;
|
|
13
|
+
disabled?: boolean;
|
|
13
14
|
}>;
|
|
15
|
+
justifyContent?: JustifyContent;
|
|
16
|
+
itemWidth?: ItemWidth;
|
|
14
17
|
onChange: (value: Value) => void;
|
|
15
18
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
16
19
|
value: Value;
|
|
@@ -4,7 +4,7 @@ import { useUniqueId } from '../utils/id';
|
|
|
4
4
|
import { Fieldset } from '../fields/Fieldset';
|
|
5
5
|
import { ITEM_GAP } from './constants';
|
|
6
6
|
import { RadioItem } from './RadioItem';
|
|
7
|
-
const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = 'normal', renderAsTitle = false, error = false, fallbackStyle = false, ...fieldProps }, ref) => {
|
|
7
|
+
const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = 'normal', renderAsTitle = false, error = false, fallbackStyle = false, justifyContent, itemWidth, ...fieldProps }, ref) => {
|
|
8
8
|
const name = useUniqueId();
|
|
9
9
|
const optionRefs = useRef([]);
|
|
10
10
|
useImperativeHandle(ref, () => {
|
|
@@ -17,7 +17,7 @@ const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = '
|
|
|
17
17
|
};
|
|
18
18
|
});
|
|
19
19
|
return (React.createElement(Fieldset, { renderAsTitle: renderAsTitle, error: error, ...fieldProps },
|
|
20
|
-
React.createElement(RadioItemList, { "$displayType": displayType }, options.map((option, index) => {
|
|
20
|
+
React.createElement(RadioItemList, { "$displayType": displayType, "$justifyContent": justifyContent }, options.map((option, index) => {
|
|
21
21
|
const isSelected = option.value === value;
|
|
22
22
|
return (React.createElement(RadioItem, { ref: (radioOptionRef) => {
|
|
23
23
|
optionRefs.current[index] = {
|
|
@@ -25,7 +25,7 @@ const RadioGroupComponent = ({ options, onChange, onBlur, value, displayType = '
|
|
|
25
25
|
};
|
|
26
26
|
}, key: `${option.value}`, name: name, visual: option.visual, icon: option.icon, iconPosition: option.iconPosition, label: option.label, value: option.value, checked: isSelected,
|
|
27
27
|
// @ts-expect-error TODO: address this type inconsistency in another PR
|
|
28
|
-
onChange: onChange, onBlur: onBlur, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy }));
|
|
28
|
+
onChange: onChange, onBlur: onBlur, displayType: displayType, isError: error, fallbackStyle: fallbackStyle, bodyCopy: option.bodyCopy, disabled: option.disabled, itemWidth: itemWidth }));
|
|
29
29
|
}))));
|
|
30
30
|
};
|
|
31
31
|
export const RadioGroup = forwardRef(RadioGroupComponent);
|
|
@@ -42,5 +42,6 @@ const RadioItemList = styled.div `
|
|
|
42
42
|
}
|
|
43
43
|
return `flex-direction: column;`;
|
|
44
44
|
}}
|
|
45
|
+
justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};
|
|
45
46
|
`;
|
|
46
47
|
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,EAGV,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n ReactElement,\n RefObject,\n useImperativeHandle,\n useRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\nimport { Icons } from '../Icon/iconsList'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport {\n BaseValueType,\n DisplayType,\n IconPosition,\n ItemWidth,\n JustifyContent,\n} from './types'\nimport { TransientProps } from 'utils/utilTypes'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n options: Array<{\n visual?: string\n icon?: Icons\n iconPosition?: IconPosition\n label: string\n value: Value\n bodyCopy?: string\n disabled?: boolean\n }>\n justifyContent?: JustifyContent\n itemWidth?: ItemWidth\n onChange: (value: Value) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n value: Value\n displayType?: DisplayType\n fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n {\n options,\n onChange,\n onBlur,\n value,\n displayType = 'normal',\n renderAsTitle = false,\n error = false,\n fallbackStyle = false,\n justifyContent,\n itemWidth,\n ...fieldProps\n }: RadioGroupProps<Value>,\n ref: ForwardedRef<RadioGroupElement>,\n) => {\n const name = useUniqueId()\n\n const optionRefs = useRef<RefObject<HTMLInputElement | null>[]>([])\n useImperativeHandle(ref, () => {\n return {\n focus: () => {\n const selectedIndex = options.findIndex((item) => item.value === value)\n\n const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n optionRefs.current[elementToFocus].current?.focus()\n },\n }\n })\n\n return (\n <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n <RadioItemList\n $displayType={displayType}\n $justifyContent={justifyContent}\n >\n {options.map((option, index) => {\n const isSelected = option.value === value\n\n return (\n <RadioItem\n ref={(radioOptionRef) => {\n optionRefs.current[index] = {\n current: radioOptionRef,\n }\n }}\n key={`${option.value}`}\n name={name}\n visual={option.visual}\n icon={option.icon}\n iconPosition={option.iconPosition}\n label={option.label}\n value={option.value}\n checked={isSelected}\n // @ts-expect-error TODO: address this type inconsistency in another PR\n onChange={onChange}\n onBlur={onBlur}\n displayType={displayType}\n isError={error}\n fallbackStyle={fallbackStyle}\n bodyCopy={option.bodyCopy}\n disabled={option.disabled}\n itemWidth={itemWidth}\n />\n )\n })}\n </RadioItemList>\n </Fieldset>\n )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n Value extends BaseValueType = BaseValueType,\n>(\n p: RadioGroupProps<Value> & React.RefAttributes<HTMLInputElement>,\n) => ReactElement<any> | null\n\nconst RadioItemList = styled.div<\n TransientProps<Pick<RadioGroupProps, 'displayType' | 'justifyContent'>>\n>`\n display: flex;\n gap: ${ITEM_GAP}px;\n\n ${({ $displayType }) => {\n if ($displayType === 'horizontal-card') {\n return `\n flex-direction: row;\n flex-wrap: wrap;\n `\n }\n\n return `flex-direction: column;`\n }}\n justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};\n`\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { FocusEvent } from 'react';
|
|
2
2
|
import { Icons } from '../Icon/iconsList';
|
|
3
|
-
import { BaseValueType, DisplayType, IconPosition } from './types';
|
|
3
|
+
import { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types';
|
|
4
4
|
type RadioItemProps = {
|
|
5
5
|
name: string;
|
|
6
6
|
visual?: string;
|
|
@@ -15,6 +15,8 @@ type RadioItemProps = {
|
|
|
15
15
|
isError: boolean;
|
|
16
16
|
fallbackStyle?: boolean;
|
|
17
17
|
bodyCopy?: string;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
itemWidth?: ItemWidth;
|
|
18
20
|
};
|
|
19
21
|
export declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<HTMLInputElement>>;
|
|
20
22
|
export {};
|
|
@@ -7,15 +7,15 @@ import { Icon } from '../Icon';
|
|
|
7
7
|
import { Text } from '../Text';
|
|
8
8
|
import { RadioElement } from './RadioElement';
|
|
9
9
|
import { ITEM_GAP } from './constants';
|
|
10
|
-
export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
|
|
10
|
+
export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, disabled, itemWidth, }, ref) {
|
|
11
11
|
const id = useUniqueId();
|
|
12
|
-
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle },
|
|
12
|
+
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth },
|
|
13
13
|
visual && !icon && (React.createElement(VisualWrapper, null,
|
|
14
14
|
React.createElement(Visual, { "$visualUrl": visual }))),
|
|
15
15
|
!visual && icon && (React.createElement(IconWrapper, { "$iconPosition": iconPosition },
|
|
16
16
|
React.createElement(Icon, { render: icon, size: 24 }))),
|
|
17
17
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
18
|
-
React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px" }),
|
|
18
|
+
React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px", isDisabled: disabled }),
|
|
19
19
|
React.createElement(Box, null,
|
|
20
20
|
React.createElement(RadioText, { "$isError": isError }, label),
|
|
21
21
|
bodyCopy && (React.createElement(Box, null,
|
|
@@ -53,14 +53,16 @@ const Wrapper = styled.label `
|
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
cursor: pointer;
|
|
55
55
|
|
|
56
|
-
${({ $displayType, checked, $isError, $fallbackStyle }) => css `
|
|
56
|
+
${({ $displayType, checked, $isError, $fallbackStyle, $disabled, $itemWidth, }) => css `
|
|
57
57
|
${($displayType === 'horizontal-card' ||
|
|
58
58
|
$displayType === 'vertical-card') &&
|
|
59
59
|
css `
|
|
60
60
|
border-radius: 12px;
|
|
61
|
-
background-color: ${$
|
|
62
|
-
? theme.colors.
|
|
63
|
-
:
|
|
61
|
+
background-color: ${$disabled
|
|
62
|
+
? theme.colors.chia
|
|
63
|
+
: $fallbackStyle
|
|
64
|
+
? theme.colors.cream
|
|
65
|
+
: theme.colors.custard};
|
|
64
66
|
padding: ${checked ? '10px' : '12px'};
|
|
65
67
|
border: ${checked &&
|
|
66
68
|
($isError
|
|
@@ -68,24 +70,29 @@ const Wrapper = styled.label `
|
|
|
68
70
|
: `2px solid ${theme.colors.liquorice}`)};
|
|
69
71
|
|
|
70
72
|
&:hover {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
${!$disabled &&
|
|
74
|
+
css `
|
|
75
|
+
background-color: ${$fallbackStyle
|
|
76
|
+
? theme.colors.coconut
|
|
77
|
+
: theme.colors.oatmeal};
|
|
78
|
+
`}
|
|
74
79
|
}
|
|
75
80
|
`}
|
|
76
81
|
${$displayType === 'horizontal-card' &&
|
|
77
82
|
css `
|
|
78
|
-
width: 100%;
|
|
79
83
|
justify-content: center;
|
|
84
|
+
${!$itemWidth &&
|
|
85
|
+
css `
|
|
86
|
+
@media (min-width: 420px) {
|
|
87
|
+
width: calc(50% - ${ITEM_GAP / 2}px);
|
|
88
|
+
}
|
|
80
89
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
@media (min-width: 768px) {
|
|
86
|
-
width: 201px;
|
|
87
|
-
}
|
|
90
|
+
@media (min-width: 768px) {
|
|
91
|
+
width: 201px;
|
|
92
|
+
}
|
|
93
|
+
`}
|
|
88
94
|
`}
|
|
95
|
+
width: ${$itemWidth ?? '100%'};
|
|
89
96
|
`}
|
|
90
97
|
`;
|
|
91
98
|
const RadioText = styled.span `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGzC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\n\ntype RadioItemProps = {\n name: string\n visual?: string\n icon?: Icons\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\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 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 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 && icon && (\n <IconWrapper $iconPosition={iconPosition}>\n <Icon render={icon} size={24} />\n </IconWrapper>\n )}\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=\"8px\"\n isDisabled={disabled}\n />\n <Box>\n <RadioText $isError={isError}>{label}</RadioText>\n {bodyCopy && (\n <Box>\n <Text typo=\"caption\">{bodyCopy}</Text>\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: 12px;\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: pointer;\n\n ${({\n $displayType,\n checked,\n $isError,\n $fallbackStyle,\n $disabled,\n $itemWidth,\n }) => css`\n ${($displayType === 'horizontal-card' ||\n $displayType === 'vertical-card') &&\n css`\n border-radius: 12px;\n background-color: ${$disabled\n ? theme.colors.chia\n : $fallbackStyle\n ? theme.colors.cream\n : theme.colors.custard};\n padding: ${checked ? '10px' : '12px'};\n border: ${checked &&\n ($isError\n ? `2px solid ${theme.colors.strawberry}`\n : `2px solid ${theme.colors.liquorice}`)};\n\n &:hover {\n ${!$disabled &&\n css`\n background-color: ${$fallbackStyle\n ? theme.colors.coconut\n : theme.colors.oatmeal};\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: ${theme.font.weight.medium};\n color: ${({ $isError }) =>\n $isError ? theme.colors.strawberry : theme.colors.liquorice};\n margin-top: 4px;\n`\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export type IconPosition = 'center' | 'start';
|
|
2
2
|
export type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card';
|
|
3
3
|
export type BaseValueType = string | boolean | null;
|
|
4
|
+
export type JustifyContent = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
|
|
5
|
+
export type ItemWidth = `${number}${'px' | 'em' | 'rem' | '%' | 'vw' | 'vh'}` | 'fit-content' | 'min-content' | 'max-content';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":"","sourcesContent":["export type IconPosition = 'center' | 'start'\n\nexport type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card'\n\nexport type BaseValueType = string | boolean | null\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":"","sourcesContent":["export type IconPosition = 'center' | 'start'\n\nexport type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card'\n\nexport type BaseValueType = string | boolean | null\n\nexport type JustifyContent =\n | 'center'\n | 'flex-end'\n | 'flex-start'\n | 'space-around'\n | 'space-between'\n | 'space-evenly'\n\nexport type ItemWidth =\n | `${number}${'px' | 'em' | 'rem' | '%' | 'vw' | 'vh'}`\n | 'fit-content'\n | 'min-content'\n | 'max-content'\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.2.
|
|
3
|
+
"version": "12.2.2",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -41,15 +41,15 @@
|
|
|
41
41
|
"@semantic-release/git": "^10.0.1",
|
|
42
42
|
"@semantic-release/github": "^11.0.1",
|
|
43
43
|
"@semantic-release/npm": "^12.0.0",
|
|
44
|
-
"@snyk/protect": "^1.1296.
|
|
45
|
-
"@storybook/addon-a11y": "^8.6.
|
|
44
|
+
"@snyk/protect": "^1.1296.1",
|
|
45
|
+
"@storybook/addon-a11y": "^8.6.11",
|
|
46
46
|
"@storybook/addon-coverage": "^1.0.5",
|
|
47
|
-
"@storybook/addon-essentials": "^8.6.
|
|
48
|
-
"@storybook/addon-interactions": "^8.6.
|
|
49
|
-
"@storybook/addon-links": "^8.6.
|
|
50
|
-
"@storybook/preview-api": "^8.6.
|
|
51
|
-
"@storybook/react": "^8.6.
|
|
52
|
-
"@storybook/react-vite": "^8.6.
|
|
47
|
+
"@storybook/addon-essentials": "^8.6.11",
|
|
48
|
+
"@storybook/addon-interactions": "^8.6.11",
|
|
49
|
+
"@storybook/addon-links": "^8.6.11",
|
|
50
|
+
"@storybook/preview-api": "^8.6.11",
|
|
51
|
+
"@storybook/react": "^8.6.11",
|
|
52
|
+
"@storybook/react-vite": "^8.6.11",
|
|
53
53
|
"@storybook/test": "^8.2.1",
|
|
54
54
|
"@storybook/test-runner": "^0.22.0",
|
|
55
55
|
"@testing-library/react": "^16.2.0",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"playwright": "^1.51.1",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"react": "^19.0.0",
|
|
76
|
-
"react-dom": "^19.
|
|
76
|
+
"react-dom": "^19.1.0",
|
|
77
77
|
"rimraf": "^6.0.1",
|
|
78
78
|
"semantic-release": "^24.2.3",
|
|
79
79
|
"storybook": "^8.0.4",
|