@wix/design-system/dist/esm/SelectableAccordion/docs/examples.js

@wix/design-system

export var structure = "\n<SelectableAccordion\n  items={[\n    {\n      title: 'Option 1',\n      content: 'Content 1',\n    },\n    {\n      title: 'Option 2',\n      content: 'Content 2',\n    },\n  ]}\n/>\n";
export var typesExample = "\n<Layout cols=\"1\">\n  <SelectableAccordion\n    type=\"radio\"\n    items={[\n      {\n        title: 'Radio Option 1',\n        content: 'Content Text 1',\n      },\n      {\n        title: 'Radio Option 2',\n        content: 'Content Text 2',\n      },\n    ]}\n  />\n  <SelectableAccordion\n    type=\"checkbox\"\n    items={[\n      {\n        title: 'Checkbox Option 1',\n        content: 'Content Text 1',\n      },\n      {\n        title: 'Checkbox Option 2',\n        content: 'Content Text 2',\n      },\n    ]}\n  />\n  <SelectableAccordion\n    type=\"toggle\"\n    items={[\n      {\n        title: 'Toggle Feature 1',\n        content: 'Content Text 1',\n      },\n      {\n        title: 'Toggle Feature 2',\n        content: 'Content Text 2',\n      },\n    ]}\n  />\n</Layout>\n";
export var subtitle = "\n<SelectableAccordion\n  items={[\n    {\n      title: 'Option 1',\n      subtitle: 'Description of the first group',\n      content: 'Enabled content is here.',\n    },\n    {\n      title: 'Option 2',\n      subtitle: 'Description of the second group',\n      content: 'Enabled content is here.',\n    },\n  ]}\n/>;\n";
export var initiallyOpen = "<SelectableAccordion\n  items={[\n    {\n      initiallyOpen: true,\n      title: 'Initially Active Option',\n      content: 'This content is available initially.',\n    },\n    {\n      title: ' Initially Inactive Option',\n      content: 'This content is available when group is opened.',\n    },\n  ]}\n/>\n";
export var disabledState = "<SelectableAccordion\n  items={[\n    {\n      title: 'Option 1',\n      subtitle: 'Description of the first group',\n      content: 'Enabled content is here.',\n      disabled: true,\n    },\n    {\n      title: 'Option 2',\n      subtitle: 'Description of the second group',\n      content: 'Enabled content is here.',\n      initiallyOpen: true,\n      disabled: true,\n    },\n  ]}\n/>\n";
export var advancedExample = "<SelectableAccordion\n  type=\"radio\"\n  items={[\n    {\n      initiallyOpen: true,\n      title: 'Free Plan',\n      subtitle: 'Offer this plan free of charge',\n      content: (\n        <FormField label=\"Length of Plan\" required>\n          <Dropdown\n            placeholder=\"Select\"\n            options={[{ id: 0, value: '1 Month' }]}\n          />\n        </FormField>\n      ),\n    },\n    {\n      title: 'One-time Payment',\n      subtitle: 'Charge a single upfront fee',\n      content: (\n        <Layout cols={1}>\n          <FormField label=\"Price\" required>\n            <Input value={99} prefix={<Input.Affix>$</Input.Affix>} />\n          </FormField>\n          <FormField label=\"Length of Plan\" required>\n            <Dropdown\n              placeholder=\"Select\"\n              options={[{ id: 0, value: '1 Month' }]}\n            />\n          </FormField>\n        </Layout>\n      ),\n    },\n    {\n      title: 'Recurring Payments',\n      subtitle: 'Charge a weekly, monthly or yearly fee',\n      content: (\n        <Layout cols={1}>\n          <FormField label=\"Payment Frequency\" required>\n            <Dropdown\n              initialSelectedId={0}\n              options={[{ id: 0, value: 'Monthly' }]}\n            />\n          </FormField>\n          <FormField label=\"Price\" required>\n            <Input value={99} prefix={<Input.Affix>$</Input.Affix>} />\n            </FormField>\n          <FormField label=\"Length of Plan\" required>\n            <Dropdown\n              initialSelectedId={0}\n              options={[{ id: 0, value: '1 Month' }]}\n            />\n          </FormField>\n        </Layout>\n      ),\n    },\n  ]}\n/>\n";
export var controlledExample = "\n() => {\n  const [firstOptionOpen, setFirstOptionOpen] = React.useState(true)\n\n  return (\n    <>\n      <Button onClick={() => setFirstOptionOpen(!firstOptionOpen)}>\n        Open {firstOptionOpen ? 'second' : 'first'} option\n      </Button>\n      <SelectableAccordion\n        items={[\n          {\n            open: firstOptionOpen,\n            title: 'Initially Active Option',\n            content: 'This content is available initially.',\n          },\n          {\n            title: 'Initially Inactive Option',\n            content: 'This content is available when group is opened.',\n            open: !firstOptionOpen,\n          },\n        ]}\n      />\n    </>\n  )\n}\n";