diff --git a/package.json b/package.json index f1af59701..8de6513f3 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "@chbphone55/classnames": "2.0.0", "@lingui/core": "4.7.0", "@warp-ds/core": "1.0.2", - "@warp-ds/css": "1.8.4", + "@warp-ds/css": "1.8.5", "@warp-ds/icons": "2.0.0", "@warp-ds/uno": "1.9.0", "react-focus-lock": "2.9.7", diff --git a/packages/_helpers/dead-toggle.tsx b/packages/_helpers/dead-toggle.tsx index d70c26dae..64b1b5135 100644 --- a/packages/_helpers/dead-toggle.tsx +++ b/packages/_helpers/dead-toggle.tsx @@ -33,6 +33,11 @@ export interface DeadToggleProps { * Additional classnames to the toggle label */ labelClassName?: string; + + /** + * Name of the toggle input + */ + name?: string; } export function DeadToggle(props: DeadToggleProps) { @@ -50,7 +55,7 @@ export function DeadToggle(props: DeadToggleProps) { [ccDeadToggle.labelRadio]: props.radio, [ccDeadToggle.labelCheckbox]: props.checkbox, })} - name="dead-toggle" + name={props.name ? `${props.name}:dead-toggle` : "dead-toggle"} controlled={true} onChange={() => undefined} value={props.value} diff --git a/packages/card/stories/Card.stories.tsx b/packages/card/stories/Card.stories.tsx index d95273969..d665dfbcf 100644 --- a/packages/card/stories/Card.stories.tsx +++ b/packages/card/stories/Card.stories.tsx @@ -330,3 +330,57 @@ export const DeadToggleInCard = () => { ); }; + +const ClickableCardWithDeadToggle = ({ + id, + isSelected, + setSelected, + name, +}: { + id: number; + isSelected: boolean; + setSelected: (value: React.SetStateAction) => void; + name: string; +}) => { + return ( + + + setSelected(id)} autofocus={true}> +

{id}

+
+
+ ); +}; + +export const MultipleDeadToggleGroups = () => { + const [selectedRadio, setSelectedRadio] = useState(null); + const [secondSelectedRadio, setSecondSelectedRadio] = useState(null); + return ( +
+
+ Radio group 1 + {[0, 1, 2].map((i) => ( + setSelectedRadio(x)} + name="first-group" + /> + ))} +
+
+ Radio group 2 + {[3, 4, 5].map((i) => ( + setSecondSelectedRadio(x)} + name="second-group" + /> + ))} +
+
+ ); +}; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ba48c3d65..5b9de85f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ dependencies: specifier: 1.0.2 version: 1.0.2 '@warp-ds/css': - specifier: 1.8.4 - version: 1.8.4 + specifier: 1.8.5 + version: 1.8.5 '@warp-ds/icons': specifier: 2.0.0 version: 2.0.0 @@ -6288,8 +6288,8 @@ packages: '@floating-ui/dom': 0.5.4 dev: false - /@warp-ds/css@1.8.4: - resolution: {integrity: sha512-SGX3bORF13I20XzCg4Ab0FlUe7Yj4XUH1/klu+NeCVrIWymPhExgFTbFJrs+9RvTKh81d4/IFiyiqdHSpRG6iw==} + /@warp-ds/css@1.8.5: + resolution: {integrity: sha512-vh0Nv0aSPH6ymBqhrvbwvEd3iaYuRmuiJOUAbD/md4x9uDXqQpdhtuTCw4eDkNm9NswaRso2iQUl5oeL12t3/w==} dependencies: '@warp-ds/tokenizer': 0.0.4 '@warp-ds/uno': 1.9.0