# Solfège Suite Components - LLM Documentation This file indexes @theorchard/suite-components documentation for LLM consumption. Generated from Solfège Suite component JSDoc and Solfège markdown documentation. **Main website:** [https://solfege.theorchard.com](https://solfege.theorchard.com) **Package:** `@theorchard/suite-components` **Install/import:** `import { ComponentName } from '@theorchard/suite-components';` ## visuals ### CoverArt CovertArt is our container for products, artists, and videos covers. It provides various sizes and contains a placeholder visual. - **Documentation:** [https://solfege.theorchard.com/components/cover-art](https://solfege.theorchard.com/components/cover-art) - **Tags:** visuals - **Type:** atom - **Status:** live ###### CovertArt is our container for products, artists, and videos covers. It provides various sizes and contains a placeholder visual. #### How to use Cover art comes with properties that will handle the size, shape, and placeholder/fallback image. #### Optional properties ##### Unknown The unknown is shown when the URL is empty or does not return an image and have the property `unknown`. ##### Sizes We standardised cover art sizes to match the space available in the various components where they're used. Our standard cover art sizes are: `20px`, `30px`, `40px`, `80px`. It's possible to pass a custom size using `width={50}`, or use `width="100pct` to grow the artwork to the size of its container. ##### Shapes Cover art comes in various shapes that visually convey the type of object they represent: - **Round** — artist - **Square** — audio product - **Landscape/Letterbox** – video product ##### Loading The `loading` prop displays a SkeletonLoader in place even if the url image is set, useful for indicating related content is being loaded and want to show it all at once. ##### Placeholder The placeholder is shown automaticallly when the URL is empty or does not... ### Image Please use CoverArt or UserThumb instead. If you need a different kind of image in your app, please get in touch with the OSP team. - **Documentation:** [https://solfege.theorchard.com/components/image](https://solfege.theorchard.com/components/image) - **Tags:** visuals - **Type:** atom - **Status:** deprecated #### How to use ##### Default ### UserThumb UserThumb is our container for user's profile picture. It provides various sizes and contains a placeholder visual using a plain colour and user's initials. - **Documentation:** [https://solfege.theorchard.com/components/user-thumb](https://solfege.theorchard.com/components/user-thumb) - **Tags:** visuals - **Type:** atom - **Status:** live #### When to use - Displaying user images. #### How to use ##### Initials ## layout-structure ### Card Cards represent objects and display specific attributes of said object. They can be static or clickable. When clickable, they behave like a link to the object page. - **Documentation:** [https://solfege.theorchard.com/components/card](https://solfege.theorchard.com/components/card) - **Tags:** layout-structure, objects-attributes - **Type:** organism - **Status:** live ###### Cards represent objects and display specific attributes of said object. They can be static or clickable. When clickable, they behave like a link to the object page. A card group can always be converted to a table view so interchangeable rules are applied to both card groups and tables. Cards provide a snapshot of information about an object. It’s best used when the data displayed needs to be concise and hierarchically structured. When a lot of data needs to be displayed about a number of objects, consider using a table or switching between table and card views. #### Optional properties ##### Expandable Cards can have an optional `expandable` feature. When a card is expandable, its content can be collapsed to save space on the page. Only the content of the header will be visible when a card is collapsed. The trigger for expanding/collapsing will be automatically rendered inside the ``. The expanding will only affect the ``. ##### Disabled The Card can be disabled. This disables the `onClick` functionality, and any interactable elements except non-disabled header buttons. ##### Parent card Cards represent objects. ### Col Col is a component that displays content in a column. This component comes from bootstrap and shouldn't be used in Suite. - **Documentation:** [https://solfege.theorchard.com/components/col](https://solfege.theorchard.com/components/col) - **Tags:** layout-structure - **Type:** organism - **Status:** deprecated This component is a direct proxy of [React Bootstrap's Grid's Col](https://react-bootstrap-v4.netlify.app/layout/grid). #### How to use ##### Default #### API Mirrored from react-bootstrap's [Col](https://react-bootstrap-v4.netlify.app/layout/grid/#col-props) ### Container Container is a component that displays content in a box. This component comes from bootstrap and shouldn't be used in Suite. - **Documentation:** [https://solfege.theorchard.com/components/container](https://solfege.theorchard.com/components/container) - **Tags:** layout-structure - **Type:** organism - **Status:** deprecated This component is a direct proxy of [React Bootstrap's Container](https://react-bootstrap-v4.netlify.app/layout/grid). _Note that the difference in width between the default and fluid usage will only be noticeable on page body sizes larger than 1400px_ #### How to use ##### Default ##### Fluid #### API Mirrored from react-bootstrap's [Container](https://react-bootstrap-v4.netlify.app/layout/grid/#container-props) ### PageHeader PageHeader component is used to set the context of a page. It usually represents an object, or a list of objects. The information and call to actions displayed in the page header are all related to the object presented on the page. - **Documentation:** [https://solfege.theorchard.com/components/page-header](https://solfege.theorchard.com/components/page-header) - **Tags:** layout-structure - **Type:** organism - **Status:** revised ###### Header for application pages The header component provides basic functionality that is commonly used across applications, along with a layout that ensures the header will be placed correctly. It has built-in support for cover art, titles/subtitles and breadcrumbs. The remaining content can be customised by the application. #### Customising content PageHeader accepts a number of props corresponding to different sections of the header: - `topMetadata`, including `left` and `right` sections. - `mainContent`, including `prepend` and `append` sections before/after the `title`. - `bottomMetadata` - `actions` All component props pass in `loading`, `small`, and `defaultLoading` props to the rendering function which can be used to tailor the result to the header state. #### Optional Properties ##### Cover Art The cover art can be customised in the same way as the [CoverArt](https://solfege.theorchard.com/components/cover-art) component. ##### Breadcrumbs Breadcrumbs can be passed in with the `breadcrumbs` prop. ### Row Row is a component that displays content in a row. This component comes from bootstrap and shouldn't be used in Suite. - **Documentation:** [https://solfege.theorchard.com/components/row](https://solfege.theorchard.com/components/row) - **Tags:** layout-structure - **Type:** template - **Status:** deprecated This component is a direct proxy from [React Bootstrap's Grid's Row](https://react-bootstrap-v4.netlify.app/layout/grid). #### How to use ##### Default #### API Mirrored from react-bootstrap's [Row](https://react-bootstrap-v4.netlify.app/layout/grid/#row-props) ### Section Sections are information containers: they organise attributes of an object and group them in a way that makes sense depending on the purpose of a page. - **Documentation:** [https://solfege.theorchard.com/components/section](https://solfege.theorchard.com/components/section) - **Tags:** layout-structure, objects-attributes - **Type:** template - **Status:** live ###### Sections are information containers: they organise attributes of an object and group them in a way that makes sense depending on the purpose of a page. Sections include 3 levels of hierarchy: Top section. Subsection, Nested section. This is to visually reflect the hierarchical relationship between attributes of a same nature or function. [Learn more about sections](https://solfege.theorchard.com/foundations/12697177-520f-80ac-bd82-ee233a800652#sections) #### How to use Each section regardless of their hierarchical level contains an optional header, and an optional filter row. The placement of content/atomic components in the header and filter row should follow the guidelines provided in the designs. ##### Information architecture considerations Where we place call to actions and filters conveys the scope of what the action/filter will affect: - Actions and filters placed in the top section header affect the content of this entire top section (its subsections and nested sections included if there are any). - Actions and filters placed in a subsection header only affect the content of this specific subsection (and nested subsection if there are any). - Actions and... ### Sidebar Sidebars are collapsible elements designed to present additional information to the original content of a page. They remain hidden by default to maximise available space. They differ from sidecars as per their nature: they are inline elements that push content, they aren’t overlays. - **Documentation:** [https://solfege.theorchard.com/components/sidebar](https://solfege.theorchard.com/components/sidebar) - **Tags:** layout-structure - **Type:** template - **Status:** live ###### Sidebars are collapsible elements designed to present additional information to the original content of a page. Sidebars remain hidden by default to maximise available space. They differ from sidecars as per their nature: they are inline elements that push content, they aren’t overlays. Because they aren't overlays, sidebars don't block the interaction with the rest of the page. That means users can still interact with it and click buttons and links to navigate out of the page. Because of that, they're used only for displaying secondary information that doesn't require to be displayed on the page at all times. - If your intent is to display a sub process that has to be completed by users before being able to navigate out or it, please use a [sidecar](https://solfege.theorchard.com/components/sidecar). - If the information you want to display requires the user's full attention, please use a [modal](https://solfege.theorchard.com/components/modal). #### How to use Sidebar automatically renders into a portal in line with the main content of the page. ## form-elements ### Checkbox Checkboxes are square interactive UI elements used to turn an option on or off. They allow the user to select one or more items from a set. - **Documentation:** [https://solfege.theorchard.com/components/checkbox](https://solfege.theorchard.com/components/checkbox) - **Tags:** form-elements - **Type:** atom - **Status:** live ###### Checkboxes are square interactive UI elements used to turn an option on or off. They allow the user to select one or more items from a set. #### Optional properties ##### HelpTooltip You can add a helpTooltip using the prop `toolTip`. Helptooltip will shows on the right hand side of the checkbox label. ##### Icon You can add an icon using the prop `icon`. Icons will show on the left hand side of the checkbox label. ##### ColorIndex Checkboxes can be colored following the `data-#` series used in our charts, by setting the `colorIndex` property with the corresponding color number. ##### CustomColor The color can also be fully customised by passing in a valid CSS value in the `customColor` prop. Make sure to set an `id` to your checkbox, so that its label can be used to interact with it. ##### Locked For cases where the checkbox state is locked, the checkbox can be replaced with a padlock with the `locked` prop. #### API This component is styled proxy of [React Bootstrap's Form.Check](https://react-bootstrap-v4.netlify.app/components/forms/#form-check-props). ### Control Control is a wrapper for form controls that adds a note and an error message. - **Documentation:** [https://solfege.theorchard.com/components/control](https://solfege.theorchard.com/components/control) - **Tags:** form-elements - **Type:** organism - **Status:** deprecated #### ##### Example ### CountrySelect CountrySelect provides a list of countries and allows user to select a single one from the list. - **Documentation:** [https://solfege.theorchard.com/components/country-select](https://solfege.theorchard.com/components/country-select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### CountrySelect provides a list of countries and allows user to select a single one from the list. The list of countries provided comes from `@theorchard/countries`. #### Variants ##### Compact (filter) We use compact/filter variants in view mode, when the Country Select is used to filter through a list of objects (displayed in a table or a list). This is to save space and give more visibility to the content itself, and to visually emphasise on the mode the user is in. #### Advanced usage ##### Global option If your app needs a country that represents "all countries from the list now and in the future" you can use this variant to add an option labelled "Global". ##### Custom countries In some cases, apps need to show countries that don't exist anymore (e.g. Czechoslovakia). This variant allows you to add custom countries. Note: those countries won't have a flag in our library. You can use the 'missing' flag from our [countryFlag component](https://solfege.theorchard.com/components/country-flag#missing-vs-unknown). ### DatePicker DatePicker provides a calendar view and allows user to select a single date. - **Documentation:** [https://solfege.theorchard.com/components/date-picker](https://solfege.theorchard.com/components/date-picker) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### DatePicker provides a calendar view and allows user to select a single date. #### How to use Date picker is used when a single date can be selected. For a range, please use [DateRangePicker component](https://solfege.theorchard.com/components/date-range-picker). #### Optional properties ##### Min/max dates You can specify the first date and last date of the calendar view. ##### Form field When used in a creation or editing form, you can wrap the date picker inside a [Field component](https://solfege.theorchard.com/components/field). This will allow you to add a label, tooltip, notes and form control. ##### Compact (filter) We use compact/filter variants in view mode, when the Date Picker is used to filter through a list of objects (displayed in a table or a list). This is to save space and give more visibility to the content itself, and to visually emphasise on the mode the user is in. #### Customization You can customize the appearance and behavior of the DatePicker by providing custom components. ### DateRangePicker DateRangePicker provides a calendar view and allows user to select a date range. - **Documentation:** [https://solfege.theorchard.com/components/date-range-picker](https://solfege.theorchard.com/components/date-range-picker) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### DateRangePicker provides a calendar view and allows user to select a date range. #### How to use Date range picker is used when a date range can be selected. For a single date, please use [DatePicker component](https://solfege.theorchard.com/components/date-picker). #### Optional properties ##### Min/max dates You can specify the first date and last date of the calendar view. ##### Left Panel If you want to propose specific pre-selected ranges, you can display them on the left. Note: when comparing several tracks, pre-selected ranges based off the release date can't be shown in the calendar view. ##### Clearable The `isClearable` property displays a clear cross in the trigger that allows user to clear the date range in one click. ##### With option label in select instead of period duration By default, when a pre-selected range is selected, the trigger displays the total amount of days as well as the start date and end date. To display the pre-selected option label instead, use `showOptionLabel`. ##### Single date range selection When the `singleDateRange` prop is enabled, it's possible to select the same start and end date. #### Variants ##### Controlled Us... ### Dropdown Please use Select instead. - **Documentation:** [https://solfege.theorchard.com/components/dropdown](https://solfege.theorchard.com/components/dropdown) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** deprecated ###### Solfège dropdowns are input fields that allow users to set one or several value(s) by selecting them from a displayed list of options. Dropdowns are used when the list of results is finite and small enough to fit in the list container. Note: if the list of options is too important and/or can’t be displayed by default, we must use the SearchDropdown component. #### How to use ##### Default (Single select) The default dropdown allows for one single item to be selected from a list. ##### Multi select The multi-select variant allows users to select several options from the list. Each option can be removed individually, or altogether by clicking on the clear cross. ##### Creatable When users should be able to create new options in the list, the Creatable variant offers them the option to create their own option. ### EditableMetadata EditableMetadata is a component that allows users to edit a string Metadata value - **Documentation:** [https://solfege.theorchard.com/components/editable-metadata](https://solfege.theorchard.com/components/editable-metadata) - **Tags:** form-elements - **Type:** molecule - **Status:** live #### How to use An extension of the `Metadata` component that allows for editing its content. ### EditableMetadata EditableMetadata is a component that allows users to edit a string Metadata value - **Documentation:** [https://solfege.theorchard.com/components/editable-metadata](https://solfege.theorchard.com/components/editable-metadata) - **Tags:** form-elements - **Type:** molecule - **Status:** live #### How to use An extension of the `Metadata` component that allows for editing its content. ### Field Field is a wrapper around a Form.Group and a Label. - **Documentation:** [https://solfege.theorchard.com/components/field](https://solfege.theorchard.com/components/field) - **Tags:** form-elements - **Type:** molecule - **Status:** revised ###### Field is a component is a group of elements that act as a whole, it consists of a built-in text or wrapped input field with a label, and various states such as error, warning, loading, etc. ##### Default ##### Uncontrolled Built-in text input can be used as an uncontrolled component, which means that the value is internally managed. Use prop `textRef` to pass and later access the value of the input. ##### With HelpText Will show a help icon next to the label, which will show a tooltip when hovered with the help text. ##### With Note ##### With error or warning state Use property object `message` as `{ type: 'error' | 'warning', message: str }` to show a warning or error message below the field. In the case of error it will also change the border color of the input to red. ##### With loading state Also using property object `message` as `{ type: 'loading', message: str }` will show a loading spinner with a message next to it. ### Form Form is a wrapper that groups form-related components. - **Documentation:** [https://solfege.theorchard.com/components/form](https://solfege.theorchard.com/components/form) - **Tags:** form-elements - **Type:** molecule - **Status:** revised This component is a direct proxy of [React Bootstrap's Form](https://react-bootstrap-v4.netlify.app/components/forms/). #### How to use ##### Default #### API Mirrored from react-bootstrap's [Form](https://react-bootstrap-v4.netlify.app/components/forms/#form-props) ### InputGroup Please use SegmentedInput with static value instead. - **Documentation:** [https://solfege.theorchard.com/components/input-group](https://solfege.theorchard.com/components/input-group) - **Tags:** form-elements - **Type:** atom - **Status:** deprecated This component is a direct proxy of [React Bootstrap's InputGroup](https://react-bootstrap-v4.netlify.app/components/input-group/). #### How to use ##### Default #### API Mirrored from react-bootstrap's [InputGroup](https://react-bootstrap-v4.netlify.app/components/input-group/#input-group-api) ### Label Label is used to create a caption for a form control. It has optional properties to indicate whether the form field is optional or not, or to provides a HelpTooltip with more information. - **Documentation:** [https://solfege.theorchard.com/components/label](https://solfege.theorchard.com/components/label) - **Tags:** form-elements - **Type:** molecule - **Status:** revised #### How to use ##### Example #### Optional properties ##### isOptional Using the `isOptional` property adds text after the label indicating that the field is optional. ##### icons Icons can be added before the label by passing 16px glyph names to the `icons` prop. ##### help Using the `help` property we will have at the end of the label, a help with a message if we hover over it: ### MarketSelector MarketSelector provides a list of countries and allows user to select multiple ones from the list. - **Documentation:** [https://solfege.theorchard.com/components/market-selector](https://solfege.theorchard.com/components/market-selector) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Market Selector belongs to our Select component family. It allows users to select options from a list of countries. This component is a multi select, and allows for several countries to be selected from a list. #### How to use Users can select countries in order to: - **Create** or **update** the properties of an object - using the default variant - **Filter** through a list of results e.g. in a table – using the compact variant To help organising the list of countries, the Market Selector has a **view switcher** that allows for the list of countries to be displayed either as a list or grouped by continent using a header. #### Optional properties ##### Left Panel The left panel next to the countries list allows for displaying: - Recent selections - Quick selections Quick selections are editorial groupings of countries that behave as a shortcut to select several countries in one click. ##### Default View It's possible to choose which view (list VS grouped) opens by default. To set the grouped view as the default view, enable `defaultListMode` with `sectioned` value. ##### Group Select To enable selecting a whole continent in one click, enable `sectionGro... ### Metadata Add a Label with a value or add other atoms. - **Documentation:** [https://solfege.theorchard.com/components/metadata](https://solfege.theorchard.com/components/metadata) - **Tags:** form-elements - **Type:** molecule - **Status:** live #### How to use The label inherits all the properties of our label component. ##### Basic use We can pass the text of the `Label` in two ways, through a `string` or through an `object` (as shown in the example). It also displays whatever we put inside it. ##### Layout By default we will have a `vertical` layout, but we also have the option to set it horizontally with `horizontal`, using the `layout` property: ##### Container We can add within the component from simple text to atoms. ##### Label The `label` property, has all the properties that can have the `Label` component, and we can use them: ### MultiSelect Select components are used for collecting user provided information from a list of options. MultiSelect allow for several options to be selected simultanously. - **Documentation:** [https://solfege.theorchard.com/components/multi-select](https://solfege.theorchard.com/components/multi-select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Select components are used for collecting user provided information from a list of options. This component is a multi select, and allows for several items to be selected from a list of options. #### How to use Users can select items in order to: - **Create** or **update** the properties of an object - **Filter** through a list of results e.g. in a table #### Optional properties ##### Grouped list of options To help organising the list of options, they can be grouped by using a header. Group select can be enabled by adding `showSelectAll` to the group props. ##### Loading groups async In cases where multiple queries are used to populate the list, a loading state can be set for each group by adding an `{ itemType: 'loading-spinner', value: '' }` option to the group while it is loading. Async queries can use the `refresh` callback in `onLoadOptions` to populate the data and remove the loading state. ##### With visuals Depending on the nature of the content displayed in the list, we can add a visual to the item. - **Glyph**: e.g. ### NumberInput NumberInput is a form input element that only accepts numerical values. It includes up and down arrows to increase and decrease the number value. - **Documentation:** [https://solfege.theorchard.com/components/number-input](https://solfege.theorchard.com/components/number-input) - **Tags:** form-elements - **Type:** atom - **Status:** revised #### ##### Example ### Radio Radio are round interactive UI elements used to turn an option on or off. They allow the user to select a single item from a set. - **Documentation:** [https://solfege.theorchard.com/components/radio](https://solfege.theorchard.com/components/radio) - **Tags:** form-elements - **Type:** atom - **Status:** live ##### Example ##### Validation The `` or `` components can be used to wrap multiple radio buttons and add a validation message. #### Application Usage ### SearchDropdown SearchDropdown is used when an auto-suggest list is proposed as part of an input field. As a result, user can either select a suggestion from the list to populate the input field, or type something else. Please use Field input with a Listbox insead. - **Documentation:** [https://solfege.theorchard.com/components/search-dropdown](https://solfege.theorchard.com/components/search-dropdown) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** deprecated #### When to use Use when you need to dynamically fetch options to display in a dropdown. #### How to use ##### Default (Single select) Use the `onLoadOptions` event to fetch matching options while typing. The `onLoadOptions` handler receives the current `term` and returns a promise with the resulting options. ##### Non selectable Set the `isSelectable` property to `false` to prevent the component to show the selected option. ##### Grouped Group results by returning an array of groups, where a group is an object with a `label` and `options` properties. ##### Multi select Allow selecting multiple items by using the `isMulti` property. ##### Default selected value Use the `defaultValue` property to assign a initial selected value. ##### Default options Use the `defaultOptions` property to display initial options when focused. ##### Combining fixed list of options with search results Options from other sources can be appended/prepended to the search result. These options can be filtered with `createFilter` to replicate ``. ##### Custom options You can provide a custom formatter to render the search results anyway you want. ### SearchInput SearchInput is a single-line text box with a search icon that allows users to input search terms in order to filter through a list of objects. - **Documentation:** [https://solfege.theorchard.com/components/search-input](https://solfege.theorchard.com/components/search-input) - **Tags:** form-elements - **Type:** molecule - **Status:** live ###### A search input is a single-line text box with a search icon that allows users to input search terms in order to filter through a list of objects usually represented as a table or a list of cards. #### How to use Search input sits above the table or list of objects it applies to. In order to save space, the default behaviour of the search input field is to: - Initially display in a minimized size, with only a magnifying glass glyph. - When hovered or focused it expands to hug the placeholder text, giving users instructions for what to search for. - Finally, when users start typing, it expands to its `maxWidth` size, by default 200px. When the search input expands, all inline elements located to its right will be pushed to make space for the field. It’s up to each app to implement a filters container that can anticipate this behaviour and wrap other filters on several lines if necessary. #### Optional properties ##### Expanded The minimum width can be pinned to the placeholder width by setting the `expanded` prop. ##### Widths By default the field expands to the size of the placeholder text, and finally to `maxWidth` when the field is filled. ### SegmentedInput SegmentedInput is a group of input fields that creates a visual connexion between the values being displayed or selected. - **Documentation:** [https://solfege.theorchard.com/components/segmented-input](https://solfege.theorchard.com/components/segmented-input) - **Tags:** form-elements - **Type:** molecule - **Status:** live ###### SegmentedInput #### Optional properties ##### Static values Static fields can be added with the `...` component. ##### Disabled The `SegmentedInput` can be disabled with the `disabled` prop. **Note:** This is only a style change. Any active fields will also have to be disabled to prevent interaction. #### Compact variant When the `compact` prop is set, the SegmentedInput can be used with compact variants of `Selects` and the `SearchInput`. In `compact` mode the individual filters do not have an `applied` state. Instead the `applied` prop must be set on the `SegmentedInput` when all filters have been filled out. ##### Disabled Similar to the default variant, `disabled` has to be set on each individual filter as well as the `SegmentedInput` component. ### Select Select components are used for collecting user provided information from a list of options. This component is a single select, and allows for one single item to be selected from a list of options. - **Documentation:** [https://solfege.theorchard.com/components/select](https://solfege.theorchard.com/components/select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Select components are used for collecting user provided information from a list of options. This component is a single select, and allows for one single item to be selected from a list of options. #### How to use Users can select items in order to: - **Create** or **update** the properties of an object - **Filter** through a list of results e.g. in a table #### Optional properties ##### Grouped list of options To help organising the list of options, they can be grouped by using a header. ##### With visuals Depending on the nature of the content displayed in the list, we can add a visual to the item. - **Glyph**: e.g. the clock glyph indicates that this option was recently selected - **Flag**: when listing countries - **Brand logo**: when listing accounts or parent companies ##### Subtitles Subtitles are secondary pieces of data that give additional information. ##### Disabled options Options can be marked as disabled to prevent selection. Disabled options have a different visual style and do not respond to hover or click interactions. ### Slider Slider is an interactive UI element that allows users to select a single value or a range of values from a continuum by moving one or several indicators on a horizontal line. - **Documentation:** [https://solfege.theorchard.com/components/slider](https://solfege.theorchard.com/components/slider) - **Tags:** form-elements - **Type:** molecule - **Status:** live ###### Slider The default slider variant is `range`, which has a minimum and maximum value. By default it has a [gap](#gap) of `1` to prevent overlap of the slider handles. #### Variants ##### Minimum only The `min` variant has a fixed max value, and an adjustable minimum. `min` and `max` variants have no [gap](#gap) by default so the full range can be selected. In this example the [step](#step) is `10`, resulting in 11 selectable values. ##### Maximum only The `max` variant has a fixed min value, and an adjustable maximum. In this example all options are default, so the full range from 0-100 can be selected. #### Optional properties ##### Gap `Gap` can be added to set a minimum distance between the minimum and maximum value. In this example the `gap` is 10. ##### Step `Step` sets the distance between each step of the slider. In this example each step jumps 20. ##### Controlled value The `value` of the Slider can be controlled by passing in `value`. ### Switch Switch is an interactive UI elements used to toggle an option on or off. - **Documentation:** [https://solfege.theorchard.com/components/switch](https://solfege.theorchard.com/components/switch) - **Tags:** form-elements - **Type:** atom - **Status:** live #### Example #### Optional properties ##### Padding Padding between the switch and the label can be controlled with the `padding` prop. This can be useful if the switch is used without a label, to avoid alignment issues. #### Application Usage ### TimezoneSelector TimezoneSelector provides a list of timezones and allows user to select a single one from the list. - **Documentation:** [https://solfege.theorchard.com/components/timezone-selector](https://solfege.theorchard.com/components/timezone-selector) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Timezone Selector belongs to our Select component family. It allows users to select options from a list of timezones. This component is a superset of our Select component #### Variants ##### Compact #### Optional properties ##### Quick / Recent Selections ##### Custom Options / Subtitle You could also provide custom options to the timezone selector. This could be useful if you want to only show a subset of timezones. This example also shortens the labels trying to fit the "available width" (only reduced for this demo). This example also injects a custom timezone, in case some world event happens and any app needs to urgently have this timezone available even before the iana database is updated. ##### Specifying the date Time zones vary throughout the year due to DST. By default the selector will show valid time zones for the current date. By passing in a `date` prop it will show valid time zones for that specific point in time. When specifying dates, always use UTC functions to avoid dates drifting. ### UploadArea UploadArea is a UI component that allows users to upload files to an app, either by clicking a browsing button or by drag & dropping a file into a dedicated upload area. - **Documentation:** [https://solfege.theorchard.com/components/upload-area](https://solfege.theorchard.com/components/upload-area) - **Tags:** form-elements - **Type:** organism - **Status:** live #### How to use Import the component and add an `onUpload` handler that accepts a list of files. The contents of the `UploadArea` will serve as a drag and drop target for file uploads. The component itself is static and has no internal state. The displayed states can be customised by passing in the `info` prop, which populates the ``. `disabled` can be used to stop the addition of further files during single file uploads. #### Optional properties ##### Status for multiple file uploads When multiple files are being uploaded, the status can be displayed with the `uploadStatus` prop. The status of the overall process will be displayed below the `UploadArea`, and the status of individual files will be shown in the popover. ##### Custom content Additional content can by added by nesting components inside the `...`. The content will be placed below the `InfoMessage` in the `large` variant, or to the right of the `InfoMessage` in the `medium` and `small` variants. ##### Error message Use the `errorMessage` prop to display validation or upload errors below the upload area. ## buttons ### Button Buttons communicate actions that users can take. They should be easily findable and identifiable while clearly indicating the action they allow a user to perform. - **Documentation:** [https://solfege.theorchard.com/components/button](https://solfege.theorchard.com/components/button) - **Tags:** buttons - **Type:** atom - **Status:** live ###### Buttons communicate actions that users can take. They should be easily findable and identifiable while clearly indicating the action they allow a user to complete. As a rule of thumb, we should use buttons for **actions** and hyperlinks for **navigation**. #### How to use ##### Optional properties ###### Sizes All buttons and button variants can have 3 different sizes. The size depends on the context within which they are displayed, and the space available. ##### States All buttons and button variants can be displayed in their _default_ state, _disabled_ state or _loading_ state. Both disabled and loading states render buttons inactive. ###### Disabled ###### Loading Loading buttons indicate that the action triggered by the user clicking the button is still processing. ### GlyphButton GlyphButtons visually communicate actions that users can take. They should be used when the glyph is explicit enough as the text label only displays on hover, in a tooltip. - **Documentation:** [https://solfege.theorchard.com/components/glyph-button](https://solfege.theorchard.com/components/glyph-button) - **Tags:** buttons - **Type:** atom - **Status:** live - **Variant of:** [button](https://solfege.theorchard.com/components/button) ### GlyphToggle GlyphToggle is an actionable glyph that can be turned on and off and will change shape to indicate its state. - **Documentation:** [https://solfege.theorchard.com/components/glyph-toggle](https://solfege.theorchard.com/components/glyph-toggle) - **Tags:** buttons - **Type:** atom - **Status:** live ###### The Glyph Toggle component is an actionable glyph that can be turned on and off and will change shape to indicate its state. ##### Disabled ##### Controlled ### SegmentedButton SegmentedButton is a group of call to actions that allows user to reorganise content according to a specific option or view. - **Documentation:** [https://solfege.theorchard.com/components/segmented-button](https://solfege.theorchard.com/components/segmented-button) - **Tags:** buttons - **Type:** molecule - **Status:** live ###### SegmentedButton ##### Variants ###### Disabled `showcase file=examples/segmentedButton/controlled ```` ###### Wrapping buttons Buttons can be wrapped with e.g. tooltips. ### ToggleButton ToggleButton is a button that can be turned on and off and will change colour to indicate its state. - **Documentation:** [https://solfege.theorchard.com/components/toggle-button](https://solfege.theorchard.com/components/toggle-button) - **Tags:** buttons - **Type:** atom - **Status:** live ###### The Toggle Button component is a button that can be toggled on and off. It is used to switch between two states. #### Toggle Glyphs #### ToggleButton states ##### Controlled state ##### Disabled state ## selects ### CountrySelect CountrySelect provides a list of countries and allows user to select a single one from the list. - **Documentation:** [https://solfege.theorchard.com/components/country-select](https://solfege.theorchard.com/components/country-select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### CountrySelect provides a list of countries and allows user to select a single one from the list. The list of countries provided comes from `@theorchard/countries`. #### Variants ##### Compact (filter) We use compact/filter variants in view mode, when the Country Select is used to filter through a list of objects (displayed in a table or a list). This is to save space and give more visibility to the content itself, and to visually emphasise on the mode the user is in. #### Advanced usage ##### Global option If your app needs a country that represents "all countries from the list now and in the future" you can use this variant to add an option labelled "Global". ##### Custom countries In some cases, apps need to show countries that don't exist anymore (e.g. Czechoslovakia). This variant allows you to add custom countries. Note: those countries won't have a flag in our library. You can use the 'missing' flag from our [countryFlag component](https://solfege.theorchard.com/components/country-flag#missing-vs-unknown). ### DatePicker DatePicker provides a calendar view and allows user to select a single date. - **Documentation:** [https://solfege.theorchard.com/components/date-picker](https://solfege.theorchard.com/components/date-picker) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### DatePicker provides a calendar view and allows user to select a single date. #### How to use Date picker is used when a single date can be selected. For a range, please use [DateRangePicker component](https://solfege.theorchard.com/components/date-range-picker). #### Optional properties ##### Min/max dates You can specify the first date and last date of the calendar view. ##### Form field When used in a creation or editing form, you can wrap the date picker inside a [Field component](https://solfege.theorchard.com/components/field). This will allow you to add a label, tooltip, notes and form control. ##### Compact (filter) We use compact/filter variants in view mode, when the Date Picker is used to filter through a list of objects (displayed in a table or a list). This is to save space and give more visibility to the content itself, and to visually emphasise on the mode the user is in. #### Customization You can customize the appearance and behavior of the DatePicker by providing custom components. ### DateRangePicker DateRangePicker provides a calendar view and allows user to select a date range. - **Documentation:** [https://solfege.theorchard.com/components/date-range-picker](https://solfege.theorchard.com/components/date-range-picker) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### DateRangePicker provides a calendar view and allows user to select a date range. #### How to use Date range picker is used when a date range can be selected. For a single date, please use [DatePicker component](https://solfege.theorchard.com/components/date-picker). #### Optional properties ##### Min/max dates You can specify the first date and last date of the calendar view. ##### Left Panel If you want to propose specific pre-selected ranges, you can display them on the left. Note: when comparing several tracks, pre-selected ranges based off the release date can't be shown in the calendar view. ##### Clearable The `isClearable` property displays a clear cross in the trigger that allows user to clear the date range in one click. ##### With option label in select instead of period duration By default, when a pre-selected range is selected, the trigger displays the total amount of days as well as the start date and end date. To display the pre-selected option label instead, use `showOptionLabel`. ##### Single date range selection When the `singleDateRange` prop is enabled, it's possible to select the same start and end date. #### Variants ##### Controlled Us... ### Dropdown Please use Select instead. - **Documentation:** [https://solfege.theorchard.com/components/dropdown](https://solfege.theorchard.com/components/dropdown) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** deprecated ###### Solfège dropdowns are input fields that allow users to set one or several value(s) by selecting them from a displayed list of options. Dropdowns are used when the list of results is finite and small enough to fit in the list container. Note: if the list of options is too important and/or can’t be displayed by default, we must use the SearchDropdown component. #### How to use ##### Default (Single select) The default dropdown allows for one single item to be selected from a list. ##### Multi select The multi-select variant allows users to select several options from the list. Each option can be removed individually, or altogether by clicking on the clear cross. ##### Creatable When users should be able to create new options in the list, the Creatable variant offers them the option to create their own option. ### HeaderSelect HeaderSelect allows a header to trigger a select dropdown. It inherits all the functionalities of our Select component. - **Documentation:** [https://solfege.theorchard.com/components/header-select](https://solfege.theorchard.com/components/header-select) - **Tags:** selects - **Type:** molecule - **Status:** live We sometimes use dropdowns with or without filtering option for navigation purpose. In that case, the trigger (CTA) is a header with a chevron next to it. #### Async #### Variants ##### Custom option components ### MarketSelector MarketSelector provides a list of countries and allows user to select multiple ones from the list. - **Documentation:** [https://solfege.theorchard.com/components/market-selector](https://solfege.theorchard.com/components/market-selector) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Market Selector belongs to our Select component family. It allows users to select options from a list of countries. This component is a multi select, and allows for several countries to be selected from a list. #### How to use Users can select countries in order to: - **Create** or **update** the properties of an object - using the default variant - **Filter** through a list of results e.g. in a table – using the compact variant To help organising the list of countries, the Market Selector has a **view switcher** that allows for the list of countries to be displayed either as a list or grouped by continent using a header. #### Optional properties ##### Left Panel The left panel next to the countries list allows for displaying: - Recent selections - Quick selections Quick selections are editorial groupings of countries that behave as a shortcut to select several countries in one click. ##### Default View It's possible to choose which view (list VS grouped) opens by default. To set the grouped view as the default view, enable `defaultListMode` with `sectioned` value. ##### Group Select To enable selecting a whole continent in one click, enable `sectionGro... ### MultiSelect Select components are used for collecting user provided information from a list of options. MultiSelect allow for several options to be selected simultanously. - **Documentation:** [https://solfege.theorchard.com/components/multi-select](https://solfege.theorchard.com/components/multi-select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Select components are used for collecting user provided information from a list of options. This component is a multi select, and allows for several items to be selected from a list of options. #### How to use Users can select items in order to: - **Create** or **update** the properties of an object - **Filter** through a list of results e.g. in a table #### Optional properties ##### Grouped list of options To help organising the list of options, they can be grouped by using a header. Group select can be enabled by adding `showSelectAll` to the group props. ##### Loading groups async In cases where multiple queries are used to populate the list, a loading state can be set for each group by adding an `{ itemType: 'loading-spinner', value: '' }` option to the group while it is loading. Async queries can use the `refresh` callback in `onLoadOptions` to populate the data and remove the loading state. ##### With visuals Depending on the nature of the content displayed in the list, we can add a visual to the item. - **Glyph**: e.g. ### SearchDropdown SearchDropdown is used when an auto-suggest list is proposed as part of an input field. As a result, user can either select a suggestion from the list to populate the input field, or type something else. Please use Field input with a Listbox insead. - **Documentation:** [https://solfege.theorchard.com/components/search-dropdown](https://solfege.theorchard.com/components/search-dropdown) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** deprecated #### When to use Use when you need to dynamically fetch options to display in a dropdown. #### How to use ##### Default (Single select) Use the `onLoadOptions` event to fetch matching options while typing. The `onLoadOptions` handler receives the current `term` and returns a promise with the resulting options. ##### Non selectable Set the `isSelectable` property to `false` to prevent the component to show the selected option. ##### Grouped Group results by returning an array of groups, where a group is an object with a `label` and `options` properties. ##### Multi select Allow selecting multiple items by using the `isMulti` property. ##### Default selected value Use the `defaultValue` property to assign a initial selected value. ##### Default options Use the `defaultOptions` property to display initial options when focused. ##### Combining fixed list of options with search results Options from other sources can be appended/prepended to the search result. These options can be filtered with `createFilter` to replicate ``. ##### Custom options You can provide a custom formatter to render the search results anyway you want. ### Select Select components are used for collecting user provided information from a list of options. This component is a single select, and allows for one single item to be selected from a list of options. - **Documentation:** [https://solfege.theorchard.com/components/select](https://solfege.theorchard.com/components/select) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Select components are used for collecting user provided information from a list of options. This component is a single select, and allows for one single item to be selected from a list of options. #### How to use Users can select items in order to: - **Create** or **update** the properties of an object - **Filter** through a list of results e.g. in a table #### Optional properties ##### Grouped list of options To help organising the list of options, they can be grouped by using a header. ##### With visuals Depending on the nature of the content displayed in the list, we can add a visual to the item. - **Glyph**: e.g. the clock glyph indicates that this option was recently selected - **Flag**: when listing countries - **Brand logo**: when listing accounts or parent companies ##### Subtitles Subtitles are secondary pieces of data that give additional information. ##### Disabled options Options can be marked as disabled to prevent selection. Disabled options have a different visual style and do not respond to hover or click interactions. ### TimezoneSelector TimezoneSelector provides a list of timezones and allows user to select a single one from the list. - **Documentation:** [https://solfege.theorchard.com/components/timezone-selector](https://solfege.theorchard.com/components/timezone-selector) - **Tags:** form-elements, selects - **Type:** molecule - **Status:** live ###### Timezone Selector belongs to our Select component family. It allows users to select options from a list of timezones. This component is a superset of our Select component #### Variants ##### Compact #### Optional properties ##### Quick / Recent Selections ##### Custom Options / Subtitle You could also provide custom options to the timezone selector. This could be useful if you want to only show a subset of timezones. This example also shortens the labels trying to fit the "available width" (only reduced for this demo). This example also injects a custom timezone, in case some world event happens and any app needs to urgently have this timezone available even before the iana database is updated. ##### Specifying the date Time zones vary throughout the year due to DST. By default the selector will show valid time zones for the current date. By passing in a `date` prop it will show valid time zones for that specific point in time. When specifying dates, always use UTC functions to avoid dates drifting. ## overlays ### FullscreenModal FullScreenModal interrupt users to present a sub-process or experience connected to the object page. - **Documentation:** [https://solfege.theorchard.com/components/fullscreen-modal](https://solfege.theorchard.com/components/fullscreen-modal) - **Tags:** overlays - **Type:** organism - **Status:** live #### How to use The FullscreenModal should be created as a separate page with a separate route. To transition to the modal you should always use `open` from `useFullscreenModal()` and pass in a callback that routes to the modal page. To exit the modal, you should use `close` from `useFullscreenModal` with a similar callback to return the user the previous, or another page. The functions are necessary to create the transitions between the calling page, and the modal. The basic layout of a fullscreen modal depends on the use case, but will generally look like this: ```tsx Any further instructions or contextual information about the step. {content} ``` Headers and titles can be customized to match designs. There is also a footer available for designs that require one. ### HelpTooltip HelpTooltip combines the "help" GlyphIcon with a Tooltip component for the common use-case of showing information related to a field or column. - **Documentation:** [https://solfege.theorchard.com/components/help-tooltip](https://solfege.theorchard.com/components/help-tooltip) - **Tags:** overlays, utilities - **Type:** molecule - **Status:** live - **Variant of:** [tooltip](https://solfege.theorchard.com/components/tooltip) ### Modal Modals interrupt users to present information related to the content of their parent page, or ask confirmation before performing an important action. - **Documentation:** [https://solfege.theorchard.com/components/modal](https://solfege.theorchard.com/components/modal) - **Tags:** overlays - **Type:** organism - **Status:** live ###### Modals interrupt users to present information related to the content of their parent page. It’s used for information and/or confirmation that require the user’s full attention. For presenting tertiary actions and simple sub-processes, see [Sidecar](https://solfege.qaorch.com/components/sidecar) For presenting external processes and experiences, see [FullScreenModal](https://solfege.qaorch.com/components/full-screen-modal) #### How to use ##### Action required Use modals when an action is required from the user to confirm/infirm an action. ##### Present detailed information Like zooming into a module, or a product tour. #### Optional properties ##### Subtitle ##### Custom Footer Buttons Use `confirmButtonProps` and `cancelButtonProps` to fully customize footer buttons appearance . ### Popover Popovers are floating containers attached to a specific UI element and triggered on click. They are used to add secondary information or actions to the UI element they are attached to. - **Documentation:** [https://solfege.theorchard.com/components/popover](https://solfege.theorchard.com/components/popover) - **Tags:** overlays - **Type:** organism - **Status:** live #### Optional properties ##### Controlled Popover Visibility ##### Style trigger based on toggle state A render function can be passed in place of the trigger, which will receive the current `isOpen` state of the popover. This can be used to for instance trigger the active state of a button, but should be used sparingly. #### Migration guide See the code differences between the old (left / center) and the new version (right) ### Sidecar Sidecars interrupt users to present tertiary actions or simple sub-processes that are contextual to the parent page. - **Documentation:** [https://solfege.theorchard.com/components/sidecar](https://solfege.theorchard.com/components/sidecar) - **Tags:** overlays - **Type:** organism - **Status:** live ###### Sidecars interrupt users to present _tertiary actions or simple sub-processes_ that are contextual to the parent page. For presenting information, see [Modal](https://solfege.qaorch.com/components/modal) For presenting external processes and experiences, see [FullScreenModal](https://solfege.qaorch.com/components/full-screen-modal) #### How to use Sub-processes – such as edition of a group of fields that have dependencies on each others, or creation of a new row in a table – must be completed or cancelled before the user can see the result on the parent page, and/or before the user can resume their activity on the parent page. As they are related to their parent page, sidecars always take the full height of the view. They adapt in width to their content. ##### Scrolling content Sidecar adapts automatically to its content length. When the content container requires a scrollbar, the sidecar component adds a subtle gradient to the header and footer to visually convey their fixed position on top of the scrollable content. ##### Scrollbar in FullScreenModal By default Sidecar will take the full height of the view. ### Tooltip Tooltips are floating containers attached to a specific UI element and triggered on hover. They are used to contextually help describe the term or action they're attached to. - **Documentation:** [https://solfege.theorchard.com/components/tooltip](https://solfege.theorchard.com/components/tooltip) - **Tags:** overlays - **Type:** atom - **Status:** live ###### Tooltips are floating labels that briefly explain the function of a user interface element. #### How to use Use only when necessary to provide an explanation for an interface element. ##### Best Practices Tooltips should: - Provide useful, additional information or clarification. - Succinctly describe or expand on the element they point to. - Not be used to communicate critical information, including errors in forms or other interaction feedback. - Be used sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience. #### HelpTooltip `` combines the "help" `GlyphIcon` with a `Tooltip` for the common use-case of showing information related to a field or column. #### Optional properties ##### Placements You can specify the placement of your tooltip when hovering on its trigger. By using the value `auto` the tooltip will display where there's place available. ##### Controlled Tooltips can be controlled with the `show` prop. ## tables-lists ### GridTable A table is an arrangement of information or data, typically in rows and columns. GridTable come with a set of actions allowing users to manipulate the data presented in the table. - **Documentation:** [https://solfege.theorchard.com/components/grid-table](https://solfege.theorchard.com/components/grid-table) - **Tags:** tables-lists - **Type:** organism - **Status:** revised ###### A table is an arrangement of information or data, typically in rows and columns. Our tables come with a set of actions allowing users to manipulate the data presented in the table, or display more or less of it. #### How to use: Tables VS Lists - **Tables** organise data in rows and columns. They are primarily used when there’s a need to compare data, across columns and/or rows. - **Lists** organise data either horizontally OR vertically. They group information together and allow for displaying better hierarchy amongst the information. 👍 As a rule of thumb, if there’s a need for column headers, we use tables, if not, we use lists. ##### Tables UI: zebra style To help with scanning and comparing data, we updated our tables UI to use zebras. Zebras help with differentiating rows and better guide the eye along the rows. To indicate it's a table and use the `zebra` style, add the `variant="zebra"` prop. To ensure zebra tables display correctly they should always be used within a `
` container: ```
](#page-nav). #### How to use - Tabs don't have a background colour - they inherit the one from the container they live in. This is so they can visually look attached to their tab content. - Tabs have states: **selected**, **non selected**, **disabled** #### Page.Nav **** is a customized variant of tabs that should be used when tabs are used at page level. - Tabs in Page.Nav can include custom content, like a **glyph** or a spinner for instance, indicating that the content of the tab is currently loading or being updated. - They can also include a _number_ indicating the amount of items present in its content. #### API (Tabs) This component is a direct proxy of react-bootstrap's [Tabs](https://react-bootstrap-v4.netlify.app/components/tabs/).\ For in depth documentation see [React Bootstrap's Tabs](https://react-bootstrap-v4.netlify.app/components/tabs/#tabs... ## objects-attributes ### Card Cards represent objects and display specific attributes of said object. They can be static or clickable. When clickable, they behave like a link to the object page. - **Documentation:** [https://solfege.theorchard.com/components/card](https://solfege.theorchard.com/components/card) - **Tags:** layout-structure, objects-attributes - **Type:** organism - **Status:** live ###### Cards represent objects and display specific attributes of said object. They can be static or clickable. When clickable, they behave like a link to the object page. A card group can always be converted to a table view so interchangeable rules are applied to both card groups and tables. Cards provide a snapshot of information about an object. It’s best used when the data displayed needs to be concise and hierarchically structured. When a lot of data needs to be displayed about a number of objects, consider using a table or switching between table and card views. #### Optional properties ##### Expandable Cards can have an optional `expandable` feature. When a card is expandable, its content can be collapsed to save space on the page. Only the content of the header will be visible when a card is collapsed. The trigger for expanding/collapsing will be automatically rendered inside the ``. The expanding will only affect the ``. ##### Disabled The Card can be disabled. This disables the `onClick` functionality, and any interactable elements except non-disabled header buttons. ##### Parent card Cards represent objects. ### Pill Pills are clickable interactive elements that represent a concept or an object. Clicking on a pill toggles the display of a popver containing more information about the concept or object represented by the pill. - **Documentation:** [https://solfege.theorchard.com/components/pill](https://solfege.theorchard.com/components/pill) - **Tags:** objects-attributes - **Type:** molecule - **Status:** live ###### Pills are clickable interactive elements that represent a concept or an object. When clicked, they can trigger secondary or hidden information on the page to be revealed, for example in a popover. #### How to use ##### Optional properties Pills can accept at least one or more of the following elements: - **Text** (body font-style) - **Glyphs** (16px) - **Brand logos** (16px) - **Flags** (16px) #### Sizes Pills can be displayed in two sizes: `default` and `small`. The default size is 32px height, while the small size is 24px height. #### Variants ##### Account variant The account variant of the pill component is used across Suite to display additional information about an account in a popover. That information adapts to the user type: employees will see information that customers won’t see, such as Parent company and Service Tier. ##### Invitee variant The invitee variant comes with the in-app invite flow. ### Section Sections are information containers: they organise attributes of an object and group them in a way that makes sense depending on the purpose of a page. - **Documentation:** [https://solfege.theorchard.com/components/section](https://solfege.theorchard.com/components/section) - **Tags:** layout-structure, objects-attributes - **Type:** template - **Status:** live ###### Sections are information containers: they organise attributes of an object and group them in a way that makes sense depending on the purpose of a page. Sections include 3 levels of hierarchy: Top section. Subsection, Nested section. This is to visually reflect the hierarchical relationship between attributes of a same nature or function. [Learn more about sections](https://solfege.theorchard.com/foundations/12697177-520f-80ac-bd82-ee233a800652#sections) #### How to use Each section regardless of their hierarchical level contains an optional header, and an optional filter row. The placement of content/atomic components in the header and filter row should follow the guidelines provided in the designs. ##### Information architecture considerations Where we place call to actions and filters conveys the scope of what the action/filter will affect: - Actions and filters placed in the top section header affect the content of this entire top section (its subsections and nested sections included if there are any). - Actions and filters placed in a subsection header only affect the content of this specific subsection (and nested subsection if there are any). - Actions and... ### Tag Tags represent a property attached to an object, that is used to characterise it by adding contextual information. - **Documentation:** [https://solfege.theorchard.com/components/tag](https://solfege.theorchard.com/components/tag) - **Tags:** objects-attributes - **Type:** molecule - **Status:** live ###### Tags represent a property attached to an object, that is used to characterise it by adding contextual information. #### How to use Using tags make it easier to **recognise** a specific type of object, **group** them by this characteristic, or **filter** a collection of objects by a specific property. ##### Static tags Static tags add contextual information to the object you’re looking at. Using a static tag puts emphasis on the information, and can help with scanning more efficiently than if the same information was displayed as simple text. ###### Category tags Category tags are a specific type of static tags that describe the nature of an object. Typically, they answer the question "what's that thing?". They're usually used in page headers and table rows. ##### Interactive tags Interactive tags are used where the contextual information is added to, or removed from the object. ## utilities ### Divider Divider to separate other components - **Documentation:** [https://solfege.theorchard.com/components/divider](https://solfege.theorchard.com/components/divider) - **Tags:** utilities - **Type:** atom - **Status:** live ###### Divider is used to separate entities and pieces of information. It can be used both vertically and horizontally, and will occupy the full length of the axis, minus a `margin` on either side. **Vertical** **Horizontal** #### Optional Properties ##### Padding In cases where you can't use `gap` on a flexbox parent, you can set `padding` on the divider, which will pad on the cross-axis. ##### Height Height can be set explicitly with the `height` prop. ### ExpandableContent ExpandableContent displays content that can be toggled between expanded and collapsed states inside a container (e.g. Section). - **Documentation:** [https://solfege.theorchard.com/components/expandable-content](https://solfege.theorchard.com/components/expandable-content) - **Tags:** utilities - **Type:** organism - **Status:** live ###### The ExpandableContent component is designed to display content that can be toggled between expanded and collapsed states. This mechanism allows to show secondary information behind a click and reduce noise on the page. #### How to use Expandable Content can be used in any kind of sections, cards or in the stepper component. 👉 Be sure the container can be expanded to fit the content hidden in ExpandableContent. #### Optional properties ##### Customisable Trigger To set the copy of the trigger, be sure to set an appropriate `expandLabel` or it will fall back to `More info`. ##### Customisable Content Any content can be nested inside the `ExpandableContent`. For instance, we usually display a nested section (grey background) to indicate that this content is secondary in hierarchy. ##### Controlled State The `ExpandableContent` component can be controlled externally by using the `expanded` and `onToggle` props. ### FilterCloud FilterCloud is an expandable container of filter components like Select and SearchInput. It initially shows a limited number of filters with an expand/collapse toggle for the rest. - **Documentation:** [https://solfege.theorchard.com/components/filter-cloud](https://solfege.theorchard.com/components/filter-cloud) - **Tags:** utilities - **Type:** molecule - **Status:** live ###### FilterCloud is an expandable container for filter components like Select and SearchInput. It shows all the primary filters upfront and secondary filters are toggleable. Exception when any of the secondary filters are applying, they are all showing. ### HelpTooltip HelpTooltip combines the "help" GlyphIcon with a Tooltip component for the common use-case of showing information related to a field or column. - **Documentation:** [https://solfege.theorchard.com/components/help-tooltip](https://solfege.theorchard.com/components/help-tooltip) - **Tags:** overlays, utilities - **Type:** molecule - **Status:** live - **Variant of:** [tooltip](https://solfege.theorchard.com/components/tooltip) ### HiddenCount HiddenCount is an actionable UI element that shows a count of hidden items as well as an expand actionable glyph. - **Documentation:** [https://solfege.theorchard.com/components/hidden-count](https://solfege.theorchard.com/components/hidden-count) - **Tags:** utilities - **Type:** molecule - **Status:** live ###### An actionable button that shows a count of hidden items count and an expand button #### HiddenCount ### MetadataList Horizontal, divided list of Metadata items or other molecules - **Documentation:** [https://solfege.theorchard.com/components/metadata-list](https://solfege.theorchard.com/components/metadata-list) - **Tags:** utilities - **Type:** molecule - **Status:** live ###### MetadataList is a container for related pieces of data, separated by vertical dividers **Horizontal metadata items** are primarily used in [PageHeaders](https://solfege.theorchard.com/components/page-header). `MetadataList` also accepts custom elements as `children`. #### Optional Properties ##### Gap The `gap` sets the distance between items and the dividers. ### PillCloud PillCloud is an expandable container of Pill components. - **Documentation:** [https://solfege.theorchard.com/components/pill-cloud](https://solfege.theorchard.com/components/pill-cloud) - **Tags:** utilities - **Type:** molecule - **Status:** live ###### PillCloud is a component that displays a limited number of pills with an actionable button to expand and show the full list #### PillCloud ### TagCloud TagCloud is an expandable container of Tag components. - **Documentation:** [https://solfege.theorchard.com/components/tag-cloud](https://solfege.theorchard.com/components/tag-cloud) - **Tags:** utilities - **Type:** molecule - **Status:** live ###### TagCloud is a component that displays a limited number of Tag with an actionable button to expand and show the full list #### Optional properties ##### onRemove Passing in the `onRemove` prop makes the list editable by adding cross buttons to each tag. Editing can be temporarily disable by passing in the `disableRemove` prop. Note the difference from the static variant. ##### Visuals Like [](https://solfege.theorchard.com/components/tag), TagCloud items can display country flags, glyph icons, app icons, and indicators. ### TruncatedText TruncatedText is a wrapper around any string of text that allows truncation, either dynamically or using a fixed width. - **Documentation:** [https://solfege.theorchard.com/components/truncated-text](https://solfege.theorchard.com/components/truncated-text) - **Tags:** utilities - **Type:** atom - **Status:** live #### When to use When you want to truncate a text dynamically or using a fixed width. #### How to use #### Optional properties ##### Tooltip props Props can be passed through to the underlying [Tooltip component](https://solfege.theorchard.com/components/tooltip) with `tooltipProps`.