Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(deps): ⬆️ update dev dependencies (minor) #208

Merged
merged 2 commits into from
Nov 26, 2021
Merged

chore(deps): ⬆️ update dev dependencies (minor) #208

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
753a8c6
chore(deps): ⬆️ update dev dependencies (minor)
renovate-bot Nov 26, 2021
64d4482
style(format): 🎨 update prettier & format
navin-moorthy Nov 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
style(format): 🎨 update prettier & format
  • Loading branch information
@navin-moorthy
navin-moorthy committed Nov 26, 2021
commit 64d448237be2f76383b4ba4457344b71d564b392
27 changes: 14 additions & 13 deletions src/button-group/stories/ButtonGroupCollapsed.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@ import { Button, ButtonGroup, ButtonGroupProps } from "../../index";

export type ButtonGroupCollapsedProps = ButtonGroupProps & {};

export const ButtonGroupCollapsed: React.FC<ButtonGroupCollapsedProps> =
props => {
return (
<ButtonGroup collapsed {...props}>
<Button>Undo</Button>
<Button>Redo</Button>
<Button>Copy</Button>
<Button>Paste</Button>
<Button>Delete</Button>
<Button>Close</Button>
</ButtonGroup>
);
};
export const ButtonGroupCollapsed: React.FC<
ButtonGroupCollapsedProps
> = props => {
return (
<ButtonGroup collapsed {...props}>
<Button>Undo</Button>
<Button>Redo</Button>
<Button>Copy</Button>
<Button>Paste</Button>
<Button>Delete</Button>
<Button>Close</Button>
</ButtonGroup>
);
};

export default ButtonGroupCollapsed;
117 changes: 59 additions & 58 deletions src/checkbox-group/stories/CheckboxGroupTriBoolState.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,75 +4,76 @@ import { Checkbox, CheckboxGroup } from "../../index";

export type CheckboxGroupTriBoolStateProps = {};

export const CheckboxGroupTriBoolState: React.FC<CheckboxGroupTriBoolStateProps> =
() => {
const [checkedItems, setCheckedItems] = React.useState<boolean[]>([
false,
false,
false,
]);
export const CheckboxGroupTriBoolState: React.FC<
CheckboxGroupTriBoolStateProps
> = () => {
const [checkedItems, setCheckedItems] = React.useState<boolean[]>([
false,
false,
false,
]);

const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

return (
<CheckboxGroup aria-label="Tristate checkbox using boolean values">
return (
<CheckboxGroup aria-label="Tristate checkbox using boolean values">
<Checkbox
state={isIndeterminate ? "indeterminate" : allChecked}
onStateChange={value =>
setCheckedItems([
value as boolean,
value as boolean,
value as boolean,
])
}
label="Check all items"
aria-controls="check1 check2 check3"
/>
<CheckboxGroup
role="presentation"
aria-label="For presentation"
stack="horizontal"
>
<Checkbox
state={isIndeterminate ? "indeterminate" : allChecked}
state={checkedItems[0]}
onStateChange={value =>
setCheckedItems([
value as boolean,
checkedItems[1],
checkedItems[2],
])
}
label="Item 1"
id="check1"
/>
<Checkbox
state={checkedItems[1]}
onStateChange={value =>
setCheckedItems([
checkedItems[0],
value as boolean,
checkedItems[2],
])
}
label="Item 2"
id="check2"
/>
<Checkbox
state={checkedItems[2]}
onStateChange={value =>
setCheckedItems([
checkedItems[0],
checkedItems[1],
value as boolean,
])
}
label="Check all items"
aria-controls="check1 check2 check3"
label="Item 3"
id="check3"
/>
<CheckboxGroup
role="presentation"
aria-label="For presentation"
stack="horizontal"
>
<Checkbox
state={checkedItems[0]}
onStateChange={value =>
setCheckedItems([
value as boolean,
checkedItems[1],
checkedItems[2],
])
}
label="Item 1"
id="check1"
/>
<Checkbox
state={checkedItems[1]}
onStateChange={value =>
setCheckedItems([
checkedItems[0],
value as boolean,
checkedItems[2],
])
}
label="Item 2"
id="check2"
/>
<Checkbox
state={checkedItems[2]}
onStateChange={value =>
setCheckedItems([
checkedItems[0],
checkedItems[1],
value as boolean,
])
}
label="Item 3"
id="check3"
/>
</CheckboxGroup>
</CheckboxGroup>
);
};
</CheckboxGroup>
);
};

export default CheckboxGroupTriBoolState;
127 changes: 64 additions & 63 deletions src/checkbox-group/stories/CheckboxGroupTriStringState.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,75 +4,76 @@ import { Checkbox, CheckboxGroup, CheckboxProps } from "../../index";

export type CheckboxGroupTriStringStateProps = {};

