@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