Toggle Group component with storybook and testing
This commit is contained in:
adilallo
@@ -0,0 +1,137 @@
|
||||
import React, { memo, useCallback, useId, forwardRef } from "react";
|
||||
|
||||
const ToggleGroup = memo(
|
||||
forwardRef((props, ref) => {
|
||||
const {
|
||||
children,
|
||||
className = "",
|
||||
position = "left",
|
||||
state = "default",
|
||||
showText = true,
|
||||
ariaLabel,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const groupId = useId();
|
||||
|
||||
// Position-based styling for border radius
|
||||
const getPositionStyles = useCallback((pos) => {
|
||||
switch (pos) {
|
||||
case "left":
|
||||
return "rounded-l-[var(--measures-radius-medium)] rounded-r-none";
|
||||
case "middle":
|
||||
return "rounded-none";
|
||||
case "right":
|
||||
return "rounded-r-[var(--measures-radius-medium)] rounded-l-none";
|
||||
default:
|
||||
return "rounded-[var(--measures-radius-medium)]";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// State-based styling
|
||||
const getStateStyles = useCallback((state) => {
|
||||
switch (state) {
|
||||
case "hover":
|
||||
return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)]";
|
||||
case "focus":
|
||||
return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]";
|
||||
case "selected":
|
||||
return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)] shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]";
|
||||
case "default":
|
||||
default:
|
||||
return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)]";
|
||||
}
|
||||
}, []);
|
||||
|
||||
const positionStyles = getPositionStyles(position);
|
||||
const stateStyles = getStateStyles(state);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(e) => {
|
||||
if (onChange) {
|
||||
onChange(e);
|
||||
}
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const handleFocus = useCallback(
|
||||
(e) => {
|
||||
if (onFocus) {
|
||||
onFocus(e);
|
||||
}
|
||||
},
|
||||
[onFocus]
|
||||
);
|
||||
|
||||
const handleBlur = useCallback(
|
||||
(e) => {
|
||||
if (onBlur) {
|
||||
onBlur(e);
|
||||
}
|
||||
},
|
||||
[onBlur]
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
if (onChange) {
|
||||
onChange(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
[onChange]
|
||||
);
|
||||
|
||||
const toggleClasses = `
|
||||
${positionStyles}
|
||||
${stateStyles}
|
||||
py-[var(--measures-spacing-008)]
|
||||
px-[var(--measures-spacing-008)]
|
||||
gap-[var(--measures-spacing-008)]
|
||||
font-inter
|
||||
font-medium
|
||||
text-[12px]
|
||||
leading-[12px]
|
||||
cursor-pointer
|
||||
transition-all
|
||||
duration-200
|
||||
focus:outline-none
|
||||
focus-visible:shadow-[0_0_5px_1px_#3281F8]
|
||||
hover:bg-[var(--color-magenta-magenta100)]
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
${className}
|
||||
`
|
||||
.trim()
|
||||
.replace(/\s+/g, " ");
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
id={groupId}
|
||||
type="button"
|
||||
role="button"
|
||||
aria-label={ariaLabel || (showText ? undefined : "Toggle option")}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
className={toggleClasses}
|
||||
{...rest}
|
||||
>
|
||||
{showText ? children : children || "☰"}
|
||||
</button>
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
ToggleGroup.displayName = "ToggleGroup";
|
||||
|
||||
export default ToggleGroup;
|
||||
+251
-62
@@ -1,18 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Toggle from "../components/Toggle";
|
||||
import ToggleGroup from "../components/ToggleGroup";
|
||||
|
||||
export default function FormsPlayground() {
|
||||
const [selectedToggle, setSelectedToggle] = useState("active");
|
||||
const [selectedFilter, setSelectedFilter] = useState("all");
|
||||
const [toggleStates, setToggleStates] = useState({
|
||||
default: false,
|
||||
hover: false,
|
||||
selected: true,
|
||||
focus: false,
|
||||
disabled: false,
|
||||
icon: false,
|
||||
text: false,
|
||||
both: false,
|
||||
});
|
||||
|
||||
const handleToggleChange = (key) => (e) => {
|
||||
@@ -22,76 +20,267 @@ export default function FormsPlayground() {
|
||||
}));
|
||||
};
|
||||
|
||||
const handleToggleGroupChange = (position) => (e) => {
|
||||
setSelectedToggle(position);
|
||||
};
|
||||
|
||||
const handleFilterChange = (filter) => (e) => {
|
||||
setSelectedFilter(filter);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-[24px] space-y-[24px]">
|
||||
<h1 className="font-bricolage text-[24px]">Forms Playground</h1>
|
||||
|
||||
<section className="space-y-[12px]">
|
||||
<h2 className="font-space text-[18px]">Toggle Examples</h2>
|
||||
<h2 className="font-space text-[18px]">Toggle Group Examples</h2>
|
||||
<div
|
||||
className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg"
|
||||
//style={{ backgroundColor: "white" }}
|
||||
style={{ backgroundColor: "white" }}
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">States</h3>
|
||||
<div className="space-y-[12px]">
|
||||
<Toggle
|
||||
label="Default State"
|
||||
checked={toggleStates.default}
|
||||
onChange={handleToggleChange("default")}
|
||||
/>
|
||||
<Toggle
|
||||
label="Hover State"
|
||||
checked={toggleStates.hover}
|
||||
onChange={handleToggleChange("hover")}
|
||||
state="hover"
|
||||
/>
|
||||
<Toggle
|
||||
label="Selected State"
|
||||
checked={toggleStates.selected}
|
||||
onChange={handleToggleChange("selected")}
|
||||
/>
|
||||
<Toggle
|
||||
label="Focus State"
|
||||
checked={toggleStates.focus}
|
||||
onChange={handleToggleChange("focus")}
|
||||
state="focus"
|
||||
/>
|
||||
<Toggle
|
||||
label="Disabled State"
|
||||
checked={toggleStates.disabled}
|
||||
onChange={handleToggleChange("disabled")}
|
||||
disabled
|
||||
/>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">
|
||||
Interactive Toggle Group
|
||||
</h3>
|
||||
<div className="flex">
|
||||
<ToggleGroup
|
||||
position="left"
|
||||
state={selectedToggle === "active" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("active")}
|
||||
>
|
||||
Active Deals
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="middle"
|
||||
state={selectedToggle === "inactive" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("inactive")}
|
||||
>
|
||||
Inactive Deals
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="right"
|
||||
state={selectedToggle === "pending" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("pending")}
|
||||
>
|
||||
Pending Deals
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">Content Types</h3>
|
||||
<div className="space-y-[12px]">
|
||||
<Toggle
|
||||
label="Icon Only"
|
||||
checked={toggleStates.icon}
|
||||
onChange={handleToggleChange("icon")}
|
||||
showIcon={true}
|
||||
icon="I"
|
||||
/>
|
||||
<Toggle
|
||||
label="Text Only"
|
||||
checked={toggleStates.text}
|
||||
onChange={handleToggleChange("text")}
|
||||
showText={true}
|
||||
text="Toggle"
|
||||
/>
|
||||
<Toggle
|
||||
label="Icon and Text"
|
||||
checked={toggleStates.both}
|
||||
onChange={handleToggleChange("both")}
|
||||
showIcon={true}
|
||||
showText={true}
|
||||
icon="I"
|
||||
text="Toggle"
|
||||
/>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">States</h3>
|
||||
<div className="flex space-x-2">
|
||||
<ToggleGroup position="left" state="default" showText={true}>
|
||||
Default
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="middle" state="hover" showText={true}>
|
||||
Hover
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="middle" state="focus" showText={true}>
|
||||
Focus
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="right" state="selected" showText={true}>
|
||||
Selected
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">Positions</h3>
|
||||
<div className="flex">
|
||||
<ToggleGroup position="left" state="default" showText={true}>
|
||||
Left
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="middle" state="default" showText={true}>
|
||||
Middle
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="middle" state="default" showText={true}>
|
||||
Middle
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="right" state="default" showText={true}>
|
||||
Right
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-space text-[14px] mb-[8px]">Without Text</h3>
|
||||
<div className="flex">
|
||||
<ToggleGroup position="left" state="default" showText={false}>
|
||||
Icon
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="middle" state="selected" showText={false}>
|
||||
Icon
|
||||
</ToggleGroup>
|
||||
<ToggleGroup position="right" state="default" showText={false}>
|
||||
Icon
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Visibility Examples */}
|
||||
<section className="space-y-[12px]">
|
||||
<h2 className="font-space text-[18px]">Content Visibility Examples</h2>
|
||||
|
||||
{/* Deal Management Example */}
|
||||
<div className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg">
|
||||
<h3 className="font-space text-[14px] mb-[8px]">Deal Management</h3>
|
||||
<div className="flex">
|
||||
<ToggleGroup
|
||||
position="left"
|
||||
state={selectedToggle === "active" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("active")}
|
||||
>
|
||||
Active Deals
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="middle"
|
||||
state={selectedToggle === "inactive" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("inactive")}
|
||||
>
|
||||
Inactive Deals
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="right"
|
||||
state={selectedToggle === "pending" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleToggleGroupChange("pending")}
|
||||
>
|
||||
Pending Deals
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* Content that changes based on toggle selection */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
{selectedToggle === "active" && (
|
||||
<div>
|
||||
<h4 className="font-semibold text-green-700 mb-2">
|
||||
Active Deals
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
||||
<span>Summer Sale - 50% Off</span>
|
||||
<span className="text-green-600 font-semibold">$299</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
||||
<span>Black Friday Special</span>
|
||||
<span className="text-green-600 font-semibold">$199</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedToggle === "inactive" && (
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-700 mb-2">
|
||||
Inactive Deals
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border opacity-60">
|
||||
<span>Holiday Sale - Expired</span>
|
||||
<span className="text-gray-500 line-through">$399</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border opacity-60">
|
||||
<span>Spring Clearance - Ended</span>
|
||||
<span className="text-gray-500 line-through">$149</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedToggle === "pending" && (
|
||||
<div>
|
||||
<h4 className="font-semibold text-yellow-700 mb-2">
|
||||
Pending Deals
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
||||
<span>Cyber Monday - Coming Soon</span>
|
||||
<span className="text-yellow-600 font-semibold">$99</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
||||
<span>New Year Sale - Pending</span>
|
||||
<span className="text-yellow-600 font-semibold">$79</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Example */}
|
||||
<div className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg">
|
||||
<h3 className="font-space text-[14px] mb-[8px]">Content Filter</h3>
|
||||
<div className="flex">
|
||||
<ToggleGroup
|
||||
position="left"
|
||||
state={selectedFilter === "all" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleFilterChange("all")}
|
||||
>
|
||||
All
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="middle"
|
||||
state={selectedFilter === "featured" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleFilterChange("featured")}
|
||||
>
|
||||
Featured
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
position="right"
|
||||
state={selectedFilter === "recent" ? "selected" : "default"}
|
||||
showText={true}
|
||||
onChange={handleFilterChange("recent")}
|
||||
>
|
||||
Recent
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div
|
||||
className={`p-4 rounded-lg border ${
|
||||
selectedFilter === "all" || selectedFilter === "featured"
|
||||
? "block"
|
||||
: "hidden"
|
||||
}`}
|
||||
>
|
||||
<h4 className="font-semibold">Featured Article</h4>
|
||||
<p className="text-gray-600 text-sm">
|
||||
This is a featured article that shows when "All" or "Featured"
|
||||
is selected.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`p-4 rounded-lg border ${
|
||||
selectedFilter === "all" || selectedFilter === "recent"
|
||||
? "block"
|
||||
: "hidden"
|
||||
}`}
|
||||
>
|
||||
<h4 className="font-semibold">Recent Post</h4>
|
||||
<p className="text-gray-600 text-sm">
|
||||
This is a recent post that shows when "All" or "Recent" is
|
||||
selected.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`p-4 rounded-lg border ${
|
||||
selectedFilter === "all" ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<h4 className="font-semibold">General Content</h4>
|
||||
<p className="text-gray-600 text-sm">
|
||||
This content only shows when "All" is selected.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user