export const CheckboxGroupTriStringState: React.FC<CheckboxGroupTriStringStateProps> =
() => {
const values = React.useMemo(() => ["Apple", "Orange", "Watermelon"], []);
const [itemState, setItemState] = React.useState<
NonNullable<CheckboxProps["state"]>
>([]);
const [groupState, setGroupState] =
React.useState<NonNullable<CheckboxProps["state"]>>(false);
export const CheckboxGroupTriStringState: React.FC<
CheckboxGroupTriStringStateProps
> = () => {
const values = React.useMemo(() => ["Apple", "Orange", "Watermelon"], []);
const [itemState, setItemState] = React.useState<
NonNullable<CheckboxProps["state"]>
>([]);
const [groupState, setGroupState] =
React.useState<NonNullable<CheckboxProps["state"]>>(false);

const isAllChecked = groupState === true;
const isIndeterminate = groupState === "indeterminate";
const isAllChecked = groupState === true;
const isIndeterminate = groupState === "indeterminate";

// updates items when group is toggled
React.useEffect(() => {
if (groupState === true) {
setItemState(values);
} else if (groupState === false) {
setItemState([]);
}
}, [groupState, values]);
// updates items when group is toggled
React.useEffect(() => {
if (groupState === true) {
setItemState(values);
} else if (groupState === false) {
setItemState([]);
}
}, [groupState, values]);

// updates group when items is toggled
React.useEffect(() => {
if (!Array.isArray(itemState)) return;
// updates group when items is toggled
React.useEffect(() => {
if (!Array.isArray(itemState)) return;

if (itemState.length === values.length) {
setGroupState(true);
} else if (itemState.length) {
setGroupState("indeterminate");
} else {
setGroupState(false);
}
}, [itemState, values]);
if (itemState.length === values.length) {
setGroupState(true);
} else if (itemState.length) {
setGroupState("indeterminate");
} else {
setGroupState(false);
}
}, [itemState, values]);

return (
<CheckboxGroup aria-label="Tristate Checkbox using string values">
<Checkbox
state={groupState}
onStateChange={setGroupState}
label={
isIndeterminate
? "Fruits in the basket"
: isAllChecked
? "Basket full"
: "Basket empty"
}
aria-controls="check1 check2 check3"
/>
<CheckboxGroup
role="presentation"
aria-label="For presentation"
stack="horizontal"
>
{values.map((value, i) => {
return (
<Checkbox
key={i}
id={`check${i + 1}`}
state={itemState}
onStateChange={setItemState}
value={value}
label={capitalizeFirstLetter(value)}
/>
);
})}
</CheckboxGroup>
return (
<CheckboxGroup aria-label="Tristate Checkbox using string values">
<Checkbox
state={groupState}
onStateChange={setGroupState}
label={
isIndeterminate
? "Fruits in the basket"
: isAllChecked
? "Basket full"
: "Basket empty"
}
aria-controls="check1 check2 check3"
/>
<CheckboxGroup
role="presentation"
aria-label="For presentation"
stack="horizontal"
>
{values.map((value, i) => {
return (
<Checkbox
key={i}
id={`check${i + 1}`}
state={itemState}
onStateChange={setItemState}
value={value}
label={capitalizeFirstLetter(value)}
/>
);
})}
</CheckboxGroup>
);
};
</CheckboxGroup>
);
};

export default CheckboxGroupTriStringState;

Expand Down
55 changes: 28 additions & 27 deletions src/checkbox/stories/CheckboxCustomAdvanced.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,35 @@ import {

export type CheckboxCustomAdvancedProps = {};

export const CheckboxCustomAdvanced: React.FC<CheckboxCustomAdvancedProps> =
() => {
const [state, onStateChange] = React.useState<CheckboxState["state"]>([]);
export const CheckboxCustomAdvanced: React.FC<
CheckboxCustomAdvancedProps
> = () => {
const [state, onStateChange] = React.useState<CheckboxState["state"]>([]);

return (
<>
<CustomCheckbox value="one" state={state} onStateChange={onStateChange}>
Button one 😁
</CustomCheckbox>
<CustomCheckbox
className="ml-2"
value="two"
state={state}
onStateChange={onStateChange}
>
Button two 🤓
</CustomCheckbox>
<CustomCheckbox
className="ml-2"
value="three"
state={state}
onStateChange={onStateChange}
>
Button three 👻
</CustomCheckbox>
</>
);
};
return (
<>
<CustomCheckbox value="one" state={state} onStateChange={onStateChange}>
Button one 😁
</CustomCheckbox>
<CustomCheckbox
className="ml-2"
value="two"
state={state}
onStateChange={onStateChange}
>
Button two 🤓
</CustomCheckbox>
<CustomCheckbox
className="ml-2"
value="three"
state={state}
onStateChange={onStateChange}
>
Button three 👻
</CustomCheckbox>
</>
);
};

export default CheckboxCustomAdvanced;

Expand Down
Loading