@wix/design-system/dist/docs/components/BadgeSelectItemExamples.md

@wix/design-system

## Feature Examples


### Subtitle
- description: <p>Additional information, like user email or address can be inserted to subtitle area.</p>
- example: 
```jsx 
() => {
  return (
    <BadgeSelectItem text='Badge Select Item' subtitle='subtitle' />
  );
};
```

### Suffix
- description: <p>Component has a suffix area. If plain text or icon is inserted, component automatically inverts the color when selected.</p>
- example: 
```jsx 
() => {
  return (
    <BadgeSelectItem text='BadgeSelectItem with suffix' suffix='suffix' />
  );
};
```

### Sizes
- description: <p>The component supports 2 text sizes - medium (default) and small.</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={1}>
      <BadgeSelectItem text='Medium size - default' size='medium' />
      <BadgeSelectItem text='Small size' size='small' />
    </Layout>
  );
};
```

### Text cropping
- description: <p>By default component wraps the text. If needed it can be configured to show ellipsis and display full value on hover.</p>
- example: 
```jsx 
() => {
  return (
    <Layout cols={1}>
      <BadgeSelectItem
        text="This is a very very very very long text that is perfect to demonstrate how it will wrap at some point"
        subtitle="This is a very very very very long subtitle that is perfect to demonstrate how it will wrap into multiple lines  at some point"
      />
      <BadgeSelectItem
        ellipsis
        text="This is a very very very very long text that is perfect to demonstrate how it will cropped by ellipsis at some point"
        subtitle="This is a very very very very long text that is perfect to demonstrate how it will cropped by ellipsis at some point"
      />
    </ Layout>
  );
};
```

### Advanced Example
- description: <p>All properties work together and can be combined in various ways. It can be rendered as standalone or as part of dropdown.</p>
- example: 
```jsx 
() => {
  return (
    <DropdownLayout
      visible
      inContainer
      selectedId={2}
      options={[
        badgeSelectItemBuilder({
          id: 0,
          text: 'Not Paid',
          subtitle: 'Waiting for a payment',
          skin: 'danger',
        }),
        badgeSelectItemBuilder({
          id: 1,
          text: 'Paid in Person',
          subtitle: 'Cash',
          skin: 'success',
          disabled: true,
        }),
        badgeSelectItemBuilder({
          id: 2,
          text: 'Paid Plan: Gold',
          subtitle: '8/10 sessions left • Valid until Jan 24 2021',
        }),
        badgeSelectItemBuilder({
          id: 3,
          text: 'Paid Plan: Silver',
          subtitle: '10/10 sessions left • Valid until Dec 22 2020',
          skin: 'warning'
        })
      ]}
    />
  );
};
```