@mrshmllw/smores-react 12.2.1-crumbs-fix-adding-generic-classname-to-field.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/Dropdown/Dropdown.js +1 -1
- package/dist/Dropdown/Dropdown.js.map +1 -1
- 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/dist/fields/components/InternalField.js +1 -1
- package/dist/fields/components/InternalField.js.map +1 -1
- package/package.json +10 -10
|
@@ -31,7 +31,7 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
|
|
|
31
31
|
return customDefaultOption ?? 'Select an option';
|
|
32
32
|
};
|
|
33
33
|
return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
|
|
34
|
-
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
34
|
+
React.createElement(Box, { flex: true, alignItems: "center", style: { position: 'relative' } },
|
|
35
35
|
frontIcon && (React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })),
|
|
36
36
|
React.createElement(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
|
|
37
37
|
const value = event.currentTarget.value;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAmClE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,iBAAiB,GAAG,KAAK,EACzB,mBAAmB,EACnB,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,aAAa,EACb,MAAM,EACN,SAAS,EACT,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAoC;IAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC,CAAA;IACF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;IAE7E,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAA0B,CAAA;QAE5D,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;YACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;YAE/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAChB,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO,WAAW,CAAA;QACpB,CAAC;QACD,OAAO,mBAAmB,IAAI,kBAAkB,CAAA;IAClD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FocusEvent,\n FormEvent,\n ForwardedRef,\n forwardRef,\n useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n optionGroupLabel?: string\n label: string\n value: string\n}\n\nexport interface Props extends CommonFieldProps {\n placeholder?: string\n showDefaultOption?: boolean\n customDefaultOption?: string\n name?: string\n value?: string | null\n defaultValue?: string\n disabled?: boolean\n list: DropdownItem[]\n frontIcon?: Icons\n fallbackStyle?: boolean\n onSelect: (element: string) => void\n onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n | {\n onSelect: (e: string) => void\n onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n }\n | {\n onSelect?: (e: string) => void\n onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n {\n id: idProp,\n placeholder,\n showDefaultOption = false,\n customDefaultOption,\n name,\n value: valueProp,\n defaultValue,\n disabled = false,\n list,\n onSelect,\n error = false,\n onInputChange,\n onBlur,\n frontIcon,\n fallbackStyle,\n ...fieldProps\n }: DropdownProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [value, setValue] = useControllableState({\n initialState: defaultValue,\n stateProp: valueProp,\n })\n const id = useUniqueId(idProp)\n const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n const dropdownItemsGroups = useMemo(() => {\n const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n list.forEach((item) => {\n const key = item.optionGroupLabel ?? ''\n const group = itemsPerGroupLabel.get(key) ?? []\n\n group.push(item)\n itemsPerGroupLabel.set(key, group)\n })\n\n return Array.from(itemsPerGroupLabel.values())\n }, [list])\n\n const defaultOptionLabel = () => {\n if (!showDefaultOption) {\n return placeholder\n }\n return customDefaultOption ?? 'Select an option'\n }\n\n return (\n <Field {...fieldProps} htmlFor={id} error={error}>\n <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n {frontIcon && (\n <StyledFrontIcon\n $disabled={disabled}\n render={frontIcon}\n color=\"sesame\"\n />\n )}\n <StyledSelect\n id={id}\n disabled={disabled || list.length < 1}\n onChange={(event) => {\n const value = event.currentTarget.value\n\n onSelect?.(value)\n onInputChange?.(event)\n setValue(value)\n }}\n $error={error}\n ref={ref}\n onBlur={onBlur}\n name={name}\n $frontIcon={frontIcon}\n $fallbackStyle={fallbackStyle}\n value={value ? value : ''}\n >\n {hasOptGroups ? (\n <optgroup label={defaultOptionLabel()}>\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n </optgroup>\n ) : (\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n )}\n\n {dropdownItemsGroups.map((groupItems, i) =>\n hasOptGroups ? (\n <optgroup\n key={i}\n label={groupItems[0].optionGroupLabel ?? 'Other'}\n >\n {groupItems.map((el, j) => (\n <option key={`${i}-${j}`} value={el.value}>\n {el.label}\n </option>\n ))}\n </optgroup>\n ) : (\n groupItems.map((el, j) => (\n <option key={j} value={el.value}>\n {el.label}\n </option>\n ))\n ),\n )}\n </StyledSelect>\n <Caret>\n <Icon render=\"caret\" color=\"marzipan\" size={24} />\n </Caret>\n </Box>\n </Field>\n )\n})\n\nconst resetSelect = css`\n border: none;\n border-radius: 0;\n font-size: 16px;\n appearance: none; /* remove default arrow */\n outline: none;\n`\n\ninterface SSelect {\n $error: boolean\n $frontIcon?: string\n $fallbackStyle?: boolean\n}\n\nconst StyledSelect = styled.select<SSelect>`\n ${resetSelect}\n width: 100%;\n height: 32px;\n\n cursor: pointer;\n background-color: ${({ $fallbackStyle }) =>\n $fallbackStyle ? theme.colors.custard : theme.colors.cream};\n\n border-radius: 12px;\n padding: 18px 14px;\n border: 2px solid\n ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n $frontIcon != '' &&\n `\n padding-left: 42px;\n `}\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n ${({ $error }) =>\n !$error &&\n css`\n :not(:disabled) {\n &:hover,\n &:focus,\n &:focus-visible,\n &:checked {\n border-color: ${theme.colors.marzipan}\n }\n `}\n`\n\nconst Caret = styled.div`\n position: absolute;\n z-index: 1;\n right: 15px;\n pointer-events: none;\n color: ${theme.colors.marzipan};\n`\n"]}
|
|
@@ -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"]}
|
|
@@ -5,7 +5,7 @@ import { Icon } from '../../Icon';
|
|
|
5
5
|
import { Text } from '../../Text';
|
|
6
6
|
export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
|
|
7
7
|
const labelTag = fieldType === 'field' ? 'label' : 'legend';
|
|
8
|
-
return (React.createElement(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className:
|
|
8
|
+
return (React.createElement(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps },
|
|
9
9
|
label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
|
|
10
10
|
React.createElement(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor }, label),
|
|
11
11
|
assistiveText && (React.createElement(Text, { tag: "p", color: "sesame", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: labelTag, typo: "label", color: error ? 'strawberry' : 'sesame', htmlFor: htmlFor, mb: { custom: 4 } },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAUjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACK,EAAE,EAAE;IACvB,MAAM,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3D,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EACvD,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n children: ReactNode\n className?: string\n htmlFor?: string\n fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n children,\n fieldType,\n renderAsTitle,\n htmlFor,\n className,\n label,\n assistiveText,\n error,\n errorMsg,\n required,\n completed,\n ...marginProps\n}: InternalFieldProps) => {\n const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n return (\n <Container\n forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n className={className}\n {...marginProps}\n >\n {label && (\n <>\n {renderAsTitle ? (\n <Box mb=\"16px\">\n <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n {label}\n </Text>\n\n {assistiveText && (\n <Text tag=\"p\" color=\"sesame\" mt={{ custom: 4 }}>\n {assistiveText}\n </Text>\n )}\n </Box>\n ) : (\n <Text\n tag={labelTag}\n typo=\"label\"\n color={error ? 'strawberry' : 'sesame'}\n htmlFor={htmlFor}\n mb={{ custom: 4 }}\n >\n {label}\n {required && (\n <Text tag=\"span\" typo=\"body-small\" color=\"strawberry\">\n *\n </Text>\n )}\n </Text>\n )}\n </>\n )}\n\n <Box>{children}</Box>\n {fieldType === 'field' && assistiveText && !renderAsTitle && (\n <Text\n tag={labelTag}\n typo=\"caption\"\n color={error ? 'strawberry' : 'sesame'}\n mt={{ custom: 4 }}\n >\n {assistiveText}\n </Text>\n )}\n\n {error &&\n errorMsg &&\n (typeof errorMsg === 'string' ? (\n <Text tag=\"span\" typo=\"caption\" color=\"strawberry\" mt=\"8px\">\n {errorMsg}\n </Text>\n ) : (\n <Box mt=\"8px\">{errorMsg}</Box>\n ))}\n\n {/* When completed is false, whitespace is rendered */}\n {completed !== undefined && (\n <AnimationWrapper\n $displayStatus={completed}\n $isError={!!(error && errorMsg)}\n >\n <StatusWrapper mt={'8px'}>\n <Icon render=\"included\" size={16} color=\"apple\" />\n <Text typo=\"caption\" color=\"apple\">\n Complete\n </Text>\n </StatusWrapper>\n </AnimationWrapper>\n )}\n </Container>\n )\n}\n\nconst AnimationWrapper = styled(Box)<{\n $displayStatus: boolean\n $isError: boolean\n}>`\n width: 0;\n overflow: hidden;\n\n ${({ $displayStatus }) =>\n $displayStatus &&\n css`\n transition: width 0.6s ease-in;\n width: 100%;\n `}\n\n /* This enables animation to appear when previous state is error */\n ${({ $isError }) =>\n $isError &&\n css`\n height: 0;\n `}\n`\n\nconst StatusWrapper = styled(Box)`\n display: flex;\n align-items: center;\n gap: 4px;\n`\n\nconst Container = styled(Box)`\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n\n // In case, the element is a 'fieldset', we remove the border\n border: 0;\n`\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",
|