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

@wix/design-system

export var simple = "\n<div\n  style={{\n    width: '284px',\n    height: '120px'\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        title: 'option 1'\n      }),\n      listItemActionBuilder({\n        id: 1,\n        title: 'option 2',\n      }),\n      listItemActionBuilder({\n        id: 2,\n        title: 'option 3',\n      }),\n    ]}\n/>\n</div>\n";
export var prefix = "\n<div\n  style={{\n    width: '284px',\n    height: '120px'\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        prefixIcon: <Icons.Edit />,\n        title: 'option 1'\n      }),\n      listItemActionBuilder({\n        id: 1,\n        prefixIcon: <Icons.Edit />,\n        title: 'option 2',\n      }),\n      listItemActionBuilder({\n        id: 2,\n        prefixIcon: <Icons.Edit />,\n        title: 'option 3',\n      }),\n    ]}\n/>\n</div>\n";
export var skin = "\n<div\n  style={{\n    width: '284px',\n    height: '120px'\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        title: 'standard'\n      }),\n      listItemActionBuilder({\n        id: 1,\n        skin:'destructive',\n        title: 'destructive',\n      }),\n    ]}\n/>\n</div>\n";
export var size = "\n<Layout>\n <Cell span={6}>\n    <div\n      style={{\n        width: '200px',\n        height: '120px'\n      }}\n    >\n        <DropdownLayout\n          visible\n          options={[\n            listItemActionBuilder({\n              id: 0,\n              size: 'small',\n              prefixIcon: <Icons.Edit />,\n              title: 'small'\n            }),\n            listItemActionBuilder({\n              id: 1,\n              size: 'small',\n              prefixIcon: <Icons.Edit />,\n              title: 'small',\n            }),\n            listItemActionBuilder({\n              id: 2,\n              size: 'small',\n              prefixIcon: <Icons.Edit />,\n              title: 'small',\n            }),\n          ]}\n      />\n    </div>\n  </Cell>\n  <Cell span={6}>\n    <div\n      style={{\n        width: '200px',\n        height: '120px'\n      }}\n    >\n        <DropdownLayout\n          visible\n          options={[\n            listItemActionBuilder({\n              id: 0,\n              size: 'medium',\n              prefixIcon: <Icons.Edit />,\n              title: 'medium'\n            }),\n            listItemActionBuilder({\n              id: 1,\n              size: 'medium',\n              prefixIcon: <Icons.Edit />,\n              title: 'medium',\n            }),\n            listItemActionBuilder({\n              id: 2,\n              size: 'medium',\n              prefixIcon: <Icons.Edit />,\n              title: 'medium',\n            }),\n          ]}\n      />\n    </div>\n  </Cell>\n</Layout>\n";
export var state = "\n<div\n  style={{\n    width: '284px',\n    height: '120px'\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        title: 'disabled',\n        prefixIcon: <Icons.Edit />,\n        disabled: true,\n      }),\n      listItemActionBuilder({\n        id: 1,\n        title: 'disabled',\n        prefixIcon: <Icons.Edit />,\n        disabled: true,\n      }),\n      listItemActionBuilder({\n        id: 2,\n        title: 'disabled',\n        prefixIcon: <Icons.Edit />,\n        disabled: true,\n      }),\n    ]}\n/>\n</div>\n";
export var wrap = "\n<div style={{ height: '240px' }}>\n  <Layout>\n  <Cell span={6}>\n    <div\n      style={{\n        width: '200px',\n        height: '120px'\n      }}\n    >\n      <DropdownLayout\n        visible\n        options={[\n          listItemActionBuilder({\n            id: 0,\n            as: \"button\",\n            title: 'very long message very very',\n            ellipsis: true,\n          }),\n          listItemActionBuilder({\n            id: 1,\n            as: \"button\",\n            title: 'very long message very very',\n            ellipsis: true,\n          }),\n          listItemActionBuilder({\n            id: 2,\n            as: \"button\",\n            title: 'very long message very very',\n            ellipsis: true,\n          }),\n        ]}\n      />\n    </div>\n    </Cell>\n    <Cell span={6}>\n    <div\n      style={{\n        width: '200px',\n        height: '120px'\n      }}\n    >\n      <DropdownLayout\n        visible\n        options={[\n          listItemActionBuilder({\n            id: 0,\n            as: \"button\",\n            title: 'very long message very',\n          }),\n          listItemActionBuilder({\n            id: 1,\n            as: \"button\",\n            title: 'very long message very',\n          }),\n          listItemActionBuilder({\n            id: 2,\n            as: \"button\",\n            title: 'very long message very',\n          }),\n        ]}\n      />\n    </div>\n    </Cell>\n  </Layout>\n</div>\n";
export var custom = "\n<div\n  style={{\n    width: '284px',\n    height: '120px'\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        as: 'a',\n        title: 'An <a/> tag',\n        href: 'https://www.wix.com',\n        target: '_blank',\n      }),\n      listItemActionBuilder({\n        id: 1,\n        as: Link,\n        title: 'A react router <Link/> tag',\n        to: '/home'\n      }),\n      listItemActionBuilder({\n        id: 2,\n        as: \"button\",\n        title: 'A native <button/> tag',\n        onClick: () => alert('yay')\n      }),\n    ]}\n/>\n</div>\n";
export var subtitle = "\n<div\n  style={{\n    width: '284px',\n    height: '240px',\n  }}\n>\n  <DropdownLayout\n    visible\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        title: 'option 1',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'option 1 subtitle',\n      }),\n      listItemActionBuilder({\n        id: 1,\n        title: 'option 2',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'option 2 subtitle - with a very long text that will eventually be wrapped',\n      }),\n      listItemActionBuilder({\n        id: 2,\n        ellipsis: true,\n        title: 'option 3',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'option 3 subtitle - with a very long text that will eventually be truncated by ellipsis',\n      }),\n    ]}\n  />\n</div>;\n";
export var suffix = "\n<div\n  style={{\n    width: '284px',\n    height: '654px',\n  }}\n>\n  <DropdownLayout\n    visible\n    maxHeightPixels={720}\n    options={[\n      listItemActionBuilder({\n        id: 0,\n        title: 'Standard option',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'Standard option subtitle',\n        suffix: 'Suffix',\n      }),\n      listItemActionBuilder({\n        id: 1,\n        skin: 'destructive',\n        title: 'Destructive option',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'Destructive option subtitle',\n        suffix: 'Suffix',\n      }),\n      listItemActionBuilder({\n        id: 2,\n        disabled: true,\n        title: 'Disabled option',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'Destructive option subtitle',\n        suffix: 'Suffix',\n      }),\n      { id: 'divider-1', value: '-' },\n      listItemActionBuilder({\n        id: 4,\n        title: 'Wrapped option',\n        prefixIcon: <Icons.Edit />,\n        subtitle:\n          'Ellipsis option subtitle with long text that will eventually be wrapped',\n        suffix: 'Suffix text that will eventually be wrapped',\n      }),\n      listItemActionBuilder({\n        id: 5,\n        ellipsis: true,\n        title: 'Ellipsis option',\n        prefixIcon: <Icons.Edit />,\n        subtitle:\n          'Ellipsis option subtitle with long text that will eventually be truncated by ellipsis',\n        suffix: 'Suffix text that will eventually be truncated by ellipsis',\n      }),\n      { id: 'divider-2', value: '-' },\n      listItemActionBuilder({\n        id: 6,\n        title: 'Suffix as Text component',\n        prefixIcon: <Icons.Edit />,\n        subtitle: 'Subtitle',\n        suffix: (\n          <Text>\n            Suffix as <i>Text</i>\n          </Text>\n        ),\n      }),\n      listItemActionBuilder({\n        id: 7,\n        title: 'Suffix as Icon component',\n        subtitle: 'Subtitle',\n        suffix: <Icons.Edit />,\n      }),\n      { id: 'divider-3', value: '-' },\n      listItemActionBuilder({\n        id: 8,\n        size: 'small',\n        title: 'Small size option',\n        prefixIcon: <Icons.Edit />,\n        suffix: 'Suffix',\n      }),\n    ]}\n  />\n</div>;\n";