@paprika/collapsible-checklists

Description

A controlled component that has checkable groups of checkable items. Checking the parent checks all of the children.

Installation

yarn add @paprika/collapsible-checklists

or with npm:

npm install @paprika/collapsible-checklists

Props

CollapsibleChecklists

Prop	Type	required	default	Description
children	node	true	-
onChange	func	true	-	Callback triggered when the input state is changed

Group

Prop	Type	required	default	Description
children	node	false	[]	Probably an array of "Items", but could be a Spinner or anything else
isCheckedByDefault	bool	false	false	If checkbox is checked by default
isDisabled	bool	false	false	If CollapsibleChecklists is disabled
isIndeterminateByDefault	bool	false	false	Sets a visual state whether a checklist has been checked or not
onExpand	func	false	null	Sets if the CollapsibleChecklists is open
title	node	true	-	Indicate the title for the checklist

Heading

Prop	Type	required	default	Description
children	node	true	-	Content of the heading

Item

Prop	Type	required	default	Description
children	node	true	-
isChecked	bool	false	false	If the item is checked or not
isDisabled	bool	false	false	If the item is disabled
onChange	func	false	() => {}	Callback when user checked an item

Usage

import CollapsibleChecklists from "@paprika/collapsible-checklists";

const YourComponent = () => {
  return (
    <CollapsibleChecklists
      onChange={() => {
        /*...*/
      }}
    >
      <CollapsibleChecklists.Heading>Flowers</CollapsibleChecklists.Heading>

      <CollapsibleChecklists.Group title="Roses">
        <CollapsibleChecklists.Item isChecked>Damask</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isChecked>Eden</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isChecked>Lady Banks</CollapsibleChecklists.Item>
      </CollapsibleChecklists.Group>

      <CollapsibleChecklists.Group title="Irises">
        <CollapsibleChecklists.Item isChecked>Siberian</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item>Yellow</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isDisabled>Bearded</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item>Netted</CollapsibleChecklists.Item>
      </CollapsibleChecklists.Group>
    </CollapsibleChecklists>
  );
};

export default YourComponent;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG