diff --git a/collections/forms/API.md b/collections/forms/API.md
index ca1fef2406..fe9090915c 100644
--- a/collections/forms/API.md
+++ b/collections/forms/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CheckboxFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { CheckboxFieldFF } from '@dhis2/ui-forms'
+import { CheckboxFieldFF } from '@dhis2/ui'
```
@@ -27,11 +27,11 @@ import { CheckboxFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FieldGroupFF`, you can import the component from the `@dhis2/ui` library
```js
-import { FieldGroupFF } from '@dhis2/ui-forms'
+import { FieldGroupFF } from '@dhis2/ui'
```
@@ -48,11 +48,11 @@ import { FieldGroupFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInputFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { FileInputFieldFF } from '@dhis2/ui-forms'
+import { FileInputFieldFF } from '@dhis2/ui'
```
@@ -75,11 +75,11 @@ import { FileInputFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `InputFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { InputFieldFF } from '@dhis2/ui-forms'
+import { InputFieldFF } from '@dhis2/ui'
```
@@ -102,11 +102,11 @@ import { InputFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelectFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { MultiSelectFieldFF } from '@dhis2/ui-forms'
+import { MultiSelectFieldFF } from '@dhis2/ui'
```
@@ -130,11 +130,11 @@ import { MultiSelectFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `RadioFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { RadioFieldFF } from '@dhis2/ui-forms'
+import { RadioFieldFF } from '@dhis2/ui'
```
@@ -155,11 +155,11 @@ import { RadioFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelectFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { SingleSelectFieldFF } from '@dhis2/ui-forms'
+import { SingleSelectFieldFF } from '@dhis2/ui'
```
@@ -183,11 +183,11 @@ import { SingleSelectFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SwitchFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { SwitchFieldFF } from '@dhis2/ui-forms'
+import { SwitchFieldFF } from '@dhis2/ui'
```
@@ -208,11 +208,11 @@ import { SwitchFieldFF } from '@dhis2/ui-forms'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TextAreaFieldFF`, you can import the component from the `@dhis2/ui` library
```js
-import { TextAreaFieldFF } from '@dhis2/ui-forms'
+import { TextAreaFieldFF } from '@dhis2/ui'
```
diff --git a/collections/ui/API.md b/collections/ui/API.md
index 696a60c073..de3a9ddbff 100644
--- a/collections/ui/API.md
+++ b/collections/ui/API.md
@@ -2,7 +2,7 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `AlertBar`, you can import the component from the `@dhis2/ui` library
```js
@@ -14,15 +14,15 @@ import { AlertBar } from '@dhis2/ui'
|Name|Type|Default|Required|Description|
|---|---|---|---|---|
-|actions|custom|||An array of 0-2 action objects|
+|actions|custom|||An array of 0-2 action objects `[{label: "Save", onClick: clickHandler}]`|
|children|string|||The message string for the alert|
|className|string||||
|critical|custom|||Alert bars with `critical` will not autohide|
|dataTest|string|`'dhis2-uicore-alertbar'`|||
-|duration|number|`8000`|||
-|hidden|boolean||||
+|duration|number|`8000`||How long you want the notification to display, in `ms`, when it's not permanent|
+|hidden|boolean|||AlertBar will be hidden on creation when this is set|
|icon|custom|`true`||A specific icon to override the default icon in the bar. If `false` is provided, no icon will be shown.|
-|permanent|boolean||||
+|permanent|boolean|||When set, AlertBar will not auto-hide|
|success|custom||||
|warning|custom|||Alert bars with `warning` will not autohide|
|onHidden|function||||
@@ -31,7 +31,7 @@ import { AlertBar } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `AlertStack`, you can import the component from the `@dhis2/ui` library
```js
@@ -51,7 +51,7 @@ import { AlertStack } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Box`, you can import the component from the `@dhis2/ui` library
```js
@@ -79,7 +79,7 @@ import { Box } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Button`, you can import the component from the `@dhis2/ui` library
```js
@@ -117,7 +117,7 @@ import { Button } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ButtonStrip`, you can import the component from the `@dhis2/ui` library
```js
@@ -139,7 +139,7 @@ import { ButtonStrip } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DropdownButton`, you can import the component from the `@dhis2/ui` library
```js
@@ -174,7 +174,7 @@ import { DropdownButton } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SplitButton`, you can import the component from the `@dhis2/ui` library
```js
@@ -208,7 +208,7 @@ import { SplitButton } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Calendar`, you can import the component from the `@dhis2/ui` library
```js
@@ -231,11 +231,29 @@ import { Calendar } from '@dhis2/ui'
|weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)|
|width|string|`'240px'`||the width of the calendar component|
+### CalendarInput
+
+#### Usage
+
+To use `CalendarInput`, you can import the component from the `@dhis2/ui` library
+
+
+```js
+import { CalendarInput } from '@dhis2/ui'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|dataTest|undefined|`'dhis2-uiwidgets-calendar-inputfield'`|||
+
### Card
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Card`, you can import the component from the `@dhis2/ui` library
```js
@@ -255,7 +273,7 @@ import { Card } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Center`, you can import the component from the `@dhis2/ui` library
```js
@@ -276,7 +294,7 @@ import { Center } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Checkbox`, you can import the component from the `@dhis2/ui` library
```js
@@ -311,7 +329,7 @@ import { Checkbox } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CheckboxField`, you can import the component from the `@dhis2/ui` library
```js
@@ -348,7 +366,7 @@ import { CheckboxField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Chip`, you can import the component from the `@dhis2/ui` library
```js
@@ -380,7 +398,7 @@ import { Chip } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Cover`, you can import the component from the `@dhis2/ui` library
```js
@@ -402,7 +420,7 @@ import { Cover } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CssReset`, you can import the component from the `@dhis2/ui` library
```js
@@ -415,7 +433,7 @@ import { CssReset } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CssVariables`, you can import the component from the `@dhis2/ui` library
```js
@@ -437,7 +455,7 @@ import { CssVariables } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Divider`, you can import the component from the `@dhis2/ui` library
```js
@@ -458,7 +476,7 @@ import { Divider } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Field`, you can import the component from the `@dhis2/ui` library
```js
@@ -487,7 +505,7 @@ import { Field } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FieldGroup`, you can import the component from the `@dhis2/ui` library
```js
@@ -516,7 +534,7 @@ import { FieldGroup } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FieldSet`, you can import the component from the `@dhis2/ui` library
```js
@@ -536,7 +554,7 @@ import { FieldSet } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInput`, you can import the component from the `@dhis2/ui` library
```js
@@ -571,7 +589,7 @@ import { FileInput } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInputField`, you can import the component from the `@dhis2/ui` library
```js
@@ -612,7 +630,7 @@ import { FileInputField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileListItem`, you can import the component from the `@dhis2/ui` library
```js
@@ -637,7 +655,7 @@ import { FileListItem } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileListPlaceholder`, you can import the component from the `@dhis2/ui` library
```js
@@ -656,7 +674,7 @@ import { FileListPlaceholder } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileList`, you can import the component from the `@dhis2/ui` library
```js
@@ -676,7 +694,7 @@ import { FileList } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `HeaderBar`, you can import the component from the `@dhis2/ui` library
```js
@@ -697,7 +715,7 @@ import { HeaderBar } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Logo`, you can import the component from the `@dhis2/ui` library
```js
@@ -710,7 +728,7 @@ import { Logo } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Help`, you can import the component from the `@dhis2/ui` library
```js
@@ -733,7 +751,7 @@ import { Help } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Input`, you can import the component from the `@dhis2/ui` library
```js
@@ -774,7 +792,7 @@ import { Input } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `InputField`, you can import the component from the `@dhis2/ui` library
```js
@@ -819,7 +837,7 @@ import { InputField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IntersectionDetector`, you can import the component from the `@dhis2/ui` library
```js
@@ -842,7 +860,7 @@ import { IntersectionDetector } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Label`, you can import the component from the `@dhis2/ui` library
```js
@@ -865,7 +883,7 @@ import { Label } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Layer`, you can import the component from the `@dhis2/ui` library
```js
@@ -891,7 +909,7 @@ import { Layer } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Legend`, you can import the component from the `@dhis2/ui` library
```js
@@ -912,7 +930,7 @@ import { Legend } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CircularLoader`, you can import the component from the `@dhis2/ui` library
```js
@@ -935,7 +953,7 @@ import { CircularLoader } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LinearLoader`, you can import the component from the `@dhis2/ui` library
```js
@@ -958,7 +976,7 @@ import { LinearLoader } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoIcon`, you can import the component from the `@dhis2/ui` library
```js
@@ -977,7 +995,7 @@ import { LogoIcon } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoIconWhite`, you can import the component from the `@dhis2/ui` library
```js
@@ -996,7 +1014,7 @@ import { LogoIconWhite } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Logo`, you can import the component from the `@dhis2/ui` library
```js
@@ -1015,7 +1033,7 @@ import { Logo } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoWhite`, you can import the component from the `@dhis2/ui` library
```js
@@ -1034,7 +1052,7 @@ import { LogoWhite } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FlyoutMenu`, you can import the component from the `@dhis2/ui` library
```js
@@ -1057,7 +1075,7 @@ import { FlyoutMenu } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Menu`, you can import the component from the `@dhis2/ui` library
```js
@@ -1078,7 +1096,7 @@ import { Menu } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuDivider`, you can import the component from the `@dhis2/ui` library
```js
@@ -1098,7 +1116,7 @@ import { MenuDivider } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuItem`, you can import the component from the `@dhis2/ui` library
```js
@@ -1132,7 +1150,7 @@ import { MenuItem } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuSectionHeader`, you can import the component from the `@dhis2/ui` library
```js
@@ -1154,7 +1172,7 @@ import { MenuSectionHeader } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Modal`, you can import the component from the `@dhis2/ui` library
```js
@@ -1180,7 +1198,7 @@ import { Modal } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalActions`, you can import the component from the `@dhis2/ui` library
```js
@@ -1199,7 +1217,7 @@ import { ModalActions } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalContent`, you can import the component from the `@dhis2/ui` library
```js
@@ -1219,7 +1237,7 @@ import { ModalContent } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalTitle`, you can import the component from the `@dhis2/ui` library
```js
@@ -1238,7 +1256,7 @@ import { ModalTitle } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Node`, you can import the component from the `@dhis2/ui` library
```js
@@ -1263,7 +1281,7 @@ import { Node } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `NoticeBox`, you can import the component from the `@dhis2/ui` library
```js
@@ -1287,7 +1305,7 @@ import { NoticeBox } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTreeRootError`, you can import the component from the `@dhis2/ui` library
```js
@@ -1306,7 +1324,7 @@ import { OrganisationUnitTreeRootError } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTreeRootLoading`, you can import the component from the `@dhis2/ui` library
```js
@@ -1324,7 +1342,7 @@ import { OrganisationUnitTreeRootLoading } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTree`, you can import the component from the `@dhis2/ui` library
```js
@@ -1361,7 +1379,7 @@ import { OrganisationUnitTree } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Label`, you can import the component from the `@dhis2/ui` library
```js
@@ -1394,7 +1412,7 @@ import { Label } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Pagination`, you can import the component from the `@dhis2/ui` library
```js
@@ -1431,7 +1449,7 @@ import { Pagination } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Popover`, you can import the component from the `@dhis2/ui` library
```js
@@ -1459,7 +1477,7 @@ import { Popover } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Popper`, you can import the component from the `@dhis2/ui` library
```js
@@ -1486,7 +1504,7 @@ import { Popper } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Radio`, you can import the component from the `@dhis2/ui` library
```js
@@ -1520,7 +1538,7 @@ import { Radio } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Required`, you can import the component from the `@dhis2/ui` library
```js
@@ -1538,7 +1556,7 @@ import { Required } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SegmentedControl`, you can import the component from the `@dhis2/ui` library
```js
@@ -1558,7 +1576,7 @@ import { SegmentedControl } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Input`, you can import the component from the `@dhis2/ui` library
```js
@@ -1586,7 +1604,7 @@ import { Input } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Menu`, you can import the component from the `@dhis2/ui` library
```js
@@ -1608,7 +1626,7 @@ import { Menu } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelect`, you can import the component from the `@dhis2/ui` library
```js
@@ -1652,7 +1670,7 @@ import { MultiSelect } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelectField`, you can import the component from the `@dhis2/ui` library
```js
@@ -1701,7 +1719,7 @@ import { MultiSelectField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelectOption`, you can import the component from the `@dhis2/ui` library
```js
@@ -1725,7 +1743,7 @@ import { MultiSelectOption } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Input`, you can import the component from the `@dhis2/ui` library
```js
@@ -1753,7 +1771,7 @@ import { Input } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Menu`, you can import the component from the `@dhis2/ui` library
```js
@@ -1777,7 +1795,7 @@ import { Menu } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelect`, you can import the component from the `@dhis2/ui` library
```js
@@ -1821,7 +1839,7 @@ import { SingleSelect } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelectField`, you can import the component from the `@dhis2/ui` library
```js
@@ -1870,7 +1888,7 @@ import { SingleSelectField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelectOption`, you can import the component from the `@dhis2/ui` library
```js
@@ -1894,7 +1912,7 @@ import { SingleSelectOption } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SelectorBar`, you can import the component from the `@dhis2/ui` library
```js
@@ -1917,7 +1935,7 @@ import { SelectorBar } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SelectorBarItem`, you can import the component from the `@dhis2/ui` library
```js
@@ -1945,7 +1963,7 @@ import { SelectorBarItem } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SharingDialog`, you can import the component from the `@dhis2/ui` library
```js
@@ -2006,7 +2024,7 @@ import { SharingDialog } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Modal`, you can import the component from the `@dhis2/ui` library
```js
@@ -2026,7 +2044,7 @@ import { Modal } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Switch`, you can import the component from the `@dhis2/ui` library
```js
@@ -2062,7 +2080,7 @@ import { Switch } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SwitchField`, you can import the component from the `@dhis2/ui` library
```js
@@ -2099,7 +2117,7 @@ import { SwitchField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tab`, you can import the component from the `@dhis2/ui` library
```js
@@ -2123,7 +2141,7 @@ import { Tab } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TabBar`, you can import the component from the `@dhis2/ui` library
```js
@@ -2145,7 +2163,7 @@ import { TabBar } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableCell`, you can import the component from the `@dhis2/ui` library
```js
@@ -2183,7 +2201,7 @@ import { DataTableCell } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTable`, you can import the component from the `@dhis2/ui` library
```js
@@ -2208,7 +2226,7 @@ import { DataTable } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableBody`, you can import the component from the `@dhis2/ui` library
```js
@@ -2228,7 +2246,7 @@ import { StackedTableBody } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableCellHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2250,7 +2268,7 @@ import { StackedTableCellHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableCell`, you can import the component from the `@dhis2/ui` library
```js
@@ -2276,7 +2294,7 @@ import { StackedTableCell } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableFoot`, you can import the component from the `@dhis2/ui` library
```js
@@ -2296,7 +2314,7 @@ import { StackedTableFoot } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2316,7 +2334,7 @@ import { StackedTableHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableRowHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2336,7 +2354,7 @@ import { StackedTableRowHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableRow`, you can import the component from the `@dhis2/ui` library
```js
@@ -2356,7 +2374,7 @@ import { StackedTableRow } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTable`, you can import the component from the `@dhis2/ui` library
```js
@@ -2377,7 +2395,7 @@ import { StackedTable } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
@@ -2397,7 +2415,7 @@ import { Table } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableBody`, you can import the component from the `@dhis2/ui` library
```js
@@ -2418,7 +2436,7 @@ import { TableBody } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableCellHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2442,7 +2460,7 @@ import { TableCellHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableCell`, you can import the component from the `@dhis2/ui` library
```js
@@ -2466,7 +2484,7 @@ import { TableCell } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableFoot`, you can import the component from the `@dhis2/ui` library
```js
@@ -2487,7 +2505,7 @@ import { TableFoot } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2508,7 +2526,7 @@ import { TableHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRowHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2530,7 +2548,7 @@ import { TableRowHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRow`, you can import the component from the `@dhis2/ui` library
```js
@@ -2552,7 +2570,7 @@ import { TableRow } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
@@ -2574,7 +2592,7 @@ import { Table } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableColumnHeader`, you can import the component from the `@dhis2/ui` library
```js
@@ -2611,7 +2629,7 @@ import { DataTableColumnHeader } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableRow`, you can import the component from the `@dhis2/ui` library
```js
@@ -2637,7 +2655,7 @@ import { DataTableRow } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableBody`, you can import the component from the `@dhis2/ui` library
```js
@@ -2659,7 +2677,7 @@ import { TableBody } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableFoot`, you can import the component from the `@dhis2/ui` library
```js
@@ -2680,7 +2698,7 @@ import { TableFoot } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableHead`, you can import the component from the `@dhis2/ui` library
```js
@@ -2701,7 +2719,7 @@ import { TableHead } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRow`, you can import the component from the `@dhis2/ui` library
```js
@@ -2724,7 +2742,7 @@ import { TableRow } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
@@ -2748,7 +2766,7 @@ import { Table } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tag`, you can import the component from the `@dhis2/ui` library
```js
@@ -2774,7 +2792,7 @@ import { Tag } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TextArea`, you can import the component from the `@dhis2/ui` library
```js
@@ -2813,7 +2831,7 @@ import { TextArea } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TextAreaField`, you can import the component from the `@dhis2/ui` library
```js
@@ -2856,7 +2874,7 @@ import { TextAreaField } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tooltip`, you can import the component from the `@dhis2/ui` library
```js
@@ -2881,7 +2899,7 @@ import { Tooltip } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TransferOption`, you can import the component from the `@dhis2/ui` library
```js
@@ -2906,7 +2924,7 @@ import { TransferOption } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Transfer`, you can import the component from the `@dhis2/ui` library
```js
@@ -2965,7 +2983,7 @@ import { Transfer } from '@dhis2/ui'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `UserAvatar`, you can import the component from the `@dhis2/ui` library
```js
diff --git a/components/alert/API.md b/components/alert/API.md
index f51034cf69..6aa9db37b9 100644
--- a/components/alert/API.md
+++ b/components/alert/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `AlertBar`, you can import the component from the `@dhis2/ui` library
```js
-import { AlertBar } from '@dhis2-ui/alert'
+import { AlertBar } from '@dhis2/ui'
```
@@ -14,15 +14,15 @@ import { AlertBar } from '@dhis2-ui/alert'
|Name|Type|Default|Required|Description|
|---|---|---|---|---|
-|actions|custom|||An array of 0-2 action objects|
+|actions|custom|||An array of 0-2 action objects `[{label: "Save", onClick: clickHandler}]`|
|children|string|||The message string for the alert|
|className|string||||
|critical|custom|||Alert bars with `critical` will not autohide|
|dataTest|string|`'dhis2-uicore-alertbar'`|||
-|duration|number|`8000`|||
-|hidden|boolean||||
+|duration|number|`8000`||How long you want the notification to display, in `ms`, when it's not permanent|
+|hidden|boolean|||AlertBar will be hidden on creation when this is set|
|icon|custom|`true`||A specific icon to override the default icon in the bar. If `false` is provided, no icon will be shown.|
-|permanent|boolean||||
+|permanent|boolean|||When set, AlertBar will not auto-hide|
|success|custom||||
|warning|custom|||Alert bars with `warning` will not autohide|
|onHidden|function||||
@@ -31,11 +31,11 @@ import { AlertBar } from '@dhis2-ui/alert'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `AlertStack`, you can import the component from the `@dhis2/ui` library
```js
-import { AlertStack } from '@dhis2-ui/alert'
+import { AlertStack } from '@dhis2/ui'
```
diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js
index f17e74fbba..8e84bd2c23 100644
--- a/components/alert/src/alert-bar/alert-bar.js
+++ b/components/alert/src/alert-bar/alert-bar.js
@@ -149,7 +149,8 @@ AlertBar.defaultProps = {
}
AlertBar.propTypes = {
- /** An array of 0-2 action objects */
+ /** An array of 0-2 action objects
+`[{label: "Save", onClick: clickHandler}]`*/
actions: actionsPropType,
/** The message string for the alert */
children: PropTypes.string,
@@ -157,13 +158,16 @@ AlertBar.propTypes = {
/** Alert bars with `critical` will not autohide */
critical: alertTypePropType,
dataTest: PropTypes.string,
+ /** How long you want the notification to display, in `ms`, when it's not permanent */
duration: PropTypes.number,
+ /** AlertBar will be hidden on creation when this is set to true */
hidden: PropTypes.bool,
/**
* A specific icon to override the default icon in the bar.
* If `false` is provided, no icon will be shown.
*/
icon: iconPropType,
+ /** When set, AlertBar will not autohide */
permanent: PropTypes.bool,
success: alertTypePropType,
/** Alert bars with `warning` will not autohide */
diff --git a/components/box/API.md b/components/box/API.md
index c99b54c5e9..bb766c02a0 100644
--- a/components/box/API.md
+++ b/components/box/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Box`, you can import the component from the `@dhis2/ui` library
```js
-import { Box } from '@dhis2-ui/box'
+import { Box } from '@dhis2/ui'
```
diff --git a/components/button/API.md b/components/button/API.md
index 128964c70c..d31cd72fe7 100644
--- a/components/button/API.md
+++ b/components/button/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Button`, you can import the component from the `@dhis2/ui` library
```js
-import { Button } from '@dhis2-ui/button'
+import { Button } from '@dhis2/ui'
```
@@ -40,11 +40,11 @@ import { Button } from '@dhis2-ui/button'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ButtonStrip`, you can import the component from the `@dhis2/ui` library
```js
-import { ButtonStrip } from '@dhis2-ui/button'
+import { ButtonStrip } from '@dhis2/ui'
```
@@ -62,11 +62,11 @@ import { ButtonStrip } from '@dhis2-ui/button'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DropdownButton`, you can import the component from the `@dhis2/ui` library
```js
-import { DropdownButton } from '@dhis2-ui/button'
+import { DropdownButton } from '@dhis2/ui'
```
@@ -97,11 +97,11 @@ import { DropdownButton } from '@dhis2-ui/button'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SplitButton`, you can import the component from the `@dhis2/ui` library
```js
-import { SplitButton } from '@dhis2-ui/button'
+import { SplitButton } from '@dhis2/ui'
```
diff --git a/components/calendar/API.md b/components/calendar/API.md
index 7e559457c7..26f8eaac53 100644
--- a/components/calendar/API.md
+++ b/components/calendar/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Calendar`, you can import the component from the `@dhis2/ui` library
```js
-import { Calendar } from '@dhis2-ui/calendar'
+import { Calendar } from '@dhis2/ui'
```
@@ -24,3 +24,21 @@ import { Calendar } from '@dhis2-ui/calendar'
|timeZone|string|||the timeZone to use|
|weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)|
|width|string|`'240px'`||the width of the calendar component|
+
+### CalendarInput
+
+#### Usage
+
+To use `CalendarInput`, you can import the component from the `@dhis2/ui` library
+
+
+```js
+import { CalendarInput } from '@dhis2/ui'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|dataTest|undefined|`'dhis2-uiwidgets-calendar-inputfield'`|||
diff --git a/components/card/API.md b/components/card/API.md
index 9bb388a1b5..cf166149bc 100644
--- a/components/card/API.md
+++ b/components/card/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Card`, you can import the component from the `@dhis2/ui` library
```js
-import { Card } from '@dhis2-ui/card'
+import { Card } from '@dhis2/ui'
```
diff --git a/components/center/API.md b/components/center/API.md
index 8a135eb5fb..9c7e2c25b3 100644
--- a/components/center/API.md
+++ b/components/center/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Center`, you can import the component from the `@dhis2/ui` library
```js
-import { Center } from '@dhis2-ui/center'
+import { Center } from '@dhis2/ui'
```
diff --git a/components/checkbox/API.md b/components/checkbox/API.md
index 340d5298b1..ea509bc46f 100644
--- a/components/checkbox/API.md
+++ b/components/checkbox/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Checkbox`, you can import the component from the `@dhis2/ui` library
```js
-import { Checkbox } from '@dhis2-ui/checkbox'
+import { Checkbox } from '@dhis2/ui'
```
@@ -37,11 +37,11 @@ import { Checkbox } from '@dhis2-ui/checkbox'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CheckboxField`, you can import the component from the `@dhis2/ui` library
```js
-import { CheckboxField } from '@dhis2-ui/checkbox'
+import { CheckboxField } from '@dhis2/ui'
```
diff --git a/components/chip/API.md b/components/chip/API.md
index 5a44398971..4c41e52b74 100644
--- a/components/chip/API.md
+++ b/components/chip/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Chip`, you can import the component from the `@dhis2/ui` library
```js
-import { Chip } from '@dhis2-ui/chip'
+import { Chip } from '@dhis2/ui'
```
diff --git a/components/cover/API.md b/components/cover/API.md
index cd0aa042b5..a418093d22 100644
--- a/components/cover/API.md
+++ b/components/cover/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Cover`, you can import the component from the `@dhis2/ui` library
```js
-import { Cover } from '@dhis2-ui/cover'
+import { Cover } from '@dhis2/ui'
```
diff --git a/components/css/API.md b/components/css/API.md
index 231d0a8160..9980dc0528 100644
--- a/components/css/API.md
+++ b/components/css/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CssReset`, you can import the component from the `@dhis2/ui` library
```js
-import { CssReset } from '@dhis2-ui/css'
+import { CssReset } from '@dhis2/ui'
```
@@ -15,11 +15,11 @@ import { CssReset } from '@dhis2-ui/css'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CssVariables`, you can import the component from the `@dhis2/ui` library
```js
-import { CssVariables } from '@dhis2-ui/css'
+import { CssVariables } from '@dhis2/ui'
```
diff --git a/components/divider/API.md b/components/divider/API.md
index 49b9fd8758..8dcf7d8860 100644
--- a/components/divider/API.md
+++ b/components/divider/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Divider`, you can import the component from the `@dhis2/ui` library
```js
-import { Divider } from '@dhis2-ui/divider'
+import { Divider } from '@dhis2/ui'
```
diff --git a/components/field/API.md b/components/field/API.md
index c24ac7b974..dc940876dc 100644
--- a/components/field/API.md
+++ b/components/field/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Field`, you can import the component from the `@dhis2/ui` library
```js
-import { Field } from '@dhis2-ui/field'
+import { Field } from '@dhis2/ui'
```
@@ -31,11 +31,11 @@ import { Field } from '@dhis2-ui/field'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FieldGroup`, you can import the component from the `@dhis2/ui` library
```js
-import { FieldGroup } from '@dhis2-ui/field'
+import { FieldGroup } from '@dhis2/ui'
```
@@ -60,11 +60,11 @@ import { FieldGroup } from '@dhis2-ui/field'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FieldSet`, you can import the component from the `@dhis2/ui` library
```js
-import { FieldSet } from '@dhis2-ui/field'
+import { FieldSet } from '@dhis2/ui'
```
diff --git a/components/file-input/API.md b/components/file-input/API.md
index 039c186bb1..6ba7b0b6a0 100644
--- a/components/file-input/API.md
+++ b/components/file-input/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInput`, you can import the component from the `@dhis2/ui` library
```js
-import { FileInput } from '@dhis2-ui/file-input'
+import { FileInput } from '@dhis2/ui'
```
@@ -37,11 +37,11 @@ import { FileInput } from '@dhis2-ui/file-input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInputField`, you can import the component from the `@dhis2/ui` library
```js
-import { FileInputField } from '@dhis2-ui/file-input'
+import { FileInputField } from '@dhis2/ui'
```
@@ -78,11 +78,11 @@ import { FileInputField } from '@dhis2-ui/file-input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileInputFieldWithList`, you can import the component from the `@dhis2/ui` library
```js
-import { FileInputFieldWithList } from '@dhis2-ui/file-input'
+import { FileInputFieldWithList } from '@dhis2/ui'
```
@@ -120,11 +120,11 @@ import { FileInputFieldWithList } from '@dhis2-ui/file-input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileListItem`, you can import the component from the `@dhis2/ui` library
```js
-import { FileListItem } from '@dhis2-ui/file-input'
+import { FileListItem } from '@dhis2/ui'
```
@@ -145,11 +145,11 @@ import { FileListItem } from '@dhis2-ui/file-input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileListPlaceholder`, you can import the component from the `@dhis2/ui` library
```js
-import { FileListPlaceholder } from '@dhis2-ui/file-input'
+import { FileListPlaceholder } from '@dhis2/ui'
```
@@ -164,11 +164,11 @@ import { FileListPlaceholder } from '@dhis2-ui/file-input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FileList`, you can import the component from the `@dhis2/ui` library
```js
-import { FileList } from '@dhis2-ui/file-input'
+import { FileList } from '@dhis2/ui'
```
diff --git a/components/header-bar/API.md b/components/header-bar/API.md
index b8e636403c..be449bf68a 100644
--- a/components/header-bar/API.md
+++ b/components/header-bar/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `HeaderBar`, you can import the component from the `@dhis2/ui` library
```js
-import { HeaderBar } from '@dhis2-ui/header-bar'
+import { HeaderBar } from '@dhis2/ui'
```
diff --git a/components/help/API.md b/components/help/API.md
index d0ce1b0aa0..975f661984 100644
--- a/components/help/API.md
+++ b/components/help/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Help`, you can import the component from the `@dhis2/ui` library
```js
-import { Help } from '@dhis2-ui/help'
+import { Help } from '@dhis2/ui'
```
diff --git a/components/input/API.md b/components/input/API.md
index 57ed9f814e..5dc45b78e0 100644
--- a/components/input/API.md
+++ b/components/input/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Input`, you can import the component from the `@dhis2/ui` library
```js
-import { Input } from '@dhis2-ui/input'
+import { Input } from '@dhis2/ui'
```
@@ -43,11 +43,11 @@ import { Input } from '@dhis2-ui/input'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `InputField`, you can import the component from the `@dhis2/ui` library
```js
-import { InputField } from '@dhis2-ui/input'
+import { InputField } from '@dhis2/ui'
```
diff --git a/components/intersection-detector/API.md b/components/intersection-detector/API.md
index ee966fadbd..88267ab157 100644
--- a/components/intersection-detector/API.md
+++ b/components/intersection-detector/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IntersectionDetector`, you can import the component from the `@dhis2/ui` library
```js
-import { IntersectionDetector } from '@dhis2-ui/intersection-detector'
+import { IntersectionDetector } from '@dhis2/ui'
```
diff --git a/components/label/API.md b/components/label/API.md
index decbb66aed..83d6b874a0 100644
--- a/components/label/API.md
+++ b/components/label/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Label`, you can import the component from the `@dhis2/ui` library
```js
-import { Label } from '@dhis2-ui/label'
+import { Label } from '@dhis2/ui'
```
diff --git a/components/layer/API.md b/components/layer/API.md
index bbfe8f1b48..1de6c15fd1 100644
--- a/components/layer/API.md
+++ b/components/layer/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Layer`, you can import the component from the `@dhis2/ui` library
```js
-import { Layer } from '@dhis2-ui/layer'
+import { Layer } from '@dhis2/ui'
```
diff --git a/components/legend/API.md b/components/legend/API.md
index a6e9af52c9..9e01a0008e 100644
--- a/components/legend/API.md
+++ b/components/legend/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Legend`, you can import the component from the `@dhis2/ui` library
```js
-import { Legend } from '@dhis2-ui/legend'
+import { Legend } from '@dhis2/ui'
```
diff --git a/components/loader/API.md b/components/loader/API.md
index 848f4d7cc5..76b9ea6894 100644
--- a/components/loader/API.md
+++ b/components/loader/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `CircularLoader`, you can import the component from the `@dhis2/ui` library
```js
-import { CircularLoader } from '@dhis2-ui/loader'
+import { CircularLoader } from '@dhis2/ui'
```
@@ -25,11 +25,11 @@ import { CircularLoader } from '@dhis2-ui/loader'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LinearLoader`, you can import the component from the `@dhis2/ui` library
```js
-import { LinearLoader } from '@dhis2-ui/loader'
+import { LinearLoader } from '@dhis2/ui'
```
diff --git a/components/logo/API.md b/components/logo/API.md
index 7c925fc1d8..9e0425e9de 100644
--- a/components/logo/API.md
+++ b/components/logo/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoIcon`, you can import the component from the `@dhis2/ui` library
```js
-import { LogoIcon } from '@dhis2-ui/logo'
+import { LogoIcon } from '@dhis2/ui'
```
@@ -21,11 +21,11 @@ import { LogoIcon } from '@dhis2-ui/logo'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoIconWhite`, you can import the component from the `@dhis2/ui` library
```js
-import { LogoIconWhite } from '@dhis2-ui/logo'
+import { LogoIconWhite } from '@dhis2/ui'
```
@@ -40,11 +40,11 @@ import { LogoIconWhite } from '@dhis2-ui/logo'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Logo`, you can import the component from the `@dhis2/ui` library
```js
-import { Logo } from '@dhis2-ui/logo'
+import { Logo } from '@dhis2/ui'
```
@@ -59,11 +59,11 @@ import { Logo } from '@dhis2-ui/logo'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `LogoWhite`, you can import the component from the `@dhis2/ui` library
```js
-import { LogoWhite } from '@dhis2-ui/logo'
+import { LogoWhite } from '@dhis2/ui'
```
diff --git a/components/menu/API.md b/components/menu/API.md
index 0c94d19033..85d5dd25a4 100644
--- a/components/menu/API.md
+++ b/components/menu/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `FlyoutMenu`, you can import the component from the `@dhis2/ui` library
```js
-import { FlyoutMenu } from '@dhis2-ui/menu'
+import { FlyoutMenu } from '@dhis2/ui'
```
@@ -25,11 +25,11 @@ import { FlyoutMenu } from '@dhis2-ui/menu'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Menu`, you can import the component from the `@dhis2/ui` library
```js
-import { Menu } from '@dhis2-ui/menu'
+import { Menu } from '@dhis2/ui'
```
@@ -46,11 +46,11 @@ import { Menu } from '@dhis2-ui/menu'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuDivider`, you can import the component from the `@dhis2/ui` library
```js
-import { MenuDivider } from '@dhis2-ui/menu'
+import { MenuDivider } from '@dhis2/ui'
```
@@ -66,11 +66,11 @@ import { MenuDivider } from '@dhis2-ui/menu'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuItem`, you can import the component from the `@dhis2/ui` library
```js
-import { MenuItem } from '@dhis2-ui/menu'
+import { MenuItem } from '@dhis2/ui'
```
@@ -100,11 +100,11 @@ import { MenuItem } from '@dhis2-ui/menu'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MenuSectionHeader`, you can import the component from the `@dhis2/ui` library
```js
-import { MenuSectionHeader } from '@dhis2-ui/menu'
+import { MenuSectionHeader } from '@dhis2/ui'
```
diff --git a/components/modal/API.md b/components/modal/API.md
index 399cfd7427..5e67977a19 100644
--- a/components/modal/API.md
+++ b/components/modal/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Modal`, you can import the component from the `@dhis2/ui` library
```js
-import { Modal } from '@dhis2-ui/modal'
+import { Modal } from '@dhis2/ui'
```
@@ -28,11 +28,11 @@ import { Modal } from '@dhis2-ui/modal'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalActions`, you can import the component from the `@dhis2/ui` library
```js
-import { ModalActions } from '@dhis2-ui/modal'
+import { ModalActions } from '@dhis2/ui'
```
@@ -47,11 +47,11 @@ import { ModalActions } from '@dhis2-ui/modal'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalContent`, you can import the component from the `@dhis2/ui` library
```js
-import { ModalContent } from '@dhis2-ui/modal'
+import { ModalContent } from '@dhis2/ui'
```
@@ -67,11 +67,11 @@ import { ModalContent } from '@dhis2-ui/modal'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `ModalTitle`, you can import the component from the `@dhis2/ui` library
```js
-import { ModalTitle } from '@dhis2-ui/modal'
+import { ModalTitle } from '@dhis2/ui'
```
diff --git a/components/node/API.md b/components/node/API.md
index b01664d6ab..ccc0dfe902 100644
--- a/components/node/API.md
+++ b/components/node/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Node`, you can import the component from the `@dhis2/ui` library
```js
-import { Node } from '@dhis2-ui/node'
+import { Node } from '@dhis2/ui'
```
diff --git a/components/notice-box/API.md b/components/notice-box/API.md
index c6ce21ec84..ff059b6980 100644
--- a/components/notice-box/API.md
+++ b/components/notice-box/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `NoticeBox`, you can import the component from the `@dhis2/ui` library
```js
-import { NoticeBox } from '@dhis2-ui/notice-box'
+import { NoticeBox } from '@dhis2/ui'
```
diff --git a/components/organisation-unit-tree/API.md b/components/organisation-unit-tree/API.md
index 31b142c845..6296bb413e 100644
--- a/components/organisation-unit-tree/API.md
+++ b/components/organisation-unit-tree/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTreeRootError`, you can import the component from the `@dhis2/ui` library
```js
-import { OrganisationUnitTreeRootError } from '@dhis2-ui/organisation-unit-tree'
+import { OrganisationUnitTreeRootError } from '@dhis2/ui'
```
@@ -21,11 +21,11 @@ import { OrganisationUnitTreeRootError } from '@dhis2-ui/organisation-unit-tree'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTreeRootLoading`, you can import the component from the `@dhis2/ui` library
```js
-import { OrganisationUnitTreeRootLoading } from '@dhis2-ui/organisation-unit-tree'
+import { OrganisationUnitTreeRootLoading } from '@dhis2/ui'
```
@@ -39,11 +39,11 @@ import { OrganisationUnitTreeRootLoading } from '@dhis2-ui/organisation-unit-tre
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `OrganisationUnitTree`, you can import the component from the `@dhis2/ui` library
```js
-import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree'
+import { OrganisationUnitTree } from '@dhis2/ui'
```
diff --git a/components/pagination/API.md b/components/pagination/API.md
index c23bbf78d2..f178579a12 100644
--- a/components/pagination/API.md
+++ b/components/pagination/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Pagination`, you can import the component from the `@dhis2/ui` library
```js
-import { Pagination } from '@dhis2-ui/pagination'
+import { Pagination } from '@dhis2/ui'
```
diff --git a/components/popover/API.md b/components/popover/API.md
index 6817c17542..357057e483 100644
--- a/components/popover/API.md
+++ b/components/popover/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Popover`, you can import the component from the `@dhis2/ui` library
```js
-import { Popover } from '@dhis2-ui/popover'
+import { Popover } from '@dhis2/ui'
```
diff --git a/components/popper/API.md b/components/popper/API.md
index 9ec48b46e5..d824edad4e 100644
--- a/components/popper/API.md
+++ b/components/popper/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Popper`, you can import the component from the `@dhis2/ui` library
```js
-import { Popper } from '@dhis2-ui/popper'
+import { Popper } from '@dhis2/ui'
```
diff --git a/components/radio/API.md b/components/radio/API.md
index c3c7682741..75f1947253 100644
--- a/components/radio/API.md
+++ b/components/radio/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Radio`, you can import the component from the `@dhis2/ui` library
```js
-import { Radio } from '@dhis2-ui/radio'
+import { Radio } from '@dhis2/ui'
```
diff --git a/components/required/API.md b/components/required/API.md
index 570e13887a..4bda90abd5 100644
--- a/components/required/API.md
+++ b/components/required/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Required`, you can import the component from the `@dhis2/ui` library
```js
-import { Required } from '@dhis2-ui/required'
+import { Required } from '@dhis2/ui'
```
diff --git a/components/segmented-control/API.md b/components/segmented-control/API.md
index a5108230a1..a326ec84e3 100644
--- a/components/segmented-control/API.md
+++ b/components/segmented-control/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SegmentedControl`, you can import the component from the `@dhis2/ui` library
```js
-import { SegmentedControl } from '@dhis2-ui/segmented-control'
+import { SegmentedControl } from '@dhis2/ui'
```
diff --git a/components/select/API.md b/components/select/API.md
index 7d6194934b..d2498c24a4 100644
--- a/components/select/API.md
+++ b/components/select/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelect`, you can import the component from the `@dhis2/ui` library
```js
-import { MultiSelect } from '@dhis2-ui/select'
+import { MultiSelect } from '@dhis2/ui'
```
@@ -46,11 +46,11 @@ import { MultiSelect } from '@dhis2-ui/select'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelectField`, you can import the component from the `@dhis2/ui` library
```js
-import { MultiSelectField } from '@dhis2-ui/select'
+import { MultiSelectField } from '@dhis2/ui'
```
@@ -95,11 +95,11 @@ import { MultiSelectField } from '@dhis2-ui/select'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `MultiSelectOption`, you can import the component from the `@dhis2/ui` library
```js
-import { MultiSelectOption } from '@dhis2-ui/select'
+import { MultiSelectOption } from '@dhis2/ui'
```
@@ -119,11 +119,11 @@ import { MultiSelectOption } from '@dhis2-ui/select'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelect`, you can import the component from the `@dhis2/ui` library
```js
-import { SingleSelect } from '@dhis2-ui/select'
+import { SingleSelect } from '@dhis2/ui'
```
@@ -163,11 +163,11 @@ import { SingleSelect } from '@dhis2-ui/select'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelectField`, you can import the component from the `@dhis2/ui` library
```js
-import { SingleSelectField } from '@dhis2-ui/select'
+import { SingleSelectField } from '@dhis2/ui'
```
@@ -212,11 +212,11 @@ import { SingleSelectField } from '@dhis2-ui/select'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SingleSelectOption`, you can import the component from the `@dhis2/ui` library
```js
-import { SingleSelectOption } from '@dhis2-ui/select'
+import { SingleSelectOption } from '@dhis2/ui'
```
diff --git a/components/selector-bar/API.md b/components/selector-bar/API.md
index e737cc6f72..8a8ba2bc5a 100644
--- a/components/selector-bar/API.md
+++ b/components/selector-bar/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SelectorBar`, you can import the component from the `@dhis2/ui` library
```js
-import { SelectorBar } from '@dhis2-ui/selector-bar'
+import { SelectorBar } from '@dhis2/ui'
```
@@ -25,11 +25,11 @@ import { SelectorBar } from '@dhis2-ui/selector-bar'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SelectorBarItem`, you can import the component from the `@dhis2/ui` library
```js
-import { SelectorBarItem } from '@dhis2-ui/selector-bar'
+import { SelectorBarItem } from '@dhis2/ui'
```
diff --git a/components/sharing-dialog/API.md b/components/sharing-dialog/API.md
index b8a0d281f7..3271b3152f 100644
--- a/components/sharing-dialog/API.md
+++ b/components/sharing-dialog/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SharingDialog`, you can import the component from the `@dhis2/ui` library
```js
-import { SharingDialog } from '@dhis2-ui/sharing-dialog'
+import { SharingDialog } from '@dhis2/ui'
```
diff --git a/components/status-icon/API.md b/components/status-icon/API.md
index 9593c3ebfe..49a4b0f487 100644
--- a/components/status-icon/API.md
+++ b/components/status-icon/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StatusIcon`, you can import the component from the `@dhis2/ui` library
```js
-import { StatusIcon } from '@dhis2-ui/status-icon'
+import { StatusIcon } from '@dhis2/ui'
```
diff --git a/components/switch/API.md b/components/switch/API.md
index f92b5c66df..776cd18337 100644
--- a/components/switch/API.md
+++ b/components/switch/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Switch`, you can import the component from the `@dhis2/ui` library
```js
-import { Switch } from '@dhis2-ui/switch'
+import { Switch } from '@dhis2/ui'
```
@@ -38,11 +38,11 @@ import { Switch } from '@dhis2-ui/switch'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `SwitchField`, you can import the component from the `@dhis2/ui` library
```js
-import { SwitchField } from '@dhis2-ui/switch'
+import { SwitchField } from '@dhis2/ui'
```
diff --git a/components/tab/API.md b/components/tab/API.md
index 6a058a04ce..65e6bafeb1 100644
--- a/components/tab/API.md
+++ b/components/tab/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tab`, you can import the component from the `@dhis2/ui` library
```js
-import { Tab } from '@dhis2-ui/tab'
+import { Tab } from '@dhis2/ui'
```
@@ -26,11 +26,11 @@ import { Tab } from '@dhis2-ui/tab'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TabBar`, you can import the component from the `@dhis2/ui` library
```js
-import { TabBar } from '@dhis2-ui/tab'
+import { TabBar } from '@dhis2/ui'
```
diff --git a/components/table/API.md b/components/table/API.md
index acd6ae9667..e7bddcef12 100644
--- a/components/table/API.md
+++ b/components/table/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableCell`, you can import the component from the `@dhis2/ui` library
```js
-import { DataTableCell } from '@dhis2-ui/table'
+import { DataTableCell } from '@dhis2/ui'
```
@@ -40,11 +40,11 @@ import { DataTableCell } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTable`, you can import the component from the `@dhis2/ui` library
```js
-import { DataTable } from '@dhis2-ui/table'
+import { DataTable } from '@dhis2/ui'
```
@@ -65,11 +65,11 @@ import { DataTable } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableBody`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableBody } from '@dhis2-ui/table'
+import { StackedTableBody } from '@dhis2/ui'
```
@@ -85,11 +85,11 @@ import { StackedTableBody } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableCellHead`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableCellHead } from '@dhis2-ui/table'
+import { StackedTableCellHead } from '@dhis2/ui'
```
@@ -107,11 +107,11 @@ import { StackedTableCellHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableCell`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableCell } from '@dhis2-ui/table'
+import { StackedTableCell } from '@dhis2/ui'
```
@@ -133,11 +133,11 @@ import { StackedTableCell } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableFoot`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableFoot } from '@dhis2-ui/table'
+import { StackedTableFoot } from '@dhis2/ui'
```
@@ -153,11 +153,11 @@ import { StackedTableFoot } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableHead`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableHead } from '@dhis2-ui/table'
+import { StackedTableHead } from '@dhis2/ui'
```
@@ -173,11 +173,11 @@ import { StackedTableHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableRowHead`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableRowHead } from '@dhis2-ui/table'
+import { StackedTableRowHead } from '@dhis2/ui'
```
@@ -193,11 +193,11 @@ import { StackedTableRowHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTableRow`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTableRow } from '@dhis2-ui/table'
+import { StackedTableRow } from '@dhis2/ui'
```
@@ -213,11 +213,11 @@ import { StackedTableRow } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `StackedTable`, you can import the component from the `@dhis2/ui` library
```js
-import { StackedTable } from '@dhis2-ui/table'
+import { StackedTable } from '@dhis2/ui'
```
@@ -234,11 +234,11 @@ import { StackedTable } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
-import { Table } from '@dhis2-ui/table'
+import { Table } from '@dhis2/ui'
```
@@ -254,11 +254,11 @@ import { Table } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableBody`, you can import the component from the `@dhis2/ui` library
```js
-import { TableBody } from '@dhis2-ui/table'
+import { TableBody } from '@dhis2/ui'
```
@@ -275,11 +275,11 @@ import { TableBody } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableCellHead`, you can import the component from the `@dhis2/ui` library
```js
-import { TableCellHead } from '@dhis2-ui/table'
+import { TableCellHead } from '@dhis2/ui'
```
@@ -299,11 +299,11 @@ import { TableCellHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableCell`, you can import the component from the `@dhis2/ui` library
```js
-import { TableCell } from '@dhis2-ui/table'
+import { TableCell } from '@dhis2/ui'
```
@@ -323,11 +323,11 @@ import { TableCell } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableFoot`, you can import the component from the `@dhis2/ui` library
```js
-import { TableFoot } from '@dhis2-ui/table'
+import { TableFoot } from '@dhis2/ui'
```
@@ -344,11 +344,11 @@ import { TableFoot } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableHead`, you can import the component from the `@dhis2/ui` library
```js
-import { TableHead } from '@dhis2-ui/table'
+import { TableHead } from '@dhis2/ui'
```
@@ -365,11 +365,11 @@ import { TableHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRowHead`, you can import the component from the `@dhis2/ui` library
```js
-import { TableRowHead } from '@dhis2-ui/table'
+import { TableRowHead } from '@dhis2/ui'
```
@@ -387,11 +387,11 @@ import { TableRowHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRow`, you can import the component from the `@dhis2/ui` library
```js
-import { TableRow } from '@dhis2-ui/table'
+import { TableRow } from '@dhis2/ui'
```
@@ -409,11 +409,11 @@ import { TableRow } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
-import { Table } from '@dhis2-ui/table'
+import { Table } from '@dhis2/ui'
```
@@ -431,11 +431,11 @@ import { Table } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableColumnHeader`, you can import the component from the `@dhis2/ui` library
```js
-import { DataTableColumnHeader } from '@dhis2-ui/table'
+import { DataTableColumnHeader } from '@dhis2/ui'
```
@@ -468,11 +468,11 @@ import { DataTableColumnHeader } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `DataTableRow`, you can import the component from the `@dhis2/ui` library
```js
-import { DataTableRow } from '@dhis2-ui/table'
+import { DataTableRow } from '@dhis2/ui'
```
@@ -494,11 +494,11 @@ import { DataTableRow } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableBody`, you can import the component from the `@dhis2/ui` library
```js
-import { TableBody } from '@dhis2-ui/table'
+import { TableBody } from '@dhis2/ui'
```
@@ -516,11 +516,11 @@ import { TableBody } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableFoot`, you can import the component from the `@dhis2/ui` library
```js
-import { TableFoot } from '@dhis2-ui/table'
+import { TableFoot } from '@dhis2/ui'
```
@@ -537,11 +537,11 @@ import { TableFoot } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableHead`, you can import the component from the `@dhis2/ui` library
```js
-import { TableHead } from '@dhis2-ui/table'
+import { TableHead } from '@dhis2/ui'
```
@@ -558,11 +558,11 @@ import { TableHead } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TableRow`, you can import the component from the `@dhis2/ui` library
```js
-import { TableRow } from '@dhis2-ui/table'
+import { TableRow } from '@dhis2/ui'
```
@@ -581,11 +581,11 @@ import { TableRow } from '@dhis2-ui/table'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Table`, you can import the component from the `@dhis2/ui` library
```js
-import { Table } from '@dhis2-ui/table'
+import { Table } from '@dhis2/ui'
```
diff --git a/components/tag/API.md b/components/tag/API.md
index c523d12500..1b1e530ccd 100644
--- a/components/tag/API.md
+++ b/components/tag/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tag`, you can import the component from the `@dhis2/ui` library
```js
-import { Tag } from '@dhis2-ui/tag'
+import { Tag } from '@dhis2/ui'
```
diff --git a/components/text-area/API.md b/components/text-area/API.md
index 5f7cd9b00a..2f3a8ac249 100644
--- a/components/text-area/API.md
+++ b/components/text-area/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TextArea`, you can import the component from the `@dhis2/ui` library
```js
-import { TextArea } from '@dhis2-ui/text-area'
+import { TextArea } from '@dhis2/ui'
```
@@ -41,11 +41,11 @@ import { TextArea } from '@dhis2-ui/text-area'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TextAreaField`, you can import the component from the `@dhis2/ui` library
```js
-import { TextAreaField } from '@dhis2-ui/text-area'
+import { TextAreaField } from '@dhis2/ui'
```
diff --git a/components/tooltip/API.md b/components/tooltip/API.md
index c5ca67582c..79b08ed076 100644
--- a/components/tooltip/API.md
+++ b/components/tooltip/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Tooltip`, you can import the component from the `@dhis2/ui` library
```js
-import { Tooltip } from '@dhis2-ui/tooltip'
+import { Tooltip } from '@dhis2/ui'
```
diff --git a/components/transfer/API.md b/components/transfer/API.md
index 29f4550d6d..e596343874 100644
--- a/components/transfer/API.md
+++ b/components/transfer/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `TransferOption`, you can import the component from the `@dhis2/ui` library
```js
-import { TransferOption } from '@dhis2-ui/transfer'
+import { TransferOption } from '@dhis2/ui'
```
@@ -27,11 +27,11 @@ import { TransferOption } from '@dhis2-ui/transfer'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `Transfer`, you can import the component from the `@dhis2/ui` library
```js
-import { Transfer } from '@dhis2-ui/transfer'
+import { Transfer } from '@dhis2/ui'
```
diff --git a/components/user-avatar/API.md b/components/user-avatar/API.md
index 80ef7b1e8b..1f9a788f70 100644
--- a/components/user-avatar/API.md
+++ b/components/user-avatar/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `UserAvatar`, you can import the component from the `@dhis2/ui` library
```js
-import { UserAvatar } from '@dhis2-ui/user-avatar'
+import { UserAvatar } from '@dhis2/ui'
```
diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md
index 1137e2304f..ce9c55d133 100644
--- a/docs/docs/components/alertbar.md
+++ b/docs/docs/components/alertbar.md
@@ -10,7 +10,7 @@ import API from '../../../components/alert/API.md'
# Alert bar
-An alert bar communicates something to the user by showing a prominent, floating bar at the bottom of the screen.
+An alert bar communicates something to the user by showing a prominent, floating bar at the bottom of the screen, using one of several styles each indicating a different purpose.
Hello world
@@ -18,6 +18,36 @@ An alert bar communicates something to the user by showing a prominent, floating
## Usage
+:::caution Usage Notice
+Usage of the AlertBar component is not recommended when using the Application Platform, as integration is already implemented directly.
+:::
+
+In apps using the App Platform, it’s recommended to use the `useAlert()` hook from the `@dhis2/app-runtime` library instead of using the UI components directly, since an Alerts Manager component is already set up to manage showing, hiding, and stacking alerts.
+
+When passing the options object to the `useAlert(message, options)` hook, the keys and value types of the options are the same as the props of the `AlertBar` component, as documented on this page below, e.g.
+
+```jsx
+import { useAlert } from '@dhis2/app-runtime'
+
+const MyComponent = () => {
+ const { show } = useAlert('Hello', {
+ warning: true,
+ duration: 15000,
+ actions: [
+ { label: 'Hi!', onClick: () => alert('Hi!') },
+ { label: 'Bye!', onClick: () => alert('Bye!') },
+ ],
+ })
+
+ // ...later:
+ show()
+
+ // ...
+}
+```
+
+Read more about the `useAlert()` hook at the [App Runtime documentation](https://developers.dhis2.org/docs/app-runtime/hooks/useAlert)
+
### When to use
- **Tell the user about something important**. Alert bars should only be used for information the user needs to know about.
@@ -46,6 +76,12 @@ An alert bar communicates something to the user by showing a prominent, floating
Data export complete.
+```jsx
+
+ Data export complete.
+
+```
+
- An `info` alert bar is the default. Use it if none of the other variants fit.
- Automatically dismiss after 5 seconds, so the message should be a useful but not critical.
- Use for minor positive confirmations, like _Sharing settings changed._
@@ -57,6 +93,14 @@ An alert bar communicates something to the user by showing a prominent, floating
1000 objects updated.
+```jsx
+
+
+ 1000 objects updated.
+
+
+```
+
- Only use to confirm successful, major actions.
- Don't use for minor confirmations or navigation movements.
- Always tell the user what was successful. Use clear labels like _45 units updated_, rather than just _Updated_.
@@ -67,6 +111,14 @@ An alert bar communicates something to the user by showing a prominent, floating
Some data is taking a long time to sync.
+```jsx
+
+
+ Some data is taking a long time to sync.
+
+
+```
+
- Use to warn of potential problems or things that might happen, like _Some data is taking a long time to sync_.
- Show before the problem happens, if possible.
- If a problem has already happened, use a `critical` variant instead.
@@ -78,6 +130,14 @@ An alert bar communicates something to the user by showing a prominent, floating
There was a problem loading this dashboard.
+```jsx
+
+
+ There was a problem loading this dashboard.
+
+
+```
+
- Only use to communicate a serious problem, like broken functionality or a failed process.
- Use when a user can still interact with the page. If the entire page broken, use a [`Modal`](modal.md) dialog or error screen instead.
- Communicate clearly what happened. Use labels like _There was a problem loading this dashboard_ or _Message failed to send_.
@@ -112,6 +172,26 @@ An alert bar communicates something to the user by showing a prominent, floating
]} permanent>Hello world
+```jsx
+
+
+ Hello world
+
+
+```
+
- Alert bars can have up to two optional actions.
- Actions offer a shortcut to act on the information in the alert bar.
- Actions can do something on the current page, like _Retry_ for a failed action.
@@ -123,6 +203,21 @@ An alert bar communicates something to the user by showing a prominent, floating
- Each variant shows a default icon to support the content being communicated.
- A custom icon can be used. Only use icons that are relevant to the content and that help the user understand the context. Use the default icon unless there's a good reason not to.
+## Using AlertStack
+
+As you can see with all the demo's above, we've used the `AlertStack` component to render the `AlertBar` component. This is because the `AlertStack` component is responsible for positioning the `AlertBar` component in relation to other `AlertBar`s. Especially when there are multiple `AlertBar` components on the page, the `AlertStack` component will make sure that they are stacked on top of each other and that they are not overlapping. It is therefore recommended to always use the `AlertStack` component when using the `AlertBar` component.
+
+To use the `AlertStack` component, you can simply wrap your `AlertBar` component in the `AlertStack` component. The `AlertStack` component will then take care of the positioning.
+
+```jsx
+import { AlertStack, AlertBar } from '@dhis2/ui'
+;
+ ...
+ ...
+ ...
+
+```
+
## API Reference
diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
index f7a49d18d3..4220168ab0 100644
--- a/docs/docs/components/avatar.md
+++ b/docs/docs/components/avatar.md
@@ -1,5 +1,6 @@
---
-title: Avatar
+title: User Avatar
+id: avatar
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
@@ -8,9 +9,9 @@ import { UserAvatar } from '@dhis2/ui'
import API from '../../../components/user-avatar/API.md'
-# Avatar
+# User Avatar
-An avatar is a visual icon that represents a user.
+A User Avatar is a visual icon that represents a user.
@@ -48,6 +49,16 @@ An avatar is a visual icon that represents a user.
Avatars are available in different sizes. Use the size that works best for the space available and the context.
+The Demo above lists the different sizes available. The related JSX is:
+
+```jsx
+
+
+
+
+
+```
+
## API Reference
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 4f71631b3f..6fa258091f 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -41,6 +41,10 @@ Buttons are used to trigger actions. There are different button variants that ar
+```jsx
+
+```
+
- A `basic` button is the default button to use. It suits the majority of use cases.
- Don't use a `basic` button for the most important action on the page. Use `primary` instead.
@@ -50,6 +54,10 @@ Buttons are used to trigger actions. There are different button variants that ar
+```jsx
+
+```
+
- Only use for the most important action on a page, like _Save data_ in a form.
- Only use one `primary` button per page, otherwise it's not clear what the main action is.
- A page doesn't need to have a `primary` button if there isn't a clear main action.
@@ -60,6 +68,10 @@ Buttons are used to trigger actions. There are different button variants that ar
+```jsx
+
+```
+
- Use for actions that are used less often. Using `secondary` buttons reduces amount of elements on a page competing for a user's attention.
- Use as a passive alternative to `primary` actions, like _Cancel_ as a passive alternative to _Save_.
- Don't use if there's only one action on the page.
@@ -73,6 +85,15 @@ Buttons are used to trigger actions. There are different button variants that ar
+```jsx
+
+
+
+
+```
+
- Only use for primary-type actions that will destroy data.
- Don't use if the action will only remove an item from the current context.
- Only use a one `destructive` button per page.
@@ -109,6 +130,10 @@ Buttons are available in different sizes. Use the size that matches the usage gu
Dropdown button
+```jsx
+Dropdown button
+```
+
- A dropdown button offers several actions in a small space. Clicking the button opens a menu with several actions.
- Use to replace a group of buttons where space is limited.
- A dropdown button label should make it clear there are more options inside, like _Actions_.
@@ -119,6 +144,10 @@ Buttons are available in different sizes. Use the size that matches the usage gu
Split button
+```jsx
+Split button
+```
+
- A split button offers a main action and a dropdown of several other actions. Clicking the main button triggers an action. Clicking the split arrow opens a menu with several actions.
- Use when there is a main action and several secondary actions, like a main action of _Save_ and secondary actions of _Save and add another_ and _Save and open_.
- Use when space is limited. Otherwise, show buttons for all the actions.
@@ -133,6 +162,13 @@ Buttons are available in different sizes. Use the size that matches the usage gu
+```jsx
+
+ }>
+ } toggled>
+
+```
+
- Represents an on/off state.
- Use a toggle button when an option can be turned on or off, and a checkbox ==link== isn't suitable, like in a toolbar.
- Toggle buttons can be used with `basic` and `secondary` variants.
@@ -147,6 +183,13 @@ Buttons are available in different sizes. Use the size that matches the usage gu
+```jsx
+
+ }>Mark as complete
+ }>
+
+```
+
- Buttons can have an optional icon alongside the text label.
- Buttons can show only an icon.
- Icons with a text label are useful for providing more information about the action. Users scanning an interface might recognize an icon quicker than text.
@@ -159,6 +202,10 @@ Buttons are available in different sizes. Use the size that matches the usage gu
+```jsx
+
+```
+
- Use a disabled state when the button action can't be triggered.
- Show a tooltip ==link== on hover, or help text, that tells the user why the action can't be triggered.
- Don't change the button label between disabled and enabled states.
@@ -170,6 +217,10 @@ Buttons are available in different sizes. Use the size that matches the usage gu
+```jsx
+
+```
+
- Use a loading state after a user triggers that button.
- Change the button label to tell the user what's happening. For example, after clicking a _Start job_ button, the loading state label could be _Starting job…_.
- If triggering other actions on the page should be prevented, consider showing a blocking loader ==link== instead.
diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md
index f1000cc5ca..607a3af15d 100644
--- a/docs/docs/components/calendar-input.md
+++ b/docs/docs/components/calendar-input.md
@@ -115,6 +115,17 @@ Ethiopic calendar (with narrow day names, short day names and localised to Engli
+The Gregorian with initial date is then generated with this code.
+
+```jsx
+
+```
+
## API Reference
The component takes the same props as [the calendar](./calendar) component, as well as the props for [InputField](./inputfield) that are relevant to an input of type `text`.
diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md
index 52a86da41c..e579721b6c 100644
--- a/docs/docs/components/calendar.md
+++ b/docs/docs/components/calendar.md
@@ -18,7 +18,9 @@ Here are some sample calendars built with this UI component. Check [StoryBook]((
## Ethiopic calendar
-Ethiopic calendar (with narrow day names, short day names and localised to English)
+Ethiopic calendar with narrow day names, short day names and localised to English.
+
+### Narrow day names
@@ -45,28 +47,59 @@ Ethiopic calendar (with narrow day names, short day names and localised to Engli
+To display the calendar with short day names, use the codeblock below. For the narrow day names remove the `weekDayFormat` prop. For the English locale, use the `en` locale and the short `weekDayFormat`.
+
+```jsx
+
+```
+
## Nepali calendar
Nepali calendar (with Nepali and English characters)
-> Nepali is a custom calendar not natively implemented in Temporal and Nepali locale is not natively supported by browsers' Internationalization standard. We are providing a custom implementation for the calendar, as well as the localised values. The only two locales allowed are: `ne-NP` (nepali) and `en-NP` (nepali transliterated in latin characters).
+:::note
+Nepali is a custom calendar not natively implemented in Temporal and Nepali locale is not natively supported by browsers' Internationalization standard. We are providing a custom implementation for the calendar, as well as the localised values. The only two locales allowed are: `ne-NP` (nepali) and `en-NP` (nepali transliterated in latin characters).
+:::
+```jsx
+ // Napali
+
+
+ // Nepali transliterated in latin characters
+
+```
+
## Gregorian calendar
Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic.
@@ -105,6 +138,12 @@ Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabi
+To display the calendar with a specific locale, use the codeblock below. Adjust the locale to the desired language.
+
+```jsx
+
+```
+
## Other calendars
Some other calendars: Islamic in Arabic, Indian in English and Persian in Farsi
@@ -139,13 +178,21 @@ Some other calendars: Islamic in Arabic, Indian in English and Persian in Farsi
+Each of the calendars above can be displayed with the following code.
+
+```jsx
+
+```
+
+:::note
+Additionally the component supports a number of other calendars that are not currently used in DHIS2, since they're implemented in the [Temporal API](https://tc39.es/proposal-temporal/)). These other calendars are: `hebrew`, `islamic`, `islamic-umalqura`, `islamic-tbla`, `islamic-civil`, `islamic-rgsa`, `persian`, `ethioaa`, `coptic`, `chinese`, `dangi`, `roc`, `indian`, `buddhist`, `japanese`.
+:::
+
## Usage
### When to use
-- To display a calendar for the user to pick a day in any supported calendar system, localised to any of the 90+ languages supported by [The Unicode Common Locale Data Repository (CLDR)](https://cldr.unicode.org/index) supported natively in all modern browsers. Supported DHIS2 calendars are: `iso8601` (i.e. the Gregorian calendar common in most of the world),`ethiopic`, `nepali` (custom implementation).
-
- - Additionally the component supports a number of other calendars that are not currently used in DHIS2, since they're implemented in the [Temporal API](https://tc39.es/proposal-temporal/)). These other calendars are: `hebrew`, `islamic`, `islamic-umalqura`, `islamic-tbla`, `islamic-civil`, `islamic-rgsa`, `persian`, `ethioaa`, `coptic`, `chinese`, `dangi`, `roc`, `indian`, `buddhist`, `japanese`.
+To display a calendar for the user to pick a day in any supported calendar system, localised to any of the 90+ languages supported by [The Unicode Common Locale Data Repository (CLDR)](https://cldr.unicode.org/index) supported natively in all modern browsers. Supported DHIS2 calendars are: `iso8601` (i.e. the Gregorian calendar common in most of the world),`ethiopic`, `nepali` (custom implementation).
### When not to use
diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index f12545c50f..0086c505d1 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -17,6 +17,10 @@ A card is a container element used to group together and separate blocks of cont
## Usage
+```jsx
+This is content that's inside a card.
+```
+
### When to use
- **Group content**. Use a card as a container for related content. When there's different areas of content on a page, a card helps to establish boundaries between them.
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
index 3f83a1e3d9..06f79e2a7e 100644
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -16,6 +16,11 @@ Checkboxes are used to choose one or more items from a list. A checkbox can also
+```jsx
+
+
+```
+
## Usage
### When to use
diff --git a/docs/docs/components/chip.md b/docs/docs/components/chip.md
index e3ed47b1f1..dad956a78b 100644
--- a/docs/docs/components/chip.md
+++ b/docs/docs/components/chip.md
@@ -15,6 +15,10 @@ Chips are used to select from a set of defined options. Chips can also represent
Hello world
+```jsx
+Hello world
+```
+
## Usage
### When to use
@@ -41,6 +45,11 @@ Chips are used to select from a set of defined options. Chips can also represent
Hello world
+```jsx
+Hello world
+Hello world
+```
+
- Chips are available in two sizes, regular and `dense`.
- Use regular sized chips where there is space.
- Use `dense` sized chips in information-dense pages, or inside other components.
@@ -65,6 +74,10 @@ Chips are used to select from a set of defined options. Chips can also represent
Hello world
+```jsx
+Hello world
+```
+
- Use removable chips if an option can be removed from the group.
- Only use removable chips when chips can be added back to the same group through another action, like choosing from a menu.
@@ -74,6 +87,10 @@ Chips are used to select from a set of defined options. Chips can also represent
} >Hello world
+```jsx
+}>Hello world
+```
+
- Chips can show an icon before the text label.
- Icons are useful to highlight special chips, like starred items.
- Don't use the same icon for all the chips in a group. Use a title or heading for that group of chips instead.
diff --git a/docs/docs/components/data-table.md b/docs/docs/components/data-table.md
index c4d3408471..29ca1a4961 100644
--- a/docs/docs/components/data-table.md
+++ b/docs/docs/components/data-table.md
@@ -11,9 +11,31 @@ import API from '../../../components/table/API.md'
A data table is used to display and allow interaction with data in a structured way.
-
+A minimal version of the linked demo looks like this.
+
+```jsx
+
+
+
+ First name
+
+
+
+
+ Onyekachukwu
+
+
+
+
+ Footer content
+
+
+
+```
+
## Usage
### When to use
@@ -29,7 +51,7 @@ A data table is used to display and allow interaction with data in a structured
### Sorting
-
- Data table items can be sorted by different columns by clicking on the sort icon in a column header.
@@ -38,7 +60,7 @@ A data table is used to display and allow interaction with data in a structured
### Filtering: Inline
-
- Use inline filters in complex interfaces to offer filtering functionality without extra controls outside of the table.
@@ -47,7 +69,7 @@ A data table is used to display and allow interaction with data in a structured
### Fixed header
-
- Use a fixed header in data tables that are used to browse a lot of data. Fixed headers stay in view and make it easier to understand what cells contain.
@@ -55,7 +77,7 @@ A data table is used to display and allow interaction with data in a structured
### Fixed columns
-
- Use fixed columns in dense interfaces where the table might need to be scrolled horizontally.
@@ -64,7 +86,7 @@ A data table is used to display and allow interaction with data in a structured
### Expandable rows
-
- Use expandable rows if there's more useful information that doesn't fit well into columns, like paragraphs of text, images, or video.
@@ -72,7 +94,7 @@ A data table is used to display and allow interaction with data in a structured
### Selectable rows
-
- Use selectable rows if a user can perform batch actions on rows in the data table, like selecting several rows and exporting or deleting them.
@@ -80,7 +102,7 @@ A data table is used to display and allow interaction with data in a structured
### Draggable rows
-
- Use draggable rows if the order of rows in the data table has a meaningful impact. With draggable rows, a user can drag rows to change the order.
@@ -88,7 +110,7 @@ A data table is used to display and allow interaction with data in a structured
### Bordered cells
-
- Use bordered cells when showing complex data that might have similar values, like long numbers, to help a user visually scan data values.
@@ -96,7 +118,7 @@ A data table is used to display and allow interaction with data in a structured
### Built-in styles
-
- A data table offers several built-in text styles.
@@ -105,7 +127,7 @@ A data table is used to display and allow interaction with data in a structured
### Large cells
-
- Use large cells can be used for data tables that will don't show a lot of rows.
@@ -172,4 +194,4 @@ Patterns are common ways of achieving some functionality. Patterns aren't offere
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-datatable--default)
+- [Demo](/demo/?path=/story/datatable--default)
diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md
index d2e6f23a2a..8d9f2ed4ed 100644
--- a/docs/docs/components/elevation.md
+++ b/docs/docs/components/elevation.md
@@ -14,12 +14,29 @@ Elevation is used to create and communicate depth in an interface.
-
An elevated element
+
An elevated element
## Usage
+To use elevation, apply a `box-shadow` to an element. The `box-shadow` property takes the variable available in the UI library, as specified in the variants.
+
+```jsx
+
+ An elevated element
+
+```
+
+This example usees the `e200` variant.
+
### When to use
- **Separate elements**. Use elevation to make relationships between interface elements clearer, like showing that a panel is floating above a background.
diff --git a/docs/docs/components/fileinput.md b/docs/docs/components/fileinput.md
index 3ed21807d0..d1de2e8b4a 100644
--- a/docs/docs/components/fileinput.md
+++ b/docs/docs/components/fileinput.md
@@ -40,6 +40,10 @@ A file input is used to choose and upload files.
/>
+```jsx
+
+```
+
- Use a label above the button if the file input is part of a form with other controls.
##### Button
@@ -50,6 +54,10 @@ A file input is used to choose and upload files.
/>
+```jsx
+
+```
+
- When a form label isn't used, the button label should make it clear what kind of file is expected. Use _Upload certificate_ instead of just _Upload_, for example.
##### Help text
@@ -61,6 +69,13 @@ A file input is used to choose and upload files.
/>
+```jsx
+
+```
+
- Use help text to tell the user about any limitations or expectations of the files, like size or format.
## Options
@@ -75,6 +90,14 @@ A file input is used to choose and upload files.
+```jsx
+
+
+
+
+
+```
+
- Allow multiple file upload if that fits the use case.
- Don't use several file inputs for the same kind of file, use one with multiple files allowed.
@@ -84,4 +107,4 @@ A file input is used to choose and upload files.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-file-input-file-input--default)
+- [Demo](/demo/?path=/story/file-input--default)
diff --git a/docs/docs/components/inputfield.md b/docs/docs/components/inputfield.md
index 7802ed45d1..236d5af4ac 100644
--- a/docs/docs/components/inputfield.md
+++ b/docs/docs/components/inputfield.md
@@ -42,6 +42,10 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use a label above the input to show what the input is for.
##### Placeholder
@@ -50,6 +54,10 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Only use placeholder text to clarify what kind of content is expected.
- Placeholder text shouldn't repeat the label.
- Always use placeholder text if a label isn't used.
@@ -61,6 +69,14 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use help text to tell the user about any limitations or expectations for the content.
- Help text can also be used to clarify what the input is for if it's a complex concept.
@@ -73,6 +89,11 @@ An input is used to enter data, like text or a number.
+```jsx
+
+
+```
+
- Inputs are available in two sizes, regular and `dense`. Regular sized inputs are useful when there's space available. Use `dense` sized inputs in compact, information-dense interfaces.
#### Width
@@ -84,6 +105,11 @@ An input is used to enter data, like text or a number.
+```jsx
+
+
+```
+
- Inputs width should reflect the expected content.
- If a three digit number is expected then the input should be narrow.
- If a longer sentence is expected then the input should be wider.
@@ -96,6 +122,10 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use a `Textarea` if more than a single sentence of content is expected.
- [`Textarea`](https://ui.dhis2.nu/demo/?path=/story/forms-text-area-text-area-field--no-placeholder-no-value) is available as a standalone component.
@@ -110,6 +140,10 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use a read-only input if it makes sense to show the input, but the content can't be changed.
- Read-only inputs are useful to show that a value is locked, like a unique ID.
- Offer help text for read-only inputs if it's unclear why the content can't be changed.
@@ -120,6 +154,15 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use an error state if there's a problem with the content of the input, or if it's required but empty.
- Don't show an error too early, give the user a chance to finish entering data.
- The error text should help the user fix the problem. Refer to the [error writing guidelines](../principles/content-communication.md) for examples.
@@ -130,6 +173,12 @@ An input is used to enter data, like text or a number.
+```jsx
+
+
+
+```
+
- Use a disabled state if the input temporarily can't be used.
- Show a [`Tooltip`](tooltip.md) on hover or focus to explain why the input is disabled.
@@ -139,6 +188,10 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Text inputs are the default type.
- Use a text input for entering any kind of text content, like a mix of letters and numbers.
@@ -148,6 +201,15 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use a number input for entering numbers.
- The `step` value should reflect the expected content. If entering a number that's always a multiple of 10, use 10 as the `step` value.
@@ -157,6 +219,15 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Use a password input whenever a user is entering a password or secret value.
### Data type: Date / time
@@ -165,6 +236,14 @@ An input is used to enter data, like text or a number.
+```jsx
+
+```
+
- Using date/time inputs offers different interactions depending on the user's browser.
### Other data types
@@ -183,5 +262,5 @@ The following data types don't change the interaction with the input, but should
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-input-input-field--default)
-- [`TextArea` demo](https://ui.dhis2.nu/demo/?path=/story/forms-text-area-text-area-field--no-placeholder-no-value)
+- [Demo](/demo/?path=/story/file-input-field--default)
+- [`TextArea` demo](/demo/?path=/story/text-area--placeholder-no-value)
diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md
index 2d6248a0a9..c4be767ddb 100644
--- a/docs/docs/components/loading.md
+++ b/docs/docs/components/loading.md
@@ -41,6 +41,10 @@ Loaders are used to show that something is in progress. They keep users informed
+```jsx
+
+```
+
- Use a circular loader when the loading time is uncertain.
#### Linear
@@ -49,6 +53,10 @@ Loaders are used to show that something is in progress. They keep users informed
+```jsx
+
+```
+
- Use a linear loader when the progress can be shown as a percentage of 100%.
### Format
@@ -64,6 +72,13 @@ Loaders are used to show that something is in progress. They keep users informed
+```jsx
+
+
+
+
+```
+
- Circular loaders are available in four sizes.
- Use the size that matches the size of the component being loaded.
diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md
index 1bcd6ffc90..ec0be1f67b 100644
--- a/docs/docs/components/menu.md
+++ b/docs/docs/components/menu.md
@@ -51,6 +51,16 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+
+
+
+
+
+
+```
+
- Order the menu items in a logical way, grouping together related actions.
- Destructive menu items should be shown in their own group, usually last.
@@ -69,6 +79,17 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+
+
+
+
+
+
+
+```
+
- Menu items are available in two sizes, regular and `dense`.
- Use `dense` sized menu items in complex, information-dense layouts. Otherwise, the regular size.
@@ -76,11 +97,19 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+
+
+
+
+```jsx
+
-
-
+
+```
- A menu item can open another menu.
- Use nested menus when there's complex options that can be grouped together, like a _Download_ parent item containing different file formats.
@@ -101,6 +130,17 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+
+
+
+
+
+
+
+```
+
- A menu can show dividers between groups of menu items.
- Use dividers to split items that logically belong together. This makes the menu easier to scan.
- Dividers can also show a section header, a text label for that group of menu items.
@@ -116,6 +156,18 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+ } label="Filter data" />
+ } label="Change time period" />
+ }
+ label="Open in Data Visualizer app"
+ suffix={}
+ />
+
+```
+
- A menu item can show a suffix.
- Use a suffix to show extra information about the context or intent of a menu item.
- Common use cases include showing a menu item's keyboard shortcut and showing an indicator that a menu item will open a new tab.
@@ -131,6 +183,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+ } label="Save" />
+ } label="Rename" />
+ } label="Share" />
+
+```
+
- A menu item can show an icon.
- Use icons to support the text label by providing context or a visual reference.
- Don't include icons for decoration only, they add complexity to the interface.
@@ -147,6 +207,16 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+ } label="Save" />
+ } label="Rename" />
+ } label="Share" />
+
+ } label="Delete program" />
+
+```
+
- Use destructive menu items for critical, destructive actions like _Delete_ or _End process_.
- Don't use a destructive menu item unless the item is both critical and destructive. Important menu items shouldn't use the destructive type to highlight only their importance.
- Most menus should have a maximum of one destructive item.
@@ -162,6 +232,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
+```jsx
+
+ } label="Save" />
+ } label="Rename" />
+ } label="Share" />
+
+```
+
- Use disabled menu items when a menu item is temporarily unavailable.
- Don't use the disabled state if the menu item will never be available in this context. Remove it instead.
@@ -171,4 +249,4 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/actions-menu-flyout-menu--default)
+- [Demo](/demo/?path=/story/flyout-menu--default)
diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md
index b0716ce761..b6905db6e8 100755
--- a/docs/docs/components/modal.md
+++ b/docs/docs/components/modal.md
@@ -53,10 +53,46 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc
### Actions
+:::info Note
+The `hide` variable used in the demo's below are initiated using `useState(true)` and set to `false` with the button you see in the demos.
+:::
+
+```jsx
+
+ Modal title
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
- A modal should contain action buttons.
- Action buttons should offer clear choices and relate to the modal content.
- If it's possible to leave the modal with saving, always offer a _Cancel_ action button.
@@ -68,6 +104,29 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc
+```jsx
+
+ Modal title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
- Show a [`Loader`](loading.md) when a modal is loading content.
- Don't show a full page loader before showing the modal. Show the modal immediately.
@@ -77,6 +136,40 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc
+```jsx
+
+ Update profile
+
+
+
+
+ There's a problem with this form.
+
+
+
+
+
+
+
+
+
+```
+
- If there's a problem with something inside the modal, like a missing input field, show a [`Notice box`](notice-box.md) at the bottom of the modal.
- If there's a problem with something outside of the modal, like getting an empty response back from the server, show an [`Alert bar`](alertbar.md) outside of the modal.
@@ -86,4 +179,4 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/layout-modal--default-content)
+- [Demo](/demo/?path=/story/modal--default-content)
diff --git a/docs/docs/components/notice-box.md b/docs/docs/components/notice-box.md
index 7abab1bc10..c50f2a65bc 100644
--- a/docs/docs/components/notice-box.md
+++ b/docs/docs/components/notice-box.md
@@ -49,6 +49,13 @@ A notice box shows important information about a situation.
+```jsx
+
+ Dashboard data can take a few hours to update, so the most recent data might
+ not be shown.
+
+```
+
- The default choice. Use whenever the information isn't a problem or something the user definitely needs to know before moving on.
#### Warning
@@ -60,6 +67,17 @@ A notice box shows important information about a situation.
+```jsx
+
+ No one will be able to find this program because it doesn't have any
+ assigned organisation units.
+
+
+
+```
+
- Use to alert the user to a problem that isn't blocking the current workflow.
- If possible, offer an [action](#actions) to help the user fix the problem.
@@ -72,6 +90,17 @@ A notice box shows important information about a situation.
+```jsx
+
+ There isn't any data because there was a problem generating analytics
+ tables.
+
+
+
+```
+
- Use to alert the user to a problem or error that's blocking the current workflow.
- If possible, offer an [action](#actions) to help the user fix the problem.
@@ -83,6 +112,13 @@ A notice box shows important information about a situation.
+```jsx
+
+ Your password has been reset. You can log in with your username and
+ password.
+
+```
+
- Use to inform the user that an important action is complete, or the process was successful.
- Only use when the information needs to stay on screen. In most `valid` cases, using an [alert bar](./alertbar.md) is a better choice.
@@ -108,4 +144,4 @@ A notice box shows important information about a situation.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-notice-box--default)
+- [Demo](/demo/?path=/story/notice-box--default)
diff --git a/docs/docs/components/org-unit-tree.md b/docs/docs/components/org-unit-tree.md
index b266431363..c0c98faaf7 100644
--- a/docs/docs/components/org-unit-tree.md
+++ b/docs/docs/components/org-unit-tree.md
@@ -14,7 +14,7 @@ import API from '../../../components/organisation-unit-tree/API.md'
An organisation unit tree is used to choose organisation units from a hierarchy.
-
## Usage
@@ -41,4 +41,4 @@ An organisation unit tree is used to choose organisation units from a hierarchy.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-organisation-unit-tree--collapsed)
+- [Demo](/demo/?path=/story/organisation-unit-tree--collapsed)
diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md
index 31cf126791..4ca8aebef0 100644
--- a/docs/docs/components/pagination.md
+++ b/docs/docs/components/pagination.md
@@ -43,6 +43,17 @@ Different elements of the pagination component can be included, depending on the
+```jsx
+
+```
+
- Offers access to any page without navigating with previous or next buttons.
- Use if a user might need to jump between non-sequential pages often.
@@ -52,6 +63,17 @@ Different elements of the pagination component can be included, depending on the
+```jsx
+
+```
+
- Shows a short summary of the current page in context of the whole set of items.
- Use when positional context could be useful.
- Showing the total number of items can be problematic for large data sets. Omit the total number of items and pages in situations when there can be many items.
@@ -62,6 +84,17 @@ Different elements of the pagination component can be included, depending on the
+```jsx
+
+```
+
- Changes the number of items included in a page.
- Use when a user might want to customize the view.
@@ -71,4 +104,4 @@ Different elements of the pagination component can be included, depending on the
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/navigation-pagination--default)
+- [Demo](/demo/?path=/story/pagination--default)
diff --git a/docs/docs/components/popover.md b/docs/docs/components/popover.md
index e429e86c8b..3bedbd4182 100644
--- a/docs/docs/components/popover.md
+++ b/docs/docs/components/popover.md
@@ -12,7 +12,7 @@ import API from '../../../components/popover/API.md'
A popover is used to show more information when a user interacts with a trigger element.
-
## Usage
@@ -37,4 +37,4 @@ A popover is used to show more information when a user interacts with a trigger
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-popover--default)
+- [Demo](/demo/?path=/story/popover--default)
diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md
index ac195c07d0..2aa0386954 100644
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -48,6 +48,11 @@ Radio inputs are used to choose one item from a list.
+```jsx
+
+
+```
+
- Radio inputs are available in two sizes, regular and `dense`. Regular sized radio inputs are useful when there's space available. Use `dense` sized radio inputs in compact, information dense interfaces.
## API Reference
@@ -56,4 +61,4 @@ Radio inputs are used to choose one item from a list.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-radio-radio--default)
+- [Demo](/demo/?path=/story/radio--default)
diff --git a/docs/docs/components/segmented-control.md b/docs/docs/components/segmented-control.md
index 711334a400..3c6cf47520 100644
--- a/docs/docs/components/segmented-control.md
+++ b/docs/docs/components/segmented-control.md
@@ -12,8 +12,7 @@ import API from '../../../components/segmented-control/API.md'
A segmented control is used to choose between related options that have an effect on a related area.
- {
+ console.log(value)
+ }}
/>
## Usage
+```jsx
+
+```
+
+The value of each property can be used to select the option, using the `selected` property. The `onChange` callback function is called when an option is selected with the value of the item that was clicked. If you want to automatically change to the item that is selected visually, you can use this callback in combination with a state variable.
+
### When to use
- **Choose between related options**. Use a segmented control to choose between closely related options.
@@ -59,4 +82,4 @@ A segmented control is used to choose between related options that have an effec
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/actions-segmented-control--default)
+- [Demo](/demo/?path=/story/segmented-control--default)
diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md
index 1292a00edf..1b1730b288 100644
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -53,6 +53,14 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+```
+
- Use a single select if the user can only choose one option.
#### Multi select
@@ -68,6 +76,15 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+```
+
- Use a multi select if the user can choose one or more options.
### Format
@@ -95,6 +112,14 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+```
+
- Only use placeholder text to clarify what kind of content is expected.
- Placeholder text shouldn't repeat the label.
- Always use placeholder text if a label isn't used.
@@ -117,6 +142,17 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+```
+
- Use help text to tell the user about any limitations or expectations for the content.
- Help text can also be used to clarify what the input is for if it's a complex concept.
@@ -135,6 +171,19 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+
+
+
+
+```
+
- Selects are available in two sizes, regular and `dense`. Regular sized selects are useful when there's space available. Use `dense` sized selects in compact, information-dense interfaces.
#### Width
@@ -161,6 +210,16 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+
+```
+
- A select can show a filter control that filters the available options.
- Use a filter when there's many options, more than 10, to choose from.
@@ -181,6 +240,16 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+
+```
+
- A select can show a _Clear_ button that removes the current selection.
- Use a clearable select if there isn't a _None_ choice in the options.
@@ -201,6 +270,15 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+```
+
- A select can show a label that prefixes the chosen option label.
- Use a prefix when there is limited space and a label above the select would take up too much space.
- Prefix labels should be short and clear.
@@ -222,6 +300,19 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+```
+
- Use an error state if there's a problem with the chosen option, or if it's required but empty.
- Don't show an error too early, give the user a chance to make a choice.
- The error text should help the user fix the problem. Refer to the [error writing guidelines](../principles/content-communication.md) for examples.
@@ -243,6 +334,15 @@ Selects are used to choose one or more items from a list of options.
+```jsx
+
+
+
+
+
+
+```
+
- Use a disabled state if the select temporarily can't be used.
- Show a [`Tooltip`](tooltip.md) on hover or focus to explain why the select is disabled.
@@ -252,4 +352,4 @@ Selects are used to choose one or more items from a list of options.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-single-select-single-select-field--default)
+- [Demo](/demo/?path=/story/single-select--with-options-and-on-change)
diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md
index cbd1eae0bd..4cb22f1113 100644
--- a/docs/docs/components/switch.md
+++ b/docs/docs/components/switch.md
@@ -18,6 +18,11 @@ Switches are used to toggle something between an on and off state.
## Usage
+```jsx
+
+
+```
+
### When to use
- **Toggle a job or process**. Use a switch to toggle a constantly running process. Examples of constantly running processes might be _Automatic updates_, _Logging_, or a background task.
@@ -39,7 +44,13 @@ Switches are used to toggle something between an on and off state.
-- Switches are available in two sizes, regular and `dense`. Regular sized switches are useful when there's space available. Use `dense` sized switches in compact, information-dense interfaces.
+
+```jsx
+
+
+```
+
+- Switches are available in two sizes, regular and `dense`. Regular sized switches are useful when there's space available. Use `dense` sized switches in compact, information-dense interfaces.
## API Reference
@@ -47,4 +58,4 @@ Switches are used to toggle something between an on and off state.
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/forms-switch-switch-field--default)
+- [Demo](/demo/?path=/story/switch--default)
diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md
index ea54d656dd..f989e3ce36 100644
--- a/docs/docs/components/tab.md
+++ b/docs/docs/components/tab.md
@@ -51,6 +51,16 @@ Tabs are used to navigate between different views within the same page or contex
+```jsx
+
+ }>Notifications
+ } selected>
+ Sharing and access
+
+ }>Downloads
+
+```
+
- A tab can show an icon.
- Use icons to support the text label by providing context or a visual reference.
- Don't include icons for decoration only, they add complexity to the interface.
@@ -66,6 +76,15 @@ Tabs are used to navigate between different views within the same page or contex
+```jsx
+
+ Tab label 1
+ Tab label 2
+ Tab label 3
+ Tab label 4
+
+```
+
- Use a disabled state if a tab can't be used temporarily.
- Show a [`Tooltip`](tooltip.md) when hovering a disabled tab to give a short explanation of why the tab can't be used.
- If a tab will never be enabled in the current context, remove it instead.
@@ -76,4 +95,4 @@ Tabs are used to navigate between different views within the same page or contex
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-tooltip--default-placement-top)
+- [Demo](/demo/?path=/story/tab-bar--default-fluid)
diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md
index 13e38ba878..b8c07d2388 100644
--- a/docs/docs/components/tag.md
+++ b/docs/docs/components/tag.md
@@ -35,6 +35,13 @@ Tags are used to label items by a set of shared properties, like category or sta
| Positive | Use to communicate success or validity. |
| Negative | Use to communicate a problem or error. |
+```jsx
+Default
+Neutral
+Positive
+Negative
+```
+
### Format
#### Label
@@ -52,6 +59,11 @@ Tags are used to label items by a set of shared properties, like category or sta
+```jsx
+} positive>Passed
+} negative>Failed
+```
+
- A tag can show an icon before the text label.
- Use icons to support the text label by providing context or a visual reference.
- Don't include icons for decoration only, they add complexity to the interface.
@@ -67,6 +79,13 @@ Tags are used to label items by a set of shared properties, like category or sta
+```jsx
+Tag label
+Tag label
+Tag label
+Tag label
+```
+
- Use bold tags where it's important the information is noticed by a user.
- Don't overuse bold tags, only use them when the information is important.
@@ -76,4 +95,4 @@ Tags are used to label items by a set of shared properties, like category or sta
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-tag--default)
+- [Demo](/demo/?path=/story/tag--default)
diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md
index e1e312fcc1..ab07d7173b 100644
--- a/docs/docs/components/tooltip.md
+++ b/docs/docs/components/tooltip.md
@@ -48,6 +48,13 @@ A tooltip is used to show contextual information when triggered by clicking, foc
Hover to trigger bottom tooltip.
+```jsx
+Hover to trigger top tooltip.
+Hover to trigger left tooltip.
+Hover to trigger right tooltip.
+Hover to trigger bottom tooltip.
+```
+
- By default, tooltips are shown above the triggering element.
- Other positions, `left`, `right`, and `bottom`, are available. Only use these positions if there's a reason `top` doesn't work, like in an information dense layout.
@@ -57,6 +64,12 @@ A tooltip is used to show contextual information when triggered by clicking, foc
Hover to trigger a tooltip with a longer open delay and shorter close delay.
+```jsx
+
+ Hover to trigger a tooltip with a longer open delay and shorter close delay.
+
+```
+
- Tooltips have two delay durations: `open` and `close`.
- Use the default delay durations unless there's a specific use case to change them.
- Longer `open` delays and shorter `close` delays can help prevent too many tooltips showing in a complex layout.
@@ -67,4 +80,4 @@ A tooltip is used to show contextual information when triggered by clicking, foc
## Links
-- [Demo](https://ui.dhis2.nu/demo/?path=/story/data-display-tooltip--default-placement-top)
+- [Demo](/demo/?path=/story/tooltip--default-placement-top)
diff --git a/docs/docs/components/transfer.md b/docs/docs/components/transfer.md
index 26c38bce28..ebc5340ff0 100644
--- a/docs/docs/components/transfer.md
+++ b/docs/docs/components/transfer.md
@@ -32,21 +32,83 @@ A transfer is made up of two lists. The _source list_ that shows the available o
## Options
+For all the demo's below, `transferOptions` is an array of objects with the following shape:
+
+```js
+;[
+ {
+ label: 'ANC 1st visit',
+ value: 'anc_1st_visit',
+ },
+]
+```
+
+The `onChange` and `selected` properties are created like this:
+
+```js
+const [selected, setSelected] = useState()
+const onChange = (payload) => setSelected(payload.selected)
+```
+
### Header
+```jsx
+}
+ rightHeader={}
+ onChange={onChange}
+/>
+```
+
+The `header` component is as follows:
+
+```jsx
+
+ {props.label}
+
+```
+
- Use headers for titles that make it clear what the transfer options are.
- _Source list_ headers could also contain group filters.
### Footer
-
+
+```jsx
+}
+ onChange={onChange}
+/>
+```
+
+The footer component is as follows:
+
+```jsx
+
+
+
+```
+
- Use footers for actions that apply to a list, like _Reload items_.
### Reordering
@@ -55,6 +117,15 @@ A transfer is made up of two lists. The _source list_ that shows the available o
+```jsx
+
+```
+
- Allow reordering if the order of the chosen options has meaning or consequences.
### Filtering
@@ -63,6 +134,16 @@ A transfer is made up of two lists. The _source list_ that shows the available o
+```jsx
+
+```
+
- Use filtering to help a user find options in the _source list_.
### Loading
diff --git a/docs/sidebars.js b/docs/sidebars.js
index a9034a905b..17b9c320ac 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -42,7 +42,6 @@ const sidebars = {
{
Components: [
'components/alertbar',
- 'components/avatar',
'components/button',
'components/card',
'components/calendar',
@@ -68,6 +67,7 @@ const sidebars = {
'components/tag',
'components/tooltip',
'components/transfer',
+ 'components/avatar',
],
},
{
@@ -96,6 +96,11 @@ const sidebars = {
],
},
'package/changelog',
+ {
+ type: 'link',
+ label: 'Developer Portal',
+ href: 'https://developers.dhis2.org',
+ },
],
}
diff --git a/icons/API.md b/icons/API.md
index 3fe7b76935..0519a5b91b 100644
--- a/icons/API.md
+++ b/icons/API.md
@@ -2,11 +2,11 @@
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAdd16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAdd16 } from '@dhis2/ui-icons'
+import { IconAdd16 } from '@dhis2/ui'
```
@@ -21,11 +21,11 @@ import { SvgAdd16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAdd24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAdd24 } from '@dhis2/ui-icons'
+import { IconAdd24 } from '@dhis2/ui'
```
@@ -40,11 +40,11 @@ import { SvgAdd24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAddCircle16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAddCircle16 } from '@dhis2/ui-icons'
+import { IconAddCircle16 } from '@dhis2/ui'
```
@@ -59,11 +59,11 @@ import { SvgAddCircle16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAddCircle24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAddCircle24 } from '@dhis2/ui-icons'
+import { IconAddCircle24 } from '@dhis2/ui'
```
@@ -78,11 +78,11 @@ import { SvgAddCircle24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconApps16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgApps16 } from '@dhis2/ui-icons'
+import { IconApps16 } from '@dhis2/ui'
```
@@ -97,11 +97,11 @@ import { SvgApps16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconApps24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgApps24 } from '@dhis2/ui-icons'
+import { IconApps24 } from '@dhis2/ui'
```
@@ -116,11 +116,11 @@ import { SvgApps24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArchive16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArchive16 } from '@dhis2/ui-icons'
+import { IconArchive16 } from '@dhis2/ui'
```
@@ -135,11 +135,11 @@ import { SvgArchive16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArchive24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArchive24 } from '@dhis2/ui-icons'
+import { IconArchive24 } from '@dhis2/ui'
```
@@ -154,11 +154,11 @@ import { SvgArchive24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowDown16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowDown16 } from '@dhis2/ui-icons'
+import { IconArrowDown16 } from '@dhis2/ui'
```
@@ -173,11 +173,11 @@ import { SvgArrowDown16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowDown24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowDown24 } from '@dhis2/ui-icons'
+import { IconArrowDown24 } from '@dhis2/ui'
```
@@ -192,11 +192,11 @@ import { SvgArrowDown24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowLeft16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowLeft16 } from '@dhis2/ui-icons'
+import { IconArrowLeft16 } from '@dhis2/ui'
```
@@ -211,11 +211,11 @@ import { SvgArrowLeft16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowLeft24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowLeft24 } from '@dhis2/ui-icons'
+import { IconArrowLeft24 } from '@dhis2/ui'
```
@@ -230,11 +230,11 @@ import { SvgArrowLeft24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowLeftMulti16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowLeftMulti16 } from '@dhis2/ui-icons'
+import { IconArrowLeftMulti16 } from '@dhis2/ui'
```
@@ -249,11 +249,11 @@ import { SvgArrowLeftMulti16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowLeftMulti24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowLeftMulti24 } from '@dhis2/ui-icons'
+import { IconArrowLeftMulti24 } from '@dhis2/ui'
```
@@ -268,11 +268,11 @@ import { SvgArrowLeftMulti24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowRight16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowRight16 } from '@dhis2/ui-icons'
+import { IconArrowRight16 } from '@dhis2/ui'
```
@@ -287,11 +287,11 @@ import { SvgArrowRight16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowRight24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowRight24 } from '@dhis2/ui-icons'
+import { IconArrowRight24 } from '@dhis2/ui'
```
@@ -306,11 +306,11 @@ import { SvgArrowRight24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowRightMulti16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowRightMulti16 } from '@dhis2/ui-icons'
+import { IconArrowRightMulti16 } from '@dhis2/ui'
```
@@ -325,11 +325,11 @@ import { SvgArrowRightMulti16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowRightMulti24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowRightMulti24 } from '@dhis2/ui-icons'
+import { IconArrowRightMulti24 } from '@dhis2/ui'
```
@@ -344,11 +344,11 @@ import { SvgArrowRightMulti24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowUp16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowUp16 } from '@dhis2/ui-icons'
+import { IconArrowUp16 } from '@dhis2/ui'
```
@@ -363,11 +363,11 @@ import { SvgArrowUp16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconArrowUp24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgArrowUp24 } from '@dhis2/ui-icons'
+import { IconArrowUp24 } from '@dhis2/ui'
```
@@ -382,11 +382,11 @@ import { SvgArrowUp24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAt16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAt16 } from '@dhis2/ui-icons'
+import { IconAt16 } from '@dhis2/ui'
```
@@ -401,11 +401,11 @@ import { SvgAt16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAt24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAt24 } from '@dhis2/ui-icons'
+import { IconAt24 } from '@dhis2/ui'
```
@@ -420,11 +420,11 @@ import { SvgAt24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAttachment16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAttachment16 } from '@dhis2/ui-icons'
+import { IconAttachment16 } from '@dhis2/ui'
```
@@ -439,11 +439,11 @@ import { SvgAttachment16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconAttachment24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgAttachment24 } from '@dhis2/ui-icons'
+import { IconAttachment24 } from '@dhis2/ui'
```
@@ -458,11 +458,11 @@ import { SvgAttachment24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconBlock16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgBlock16 } from '@dhis2/ui-icons'
+import { IconBlock16 } from '@dhis2/ui'
```
@@ -477,11 +477,11 @@ import { SvgBlock16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconBlock24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgBlock24 } from '@dhis2/ui-icons'
+import { IconBlock24 } from '@dhis2/ui'
```
@@ -496,11 +496,11 @@ import { SvgBlock24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCalendar16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCalendar16 } from '@dhis2/ui-icons'
+import { IconCalendar16 } from '@dhis2/ui'
```
@@ -515,11 +515,11 @@ import { SvgCalendar16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCalendar24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCalendar24 } from '@dhis2/ui-icons'
+import { IconCalendar24 } from '@dhis2/ui'
```
@@ -534,11 +534,11 @@ import { SvgCalendar24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCheckmark12`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCheckmark12 } from '@dhis2/ui-icons'
+import { IconCheckmark12 } from '@dhis2/ui'
```
@@ -553,11 +553,11 @@ import { SvgCheckmark12 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCheckmark16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCheckmark16 } from '@dhis2/ui-icons'
+import { IconCheckmark16 } from '@dhis2/ui'
```
@@ -572,11 +572,11 @@ import { SvgCheckmark16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCheckmark24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCheckmark24 } from '@dhis2/ui-icons'
+import { IconCheckmark24 } from '@dhis2/ui'
```
@@ -591,11 +591,11 @@ import { SvgCheckmark24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCheckmarkCircle16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCheckmarkCircle16 } from '@dhis2/ui-icons'
+import { IconCheckmarkCircle16 } from '@dhis2/ui'
```
@@ -610,11 +610,11 @@ import { SvgCheckmarkCircle16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCheckmarkCircle24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCheckmarkCircle24 } from '@dhis2/ui-icons'
+import { IconCheckmarkCircle24 } from '@dhis2/ui'
```
@@ -629,11 +629,11 @@ import { SvgCheckmarkCircle24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronDown16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronDown16 } from '@dhis2/ui-icons'
+import { IconChevronDown16 } from '@dhis2/ui'
```
@@ -648,11 +648,11 @@ import { SvgChevronDown16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronDown24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronDown24 } from '@dhis2/ui-icons'
+import { IconChevronDown24 } from '@dhis2/ui'
```
@@ -667,11 +667,11 @@ import { SvgChevronDown24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronLeft16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronLeft16 } from '@dhis2/ui-icons'
+import { IconChevronLeft16 } from '@dhis2/ui'
```
@@ -686,11 +686,11 @@ import { SvgChevronLeft16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronLeft24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronLeft24 } from '@dhis2/ui-icons'
+import { IconChevronLeft24 } from '@dhis2/ui'
```
@@ -705,11 +705,11 @@ import { SvgChevronLeft24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronRight16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronRight16 } from '@dhis2/ui-icons'
+import { IconChevronRight16 } from '@dhis2/ui'
```
@@ -724,11 +724,11 @@ import { SvgChevronRight16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronRight24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronRight24 } from '@dhis2/ui-icons'
+import { IconChevronRight24 } from '@dhis2/ui'
```
@@ -743,11 +743,11 @@ import { SvgChevronRight24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronUp16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronUp16 } from '@dhis2/ui-icons'
+import { IconChevronUp16 } from '@dhis2/ui'
```
@@ -762,11 +762,11 @@ import { SvgChevronUp16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconChevronUp24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgChevronUp24 } from '@dhis2/ui-icons'
+import { IconChevronUp24 } from '@dhis2/ui'
```
@@ -781,11 +781,11 @@ import { SvgChevronUp24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconClock16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgClock16 } from '@dhis2/ui-icons'
+import { IconClock16 } from '@dhis2/ui'
```
@@ -800,11 +800,11 @@ import { SvgClock16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconClock24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgClock24 } from '@dhis2/ui-icons'
+import { IconClock24 } from '@dhis2/ui'
```
@@ -819,11 +819,11 @@ import { SvgClock24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconClockHistory16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgClockHistory16 } from '@dhis2/ui-icons'
+import { IconClockHistory16 } from '@dhis2/ui'
```
@@ -838,11 +838,11 @@ import { SvgClockHistory16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconClockHistory24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgClockHistory24 } from '@dhis2/ui-icons'
+import { IconClockHistory24 } from '@dhis2/ui'
```
@@ -857,11 +857,11 @@ import { SvgClockHistory24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconColor16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgColor16 } from '@dhis2/ui-icons'
+import { IconColor16 } from '@dhis2/ui'
```
@@ -876,11 +876,11 @@ import { SvgColor16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconColor24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgColor24 } from '@dhis2/ui-icons'
+import { IconColor24 } from '@dhis2/ui'
```
@@ -895,11 +895,11 @@ import { SvgColor24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCopy16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCopy16 } from '@dhis2/ui-icons'
+import { IconCopy16 } from '@dhis2/ui'
```
@@ -914,11 +914,11 @@ import { SvgCopy16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCopy24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCopy24 } from '@dhis2/ui-icons'
+import { IconCopy24 } from '@dhis2/ui'
```
@@ -933,11 +933,11 @@ import { SvgCopy24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCross16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCross16 } from '@dhis2/ui-icons'
+import { IconCross16 } from '@dhis2/ui'
```
@@ -952,11 +952,11 @@ import { SvgCross16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconCross24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgCross24 } from '@dhis2/ui-icons'
+import { IconCross24 } from '@dhis2/ui'
```
@@ -971,11 +971,11 @@ import { SvgCross24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDashboardWindow16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDashboardWindow16 } from '@dhis2/ui-icons'
+import { IconDashboardWindow16 } from '@dhis2/ui'
```
@@ -990,11 +990,11 @@ import { SvgDashboardWindow16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDashboardWindow24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDashboardWindow24 } from '@dhis2/ui-icons'
+import { IconDashboardWindow24 } from '@dhis2/ui'
```
@@ -1009,11 +1009,11 @@ import { SvgDashboardWindow24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDataInteger16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDataInteger16 } from '@dhis2/ui-icons'
+import { IconDataInteger16 } from '@dhis2/ui'
```
@@ -1028,11 +1028,11 @@ import { SvgDataInteger16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDataInteger24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDataInteger24 } from '@dhis2/ui-icons'
+import { IconDataInteger24 } from '@dhis2/ui'
```
@@ -1047,11 +1047,11 @@ import { SvgDataInteger24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDataString16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDataString16 } from '@dhis2/ui-icons'
+import { IconDataString16 } from '@dhis2/ui'
```
@@ -1066,11 +1066,11 @@ import { SvgDataString16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDataString24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDataString24 } from '@dhis2/ui-icons'
+import { IconDataString24 } from '@dhis2/ui'
```
@@ -1085,11 +1085,11 @@ import { SvgDataString24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDelete16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDelete16 } from '@dhis2/ui-icons'
+import { IconDelete16 } from '@dhis2/ui'
```
@@ -1104,11 +1104,11 @@ import { SvgDelete16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDelete24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDelete24 } from '@dhis2/ui-icons'
+import { IconDelete24 } from '@dhis2/ui'
```
@@ -1123,11 +1123,11 @@ import { SvgDelete24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionCategoryOptionGroupset16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionCategoryOptionGroupset16 } from '@dhis2/ui-icons'
+import { IconDimensionCategoryOptionGroupset16 } from '@dhis2/ui'
```
@@ -1142,11 +1142,11 @@ import { SvgDimensionCategoryOptionGroupset16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionData16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionData16 } from '@dhis2/ui-icons'
+import { IconDimensionData16 } from '@dhis2/ui'
```
@@ -1161,11 +1161,11 @@ import { SvgDimensionData16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionDataElementGroupset16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionDataElementGroupset16 } from '@dhis2/ui-icons'
+import { IconDimensionDataElementGroupset16 } from '@dhis2/ui'
```
@@ -1180,11 +1180,11 @@ import { SvgDimensionDataElementGroupset16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionDataSet16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionDataSet16 } from '@dhis2/ui-icons'
+import { IconDimensionDataSet16 } from '@dhis2/ui'
```
@@ -1199,11 +1199,11 @@ import { SvgDimensionDataSet16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionEventDataItem16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionEventDataItem16 } from '@dhis2/ui-icons'
+import { IconDimensionEventDataItem16 } from '@dhis2/ui'
```
@@ -1218,11 +1218,11 @@ import { SvgDimensionEventDataItem16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionIndicator16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionIndicator16 } from '@dhis2/ui-icons'
+import { IconDimensionIndicator16 } from '@dhis2/ui'
```
@@ -1237,11 +1237,11 @@ import { SvgDimensionIndicator16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionOrgUnit16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionOrgUnit16 } from '@dhis2/ui-icons'
+import { IconDimensionOrgUnit16 } from '@dhis2/ui'
```
@@ -1256,11 +1256,11 @@ import { SvgDimensionOrgUnit16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionOrgUnitGroupset16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionOrgUnitGroupset16 } from '@dhis2/ui-icons'
+import { IconDimensionOrgUnitGroupset16 } from '@dhis2/ui'
```
@@ -1275,11 +1275,11 @@ import { SvgDimensionOrgUnitGroupset16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionProgramIndicator16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionProgramIndicator16 } from '@dhis2/ui-icons'
+import { IconDimensionProgramIndicator16 } from '@dhis2/ui'
```
@@ -1294,11 +1294,11 @@ import { SvgDimensionProgramIndicator16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDimensionValidationRule16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDimensionValidationRule16 } from '@dhis2/ui-icons'
+import { IconDimensionValidationRule16 } from '@dhis2/ui'
```
@@ -1313,11 +1313,11 @@ import { SvgDimensionValidationRule16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDirectionNorth16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDirectionNorth16 } from '@dhis2/ui-icons'
+import { IconDirectionNorth16 } from '@dhis2/ui'
```
@@ -1332,11 +1332,11 @@ import { SvgDirectionNorth16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDirectionNorth24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDirectionNorth24 } from '@dhis2/ui-icons'
+import { IconDirectionNorth24 } from '@dhis2/ui'
```
@@ -1351,11 +1351,11 @@ import { SvgDirectionNorth24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDownload16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDownload16 } from '@dhis2/ui-icons'
+import { IconDownload16 } from '@dhis2/ui'
```
@@ -1370,11 +1370,11 @@ import { SvgDownload16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDownload24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDownload24 } from '@dhis2/ui-icons'
+import { IconDownload24 } from '@dhis2/ui'
```
@@ -1389,11 +1389,11 @@ import { SvgDownload24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDragHandle16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDragHandle16 } from '@dhis2/ui-icons'
+import { IconDragHandle16 } from '@dhis2/ui'
```
@@ -1408,11 +1408,11 @@ import { SvgDragHandle16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDragHandle24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDragHandle24 } from '@dhis2/ui-icons'
+import { IconDragHandle24 } from '@dhis2/ui'
```
@@ -1427,11 +1427,11 @@ import { SvgDragHandle24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDuplicate16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDuplicate16 } from '@dhis2/ui-icons'
+import { IconDuplicate16 } from '@dhis2/ui'
```
@@ -1446,11 +1446,11 @@ import { SvgDuplicate16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconDuplicate24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgDuplicate24 } from '@dhis2/ui-icons'
+import { IconDuplicate24 } from '@dhis2/ui'
```
@@ -1465,11 +1465,11 @@ import { SvgDuplicate24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEdit16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEdit16 } from '@dhis2/ui-icons'
+import { IconEdit16 } from '@dhis2/ui'
```
@@ -1484,11 +1484,11 @@ import { SvgEdit16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEdit24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEdit24 } from '@dhis2/ui-icons'
+import { IconEdit24 } from '@dhis2/ui'
```
@@ -1503,11 +1503,11 @@ import { SvgEdit24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEditItems16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEditItems16 } from '@dhis2/ui-icons'
+import { IconEditItems16 } from '@dhis2/ui'
```
@@ -1522,11 +1522,11 @@ import { SvgEditItems16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEditItems24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEditItems24 } from '@dhis2/ui-icons'
+import { IconEditItems24 } from '@dhis2/ui'
```
@@ -1541,11 +1541,11 @@ import { SvgEditItems24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEmptyFrame16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEmptyFrame16 } from '@dhis2/ui-icons'
+import { IconEmptyFrame16 } from '@dhis2/ui'
```
@@ -1560,11 +1560,11 @@ import { SvgEmptyFrame16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconEmptyFrame24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgEmptyFrame24 } from '@dhis2/ui-icons'
+import { IconEmptyFrame24 } from '@dhis2/ui'
```
@@ -1579,11 +1579,11 @@ import { SvgEmptyFrame24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconError16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgError16 } from '@dhis2/ui-icons'
+import { IconError16 } from '@dhis2/ui'
```
@@ -1598,11 +1598,11 @@ import { SvgError16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconError24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgError24 } from '@dhis2/ui-icons'
+import { IconError24 } from '@dhis2/ui'
```
@@ -1617,11 +1617,11 @@ import { SvgError24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconErrorFilled16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgErrorFilled16 } from '@dhis2/ui-icons'
+import { IconErrorFilled16 } from '@dhis2/ui'
```
@@ -1636,11 +1636,11 @@ import { SvgErrorFilled16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconErrorFilled24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgErrorFilled24 } from '@dhis2/ui-icons'
+import { IconErrorFilled24 } from '@dhis2/ui'
```
@@ -1655,11 +1655,11 @@ import { SvgErrorFilled24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconExportItems24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgExportItems24 } from '@dhis2/ui-icons'
+import { IconExportItems24 } from '@dhis2/ui'
```
@@ -1674,11 +1674,11 @@ import { SvgExportItems24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFaceAdd16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFaceAdd16 } from '@dhis2/ui-icons'
+import { IconFaceAdd16 } from '@dhis2/ui'
```
@@ -1693,11 +1693,11 @@ import { SvgFaceAdd16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFaceAdd24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFaceAdd24 } from '@dhis2/ui-icons'
+import { IconFaceAdd24 } from '@dhis2/ui'
```
@@ -1712,11 +1712,11 @@ import { SvgFaceAdd24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFile16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFile16 } from '@dhis2/ui-icons'
+import { IconFile16 } from '@dhis2/ui'
```
@@ -1731,11 +1731,11 @@ import { SvgFile16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFile24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFile24 } from '@dhis2/ui-icons'
+import { IconFile24 } from '@dhis2/ui'
```
@@ -1750,11 +1750,11 @@ import { SvgFile24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFileDocument16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFileDocument16 } from '@dhis2/ui-icons'
+import { IconFileDocument16 } from '@dhis2/ui'
```
@@ -1769,11 +1769,11 @@ import { SvgFileDocument16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFileDocument24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFileDocument24 } from '@dhis2/ui-icons'
+import { IconFileDocument24 } from '@dhis2/ui'
```
@@ -1788,11 +1788,11 @@ import { SvgFileDocument24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFilter16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFilter16 } from '@dhis2/ui-icons'
+import { IconFilter16 } from '@dhis2/ui'
```
@@ -1807,11 +1807,11 @@ import { SvgFilter16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFilter24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFilter24 } from '@dhis2/ui-icons'
+import { IconFilter24 } from '@dhis2/ui'
```
@@ -1826,11 +1826,11 @@ import { SvgFilter24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFlag16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFlag16 } from '@dhis2/ui-icons'
+import { IconFlag16 } from '@dhis2/ui'
```
@@ -1845,11 +1845,11 @@ import { SvgFlag16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFlag24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFlag24 } from '@dhis2/ui-icons'
+import { IconFlag24 } from '@dhis2/ui'
```
@@ -1864,11 +1864,11 @@ import { SvgFlag24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFolder16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFolder16 } from '@dhis2/ui-icons'
+import { IconFolder16 } from '@dhis2/ui'
```
@@ -1883,11 +1883,11 @@ import { SvgFolder16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFolder24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFolder24 } from '@dhis2/ui-icons'
+import { IconFolder24 } from '@dhis2/ui'
```
@@ -1902,11 +1902,11 @@ import { SvgFolder24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFolderOpen16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFolderOpen16 } from '@dhis2/ui-icons'
+import { IconFolderOpen16 } from '@dhis2/ui'
```
@@ -1921,11 +1921,11 @@ import { SvgFolderOpen16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFolderOpen24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFolderOpen24 } from '@dhis2/ui-icons'
+import { IconFolderOpen24 } from '@dhis2/ui'
```
@@ -1940,11 +1940,11 @@ import { SvgFolderOpen24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFullscreen16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFullscreen16 } from '@dhis2/ui-icons'
+import { IconFullscreen16 } from '@dhis2/ui'
```
@@ -1959,11 +1959,11 @@ import { SvgFullscreen16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFullscreen24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFullscreen24 } from '@dhis2/ui-icons'
+import { IconFullscreen24 } from '@dhis2/ui'
```
@@ -1978,11 +1978,11 @@ import { SvgFullscreen24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFullscreenExit16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFullscreenExit16 } from '@dhis2/ui-icons'
+import { IconFullscreenExit16 } from '@dhis2/ui'
```
@@ -1997,11 +1997,11 @@ import { SvgFullscreenExit16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconFullscreenExit24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgFullscreenExit24 } from '@dhis2/ui-icons'
+import { IconFullscreenExit24 } from '@dhis2/ui'
```
@@ -2016,11 +2016,11 @@ import { SvgFullscreenExit24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconHome16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgHome16 } from '@dhis2/ui-icons'
+import { IconHome16 } from '@dhis2/ui'
```
@@ -2035,11 +2035,11 @@ import { SvgHome16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconHome24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgHome24 } from '@dhis2/ui-icons'
+import { IconHome24 } from '@dhis2/ui'
```
@@ -2054,11 +2054,11 @@ import { SvgHome24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconImage16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgImage16 } from '@dhis2/ui-icons'
+import { IconImage16 } from '@dhis2/ui'
```
@@ -2073,11 +2073,11 @@ import { SvgImage16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconImage24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgImage24 } from '@dhis2/ui-icons'
+import { IconImage24 } from '@dhis2/ui'
```
@@ -2092,11 +2092,11 @@ import { SvgImage24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconImportItems24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgImportItems24 } from '@dhis2/ui-icons'
+import { IconImportItems24 } from '@dhis2/ui'
```
@@ -2111,11 +2111,11 @@ import { SvgImportItems24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconInfo16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgInfo16 } from '@dhis2/ui-icons'
+import { IconInfo16 } from '@dhis2/ui'
```
@@ -2130,11 +2130,11 @@ import { SvgInfo16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconInfo24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgInfo24 } from '@dhis2/ui-icons'
+import { IconInfo24 } from '@dhis2/ui'
```
@@ -2149,11 +2149,11 @@ import { SvgInfo24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconInfoFilled16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgInfoFilled16 } from '@dhis2/ui-icons'
+import { IconInfoFilled16 } from '@dhis2/ui'
```
@@ -2168,11 +2168,11 @@ import { SvgInfoFilled16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconInfoFilled24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgInfoFilled24 } from '@dhis2/ui-icons'
+import { IconInfoFilled24 } from '@dhis2/ui'
```
@@ -2187,11 +2187,11 @@ import { SvgInfoFilled24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLaunch16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLaunch16 } from '@dhis2/ui-icons'
+import { IconLaunch16 } from '@dhis2/ui'
```
@@ -2206,11 +2206,11 @@ import { SvgLaunch16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLaunch24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLaunch24 } from '@dhis2/ui-icons'
+import { IconLaunch24 } from '@dhis2/ui'
```
@@ -2225,11 +2225,11 @@ import { SvgLaunch24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLayoutColumns16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLayoutColumns16 } from '@dhis2/ui-icons'
+import { IconLayoutColumns16 } from '@dhis2/ui'
```
@@ -2244,11 +2244,11 @@ import { SvgLayoutColumns16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLayoutColumns24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLayoutColumns24 } from '@dhis2/ui-icons'
+import { IconLayoutColumns24 } from '@dhis2/ui'
```
@@ -2263,11 +2263,11 @@ import { SvgLayoutColumns24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLayoutRows16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLayoutRows16 } from '@dhis2/ui-icons'
+import { IconLayoutRows16 } from '@dhis2/ui'
```
@@ -2282,11 +2282,11 @@ import { SvgLayoutRows16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLayoutRows24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLayoutRows24 } from '@dhis2/ui-icons'
+import { IconLayoutRows24 } from '@dhis2/ui'
```
@@ -2301,11 +2301,11 @@ import { SvgLayoutRows24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLegend16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLegend16 } from '@dhis2/ui-icons'
+import { IconLegend16 } from '@dhis2/ui'
```
@@ -2320,11 +2320,11 @@ import { SvgLegend16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLegend24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLegend24 } from '@dhis2/ui-icons'
+import { IconLegend24 } from '@dhis2/ui'
```
@@ -2339,11 +2339,11 @@ import { SvgLegend24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLink16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLink16 } from '@dhis2/ui-icons'
+import { IconLink16 } from '@dhis2/ui'
```
@@ -2358,11 +2358,11 @@ import { SvgLink16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLink24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLink24 } from '@dhis2/ui-icons'
+import { IconLink24 } from '@dhis2/ui'
```
@@ -2377,11 +2377,11 @@ import { SvgLink24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconList16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgList16 } from '@dhis2/ui-icons'
+import { IconList16 } from '@dhis2/ui'
```
@@ -2396,11 +2396,11 @@ import { SvgList16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconList24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgList24 } from '@dhis2/ui-icons'
+import { IconList24 } from '@dhis2/ui'
```
@@ -2415,11 +2415,11 @@ import { SvgList24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLocation16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLocation16 } from '@dhis2/ui-icons'
+import { IconLocation16 } from '@dhis2/ui'
```
@@ -2434,11 +2434,11 @@ import { SvgLocation16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLocation24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLocation24 } from '@dhis2/ui-icons'
+import { IconLocation24 } from '@dhis2/ui'
```
@@ -2453,11 +2453,11 @@ import { SvgLocation24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLock16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLock16 } from '@dhis2/ui-icons'
+import { IconLock16 } from '@dhis2/ui'
```
@@ -2472,11 +2472,11 @@ import { SvgLock16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLock24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLock24 } from '@dhis2/ui-icons'
+import { IconLock24 } from '@dhis2/ui'
```
@@ -2491,11 +2491,11 @@ import { SvgLock24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLockOpen16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLockOpen16 } from '@dhis2/ui-icons'
+import { IconLockOpen16 } from '@dhis2/ui'
```
@@ -2510,11 +2510,11 @@ import { SvgLockOpen16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLockOpen24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLockOpen24 } from '@dhis2/ui-icons'
+import { IconLockOpen24 } from '@dhis2/ui'
```
@@ -2529,11 +2529,11 @@ import { SvgLockOpen24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLogOut16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLogOut16 } from '@dhis2/ui-icons'
+import { IconLogOut16 } from '@dhis2/ui'
```
@@ -2548,11 +2548,11 @@ import { SvgLogOut16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconLogOut24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgLogOut24 } from '@dhis2/ui-icons'
+import { IconLogOut24 } from '@dhis2/ui'
```
@@ -2567,11 +2567,11 @@ import { SvgLogOut24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMail16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMail16 } from '@dhis2/ui-icons'
+import { IconMail16 } from '@dhis2/ui'
```
@@ -2586,11 +2586,11 @@ import { SvgMail16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMail24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMail24 } from '@dhis2/ui-icons'
+import { IconMail24 } from '@dhis2/ui'
```
@@ -2605,11 +2605,11 @@ import { SvgMail24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMailOpen16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMailOpen16 } from '@dhis2/ui-icons'
+import { IconMailOpen16 } from '@dhis2/ui'
```
@@ -2624,11 +2624,11 @@ import { SvgMailOpen16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMailOpen24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMailOpen24 } from '@dhis2/ui-icons'
+import { IconMailOpen24 } from '@dhis2/ui'
```
@@ -2643,11 +2643,11 @@ import { SvgMailOpen24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMessages16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMessages16 } from '@dhis2/ui-icons'
+import { IconMessages16 } from '@dhis2/ui'
```
@@ -2662,11 +2662,11 @@ import { SvgMessages16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMessages24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMessages24 } from '@dhis2/ui-icons'
+import { IconMessages24 } from '@dhis2/ui'
```
@@ -2681,11 +2681,11 @@ import { SvgMessages24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMore16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMore16 } from '@dhis2/ui-icons'
+import { IconMore16 } from '@dhis2/ui'
```
@@ -2700,11 +2700,11 @@ import { SvgMore16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMore24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMore24 } from '@dhis2/ui-icons'
+import { IconMore24 } from '@dhis2/ui'
```
@@ -2719,11 +2719,11 @@ import { SvgMore24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMove16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMove16 } from '@dhis2/ui-icons'
+import { IconMove16 } from '@dhis2/ui'
```
@@ -2738,11 +2738,11 @@ import { SvgMove16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconMove24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgMove24 } from '@dhis2/ui-icons'
+import { IconMove24 } from '@dhis2/ui'
```
@@ -2757,11 +2757,11 @@ import { SvgMove24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconPushLeft16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgPushLeft16 } from '@dhis2/ui-icons'
+import { IconPushLeft16 } from '@dhis2/ui'
```
@@ -2776,11 +2776,11 @@ import { SvgPushLeft16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconPushLeft24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgPushLeft24 } from '@dhis2/ui-icons'
+import { IconPushLeft24 } from '@dhis2/ui'
```
@@ -2795,11 +2795,11 @@ import { SvgPushLeft24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconPushRight16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgPushRight16 } from '@dhis2/ui-icons'
+import { IconPushRight16 } from '@dhis2/ui'
```
@@ -2814,11 +2814,11 @@ import { SvgPushRight16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconPushRight24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgPushRight24 } from '@dhis2/ui-icons'
+import { IconPushRight24 } from '@dhis2/ui'
```
@@ -2833,11 +2833,11 @@ import { SvgPushRight24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQuestion16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQuestion16 } from '@dhis2/ui-icons'
+import { IconQuestion16 } from '@dhis2/ui'
```
@@ -2852,11 +2852,11 @@ import { SvgQuestion16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQuestion24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQuestion24 } from '@dhis2/ui-icons'
+import { IconQuestion24 } from '@dhis2/ui'
```
@@ -2871,11 +2871,11 @@ import { SvgQuestion24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQuestionFilled16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQuestionFilled16 } from '@dhis2/ui-icons'
+import { IconQuestionFilled16 } from '@dhis2/ui'
```
@@ -2890,11 +2890,11 @@ import { SvgQuestionFilled16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQuestionFilled24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQuestionFilled24 } from '@dhis2/ui-icons'
+import { IconQuestionFilled24 } from '@dhis2/ui'
```
@@ -2909,11 +2909,11 @@ import { SvgQuestionFilled24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQueue16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQueue16 } from '@dhis2/ui-icons'
+import { IconQueue16 } from '@dhis2/ui'
```
@@ -2928,11 +2928,11 @@ import { SvgQueue16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconQueue24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgQueue24 } from '@dhis2/ui-icons'
+import { IconQueue24 } from '@dhis2/ui'
```
@@ -2947,11 +2947,11 @@ import { SvgQueue24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconRedo16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgRedo16 } from '@dhis2/ui-icons'
+import { IconRedo16 } from '@dhis2/ui'
```
@@ -2966,11 +2966,11 @@ import { SvgRedo16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconRedo24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgRedo24 } from '@dhis2/ui-icons'
+import { IconRedo24 } from '@dhis2/ui'
```
@@ -2985,11 +2985,11 @@ import { SvgRedo24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconReorder16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgReorder16 } from '@dhis2/ui-icons'
+import { IconReorder16 } from '@dhis2/ui'
```
@@ -3004,11 +3004,11 @@ import { SvgReorder16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconReorder24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgReorder24 } from '@dhis2/ui-icons'
+import { IconReorder24 } from '@dhis2/ui'
```
@@ -3023,11 +3023,11 @@ import { SvgReorder24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconReply16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgReply16 } from '@dhis2/ui-icons'
+import { IconReply16 } from '@dhis2/ui'
```
@@ -3042,11 +3042,11 @@ import { SvgReply16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconReply24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgReply24 } from '@dhis2/ui-icons'
+import { IconReply24 } from '@dhis2/ui'
```
@@ -3061,11 +3061,11 @@ import { SvgReply24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconRuler16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgRuler16 } from '@dhis2/ui-icons'
+import { IconRuler16 } from '@dhis2/ui'
```
@@ -3080,11 +3080,11 @@ import { SvgRuler16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconRuler24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgRuler24 } from '@dhis2/ui-icons'
+import { IconRuler24 } from '@dhis2/ui'
```
@@ -3099,11 +3099,11 @@ import { SvgRuler24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSave16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSave16 } from '@dhis2/ui-icons'
+import { IconSave16 } from '@dhis2/ui'
```
@@ -3118,11 +3118,11 @@ import { SvgSave16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSave24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSave24 } from '@dhis2/ui-icons'
+import { IconSave24 } from '@dhis2/ui'
```
@@ -3137,11 +3137,11 @@ import { SvgSave24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSearch16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSearch16 } from '@dhis2/ui-icons'
+import { IconSearch16 } from '@dhis2/ui'
```
@@ -3156,11 +3156,11 @@ import { SvgSearch16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSearch24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSearch24 } from '@dhis2/ui-icons'
+import { IconSearch24 } from '@dhis2/ui'
```
@@ -3175,11 +3175,11 @@ import { SvgSearch24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSettings16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSettings16 } from '@dhis2/ui-icons'
+import { IconSettings16 } from '@dhis2/ui'
```
@@ -3194,11 +3194,11 @@ import { SvgSettings16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSettings24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSettings24 } from '@dhis2/ui-icons'
+import { IconSettings24 } from '@dhis2/ui'
```
@@ -3213,11 +3213,11 @@ import { SvgSettings24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconShare16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgShare16 } from '@dhis2/ui-icons'
+import { IconShare16 } from '@dhis2/ui'
```
@@ -3232,11 +3232,11 @@ import { SvgShare16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconShare24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgShare24 } from '@dhis2/ui-icons'
+import { IconShare24 } from '@dhis2/ui'
```
@@ -3251,11 +3251,11 @@ import { SvgShare24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconStar16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgStar16 } from '@dhis2/ui-icons'
+import { IconStar16 } from '@dhis2/ui'
```
@@ -3270,11 +3270,11 @@ import { SvgStar16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconStar24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgStar24 } from '@dhis2/ui-icons'
+import { IconStar24 } from '@dhis2/ui'
```
@@ -3289,11 +3289,11 @@ import { SvgStar24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconStarFilled16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgStarFilled16 } from '@dhis2/ui-icons'
+import { IconStarFilled16 } from '@dhis2/ui'
```
@@ -3308,11 +3308,11 @@ import { SvgStarFilled16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconStarFilled24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgStarFilled24 } from '@dhis2/ui-icons'
+import { IconStarFilled24 } from '@dhis2/ui'
```
@@ -3327,11 +3327,11 @@ import { SvgStarFilled24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubscribe16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubscribe16 } from '@dhis2/ui-icons'
+import { IconSubscribe16 } from '@dhis2/ui'
```
@@ -3346,11 +3346,11 @@ import { SvgSubscribe16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubscribe24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubscribe24 } from '@dhis2/ui-icons'
+import { IconSubscribe24 } from '@dhis2/ui'
```
@@ -3365,11 +3365,11 @@ import { SvgSubscribe24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubscribeOff16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubscribeOff16 } from '@dhis2/ui-icons'
+import { IconSubscribeOff16 } from '@dhis2/ui'
```
@@ -3384,11 +3384,11 @@ import { SvgSubscribeOff16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubscribeOff24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubscribeOff24 } from '@dhis2/ui-icons'
+import { IconSubscribeOff24 } from '@dhis2/ui'
```
@@ -3403,11 +3403,11 @@ import { SvgSubscribeOff24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubtract16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubtract16 } from '@dhis2/ui-icons'
+import { IconSubtract16 } from '@dhis2/ui'
```
@@ -3422,11 +3422,11 @@ import { SvgSubtract16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubtract24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubtract24 } from '@dhis2/ui-icons'
+import { IconSubtract24 } from '@dhis2/ui'
```
@@ -3441,11 +3441,11 @@ import { SvgSubtract24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubtractCircle16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubtractCircle16 } from '@dhis2/ui-icons'
+import { IconSubtractCircle16 } from '@dhis2/ui'
```
@@ -3460,11 +3460,11 @@ import { SvgSubtractCircle16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSubtractCircle24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSubtractCircle24 } from '@dhis2/ui-icons'
+import { IconSubtractCircle24 } from '@dhis2/ui'
```
@@ -3479,11 +3479,11 @@ import { SvgSubtractCircle24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSync16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSync16 } from '@dhis2/ui-icons'
+import { IconSync16 } from '@dhis2/ui'
```
@@ -3498,11 +3498,11 @@ import { SvgSync16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconSync24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgSync24 } from '@dhis2/ui-icons'
+import { IconSync24 } from '@dhis2/ui'
```
@@ -3517,11 +3517,11 @@ import { SvgSync24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTable16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTable16 } from '@dhis2/ui-icons'
+import { IconTable16 } from '@dhis2/ui'
```
@@ -3536,11 +3536,11 @@ import { SvgTable16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTable24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTable24 } from '@dhis2/ui-icons'
+import { IconTable24 } from '@dhis2/ui'
```
@@ -3555,11 +3555,11 @@ import { SvgTable24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTerminalWindow16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTerminalWindow16 } from '@dhis2/ui-icons'
+import { IconTerminalWindow16 } from '@dhis2/ui'
```
@@ -3574,11 +3574,11 @@ import { SvgTerminalWindow16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTerminalWindow24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTerminalWindow24 } from '@dhis2/ui-icons'
+import { IconTerminalWindow24 } from '@dhis2/ui'
```
@@ -3593,11 +3593,11 @@ import { SvgTerminalWindow24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextBold16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextBold16 } from '@dhis2/ui-icons'
+import { IconTextBold16 } from '@dhis2/ui'
```
@@ -3612,11 +3612,11 @@ import { SvgTextBold16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextBold24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextBold24 } from '@dhis2/ui-icons'
+import { IconTextBold24 } from '@dhis2/ui'
```
@@ -3631,11 +3631,11 @@ import { SvgTextBold24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextBox16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextBox16 } from '@dhis2/ui-icons'
+import { IconTextBox16 } from '@dhis2/ui'
```
@@ -3650,11 +3650,11 @@ import { SvgTextBox16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextBox24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextBox24 } from '@dhis2/ui-icons'
+import { IconTextBox24 } from '@dhis2/ui'
```
@@ -3669,11 +3669,11 @@ import { SvgTextBox24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextHeading16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextHeading16 } from '@dhis2/ui-icons'
+import { IconTextHeading16 } from '@dhis2/ui'
```
@@ -3688,11 +3688,11 @@ import { SvgTextHeading16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextHeading24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextHeading24 } from '@dhis2/ui-icons'
+import { IconTextHeading24 } from '@dhis2/ui'
```
@@ -3707,11 +3707,11 @@ import { SvgTextHeading24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextItalic16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextItalic16 } from '@dhis2/ui-icons'
+import { IconTextItalic16 } from '@dhis2/ui'
```
@@ -3726,11 +3726,11 @@ import { SvgTextItalic16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextItalic24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextItalic24 } from '@dhis2/ui-icons'
+import { IconTextItalic24 } from '@dhis2/ui'
```
@@ -3745,11 +3745,11 @@ import { SvgTextItalic24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextListOrdered16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextListOrdered16 } from '@dhis2/ui-icons'
+import { IconTextListOrdered16 } from '@dhis2/ui'
```
@@ -3764,11 +3764,11 @@ import { SvgTextListOrdered16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextListOrdered24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextListOrdered24 } from '@dhis2/ui-icons'
+import { IconTextListOrdered24 } from '@dhis2/ui'
```
@@ -3783,11 +3783,11 @@ import { SvgTextListOrdered24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextListUnordered16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextListUnordered16 } from '@dhis2/ui-icons'
+import { IconTextListUnordered16 } from '@dhis2/ui'
```
@@ -3802,11 +3802,11 @@ import { SvgTextListUnordered16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTextListUnordered24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTextListUnordered24 } from '@dhis2/ui-icons'
+import { IconTextListUnordered24 } from '@dhis2/ui'
```
@@ -3821,11 +3821,11 @@ import { SvgTextListUnordered24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconThumbDown16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgThumbDown16 } from '@dhis2/ui-icons'
+import { IconThumbDown16 } from '@dhis2/ui'
```
@@ -3840,11 +3840,11 @@ import { SvgThumbDown16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconThumbDown24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgThumbDown24 } from '@dhis2/ui-icons'
+import { IconThumbDown24 } from '@dhis2/ui'
```
@@ -3859,11 +3859,11 @@ import { SvgThumbDown24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconThumbUp16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgThumbUp16 } from '@dhis2/ui-icons'
+import { IconThumbUp16 } from '@dhis2/ui'
```
@@ -3878,11 +3878,11 @@ import { SvgThumbUp16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconThumbUp24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgThumbUp24 } from '@dhis2/ui-icons'
+import { IconThumbUp24 } from '@dhis2/ui'
```
@@ -3897,11 +3897,11 @@ import { SvgThumbUp24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTranslate16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTranslate16 } from '@dhis2/ui-icons'
+import { IconTranslate16 } from '@dhis2/ui'
```
@@ -3916,11 +3916,11 @@ import { SvgTranslate16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconTranslate24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgTranslate24 } from '@dhis2/ui-icons'
+import { IconTranslate24 } from '@dhis2/ui'
```
@@ -3935,11 +3935,11 @@ import { SvgTranslate24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUndo16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUndo16 } from '@dhis2/ui-icons'
+import { IconUndo16 } from '@dhis2/ui'
```
@@ -3954,11 +3954,11 @@ import { SvgUndo16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUndo24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUndo24 } from '@dhis2/ui-icons'
+import { IconUndo24 } from '@dhis2/ui'
```
@@ -3973,11 +3973,11 @@ import { SvgUndo24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUpload16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUpload16 } from '@dhis2/ui-icons'
+import { IconUpload16 } from '@dhis2/ui'
```
@@ -3992,11 +3992,11 @@ import { SvgUpload16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUpload24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUpload24 } from '@dhis2/ui-icons'
+import { IconUpload24 } from '@dhis2/ui'
```
@@ -4011,11 +4011,11 @@ import { SvgUpload24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUser16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUser16 } from '@dhis2/ui-icons'
+import { IconUser16 } from '@dhis2/ui'
```
@@ -4030,11 +4030,11 @@ import { SvgUser16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUser24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUser24 } from '@dhis2/ui-icons'
+import { IconUser24 } from '@dhis2/ui'
```
@@ -4049,11 +4049,11 @@ import { SvgUser24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUserGroup16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUserGroup16 } from '@dhis2/ui-icons'
+import { IconUserGroup16 } from '@dhis2/ui'
```
@@ -4068,11 +4068,11 @@ import { SvgUserGroup16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconUserGroup24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgUserGroup24 } from '@dhis2/ui-icons'
+import { IconUserGroup24 } from '@dhis2/ui'
```
@@ -4087,11 +4087,11 @@ import { SvgUserGroup24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconView16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgView16 } from '@dhis2/ui-icons'
+import { IconView16 } from '@dhis2/ui'
```
@@ -4106,11 +4106,11 @@ import { SvgView16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconView24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgView24 } from '@dhis2/ui-icons'
+import { IconView24 } from '@dhis2/ui'
```
@@ -4125,11 +4125,11 @@ import { SvgView24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconViewOff16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgViewOff16 } from '@dhis2/ui-icons'
+import { IconViewOff16 } from '@dhis2/ui'
```
@@ -4144,11 +4144,11 @@ import { SvgViewOff16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconViewOff24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgViewOff24 } from '@dhis2/ui-icons'
+import { IconViewOff24 } from '@dhis2/ui'
```
@@ -4163,11 +4163,11 @@ import { SvgViewOff24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationArea16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationArea16 } from '@dhis2/ui-icons'
+import { IconVisualizationArea16 } from '@dhis2/ui'
```
@@ -4182,11 +4182,11 @@ import { SvgVisualizationArea16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationArea24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationArea24 } from '@dhis2/ui-icons'
+import { IconVisualizationArea24 } from '@dhis2/ui'
```
@@ -4201,11 +4201,11 @@ import { SvgVisualizationArea24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationAreaStacked16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationAreaStacked16 } from '@dhis2/ui-icons'
+import { IconVisualizationAreaStacked16 } from '@dhis2/ui'
```
@@ -4220,11 +4220,11 @@ import { SvgVisualizationAreaStacked16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationAreaStacked24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationAreaStacked24 } from '@dhis2/ui-icons'
+import { IconVisualizationAreaStacked24 } from '@dhis2/ui'
```
@@ -4239,11 +4239,11 @@ import { SvgVisualizationAreaStacked24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationBar16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationBar16 } from '@dhis2/ui-icons'
+import { IconVisualizationBar16 } from '@dhis2/ui'
```
@@ -4258,11 +4258,11 @@ import { SvgVisualizationBar16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationBar24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationBar24 } from '@dhis2/ui-icons'
+import { IconVisualizationBar24 } from '@dhis2/ui'
```
@@ -4277,11 +4277,11 @@ import { SvgVisualizationBar24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationBarStacked16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationBarStacked16 } from '@dhis2/ui-icons'
+import { IconVisualizationBarStacked16 } from '@dhis2/ui'
```
@@ -4296,11 +4296,11 @@ import { SvgVisualizationBarStacked16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationBarStacked24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationBarStacked24 } from '@dhis2/ui-icons'
+import { IconVisualizationBarStacked24 } from '@dhis2/ui'
```
@@ -4315,11 +4315,11 @@ import { SvgVisualizationBarStacked24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumn16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumn16 } from '@dhis2/ui-icons'
+import { IconVisualizationColumn16 } from '@dhis2/ui'
```
@@ -4334,11 +4334,11 @@ import { SvgVisualizationColumn16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumn24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumn24 } from '@dhis2/ui-icons'
+import { IconVisualizationColumn24 } from '@dhis2/ui'
```
@@ -4353,11 +4353,11 @@ import { SvgVisualizationColumn24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumnMulti16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumnMulti16 } from '@dhis2/ui-icons'
+import { IconVisualizationColumnMulti16 } from '@dhis2/ui'
```
@@ -4372,11 +4372,11 @@ import { SvgVisualizationColumnMulti16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumnMulti24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumnMulti24 } from '@dhis2/ui-icons'
+import { IconVisualizationColumnMulti24 } from '@dhis2/ui'
```
@@ -4391,11 +4391,11 @@ import { SvgVisualizationColumnMulti24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumnStacked16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumnStacked16 } from '@dhis2/ui-icons'
+import { IconVisualizationColumnStacked16 } from '@dhis2/ui'
```
@@ -4410,11 +4410,11 @@ import { SvgVisualizationColumnStacked16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationColumnStacked24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationColumnStacked24 } from '@dhis2/ui-icons'
+import { IconVisualizationColumnStacked24 } from '@dhis2/ui'
```
@@ -4429,11 +4429,11 @@ import { SvgVisualizationColumnStacked24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationGauge16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationGauge16 } from '@dhis2/ui-icons'
+import { IconVisualizationGauge16 } from '@dhis2/ui'
```
@@ -4448,11 +4448,11 @@ import { SvgVisualizationGauge16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationGauge24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationGauge24 } from '@dhis2/ui-icons'
+import { IconVisualizationGauge24 } from '@dhis2/ui'
```
@@ -4467,11 +4467,11 @@ import { SvgVisualizationGauge24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLine16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLine16 } from '@dhis2/ui-icons'
+import { IconVisualizationLine16 } from '@dhis2/ui'
```
@@ -4486,11 +4486,11 @@ import { SvgVisualizationLine16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLine24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLine24 } from '@dhis2/ui-icons'
+import { IconVisualizationLine24 } from '@dhis2/ui'
```
@@ -4505,11 +4505,11 @@ import { SvgVisualizationLine24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLineMulti16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLineMulti16 } from '@dhis2/ui-icons'
+import { IconVisualizationLineMulti16 } from '@dhis2/ui'
```
@@ -4524,11 +4524,11 @@ import { SvgVisualizationLineMulti16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLineMulti24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLineMulti24 } from '@dhis2/ui-icons'
+import { IconVisualizationLineMulti24 } from '@dhis2/ui'
```
@@ -4543,11 +4543,11 @@ import { SvgVisualizationLineMulti24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLinelist16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLinelist16 } from '@dhis2/ui-icons'
+import { IconVisualizationLinelist16 } from '@dhis2/ui'
```
@@ -4562,11 +4562,11 @@ import { SvgVisualizationLinelist16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationLinelist24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationLinelist24 } from '@dhis2/ui-icons'
+import { IconVisualizationLinelist24 } from '@dhis2/ui'
```
@@ -4581,11 +4581,11 @@ import { SvgVisualizationLinelist24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationPie16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationPie16 } from '@dhis2/ui-icons'
+import { IconVisualizationPie16 } from '@dhis2/ui'
```
@@ -4600,11 +4600,11 @@ import { SvgVisualizationPie16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationPie24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationPie24 } from '@dhis2/ui-icons'
+import { IconVisualizationPie24 } from '@dhis2/ui'
```
@@ -4619,11 +4619,11 @@ import { SvgVisualizationPie24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationPivotTable16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationPivotTable16 } from '@dhis2/ui-icons'
+import { IconVisualizationPivotTable16 } from '@dhis2/ui'
```
@@ -4638,11 +4638,11 @@ import { SvgVisualizationPivotTable16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationPivotTable24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationPivotTable24 } from '@dhis2/ui-icons'
+import { IconVisualizationPivotTable24 } from '@dhis2/ui'
```
@@ -4657,11 +4657,11 @@ import { SvgVisualizationPivotTable24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationRadar16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationRadar16 } from '@dhis2/ui-icons'
+import { IconVisualizationRadar16 } from '@dhis2/ui'
```
@@ -4676,11 +4676,11 @@ import { SvgVisualizationRadar16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationRadar24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationRadar24 } from '@dhis2/ui-icons'
+import { IconVisualizationRadar24 } from '@dhis2/ui'
```
@@ -4695,11 +4695,11 @@ import { SvgVisualizationRadar24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationScatter16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationScatter16 } from '@dhis2/ui-icons'
+import { IconVisualizationScatter16 } from '@dhis2/ui'
```
@@ -4714,11 +4714,11 @@ import { SvgVisualizationScatter16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationScatter24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationScatter24 } from '@dhis2/ui-icons'
+import { IconVisualizationScatter24 } from '@dhis2/ui'
```
@@ -4733,11 +4733,11 @@ import { SvgVisualizationScatter24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationSingleValue16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationSingleValue16 } from '@dhis2/ui-icons'
+import { IconVisualizationSingleValue16 } from '@dhis2/ui'
```
@@ -4752,11 +4752,11 @@ import { SvgVisualizationSingleValue16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconVisualizationSingleValue24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgVisualizationSingleValue24 } from '@dhis2/ui-icons'
+import { IconVisualizationSingleValue24 } from '@dhis2/ui'
```
@@ -4771,11 +4771,11 @@ import { SvgVisualizationSingleValue24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWarning16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWarning16 } from '@dhis2/ui-icons'
+import { IconWarning16 } from '@dhis2/ui'
```
@@ -4790,11 +4790,11 @@ import { SvgWarning16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWarning24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWarning24 } from '@dhis2/ui-icons'
+import { IconWarning24 } from '@dhis2/ui'
```
@@ -4809,11 +4809,11 @@ import { SvgWarning24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWarningFilled16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWarningFilled16 } from '@dhis2/ui-icons'
+import { IconWarningFilled16 } from '@dhis2/ui'
```
@@ -4828,11 +4828,11 @@ import { SvgWarningFilled16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWarningFilled24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWarningFilled24 } from '@dhis2/ui-icons'
+import { IconWarningFilled24 } from '@dhis2/ui'
```
@@ -4847,11 +4847,11 @@ import { SvgWarningFilled24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWindow16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWindow16 } from '@dhis2/ui-icons'
+import { IconWindow16 } from '@dhis2/ui'
```
@@ -4866,11 +4866,11 @@ import { SvgWindow16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWindow24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWindow24 } from '@dhis2/ui-icons'
+import { IconWindow24 } from '@dhis2/ui'
```
@@ -4885,11 +4885,11 @@ import { SvgWindow24 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWorld16`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWorld16 } from '@dhis2/ui-icons'
+import { IconWorld16 } from '@dhis2/ui'
```
@@ -4904,11 +4904,11 @@ import { SvgWorld16 } from '@dhis2/ui-icons'
#### Usage
-**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+To use `IconWorld24`, you can import the component from the `@dhis2/ui` library
```js
-import { SvgWorld24 } from '@dhis2/ui-icons'
+import { IconWorld24 } from '@dhis2/ui'
```
diff --git a/scripts/generate-api-docs.js b/scripts/generate-api-docs.js
index 743c92fb5d..7b340caa4c 100755
--- a/scripts/generate-api-docs.js
+++ b/scripts/generate-api-docs.js
@@ -11,7 +11,7 @@ const RE_OBJECTOF =
/(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/
const format_type = (type) => {
- switch (type.name.toLowerCase()) {
+ switch (type?.name.toLowerCase()) {
case 'instanceof': {
return `instanceOf(${type.value})`
}
@@ -66,7 +66,7 @@ const format_type = (type) => {
return JSON.stringify(rst, null, 2).replace(/\n/g, ' ')
}
default: {
- return `${type.name}`
+ return `${type?.name}`
}
}
}
@@ -76,12 +76,16 @@ const format = ({ ast, pkg }) => {
table += `### ${ast.displayName}\n\n`
if (pkg?.name) {
+ // alter Svg to Icon as the actually exported value is Icon, not Svg
+ const toDisplayName =
+ ast.displayName.indexOf('Svg') !== -1
+ ? ast.displayName.replace('Svg', 'Icon')
+ : ast.displayName
table += '#### Usage\n\n'
- table +=
- '**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.\n\n'
+ table += `To use \`${toDisplayName}\`, you can import the component from the \`@dhis2/ui\` library \n\n`
table += `
\`\`\`js
-import { ${ast.displayName} } from '${pkg.name}'
+import { ${toDisplayName} } from '@dhis2/ui'
\`\`\`\n\n
`
}
@@ -96,7 +100,7 @@ import { ${ast.displayName} } from '${pkg.name}'
defaultValue ? `\`${defaultValue.value}\`` : ''
}`,
required: `${required ? '*' : ''}`,
- description: description.replace(/\n/g, ' '),
+ description: description?.replace(/\n/g, ' ') ?? '',
type: `${format_type(type)}`,
})
)