{{#freestyle-guide title='Nomad UI'subtitle='Styles and Patterns'}}
{{#freestyle-section name='Buttons' as |section|}}
{{#freestyle-subsection name='Standard' section=section}}
{{#freestyle-usage 'buttons-standard' title='Standard Buttons'}}
{{/freestyle-usage}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='Outlines' section=section}}
{{#freestyle-usage 'buttons-outlines' title='Outline Buttons'}}
{{/freestyle-usage}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='Hollow' section=section}}
{{#freestyle-usage 'buttons-hollow' title='Hollow Buttons'}}
{{/freestyle-usage}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='Sizing' section=section}}
{{#freestyle-usage 'buttons-sizing' title='Button Sizes'}}
{{/freestyle-usage}}
{{/freestyle-subsection}}
{{/freestyle-section}}
{{#freestyle-section name='Distribution Bar' as |section|}}
{{#freestyle-subsection name='Standard' section=section}}
{{#freestyle-usage 'distribution-bar-standard'}}
{{distribution-bar data=distributionBarData}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
The distribution bar chart proportionally show data in a single bar. It includes a tooltip out of the box, assumes the size of the container element, and is designed to be styled with CSS.
{{/freestyle-annotation}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='With Classes' section=section}}
{{#freestyle-usage 'distribution-bar-with-classes'}}
{{distribution-bar data=distributionBarDataWithClasses}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
If a datum provides a className property, it will be assigned to the corresponding rect element, allowing for custom colorization.
{{/freestyle-annotation}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='Flexible Sizing' section=section}}
{{#freestyle-usage 'distribution-bar-sizing-1'}}
{{distribution-bar data=distributionBarData}}
{{/freestyle-usage}}
{{#freestyle-usage 'distribution-bar-sizing-2'}}
{{distribution-bar data=distributionBarData}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
Distribution bar assumes the dimensions of the container.
{{/freestyle-annotation}}
{{/freestyle-subsection}}
{{#freestyle-subsection name='Updating Data' section=section}}
{{#freestyle-usage 'distribution-bar-updating'}}
{{distribution-bar data=distributionBarDataRotating}}
{{/freestyle-usage}}
{{#freestyle-annotation}}
Distribution bar animates with data changes.
{{/freestyle-annotation}}
{{/freestyle-subsection}}
{{/freestyle-section}}
{{/freestyle-guide}}