Filter chips (#212)

* Add generic Chips component

* Changeset

* Addres comments, split out Chip

* Fix headers

.yarn/versions/4b5fabc8.yml

@@ -0,0 +1,3 @@
+releases:
+  "@essex/components": minor
+  essex-toolkit-stories: patch

packages/components/docs/markdown/components.chip.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [Chip](./components.chip.md)
+
+## Chip variable
+
+<b>Signature:</b>
+
+```typescript
+Chip: React.FC<ChipItemProps>
+```

packages/components/docs/markdown/components.chipitem.canclose.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItem](./components.chipitem.md) &gt; [canClose](./components.chipitem.canclose.md)
+
+## ChipItem.canClose property
+
+<b>Signature:</b>
+
+```typescript
+canClose?: boolean;
+```

packages/components/docs/markdown/components.chipitem.iconname.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItem](./components.chipitem.md) &gt; [iconName](./components.chipitem.iconname.md)
+
+## ChipItem.iconName property
+
+<b>Signature:</b>
+
+```typescript
+iconName?: string;
+```

packages/components/docs/markdown/components.chipitem.key.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItem](./components.chipitem.md) &gt; [key](./components.chipitem.key.md)
+
+## ChipItem.key property
+
+<b>Signature:</b>
+
+```typescript
+key: string;
+```

packages/components/docs/markdown/components.chipitem.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItem](./components.chipitem.md)
+
+## ChipItem interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ChipItem 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [canClose?](./components.chipitem.canclose.md) |  | boolean | <i>(Optional)</i> |
+|  [iconName?](./components.chipitem.iconname.md) |  | string | <i>(Optional)</i> |
+|  [key](./components.chipitem.key.md) |  | string |  |
+|  [text?](./components.chipitem.text.md) |  | string | <i>(Optional)</i> |
+

packages/components/docs/markdown/components.chipitem.text.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItem](./components.chipitem.md) &gt; [text](./components.chipitem.text.md)
+
+## ChipItem.text property
+
+<b>Signature:</b>
+
+```typescript
+text?: string;
+```

packages/components/docs/markdown/components.chipitemprops.item.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItemProps](./components.chipitemprops.md) &gt; [item](./components.chipitemprops.item.md)
+
+## ChipItemProps.item property
+
+<b>Signature:</b>
+
+```typescript
+item: ChipItem;
+```

packages/components/docs/markdown/components.chipitemprops.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItemProps](./components.chipitemprops.md)
+
+## ChipItemProps interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ChipItemProps 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [item](./components.chipitemprops.item.md) |  | [ChipItem](./components.chipitem.md) |  |
+|  [onClick?](./components.chipitemprops.onclick.md) |  | () =&gt; void | <i>(Optional)</i> |
+|  [onClose?](./components.chipitemprops.onclose.md) |  | () =&gt; void | <i>(Optional)</i> |
+|  [styles?](./components.chipitemprops.styles.md) |  | [ChipsStyles](./components.chipsstyles.md) | <i>(Optional)</i> |
+

packages/components/docs/markdown/components.chipitemprops.onclick.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItemProps](./components.chipitemprops.md) &gt; [onClick](./components.chipitemprops.onclick.md)
+
+## ChipItemProps.onClick property
+
+<b>Signature:</b>
+
+```typescript
+onClick?: () => void;
+```

packages/components/docs/markdown/components.chipitemprops.onclose.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItemProps](./components.chipitemprops.md) &gt; [onClose](./components.chipitemprops.onclose.md)
+
+## ChipItemProps.onClose property
+
+<b>Signature:</b>
+
+```typescript
+onClose?: () => void;
+```

packages/components/docs/markdown/components.chipitemprops.styles.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipItemProps](./components.chipitemprops.md) &gt; [styles](./components.chipitemprops.styles.md)
+
+## ChipItemProps.styles property
+
+<b>Signature:</b>
+
+```typescript
+styles?: ChipsStyles;
+```

packages/components/docs/markdown/components.chips.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [Chips](./components.chips.md)
+
+## Chips variable
+
+<b>Signature:</b>
+
+```typescript
+Chips: React.FC<ChipsProps>
+```

packages/components/docs/markdown/components.chipsprops.items.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsProps](./components.chipsprops.md) &gt; [items](./components.chipsprops.items.md)
+
+## ChipsProps.items property
+
+<b>Signature:</b>
+
+```typescript
+items: ChipItem[];
+```

packages/components/docs/markdown/components.chipsprops.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsProps](./components.chipsprops.md)
+
+## ChipsProps interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ChipsProps 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [items](./components.chipsprops.items.md) |  | [ChipItem](./components.chipitem.md)<!-- -->\[\] |  |
+|  [onClick?](./components.chipsprops.onclick.md) |  | (key: string) =&gt; void | <i>(Optional)</i> |
+|  [onClose?](./components.chipsprops.onclose.md) |  | (key: string) =&gt; void | <i>(Optional)</i> |
+|  [styles?](./components.chipsprops.styles.md) |  | [ChipsStyles](./components.chipsstyles.md) | <i>(Optional)</i> |
+

