├── .github ├── CODEOWNERS └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── icon-request.md ├── .gitignore ├── atoms ├── avatar.md ├── button.md ├── card.md ├── checkbox.md ├── chip.md ├── elevation.md ├── fileinput.md ├── inputfield.md ├── loading.md ├── radio.md ├── switch.md ├── tag.md └── tooltip.md ├── extras └── component-template.md ├── images ├── alertbar-comp.png ├── alertbar-critical.png ├── alertbar-example.png ├── alertbar-success.png ├── alertbar-warning.png ├── alertbar.png ├── avatar-example-1.png ├── avatar-sizes.png ├── avatar-spec.png ├── avatar.png ├── btn-basic.jpg ├── btn-destructive.jpg ├── btn-dropdown.jpg ├── btn-link.jpg ├── btn-link.png ├── btn-primary.jpg ├── btn-secondary.jpg ├── btn-split.jpg ├── button-disabled.png ├── button-example.png ├── button-icon.png ├── button-sizes.png ├── button-toggle.png ├── button.png ├── card.jpg ├── card.png ├── checkbox-example.png ├── checkbox-indeterminate.png ├── checkbox-sizes.png ├── checkbox.jpg ├── checkbox.png ├── chip-example-1.png ├── chip-icon.jpg ├── chip-icon.png ├── chip-table-selected.jpg ├── chip-table-selected@2x.png ├── chip-table.jpg ├── chip-table@2x.png ├── chip.png ├── color-contrast.jpg ├── color-picker.png ├── color-scale.jpg ├── color │ ├── color-blue-050.png │ ├── color-blue-100.png │ ├── color-blue-200.png │ ├── color-blue-300.png │ ├── color-blue-400.png │ ├── color-blue-500.png │ ├── color-blue-600.png │ ├── color-blue-700.png │ ├── color-blue-800.png │ ├── color-blue-900.png │ ├── color-green-050.png │ ├── color-green-100.png │ ├── color-green-200.png │ ├── color-green-300.png │ ├── color-green-400.png │ ├── color-green-500.png │ ├── color-green-600.png │ ├── color-green-700.png │ ├── color-green-800.png │ ├── color-green-900.png │ ├── color-grey-050.png │ ├── color-grey-100.png │ ├── color-grey-200.png │ ├── color-grey-300.png │ ├── color-grey-400.png │ ├── color-grey-500.png │ ├── color-grey-600.png │ ├── color-grey-700.png │ ├── color-grey-800.png │ ├── color-grey-900.png │ ├── color-red-050.png │ ├── color-red-100.png │ ├── color-red-200.png │ ├── color-red-300.png │ ├── color-red-400.png │ ├── color-red-500.png │ ├── color-red-600.png │ ├── color-red-700.png │ ├── color-red-800.png │ ├── color-red-900.png │ ├── color-scale.png │ ├── color-teal-050.png │ ├── color-teal-100.png │ ├── color-teal-200.png │ ├── color-teal-300.png │ ├── color-teal-400.png │ ├── color-teal-500.png │ ├── color-teal-600.png │ ├── color-teal-700.png │ ├── color-teal-800.png │ ├── color-teal-900.png │ ├── color-yellow-050.png │ ├── color-yellow-100.png │ ├── color-yellow-200.png │ ├── color-yellow-300.png │ ├── color-yellow-400.png │ ├── color-yellow-500.png │ ├── color-yellow-600.png │ ├── color-yellow-700.png │ ├── color-yellow-800.png │ ├── color-yellow-900.png │ ├── ex-color-1.png │ ├── ex-color-2.png │ ├── ex-color-3.png │ ├── ex-color-4.png │ └── ex-color-5.png ├── comment-active.png ├── comment-composition-active.png ├── comment-composition-display.png ├── comment-composition-empty.png ├── comment-display.jpg ├── comment-display.png ├── comment-editing.jpg ├── comment-empty.jpg ├── comment-empty.png ├── comment-width.png ├── comment.png ├── communication │ ├── ex-comms-1.png │ ├── ex-comms-2.png │ ├── ex-comms-3.png │ ├── ex-comms-4.png │ ├── ex-comms-5.png │ ├── ex-comms-6.png │ └── ex-comms-7.png ├── componentloader.png ├── componentloaderlinear.png ├── dashboard-example.jpg ├── data-table │ ├── actions.png │ ├── bordered.png │ ├── cell-edit-active.png │ ├── cell-edit.png │ ├── cell-formatting.png │ ├── composition.png │ ├── data-table-example-1.png │ ├── data-table.png │ ├── edit-columns.png │ ├── empty.png │ ├── expandable.png │ ├── filter-display.png │ ├── filter.png │ ├── fixed-column.png │ ├── fixed-header.png │ ├── inline-edit.png │ ├── inline-filter.png │ ├── large.png │ ├── reorder.png │ ├── row-actions 2.png │ ├── row-actions.png │ ├── row-edit-active.png │ ├── row-edit.png │ ├── search.png │ ├── selectable-rows.png │ ├── selectable.png │ ├── sorting 2.png │ ├── sorting.png │ ├── standalone-filter.png │ ├── status-badge.png │ ├── status-default.png │ ├── status-error.png │ ├── status-neutral.png │ ├── status-valid.png │ ├── table-actions.png │ └── title.png ├── elevation-example.png ├── elevation-illu.png ├── elevation.jpg ├── elevation.png ├── elevation@2x.png ├── event-example.jpg ├── ex-group-inputs.png ├── ex-layout-titles.png ├── file-input-composition.png ├── file-upload-error-file.png ├── file-upload-error.png ├── file-upload-full.png ├── file-upload-help.png ├── file-upload-label.png ├── file-upload-loader.png ├── file-upload-multi.png ├── file-upload-placeholder.png ├── file-upload.png ├── filtered-information.jpg ├── forms │ ├── actions.png │ ├── contextual-help.png │ ├── input-help.png │ ├── progressive-disclosure.png │ └── save-context.png ├── global-header.jpg ├── global-header.png ├── global-header@2x.png ├── grouping.png ├── icon-button.jpg ├── icon-list.jpg ├── icons │ ├── consistency.png │ ├── icon-alignment.png │ ├── icon-and-text.png │ ├── icon-color-state.png │ └── icon-color.png ├── input-composition.png ├── input-disabled.png ├── input-email.png ├── input-error.png ├── input-loading.png ├── input-number.png ├── input-password.png ├── input-placeholder.png ├── input-sizes.png ├── input-telephone.png ├── input-textarea.png ├── input-url.png ├── input-valid.png ├── input.png ├── inverted-loaders.png ├── large-data │ ├── batch-editing.png │ ├── example-user-information.png │ ├── expensive-operations.png │ ├── filtering-searching-sorting.png │ └── respect-user-resources.png ├── layout-8grid.png ├── layout-complex.png ├── layout-sidebar.png ├── layout-single-purpose.png ├── layout-spacing-scale.png ├── layout-toolbar.png ├── library-thumbnail.png ├── line-lengths.jpg ├── loader.png ├── menu-destructive.png ├── menu-disabled.png ├── menu-example.png ├── menu-icons.png ├── menu-levels.png ├── menu-sections.png ├── menu-size.png ├── menu.png ├── menuitem.png ├── modal-acknowledge.png ├── modal-breakdown.jpg ├── modal-composition.png ├── modal-confirmation.png ├── modal-error.png ├── modal-example-1.png ├── modal-example-2.png ├── modal-large.jpg ├── modal-loading.png ├── modal-medium.jpg ├── modal-scroll.jpg ├── modal-singleaction.jpg ├── modal-small.jpg ├── modal-task.png ├── notice-box-composition.png ├── notice-box-critical.png ├── notice-box-example.png ├── notice-box-information.png ├── notice-box-information@2x.png ├── notice-box-warning.png ├── ou-tree │ ├── org-unit-tree.png │ └── selection-type.png ├── pageloader.png ├── pagination-compact.png ├── pagination-composition.png ├── pagination-example.png ├── pagination-full.png ├── pagination-viewing.png ├── pagination.png ├── pattern │ └── time │ │ ├── timestamp-expand.png │ │ └── timestamp-tooltip.png ├── popover-.jpg ├── popover-2x.png ├── popover-example.jpg ├── popover-example.png ├── popover-example@2x.png ├── popover.png ├── radio-buttons.jpg ├── radio-buttons.png ├── radio-example.jpg ├── radio-example@2x.png ├── radio-size.png ├── radio.png ├── rich-text.png ├── rt-composition.png ├── rt-mentions.png ├── rt-preview.png ├── rt-tools.png ├── segmented-control-example.png ├── segmented-control.png ├── select-clear.png ├── select-custom.png ├── select-empty.png ├── select-example-1.png ├── select-example-2.png ├── select-example-3.png ├── select-filter.png ├── select-inlinelabel.png ├── select-multiple.png ├── select-single.png ├── select.png ├── spacing-example.jpg ├── spacing-scale.jpg ├── stacking.png ├── switch.png ├── table.jpg ├── table@2x.png ├── tabs-example.jpg ├── tabs-example.png ├── tabs-fixed.jpg ├── tabs-fixed.png ├── tabs-fixed@2x.png ├── tabs-fluid.jpg ├── tabs-fluid.png ├── tabs-fluid@2x.png ├── tabs.jpg ├── tabs.png ├── tabs@2x.png ├── tag │ ├── tag-blue.png │ ├── tag-ex-1.png │ ├── tag-ex-2.png │ ├── tag-green.png │ ├── tag-grey.png │ ├── tag-icons.png │ ├── tag-red.png │ └── tag.png ├── test-color.png ├── text-input-dense.png ├── text-input-error.png ├── text-input-help.png ├── text-input-loading.png ├── text-input-sizes.png ├── text-input-valid.png ├── text-input.png ├── tooltip-example-1.png ├── tooltip-example-2.png ├── tooltip-example-3.png ├── tooltip-example.jpg ├── tooltip-example2.jpg ├── tooltip-example2@2x.png ├── tooltip-example3.jpg ├── tooltip-example3@2x.png ├── tooltip-example@2x.png ├── tooltip.jpg ├── tooltip.png ├── tooltip@2x.png ├── transfer-buttons.png ├── transfer-composition.png ├── transfer-custom.png ├── transfer-empty.png ├── transfer-error.png ├── transfer-example.png ├── transfer-filter.png ├── transfer-footer.png ├── transfer-header.png ├── transfer-reorder.png ├── transfer.png ├── type-hierarchy.jpg └── type │ ├── hierarchy.png │ ├── lineheight.png │ ├── linelength.png │ └── size.png ├── molecules ├── alertbar.md ├── comment.md ├── menu.md ├── modal.md ├── notice-box.md ├── pagination.md ├── popover.md ├── segmented-control.md ├── select.md └── tab.md ├── organisms ├── color-picker.md ├── data-table.md ├── header-bar.md ├── organisation-unit-tree │ ├── amount-of-selected-children.feature │ ├── children-tree.feature │ ├── highlight-selected-level-and-sublevels.feature │ ├── initially-opened-trees.feature │ ├── lazy-children-loading.feature │ ├── multiple-roots.feature │ ├── new-features │ │ ├── context-menu.feature │ │ ├── partial-selectability.feature │ │ ├── recursive-selection.feature │ │ ├── results-in-hierarchy.feature │ │ ├── select-all.feature │ │ ├── select-by-group.feature │ │ ├── select-by-level.feature │ │ ├── select-descendants.feature │ │ ├── select-relative-units.feature │ │ └── selection-list.feature │ ├── org-unit-tree.md │ ├── search.feature │ ├── selectable-org-units.feature │ └── src │ │ ├── folder-closed.svg │ │ ├── folder-open.svg │ │ └── single.svg ├── rich-text.md ├── table.md └── transfer.md ├── patterns ├── designing-with-time.md ├── glossary.md ├── large-data.md └── writing.md ├── principles ├── color.md ├── content-communication.md ├── design-for-use.md ├── forms.md ├── icons.md ├── layout.md └── typography.md ├── readme.md └── resources ├── button └── dropdown-arrow.svg ├── checkbox ├── checkbox-dense-checked.svg ├── checkbox-dense-indeterminate.svg ├── checkbox-dense-unchecked.svg ├── checkbox-regular-checked.svg ├── checkbox-regular-indeterminate.svg └── checkbox-regular-unchecked.svg ├── icons └── data-type │ ├── icon-dataElement.svg │ ├── icon-dataset.svg │ ├── icon-eventDataItem.svg │ ├── icon-generic.svg │ ├── icon-indicator.svg │ ├── icon-period.svg │ ├── icon-programIndicator.svg │ └── icon-validationRule.svg ├── menu └── menu-arrow.svg ├── radio ├── radio-dense-checked.svg ├── radio-dense-unchecked.svg ├── radio-regular-checked.svg └── radio-regular-unchecked.svg ├── select └── arrow-down.svg └── transfer ├── arrow-down.svg ├── arrow-left-multi.svg ├── arrow-left.svg ├── arrow-right-multi.svg ├── arrow-right.svg └── arrow-up.svg /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # request review for all files, from: 2 | * @dhis2/team-ux 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "[Feature request]" 5 | labels: '' 6 | assignees: cooper-joe 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/icon-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Icon request 3 | about: Suggest an icon for the DHIS2 icon library 4 | title: "[Icon request]" 5 | labels: icons 6 | assignees: cooper-joe 7 | 8 | --- 9 | 10 | **What do you want to communicate with this icon?** 11 | Describe the situation where you need to use this icon, rather than the icon itself. 12 | 13 | **Do you have a certain shape/drawing/icon in mind?** 14 | Is there an icon that usually used in this situation or domain? 15 | 16 | **What sizes do you need?** 17 | Available sizes: 12, 16, 24, 32. Icons may not be included in all sizes. 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode/* 3 | !.vscode/settings.json 4 | !.vscode/tasks.json 5 | !.vscode/launch.json 6 | !.vscode/extensions.json 7 | *.code-workspace 8 | 9 | .vale.ini 10 | .styles 11 | 12 | # Local History for Visual Studio Code 13 | .history/ 14 | -------------------------------------------------------------------------------- /atoms/avatar.md: -------------------------------------------------------------------------------- 1 | | | | 2 | |-------------|------------------| 3 | | **Component** | Avatar | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/))| 5 | | **Design Spec** | [Link](../images/avatar-spec.png)| 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/utils-user-avatar--default) | 7 | | **Status** | `Ready to use`| 8 | 9 | --- 10 | 11 | # Avatar 12 | 13 | An avatar is a visual icon that represents a user. 14 | 15 | ![](../images/avatar.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Types](#types) 22 | - [Examples in use](#examples-in-use) 23 | 24 | --- 25 | 26 | ## Usage 27 | Use an avatar to give extra information when a user is mentioned or displayed in DHIS2. The avatar shows a user uploaded photograph or initials. The avatar is intended to give context and help to identify different users. An avatar is usually shown alongside the user name, but can be used alone to show a visual hint of a user. 28 | 29 | --- 30 | 31 | ## Options 32 | 33 | ### Sizes 34 | 35 | ![](../images/avatar-sizes.png) 36 | 37 | Avatars are available in five sizes. The default size is `medium`. Use the size avatar that represents how important the user information is. Often an avatar is supporting information, so it doesn't need to be displayed too large. 38 | 39 | --- 40 | 41 | ## Types 42 | 43 | There are two different types of avatar depending on the metadata available for a user. If available, the default avatar displays the user uploaded profile picture. If a profile picture isn't available, or suitable, the user initials are displayed (JC for Joe Cooper). 44 | 45 | --- 46 | 47 | ## Examples in use 48 | 49 | ![](../images/avatar-example-1.png) 50 | 51 | *Avatars are used in comments to highlight that these comments belong to different users, without needing to read the username. The users own avatar shows that they can input data here too.* 52 | -------------------------------------------------------------------------------- /atoms/card.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ----------------------------------------------------------- | 3 | | **Component** | Card | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/layout-card--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Card 12 | 13 | A card is a container element for grouping together and separating blocks of content. 14 | 15 | ![](../images/card.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Examples in use](#examples-in-use) 21 | 22 | --- 23 | 24 | ## Usage 25 | 26 | Use a card where there is content that can be grouped together. Cards are most often useful when this grouped content may be repeated, for example with items on a dashboard, or different sections of patient information displayed in a profile. 27 | 28 | --- 29 | 30 | ## Examples in use 31 | 32 | ![](../images/dashboard-example.jpg) 33 | 34 | _Dashboard items are displayed inside cards, highlighting the fact they are self-contained blocks of information_ 35 | 36 | --- 37 | 38 | ![](../images/event-example.jpg) 39 | 40 | _Different sections of information, all relating to the same event, are displayed in their own cards_ 41 | -------------------------------------------------------------------------------- /atoms/checkbox.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | --------------------------------------------------------------- | 3 | | **Component** | Checkbox | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/forms-checkbox-checkbox--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Checkbox 12 | 13 | A checkbox is a control that allows a user to toggle an option. 14 | 15 | ![](../images/checkbox.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [States](#states) 22 | - [Examples in use](#examples-in-use) 23 | 24 | --- 25 | 26 | ## Usage 27 | 28 | Checkboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements. 29 | 30 | Do not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](radio.md) here instead. 31 | 32 | If there are many options that need to select from, consider using a [select](../molecules/select.md) instead. 33 | 34 | --- 35 | 36 | ## Options 37 | 38 | ### Size 39 | 40 | ![](../images/checkbox-sizes.png) 41 | 42 | Checkboxes are available in Regular and Dense sizes. Regular size is usually used in forms and whenever a checkbox, or checkboxes, are used standalone. Dense size checkboxes are used inside other complex components, not as main elements of a UI. 43 | 44 | --- 45 | 46 | ## States 47 | 48 | The checked/unchecked/disabled states of a checkbox are self-explanatory. Checked state should be use to represent a positive selection, unchecked should indicate 'empty' or 'not chosen'. 49 | 50 | ### Indeterminate 51 | 52 | ![](../images/checkbox-indeterminate.png) 53 | 54 | An indeterminate state is used when some, but not all, of the child elements are selected. This state represents a middle ground between checked/unchecked. 55 | 56 | --- 57 | 58 | ## Examples in use 59 | 60 | ![](../images/checkbox-example.png) 61 | 62 | _Checkboxes are used for toggling on/off the display of certain elements. Checkbox status True/On indicates that this element will display, an example of using a checked state for a positive action (displaying that type of element)._ 63 | -------------------------------------------------------------------------------- /atoms/chip.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ----------------------------------------------------------- | 3 | | **Component** | Chip | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/actions-chip--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Chip 12 | 13 | Chips are useful for displaying a selection of defined choices and filters to the user. 14 | 15 | ![](../images/chip.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard. A common usage of this that can help to understand the pattern is a table with a set of filters: 28 | 29 | ![example of a chips being displayed with a data table](../images/chip-table@2x.png) 30 | 31 | _In this example the group of chips above represent 'Saved Filters' for the user to choose from. These filters will apply to the data table below_ 32 | 33 | The chips displayed above the table act as defined filters for the table. In the example above, selecting "Overdue Patients" chip will select that chip and display only that data in the table below. **To deselect the chip the user can click again, or a 'Clear filters' control could be provided.** 34 | 35 | ![example of a selected chip and data table](../images/chip-table-selected.jpg) 36 | 37 | _"Overdue patients" is selected/active, so the data in the table below changes to reflect this. The 'Overdue Patients' chip is displayed in 'Selected' style to highlight this._ 38 | 39 | ### Chip vs. Button 40 | 41 | Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](button.md) to trigger actions. 42 | 43 | ### Displaying chips 44 | 45 | - Chips should be displayed in a horizontal list, where space permits. 46 | - Do not stack single chips on top of one another if there is space to display them inline. 47 | - Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below. 48 | 49 | --- 50 | 51 | ## Options 52 | 53 | ### Icon 54 | 55 | ![](../images/chip-icon.png) 56 | 57 | A chip can display an optional icon. Use icons in chips to highlight special/unique chip items. Do not use the same icon on all chips, otherwise it will be meaningless. To clarify what a group of chips are, use a title or header instead. 58 | 59 | ### Single vs. Multiple Selections 60 | 61 | A group of chips can be set up for single or multiple selection, it depends on the usage. When using chips for selecting the active dashboard it makes sense to only allow a single selection at a time. You may choose to allow the user to select multiple chips, or filters, for a table displaying data. 62 | 63 | --- 64 | 65 | ## Examples in use 66 | 67 | ![](../images/chip-example-1.png) 68 | 69 | _A users dashboards are represented by chips. Favorite dashboards use chips with a star icon._ 70 | -------------------------------------------------------------------------------- /atoms/elevation.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ----------------------------------------------------------- | 3 | | **Component** | Elevation | 4 | | **Type** | Utility ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://codepen.io/j_cpr/pen/oOBLMp) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/helpers-css-variables--all-variables) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Elevation 12 | 13 | Elevation is used to create depth in a user interface. 14 | 15 | ![](../images/elevation.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Use elevation to separate interface elements from one another. This is useful for creating hierarchies or showing extra information without breaking a layout. 28 | 29 | Layering elements upon one another can communicate hierarchies and distinguish different elements apart. 30 | 31 | There are four levels of elevation available, e100 is the lowest, e400 is the highest. So, any element given e400 elevation will appear above e100, e200 or e300 elements. 32 | 33 | ### Communicating with elevation 34 | 35 | An example of how applying elevation can communicate differently: 36 | 37 | - setting e100 on an element will make it feel more connected to the content below because it is closer 38 | - setting e400 will create a perceived distance between the elements behind and the e400 element. This is useful when needing to create a divide, but keep it mind that is can easily distract a user from their flow. 39 | 40 | ![elevation example](../images/elevation-illu.png) 41 | 42 | In the above example, notice how the raised element on the left, using e100, seems to relate more closely to the table below. The element on the right uses e400 and seems to be disconnected from the table because it is further away from it. 43 | 44 | ### Elevation vs. Stacking 45 | 46 | Keep in mind that elevation only applies to elements in the base application layer. Modals, popovers and other elements can appear above an e400 element because they occupy their own layer. This behavior defined by the Stacking system. Read more about the stacking of layers [here](../principles/layout.md). 47 | 48 | --- 49 | 50 | ## Options 51 | 52 | There are four levels of elevation available: e100, e200, e300 and e400. 53 | 54 | ![](../images/elevation.png) 55 | 56 | --- 57 | 58 | ## Examples in use 59 | 60 | ![](../images/elevation-example.png) 61 | 62 | _The [popover](../molecules/popover.md) component uses an elevation to draw the users attention, it sits on top of the page content. e200 is used, which is a good compromise between grabbing the users attention and still keeping the popover related to the content. Using e400 would make the popover appear too distant from the content it applies to below._ 63 | -------------------------------------------------------------------------------- /atoms/fileinput.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ---------------------------------------------------------------- | 3 | | **Component** | File Input | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://sketch.cloud/s/DwkDk/a/jWp5Oz) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/forms-file-input-file-input--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # File Input 12 | 13 | The file input component allows users to select and upload files from their local machine. 14 | 15 | ![](../images/file-upload.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Composition](#composition) 21 | - [Options](#options) 22 | - [Types](#types) 23 | - [States](#states) 24 | 25 | --- 26 | 27 | ## Usage 28 | 29 | Use a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine. 30 | 31 | --- 32 | 33 | ## Composition 34 | 35 | ![](../images/file-input-composition.png) 36 | 37 | A file input is made up of multiple elements, some of which are optional: 38 | 39 | 1. **Label, optional:** A short text to identify what the file is, or relates to. 40 | 2. **Input button, required:** The input control for selecting a file. 41 | 3. **Help text, optional:** Informative text to advise the user of restrictions. 42 | 4. **File list, required:** Display which files have been selected and/or uploaded. 43 | 44 | --- 45 | 46 | ## Options 47 | 48 | ### Label 49 | 50 | ![](../images/file-upload-label.png) 51 | 52 | An optional label can be included. Use a label where it makes sense, especially when using a file input component as part of a form with other inputs. 53 | 54 | ### Help text 55 | 56 | ![](../images/file-upload-help.png) 57 | 58 | It is important to include help text to inform the user what files are acceptable to upload. Do not wait for the user to select a problematic file to reveal limitations and requirements. If the upload only accepts .jpg files under 1mb, tell the user this up front. 59 | 60 | ### File list 61 | 62 | ![](../images/file-upload-full.png) 63 | 64 | The filename of successfully uploaded files, or files queued for upload, are displayed in the file list. Each file in the list has a control to remove that file. 65 | 66 | #### File list placeholder text 67 | 68 | ![](../images/file-upload-placeholder.png) 69 | 70 | Placeholder text can also be included in place of the file list, before a file has been uploaded. This text can be customized. In the above example 'No files uploaded yet.' is included as placeholder text. This text is useful for making the current component state completely obvious to the user. Placeholder text is optional, but highly recommended. 71 | 72 | ### Button text 73 | 74 | The button text and icon can be customized. Ensure the text makes sense and is an action verb. For example 'Upload a file', 'Add patient records', 'Upload a photo' and so on. 75 | 76 | --- 77 | 78 | ## Types 79 | 80 | ### Single vs. Multiple file upload 81 | 82 | ![](../images/file-upload-multi.png) 83 | 84 | Where multiple files can be uploaded by a single file input component, those file names are stacked in the file list in the order they were selected (newest last). All files in the file list have their own remove control and loading indicators. 85 | 86 | If a file input is set to accept one file only, the button will be disabled when a file has been selected/uploaded. 87 | 88 | --- 89 | 90 | ## States 91 | 92 | ~If this component has states, why?~ 93 | 94 | ### Error 95 | 96 | ![](../images/file-upload-error.png) 97 | 98 | Error messages appear below the file input button and above the file list, if one exists. An icon is also shown to draw user attention to the error. Make sure to follow the [guidelines for writing helpful error messages](https://github.com/dhis2/design-system/blob/master/principles/content-communication.md#error-messages). 99 | 100 | ### Loading progress 101 | 102 | ![](../images/file-upload-loader.png) 103 | 104 | It is important to communicate to the user that a file is in the process of being uploaded, but hasn't finished yet. It is important that any forms or page actions are not submitted in this time. 105 | 106 | Upload progress is shown with a circular loader and 'Uploading:' text in front of the filename. Where possible a cancel action should be included. 107 | -------------------------------------------------------------------------------- /atoms/loading.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | --------------------------------------------------------------------- | 3 | | **Component** | Loader | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/feedback-loading-indicators-circular-loader--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Loader 12 | 13 | Use a loader to inform the user that something is in a loading state. This could apply to a single component, several components, or the entire application/page. 14 | 15 | ![example loading indicators](../images/loader.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Types](#types) 21 | - [Options](#options) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Show a loader whenever a component or application takes longer than 700ms to load. After this time, a loader helps the user understand what's happening: loading is in progress. Without a loading indicator a user would be unsure of their current state. 28 | 29 | --- 30 | 31 | ## Types 32 | 33 | There are different types of loader: circular and linear. For when to use each type of loader, the general rule to follow is: 34 | 35 | | Loader | Usage | 36 | | -------- | ----------------------------------------------------------------------------------------------------------- | 37 | | Circular | Indeterminate loading, for example when the loading time is uncertain and can't be communicated with a percentage | 38 | | Linear | Determinate loading, for example when the loading process can be communicated from 0–100%. | 39 | 40 | ### Circular 41 | 42 | A circular loader is used when the loading time is uncertain and can't be shown as a percentage. A circular loader can spin many times, and each spin does not represent any amount of completion. 43 | 44 | #### Circular page loader 45 | 46 | A circular loader can be used to show that an application is loading. In this case, a circular loader is combined with a screen cover, which prevents the user from interacting with the application. Page loaders are always centered in the viewport. If some components have loaded but not others, display component loaders instead and let the user interact with the components that are ready. 47 | 48 | ![Page loader example](../images/pageloader.png) 49 | 50 | _This page loader covers the whole screen while the application loads._ 51 | 52 | #### Circular component loader 53 | 54 | Component loaders are used to show that a component is loading, like a dashboard item that's waiting for data to load. Components loaders are useful to inform the user that while the application or page has loaded, not all the elements are ready yet. Without a component loader, a user can mistakenly think that data is missing or an error has occurred. Circular component loaders should always be centered in the component and include a component cover element to block the content beneath. 55 | 56 | ![Component loader example](../images/componentloader.png) 57 | 58 | _An example of a dashboard item that hasn't loaded yet, so displays a component loader inside._ 59 | 60 | ### Linear 61 | 62 | Linear loaders are used when the loading percentage is known. They can be used in the same page and component variations as circular loaders. 63 | 64 | ![Component Linear loader example](../images/componentloaderlinear.png) 65 | 66 | _A dashboard item with a linear loader, which shows the user the approximate progress of the loading._ 67 | 68 | --- 69 | 70 | ## Options 71 | 72 | ### Inverted 73 | 74 | ![inverted loader example](../images/inverted-loaders.png) 75 | 76 | Both circular and linear loaders have an `invert` option, which changes the colors used. The `invert` option should be used when the loader is used on a dark background, like a screen cover. -------------------------------------------------------------------------------- /atoms/radio.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------ | 3 | | **Component** | Radio | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/forms-radio-radio--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Radio 12 | 13 | A radio button is a control that allows a user to select a single option from a choice of several. 14 | 15 | ![](../images/radio.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five a dropdown/select menu should be used instead. 28 | 29 | Do not use a radio button if only a single option is available, use a [checkbox](checkbox.md) here instead. 30 | 31 | If there are many options that need to select from, consider using a [select](../molecules/select.md) instead. 32 | 33 | --- 34 | 35 | ## Options 36 | 37 | ### Size 38 | 39 | ![](../images/radio-size.png) 40 | 41 | Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI. 42 | 43 | --- 44 | 45 | ## Examples in use 46 | 47 | ![](../images/radio-example.jpg) 48 | 49 | _Only a single style can be chosen from the options and there are fewer than 5 options, so radio buttons suit this usage._ 50 | -------------------------------------------------------------------------------- /atoms/switch.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------- | 3 | | **Component** | Switch | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/forms-switch-switch--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Switch 12 | 13 | A switch is an input control that allows an on and an off state. 14 | 15 | ![](../images/switch.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | 21 | --- 22 | 23 | ## Usage 24 | 25 | **Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.** 26 | 27 | Use switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a [checkbox](checkbox.md) instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing. 28 | -------------------------------------------------------------------------------- /atoms/tag.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ---------------------------------------------------------- | 3 | | **Component** | Tag | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [CSS Spec](https://sleepy-yalow-3c0c76.netlify.com/) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/data-display-tag--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Tag 12 | 13 | A tag is used to display categorizing labels or information for other elements in a collection. 14 | 15 | ![](../images/tag/tag.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Tags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component. 28 | 29 | Tags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method. 30 | 31 | Tags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements. 32 | 33 | ![](../images/tag/tag-ex-1.png) 34 | 35 | --- 36 | 37 | ## Options 38 | 39 | ### Color 40 | 41 | Tags are available in four different colors. The color of a tag depends on its content and the meaning of that tag. The following system is used for tag coloring: 42 | 43 | | Tag | Meaning | 44 | | -------------------------------- | ------------------------------------------------------------------------------------------- | 45 | | ![](../images/tag/tag-grey.png) | Default. The grey tag is default and has its color should not imply meaning. | 46 | | ![](../images/tag/tag-blue.png) | Neutral. Blue is used when a tag could have valid or error status but is currently neutral. | 47 | | ![](../images/tag/tag-red.png) | Error. Red tags imply an error or a problem. | 48 | | ![](../images/tag/tag-green.png) | Valid. Green tags should be used to indicate validity or success. | 49 | 50 | ### Icon 51 | 52 | ![](../images/tag/tag-icons.png) 53 | 54 | Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. 55 | 56 | ### Bold 57 | 58 | Tags have an optional `bold` property. Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. 59 | 60 | --- 61 | 62 | ## Examples in use 63 | 64 | ![](../images/tag/tag-ex-2.png) 65 | 66 | _Tags are used to give an overview of the status of all the patients displayed in a list in Capture app._ 67 | -------------------------------------------------------------------------------- /atoms/tooltip.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ---------------------------------------------------------------------------- | 3 | | **Component** | Tooltip | 4 | | **Type** | Atom ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://sketch.cloud/s/DwkDk/a/zY21gy) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/data-display-tooltip--default-placement-top) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Tooltip 12 | 13 | A tooltip is a container for displaying information about an element, it is displayed when a user hovers over the element. 14 | 15 | ![](../images/tooltip.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Tooltips only display when a user hovers over an element. Do not use tooltips for critical or important information, users may not find the information or it may completely unavailable to mobile users. Information provided in tooltips should be supplementary or provide helpful context. Icon buttons can use tooltips to inform the user of their action. Never put important information or actions inside a tooltip. 28 | 29 | - Common usage of a tooltip is to expand on the displayed information when the user hovers over the element. 30 | - Do not place actions inside a tooltip, they would be hidden from the user and difficult to click. 31 | - Only text can be displayed in a tooltip. A [popover](../molecules/popover.md) can be used for rich information. 32 | - Limit the text inside a tooltip to a single, short sentence. 33 | - Do not repeat information in a tooltip, provide extra relevant, useful information. 34 | 35 | --- 36 | 37 | ## Options 38 | 39 | ### Placement 40 | 41 | By default the tooltip should display above the hovered element. Alternatively, a tooltip may be displayed underneath or to the side of an element if there is limited space. 42 | 43 | ### Delay 44 | Tooltips allow customization of two delay durations: 45 | 1. `Open`: the delay between the user hovering or focusing the trigger element and the tooltip displaying 46 | 2. `Close`: the delay between the user hover or focus leaving the trigger element and the tooltip hiding 47 | 48 | The default delay values cover generic tooltip use cases. Use the default values unless there is a specific reason, backed by a use case, not to. Where a custom duration is used, consider the following guidelines: 49 | - the default `open` and `close` delay are suited to tooltips that provide guidance and hints for all users 50 | - a longer `open` delay may be suitable if a tooltip is used to expose more details about an element for advanced users. 51 | - a shorter `close` delay might be suitable if there are many tooltip triggers in a single interface, for example, a list where every element triggers a tooltip. 52 | 53 | --- 54 | 55 | ## Examples in use 56 | 57 | ![](../images/tooltip-example-1.png) 58 | 59 | _This tooltip gives the user some more context for the upwards arrow inside the cell: the percentage positive growth and the previous value._ 60 | 61 | --- 62 | 63 | ![](../images/tooltip-example-2.png) 64 | 65 | _This tooltip gives extra information for new users about the action attributed to this icon used in an information dense environment._ 66 | 67 | --- 68 | 69 | ![](../images/tooltip-example-3.png) 70 | 71 | _Hovering over the selected period elements displays extra information, which period is selected. The tooltip is positioned down to avoid overlapping the information above._ 72 | -------------------------------------------------------------------------------- /extras/component-template.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ---------------------------------------------------------- | 3 | | **Component** | ~componentName~ | 4 | | **Type** | ~type~ ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | _pending_ | 7 | | **Status** | `Work in progress`, `Waiting for build`, `Ready to use` | 8 | 9 | --- 10 | 11 | # ~Component Title~ 12 | 13 | ~Short, one-line description of what this component does, what it is for~ 14 | 15 | ![](../images/) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Composition](#composition) 21 | - [Options](#options) 22 | - [Types](#types) 23 | - [States](#states) 24 | - [Examples in use](#examples-in-use) 25 | 26 | --- 27 | 28 | ## Usage 29 | 30 | ~Section describing when this component is used. Useful to open with "componentName is used wherever a user will..."~ 31 | 32 | --- 33 | 34 | ## Composition 35 | 36 | ![](../images/composition.png) 37 | 38 | ~componentName~ is made up of multiple elements, some of which are optional: 39 | 40 | 1. **, optional:** 41 | 2. **, required:** 42 | 3. **, optional:** 43 | 44 | --- 45 | 46 | ## Options 47 | 48 | ### ~option~ 49 | 50 | ![](../images/.png) 51 | 52 | ~Describe a global option~ 53 | 54 | --- 55 | 56 | ## Types 57 | 58 | There are several different types of ~componentName~. 59 | 60 | ### ~type~ 61 | 62 | ![](../images/.png) 63 | 64 | ~Describe the specific type, why is it unique? When should it be used?~ 65 | 66 | Options for ~type~ are: 67 | 68 | - **~typeOption~**: ~describe what this option does.~ 69 | 70 | --- 71 | 72 | ## States 73 | 74 | ~If this component has states, why?~ 75 | 76 | ### ~state~ 77 | 78 | ![](../images/.png) 79 | 80 | ~describe the state. when should it be used? is it triggered automatically? when should it not be used? any caveats?~ 81 | 82 | --- 83 | 84 | ## Examples in use 85 | 86 | ![](../images/-example.png) 87 | 88 | _~explain why this was the right component to use in this use case~_ 89 | -------------------------------------------------------------------------------- /images/alertbar-comp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar-comp.png -------------------------------------------------------------------------------- /images/alertbar-critical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar-critical.png -------------------------------------------------------------------------------- /images/alertbar-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar-example.png -------------------------------------------------------------------------------- /images/alertbar-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar-success.png -------------------------------------------------------------------------------- /images/alertbar-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar-warning.png -------------------------------------------------------------------------------- /images/alertbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/alertbar.png -------------------------------------------------------------------------------- /images/avatar-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/avatar-example-1.png -------------------------------------------------------------------------------- /images/avatar-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/avatar-sizes.png -------------------------------------------------------------------------------- /images/avatar-spec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/avatar-spec.png -------------------------------------------------------------------------------- /images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/avatar.png -------------------------------------------------------------------------------- /images/btn-basic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-basic.jpg -------------------------------------------------------------------------------- /images/btn-destructive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-destructive.jpg -------------------------------------------------------------------------------- /images/btn-dropdown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-dropdown.jpg -------------------------------------------------------------------------------- /images/btn-link.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-link.jpg -------------------------------------------------------------------------------- /images/btn-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-link.png -------------------------------------------------------------------------------- /images/btn-primary.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-primary.jpg -------------------------------------------------------------------------------- /images/btn-secondary.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-secondary.jpg -------------------------------------------------------------------------------- /images/btn-split.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/btn-split.jpg -------------------------------------------------------------------------------- /images/button-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button-disabled.png -------------------------------------------------------------------------------- /images/button-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button-example.png -------------------------------------------------------------------------------- /images/button-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button-icon.png -------------------------------------------------------------------------------- /images/button-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button-sizes.png -------------------------------------------------------------------------------- /images/button-toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button-toggle.png -------------------------------------------------------------------------------- /images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/button.png -------------------------------------------------------------------------------- /images/card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/card.jpg -------------------------------------------------------------------------------- /images/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/card.png -------------------------------------------------------------------------------- /images/checkbox-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/checkbox-example.png -------------------------------------------------------------------------------- /images/checkbox-indeterminate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/checkbox-indeterminate.png -------------------------------------------------------------------------------- /images/checkbox-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/checkbox-sizes.png -------------------------------------------------------------------------------- /images/checkbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/checkbox.jpg -------------------------------------------------------------------------------- /images/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/checkbox.png -------------------------------------------------------------------------------- /images/chip-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-example-1.png -------------------------------------------------------------------------------- /images/chip-icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-icon.jpg -------------------------------------------------------------------------------- /images/chip-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-icon.png -------------------------------------------------------------------------------- /images/chip-table-selected.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-table-selected.jpg -------------------------------------------------------------------------------- /images/chip-table-selected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-table-selected@2x.png -------------------------------------------------------------------------------- /images/chip-table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-table.jpg -------------------------------------------------------------------------------- /images/chip-table@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip-table@2x.png -------------------------------------------------------------------------------- /images/chip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/chip.png -------------------------------------------------------------------------------- /images/color-contrast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color-contrast.jpg -------------------------------------------------------------------------------- /images/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color-picker.png -------------------------------------------------------------------------------- /images/color-scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color-scale.jpg -------------------------------------------------------------------------------- /images/color/color-blue-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-050.png -------------------------------------------------------------------------------- /images/color/color-blue-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-100.png -------------------------------------------------------------------------------- /images/color/color-blue-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-200.png -------------------------------------------------------------------------------- /images/color/color-blue-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-300.png -------------------------------------------------------------------------------- /images/color/color-blue-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-400.png -------------------------------------------------------------------------------- /images/color/color-blue-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-500.png -------------------------------------------------------------------------------- /images/color/color-blue-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-600.png -------------------------------------------------------------------------------- /images/color/color-blue-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-700.png -------------------------------------------------------------------------------- /images/color/color-blue-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-800.png -------------------------------------------------------------------------------- /images/color/color-blue-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-blue-900.png -------------------------------------------------------------------------------- /images/color/color-green-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-050.png -------------------------------------------------------------------------------- /images/color/color-green-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-100.png -------------------------------------------------------------------------------- /images/color/color-green-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-200.png -------------------------------------------------------------------------------- /images/color/color-green-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-300.png -------------------------------------------------------------------------------- /images/color/color-green-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-400.png -------------------------------------------------------------------------------- /images/color/color-green-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-500.png -------------------------------------------------------------------------------- /images/color/color-green-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-600.png -------------------------------------------------------------------------------- /images/color/color-green-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-700.png -------------------------------------------------------------------------------- /images/color/color-green-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-800.png -------------------------------------------------------------------------------- /images/color/color-green-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-green-900.png -------------------------------------------------------------------------------- /images/color/color-grey-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-050.png -------------------------------------------------------------------------------- /images/color/color-grey-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-100.png -------------------------------------------------------------------------------- /images/color/color-grey-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-200.png -------------------------------------------------------------------------------- /images/color/color-grey-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-300.png -------------------------------------------------------------------------------- /images/color/color-grey-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-400.png -------------------------------------------------------------------------------- /images/color/color-grey-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-500.png -------------------------------------------------------------------------------- /images/color/color-grey-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-600.png -------------------------------------------------------------------------------- /images/color/color-grey-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-700.png -------------------------------------------------------------------------------- /images/color/color-grey-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-800.png -------------------------------------------------------------------------------- /images/color/color-grey-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-grey-900.png -------------------------------------------------------------------------------- /images/color/color-red-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-050.png -------------------------------------------------------------------------------- /images/color/color-red-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-100.png -------------------------------------------------------------------------------- /images/color/color-red-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-200.png -------------------------------------------------------------------------------- /images/color/color-red-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-300.png -------------------------------------------------------------------------------- /images/color/color-red-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-400.png -------------------------------------------------------------------------------- /images/color/color-red-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-500.png -------------------------------------------------------------------------------- /images/color/color-red-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-600.png -------------------------------------------------------------------------------- /images/color/color-red-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-700.png -------------------------------------------------------------------------------- /images/color/color-red-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-800.png -------------------------------------------------------------------------------- /images/color/color-red-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-red-900.png -------------------------------------------------------------------------------- /images/color/color-scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-scale.png -------------------------------------------------------------------------------- /images/color/color-teal-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-050.png -------------------------------------------------------------------------------- /images/color/color-teal-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-100.png -------------------------------------------------------------------------------- /images/color/color-teal-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-200.png -------------------------------------------------------------------------------- /images/color/color-teal-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-300.png -------------------------------------------------------------------------------- /images/color/color-teal-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-400.png -------------------------------------------------------------------------------- /images/color/color-teal-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-500.png -------------------------------------------------------------------------------- /images/color/color-teal-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-600.png -------------------------------------------------------------------------------- /images/color/color-teal-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-700.png -------------------------------------------------------------------------------- /images/color/color-teal-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-800.png -------------------------------------------------------------------------------- /images/color/color-teal-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-teal-900.png -------------------------------------------------------------------------------- /images/color/color-yellow-050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-050.png -------------------------------------------------------------------------------- /images/color/color-yellow-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-100.png -------------------------------------------------------------------------------- /images/color/color-yellow-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-200.png -------------------------------------------------------------------------------- /images/color/color-yellow-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-300.png -------------------------------------------------------------------------------- /images/color/color-yellow-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-400.png -------------------------------------------------------------------------------- /images/color/color-yellow-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-500.png -------------------------------------------------------------------------------- /images/color/color-yellow-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-600.png -------------------------------------------------------------------------------- /images/color/color-yellow-700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-700.png -------------------------------------------------------------------------------- /images/color/color-yellow-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-800.png -------------------------------------------------------------------------------- /images/color/color-yellow-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/color-yellow-900.png -------------------------------------------------------------------------------- /images/color/ex-color-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/ex-color-1.png -------------------------------------------------------------------------------- /images/color/ex-color-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/ex-color-2.png -------------------------------------------------------------------------------- /images/color/ex-color-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/ex-color-3.png -------------------------------------------------------------------------------- /images/color/ex-color-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/ex-color-4.png -------------------------------------------------------------------------------- /images/color/ex-color-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/color/ex-color-5.png -------------------------------------------------------------------------------- /images/comment-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-active.png -------------------------------------------------------------------------------- /images/comment-composition-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-composition-active.png -------------------------------------------------------------------------------- /images/comment-composition-display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-composition-display.png -------------------------------------------------------------------------------- /images/comment-composition-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-composition-empty.png -------------------------------------------------------------------------------- /images/comment-display.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-display.jpg -------------------------------------------------------------------------------- /images/comment-display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-display.png -------------------------------------------------------------------------------- /images/comment-editing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-editing.jpg -------------------------------------------------------------------------------- /images/comment-empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-empty.jpg -------------------------------------------------------------------------------- /images/comment-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-empty.png -------------------------------------------------------------------------------- /images/comment-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment-width.png -------------------------------------------------------------------------------- /images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/comment.png -------------------------------------------------------------------------------- /images/communication/ex-comms-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-1.png -------------------------------------------------------------------------------- /images/communication/ex-comms-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-2.png -------------------------------------------------------------------------------- /images/communication/ex-comms-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-3.png -------------------------------------------------------------------------------- /images/communication/ex-comms-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-4.png -------------------------------------------------------------------------------- /images/communication/ex-comms-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-5.png -------------------------------------------------------------------------------- /images/communication/ex-comms-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-6.png -------------------------------------------------------------------------------- /images/communication/ex-comms-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/communication/ex-comms-7.png -------------------------------------------------------------------------------- /images/componentloader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/componentloader.png -------------------------------------------------------------------------------- /images/componentloaderlinear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/componentloaderlinear.png -------------------------------------------------------------------------------- /images/dashboard-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/dashboard-example.jpg -------------------------------------------------------------------------------- /images/data-table/actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/actions.png -------------------------------------------------------------------------------- /images/data-table/bordered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/bordered.png -------------------------------------------------------------------------------- /images/data-table/cell-edit-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/cell-edit-active.png -------------------------------------------------------------------------------- /images/data-table/cell-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/cell-edit.png -------------------------------------------------------------------------------- /images/data-table/cell-formatting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/cell-formatting.png -------------------------------------------------------------------------------- /images/data-table/composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/composition.png -------------------------------------------------------------------------------- /images/data-table/data-table-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/data-table-example-1.png -------------------------------------------------------------------------------- /images/data-table/data-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/data-table.png -------------------------------------------------------------------------------- /images/data-table/edit-columns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/edit-columns.png -------------------------------------------------------------------------------- /images/data-table/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/empty.png -------------------------------------------------------------------------------- /images/data-table/expandable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/expandable.png -------------------------------------------------------------------------------- /images/data-table/filter-display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/filter-display.png -------------------------------------------------------------------------------- /images/data-table/filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/filter.png -------------------------------------------------------------------------------- /images/data-table/fixed-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/fixed-column.png -------------------------------------------------------------------------------- /images/data-table/fixed-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/fixed-header.png -------------------------------------------------------------------------------- /images/data-table/inline-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/inline-edit.png -------------------------------------------------------------------------------- /images/data-table/inline-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/inline-filter.png -------------------------------------------------------------------------------- /images/data-table/large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/large.png -------------------------------------------------------------------------------- /images/data-table/reorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/reorder.png -------------------------------------------------------------------------------- /images/data-table/row-actions 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/row-actions 2.png -------------------------------------------------------------------------------- /images/data-table/row-actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/row-actions.png -------------------------------------------------------------------------------- /images/data-table/row-edit-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/row-edit-active.png -------------------------------------------------------------------------------- /images/data-table/row-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/row-edit.png -------------------------------------------------------------------------------- /images/data-table/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/search.png -------------------------------------------------------------------------------- /images/data-table/selectable-rows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/selectable-rows.png -------------------------------------------------------------------------------- /images/data-table/selectable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/selectable.png -------------------------------------------------------------------------------- /images/data-table/sorting 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/sorting 2.png -------------------------------------------------------------------------------- /images/data-table/sorting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/sorting.png -------------------------------------------------------------------------------- /images/data-table/standalone-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/standalone-filter.png -------------------------------------------------------------------------------- /images/data-table/status-badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/status-badge.png -------------------------------------------------------------------------------- /images/data-table/status-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/status-default.png -------------------------------------------------------------------------------- /images/data-table/status-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/status-error.png -------------------------------------------------------------------------------- /images/data-table/status-neutral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/status-neutral.png -------------------------------------------------------------------------------- /images/data-table/status-valid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/status-valid.png -------------------------------------------------------------------------------- /images/data-table/table-actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/table-actions.png -------------------------------------------------------------------------------- /images/data-table/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/data-table/title.png -------------------------------------------------------------------------------- /images/elevation-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/elevation-example.png -------------------------------------------------------------------------------- /images/elevation-illu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/elevation-illu.png -------------------------------------------------------------------------------- /images/elevation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/elevation.jpg -------------------------------------------------------------------------------- /images/elevation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/elevation.png -------------------------------------------------------------------------------- /images/elevation@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/elevation@2x.png -------------------------------------------------------------------------------- /images/event-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/event-example.jpg -------------------------------------------------------------------------------- /images/ex-group-inputs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/ex-group-inputs.png -------------------------------------------------------------------------------- /images/ex-layout-titles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/ex-layout-titles.png -------------------------------------------------------------------------------- /images/file-input-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-input-composition.png -------------------------------------------------------------------------------- /images/file-upload-error-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-error-file.png -------------------------------------------------------------------------------- /images/file-upload-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-error.png -------------------------------------------------------------------------------- /images/file-upload-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-full.png -------------------------------------------------------------------------------- /images/file-upload-help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-help.png -------------------------------------------------------------------------------- /images/file-upload-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-label.png -------------------------------------------------------------------------------- /images/file-upload-loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-loader.png -------------------------------------------------------------------------------- /images/file-upload-multi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-multi.png -------------------------------------------------------------------------------- /images/file-upload-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload-placeholder.png -------------------------------------------------------------------------------- /images/file-upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/file-upload.png -------------------------------------------------------------------------------- /images/filtered-information.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/filtered-information.jpg -------------------------------------------------------------------------------- /images/forms/actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/forms/actions.png -------------------------------------------------------------------------------- /images/forms/contextual-help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/forms/contextual-help.png -------------------------------------------------------------------------------- /images/forms/input-help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/forms/input-help.png -------------------------------------------------------------------------------- /images/forms/progressive-disclosure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/forms/progressive-disclosure.png -------------------------------------------------------------------------------- /images/forms/save-context.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/forms/save-context.png -------------------------------------------------------------------------------- /images/global-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/global-header.jpg -------------------------------------------------------------------------------- /images/global-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/global-header.png -------------------------------------------------------------------------------- /images/global-header@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/global-header@2x.png -------------------------------------------------------------------------------- /images/grouping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/grouping.png -------------------------------------------------------------------------------- /images/icon-button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icon-button.jpg -------------------------------------------------------------------------------- /images/icon-list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icon-list.jpg -------------------------------------------------------------------------------- /images/icons/consistency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icons/consistency.png -------------------------------------------------------------------------------- /images/icons/icon-alignment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icons/icon-alignment.png -------------------------------------------------------------------------------- /images/icons/icon-and-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icons/icon-and-text.png -------------------------------------------------------------------------------- /images/icons/icon-color-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icons/icon-color-state.png -------------------------------------------------------------------------------- /images/icons/icon-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/icons/icon-color.png -------------------------------------------------------------------------------- /images/input-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-composition.png -------------------------------------------------------------------------------- /images/input-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-disabled.png -------------------------------------------------------------------------------- /images/input-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-email.png -------------------------------------------------------------------------------- /images/input-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-error.png -------------------------------------------------------------------------------- /images/input-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-loading.png -------------------------------------------------------------------------------- /images/input-number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-number.png -------------------------------------------------------------------------------- /images/input-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-password.png -------------------------------------------------------------------------------- /images/input-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-placeholder.png -------------------------------------------------------------------------------- /images/input-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-sizes.png -------------------------------------------------------------------------------- /images/input-telephone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-telephone.png -------------------------------------------------------------------------------- /images/input-textarea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-textarea.png -------------------------------------------------------------------------------- /images/input-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-url.png -------------------------------------------------------------------------------- /images/input-valid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input-valid.png -------------------------------------------------------------------------------- /images/input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/input.png -------------------------------------------------------------------------------- /images/inverted-loaders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/inverted-loaders.png -------------------------------------------------------------------------------- /images/large-data/batch-editing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/large-data/batch-editing.png -------------------------------------------------------------------------------- /images/large-data/example-user-information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/large-data/example-user-information.png -------------------------------------------------------------------------------- /images/large-data/expensive-operations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/large-data/expensive-operations.png -------------------------------------------------------------------------------- /images/large-data/filtering-searching-sorting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/large-data/filtering-searching-sorting.png -------------------------------------------------------------------------------- /images/large-data/respect-user-resources.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/large-data/respect-user-resources.png -------------------------------------------------------------------------------- /images/layout-8grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-8grid.png -------------------------------------------------------------------------------- /images/layout-complex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-complex.png -------------------------------------------------------------------------------- /images/layout-sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-sidebar.png -------------------------------------------------------------------------------- /images/layout-single-purpose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-single-purpose.png -------------------------------------------------------------------------------- /images/layout-spacing-scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-spacing-scale.png -------------------------------------------------------------------------------- /images/layout-toolbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/layout-toolbar.png -------------------------------------------------------------------------------- /images/library-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/library-thumbnail.png -------------------------------------------------------------------------------- /images/line-lengths.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/line-lengths.jpg -------------------------------------------------------------------------------- /images/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/loader.png -------------------------------------------------------------------------------- /images/menu-destructive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-destructive.png -------------------------------------------------------------------------------- /images/menu-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-disabled.png -------------------------------------------------------------------------------- /images/menu-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-example.png -------------------------------------------------------------------------------- /images/menu-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-icons.png -------------------------------------------------------------------------------- /images/menu-levels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-levels.png -------------------------------------------------------------------------------- /images/menu-sections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-sections.png -------------------------------------------------------------------------------- /images/menu-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu-size.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menu.png -------------------------------------------------------------------------------- /images/menuitem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/menuitem.png -------------------------------------------------------------------------------- /images/modal-acknowledge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-acknowledge.png -------------------------------------------------------------------------------- /images/modal-breakdown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-breakdown.jpg -------------------------------------------------------------------------------- /images/modal-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-composition.png -------------------------------------------------------------------------------- /images/modal-confirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-confirmation.png -------------------------------------------------------------------------------- /images/modal-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-error.png -------------------------------------------------------------------------------- /images/modal-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-example-1.png -------------------------------------------------------------------------------- /images/modal-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-example-2.png -------------------------------------------------------------------------------- /images/modal-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-large.jpg -------------------------------------------------------------------------------- /images/modal-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-loading.png -------------------------------------------------------------------------------- /images/modal-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-medium.jpg -------------------------------------------------------------------------------- /images/modal-scroll.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-scroll.jpg -------------------------------------------------------------------------------- /images/modal-singleaction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-singleaction.jpg -------------------------------------------------------------------------------- /images/modal-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-small.jpg -------------------------------------------------------------------------------- /images/modal-task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/modal-task.png -------------------------------------------------------------------------------- /images/notice-box-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-composition.png -------------------------------------------------------------------------------- /images/notice-box-critical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-critical.png -------------------------------------------------------------------------------- /images/notice-box-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-example.png -------------------------------------------------------------------------------- /images/notice-box-information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-information.png -------------------------------------------------------------------------------- /images/notice-box-information@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-information@2x.png -------------------------------------------------------------------------------- /images/notice-box-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/notice-box-warning.png -------------------------------------------------------------------------------- /images/ou-tree/org-unit-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/ou-tree/org-unit-tree.png -------------------------------------------------------------------------------- /images/ou-tree/selection-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/ou-tree/selection-type.png -------------------------------------------------------------------------------- /images/pageloader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pageloader.png -------------------------------------------------------------------------------- /images/pagination-compact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination-compact.png -------------------------------------------------------------------------------- /images/pagination-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination-composition.png -------------------------------------------------------------------------------- /images/pagination-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination-example.png -------------------------------------------------------------------------------- /images/pagination-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination-full.png -------------------------------------------------------------------------------- /images/pagination-viewing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination-viewing.png -------------------------------------------------------------------------------- /images/pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pagination.png -------------------------------------------------------------------------------- /images/pattern/time/timestamp-expand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pattern/time/timestamp-expand.png -------------------------------------------------------------------------------- /images/pattern/time/timestamp-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/pattern/time/timestamp-tooltip.png -------------------------------------------------------------------------------- /images/popover-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover-.jpg -------------------------------------------------------------------------------- /images/popover-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover-2x.png -------------------------------------------------------------------------------- /images/popover-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover-example.jpg -------------------------------------------------------------------------------- /images/popover-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover-example.png -------------------------------------------------------------------------------- /images/popover-example@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover-example@2x.png -------------------------------------------------------------------------------- /images/popover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/popover.png -------------------------------------------------------------------------------- /images/radio-buttons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio-buttons.jpg -------------------------------------------------------------------------------- /images/radio-buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio-buttons.png -------------------------------------------------------------------------------- /images/radio-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio-example.jpg -------------------------------------------------------------------------------- /images/radio-example@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio-example@2x.png -------------------------------------------------------------------------------- /images/radio-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio-size.png -------------------------------------------------------------------------------- /images/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/radio.png -------------------------------------------------------------------------------- /images/rich-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/rich-text.png -------------------------------------------------------------------------------- /images/rt-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/rt-composition.png -------------------------------------------------------------------------------- /images/rt-mentions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/rt-mentions.png -------------------------------------------------------------------------------- /images/rt-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/rt-preview.png -------------------------------------------------------------------------------- /images/rt-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/rt-tools.png -------------------------------------------------------------------------------- /images/segmented-control-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/segmented-control-example.png -------------------------------------------------------------------------------- /images/segmented-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/segmented-control.png -------------------------------------------------------------------------------- /images/select-clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-clear.png -------------------------------------------------------------------------------- /images/select-custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-custom.png -------------------------------------------------------------------------------- /images/select-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-empty.png -------------------------------------------------------------------------------- /images/select-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-example-1.png -------------------------------------------------------------------------------- /images/select-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-example-2.png -------------------------------------------------------------------------------- /images/select-example-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-example-3.png -------------------------------------------------------------------------------- /images/select-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-filter.png -------------------------------------------------------------------------------- /images/select-inlinelabel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-inlinelabel.png -------------------------------------------------------------------------------- /images/select-multiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-multiple.png -------------------------------------------------------------------------------- /images/select-single.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select-single.png -------------------------------------------------------------------------------- /images/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/select.png -------------------------------------------------------------------------------- /images/spacing-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/spacing-example.jpg -------------------------------------------------------------------------------- /images/spacing-scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/spacing-scale.jpg -------------------------------------------------------------------------------- /images/stacking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/stacking.png -------------------------------------------------------------------------------- /images/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/switch.png -------------------------------------------------------------------------------- /images/table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/table.jpg -------------------------------------------------------------------------------- /images/table@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/table@2x.png -------------------------------------------------------------------------------- /images/tabs-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-example.jpg -------------------------------------------------------------------------------- /images/tabs-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-example.png -------------------------------------------------------------------------------- /images/tabs-fixed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fixed.jpg -------------------------------------------------------------------------------- /images/tabs-fixed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fixed.png -------------------------------------------------------------------------------- /images/tabs-fixed@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fixed@2x.png -------------------------------------------------------------------------------- /images/tabs-fluid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fluid.jpg -------------------------------------------------------------------------------- /images/tabs-fluid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fluid.png -------------------------------------------------------------------------------- /images/tabs-fluid@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs-fluid@2x.png -------------------------------------------------------------------------------- /images/tabs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs.jpg -------------------------------------------------------------------------------- /images/tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs.png -------------------------------------------------------------------------------- /images/tabs@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tabs@2x.png -------------------------------------------------------------------------------- /images/tag/tag-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-blue.png -------------------------------------------------------------------------------- /images/tag/tag-ex-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-ex-1.png -------------------------------------------------------------------------------- /images/tag/tag-ex-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-ex-2.png -------------------------------------------------------------------------------- /images/tag/tag-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-green.png -------------------------------------------------------------------------------- /images/tag/tag-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-grey.png -------------------------------------------------------------------------------- /images/tag/tag-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-icons.png -------------------------------------------------------------------------------- /images/tag/tag-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag-red.png -------------------------------------------------------------------------------- /images/tag/tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tag/tag.png -------------------------------------------------------------------------------- /images/test-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/test-color.png -------------------------------------------------------------------------------- /images/text-input-dense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-dense.png -------------------------------------------------------------------------------- /images/text-input-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-error.png -------------------------------------------------------------------------------- /images/text-input-help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-help.png -------------------------------------------------------------------------------- /images/text-input-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-loading.png -------------------------------------------------------------------------------- /images/text-input-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-sizes.png -------------------------------------------------------------------------------- /images/text-input-valid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input-valid.png -------------------------------------------------------------------------------- /images/text-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/text-input.png -------------------------------------------------------------------------------- /images/tooltip-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example-1.png -------------------------------------------------------------------------------- /images/tooltip-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example-2.png -------------------------------------------------------------------------------- /images/tooltip-example-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example-3.png -------------------------------------------------------------------------------- /images/tooltip-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example.jpg -------------------------------------------------------------------------------- /images/tooltip-example2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example2.jpg -------------------------------------------------------------------------------- /images/tooltip-example2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example2@2x.png -------------------------------------------------------------------------------- /images/tooltip-example3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example3.jpg -------------------------------------------------------------------------------- /images/tooltip-example3@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example3@2x.png -------------------------------------------------------------------------------- /images/tooltip-example@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip-example@2x.png -------------------------------------------------------------------------------- /images/tooltip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip.jpg -------------------------------------------------------------------------------- /images/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip.png -------------------------------------------------------------------------------- /images/tooltip@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/tooltip@2x.png -------------------------------------------------------------------------------- /images/transfer-buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-buttons.png -------------------------------------------------------------------------------- /images/transfer-composition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-composition.png -------------------------------------------------------------------------------- /images/transfer-custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-custom.png -------------------------------------------------------------------------------- /images/transfer-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-empty.png -------------------------------------------------------------------------------- /images/transfer-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-error.png -------------------------------------------------------------------------------- /images/transfer-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-example.png -------------------------------------------------------------------------------- /images/transfer-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-filter.png -------------------------------------------------------------------------------- /images/transfer-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-footer.png -------------------------------------------------------------------------------- /images/transfer-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-header.png -------------------------------------------------------------------------------- /images/transfer-reorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer-reorder.png -------------------------------------------------------------------------------- /images/transfer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/transfer.png -------------------------------------------------------------------------------- /images/type-hierarchy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/type-hierarchy.jpg -------------------------------------------------------------------------------- /images/type/hierarchy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/type/hierarchy.png -------------------------------------------------------------------------------- /images/type/lineheight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/type/lineheight.png -------------------------------------------------------------------------------- /images/type/linelength.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/type/linelength.png -------------------------------------------------------------------------------- /images/type/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhis2/design-system/d68257f4df37b814f21980352569361cbe353b12/images/type/size.png -------------------------------------------------------------------------------- /molecules/notice-box.md: -------------------------------------------------------------------------------- 1 | | | | 2 | |-------------|------------------| 3 | | **Component** | Notice Box | 4 | | **Type** | Molecule ([?](http://atomicdesign.bradfrost.com/chapter-2/))| 5 | | **Design Spec** | [Link](https://sketch.cloud/s/DwkDk/a/nzvzrk) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/data-display-notice-box--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Notice Box 12 | 13 | A notice box component highlights useful information that is directly relevant to the page the user is viewing. 14 | 15 | ![](../images/notice-box-information@2x.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Composition](#composition) 21 | - [Options](#options) 22 | - [Types](#types) 23 | - [Examples in use](#examples-in-use) 24 | 25 | ## Usage 26 | Use a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of. 27 | 28 | Notice boxes are different from [alert bars](alertbar.md) in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened. 29 | 30 | Another way to decide which component to use: 31 | 32 | - a notice box will usually be displayed when a page loads, before a user takes action 33 | - an alert bar will usually display in response to an action/event 34 | 35 | Notice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display. 36 | 37 | Do not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information. 38 | 39 | ## Composition 40 | 41 | ![](../images/notice-box-composition.png) 42 | 43 | A notice box is made up of multiple elements, some of which are optional: 44 | 45 | 1. **Icon and title, required** 46 | 2. **Body text, required** 47 | 3. **Actions (maximum 2), optional** 48 | 49 | --- 50 | 51 | ## Options 52 | 53 | ### Actions 54 | Notice boxes can contain up to two actions, displayed as text links. 55 | 56 | Actions should always relate to the content of the notice box and should help to find out more information or resolve the problem that triggered the notice box. 57 | 58 | For help writing effective action text, check out the [content and communication principles](../principles/content-communication.md). 59 | 60 | --- 61 | 62 | ## Types 63 | 64 | There are three different types of notice box that are suited to different types of information. 65 | 66 | ### Information 67 | ![](../images/notice-box-information.png) 68 | 69 | Use an information notice box where the information is not problematic or critical, but it would still be useful for the user to know about it. 70 | 71 | Actions are less necessary for information notice boxes. A useful action could be a link to documentation to find out more, for example. 72 | 73 | ### Warning 74 | ![](../images/notice-box-warning.png) 75 | 76 | Use a warning notice box to alert the user to something that is a problem, but not critical to the current workflow. 77 | 78 | Where possible, include an action to help the user resolve the problem. 79 | 80 | ### Critical 81 | ![](../images/notice-box-critical.png) 82 | 83 | Use a critical notice box to alert the user to a critical problem on the page/in the current context. Reserve critical notice boxes only for situations where the users path forward is blocked, or there is a problem that needs to be solved immediately. 84 | 85 | A critical notice box should contain an action, it is important to help the user resolve a critical problem. 86 | 87 | --- 88 | 89 | ## Examples in use 90 | 91 | ![](../images/notice-box-example.png) 92 | 93 | *A warning notice box is displayed when viewing the dashboard of a person that might be a duplicate. This is not a critical problem, but it is very useful to warn the user about it. There is also a helpful action to unmark the person.* 94 | -------------------------------------------------------------------------------- /molecules/pagination.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------------------------ | 3 | | **Component** | Pagination | 4 | | **Type** | Molecule ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://www.sketch.com/s/3b3cacfc-bde2-4f89-ab9f-3ffc05cfd34d/a/AlV1YR) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/navigation-pagination--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Pagination 12 | 13 | Pagination is used to allow navigation through data displayed over several pages. 14 | 15 | ![](../images/pagination.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Composition](#composition) 21 | - [Options](#options) 22 | - [Types](#types) 23 | - [Examples in use](#examples-in-use) 24 | 25 | --- 26 | 27 | ## Usage 28 | 29 | Pagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used. 30 | 31 | **Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.** 32 | 33 | --- 34 | 35 | ## Composition 36 | 37 | ![](../images/pagination-composition.png) 38 | 39 | The pagination component is made up of several elements, some of which are optional: 40 | 41 | 1. **Previous & Next buttons, required** 42 | 2. **Page control dropdown, optional** 43 | 3. **Context information, optional** 44 | 4. **Result count selector, optional** 45 | 46 | --- 47 | 48 | ## Options 49 | 50 | ### Page control dropdown 51 | 52 | The page control dropdown allows quick access to any page of the data without needing to use the previous and next buttons. The page control dropdown should be included if a user might need to jump around between pages often. Do not include the dropdown unless there is an identified need, it adds visual noise and complexity to the component. 53 | 54 | ### Context information 55 | 56 | Context information helps the user understand where they are in within a large dataset. Include context information whenever it is important to a user to understand how the data they are viewing relates to the dataset as a whole. Do not include the context information unless there is an identified need, it adds visual noise and complexity to the component. 57 | 58 | ### Result count selector 59 | 60 | The result count selector allows a user to adjust the number of data items displayed in the component that the pagination relates to. Use a result count selector wherever a user might want to customize their view of the data. Remember that allowing large counts may negatively affect users on slow connections. 61 | 62 | --- 63 | 64 | ## Types 65 | 66 | There are no strict types of pagination component, the different optional elements can be included individually. This allows the component to be as flexible as possible. The most often used 'types' of pagination are Compact and Full, explained below. 67 | 68 | ### Compact 69 | 70 | ![](../images/pagination-compact.png) 71 | 72 | Smaller datasets might not need full pagination controls. Only including the previous and next buttons results in a simple, compact component. 73 | 74 | ### Full pagination 75 | 76 | ![](../images/pagination.png) 77 | 78 | Including all of the pagination elements results in a full-featured pagination control, useful to managing large datasets. 79 | 80 | --- 81 | 82 | ## Examples in use 83 | 84 | ![](../images/pagination-example.png) 85 | 86 | _Full pagination is used to view and navigate search results in Capture app._ 87 | -------------------------------------------------------------------------------- /molecules/popover.md: -------------------------------------------------------------------------------- 1 | | | | 2 | |-------------|------------------| 3 | | **Component** | Popover | 4 | | **Type** | Molecule ([?](http://atomicdesign.bradfrost.com/chapter-2/))| 5 | | **Design Spec** | [Link](https://sketch.cloud/s/DwkDk/eKeoaxx) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/data-display-popover--default) | 7 | | **Status** | `Ready to use`| 8 | 9 | --- 10 | 11 | # Popover 12 | 13 | A popover displays extra content to a user. Popovers are useful to give a user more information or possible actions without disrupting a page or flow. 14 | 15 | ![](../images/popover.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Popovers are similar to [tooltips](../atoms/tooltip.md), they are for displaying extra information, but popovers are intended for richer information and actions. 28 | 29 | Popovers are triggered by hovering or tapping on an element. Clicking on a element keeps the popover open until the user clicks or interacts elsewhere on the page. 30 | 31 | Popovers can contain information in the form of rich markup, as well as actions. Critical actions, or the only action on a page, should not be hidden behind inside a popover. 32 | 33 | Before using a popover, consider that some users may never see the information contained within. If that is a problem, display the information right on the page instead. Do not use a popover for content that is essential to the user experience or application. 34 | 35 | --- 36 | 37 | ## Options 38 | 39 | ### Placement 40 | 41 | By default popovers are displayed above the target element. Where space is limited, or where it may make sense,the popover can appear below or to the side of an element. 42 | 43 | --- 44 | 45 | ## Examples in use 46 | 47 | ![](../images/popover-example.png) 48 | 49 | *This popover displays useful information about a data element in a form. A user might not need this information daily, but it is useful to be able to access for new users or those that need a reminder. A popover serves this purpose well.* 50 | -------------------------------------------------------------------------------- /molecules/segmented-control.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ----------------------------------------------------------------- | 3 | | **Component** | Segmented Control | 4 | | **Type** | Molecule ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://sleepy-yalow-3c0c76.netlify.app/segmented-control) | 6 | | **Working Examples** | _pending_ | 7 | | **Status** | `Waiting for build` | 8 | 9 | --- 10 | 11 | # Segmented Control 12 | 13 | Using a segmented control, a user can select between related options. The selection made will change or effect another area of content. 14 | 15 | ![](../images/segmented-control.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Examples in use](#examples-in-use) 21 | 22 | --- 23 | 24 | ## Usage 25 | 26 | A segmented control is used to select between options that relate to another area of content. All of the options in a segmented control should be closely related. 27 | 28 | Do not use a segmented control as a standalone selection, it should always be used as a selector for other content. For example, do not use a segmented control in place of radio buttons when making a single, standalone choice. 29 | 30 | Keep the text label for each option clear and concise. Long labels will make this component difficult to use. 31 | 32 | There must always be a selected option. Ensure the default selected option is the most used option where possible. 33 | 34 | #### Segmented Control vs. Tabs 35 | 36 | A segmented control is similar in functionality to the [tab component](tab.md), however there are differences in their intended usage. 37 | 38 | - Tabs are used to select between several options, usually more than three, that are loosely related. Tabs are a high-level navigational component. 39 | - A segmented control is used to select between a few options, usually less than three, that are closely related or as part of a single theme. A segmented control is a low-level selection component. 40 | 41 | Tabs can be used to provide navigation between several sections of an application, for example. A segmented control might be used to select between difference selection modes inside another component. 42 | 43 | --- 44 | 45 | ## Examples in use 46 | 47 | ![](../images/segmented-control-example.png) 48 | 49 | _This example illustrates the difference between a segmented control and tab selection. A segmented control is used to select between different modes of period selection: predefined or by start/end dates. The choice here is focused and applies to a single theme. The tabs above provide navigation between the global sections of this options dialog._ 50 | -------------------------------------------------------------------------------- /molecules/tab.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------------- | 3 | | **Component** | Tabs | 4 | | **Type** | Molecule ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Link](https://sketch.cloud/s/DwkDk/GmKbAL5) | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/navigation-tab-bar--default-fluid) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Tabs 12 | 13 | Tabs act as containers for content. Tabs are used to divide content into categories and/or sections. 14 | 15 | ![](../images/tabs.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Types](#types) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | - Use tabs to split related content into separate sections. 28 | - Each tab should contain content that relates to one another, but the content should not overlap. 29 | - Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page. 30 | - Do not use tabs to compare content. 31 | - Do not use tabs for sequential content that needs to be done in order. 32 | - Do not use tabs for content that needs to be viewed at the same time. 33 | - The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs. 34 | 35 | ### Naming 36 | 37 | Give tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name. 38 | 39 | For example: 40 | Do use "Legends" instead of "Set up legends", 41 | Do use "Data analysis" instead of "Options for analysis of data", 42 | 43 | Do not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names "Data", "Legend", "Style". Do not repeat 'options' for all, e.g. "Data options", "Legend options" etc. 44 | 45 | --- 46 | 47 | ## Types 48 | 49 | ### Fluid vs. Fixed 50 | 51 | The default tab style is fluid, where each tab width is defined by its name: 52 | ![](../images/tabs-fluid.png) 53 | 54 | Fixed tabs always fill the width of their container: 55 | ![](../images/tabs-fixed.png) 56 | 57 | Fluid tabs should be used in most situations. Fixed tabs are useful when there is an either/or selection between two modes. For example, fixed tabs may give the user an option between 'Table' or 'Form' entry for the same data entry screen. 58 | 59 | --- 60 | 61 | ## Examples in use 62 | 63 | ![](../images/tabs-example.png) 64 | 65 | _Tabs are used inside the 'Options' modal in Pivot Tables. Different categories of option are split into logical categories. Attempting to list all these options in a single screen would be overwhelming for a user._ 66 | -------------------------------------------------------------------------------- /organisms/color-picker.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ----------------------------------------------------------------------- | 3 | | **Component** | Color Picker | 4 | | **Type** | Organism ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [HTML & CSS Spec](https://sleepy-yalow-3c0c76.netlify.com/color-picker) | 6 | | **Working Examples** | _pending_ | 7 | | **Status** | `Waiting for build` | 8 | 9 | --- 10 | 11 | # Color Picker 12 | 13 | A user can use the color picker to select a color from predefined palettes or by entering custom values. 14 | 15 | ![](../images/color-picker.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | - [Examples in use](#examples-in-use) 22 | 23 | --- 24 | 25 | ## Usage 26 | 27 | Use a color picker wherever a user needs to select a color. A color picker provides an interactive experience, allowing a user to explore available color options before making a selection. A color picker is always the preferred method for color selection (instead of, for example, entering raw color hex codes). 28 | 29 | A color picker can be opened from various triggers: buttons, selects or other elements. The triggering element is not defined in the color picker component. Picking a color as part of a form would make a Select element a good choice. Picking a color as part of a complex component may be best done via a small button. Use the triggering element that makes sense in the application use case. 30 | 31 | --- 32 | 33 | ## Options 34 | 35 | ### Predefined colors 36 | 37 | By default, a color picker displays columns or rows of predefined colors. Use predefined colors to give a user a selection of sensible default colors to choose from. Make sure to provide consistent predefined colors in the same column/row layout throughout a single app, a user may want to select the same color for multiple elements. 38 | 39 | The color picker component is supplied with default predefined colors. Use these defaults unless there is a specific reason to redefine the predefined colors. 40 | 41 | Predefined colors can be omitted, but only where there is a good reason to do so. In the majority of use cases, predefined colors should be available. 42 | 43 | ### Custom color selection 44 | 45 | A color picker can display custom color selection controls. Use the custom color controls to allow a user to select a color not available in the predefined colors. Only display the custom color controls for users that need to make a custom selection, as the interface can be imposing and confusing to users with low tech-literacy. 46 | 47 | --- 48 | 49 | ## Examples in use 50 | 51 | 52 | 53 | _Coming soon_. 54 | -------------------------------------------------------------------------------- /organisms/header-bar.md: -------------------------------------------------------------------------------- 1 | | | | 2 | |-------------|------------------| 3 | | **Component** | Header Bar | 4 | | **Type** | Organism ([?](http://atomicdesign.bradfrost.com/chapter-2/))| 5 | | **Design Spec** | *pending* | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/utils-header-bar--default) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Header Bar 12 | 13 | The header bar is the common navigation bar used in all DHIS2 apps. 14 | 15 | ![example of header bar](../images/global-header.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | 22 | --- 23 | 24 | ## Usage 25 | 26 | The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar. 27 | 28 | --- 29 | 30 | ## Options 31 | 32 | ### Theme 33 | 34 | The header bar can be themed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color. 35 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/amount-of-selected-children.feature: -------------------------------------------------------------------------------- 1 | Feature: Show amount of selected children 2 | 3 | It'd be difficult to know how many children of a unit 4 | are selected while it's collapsed. And while the version 5 | with checkboxes at least displays the "indeterminate" state, 6 | the version in which only one unit can be selected at a time, 7 | it's impossible to know whether a unit has selected descendants 8 | or not. That's why each unit should indicate the amount of 9 | selected children 10 | 11 | Scenario: There are no descendants for a unit 12 | Given the unit has no selected descendants 13 | Then there is no indication at all 14 | 15 | Scenario: There are descendants for a unit 16 | Given the unit has selected descendants 17 | Then the indicator shows the number 18 | 19 | Examples: 20 | | amount | 21 | | 1 | 22 | | 5 | 23 | | 10 | 24 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/children-tree.feature: -------------------------------------------------------------------------------- 1 | Feature: Child organisation units are rendered tree-like 2 | 3 | Scenario: Children are displayed in a tree-like fashion 4 | Given a level is opened 5 | And is done loading its details 6 | And has children 7 | Then an organisation unit tree is rendered for each child 8 | 9 | Scenario: Unit with children is closed 10 | Given a level is closed 11 | And is done loading its details 12 | And has children 13 | Then no children are rendered 14 | And an arrow indicates that the level is closed 15 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/highlight-selected-level-and-sublevels.feature: -------------------------------------------------------------------------------- 1 | Feature: Highlight selected level and sublevels 2 | 3 | To be able to differentiate a unit and its descendants, 4 | the user should be able to select a unit which will 5 | then be highlighted visually 6 | 7 | Scenario: The user highlights the whole subtree of an org unit 8 | Given the user clicks on the org unit name 9 | When the org unit hasn't been highlighted yet 10 | Then the org unit and its whole subtree is highlighted 11 | 12 | Scenario: The user clicks on the label of a deselected, highlighted org unit 13 | Given the user clicks on the org unit name 14 | And the org unit hasn't been selected 15 | When the org unit has been highlighted yet 16 | Then the org unit is selected 17 | 18 | Scenario: The user clicks on the label of a selected, highlighted org unit 19 | Given the user clicks on the org unit name 20 | And the org unit has been selected 21 | When the org unit has been highlighted yet 22 | Then the org unit is deselected 23 | 24 | Scenario: The user clicks on the checkbox of an org unit in the sub tree 25 | Given an org unit has been highlighted 26 | When the user clicks on the checkbox of an org unit in the sub tree 27 | Then the already highlighted org unit stays highlighted 28 | 29 | Scenario: The user clicks on the label of an org unit in the sub tree 30 | Given an org unit has been highlighted 31 | When the user clicks on the label of an org unit in the sub tree 32 | Then the previously highlighted org unit is not highlighted 33 | And the clicked org unit and its sub tree is highlighted 34 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/initially-opened-trees.feature: -------------------------------------------------------------------------------- 1 | Feature: Defined paths can be opened from the start 2 | 3 | When initially rendering, all levels will be closed. 4 | Sometimes it's useful to open some paths right from the beginning. 5 | The organisation unit should be able to accept a list of paths that 6 | will be opened initially 7 | 8 | Scenario: Displaying an organisation unit tree with no initially opened levels 9 | Given the organisation unit tree is rendered for the first time 10 | And no initially opened levels are provided 11 | Then the root level should be closed 12 | 13 | Scenario: Displaying an organisation unit tree with one initially opened level 14 | Given the organisation unit tree is rendered for the first time 15 | And some initially opened levels are provided 16 | Then all levels and their paths should be opened 17 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/lazy-children-loading.feature: -------------------------------------------------------------------------------- 1 | Feature: Loading children lazily when opening a level 2 | 3 | Some organisation unit trees can contain thousands of units. 4 | In order to reduce the network workload, children's details 5 | will be loaded only once the children's level is opened 6 | 7 | Scenario: Level is closed and has never been opened 8 | Given a level is closed 9 | And has never been opened 10 | Then no children will be rendered 11 | 12 | Scenario: Level is opened for the first time 13 | Given a level is closed 14 | And has not been opened yet 15 | When the level is opened 16 | Then the data for the children is be loaded 17 | And an organisation unit tree should be rendered for each child 18 | 19 | # Caching of previously loaded children 20 | # ===================================== 21 | 22 | # Scenario: Level is opened again 23 | # Given a level is closed 24 | # And was previously opened 25 | # When the level is opened 26 | # Then no data for the children is loaded 27 | # And an organisation unit tree should be rendered for each child 28 | 29 | # Scenario: Level os opened again with force-reload 30 | # Given a level is closed 31 | # And was previously opened 32 | # When the level is opened 33 | # And force-reload is set to true 34 | # Then the data for the children should be loaded 35 | # And an organisation unit tree should be rendered for each child 36 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/multiple-roots.feature: -------------------------------------------------------------------------------- 1 | Feature: Multiple root organisation units 2 | 3 | # @TODO: Find a good explanation for this 4 | 5 | Scenario: An organisation unit tree renders one or more root units 6 | Given the organisation unit tree is provided with root IDs 7 | Then there are root units displayed 8 | 9 | Example: 10 | | amount | 11 | | 1 | 12 | | 5 | 13 | | 10 | 14 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/context-menu.feature: -------------------------------------------------------------------------------- 1 | Feature: Org unit node context menu 2 | 3 | Scenario: The user hovers a not disabled org unit 4 | Given the user hovers an org unit 5 | When the org unit is not disabled 6 | When the user clicks on the context menu icon 7 | Then a context menu should open 8 | And the context menu is anchored to the the context menu icon 9 | And the context menu icon displays in an active state 10 | 11 | Scenario: The context menu icon is hidden by default 12 | Given the user does not hover an org unit 13 | Then the context menu icon is hidden 14 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/partial-selectability.feature: -------------------------------------------------------------------------------- 1 | Feature: Org units can be disabled 2 | 3 | Sometimes the entire tree must be displayed but only certain units are available for selection 4 | 5 | Scenario: Some org units are disabled 6 | Given some org units are disabled 7 | Then the user can't select these org units 8 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/recursive-selection.feature: -------------------------------------------------------------------------------- 1 | Feature: Recursive selection of org units 2 | 3 | Background: 4 | Given an org unit tree has recursive selection enabled 5 | 6 | Scenario: 7 | Given an org unit tree has root and descendant nodes 8 | When the user selects the root unit 9 | Then the root unit is selected 10 | And the descendants of the root unit are indeterminately selected 11 | And deselection of the descendants is disabled 12 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/results-in-hierarchy.feature: -------------------------------------------------------------------------------- 1 | Feature: Show search results in hierarchy 2 | 3 | Scenario: Show all already displayed units while search term is empty on focus 4 | Given the user focuses the search input field 5 | Given the user has not typed anything yet 6 | Then all previously visible organisation units are still displayed 7 | 8 | Scenario: Search result is loading 9 | Given the user has entered a search term 10 | When the results are being loaded 11 | Then all organisation units are hidden 12 | Then the loading spinner is displayed 13 | 14 | Scenario: Some organisation units were found 15 | Given the user has entered a search term 16 | When some organisation units were found 17 | Then the found units are shown 18 | Then the unit's path is reflected in the tree structure 19 | Then the unit's parents are displayed but disabled 20 | 21 | Scenario: No organisation units were found 22 | Given the user has entered a search term 23 | When no organisation units were found 24 | Then a text to inform the user is displayed -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/select-all.feature: -------------------------------------------------------------------------------- 1 | Feature: Select or deselect all available org units 2 | 3 | Scenario: Select all available org units 4 | Given an org unit tree with multiple selection enabled 5 | When the user clicks 'Select all' control 6 | Then all selectable org units are selected 7 | 8 | Scenario: Deselect all available org units 9 | Given an org unit tree with some selected org units 10 | When the user clicks 'Deselect all' control 11 | Then all org units are deselected 12 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/select-by-group.feature: -------------------------------------------------------------------------------- 1 | # Generic 2 | 3 | Feature: Selection of descendant groups inside an org unit 4 | 5 | Background: 6 | Given an org unit tree with root org unit 'Sierra Leone' 7 | And descendants inside 'Sierra Leone' with multiple groups 8 | 9 | Scenario: Selection of a group inside an org unit 10 | When the user selects a group type from the 'Select by group' option 11 | Then all org units of that group are selected as a single selection 12 | And 'Sierra Leone' org unit visually indicates the selection made 13 | 14 | Scenario: Hide non-available groups 15 | Given the user is making a group selection 16 | Then only groups that are present in descendants should be available to 'Select by group' 17 | And only groups that the user is authorized to select should be available to 'Select by group' 18 | 19 | Scenario: Deselection of a group inside an org unit 20 | Given a group selection has been applied to 'Sierra Leone' 21 | When the user removes the group selection 22 | Then the selection should be removed 23 | And the visual indication should be removed 24 | 25 | Scenario: Define selection logic 26 | Given multiple group selections have been applied to 'Sierra Leone' 27 | Then the user can toggle between an 'AND' or 'OR' selection logic 28 | 29 | #UX/Design focused scenario, mostly to remind Joe not to forget it 30 | Scenario: Toggle the group selection between types AND and OR 31 | Given the user has made a group selection 32 | Then a UI control is available to change between selection modes: AND, OR -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/select-by-level.feature: -------------------------------------------------------------------------------- 1 | Feature: Selection of descendant levels inside an org unit 2 | 3 | Background: 4 | Given an org unit tree with root org unit 'Sierra Leone' 5 | And descendants inside 'Sierra Leone' with multiple levels 6 | 7 | Scenario: Selection of a level inside an org unit 8 | When the user selects a level type from the 'Select by level' option 9 | Then all org units of that level are selected as a single selection 10 | And 'Sierra Leone' org unit visually indicates the selection made 11 | 12 | Scenario: Hide non-available levels 13 | Given the user is making a level selection 14 | Then only levels that are present in descendants should be available to 'Select by level' 15 | And only levels that the user is authorized to select should be available to 'Select by level' 16 | 17 | Scenario: Deselection of a level inside an org unit 18 | Given a level selection has been applied to 'Sierra Leone' 19 | When the user removes the level selection 20 | Then the selection should be removed 21 | And the visual indication should be removed 22 | 23 | Scenario: Define selection logic 24 | Given multiple level selections have been applied to 'Sierra Leone' 25 | Then the user can toggle between an 'AND' or 'OR' selection logic 26 | 27 | #UX/Design focused scenario, mostly to remind Joe not to forget it 28 | Scenario: Toggle the level selection between types AND and OR 29 | Given the user has made a level selection 30 | Then a UI control is available to change between selection modes: AND, OR 31 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/select-descendants.feature: -------------------------------------------------------------------------------- 1 | Feature: Explicitly select individual descendant org units inside another org unit 2 | 3 | Background: 4 | Given an org unit tree with root org unit 'Sierra Leone' 5 | And descendants inside 'Sierra Leone' with multiple groups and levels 6 | 7 | Scenario: Selecting all org units of a certain group or level inside another org unit 8 | When the user selects a group or level inside the root org unit 9 | Then all org units of the chosen group or level inside 'Sierra Leone' are selected individually 10 | And a visual indication of the number of selections made is temporarily displayed 11 | 12 | Scenario: Hide non-available groups and levels 13 | Given the user is making a selection 14 | Then only groups and levels that are present in the org unit tree should be available to select 15 | And only groups and levels that the user is authorized to select should be available to select 16 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/select-relative-units.feature: -------------------------------------------------------------------------------- 1 | Feature: Select units relative to the user's org unit, 'relative units' 2 | 3 | Background: 4 | Given the org unit tree has relative selection enabled 5 | 6 | Scenario: Relative selection(s) is made 7 | Given the user has opened the relative selection menu 8 | When the user selects one or more relative units 9 | Then a visual indication of the selection type is presented 10 | And the org unit tree is disabled 11 | 12 | Scenario: Non-relative selections previous to relative selection are restored when relative selection is cleared 13 | Given the user has made several non-relative selections in the org unit tree 14 | And the user has made a relative selection 15 | When the user removes/clears the relative selection 16 | Then the org unit tree is enabled 17 | And the relative selection is cleared 18 | And all previous non-relative selections are restored 19 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/new-features/selection-list.feature: -------------------------------------------------------------------------------- 1 | Feature: List of all selections in tree, 2 | 3 | Scenario: Display selected org units in 4 | Given that the org unit tree has selectable single units 5 | When a user selects an org unit 6 | Then the selected org unit is displayed by name in 7 | 8 | Scenario: Display selected groups/levels in 9 | Given that the org unit tree has selectable groups/levels enabled 10 | When a user selects an 's or 11 | Then the selected group is displayed in list, formatted ' in ' 12 | 13 | Scenario: Clear selection from 14 | Given that a selection is made in an org unit tree 15 | When a user clicks the 'Clear selection' control in 16 | Then all org units in the tree are deselected 17 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/org-unit-tree.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ---------------------------------------------------------- | 3 | | **Component** | Organization unit tree | 4 | | **Type** | Organism ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | _pending_ | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/forms-organisation-unit-tree--collapsed) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Organization unit tree 12 | 13 | Displays a hierarchical, interactive tree of organization units that allows selection and manipulation. 14 | 15 | ![Example image of an organization unit tree component](../../images/ou-tree/org-unit-tree.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Options](#options) 21 | 22 | --- 23 | 24 | ## Usage 25 | 26 | Use an organization unit tree wherever a user needs to select an organization unit (referred to from here as _unit_). Units are displayed in a expandable and collapsible tree that reflects their hierarchy levels. 27 | 28 | --- 29 | 30 | ## Options 31 | 32 | ### Selection mode 33 | 34 | ![comparison of single and multiple selection modes](../../images/ou-tree/selection-type.png) 35 | 36 | An organization unit tree can offer either single or multiple selection of units. Use the single selection option if the user only needs to select a single unit, for example when choosing where to report data. Use the multiple selection option if the user wants to act upon multiple units, for example when choosing which units have access to a program. -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/search.feature: -------------------------------------------------------------------------------- 1 | Feature: Search the organisation unit matching the search term 2 | 3 | Scenario: Search with results 4 | Given the user searches the organisation unit tree 5 | When the result is not empty 6 | Then all found units will be shown 7 | And the found units will highlight the searched term inside the result name 8 | 9 | Scenario: Search without results 10 | Given the user searches the organisation unit tree 11 | When the result is empty 12 | Then no units will be shown 13 | And the user is notified that no units were found 14 | 15 | Scenario: Search result contains units in sub tree 16 | Given the user searches the organisation unit tree 17 | When the result contains a unit in the sub tree 18 | Then then all units in the path will be shown 19 | 20 | Scenario: Tree contains units not in the result or a result's path 21 | Given the user searches the organisation unit tree 22 | When the organisation unit tree contains node not in the result 23 | And the nodes are not in the path of a result 24 | Then the node is not shown 25 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/selectable-org-units.feature: -------------------------------------------------------------------------------- 1 | Feature: Select-able organisation units 2 | 3 | When enabled, users can select organisation units. 4 | Depending on the configuration, they can either select 5 | one organisation unit only or as many as they want 6 | 7 | Scenario: All organisation are selectable 8 | Given selecting all units is enabled 9 | When an organisation unit tree is rendered 10 | Then the label will contain a checkbox 11 | 12 | Scenario: Selecting an organisation unit when all select-able 13 | Given selecting all units is enabled 14 | When the user selects an organisation unit 15 | Then the oranisation unit's checkbox is checked 16 | 17 | Scenario: Selecting a descendant organisation unit 18 | Given selecting all units is enabled 19 | And an organisation unit has descendants 20 | When selecting a descendant 21 | Then the organisation unit is marked as indeterminate 22 | 23 | Scenario: Deselecting an organisation unit 24 | Given selecting all units is enabled 25 | And an organisation unit is selected 26 | When deselecting the organisation unit 27 | Then the checkbox is unchecked 28 | 29 | Scenario: Deselecting a descendant 30 | Given selecting all units is enabled 31 | And an organisation unit has descendants 32 | And a descendant is selected 33 | When deselecting the descendant 34 | Then the checkbox is unchecked 35 | And the organisation unit is not marked as indeterminate 36 | 37 | Scenario: Selecting an organisation unit when only one is select-able 38 | Given only one organisation unit can be selected 39 | When selecting an organisation unit 40 | Then it is displayed as selected 41 | 42 | Scenario: Deselecting an organisation unit when only one is select-able 43 | Given only one organisation unit can be selected 44 | And an organisation unit is selected 45 | When deselecting an organisation unit 46 | Then it is not selected 47 | 48 | Scenario: Selecting an organisation unit when only one is select-able while another is selected 49 | Given only one organisation unit can be selected 50 | And an organisation unit is selected 51 | When selecting a different organisation unit 52 | Then the previously selected organisation unit is not selected 53 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/src/folder-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/folder/closed 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/src/folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/folder/open 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /organisms/organisation-unit-tree/src/single.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/single 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /organisms/rich-text.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------ | 3 | | **Component** | Rich Text Editing | 4 | | **Type** | Organism ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | [Live Spec](https://sleepy-yalow-3c0c76.netlify.com/) | 6 | | **Working Examples** | _pending_ | 7 | | **Status** | `Waiting for build` | 8 | 9 | --- 10 | 11 | # Rich Text Editing 12 | 13 | Allows a user to input content with rich text features: text formatting, links, user mentions and more. Rich text editing is made possible with two components: a rich text toolbar and a rich text enabled text input. 14 | 15 | ![](../images/rich-text.png) 16 | 17 | ##### Contents 18 | 19 | - [Usage](#usage) 20 | - [Composition](#composition) 21 | - [Options](#options) 22 | - [States](#states) 23 | 24 | 25 | --- 26 | 27 | ## Usage 28 | 29 | Rich text should be enabled wherever text formatting or extended text functionality would benefit the content. For example, a comment on a patient may benefit from text formatting, allowing the user to highlight the most important part of their text with bold styling. A dashboard item might also allow rich text input, where a user could add links and header text to more effectively communicate to dashboard visitors. 30 | 31 | Rich text should not be used if there is no clear need for the functionality. Rich text should address a specific need: mentioning other users, formatting content into sections or enhancing user communication, for example. Do not use rich text where there is no meaningful benefit to the user or use case. 32 | 33 | --- 34 | 35 | ## Composition 36 | 37 | ![](../images/rt-composition.png) 38 | 39 | A rich text editor contains multiple elements: 40 | 41 | 1. **Toolbar, required:** Buttons to toggle text formatting, insert links and more. 42 | 2. **Input, required:** A rich text enabled input looks the same as a regular text input, but has the extra functionality of keyboard shortcuts. 43 | 44 | --- 45 | 46 | ## Options 47 | 48 | ### Default formatting tools 49 | 50 | ![](../images/rt-tools.png) 51 | 52 | The default tools available in the toolbar are: bold, italic, headers, lists and links. Individual tools can be disabled by composing a custom toolbar. Unless there is a specific reason not to, use the default toolset. 53 | 54 | ### User mentions 55 | 56 | ![](../images/rt-mentions.png) 57 | 58 | The user mentions tool should only be included if it would be useful to mention other DHIS2 users in the text. The mentions tool will open a popup for searching for a user. The user mentions tool is not part of the default toolset. 59 | 60 | --- 61 | 62 | ## States 63 | 64 | ### Preview mode 65 | 66 | ![](../images/rt-preview.png) 67 | 68 | Preview mode displays a formatted version of the content inside the rich text input. Preview mode can help users who are new to markdown-style writing. Preview mode is toggled via the 'Preview' button in the toolbar. While in preview mode the other formatting tools are unavailable. Do not disable saving the content while in preview mode. 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /organisms/table.md: -------------------------------------------------------------------------------- 1 | | | | 2 | | -------------------- | ------------------------------------------------------------------- | 3 | | **Component** | Table | 4 | | **Type** | Organism ([?](http://atomicdesign.bradfrost.com/chapter-2/)) | 5 | | **Design Spec** | - | 6 | | **Working Examples** | [Link](https://ui.dhis2.nu/demo/?path=/story/data-display-table--static-layout) | 7 | | **Status** | `Ready to use` | 8 | 9 | --- 10 | 11 | # Table 12 | A table is used to display information in a standard, effective way. 13 | 14 | 15 | ## Usage 16 | A table is a static display component. It's used to show some information that doesn't change and can't be acted upon. Consider the table a helpful utility, rather than a full-featured component. 17 | 18 | Most use cases that need interactivity should use the [data table component](data-table.md). 19 | -------------------------------------------------------------------------------- /principles/icons.md: -------------------------------------------------------------------------------- 1 | # Icons 2 | 3 | Use icons to help communicate information to users. Icons can offer supporting information and help users to recognize common ideas, concepts and actions. Icons are visual cues. Don't use them alone, but rather as supporting elements. 4 | 5 | The DHIS2 Design System provides a library of icons for use in DHIS2 applications. Using icons consistently helps users to recognize common DHIS2 actions and concepts. 6 | 7 | #### Quick links 8 | 9 | [Request or suggest an icon](https://github.com/dhis2/design-system/issues/new?assignees=cooper-joe&labels=icons&template=icon-request.md&title=%5BIcon+request%5D). 10 | 11 | ## Using icons in DHIS2 applications 12 | 13 | ### Communicating with icons 14 | 15 | Icons should only be used to support other content, like labels. Icons shouldn't be used alone. An icon can be interpreted in different ways, so relying on an icon to communicate a single idea will lead to confused users. Icons will most often be paired with a text label. In this case, the icon is a supporting element. 16 | 17 | ![Icons and labels in use together](../images/icons/icon-and-text.png) 18 | 19 | In cases where displaying a text label explanation for an icon is impractical, make sure that the icon meaning can be clarified with text. If using a padlock to imply a locked state, make sure that hovering the locked element provides a textual explanation of it's state too. 20 | 21 | Not all actions need icons. Consider whether an icon is supporting the text label, or just contributing to visual noise. If in doubt as to whether an icon will help or hinder users, don't use it. 22 | 23 | ### Consistency 24 | 25 | Icons are most useful when users can recognize them and pair them with ideas and concepts. This requires that icons are used consistently. Using the same icon for the same concept means that users can recognize similar concepts across different DHIS2 applications. For example, using the same "Organization Unit" icon across all DHIS2 applications means that wherever users see that icon, they will recall the concept of DHIS2 organization units. 26 | 27 | ![Consistent icon usage helps understanding](../images/icons/consistency.png) 28 | 29 | Icons provided by the DHIS2 icon library sometimes have names that imply what the icon should be used for. "Fullscreen" icon, for example, should only be used when communicating a concept related to fullscreen mode. The "Edit" icon is pen but should only be used to represent an edit action, not a writing action. Some icons, like arrows or common marks, can be reused and are therefore named after their object. 30 | 31 | ### Sizes 32 | 33 | Icons are available in different sizes. Always use the icon at it's intended size, the shapes have been created specifically for each size. Icon sizes are being added gradually, so some icons may not be available in all sizes. You can [request an icon size](https://github.com/dhis2/design-system/issues/new?assignees=cooper-joe&labels=icons&template=icon-request.md&title=%5BIcon+request%5D), if needed. 34 | 35 | ### Color 36 | 37 | Icons should usually be used in the same color, or a few shades lighter, as the content they're supporting. Icons are supporting content and shouldn't distract from their purpose with contrasting colors. 38 | 39 | ![Example of correct and incorrect use of icon color](../images/icons/icon-color.png) 40 | 41 | Color can be used as an extra supporting element when an icon communicates a state. Remember that [color can't be relied upon to communicate alone](color.md#accessibility). An icon and a color can be a useful way to add extra information that's accessible to all. 42 | 43 | ![Example of color used as a supporting element for icons](../images/icons/icon-color-state.png) 44 | 45 | ### Alignment and spacing 46 | 47 | Align icons with the vertical center of the content they support. 48 | 49 | ![Vertically centering icons with their content](../images/icons/icon-alignment.png) 50 | 51 | Icons provided by the DHIS2 icon library have padding and margins included to ensure visual consistency and weighting. Extra padding can be added if necessary. 52 | 53 | ## DHIS2 icons and Material Design icons 54 | 55 | DHIS2 applications have used, and continue to use, [Material Design icons](https://material.io/resources/icons/?style=baseline). Applications can now transition to use the DHIS2 icon library. For the sake of consistency, it's recommended to always use icons from the DHIS2 icon library and mixing icon libraries. Missing icons [can be requested here](https://github.com/dhis2/design-system/issues/new?assignees=cooper-joe&labels=icons&template=icon-request.md&title=%5BIcon+request%5D). 56 | -------------------------------------------------------------------------------- /principles/typography.md: -------------------------------------------------------------------------------- 1 | # Typography 2 | 3 | Typography, the selection and use of fonts, colors and sizes, is an effective way to communicate information to users. 4 | 5 | ## DHIS2 application typeface 6 | 7 | All DHIS2 applications should use the open-source [Roboto typeface](https://fonts.google.com/specimen/Roboto). As always, consistency is important for users to understand that all DHIS2 applications are part of the same ecosystem. 8 | 9 | ### Internationalization 10 | 11 | The Roboto typeface provides a reasonable set of glyphs, but there are some languages that aren't supported. The DHIS2 core team is currently exploring other options for a typeface that provides wider language support. 12 | 13 | ## Communicating with typography 14 | 15 | An application can communicate information to a user using various techniques. Formatting typography to communicate is a useful way of keeping an interface uncluttered, while still clear and easy to understand. 16 | 17 | ### Hierarchy 18 | 19 | ![Example typographical hierarchy](../images/type/hierarchy.png) 20 | 21 | Size and formatting can communicate how important a piece of information is. The largest, boldest text on a screen will appear to be the most important. The smallest, lightest text will appear to be the least important. Make sure the text in an application uses a size and format that reflects it's importance. 22 | 23 | ## Guidelines 24 | 25 | There are no strict rules for the use of typography in DHIS2 applications. Different use cases will require different solutions. However, there are some guidelines that make applications easy to use and consistent. 26 | 27 | ### Sizes 28 | 29 | Using text sizes from the following type scale will help create consistent looking DHIS2 applications. There are situations that require a different size, but the sizes from the type scale work for the majority of situations. 30 | 31 | | class | size | 32 | | ----- | ---------- | 33 | | `t12` | `0.75rem` | 34 | | `t14` | `0.875rem` | 35 | | `t16` | `1rem` | 36 | | `t18` | `1.125rem` | 37 | | `t20` | `1.25rem` | 38 | | `t24` | `1.5rem` | 39 | | `t30` | `1.875rem` | 40 | | `t36` | `2.25rem` | 41 | | `t48` | `3rem` | 42 | | `t60` | `3.75rem` | 43 | | `t72` | `4.5rem` | 44 | 45 | ### Line height 46 | 47 | ![Comparison of different line height properties](../images/type/lineheight.png) 48 | 49 | Line height is the space between lines of text. Use a larger line height for long blocks of text to make it easier to read. `1.2` is a reasonable value to use as the default line height for blocks of text. Interface elements and controls should respect their predefined line heights. [Learn more about line height.](https://practicaltypography.com/line-spacing.html) 50 | 51 | ### Line length 52 | 53 | ![Comparison of different line length values](../images/type/linelength.png) 54 | 55 | Keep line length to a reasonable size when displaying blocks of text. A block of text with long lines is difficult to scan and read. This means that on wide screens it may be necessary to limit the width of text sections. This also applies to form elements. A reasonable line length depends on the size of the text, so there is no fixed rule to follow, but about 90 characters per line is a good starting point. [Learn more about line length here.](https://practicaltypography.com/line-length.html) 56 | 57 | ### Minimum font size 58 | 59 | ![Comparison of different font sizes](../images/type/size.png) 60 | 61 | Small font sizes can be difficult for a lot of users to read. Paragraph text should ideally never be smaller than 14px. Labels and metadata in complex, data-dense applications can use sizes as small as 11px. Be aware that some users won't be able to read this text this small, so these controls should never be application critical. Test applications with browsers set to different zoom levels to check that the application functions when using built-in browser tools for enlarging text. 62 | 63 | ### Color and contrast ratio 64 | 65 | Light text on light backgrounds is difficult to read. Make sure that all text colors used pass the WCAG2.0 accessibility standards. ([WCAG2.0 standard accessibility checker](http://accessible-colors.com/)). Some text colors can be more difficult to read than others, so make sure to check all combinations with an accessibility tool. When in doubt, use a standard color combination. 66 | 67 | The Design System color guidelines offer more examples of how to use color effectively. [Click here to read the color guidelines](color.md). 68 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # (⛔ Deprecated) DHIS2 Design System 2 | 3 | This home for DHIS2 Design System documentation is deprecated and no longer maintained. 4 | 5 | All principles, patterns, and component guidelines can be found in the [DHIS2 UI documentation](https://ui.dhis2.nu/). 6 | -------------------------------------------------------------------------------- /resources/button/dropdown-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-dense-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-dense-indeterminate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-dense-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-regular-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-regular-indeterminate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/checkbox/checkbox-regular-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-dataElement.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-dataset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-eventDataItem.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-generic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-indicator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-period.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-programIndicator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/icons/data-type/icon-validationRule.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/menu/menu-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /resources/radio/radio-dense-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/radio/radio-dense-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /resources/radio/radio-regular-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /resources/radio/radio-regular-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /resources/select/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /resources/transfer/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/transfer/arrow-left-multi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /resources/transfer/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/transfer/arrow-right-multi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /resources/transfer/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /resources/transfer/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | --------------------------------------------------------------------------------