CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align props with figma

Browse Source
This commit is contained in:
adilallo
2026-02-04 16:52:03 -07:00
parent ee9784271f
commit af7e2d3e51
53 changed files with 1287 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/Checkbox.stories.js
+54 -4
View File
@@ -46,13 +46,13 @@ export default {
},
mode: {
control: "select",
options: ["standard", "inverse"],
description: "Visual mode of the checkbox",
options: ["standard", "inverse", "Standard", "Inverse"],
description: "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
},
state: {
control: "select",
options: ["default", "hover", "focus"],
description: "Interaction state for static display",
options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
description: "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
},
disabled: {
control: "boolean",
@@ -206,3 +206,53 @@ export const AllModes = () => {
</div>
);
};
// Test PascalCase props from Figma
export const FigmaPascalCase = () => {
const [standardChecked, setStandardChecked] = React.useState(false);
const [inverseChecked, setInverseChecked] = React.useState(false);
return (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-4 text-white">Figma PascalCase Props (Standard/Inverse)</h3>
<p className="text-sm text-gray-400 mb-4">
These components accept both PascalCase (from Figma) and lowercase (from codebase) prop values.
</p>
<div className="space-y-4">
<Checkbox
label="Standard Mode (PascalCase)"
checked={standardChecked}
mode="Standard"
state="Default"
onChange={({ checked }) => setStandardChecked(checked)}
/>
<Checkbox
label="Inverse Mode (PascalCase)"
checked={inverseChecked}
mode="Inverse"
state="Default"
onChange={({ checked }) => setInverseChecked(checked)}
/>
</div>
</div>
<div>
<h3 className="text-lg font-semibold mb-4 text-white">Mixed Case (backward compatibility)</h3>
<div className="space-y-4">
<Checkbox
label="Standard mode (lowercase) - still works"
checked={false}
mode="standard"
state="default"
/>
<Checkbox
label="Inverse Mode (mixed) - still works"
checked={false}
mode="inverse"
state="Default"
/>
</div>
</div>
</div>
);
};
stories/RadioButton.stories.js
+54 -4
View File
@@ -21,13 +21,13 @@ export default {
},
mode: {
control: "select",
options: ["standard", "inverse"],
description: "Visual mode of the radio button",
options: ["standard", "inverse", "Standard", "Inverse"],
description: "Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
},
state: {
control: "select",
options: ["default", "hover", "focus"],
description: "Interaction state for static display",
options: ["default", "hover", "focus", "selected", "Default", "Hover", "Focus", "Selected"],
description: "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
},
disabled: {
control: "boolean",
@@ -247,3 +247,53 @@ export const InverseAllStates = () => {
</div>
);
};
// Test PascalCase props from Figma
export const FigmaPascalCase = () => {
const [standardChecked, setStandardChecked] = React.useState(false);
const [inverseChecked, setInverseChecked] = React.useState(false);
return (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-4 text-white">Figma PascalCase Props (Standard/Inverse)</h3>
<p className="text-sm text-gray-400 mb-4">
These components accept both PascalCase (from Figma) and lowercase (from codebase) prop values.
</p>
<div className="space-y-4">
<RadioButton
label="Standard Mode (PascalCase)"
checked={standardChecked}
mode="Standard"
state="Default"
onChange={({ checked }) => setStandardChecked(checked)}
/>
<RadioButton
label="Inverse Mode (PascalCase)"
checked={inverseChecked}
mode="Inverse"
state="Default"
onChange={({ checked }) => setInverseChecked(checked)}
/>
</div>
</div>
<div>
<h3 className="text-lg font-semibold mb-4 text-white">Mixed Case (backward compatibility)</h3>
<div className="space-y-4">
<RadioButton
label="Standard mode (lowercase) - still works"
checked={false}
mode="standard"
state="default"
/>
<RadioButton
label="Inverse Mode (mixed) - still works"
checked={false}
mode="inverse"
state="Default"
/>
</div>
</div>
</div>
);
};