packages/components/docs/markdown/components.chipsprops.onclick.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsProps](./components.chipsprops.md) &gt; [onClick](./components.chipsprops.onclick.md)
+
+## ChipsProps.onClick property
+
+<b>Signature:</b>
+
+```typescript
+onClick?: (key: string) => void;
+```

packages/components/docs/markdown/components.chipsprops.onclose.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsProps](./components.chipsprops.md) &gt; [onClose](./components.chipsprops.onclose.md)
+
+## ChipsProps.onClose property
+
+<b>Signature:</b>
+
+```typescript
+onClose?: (key: string) => void;
+```

packages/components/docs/markdown/components.chipsprops.styles.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsProps](./components.chipsprops.md) &gt; [styles](./components.chipsprops.styles.md)
+
+## ChipsProps.styles property
+
+<b>Signature:</b>
+
+```typescript
+styles?: ChipsStyles;
+```

packages/components/docs/markdown/components.chipsstyles.item.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsStyles](./components.chipsstyles.md) &gt; [item](./components.chipsstyles.item.md)
+
+## ChipsStyles.item property
+
+<b>Signature:</b>
+
+```typescript
+item?: ChipStyles;
+```

packages/components/docs/markdown/components.chipsstyles.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsStyles](./components.chipsstyles.md)
+
+## ChipsStyles interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ChipsStyles 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [item?](./components.chipsstyles.item.md) |  | [ChipStyles](./components.chipstyles.md) | <i>(Optional)</i> |
+|  [root?](./components.chipsstyles.root.md) |  | React.CSSProperties | <i>(Optional)</i> |
+

packages/components/docs/markdown/components.chipsstyles.root.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipsStyles](./components.chipsstyles.md) &gt; [root](./components.chipsstyles.root.md)
+
+## ChipsStyles.root property
+
+<b>Signature:</b>
+
+```typescript
+root?: React.CSSProperties;
+```

packages/components/docs/markdown/components.chipstyles.close.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipStyles](./components.chipstyles.md) &gt; [close](./components.chipstyles.close.md)
+
+## ChipStyles.close property
+
+<b>Signature:</b>
+
+```typescript
+close?: IButtonStyles;
+```

packages/components/docs/markdown/components.chipstyles.icon.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipStyles](./components.chipstyles.md) &gt; [icon](./components.chipstyles.icon.md)
+
+## ChipStyles.icon property
+
+<b>Signature:</b>
+
+```typescript
+icon?: IIconStyles;
+```

packages/components/docs/markdown/components.chipstyles.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipStyles](./components.chipstyles.md)
+
+## ChipStyles interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ChipStyles 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [close?](./components.chipstyles.close.md) |  | IButtonStyles | <i>(Optional)</i> |
+|  [icon?](./components.chipstyles.icon.md) |  | IIconStyles | <i>(Optional)</i> |
+|  [root?](./components.chipstyles.root.md) |  | React.CSSProperties | <i>(Optional)</i> |
+

packages/components/docs/markdown/components.chipstyles.root.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@essex/components](./components.md) &gt; [ChipStyles](./components.chipstyles.md) &gt; [root](./components.chipstyles.root.md)
+
+## ChipStyles.root property
+
+<b>Signature:</b>
+
+```typescript
+root?: React.CSSProperties;
+```

packages/components/docs/markdown/components.md

@@ -36,6 +36,11 @@
 
 |  Interface | Description |
 |  --- | --- |
+|  [ChipItem](./components.chipitem.md) |  |
+|  [ChipItemProps](./components.chipitemprops.md) |  |
+|  [ChipsProps](./components.chipsprops.md) |  |
+|  [ChipsStyles](./components.chipsstyles.md) |  |
+|  [ChipStyles](./components.chipstyles.md) |  |
 |  [ClippedGraphProps](./components.clippedgraphprops.md) |  |
 |  [CollapsiblePanelContainerProps](./components.collapsiblepanelcontainerprops.md) | The container that will have multiple CollapsiblePanel as children, passing the last and first params automatically. |
 |  [CollapsiblePanelProps](./components.collapsiblepanelprops.md) | Props for the CollapsiblePanel |
@@ -72,6 +77,8 @@
 |  Variable | Description |
 |  --- | --- |
 |  [ButtonChoiceGroup](./components.buttonchoicegroup.md) | ButtonChoiceGroup is a ChoiceGroup component that renders as buttons instead of radios. |
+|  [Chip](./components.chip.md) |  |
+|  [Chips](./components.chips.md) |  |
 |  [ClippedGraph](./components.clippedgraph.md) | Creates a line chart that handles extreme distributions with a few clipping/wrapping strategies. The "clipped graph" concept was presented by Haihan Lin at VIS2019. https://vdl.sci.utah.edu/publications/2019\_infovis\_clipped\_graphs/ This chart can also produce a horizon plot, or be formatted to look like a sparkline. For examples of these variants, see the visual sandbox: https://visualsandbox.azurewebsites.net/\#/experiments/clipped-graphs |
 |  [CollapsiblePanel](./components.collapsiblepanel.md) | CollapsiblePanel displays a Header and its child that collapse and expands with keyboard arrows, space, enter or onclick showing the 'hidden' rendering |
 |  [CollapsiblePanelContainer](./components.collapsiblepanelcontainer.md) | Receives an array of CollapsiblePanel as children to render it with first and last props calculating it automatically |