From df7eb24df9c426090f0cf8ef4cf03b80d420d178 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Tue, 2 Jan 2024 15:49:50 +0000 Subject: [PATCH 01/28] docs: change import/ notice about import --- collections/forms/API.md | 36 +- collections/ui/API.md | 224 ++--- components/alert/API.md | 8 +- components/box/API.md | 4 +- components/button/API.md | 16 +- components/calendar/API.md | 4 +- components/card/API.md | 4 +- components/center/API.md | 4 +- components/checkbox/API.md | 8 +- components/chip/API.md | 4 +- components/cover/API.md | 4 +- components/css/API.md | 8 +- components/divider/API.md | 4 +- components/field/API.md | 12 +- components/file-input/API.md | 24 +- components/header-bar/API.md | 4 +- components/help/API.md | 4 +- components/input/API.md | 8 +- components/intersection-detector/API.md | 4 +- components/label/API.md | 4 +- components/layer/API.md | 4 +- components/legend/API.md | 4 +- components/loader/API.md | 8 +- components/logo/API.md | 16 +- components/menu/API.md | 20 +- components/modal/API.md | 16 +- components/node/API.md | 4 +- components/notice-box/API.md | 4 +- components/organisation-unit-tree/API.md | 12 +- components/pagination/API.md | 4 +- components/popover/API.md | 4 +- components/popper/API.md | 4 +- components/radio/API.md | 4 +- components/required/API.md | 4 +- components/segmented-control/API.md | 4 +- components/select/API.md | 24 +- components/selector-bar/API.md | 8 +- components/sharing-dialog/API.md | 4 +- components/status-icon/API.md | 4 +- components/switch/API.md | 8 +- components/tab/API.md | 8 +- components/table/API.md | 104 +-- components/tag/API.md | 4 +- components/text-area/API.md | 8 +- components/tooltip/API.md | 4 +- components/transfer/API.md | 8 +- components/user-avatar/API.md | 4 +- docs/docs/components/alertbar.md | 8 +- icons/API.md | 1036 +++++++++++----------- scripts/generate-api-docs.js | 5 +- 50 files changed, 868 insertions(+), 869 deletions(-) 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..adeb2567f7 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 @@ -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 @@ -235,7 +235,7 @@ import { Calendar } from '@dhis2/ui' #### 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 +255,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 +276,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 +311,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 +348,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 +380,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 +402,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 +415,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 +437,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 +458,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 +487,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 +516,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 +536,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 +571,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 +612,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 +637,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 +656,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 +676,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 +697,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 +710,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 +733,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 +774,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 +819,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 +842,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 +865,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 +891,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 +912,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 +935,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 +958,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 +977,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 +996,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 +1015,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 +1034,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 +1057,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 +1078,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 +1098,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 +1132,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 +1154,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 +1180,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 +1199,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 +1219,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 +1238,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 +1263,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 +1287,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 +1306,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 +1324,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 +1361,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 +1394,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 +1431,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 +1459,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 +1486,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 +1520,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 +1538,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 +1558,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 +1586,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 +1608,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 +1652,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 +1701,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 +1725,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 +1753,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 +1777,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 +1821,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 +1870,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 +1894,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 +1917,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 +1945,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 +2006,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 +2026,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 +2062,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 +2099,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 +2123,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 +2145,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 +2183,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 +2208,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 +2228,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 +2250,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 +2276,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 +2296,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 +2316,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 +2336,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 +2356,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 +2377,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 +2397,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 +2418,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 +2442,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 +2466,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 +2487,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 +2508,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 +2530,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 +2552,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 +2574,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 +2611,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 +2637,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 +2659,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 +2680,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 +2701,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 +2724,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 +2748,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 +2774,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 +2813,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 +2856,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 +2881,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 +2906,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 +2965,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..23e669859f 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' ``` @@ -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/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..cc8e8edee3 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' ``` 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..dca5c6800b 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 @@ -20,9 +20,9 @@ An alert bar communicates something to the user by showing a prominent, floating ### When to use -- **Tell the user about something important**. Alert bars should only be used for information the user needs to know about. -- **To inform without blocking**. An alert bar doesn't block the rest of the page, so it should be used to communicate when the user doesn't need to be pulled out of a workflow. -- **Confirm important actions**. A successful alert bar can tell the user that something was saved successfully without stopping them from moving on. +- **Tell the user about something important**. Alert bars should only be used for information the user needs to know about. +- **To inform without blocking**. An alert bar doesn't block the rest of the page, so it should be used to communicate when the user doesn't need to be pulled out of a workflow. +- **Confirm important actions**. A successful alert bar can tell the user that something was saved successfully without stopping them from moving on. ### When not to use diff --git a/icons/API.md b/icons/API.md index 3fe7b76935..f6d64ab994 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 `SvgAdd16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAdd16 } from '@dhis2/ui-icons' +import { SvgAdd16 } 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 `SvgAdd24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAdd24 } from '@dhis2/ui-icons' +import { SvgAdd24 } 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 `SvgAddCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAddCircle16 } from '@dhis2/ui-icons' +import { SvgAddCircle16 } 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 `SvgAddCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAddCircle24 } from '@dhis2/ui-icons' +import { SvgAddCircle24 } 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 `SvgApps16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgApps16 } from '@dhis2/ui-icons' +import { SvgApps16 } 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 `SvgApps24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgApps24 } from '@dhis2/ui-icons' +import { SvgApps24 } 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 `SvgArchive16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArchive16 } from '@dhis2/ui-icons' +import { SvgArchive16 } 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 `SvgArchive24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArchive24 } from '@dhis2/ui-icons' +import { SvgArchive24 } 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 `SvgArrowDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowDown16 } from '@dhis2/ui-icons' +import { SvgArrowDown16 } 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 `SvgArrowDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowDown24 } from '@dhis2/ui-icons' +import { SvgArrowDown24 } 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 `SvgArrowLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeft16 } from '@dhis2/ui-icons' +import { SvgArrowLeft16 } 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 `SvgArrowLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeft24 } from '@dhis2/ui-icons' +import { SvgArrowLeft24 } 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 `SvgArrowLeftMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeftMulti16 } from '@dhis2/ui-icons' +import { SvgArrowLeftMulti16 } 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 `SvgArrowLeftMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeftMulti24 } from '@dhis2/ui-icons' +import { SvgArrowLeftMulti24 } 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 `SvgArrowRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRight16 } from '@dhis2/ui-icons' +import { SvgArrowRight16 } 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 `SvgArrowRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRight24 } from '@dhis2/ui-icons' +import { SvgArrowRight24 } 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 `SvgArrowRightMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRightMulti16 } from '@dhis2/ui-icons' +import { SvgArrowRightMulti16 } 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 `SvgArrowRightMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRightMulti24 } from '@dhis2/ui-icons' +import { SvgArrowRightMulti24 } 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 `SvgArrowUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowUp16 } from '@dhis2/ui-icons' +import { SvgArrowUp16 } 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 `SvgArrowUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowUp24 } from '@dhis2/ui-icons' +import { SvgArrowUp24 } 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 `SvgAt16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAt16 } from '@dhis2/ui-icons' +import { SvgAt16 } 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 `SvgAt24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAt24 } from '@dhis2/ui-icons' +import { SvgAt24 } 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 `SvgAttachment16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAttachment16 } from '@dhis2/ui-icons' +import { SvgAttachment16 } 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 `SvgAttachment24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAttachment24 } from '@dhis2/ui-icons' +import { SvgAttachment24 } 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 `SvgBlock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgBlock16 } from '@dhis2/ui-icons' +import { SvgBlock16 } 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 `SvgBlock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgBlock24 } from '@dhis2/ui-icons' +import { SvgBlock24 } 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 `SvgCalendar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCalendar16 } from '@dhis2/ui-icons' +import { SvgCalendar16 } 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 `SvgCalendar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCalendar24 } from '@dhis2/ui-icons' +import { SvgCalendar24 } 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 `SvgCheckmark12`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark12 } from '@dhis2/ui-icons' +import { SvgCheckmark12 } 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 `SvgCheckmark16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark16 } from '@dhis2/ui-icons' +import { SvgCheckmark16 } 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 `SvgCheckmark24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark24 } from '@dhis2/ui-icons' +import { SvgCheckmark24 } 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 `SvgCheckmarkCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmarkCircle16 } from '@dhis2/ui-icons' +import { SvgCheckmarkCircle16 } 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 `SvgCheckmarkCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmarkCircle24 } from '@dhis2/ui-icons' +import { SvgCheckmarkCircle24 } 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 `SvgChevronDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronDown16 } from '@dhis2/ui-icons' +import { SvgChevronDown16 } 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 `SvgChevronDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronDown24 } from '@dhis2/ui-icons' +import { SvgChevronDown24 } 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 `SvgChevronLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronLeft16 } from '@dhis2/ui-icons' +import { SvgChevronLeft16 } 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 `SvgChevronLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronLeft24 } from '@dhis2/ui-icons' +import { SvgChevronLeft24 } 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 `SvgChevronRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronRight16 } from '@dhis2/ui-icons' +import { SvgChevronRight16 } 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 `SvgChevronRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronRight24 } from '@dhis2/ui-icons' +import { SvgChevronRight24 } 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 `SvgChevronUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronUp16 } from '@dhis2/ui-icons' +import { SvgChevronUp16 } 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 `SvgChevronUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronUp24 } from '@dhis2/ui-icons' +import { SvgChevronUp24 } 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 `SvgClock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClock16 } from '@dhis2/ui-icons' +import { SvgClock16 } 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 `SvgClock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClock24 } from '@dhis2/ui-icons' +import { SvgClock24 } 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 `SvgClockHistory16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClockHistory16 } from '@dhis2/ui-icons' +import { SvgClockHistory16 } 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 `SvgClockHistory24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClockHistory24 } from '@dhis2/ui-icons' +import { SvgClockHistory24 } 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 `SvgColor16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgColor16 } from '@dhis2/ui-icons' +import { SvgColor16 } 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 `SvgColor24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgColor24 } from '@dhis2/ui-icons' +import { SvgColor24 } 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 `SvgCopy16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCopy16 } from '@dhis2/ui-icons' +import { SvgCopy16 } 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 `SvgCopy24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCopy24 } from '@dhis2/ui-icons' +import { SvgCopy24 } 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 `SvgCross16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCross16 } from '@dhis2/ui-icons' +import { SvgCross16 } 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 `SvgCross24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCross24 } from '@dhis2/ui-icons' +import { SvgCross24 } 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 `SvgDashboardWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDashboardWindow16 } from '@dhis2/ui-icons' +import { SvgDashboardWindow16 } 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 `SvgDashboardWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDashboardWindow24 } from '@dhis2/ui-icons' +import { SvgDashboardWindow24 } 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 `SvgDataInteger16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataInteger16 } from '@dhis2/ui-icons' +import { SvgDataInteger16 } 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 `SvgDataInteger24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataInteger24 } from '@dhis2/ui-icons' +import { SvgDataInteger24 } 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 `SvgDataString16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataString16 } from '@dhis2/ui-icons' +import { SvgDataString16 } 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 `SvgDataString24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataString24 } from '@dhis2/ui-icons' +import { SvgDataString24 } 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 `SvgDelete16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDelete16 } from '@dhis2/ui-icons' +import { SvgDelete16 } 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 `SvgDelete24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDelete24 } from '@dhis2/ui-icons' +import { SvgDelete24 } 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 `SvgDimensionCategoryOptionGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionCategoryOptionGroupset16 } from '@dhis2/ui-icons' +import { SvgDimensionCategoryOptionGroupset16 } 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 `SvgDimensionData16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionData16 } from '@dhis2/ui-icons' +import { SvgDimensionData16 } 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 `SvgDimensionDataElementGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionDataElementGroupset16 } from '@dhis2/ui-icons' +import { SvgDimensionDataElementGroupset16 } 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 `SvgDimensionDataSet16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionDataSet16 } from '@dhis2/ui-icons' +import { SvgDimensionDataSet16 } 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 `SvgDimensionEventDataItem16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionEventDataItem16 } from '@dhis2/ui-icons' +import { SvgDimensionEventDataItem16 } 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 `SvgDimensionIndicator16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionIndicator16 } from '@dhis2/ui-icons' +import { SvgDimensionIndicator16 } 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 `SvgDimensionOrgUnit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionOrgUnit16 } from '@dhis2/ui-icons' +import { SvgDimensionOrgUnit16 } 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 `SvgDimensionOrgUnitGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionOrgUnitGroupset16 } from '@dhis2/ui-icons' +import { SvgDimensionOrgUnitGroupset16 } 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 `SvgDimensionProgramIndicator16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionProgramIndicator16 } from '@dhis2/ui-icons' +import { SvgDimensionProgramIndicator16 } 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 `SvgDimensionValidationRule16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionValidationRule16 } from '@dhis2/ui-icons' +import { SvgDimensionValidationRule16 } 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 `SvgDirectionNorth16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDirectionNorth16 } from '@dhis2/ui-icons' +import { SvgDirectionNorth16 } 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 `SvgDirectionNorth24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDirectionNorth24 } from '@dhis2/ui-icons' +import { SvgDirectionNorth24 } 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 `SvgDownload16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDownload16 } from '@dhis2/ui-icons' +import { SvgDownload16 } 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 `SvgDownload24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDownload24 } from '@dhis2/ui-icons' +import { SvgDownload24 } 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 `SvgDragHandle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDragHandle16 } from '@dhis2/ui-icons' +import { SvgDragHandle16 } 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 `SvgDragHandle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDragHandle24 } from '@dhis2/ui-icons' +import { SvgDragHandle24 } 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 `SvgDuplicate16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDuplicate16 } from '@dhis2/ui-icons' +import { SvgDuplicate16 } 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 `SvgDuplicate24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDuplicate24 } from '@dhis2/ui-icons' +import { SvgDuplicate24 } 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 `SvgEdit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEdit16 } from '@dhis2/ui-icons' +import { SvgEdit16 } 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 `SvgEdit24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEdit24 } from '@dhis2/ui-icons' +import { SvgEdit24 } 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 `SvgEditItems16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEditItems16 } from '@dhis2/ui-icons' +import { SvgEditItems16 } 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 `SvgEditItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEditItems24 } from '@dhis2/ui-icons' +import { SvgEditItems24 } 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 `SvgEmptyFrame16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEmptyFrame16 } from '@dhis2/ui-icons' +import { SvgEmptyFrame16 } 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 `SvgEmptyFrame24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEmptyFrame24 } from '@dhis2/ui-icons' +import { SvgEmptyFrame24 } 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 `SvgError16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgError16 } from '@dhis2/ui-icons' +import { SvgError16 } 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 `SvgError24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgError24 } from '@dhis2/ui-icons' +import { SvgError24 } 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 `SvgErrorFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgErrorFilled16 } from '@dhis2/ui-icons' +import { SvgErrorFilled16 } 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 `SvgErrorFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgErrorFilled24 } from '@dhis2/ui-icons' +import { SvgErrorFilled24 } 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 `SvgExportItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgExportItems24 } from '@dhis2/ui-icons' +import { SvgExportItems24 } 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 `SvgFaceAdd16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFaceAdd16 } from '@dhis2/ui-icons' +import { SvgFaceAdd16 } 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 `SvgFaceAdd24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFaceAdd24 } from '@dhis2/ui-icons' +import { SvgFaceAdd24 } 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 `SvgFile16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFile16 } from '@dhis2/ui-icons' +import { SvgFile16 } 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 `SvgFile24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFile24 } from '@dhis2/ui-icons' +import { SvgFile24 } 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 `SvgFileDocument16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFileDocument16 } from '@dhis2/ui-icons' +import { SvgFileDocument16 } 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 `SvgFileDocument24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFileDocument24 } from '@dhis2/ui-icons' +import { SvgFileDocument24 } 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 `SvgFilter16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFilter16 } from '@dhis2/ui-icons' +import { SvgFilter16 } 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 `SvgFilter24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFilter24 } from '@dhis2/ui-icons' +import { SvgFilter24 } 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 `SvgFlag16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFlag16 } from '@dhis2/ui-icons' +import { SvgFlag16 } 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 `SvgFlag24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFlag24 } from '@dhis2/ui-icons' +import { SvgFlag24 } 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 `SvgFolder16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolder16 } from '@dhis2/ui-icons' +import { SvgFolder16 } 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 `SvgFolder24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolder24 } from '@dhis2/ui-icons' +import { SvgFolder24 } 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 `SvgFolderOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolderOpen16 } from '@dhis2/ui-icons' +import { SvgFolderOpen16 } 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 `SvgFolderOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolderOpen24 } from '@dhis2/ui-icons' +import { SvgFolderOpen24 } 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 `SvgFullscreen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreen16 } from '@dhis2/ui-icons' +import { SvgFullscreen16 } 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 `SvgFullscreen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreen24 } from '@dhis2/ui-icons' +import { SvgFullscreen24 } 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 `SvgFullscreenExit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreenExit16 } from '@dhis2/ui-icons' +import { SvgFullscreenExit16 } 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 `SvgFullscreenExit24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreenExit24 } from '@dhis2/ui-icons' +import { SvgFullscreenExit24 } 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 `SvgHome16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgHome16 } from '@dhis2/ui-icons' +import { SvgHome16 } 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 `SvgHome24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgHome24 } from '@dhis2/ui-icons' +import { SvgHome24 } 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 `SvgImage16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImage16 } from '@dhis2/ui-icons' +import { SvgImage16 } 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 `SvgImage24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImage24 } from '@dhis2/ui-icons' +import { SvgImage24 } 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 `SvgImportItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImportItems24 } from '@dhis2/ui-icons' +import { SvgImportItems24 } 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 `SvgInfo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfo16 } from '@dhis2/ui-icons' +import { SvgInfo16 } 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 `SvgInfo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfo24 } from '@dhis2/ui-icons' +import { SvgInfo24 } 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 `SvgInfoFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfoFilled16 } from '@dhis2/ui-icons' +import { SvgInfoFilled16 } 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 `SvgInfoFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfoFilled24 } from '@dhis2/ui-icons' +import { SvgInfoFilled24 } 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 `SvgLaunch16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLaunch16 } from '@dhis2/ui-icons' +import { SvgLaunch16 } 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 `SvgLaunch24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLaunch24 } from '@dhis2/ui-icons' +import { SvgLaunch24 } 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 `SvgLayoutColumns16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutColumns16 } from '@dhis2/ui-icons' +import { SvgLayoutColumns16 } 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 `SvgLayoutColumns24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutColumns24 } from '@dhis2/ui-icons' +import { SvgLayoutColumns24 } 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 `SvgLayoutRows16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutRows16 } from '@dhis2/ui-icons' +import { SvgLayoutRows16 } 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 `SvgLayoutRows24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutRows24 } from '@dhis2/ui-icons' +import { SvgLayoutRows24 } 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 `SvgLegend16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLegend16 } from '@dhis2/ui-icons' +import { SvgLegend16 } 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 `SvgLegend24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLegend24 } from '@dhis2/ui-icons' +import { SvgLegend24 } 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 `SvgLink16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLink16 } from '@dhis2/ui-icons' +import { SvgLink16 } 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 `SvgLink24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLink24 } from '@dhis2/ui-icons' +import { SvgLink24 } 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 `SvgList16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgList16 } from '@dhis2/ui-icons' +import { SvgList16 } 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 `SvgList24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgList24 } from '@dhis2/ui-icons' +import { SvgList24 } 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 `SvgLocation16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLocation16 } from '@dhis2/ui-icons' +import { SvgLocation16 } 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 `SvgLocation24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLocation24 } from '@dhis2/ui-icons' +import { SvgLocation24 } 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 `SvgLock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLock16 } from '@dhis2/ui-icons' +import { SvgLock16 } 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 `SvgLock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLock24 } from '@dhis2/ui-icons' +import { SvgLock24 } 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 `SvgLockOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLockOpen16 } from '@dhis2/ui-icons' +import { SvgLockOpen16 } 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 `SvgLockOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLockOpen24 } from '@dhis2/ui-icons' +import { SvgLockOpen24 } 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 `SvgLogOut16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLogOut16 } from '@dhis2/ui-icons' +import { SvgLogOut16 } 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 `SvgLogOut24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLogOut24 } from '@dhis2/ui-icons' +import { SvgLogOut24 } 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 `SvgMail16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMail16 } from '@dhis2/ui-icons' +import { SvgMail16 } 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 `SvgMail24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMail24 } from '@dhis2/ui-icons' +import { SvgMail24 } 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 `SvgMailOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMailOpen16 } from '@dhis2/ui-icons' +import { SvgMailOpen16 } 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 `SvgMailOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMailOpen24 } from '@dhis2/ui-icons' +import { SvgMailOpen24 } 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 `SvgMessages16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMessages16 } from '@dhis2/ui-icons' +import { SvgMessages16 } 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 `SvgMessages24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMessages24 } from '@dhis2/ui-icons' +import { SvgMessages24 } 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 `SvgMore16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMore16 } from '@dhis2/ui-icons' +import { SvgMore16 } 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 `SvgMore24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMore24 } from '@dhis2/ui-icons' +import { SvgMore24 } 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 `SvgMove16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMove16 } from '@dhis2/ui-icons' +import { SvgMove16 } 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 `SvgMove24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMove24 } from '@dhis2/ui-icons' +import { SvgMove24 } 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 `SvgPushLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushLeft16 } from '@dhis2/ui-icons' +import { SvgPushLeft16 } 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 `SvgPushLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushLeft24 } from '@dhis2/ui-icons' +import { SvgPushLeft24 } 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 `SvgPushRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushRight16 } from '@dhis2/ui-icons' +import { SvgPushRight16 } 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 `SvgPushRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushRight24 } from '@dhis2/ui-icons' +import { SvgPushRight24 } 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 `SvgQuestion16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestion16 } from '@dhis2/ui-icons' +import { SvgQuestion16 } 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 `SvgQuestion24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestion24 } from '@dhis2/ui-icons' +import { SvgQuestion24 } 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 `SvgQuestionFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestionFilled16 } from '@dhis2/ui-icons' +import { SvgQuestionFilled16 } 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 `SvgQuestionFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestionFilled24 } from '@dhis2/ui-icons' +import { SvgQuestionFilled24 } 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 `SvgQueue16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQueue16 } from '@dhis2/ui-icons' +import { SvgQueue16 } 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 `SvgQueue24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQueue24 } from '@dhis2/ui-icons' +import { SvgQueue24 } 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 `SvgRedo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRedo16 } from '@dhis2/ui-icons' +import { SvgRedo16 } 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 `SvgRedo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRedo24 } from '@dhis2/ui-icons' +import { SvgRedo24 } 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 `SvgReorder16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReorder16 } from '@dhis2/ui-icons' +import { SvgReorder16 } 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 `SvgReorder24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReorder24 } from '@dhis2/ui-icons' +import { SvgReorder24 } 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 `SvgReply16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReply16 } from '@dhis2/ui-icons' +import { SvgReply16 } 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 `SvgReply24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReply24 } from '@dhis2/ui-icons' +import { SvgReply24 } 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 `SvgRuler16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRuler16 } from '@dhis2/ui-icons' +import { SvgRuler16 } 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 `SvgRuler24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRuler24 } from '@dhis2/ui-icons' +import { SvgRuler24 } 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 `SvgSave16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSave16 } from '@dhis2/ui-icons' +import { SvgSave16 } 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 `SvgSave24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSave24 } from '@dhis2/ui-icons' +import { SvgSave24 } 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 `SvgSearch16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSearch16 } from '@dhis2/ui-icons' +import { SvgSearch16 } 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 `SvgSearch24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSearch24 } from '@dhis2/ui-icons' +import { SvgSearch24 } 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 `SvgSettings16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSettings16 } from '@dhis2/ui-icons' +import { SvgSettings16 } 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 `SvgSettings24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSettings24 } from '@dhis2/ui-icons' +import { SvgSettings24 } 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 `SvgShare16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgShare16 } from '@dhis2/ui-icons' +import { SvgShare16 } 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 `SvgShare24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgShare24 } from '@dhis2/ui-icons' +import { SvgShare24 } 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 `SvgStar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStar16 } from '@dhis2/ui-icons' +import { SvgStar16 } 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 `SvgStar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStar24 } from '@dhis2/ui-icons' +import { SvgStar24 } 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 `SvgStarFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStarFilled16 } from '@dhis2/ui-icons' +import { SvgStarFilled16 } 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 `SvgStarFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStarFilled24 } from '@dhis2/ui-icons' +import { SvgStarFilled24 } 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 `SvgSubscribe16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribe16 } from '@dhis2/ui-icons' +import { SvgSubscribe16 } 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 `SvgSubscribe24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribe24 } from '@dhis2/ui-icons' +import { SvgSubscribe24 } 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 `SvgSubscribeOff16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribeOff16 } from '@dhis2/ui-icons' +import { SvgSubscribeOff16 } 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 `SvgSubscribeOff24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribeOff24 } from '@dhis2/ui-icons' +import { SvgSubscribeOff24 } 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 `SvgSubtract16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtract16 } from '@dhis2/ui-icons' +import { SvgSubtract16 } 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 `SvgSubtract24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtract24 } from '@dhis2/ui-icons' +import { SvgSubtract24 } 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 `SvgSubtractCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtractCircle16 } from '@dhis2/ui-icons' +import { SvgSubtractCircle16 } 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 `SvgSubtractCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtractCircle24 } from '@dhis2/ui-icons' +import { SvgSubtractCircle24 } 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 `SvgSync16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSync16 } from '@dhis2/ui-icons' +import { SvgSync16 } 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 `SvgSync24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSync24 } from '@dhis2/ui-icons' +import { SvgSync24 } 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 `SvgTable16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTable16 } from '@dhis2/ui-icons' +import { SvgTable16 } 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 `SvgTable24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTable24 } from '@dhis2/ui-icons' +import { SvgTable24 } 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 `SvgTerminalWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTerminalWindow16 } from '@dhis2/ui-icons' +import { SvgTerminalWindow16 } 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 `SvgTerminalWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTerminalWindow24 } from '@dhis2/ui-icons' +import { SvgTerminalWindow24 } 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 `SvgTextBold16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBold16 } from '@dhis2/ui-icons' +import { SvgTextBold16 } 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 `SvgTextBold24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBold24 } from '@dhis2/ui-icons' +import { SvgTextBold24 } 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 `SvgTextBox16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBox16 } from '@dhis2/ui-icons' +import { SvgTextBox16 } 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 `SvgTextBox24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBox24 } from '@dhis2/ui-icons' +import { SvgTextBox24 } 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 `SvgTextHeading16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextHeading16 } from '@dhis2/ui-icons' +import { SvgTextHeading16 } 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 `SvgTextHeading24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextHeading24 } from '@dhis2/ui-icons' +import { SvgTextHeading24 } 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 `SvgTextItalic16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextItalic16 } from '@dhis2/ui-icons' +import { SvgTextItalic16 } 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 `SvgTextItalic24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextItalic24 } from '@dhis2/ui-icons' +import { SvgTextItalic24 } 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 `SvgTextListOrdered16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListOrdered16 } from '@dhis2/ui-icons' +import { SvgTextListOrdered16 } 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 `SvgTextListOrdered24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListOrdered24 } from '@dhis2/ui-icons' +import { SvgTextListOrdered24 } 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 `SvgTextListUnordered16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListUnordered16 } from '@dhis2/ui-icons' +import { SvgTextListUnordered16 } 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 `SvgTextListUnordered24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListUnordered24 } from '@dhis2/ui-icons' +import { SvgTextListUnordered24 } 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 `SvgThumbDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbDown16 } from '@dhis2/ui-icons' +import { SvgThumbDown16 } 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 `SvgThumbDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbDown24 } from '@dhis2/ui-icons' +import { SvgThumbDown24 } 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 `SvgThumbUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbUp16 } from '@dhis2/ui-icons' +import { SvgThumbUp16 } 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 `SvgThumbUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbUp24 } from '@dhis2/ui-icons' +import { SvgThumbUp24 } 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 `SvgTranslate16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTranslate16 } from '@dhis2/ui-icons' +import { SvgTranslate16 } 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 `SvgTranslate24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTranslate24 } from '@dhis2/ui-icons' +import { SvgTranslate24 } 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 `SvgUndo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUndo16 } from '@dhis2/ui-icons' +import { SvgUndo16 } 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 `SvgUndo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUndo24 } from '@dhis2/ui-icons' +import { SvgUndo24 } 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 `SvgUpload16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUpload16 } from '@dhis2/ui-icons' +import { SvgUpload16 } 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 `SvgUpload24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUpload24 } from '@dhis2/ui-icons' +import { SvgUpload24 } 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 `SvgUser16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUser16 } from '@dhis2/ui-icons' +import { SvgUser16 } 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 `SvgUser24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUser24 } from '@dhis2/ui-icons' +import { SvgUser24 } 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 `SvgUserGroup16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUserGroup16 } from '@dhis2/ui-icons' +import { SvgUserGroup16 } 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 `SvgUserGroup24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUserGroup24 } from '@dhis2/ui-icons' +import { SvgUserGroup24 } 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 `SvgView16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgView16 } from '@dhis2/ui-icons' +import { SvgView16 } 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 `SvgView24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgView24 } from '@dhis2/ui-icons' +import { SvgView24 } 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 `SvgViewOff16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgViewOff16 } from '@dhis2/ui-icons' +import { SvgViewOff16 } 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 `SvgViewOff24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgViewOff24 } from '@dhis2/ui-icons' +import { SvgViewOff24 } 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 `SvgVisualizationArea16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationArea16 } from '@dhis2/ui-icons' +import { SvgVisualizationArea16 } 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 `SvgVisualizationArea24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationArea24 } from '@dhis2/ui-icons' +import { SvgVisualizationArea24 } 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 `SvgVisualizationAreaStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationAreaStacked16 } from '@dhis2/ui-icons' +import { SvgVisualizationAreaStacked16 } 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 `SvgVisualizationAreaStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationAreaStacked24 } from '@dhis2/ui-icons' +import { SvgVisualizationAreaStacked24 } 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 `SvgVisualizationBar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBar16 } from '@dhis2/ui-icons' +import { SvgVisualizationBar16 } 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 `SvgVisualizationBar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBar24 } from '@dhis2/ui-icons' +import { SvgVisualizationBar24 } 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 `SvgVisualizationBarStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBarStacked16 } from '@dhis2/ui-icons' +import { SvgVisualizationBarStacked16 } 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 `SvgVisualizationBarStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBarStacked24 } from '@dhis2/ui-icons' +import { SvgVisualizationBarStacked24 } 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 `SvgVisualizationColumn16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumn16 } from '@dhis2/ui-icons' +import { SvgVisualizationColumn16 } 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 `SvgVisualizationColumn24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumn24 } from '@dhis2/ui-icons' +import { SvgVisualizationColumn24 } 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 `SvgVisualizationColumnMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnMulti16 } from '@dhis2/ui-icons' +import { SvgVisualizationColumnMulti16 } 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 `SvgVisualizationColumnMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnMulti24 } from '@dhis2/ui-icons' +import { SvgVisualizationColumnMulti24 } 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 `SvgVisualizationColumnStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnStacked16 } from '@dhis2/ui-icons' +import { SvgVisualizationColumnStacked16 } 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 `SvgVisualizationColumnStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnStacked24 } from '@dhis2/ui-icons' +import { SvgVisualizationColumnStacked24 } 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 `SvgVisualizationGauge16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationGauge16 } from '@dhis2/ui-icons' +import { SvgVisualizationGauge16 } 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 `SvgVisualizationGauge24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationGauge24 } from '@dhis2/ui-icons' +import { SvgVisualizationGauge24 } 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 `SvgVisualizationLine16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLine16 } from '@dhis2/ui-icons' +import { SvgVisualizationLine16 } 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 `SvgVisualizationLine24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLine24 } from '@dhis2/ui-icons' +import { SvgVisualizationLine24 } 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 `SvgVisualizationLineMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLineMulti16 } from '@dhis2/ui-icons' +import { SvgVisualizationLineMulti16 } 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 `SvgVisualizationLineMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLineMulti24 } from '@dhis2/ui-icons' +import { SvgVisualizationLineMulti24 } 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 `SvgVisualizationLinelist16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLinelist16 } from '@dhis2/ui-icons' +import { SvgVisualizationLinelist16 } 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 `SvgVisualizationLinelist24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLinelist24 } from '@dhis2/ui-icons' +import { SvgVisualizationLinelist24 } 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 `SvgVisualizationPie16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPie16 } from '@dhis2/ui-icons' +import { SvgVisualizationPie16 } 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 `SvgVisualizationPie24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPie24 } from '@dhis2/ui-icons' +import { SvgVisualizationPie24 } 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 `SvgVisualizationPivotTable16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPivotTable16 } from '@dhis2/ui-icons' +import { SvgVisualizationPivotTable16 } 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 `SvgVisualizationPivotTable24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPivotTable24 } from '@dhis2/ui-icons' +import { SvgVisualizationPivotTable24 } 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 `SvgVisualizationRadar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationRadar16 } from '@dhis2/ui-icons' +import { SvgVisualizationRadar16 } 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 `SvgVisualizationRadar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationRadar24 } from '@dhis2/ui-icons' +import { SvgVisualizationRadar24 } 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 `SvgVisualizationScatter16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationScatter16 } from '@dhis2/ui-icons' +import { SvgVisualizationScatter16 } 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 `SvgVisualizationScatter24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationScatter24 } from '@dhis2/ui-icons' +import { SvgVisualizationScatter24 } 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 `SvgVisualizationSingleValue16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationSingleValue16 } from '@dhis2/ui-icons' +import { SvgVisualizationSingleValue16 } 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 `SvgVisualizationSingleValue24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationSingleValue24 } from '@dhis2/ui-icons' +import { SvgVisualizationSingleValue24 } 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 `SvgWarning16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarning16 } from '@dhis2/ui-icons' +import { SvgWarning16 } 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 `SvgWarning24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarning24 } from '@dhis2/ui-icons' +import { SvgWarning24 } 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 `SvgWarningFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarningFilled16 } from '@dhis2/ui-icons' +import { SvgWarningFilled16 } 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 `SvgWarningFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarningFilled24 } from '@dhis2/ui-icons' +import { SvgWarningFilled24 } 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 `SvgWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWindow16 } from '@dhis2/ui-icons' +import { SvgWindow16 } 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 `SvgWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWindow24 } from '@dhis2/ui-icons' +import { SvgWindow24 } 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 `SvgWorld16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWorld16 } from '@dhis2/ui-icons' +import { SvgWorld16 } 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 `SvgWorld24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWorld24 } from '@dhis2/ui-icons' +import { SvgWorld24 } from '@dhis2/ui' ``` diff --git a/scripts/generate-api-docs.js b/scripts/generate-api-docs.js index 743c92fb5d..b78f02496e 100755 --- a/scripts/generate-api-docs.js +++ b/scripts/generate-api-docs.js @@ -77,11 +77,10 @@ const format = ({ ast, pkg }) => { if (pkg?.name) { table += '#### Usage\n\n' - table += - '**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.\n\n' + table += `To use \`${ast.displayName}\`, you can import the component from the \`@dhis2/ui\` library \n\n` table += ` \`\`\`js -import { ${ast.displayName} } from '${pkg.name}' +import { ${ast.displayName} } from '@dhis2/ui' \`\`\`\n\n ` } From 9536eedf34011311ffaf6ebf8a14b84678e2e777 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Tue, 2 Jan 2024 16:31:05 +0000 Subject: [PATCH 02/28] docs: linting --- docs/docs/components/alertbar.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index dca5c6800b..8a04ce5e0b 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -20,9 +20,9 @@ An alert bar communicates something to the user by showing a prominent, floating ### When to use -- **Tell the user about something important**. Alert bars should only be used for information the user needs to know about. -- **To inform without blocking**. An alert bar doesn't block the rest of the page, so it should be used to communicate when the user doesn't need to be pulled out of a workflow. -- **Confirm important actions**. A successful alert bar can tell the user that something was saved successfully without stopping them from moving on. +- **Tell the user about something important**. Alert bars should only be used for information the user needs to know about. +- **To inform without blocking**. An alert bar doesn't block the rest of the page, so it should be used to communicate when the user doesn't need to be pulled out of a workflow. +- **Confirm important actions**. A successful alert bar can tell the user that something was saved successfully without stopping them from moving on. ### When not to use From 88d459d173d78738eaf9472b9b3c3737d69fb0de Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Tue, 2 Jan 2024 16:59:13 +0000 Subject: [PATCH 03/28] docs: use proper display name for icon docs --- icons/API.md | 1036 +++++++++++++++++----------------- scripts/generate-api-docs.js | 9 +- 2 files changed, 525 insertions(+), 520 deletions(-) diff --git a/icons/API.md b/icons/API.md index f6d64ab994..0519a5b91b 100644 --- a/icons/API.md +++ b/icons/API.md @@ -2,11 +2,11 @@ #### Usage -To use `SvgAdd16`, you can import the component from the `@dhis2/ui` library +To use `IconAdd16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAdd16 } from '@dhis2/ui' +import { IconAdd16 } from '@dhis2/ui' ``` @@ -21,11 +21,11 @@ import { SvgAdd16 } from '@dhis2/ui' #### Usage -To use `SvgAdd24`, you can import the component from the `@dhis2/ui` library +To use `IconAdd24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAdd24 } from '@dhis2/ui' +import { IconAdd24 } from '@dhis2/ui' ``` @@ -40,11 +40,11 @@ import { SvgAdd24 } from '@dhis2/ui' #### Usage -To use `SvgAddCircle16`, you can import the component from the `@dhis2/ui` library +To use `IconAddCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAddCircle16 } from '@dhis2/ui' +import { IconAddCircle16 } from '@dhis2/ui' ``` @@ -59,11 +59,11 @@ import { SvgAddCircle16 } from '@dhis2/ui' #### Usage -To use `SvgAddCircle24`, you can import the component from the `@dhis2/ui` library +To use `IconAddCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAddCircle24 } from '@dhis2/ui' +import { IconAddCircle24 } from '@dhis2/ui' ``` @@ -78,11 +78,11 @@ import { SvgAddCircle24 } from '@dhis2/ui' #### Usage -To use `SvgApps16`, you can import the component from the `@dhis2/ui` library +To use `IconApps16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgApps16 } from '@dhis2/ui' +import { IconApps16 } from '@dhis2/ui' ``` @@ -97,11 +97,11 @@ import { SvgApps16 } from '@dhis2/ui' #### Usage -To use `SvgApps24`, you can import the component from the `@dhis2/ui` library +To use `IconApps24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgApps24 } from '@dhis2/ui' +import { IconApps24 } from '@dhis2/ui' ``` @@ -116,11 +116,11 @@ import { SvgApps24 } from '@dhis2/ui' #### Usage -To use `SvgArchive16`, you can import the component from the `@dhis2/ui` library +To use `IconArchive16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArchive16 } from '@dhis2/ui' +import { IconArchive16 } from '@dhis2/ui' ``` @@ -135,11 +135,11 @@ import { SvgArchive16 } from '@dhis2/ui' #### Usage -To use `SvgArchive24`, you can import the component from the `@dhis2/ui` library +To use `IconArchive24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArchive24 } from '@dhis2/ui' +import { IconArchive24 } from '@dhis2/ui' ``` @@ -154,11 +154,11 @@ import { SvgArchive24 } from '@dhis2/ui' #### Usage -To use `SvgArrowDown16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowDown16 } from '@dhis2/ui' +import { IconArrowDown16 } from '@dhis2/ui' ``` @@ -173,11 +173,11 @@ import { SvgArrowDown16 } from '@dhis2/ui' #### Usage -To use `SvgArrowDown24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowDown24 } from '@dhis2/ui' +import { IconArrowDown24 } from '@dhis2/ui' ``` @@ -192,11 +192,11 @@ import { SvgArrowDown24 } from '@dhis2/ui' #### Usage -To use `SvgArrowLeft16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeft16 } from '@dhis2/ui' +import { IconArrowLeft16 } from '@dhis2/ui' ``` @@ -211,11 +211,11 @@ import { SvgArrowLeft16 } from '@dhis2/ui' #### Usage -To use `SvgArrowLeft24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeft24 } from '@dhis2/ui' +import { IconArrowLeft24 } from '@dhis2/ui' ``` @@ -230,11 +230,11 @@ import { SvgArrowLeft24 } from '@dhis2/ui' #### Usage -To use `SvgArrowLeftMulti16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowLeftMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeftMulti16 } from '@dhis2/ui' +import { IconArrowLeftMulti16 } from '@dhis2/ui' ``` @@ -249,11 +249,11 @@ import { SvgArrowLeftMulti16 } from '@dhis2/ui' #### Usage -To use `SvgArrowLeftMulti24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowLeftMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowLeftMulti24 } from '@dhis2/ui' +import { IconArrowLeftMulti24 } from '@dhis2/ui' ``` @@ -268,11 +268,11 @@ import { SvgArrowLeftMulti24 } from '@dhis2/ui' #### Usage -To use `SvgArrowRight16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRight16 } from '@dhis2/ui' +import { IconArrowRight16 } from '@dhis2/ui' ``` @@ -287,11 +287,11 @@ import { SvgArrowRight16 } from '@dhis2/ui' #### Usage -To use `SvgArrowRight24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRight24 } from '@dhis2/ui' +import { IconArrowRight24 } from '@dhis2/ui' ``` @@ -306,11 +306,11 @@ import { SvgArrowRight24 } from '@dhis2/ui' #### Usage -To use `SvgArrowRightMulti16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowRightMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRightMulti16 } from '@dhis2/ui' +import { IconArrowRightMulti16 } from '@dhis2/ui' ``` @@ -325,11 +325,11 @@ import { SvgArrowRightMulti16 } from '@dhis2/ui' #### Usage -To use `SvgArrowRightMulti24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowRightMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowRightMulti24 } from '@dhis2/ui' +import { IconArrowRightMulti24 } from '@dhis2/ui' ``` @@ -344,11 +344,11 @@ import { SvgArrowRightMulti24 } from '@dhis2/ui' #### Usage -To use `SvgArrowUp16`, you can import the component from the `@dhis2/ui` library +To use `IconArrowUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowUp16 } from '@dhis2/ui' +import { IconArrowUp16 } from '@dhis2/ui' ``` @@ -363,11 +363,11 @@ import { SvgArrowUp16 } from '@dhis2/ui' #### Usage -To use `SvgArrowUp24`, you can import the component from the `@dhis2/ui` library +To use `IconArrowUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgArrowUp24 } from '@dhis2/ui' +import { IconArrowUp24 } from '@dhis2/ui' ``` @@ -382,11 +382,11 @@ import { SvgArrowUp24 } from '@dhis2/ui' #### Usage -To use `SvgAt16`, you can import the component from the `@dhis2/ui` library +To use `IconAt16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAt16 } from '@dhis2/ui' +import { IconAt16 } from '@dhis2/ui' ``` @@ -401,11 +401,11 @@ import { SvgAt16 } from '@dhis2/ui' #### Usage -To use `SvgAt24`, you can import the component from the `@dhis2/ui` library +To use `IconAt24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAt24 } from '@dhis2/ui' +import { IconAt24 } from '@dhis2/ui' ``` @@ -420,11 +420,11 @@ import { SvgAt24 } from '@dhis2/ui' #### Usage -To use `SvgAttachment16`, you can import the component from the `@dhis2/ui` library +To use `IconAttachment16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAttachment16 } from '@dhis2/ui' +import { IconAttachment16 } from '@dhis2/ui' ``` @@ -439,11 +439,11 @@ import { SvgAttachment16 } from '@dhis2/ui' #### Usage -To use `SvgAttachment24`, you can import the component from the `@dhis2/ui` library +To use `IconAttachment24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgAttachment24 } from '@dhis2/ui' +import { IconAttachment24 } from '@dhis2/ui' ``` @@ -458,11 +458,11 @@ import { SvgAttachment24 } from '@dhis2/ui' #### Usage -To use `SvgBlock16`, you can import the component from the `@dhis2/ui` library +To use `IconBlock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgBlock16 } from '@dhis2/ui' +import { IconBlock16 } from '@dhis2/ui' ``` @@ -477,11 +477,11 @@ import { SvgBlock16 } from '@dhis2/ui' #### Usage -To use `SvgBlock24`, you can import the component from the `@dhis2/ui` library +To use `IconBlock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgBlock24 } from '@dhis2/ui' +import { IconBlock24 } from '@dhis2/ui' ``` @@ -496,11 +496,11 @@ import { SvgBlock24 } from '@dhis2/ui' #### Usage -To use `SvgCalendar16`, you can import the component from the `@dhis2/ui` library +To use `IconCalendar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCalendar16 } from '@dhis2/ui' +import { IconCalendar16 } from '@dhis2/ui' ``` @@ -515,11 +515,11 @@ import { SvgCalendar16 } from '@dhis2/ui' #### Usage -To use `SvgCalendar24`, you can import the component from the `@dhis2/ui` library +To use `IconCalendar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCalendar24 } from '@dhis2/ui' +import { IconCalendar24 } from '@dhis2/ui' ``` @@ -534,11 +534,11 @@ import { SvgCalendar24 } from '@dhis2/ui' #### Usage -To use `SvgCheckmark12`, you can import the component from the `@dhis2/ui` library +To use `IconCheckmark12`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark12 } from '@dhis2/ui' +import { IconCheckmark12 } from '@dhis2/ui' ``` @@ -553,11 +553,11 @@ import { SvgCheckmark12 } from '@dhis2/ui' #### Usage -To use `SvgCheckmark16`, you can import the component from the `@dhis2/ui` library +To use `IconCheckmark16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark16 } from '@dhis2/ui' +import { IconCheckmark16 } from '@dhis2/ui' ``` @@ -572,11 +572,11 @@ import { SvgCheckmark16 } from '@dhis2/ui' #### Usage -To use `SvgCheckmark24`, you can import the component from the `@dhis2/ui` library +To use `IconCheckmark24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmark24 } from '@dhis2/ui' +import { IconCheckmark24 } from '@dhis2/ui' ``` @@ -591,11 +591,11 @@ import { SvgCheckmark24 } from '@dhis2/ui' #### Usage -To use `SvgCheckmarkCircle16`, you can import the component from the `@dhis2/ui` library +To use `IconCheckmarkCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmarkCircle16 } from '@dhis2/ui' +import { IconCheckmarkCircle16 } from '@dhis2/ui' ``` @@ -610,11 +610,11 @@ import { SvgCheckmarkCircle16 } from '@dhis2/ui' #### Usage -To use `SvgCheckmarkCircle24`, you can import the component from the `@dhis2/ui` library +To use `IconCheckmarkCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCheckmarkCircle24 } from '@dhis2/ui' +import { IconCheckmarkCircle24 } from '@dhis2/ui' ``` @@ -629,11 +629,11 @@ import { SvgCheckmarkCircle24 } from '@dhis2/ui' #### Usage -To use `SvgChevronDown16`, you can import the component from the `@dhis2/ui` library +To use `IconChevronDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronDown16 } from '@dhis2/ui' +import { IconChevronDown16 } from '@dhis2/ui' ``` @@ -648,11 +648,11 @@ import { SvgChevronDown16 } from '@dhis2/ui' #### Usage -To use `SvgChevronDown24`, you can import the component from the `@dhis2/ui` library +To use `IconChevronDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronDown24 } from '@dhis2/ui' +import { IconChevronDown24 } from '@dhis2/ui' ``` @@ -667,11 +667,11 @@ import { SvgChevronDown24 } from '@dhis2/ui' #### Usage -To use `SvgChevronLeft16`, you can import the component from the `@dhis2/ui` library +To use `IconChevronLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronLeft16 } from '@dhis2/ui' +import { IconChevronLeft16 } from '@dhis2/ui' ``` @@ -686,11 +686,11 @@ import { SvgChevronLeft16 } from '@dhis2/ui' #### Usage -To use `SvgChevronLeft24`, you can import the component from the `@dhis2/ui` library +To use `IconChevronLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronLeft24 } from '@dhis2/ui' +import { IconChevronLeft24 } from '@dhis2/ui' ``` @@ -705,11 +705,11 @@ import { SvgChevronLeft24 } from '@dhis2/ui' #### Usage -To use `SvgChevronRight16`, you can import the component from the `@dhis2/ui` library +To use `IconChevronRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronRight16 } from '@dhis2/ui' +import { IconChevronRight16 } from '@dhis2/ui' ``` @@ -724,11 +724,11 @@ import { SvgChevronRight16 } from '@dhis2/ui' #### Usage -To use `SvgChevronRight24`, you can import the component from the `@dhis2/ui` library +To use `IconChevronRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronRight24 } from '@dhis2/ui' +import { IconChevronRight24 } from '@dhis2/ui' ``` @@ -743,11 +743,11 @@ import { SvgChevronRight24 } from '@dhis2/ui' #### Usage -To use `SvgChevronUp16`, you can import the component from the `@dhis2/ui` library +To use `IconChevronUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronUp16 } from '@dhis2/ui' +import { IconChevronUp16 } from '@dhis2/ui' ``` @@ -762,11 +762,11 @@ import { SvgChevronUp16 } from '@dhis2/ui' #### Usage -To use `SvgChevronUp24`, you can import the component from the `@dhis2/ui` library +To use `IconChevronUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgChevronUp24 } from '@dhis2/ui' +import { IconChevronUp24 } from '@dhis2/ui' ``` @@ -781,11 +781,11 @@ import { SvgChevronUp24 } from '@dhis2/ui' #### Usage -To use `SvgClock16`, you can import the component from the `@dhis2/ui` library +To use `IconClock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClock16 } from '@dhis2/ui' +import { IconClock16 } from '@dhis2/ui' ``` @@ -800,11 +800,11 @@ import { SvgClock16 } from '@dhis2/ui' #### Usage -To use `SvgClock24`, you can import the component from the `@dhis2/ui` library +To use `IconClock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClock24 } from '@dhis2/ui' +import { IconClock24 } from '@dhis2/ui' ``` @@ -819,11 +819,11 @@ import { SvgClock24 } from '@dhis2/ui' #### Usage -To use `SvgClockHistory16`, you can import the component from the `@dhis2/ui` library +To use `IconClockHistory16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClockHistory16 } from '@dhis2/ui' +import { IconClockHistory16 } from '@dhis2/ui' ``` @@ -838,11 +838,11 @@ import { SvgClockHistory16 } from '@dhis2/ui' #### Usage -To use `SvgClockHistory24`, you can import the component from the `@dhis2/ui` library +To use `IconClockHistory24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgClockHistory24 } from '@dhis2/ui' +import { IconClockHistory24 } from '@dhis2/ui' ``` @@ -857,11 +857,11 @@ import { SvgClockHistory24 } from '@dhis2/ui' #### Usage -To use `SvgColor16`, you can import the component from the `@dhis2/ui` library +To use `IconColor16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgColor16 } from '@dhis2/ui' +import { IconColor16 } from '@dhis2/ui' ``` @@ -876,11 +876,11 @@ import { SvgColor16 } from '@dhis2/ui' #### Usage -To use `SvgColor24`, you can import the component from the `@dhis2/ui` library +To use `IconColor24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgColor24 } from '@dhis2/ui' +import { IconColor24 } from '@dhis2/ui' ``` @@ -895,11 +895,11 @@ import { SvgColor24 } from '@dhis2/ui' #### Usage -To use `SvgCopy16`, you can import the component from the `@dhis2/ui` library +To use `IconCopy16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCopy16 } from '@dhis2/ui' +import { IconCopy16 } from '@dhis2/ui' ``` @@ -914,11 +914,11 @@ import { SvgCopy16 } from '@dhis2/ui' #### Usage -To use `SvgCopy24`, you can import the component from the `@dhis2/ui` library +To use `IconCopy24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCopy24 } from '@dhis2/ui' +import { IconCopy24 } from '@dhis2/ui' ``` @@ -933,11 +933,11 @@ import { SvgCopy24 } from '@dhis2/ui' #### Usage -To use `SvgCross16`, you can import the component from the `@dhis2/ui` library +To use `IconCross16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCross16 } from '@dhis2/ui' +import { IconCross16 } from '@dhis2/ui' ``` @@ -952,11 +952,11 @@ import { SvgCross16 } from '@dhis2/ui' #### Usage -To use `SvgCross24`, you can import the component from the `@dhis2/ui` library +To use `IconCross24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgCross24 } from '@dhis2/ui' +import { IconCross24 } from '@dhis2/ui' ``` @@ -971,11 +971,11 @@ import { SvgCross24 } from '@dhis2/ui' #### Usage -To use `SvgDashboardWindow16`, you can import the component from the `@dhis2/ui` library +To use `IconDashboardWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDashboardWindow16 } from '@dhis2/ui' +import { IconDashboardWindow16 } from '@dhis2/ui' ``` @@ -990,11 +990,11 @@ import { SvgDashboardWindow16 } from '@dhis2/ui' #### Usage -To use `SvgDashboardWindow24`, you can import the component from the `@dhis2/ui` library +To use `IconDashboardWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDashboardWindow24 } from '@dhis2/ui' +import { IconDashboardWindow24 } from '@dhis2/ui' ``` @@ -1009,11 +1009,11 @@ import { SvgDashboardWindow24 } from '@dhis2/ui' #### Usage -To use `SvgDataInteger16`, you can import the component from the `@dhis2/ui` library +To use `IconDataInteger16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataInteger16 } from '@dhis2/ui' +import { IconDataInteger16 } from '@dhis2/ui' ``` @@ -1028,11 +1028,11 @@ import { SvgDataInteger16 } from '@dhis2/ui' #### Usage -To use `SvgDataInteger24`, you can import the component from the `@dhis2/ui` library +To use `IconDataInteger24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataInteger24 } from '@dhis2/ui' +import { IconDataInteger24 } from '@dhis2/ui' ``` @@ -1047,11 +1047,11 @@ import { SvgDataInteger24 } from '@dhis2/ui' #### Usage -To use `SvgDataString16`, you can import the component from the `@dhis2/ui` library +To use `IconDataString16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataString16 } from '@dhis2/ui' +import { IconDataString16 } from '@dhis2/ui' ``` @@ -1066,11 +1066,11 @@ import { SvgDataString16 } from '@dhis2/ui' #### Usage -To use `SvgDataString24`, you can import the component from the `@dhis2/ui` library +To use `IconDataString24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDataString24 } from '@dhis2/ui' +import { IconDataString24 } from '@dhis2/ui' ``` @@ -1085,11 +1085,11 @@ import { SvgDataString24 } from '@dhis2/ui' #### Usage -To use `SvgDelete16`, you can import the component from the `@dhis2/ui` library +To use `IconDelete16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDelete16 } from '@dhis2/ui' +import { IconDelete16 } from '@dhis2/ui' ``` @@ -1104,11 +1104,11 @@ import { SvgDelete16 } from '@dhis2/ui' #### Usage -To use `SvgDelete24`, you can import the component from the `@dhis2/ui` library +To use `IconDelete24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDelete24 } from '@dhis2/ui' +import { IconDelete24 } from '@dhis2/ui' ``` @@ -1123,11 +1123,11 @@ import { SvgDelete24 } from '@dhis2/ui' #### Usage -To use `SvgDimensionCategoryOptionGroupset16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionCategoryOptionGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionCategoryOptionGroupset16 } from '@dhis2/ui' +import { IconDimensionCategoryOptionGroupset16 } from '@dhis2/ui' ``` @@ -1142,11 +1142,11 @@ import { SvgDimensionCategoryOptionGroupset16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionData16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionData16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionData16 } from '@dhis2/ui' +import { IconDimensionData16 } from '@dhis2/ui' ``` @@ -1161,11 +1161,11 @@ import { SvgDimensionData16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionDataElementGroupset16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionDataElementGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionDataElementGroupset16 } from '@dhis2/ui' +import { IconDimensionDataElementGroupset16 } from '@dhis2/ui' ``` @@ -1180,11 +1180,11 @@ import { SvgDimensionDataElementGroupset16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionDataSet16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionDataSet16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionDataSet16 } from '@dhis2/ui' +import { IconDimensionDataSet16 } from '@dhis2/ui' ``` @@ -1199,11 +1199,11 @@ import { SvgDimensionDataSet16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionEventDataItem16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionEventDataItem16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionEventDataItem16 } from '@dhis2/ui' +import { IconDimensionEventDataItem16 } from '@dhis2/ui' ``` @@ -1218,11 +1218,11 @@ import { SvgDimensionEventDataItem16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionIndicator16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionIndicator16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionIndicator16 } from '@dhis2/ui' +import { IconDimensionIndicator16 } from '@dhis2/ui' ``` @@ -1237,11 +1237,11 @@ import { SvgDimensionIndicator16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionOrgUnit16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionOrgUnit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionOrgUnit16 } from '@dhis2/ui' +import { IconDimensionOrgUnit16 } from '@dhis2/ui' ``` @@ -1256,11 +1256,11 @@ import { SvgDimensionOrgUnit16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionOrgUnitGroupset16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionOrgUnitGroupset16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionOrgUnitGroupset16 } from '@dhis2/ui' +import { IconDimensionOrgUnitGroupset16 } from '@dhis2/ui' ``` @@ -1275,11 +1275,11 @@ import { SvgDimensionOrgUnitGroupset16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionProgramIndicator16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionProgramIndicator16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionProgramIndicator16 } from '@dhis2/ui' +import { IconDimensionProgramIndicator16 } from '@dhis2/ui' ``` @@ -1294,11 +1294,11 @@ import { SvgDimensionProgramIndicator16 } from '@dhis2/ui' #### Usage -To use `SvgDimensionValidationRule16`, you can import the component from the `@dhis2/ui` library +To use `IconDimensionValidationRule16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDimensionValidationRule16 } from '@dhis2/ui' +import { IconDimensionValidationRule16 } from '@dhis2/ui' ``` @@ -1313,11 +1313,11 @@ import { SvgDimensionValidationRule16 } from '@dhis2/ui' #### Usage -To use `SvgDirectionNorth16`, you can import the component from the `@dhis2/ui` library +To use `IconDirectionNorth16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDirectionNorth16 } from '@dhis2/ui' +import { IconDirectionNorth16 } from '@dhis2/ui' ``` @@ -1332,11 +1332,11 @@ import { SvgDirectionNorth16 } from '@dhis2/ui' #### Usage -To use `SvgDirectionNorth24`, you can import the component from the `@dhis2/ui` library +To use `IconDirectionNorth24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDirectionNorth24 } from '@dhis2/ui' +import { IconDirectionNorth24 } from '@dhis2/ui' ``` @@ -1351,11 +1351,11 @@ import { SvgDirectionNorth24 } from '@dhis2/ui' #### Usage -To use `SvgDownload16`, you can import the component from the `@dhis2/ui` library +To use `IconDownload16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDownload16 } from '@dhis2/ui' +import { IconDownload16 } from '@dhis2/ui' ``` @@ -1370,11 +1370,11 @@ import { SvgDownload16 } from '@dhis2/ui' #### Usage -To use `SvgDownload24`, you can import the component from the `@dhis2/ui` library +To use `IconDownload24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDownload24 } from '@dhis2/ui' +import { IconDownload24 } from '@dhis2/ui' ``` @@ -1389,11 +1389,11 @@ import { SvgDownload24 } from '@dhis2/ui' #### Usage -To use `SvgDragHandle16`, you can import the component from the `@dhis2/ui` library +To use `IconDragHandle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDragHandle16 } from '@dhis2/ui' +import { IconDragHandle16 } from '@dhis2/ui' ``` @@ -1408,11 +1408,11 @@ import { SvgDragHandle16 } from '@dhis2/ui' #### Usage -To use `SvgDragHandle24`, you can import the component from the `@dhis2/ui` library +To use `IconDragHandle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDragHandle24 } from '@dhis2/ui' +import { IconDragHandle24 } from '@dhis2/ui' ``` @@ -1427,11 +1427,11 @@ import { SvgDragHandle24 } from '@dhis2/ui' #### Usage -To use `SvgDuplicate16`, you can import the component from the `@dhis2/ui` library +To use `IconDuplicate16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDuplicate16 } from '@dhis2/ui' +import { IconDuplicate16 } from '@dhis2/ui' ``` @@ -1446,11 +1446,11 @@ import { SvgDuplicate16 } from '@dhis2/ui' #### Usage -To use `SvgDuplicate24`, you can import the component from the `@dhis2/ui` library +To use `IconDuplicate24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgDuplicate24 } from '@dhis2/ui' +import { IconDuplicate24 } from '@dhis2/ui' ``` @@ -1465,11 +1465,11 @@ import { SvgDuplicate24 } from '@dhis2/ui' #### Usage -To use `SvgEdit16`, you can import the component from the `@dhis2/ui` library +To use `IconEdit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEdit16 } from '@dhis2/ui' +import { IconEdit16 } from '@dhis2/ui' ``` @@ -1484,11 +1484,11 @@ import { SvgEdit16 } from '@dhis2/ui' #### Usage -To use `SvgEdit24`, you can import the component from the `@dhis2/ui` library +To use `IconEdit24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEdit24 } from '@dhis2/ui' +import { IconEdit24 } from '@dhis2/ui' ``` @@ -1503,11 +1503,11 @@ import { SvgEdit24 } from '@dhis2/ui' #### Usage -To use `SvgEditItems16`, you can import the component from the `@dhis2/ui` library +To use `IconEditItems16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEditItems16 } from '@dhis2/ui' +import { IconEditItems16 } from '@dhis2/ui' ``` @@ -1522,11 +1522,11 @@ import { SvgEditItems16 } from '@dhis2/ui' #### Usage -To use `SvgEditItems24`, you can import the component from the `@dhis2/ui` library +To use `IconEditItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEditItems24 } from '@dhis2/ui' +import { IconEditItems24 } from '@dhis2/ui' ``` @@ -1541,11 +1541,11 @@ import { SvgEditItems24 } from '@dhis2/ui' #### Usage -To use `SvgEmptyFrame16`, you can import the component from the `@dhis2/ui` library +To use `IconEmptyFrame16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEmptyFrame16 } from '@dhis2/ui' +import { IconEmptyFrame16 } from '@dhis2/ui' ``` @@ -1560,11 +1560,11 @@ import { SvgEmptyFrame16 } from '@dhis2/ui' #### Usage -To use `SvgEmptyFrame24`, you can import the component from the `@dhis2/ui` library +To use `IconEmptyFrame24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgEmptyFrame24 } from '@dhis2/ui' +import { IconEmptyFrame24 } from '@dhis2/ui' ``` @@ -1579,11 +1579,11 @@ import { SvgEmptyFrame24 } from '@dhis2/ui' #### Usage -To use `SvgError16`, you can import the component from the `@dhis2/ui` library +To use `IconError16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgError16 } from '@dhis2/ui' +import { IconError16 } from '@dhis2/ui' ``` @@ -1598,11 +1598,11 @@ import { SvgError16 } from '@dhis2/ui' #### Usage -To use `SvgError24`, you can import the component from the `@dhis2/ui` library +To use `IconError24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgError24 } from '@dhis2/ui' +import { IconError24 } from '@dhis2/ui' ``` @@ -1617,11 +1617,11 @@ import { SvgError24 } from '@dhis2/ui' #### Usage -To use `SvgErrorFilled16`, you can import the component from the `@dhis2/ui` library +To use `IconErrorFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgErrorFilled16 } from '@dhis2/ui' +import { IconErrorFilled16 } from '@dhis2/ui' ``` @@ -1636,11 +1636,11 @@ import { SvgErrorFilled16 } from '@dhis2/ui' #### Usage -To use `SvgErrorFilled24`, you can import the component from the `@dhis2/ui` library +To use `IconErrorFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgErrorFilled24 } from '@dhis2/ui' +import { IconErrorFilled24 } from '@dhis2/ui' ``` @@ -1655,11 +1655,11 @@ import { SvgErrorFilled24 } from '@dhis2/ui' #### Usage -To use `SvgExportItems24`, you can import the component from the `@dhis2/ui` library +To use `IconExportItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgExportItems24 } from '@dhis2/ui' +import { IconExportItems24 } from '@dhis2/ui' ``` @@ -1674,11 +1674,11 @@ import { SvgExportItems24 } from '@dhis2/ui' #### Usage -To use `SvgFaceAdd16`, you can import the component from the `@dhis2/ui` library +To use `IconFaceAdd16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFaceAdd16 } from '@dhis2/ui' +import { IconFaceAdd16 } from '@dhis2/ui' ``` @@ -1693,11 +1693,11 @@ import { SvgFaceAdd16 } from '@dhis2/ui' #### Usage -To use `SvgFaceAdd24`, you can import the component from the `@dhis2/ui` library +To use `IconFaceAdd24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFaceAdd24 } from '@dhis2/ui' +import { IconFaceAdd24 } from '@dhis2/ui' ``` @@ -1712,11 +1712,11 @@ import { SvgFaceAdd24 } from '@dhis2/ui' #### Usage -To use `SvgFile16`, you can import the component from the `@dhis2/ui` library +To use `IconFile16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFile16 } from '@dhis2/ui' +import { IconFile16 } from '@dhis2/ui' ``` @@ -1731,11 +1731,11 @@ import { SvgFile16 } from '@dhis2/ui' #### Usage -To use `SvgFile24`, you can import the component from the `@dhis2/ui` library +To use `IconFile24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFile24 } from '@dhis2/ui' +import { IconFile24 } from '@dhis2/ui' ``` @@ -1750,11 +1750,11 @@ import { SvgFile24 } from '@dhis2/ui' #### Usage -To use `SvgFileDocument16`, you can import the component from the `@dhis2/ui` library +To use `IconFileDocument16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFileDocument16 } from '@dhis2/ui' +import { IconFileDocument16 } from '@dhis2/ui' ``` @@ -1769,11 +1769,11 @@ import { SvgFileDocument16 } from '@dhis2/ui' #### Usage -To use `SvgFileDocument24`, you can import the component from the `@dhis2/ui` library +To use `IconFileDocument24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFileDocument24 } from '@dhis2/ui' +import { IconFileDocument24 } from '@dhis2/ui' ``` @@ -1788,11 +1788,11 @@ import { SvgFileDocument24 } from '@dhis2/ui' #### Usage -To use `SvgFilter16`, you can import the component from the `@dhis2/ui` library +To use `IconFilter16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFilter16 } from '@dhis2/ui' +import { IconFilter16 } from '@dhis2/ui' ``` @@ -1807,11 +1807,11 @@ import { SvgFilter16 } from '@dhis2/ui' #### Usage -To use `SvgFilter24`, you can import the component from the `@dhis2/ui` library +To use `IconFilter24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFilter24 } from '@dhis2/ui' +import { IconFilter24 } from '@dhis2/ui' ``` @@ -1826,11 +1826,11 @@ import { SvgFilter24 } from '@dhis2/ui' #### Usage -To use `SvgFlag16`, you can import the component from the `@dhis2/ui` library +To use `IconFlag16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFlag16 } from '@dhis2/ui' +import { IconFlag16 } from '@dhis2/ui' ``` @@ -1845,11 +1845,11 @@ import { SvgFlag16 } from '@dhis2/ui' #### Usage -To use `SvgFlag24`, you can import the component from the `@dhis2/ui` library +To use `IconFlag24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFlag24 } from '@dhis2/ui' +import { IconFlag24 } from '@dhis2/ui' ``` @@ -1864,11 +1864,11 @@ import { SvgFlag24 } from '@dhis2/ui' #### Usage -To use `SvgFolder16`, you can import the component from the `@dhis2/ui` library +To use `IconFolder16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolder16 } from '@dhis2/ui' +import { IconFolder16 } from '@dhis2/ui' ``` @@ -1883,11 +1883,11 @@ import { SvgFolder16 } from '@dhis2/ui' #### Usage -To use `SvgFolder24`, you can import the component from the `@dhis2/ui` library +To use `IconFolder24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolder24 } from '@dhis2/ui' +import { IconFolder24 } from '@dhis2/ui' ``` @@ -1902,11 +1902,11 @@ import { SvgFolder24 } from '@dhis2/ui' #### Usage -To use `SvgFolderOpen16`, you can import the component from the `@dhis2/ui` library +To use `IconFolderOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolderOpen16 } from '@dhis2/ui' +import { IconFolderOpen16 } from '@dhis2/ui' ``` @@ -1921,11 +1921,11 @@ import { SvgFolderOpen16 } from '@dhis2/ui' #### Usage -To use `SvgFolderOpen24`, you can import the component from the `@dhis2/ui` library +To use `IconFolderOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFolderOpen24 } from '@dhis2/ui' +import { IconFolderOpen24 } from '@dhis2/ui' ``` @@ -1940,11 +1940,11 @@ import { SvgFolderOpen24 } from '@dhis2/ui' #### Usage -To use `SvgFullscreen16`, you can import the component from the `@dhis2/ui` library +To use `IconFullscreen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreen16 } from '@dhis2/ui' +import { IconFullscreen16 } from '@dhis2/ui' ``` @@ -1959,11 +1959,11 @@ import { SvgFullscreen16 } from '@dhis2/ui' #### Usage -To use `SvgFullscreen24`, you can import the component from the `@dhis2/ui` library +To use `IconFullscreen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreen24 } from '@dhis2/ui' +import { IconFullscreen24 } from '@dhis2/ui' ``` @@ -1978,11 +1978,11 @@ import { SvgFullscreen24 } from '@dhis2/ui' #### Usage -To use `SvgFullscreenExit16`, you can import the component from the `@dhis2/ui` library +To use `IconFullscreenExit16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreenExit16 } from '@dhis2/ui' +import { IconFullscreenExit16 } from '@dhis2/ui' ``` @@ -1997,11 +1997,11 @@ import { SvgFullscreenExit16 } from '@dhis2/ui' #### Usage -To use `SvgFullscreenExit24`, you can import the component from the `@dhis2/ui` library +To use `IconFullscreenExit24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgFullscreenExit24 } from '@dhis2/ui' +import { IconFullscreenExit24 } from '@dhis2/ui' ``` @@ -2016,11 +2016,11 @@ import { SvgFullscreenExit24 } from '@dhis2/ui' #### Usage -To use `SvgHome16`, you can import the component from the `@dhis2/ui` library +To use `IconHome16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgHome16 } from '@dhis2/ui' +import { IconHome16 } from '@dhis2/ui' ``` @@ -2035,11 +2035,11 @@ import { SvgHome16 } from '@dhis2/ui' #### Usage -To use `SvgHome24`, you can import the component from the `@dhis2/ui` library +To use `IconHome24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgHome24 } from '@dhis2/ui' +import { IconHome24 } from '@dhis2/ui' ``` @@ -2054,11 +2054,11 @@ import { SvgHome24 } from '@dhis2/ui' #### Usage -To use `SvgImage16`, you can import the component from the `@dhis2/ui` library +To use `IconImage16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImage16 } from '@dhis2/ui' +import { IconImage16 } from '@dhis2/ui' ``` @@ -2073,11 +2073,11 @@ import { SvgImage16 } from '@dhis2/ui' #### Usage -To use `SvgImage24`, you can import the component from the `@dhis2/ui` library +To use `IconImage24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImage24 } from '@dhis2/ui' +import { IconImage24 } from '@dhis2/ui' ``` @@ -2092,11 +2092,11 @@ import { SvgImage24 } from '@dhis2/ui' #### Usage -To use `SvgImportItems24`, you can import the component from the `@dhis2/ui` library +To use `IconImportItems24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgImportItems24 } from '@dhis2/ui' +import { IconImportItems24 } from '@dhis2/ui' ``` @@ -2111,11 +2111,11 @@ import { SvgImportItems24 } from '@dhis2/ui' #### Usage -To use `SvgInfo16`, you can import the component from the `@dhis2/ui` library +To use `IconInfo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfo16 } from '@dhis2/ui' +import { IconInfo16 } from '@dhis2/ui' ``` @@ -2130,11 +2130,11 @@ import { SvgInfo16 } from '@dhis2/ui' #### Usage -To use `SvgInfo24`, you can import the component from the `@dhis2/ui` library +To use `IconInfo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfo24 } from '@dhis2/ui' +import { IconInfo24 } from '@dhis2/ui' ``` @@ -2149,11 +2149,11 @@ import { SvgInfo24 } from '@dhis2/ui' #### Usage -To use `SvgInfoFilled16`, you can import the component from the `@dhis2/ui` library +To use `IconInfoFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfoFilled16 } from '@dhis2/ui' +import { IconInfoFilled16 } from '@dhis2/ui' ``` @@ -2168,11 +2168,11 @@ import { SvgInfoFilled16 } from '@dhis2/ui' #### Usage -To use `SvgInfoFilled24`, you can import the component from the `@dhis2/ui` library +To use `IconInfoFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgInfoFilled24 } from '@dhis2/ui' +import { IconInfoFilled24 } from '@dhis2/ui' ``` @@ -2187,11 +2187,11 @@ import { SvgInfoFilled24 } from '@dhis2/ui' #### Usage -To use `SvgLaunch16`, you can import the component from the `@dhis2/ui` library +To use `IconLaunch16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLaunch16 } from '@dhis2/ui' +import { IconLaunch16 } from '@dhis2/ui' ``` @@ -2206,11 +2206,11 @@ import { SvgLaunch16 } from '@dhis2/ui' #### Usage -To use `SvgLaunch24`, you can import the component from the `@dhis2/ui` library +To use `IconLaunch24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLaunch24 } from '@dhis2/ui' +import { IconLaunch24 } from '@dhis2/ui' ``` @@ -2225,11 +2225,11 @@ import { SvgLaunch24 } from '@dhis2/ui' #### Usage -To use `SvgLayoutColumns16`, you can import the component from the `@dhis2/ui` library +To use `IconLayoutColumns16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutColumns16 } from '@dhis2/ui' +import { IconLayoutColumns16 } from '@dhis2/ui' ``` @@ -2244,11 +2244,11 @@ import { SvgLayoutColumns16 } from '@dhis2/ui' #### Usage -To use `SvgLayoutColumns24`, you can import the component from the `@dhis2/ui` library +To use `IconLayoutColumns24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutColumns24 } from '@dhis2/ui' +import { IconLayoutColumns24 } from '@dhis2/ui' ``` @@ -2263,11 +2263,11 @@ import { SvgLayoutColumns24 } from '@dhis2/ui' #### Usage -To use `SvgLayoutRows16`, you can import the component from the `@dhis2/ui` library +To use `IconLayoutRows16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutRows16 } from '@dhis2/ui' +import { IconLayoutRows16 } from '@dhis2/ui' ``` @@ -2282,11 +2282,11 @@ import { SvgLayoutRows16 } from '@dhis2/ui' #### Usage -To use `SvgLayoutRows24`, you can import the component from the `@dhis2/ui` library +To use `IconLayoutRows24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLayoutRows24 } from '@dhis2/ui' +import { IconLayoutRows24 } from '@dhis2/ui' ``` @@ -2301,11 +2301,11 @@ import { SvgLayoutRows24 } from '@dhis2/ui' #### Usage -To use `SvgLegend16`, you can import the component from the `@dhis2/ui` library +To use `IconLegend16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLegend16 } from '@dhis2/ui' +import { IconLegend16 } from '@dhis2/ui' ``` @@ -2320,11 +2320,11 @@ import { SvgLegend16 } from '@dhis2/ui' #### Usage -To use `SvgLegend24`, you can import the component from the `@dhis2/ui` library +To use `IconLegend24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLegend24 } from '@dhis2/ui' +import { IconLegend24 } from '@dhis2/ui' ``` @@ -2339,11 +2339,11 @@ import { SvgLegend24 } from '@dhis2/ui' #### Usage -To use `SvgLink16`, you can import the component from the `@dhis2/ui` library +To use `IconLink16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLink16 } from '@dhis2/ui' +import { IconLink16 } from '@dhis2/ui' ``` @@ -2358,11 +2358,11 @@ import { SvgLink16 } from '@dhis2/ui' #### Usage -To use `SvgLink24`, you can import the component from the `@dhis2/ui` library +To use `IconLink24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLink24 } from '@dhis2/ui' +import { IconLink24 } from '@dhis2/ui' ``` @@ -2377,11 +2377,11 @@ import { SvgLink24 } from '@dhis2/ui' #### Usage -To use `SvgList16`, you can import the component from the `@dhis2/ui` library +To use `IconList16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgList16 } from '@dhis2/ui' +import { IconList16 } from '@dhis2/ui' ``` @@ -2396,11 +2396,11 @@ import { SvgList16 } from '@dhis2/ui' #### Usage -To use `SvgList24`, you can import the component from the `@dhis2/ui` library +To use `IconList24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgList24 } from '@dhis2/ui' +import { IconList24 } from '@dhis2/ui' ``` @@ -2415,11 +2415,11 @@ import { SvgList24 } from '@dhis2/ui' #### Usage -To use `SvgLocation16`, you can import the component from the `@dhis2/ui` library +To use `IconLocation16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLocation16 } from '@dhis2/ui' +import { IconLocation16 } from '@dhis2/ui' ``` @@ -2434,11 +2434,11 @@ import { SvgLocation16 } from '@dhis2/ui' #### Usage -To use `SvgLocation24`, you can import the component from the `@dhis2/ui` library +To use `IconLocation24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLocation24 } from '@dhis2/ui' +import { IconLocation24 } from '@dhis2/ui' ``` @@ -2453,11 +2453,11 @@ import { SvgLocation24 } from '@dhis2/ui' #### Usage -To use `SvgLock16`, you can import the component from the `@dhis2/ui` library +To use `IconLock16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLock16 } from '@dhis2/ui' +import { IconLock16 } from '@dhis2/ui' ``` @@ -2472,11 +2472,11 @@ import { SvgLock16 } from '@dhis2/ui' #### Usage -To use `SvgLock24`, you can import the component from the `@dhis2/ui` library +To use `IconLock24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLock24 } from '@dhis2/ui' +import { IconLock24 } from '@dhis2/ui' ``` @@ -2491,11 +2491,11 @@ import { SvgLock24 } from '@dhis2/ui' #### Usage -To use `SvgLockOpen16`, you can import the component from the `@dhis2/ui` library +To use `IconLockOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLockOpen16 } from '@dhis2/ui' +import { IconLockOpen16 } from '@dhis2/ui' ``` @@ -2510,11 +2510,11 @@ import { SvgLockOpen16 } from '@dhis2/ui' #### Usage -To use `SvgLockOpen24`, you can import the component from the `@dhis2/ui` library +To use `IconLockOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLockOpen24 } from '@dhis2/ui' +import { IconLockOpen24 } from '@dhis2/ui' ``` @@ -2529,11 +2529,11 @@ import { SvgLockOpen24 } from '@dhis2/ui' #### Usage -To use `SvgLogOut16`, you can import the component from the `@dhis2/ui` library +To use `IconLogOut16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLogOut16 } from '@dhis2/ui' +import { IconLogOut16 } from '@dhis2/ui' ``` @@ -2548,11 +2548,11 @@ import { SvgLogOut16 } from '@dhis2/ui' #### Usage -To use `SvgLogOut24`, you can import the component from the `@dhis2/ui` library +To use `IconLogOut24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgLogOut24 } from '@dhis2/ui' +import { IconLogOut24 } from '@dhis2/ui' ``` @@ -2567,11 +2567,11 @@ import { SvgLogOut24 } from '@dhis2/ui' #### Usage -To use `SvgMail16`, you can import the component from the `@dhis2/ui` library +To use `IconMail16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMail16 } from '@dhis2/ui' +import { IconMail16 } from '@dhis2/ui' ``` @@ -2586,11 +2586,11 @@ import { SvgMail16 } from '@dhis2/ui' #### Usage -To use `SvgMail24`, you can import the component from the `@dhis2/ui` library +To use `IconMail24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMail24 } from '@dhis2/ui' +import { IconMail24 } from '@dhis2/ui' ``` @@ -2605,11 +2605,11 @@ import { SvgMail24 } from '@dhis2/ui' #### Usage -To use `SvgMailOpen16`, you can import the component from the `@dhis2/ui` library +To use `IconMailOpen16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMailOpen16 } from '@dhis2/ui' +import { IconMailOpen16 } from '@dhis2/ui' ``` @@ -2624,11 +2624,11 @@ import { SvgMailOpen16 } from '@dhis2/ui' #### Usage -To use `SvgMailOpen24`, you can import the component from the `@dhis2/ui` library +To use `IconMailOpen24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMailOpen24 } from '@dhis2/ui' +import { IconMailOpen24 } from '@dhis2/ui' ``` @@ -2643,11 +2643,11 @@ import { SvgMailOpen24 } from '@dhis2/ui' #### Usage -To use `SvgMessages16`, you can import the component from the `@dhis2/ui` library +To use `IconMessages16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMessages16 } from '@dhis2/ui' +import { IconMessages16 } from '@dhis2/ui' ``` @@ -2662,11 +2662,11 @@ import { SvgMessages16 } from '@dhis2/ui' #### Usage -To use `SvgMessages24`, you can import the component from the `@dhis2/ui` library +To use `IconMessages24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMessages24 } from '@dhis2/ui' +import { IconMessages24 } from '@dhis2/ui' ``` @@ -2681,11 +2681,11 @@ import { SvgMessages24 } from '@dhis2/ui' #### Usage -To use `SvgMore16`, you can import the component from the `@dhis2/ui` library +To use `IconMore16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMore16 } from '@dhis2/ui' +import { IconMore16 } from '@dhis2/ui' ``` @@ -2700,11 +2700,11 @@ import { SvgMore16 } from '@dhis2/ui' #### Usage -To use `SvgMore24`, you can import the component from the `@dhis2/ui` library +To use `IconMore24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMore24 } from '@dhis2/ui' +import { IconMore24 } from '@dhis2/ui' ``` @@ -2719,11 +2719,11 @@ import { SvgMore24 } from '@dhis2/ui' #### Usage -To use `SvgMove16`, you can import the component from the `@dhis2/ui` library +To use `IconMove16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMove16 } from '@dhis2/ui' +import { IconMove16 } from '@dhis2/ui' ``` @@ -2738,11 +2738,11 @@ import { SvgMove16 } from '@dhis2/ui' #### Usage -To use `SvgMove24`, you can import the component from the `@dhis2/ui` library +To use `IconMove24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgMove24 } from '@dhis2/ui' +import { IconMove24 } from '@dhis2/ui' ``` @@ -2757,11 +2757,11 @@ import { SvgMove24 } from '@dhis2/ui' #### Usage -To use `SvgPushLeft16`, you can import the component from the `@dhis2/ui` library +To use `IconPushLeft16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushLeft16 } from '@dhis2/ui' +import { IconPushLeft16 } from '@dhis2/ui' ``` @@ -2776,11 +2776,11 @@ import { SvgPushLeft16 } from '@dhis2/ui' #### Usage -To use `SvgPushLeft24`, you can import the component from the `@dhis2/ui` library +To use `IconPushLeft24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushLeft24 } from '@dhis2/ui' +import { IconPushLeft24 } from '@dhis2/ui' ``` @@ -2795,11 +2795,11 @@ import { SvgPushLeft24 } from '@dhis2/ui' #### Usage -To use `SvgPushRight16`, you can import the component from the `@dhis2/ui` library +To use `IconPushRight16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushRight16 } from '@dhis2/ui' +import { IconPushRight16 } from '@dhis2/ui' ``` @@ -2814,11 +2814,11 @@ import { SvgPushRight16 } from '@dhis2/ui' #### Usage -To use `SvgPushRight24`, you can import the component from the `@dhis2/ui` library +To use `IconPushRight24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgPushRight24 } from '@dhis2/ui' +import { IconPushRight24 } from '@dhis2/ui' ``` @@ -2833,11 +2833,11 @@ import { SvgPushRight24 } from '@dhis2/ui' #### Usage -To use `SvgQuestion16`, you can import the component from the `@dhis2/ui` library +To use `IconQuestion16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestion16 } from '@dhis2/ui' +import { IconQuestion16 } from '@dhis2/ui' ``` @@ -2852,11 +2852,11 @@ import { SvgQuestion16 } from '@dhis2/ui' #### Usage -To use `SvgQuestion24`, you can import the component from the `@dhis2/ui` library +To use `IconQuestion24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestion24 } from '@dhis2/ui' +import { IconQuestion24 } from '@dhis2/ui' ``` @@ -2871,11 +2871,11 @@ import { SvgQuestion24 } from '@dhis2/ui' #### Usage -To use `SvgQuestionFilled16`, you can import the component from the `@dhis2/ui` library +To use `IconQuestionFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestionFilled16 } from '@dhis2/ui' +import { IconQuestionFilled16 } from '@dhis2/ui' ``` @@ -2890,11 +2890,11 @@ import { SvgQuestionFilled16 } from '@dhis2/ui' #### Usage -To use `SvgQuestionFilled24`, you can import the component from the `@dhis2/ui` library +To use `IconQuestionFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQuestionFilled24 } from '@dhis2/ui' +import { IconQuestionFilled24 } from '@dhis2/ui' ``` @@ -2909,11 +2909,11 @@ import { SvgQuestionFilled24 } from '@dhis2/ui' #### Usage -To use `SvgQueue16`, you can import the component from the `@dhis2/ui` library +To use `IconQueue16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQueue16 } from '@dhis2/ui' +import { IconQueue16 } from '@dhis2/ui' ``` @@ -2928,11 +2928,11 @@ import { SvgQueue16 } from '@dhis2/ui' #### Usage -To use `SvgQueue24`, you can import the component from the `@dhis2/ui` library +To use `IconQueue24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgQueue24 } from '@dhis2/ui' +import { IconQueue24 } from '@dhis2/ui' ``` @@ -2947,11 +2947,11 @@ import { SvgQueue24 } from '@dhis2/ui' #### Usage -To use `SvgRedo16`, you can import the component from the `@dhis2/ui` library +To use `IconRedo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRedo16 } from '@dhis2/ui' +import { IconRedo16 } from '@dhis2/ui' ``` @@ -2966,11 +2966,11 @@ import { SvgRedo16 } from '@dhis2/ui' #### Usage -To use `SvgRedo24`, you can import the component from the `@dhis2/ui` library +To use `IconRedo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRedo24 } from '@dhis2/ui' +import { IconRedo24 } from '@dhis2/ui' ``` @@ -2985,11 +2985,11 @@ import { SvgRedo24 } from '@dhis2/ui' #### Usage -To use `SvgReorder16`, you can import the component from the `@dhis2/ui` library +To use `IconReorder16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReorder16 } from '@dhis2/ui' +import { IconReorder16 } from '@dhis2/ui' ``` @@ -3004,11 +3004,11 @@ import { SvgReorder16 } from '@dhis2/ui' #### Usage -To use `SvgReorder24`, you can import the component from the `@dhis2/ui` library +To use `IconReorder24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReorder24 } from '@dhis2/ui' +import { IconReorder24 } from '@dhis2/ui' ``` @@ -3023,11 +3023,11 @@ import { SvgReorder24 } from '@dhis2/ui' #### Usage -To use `SvgReply16`, you can import the component from the `@dhis2/ui` library +To use `IconReply16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReply16 } from '@dhis2/ui' +import { IconReply16 } from '@dhis2/ui' ``` @@ -3042,11 +3042,11 @@ import { SvgReply16 } from '@dhis2/ui' #### Usage -To use `SvgReply24`, you can import the component from the `@dhis2/ui` library +To use `IconReply24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgReply24 } from '@dhis2/ui' +import { IconReply24 } from '@dhis2/ui' ``` @@ -3061,11 +3061,11 @@ import { SvgReply24 } from '@dhis2/ui' #### Usage -To use `SvgRuler16`, you can import the component from the `@dhis2/ui` library +To use `IconRuler16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRuler16 } from '@dhis2/ui' +import { IconRuler16 } from '@dhis2/ui' ``` @@ -3080,11 +3080,11 @@ import { SvgRuler16 } from '@dhis2/ui' #### Usage -To use `SvgRuler24`, you can import the component from the `@dhis2/ui` library +To use `IconRuler24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgRuler24 } from '@dhis2/ui' +import { IconRuler24 } from '@dhis2/ui' ``` @@ -3099,11 +3099,11 @@ import { SvgRuler24 } from '@dhis2/ui' #### Usage -To use `SvgSave16`, you can import the component from the `@dhis2/ui` library +To use `IconSave16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSave16 } from '@dhis2/ui' +import { IconSave16 } from '@dhis2/ui' ``` @@ -3118,11 +3118,11 @@ import { SvgSave16 } from '@dhis2/ui' #### Usage -To use `SvgSave24`, you can import the component from the `@dhis2/ui` library +To use `IconSave24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSave24 } from '@dhis2/ui' +import { IconSave24 } from '@dhis2/ui' ``` @@ -3137,11 +3137,11 @@ import { SvgSave24 } from '@dhis2/ui' #### Usage -To use `SvgSearch16`, you can import the component from the `@dhis2/ui` library +To use `IconSearch16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSearch16 } from '@dhis2/ui' +import { IconSearch16 } from '@dhis2/ui' ``` @@ -3156,11 +3156,11 @@ import { SvgSearch16 } from '@dhis2/ui' #### Usage -To use `SvgSearch24`, you can import the component from the `@dhis2/ui` library +To use `IconSearch24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSearch24 } from '@dhis2/ui' +import { IconSearch24 } from '@dhis2/ui' ``` @@ -3175,11 +3175,11 @@ import { SvgSearch24 } from '@dhis2/ui' #### Usage -To use `SvgSettings16`, you can import the component from the `@dhis2/ui` library +To use `IconSettings16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSettings16 } from '@dhis2/ui' +import { IconSettings16 } from '@dhis2/ui' ``` @@ -3194,11 +3194,11 @@ import { SvgSettings16 } from '@dhis2/ui' #### Usage -To use `SvgSettings24`, you can import the component from the `@dhis2/ui` library +To use `IconSettings24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSettings24 } from '@dhis2/ui' +import { IconSettings24 } from '@dhis2/ui' ``` @@ -3213,11 +3213,11 @@ import { SvgSettings24 } from '@dhis2/ui' #### Usage -To use `SvgShare16`, you can import the component from the `@dhis2/ui` library +To use `IconShare16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgShare16 } from '@dhis2/ui' +import { IconShare16 } from '@dhis2/ui' ``` @@ -3232,11 +3232,11 @@ import { SvgShare16 } from '@dhis2/ui' #### Usage -To use `SvgShare24`, you can import the component from the `@dhis2/ui` library +To use `IconShare24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgShare24 } from '@dhis2/ui' +import { IconShare24 } from '@dhis2/ui' ``` @@ -3251,11 +3251,11 @@ import { SvgShare24 } from '@dhis2/ui' #### Usage -To use `SvgStar16`, you can import the component from the `@dhis2/ui` library +To use `IconStar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStar16 } from '@dhis2/ui' +import { IconStar16 } from '@dhis2/ui' ``` @@ -3270,11 +3270,11 @@ import { SvgStar16 } from '@dhis2/ui' #### Usage -To use `SvgStar24`, you can import the component from the `@dhis2/ui` library +To use `IconStar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStar24 } from '@dhis2/ui' +import { IconStar24 } from '@dhis2/ui' ``` @@ -3289,11 +3289,11 @@ import { SvgStar24 } from '@dhis2/ui' #### Usage -To use `SvgStarFilled16`, you can import the component from the `@dhis2/ui` library +To use `IconStarFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStarFilled16 } from '@dhis2/ui' +import { IconStarFilled16 } from '@dhis2/ui' ``` @@ -3308,11 +3308,11 @@ import { SvgStarFilled16 } from '@dhis2/ui' #### Usage -To use `SvgStarFilled24`, you can import the component from the `@dhis2/ui` library +To use `IconStarFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgStarFilled24 } from '@dhis2/ui' +import { IconStarFilled24 } from '@dhis2/ui' ``` @@ -3327,11 +3327,11 @@ import { SvgStarFilled24 } from '@dhis2/ui' #### Usage -To use `SvgSubscribe16`, you can import the component from the `@dhis2/ui` library +To use `IconSubscribe16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribe16 } from '@dhis2/ui' +import { IconSubscribe16 } from '@dhis2/ui' ``` @@ -3346,11 +3346,11 @@ import { SvgSubscribe16 } from '@dhis2/ui' #### Usage -To use `SvgSubscribe24`, you can import the component from the `@dhis2/ui` library +To use `IconSubscribe24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribe24 } from '@dhis2/ui' +import { IconSubscribe24 } from '@dhis2/ui' ``` @@ -3365,11 +3365,11 @@ import { SvgSubscribe24 } from '@dhis2/ui' #### Usage -To use `SvgSubscribeOff16`, you can import the component from the `@dhis2/ui` library +To use `IconSubscribeOff16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribeOff16 } from '@dhis2/ui' +import { IconSubscribeOff16 } from '@dhis2/ui' ``` @@ -3384,11 +3384,11 @@ import { SvgSubscribeOff16 } from '@dhis2/ui' #### Usage -To use `SvgSubscribeOff24`, you can import the component from the `@dhis2/ui` library +To use `IconSubscribeOff24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubscribeOff24 } from '@dhis2/ui' +import { IconSubscribeOff24 } from '@dhis2/ui' ``` @@ -3403,11 +3403,11 @@ import { SvgSubscribeOff24 } from '@dhis2/ui' #### Usage -To use `SvgSubtract16`, you can import the component from the `@dhis2/ui` library +To use `IconSubtract16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtract16 } from '@dhis2/ui' +import { IconSubtract16 } from '@dhis2/ui' ``` @@ -3422,11 +3422,11 @@ import { SvgSubtract16 } from '@dhis2/ui' #### Usage -To use `SvgSubtract24`, you can import the component from the `@dhis2/ui` library +To use `IconSubtract24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtract24 } from '@dhis2/ui' +import { IconSubtract24 } from '@dhis2/ui' ``` @@ -3441,11 +3441,11 @@ import { SvgSubtract24 } from '@dhis2/ui' #### Usage -To use `SvgSubtractCircle16`, you can import the component from the `@dhis2/ui` library +To use `IconSubtractCircle16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtractCircle16 } from '@dhis2/ui' +import { IconSubtractCircle16 } from '@dhis2/ui' ``` @@ -3460,11 +3460,11 @@ import { SvgSubtractCircle16 } from '@dhis2/ui' #### Usage -To use `SvgSubtractCircle24`, you can import the component from the `@dhis2/ui` library +To use `IconSubtractCircle24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSubtractCircle24 } from '@dhis2/ui' +import { IconSubtractCircle24 } from '@dhis2/ui' ``` @@ -3479,11 +3479,11 @@ import { SvgSubtractCircle24 } from '@dhis2/ui' #### Usage -To use `SvgSync16`, you can import the component from the `@dhis2/ui` library +To use `IconSync16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSync16 } from '@dhis2/ui' +import { IconSync16 } from '@dhis2/ui' ``` @@ -3498,11 +3498,11 @@ import { SvgSync16 } from '@dhis2/ui' #### Usage -To use `SvgSync24`, you can import the component from the `@dhis2/ui` library +To use `IconSync24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgSync24 } from '@dhis2/ui' +import { IconSync24 } from '@dhis2/ui' ``` @@ -3517,11 +3517,11 @@ import { SvgSync24 } from '@dhis2/ui' #### Usage -To use `SvgTable16`, you can import the component from the `@dhis2/ui` library +To use `IconTable16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTable16 } from '@dhis2/ui' +import { IconTable16 } from '@dhis2/ui' ``` @@ -3536,11 +3536,11 @@ import { SvgTable16 } from '@dhis2/ui' #### Usage -To use `SvgTable24`, you can import the component from the `@dhis2/ui` library +To use `IconTable24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTable24 } from '@dhis2/ui' +import { IconTable24 } from '@dhis2/ui' ``` @@ -3555,11 +3555,11 @@ import { SvgTable24 } from '@dhis2/ui' #### Usage -To use `SvgTerminalWindow16`, you can import the component from the `@dhis2/ui` library +To use `IconTerminalWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTerminalWindow16 } from '@dhis2/ui' +import { IconTerminalWindow16 } from '@dhis2/ui' ``` @@ -3574,11 +3574,11 @@ import { SvgTerminalWindow16 } from '@dhis2/ui' #### Usage -To use `SvgTerminalWindow24`, you can import the component from the `@dhis2/ui` library +To use `IconTerminalWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTerminalWindow24 } from '@dhis2/ui' +import { IconTerminalWindow24 } from '@dhis2/ui' ``` @@ -3593,11 +3593,11 @@ import { SvgTerminalWindow24 } from '@dhis2/ui' #### Usage -To use `SvgTextBold16`, you can import the component from the `@dhis2/ui` library +To use `IconTextBold16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBold16 } from '@dhis2/ui' +import { IconTextBold16 } from '@dhis2/ui' ``` @@ -3612,11 +3612,11 @@ import { SvgTextBold16 } from '@dhis2/ui' #### Usage -To use `SvgTextBold24`, you can import the component from the `@dhis2/ui` library +To use `IconTextBold24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBold24 } from '@dhis2/ui' +import { IconTextBold24 } from '@dhis2/ui' ``` @@ -3631,11 +3631,11 @@ import { SvgTextBold24 } from '@dhis2/ui' #### Usage -To use `SvgTextBox16`, you can import the component from the `@dhis2/ui` library +To use `IconTextBox16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBox16 } from '@dhis2/ui' +import { IconTextBox16 } from '@dhis2/ui' ``` @@ -3650,11 +3650,11 @@ import { SvgTextBox16 } from '@dhis2/ui' #### Usage -To use `SvgTextBox24`, you can import the component from the `@dhis2/ui` library +To use `IconTextBox24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextBox24 } from '@dhis2/ui' +import { IconTextBox24 } from '@dhis2/ui' ``` @@ -3669,11 +3669,11 @@ import { SvgTextBox24 } from '@dhis2/ui' #### Usage -To use `SvgTextHeading16`, you can import the component from the `@dhis2/ui` library +To use `IconTextHeading16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextHeading16 } from '@dhis2/ui' +import { IconTextHeading16 } from '@dhis2/ui' ``` @@ -3688,11 +3688,11 @@ import { SvgTextHeading16 } from '@dhis2/ui' #### Usage -To use `SvgTextHeading24`, you can import the component from the `@dhis2/ui` library +To use `IconTextHeading24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextHeading24 } from '@dhis2/ui' +import { IconTextHeading24 } from '@dhis2/ui' ``` @@ -3707,11 +3707,11 @@ import { SvgTextHeading24 } from '@dhis2/ui' #### Usage -To use `SvgTextItalic16`, you can import the component from the `@dhis2/ui` library +To use `IconTextItalic16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextItalic16 } from '@dhis2/ui' +import { IconTextItalic16 } from '@dhis2/ui' ``` @@ -3726,11 +3726,11 @@ import { SvgTextItalic16 } from '@dhis2/ui' #### Usage -To use `SvgTextItalic24`, you can import the component from the `@dhis2/ui` library +To use `IconTextItalic24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextItalic24 } from '@dhis2/ui' +import { IconTextItalic24 } from '@dhis2/ui' ``` @@ -3745,11 +3745,11 @@ import { SvgTextItalic24 } from '@dhis2/ui' #### Usage -To use `SvgTextListOrdered16`, you can import the component from the `@dhis2/ui` library +To use `IconTextListOrdered16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListOrdered16 } from '@dhis2/ui' +import { IconTextListOrdered16 } from '@dhis2/ui' ``` @@ -3764,11 +3764,11 @@ import { SvgTextListOrdered16 } from '@dhis2/ui' #### Usage -To use `SvgTextListOrdered24`, you can import the component from the `@dhis2/ui` library +To use `IconTextListOrdered24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListOrdered24 } from '@dhis2/ui' +import { IconTextListOrdered24 } from '@dhis2/ui' ``` @@ -3783,11 +3783,11 @@ import { SvgTextListOrdered24 } from '@dhis2/ui' #### Usage -To use `SvgTextListUnordered16`, you can import the component from the `@dhis2/ui` library +To use `IconTextListUnordered16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListUnordered16 } from '@dhis2/ui' +import { IconTextListUnordered16 } from '@dhis2/ui' ``` @@ -3802,11 +3802,11 @@ import { SvgTextListUnordered16 } from '@dhis2/ui' #### Usage -To use `SvgTextListUnordered24`, you can import the component from the `@dhis2/ui` library +To use `IconTextListUnordered24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTextListUnordered24 } from '@dhis2/ui' +import { IconTextListUnordered24 } from '@dhis2/ui' ``` @@ -3821,11 +3821,11 @@ import { SvgTextListUnordered24 } from '@dhis2/ui' #### Usage -To use `SvgThumbDown16`, you can import the component from the `@dhis2/ui` library +To use `IconThumbDown16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbDown16 } from '@dhis2/ui' +import { IconThumbDown16 } from '@dhis2/ui' ``` @@ -3840,11 +3840,11 @@ import { SvgThumbDown16 } from '@dhis2/ui' #### Usage -To use `SvgThumbDown24`, you can import the component from the `@dhis2/ui` library +To use `IconThumbDown24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbDown24 } from '@dhis2/ui' +import { IconThumbDown24 } from '@dhis2/ui' ``` @@ -3859,11 +3859,11 @@ import { SvgThumbDown24 } from '@dhis2/ui' #### Usage -To use `SvgThumbUp16`, you can import the component from the `@dhis2/ui` library +To use `IconThumbUp16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbUp16 } from '@dhis2/ui' +import { IconThumbUp16 } from '@dhis2/ui' ``` @@ -3878,11 +3878,11 @@ import { SvgThumbUp16 } from '@dhis2/ui' #### Usage -To use `SvgThumbUp24`, you can import the component from the `@dhis2/ui` library +To use `IconThumbUp24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgThumbUp24 } from '@dhis2/ui' +import { IconThumbUp24 } from '@dhis2/ui' ``` @@ -3897,11 +3897,11 @@ import { SvgThumbUp24 } from '@dhis2/ui' #### Usage -To use `SvgTranslate16`, you can import the component from the `@dhis2/ui` library +To use `IconTranslate16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTranslate16 } from '@dhis2/ui' +import { IconTranslate16 } from '@dhis2/ui' ``` @@ -3916,11 +3916,11 @@ import { SvgTranslate16 } from '@dhis2/ui' #### Usage -To use `SvgTranslate24`, you can import the component from the `@dhis2/ui` library +To use `IconTranslate24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgTranslate24 } from '@dhis2/ui' +import { IconTranslate24 } from '@dhis2/ui' ``` @@ -3935,11 +3935,11 @@ import { SvgTranslate24 } from '@dhis2/ui' #### Usage -To use `SvgUndo16`, you can import the component from the `@dhis2/ui` library +To use `IconUndo16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUndo16 } from '@dhis2/ui' +import { IconUndo16 } from '@dhis2/ui' ``` @@ -3954,11 +3954,11 @@ import { SvgUndo16 } from '@dhis2/ui' #### Usage -To use `SvgUndo24`, you can import the component from the `@dhis2/ui` library +To use `IconUndo24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUndo24 } from '@dhis2/ui' +import { IconUndo24 } from '@dhis2/ui' ``` @@ -3973,11 +3973,11 @@ import { SvgUndo24 } from '@dhis2/ui' #### Usage -To use `SvgUpload16`, you can import the component from the `@dhis2/ui` library +To use `IconUpload16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUpload16 } from '@dhis2/ui' +import { IconUpload16 } from '@dhis2/ui' ``` @@ -3992,11 +3992,11 @@ import { SvgUpload16 } from '@dhis2/ui' #### Usage -To use `SvgUpload24`, you can import the component from the `@dhis2/ui` library +To use `IconUpload24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUpload24 } from '@dhis2/ui' +import { IconUpload24 } from '@dhis2/ui' ``` @@ -4011,11 +4011,11 @@ import { SvgUpload24 } from '@dhis2/ui' #### Usage -To use `SvgUser16`, you can import the component from the `@dhis2/ui` library +To use `IconUser16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUser16 } from '@dhis2/ui' +import { IconUser16 } from '@dhis2/ui' ``` @@ -4030,11 +4030,11 @@ import { SvgUser16 } from '@dhis2/ui' #### Usage -To use `SvgUser24`, you can import the component from the `@dhis2/ui` library +To use `IconUser24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUser24 } from '@dhis2/ui' +import { IconUser24 } from '@dhis2/ui' ``` @@ -4049,11 +4049,11 @@ import { SvgUser24 } from '@dhis2/ui' #### Usage -To use `SvgUserGroup16`, you can import the component from the `@dhis2/ui` library +To use `IconUserGroup16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUserGroup16 } from '@dhis2/ui' +import { IconUserGroup16 } from '@dhis2/ui' ``` @@ -4068,11 +4068,11 @@ import { SvgUserGroup16 } from '@dhis2/ui' #### Usage -To use `SvgUserGroup24`, you can import the component from the `@dhis2/ui` library +To use `IconUserGroup24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgUserGroup24 } from '@dhis2/ui' +import { IconUserGroup24 } from '@dhis2/ui' ``` @@ -4087,11 +4087,11 @@ import { SvgUserGroup24 } from '@dhis2/ui' #### Usage -To use `SvgView16`, you can import the component from the `@dhis2/ui` library +To use `IconView16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgView16 } from '@dhis2/ui' +import { IconView16 } from '@dhis2/ui' ``` @@ -4106,11 +4106,11 @@ import { SvgView16 } from '@dhis2/ui' #### Usage -To use `SvgView24`, you can import the component from the `@dhis2/ui` library +To use `IconView24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgView24 } from '@dhis2/ui' +import { IconView24 } from '@dhis2/ui' ``` @@ -4125,11 +4125,11 @@ import { SvgView24 } from '@dhis2/ui' #### Usage -To use `SvgViewOff16`, you can import the component from the `@dhis2/ui` library +To use `IconViewOff16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgViewOff16 } from '@dhis2/ui' +import { IconViewOff16 } from '@dhis2/ui' ``` @@ -4144,11 +4144,11 @@ import { SvgViewOff16 } from '@dhis2/ui' #### Usage -To use `SvgViewOff24`, you can import the component from the `@dhis2/ui` library +To use `IconViewOff24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgViewOff24 } from '@dhis2/ui' +import { IconViewOff24 } from '@dhis2/ui' ``` @@ -4163,11 +4163,11 @@ import { SvgViewOff24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationArea16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationArea16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationArea16 } from '@dhis2/ui' +import { IconVisualizationArea16 } from '@dhis2/ui' ``` @@ -4182,11 +4182,11 @@ import { SvgVisualizationArea16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationArea24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationArea24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationArea24 } from '@dhis2/ui' +import { IconVisualizationArea24 } from '@dhis2/ui' ``` @@ -4201,11 +4201,11 @@ import { SvgVisualizationArea24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationAreaStacked16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationAreaStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationAreaStacked16 } from '@dhis2/ui' +import { IconVisualizationAreaStacked16 } from '@dhis2/ui' ``` @@ -4220,11 +4220,11 @@ import { SvgVisualizationAreaStacked16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationAreaStacked24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationAreaStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationAreaStacked24 } from '@dhis2/ui' +import { IconVisualizationAreaStacked24 } from '@dhis2/ui' ``` @@ -4239,11 +4239,11 @@ import { SvgVisualizationAreaStacked24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationBar16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationBar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBar16 } from '@dhis2/ui' +import { IconVisualizationBar16 } from '@dhis2/ui' ``` @@ -4258,11 +4258,11 @@ import { SvgVisualizationBar16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationBar24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationBar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBar24 } from '@dhis2/ui' +import { IconVisualizationBar24 } from '@dhis2/ui' ``` @@ -4277,11 +4277,11 @@ import { SvgVisualizationBar24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationBarStacked16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationBarStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBarStacked16 } from '@dhis2/ui' +import { IconVisualizationBarStacked16 } from '@dhis2/ui' ``` @@ -4296,11 +4296,11 @@ import { SvgVisualizationBarStacked16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationBarStacked24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationBarStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationBarStacked24 } from '@dhis2/ui' +import { IconVisualizationBarStacked24 } from '@dhis2/ui' ``` @@ -4315,11 +4315,11 @@ import { SvgVisualizationBarStacked24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumn16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumn16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumn16 } from '@dhis2/ui' +import { IconVisualizationColumn16 } from '@dhis2/ui' ``` @@ -4334,11 +4334,11 @@ import { SvgVisualizationColumn16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumn24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumn24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumn24 } from '@dhis2/ui' +import { IconVisualizationColumn24 } from '@dhis2/ui' ``` @@ -4353,11 +4353,11 @@ import { SvgVisualizationColumn24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumnMulti16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumnMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnMulti16 } from '@dhis2/ui' +import { IconVisualizationColumnMulti16 } from '@dhis2/ui' ``` @@ -4372,11 +4372,11 @@ import { SvgVisualizationColumnMulti16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumnMulti24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumnMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnMulti24 } from '@dhis2/ui' +import { IconVisualizationColumnMulti24 } from '@dhis2/ui' ``` @@ -4391,11 +4391,11 @@ import { SvgVisualizationColumnMulti24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumnStacked16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumnStacked16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnStacked16 } from '@dhis2/ui' +import { IconVisualizationColumnStacked16 } from '@dhis2/ui' ``` @@ -4410,11 +4410,11 @@ import { SvgVisualizationColumnStacked16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationColumnStacked24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationColumnStacked24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationColumnStacked24 } from '@dhis2/ui' +import { IconVisualizationColumnStacked24 } from '@dhis2/ui' ``` @@ -4429,11 +4429,11 @@ import { SvgVisualizationColumnStacked24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationGauge16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationGauge16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationGauge16 } from '@dhis2/ui' +import { IconVisualizationGauge16 } from '@dhis2/ui' ``` @@ -4448,11 +4448,11 @@ import { SvgVisualizationGauge16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationGauge24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationGauge24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationGauge24 } from '@dhis2/ui' +import { IconVisualizationGauge24 } from '@dhis2/ui' ``` @@ -4467,11 +4467,11 @@ import { SvgVisualizationGauge24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLine16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLine16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLine16 } from '@dhis2/ui' +import { IconVisualizationLine16 } from '@dhis2/ui' ``` @@ -4486,11 +4486,11 @@ import { SvgVisualizationLine16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLine24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLine24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLine24 } from '@dhis2/ui' +import { IconVisualizationLine24 } from '@dhis2/ui' ``` @@ -4505,11 +4505,11 @@ import { SvgVisualizationLine24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLineMulti16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLineMulti16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLineMulti16 } from '@dhis2/ui' +import { IconVisualizationLineMulti16 } from '@dhis2/ui' ``` @@ -4524,11 +4524,11 @@ import { SvgVisualizationLineMulti16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLineMulti24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLineMulti24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLineMulti24 } from '@dhis2/ui' +import { IconVisualizationLineMulti24 } from '@dhis2/ui' ``` @@ -4543,11 +4543,11 @@ import { SvgVisualizationLineMulti24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLinelist16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLinelist16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLinelist16 } from '@dhis2/ui' +import { IconVisualizationLinelist16 } from '@dhis2/ui' ``` @@ -4562,11 +4562,11 @@ import { SvgVisualizationLinelist16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationLinelist24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationLinelist24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationLinelist24 } from '@dhis2/ui' +import { IconVisualizationLinelist24 } from '@dhis2/ui' ``` @@ -4581,11 +4581,11 @@ import { SvgVisualizationLinelist24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationPie16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationPie16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPie16 } from '@dhis2/ui' +import { IconVisualizationPie16 } from '@dhis2/ui' ``` @@ -4600,11 +4600,11 @@ import { SvgVisualizationPie16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationPie24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationPie24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPie24 } from '@dhis2/ui' +import { IconVisualizationPie24 } from '@dhis2/ui' ``` @@ -4619,11 +4619,11 @@ import { SvgVisualizationPie24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationPivotTable16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationPivotTable16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPivotTable16 } from '@dhis2/ui' +import { IconVisualizationPivotTable16 } from '@dhis2/ui' ``` @@ -4638,11 +4638,11 @@ import { SvgVisualizationPivotTable16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationPivotTable24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationPivotTable24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationPivotTable24 } from '@dhis2/ui' +import { IconVisualizationPivotTable24 } from '@dhis2/ui' ``` @@ -4657,11 +4657,11 @@ import { SvgVisualizationPivotTable24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationRadar16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationRadar16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationRadar16 } from '@dhis2/ui' +import { IconVisualizationRadar16 } from '@dhis2/ui' ``` @@ -4676,11 +4676,11 @@ import { SvgVisualizationRadar16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationRadar24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationRadar24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationRadar24 } from '@dhis2/ui' +import { IconVisualizationRadar24 } from '@dhis2/ui' ``` @@ -4695,11 +4695,11 @@ import { SvgVisualizationRadar24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationScatter16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationScatter16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationScatter16 } from '@dhis2/ui' +import { IconVisualizationScatter16 } from '@dhis2/ui' ``` @@ -4714,11 +4714,11 @@ import { SvgVisualizationScatter16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationScatter24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationScatter24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationScatter24 } from '@dhis2/ui' +import { IconVisualizationScatter24 } from '@dhis2/ui' ``` @@ -4733,11 +4733,11 @@ import { SvgVisualizationScatter24 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationSingleValue16`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationSingleValue16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationSingleValue16 } from '@dhis2/ui' +import { IconVisualizationSingleValue16 } from '@dhis2/ui' ``` @@ -4752,11 +4752,11 @@ import { SvgVisualizationSingleValue16 } from '@dhis2/ui' #### Usage -To use `SvgVisualizationSingleValue24`, you can import the component from the `@dhis2/ui` library +To use `IconVisualizationSingleValue24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgVisualizationSingleValue24 } from '@dhis2/ui' +import { IconVisualizationSingleValue24 } from '@dhis2/ui' ``` @@ -4771,11 +4771,11 @@ import { SvgVisualizationSingleValue24 } from '@dhis2/ui' #### Usage -To use `SvgWarning16`, you can import the component from the `@dhis2/ui` library +To use `IconWarning16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarning16 } from '@dhis2/ui' +import { IconWarning16 } from '@dhis2/ui' ``` @@ -4790,11 +4790,11 @@ import { SvgWarning16 } from '@dhis2/ui' #### Usage -To use `SvgWarning24`, you can import the component from the `@dhis2/ui` library +To use `IconWarning24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarning24 } from '@dhis2/ui' +import { IconWarning24 } from '@dhis2/ui' ``` @@ -4809,11 +4809,11 @@ import { SvgWarning24 } from '@dhis2/ui' #### Usage -To use `SvgWarningFilled16`, you can import the component from the `@dhis2/ui` library +To use `IconWarningFilled16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarningFilled16 } from '@dhis2/ui' +import { IconWarningFilled16 } from '@dhis2/ui' ``` @@ -4828,11 +4828,11 @@ import { SvgWarningFilled16 } from '@dhis2/ui' #### Usage -To use `SvgWarningFilled24`, you can import the component from the `@dhis2/ui` library +To use `IconWarningFilled24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWarningFilled24 } from '@dhis2/ui' +import { IconWarningFilled24 } from '@dhis2/ui' ``` @@ -4847,11 +4847,11 @@ import { SvgWarningFilled24 } from '@dhis2/ui' #### Usage -To use `SvgWindow16`, you can import the component from the `@dhis2/ui` library +To use `IconWindow16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWindow16 } from '@dhis2/ui' +import { IconWindow16 } from '@dhis2/ui' ``` @@ -4866,11 +4866,11 @@ import { SvgWindow16 } from '@dhis2/ui' #### Usage -To use `SvgWindow24`, you can import the component from the `@dhis2/ui` library +To use `IconWindow24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWindow24 } from '@dhis2/ui' +import { IconWindow24 } from '@dhis2/ui' ``` @@ -4885,11 +4885,11 @@ import { SvgWindow24 } from '@dhis2/ui' #### Usage -To use `SvgWorld16`, you can import the component from the `@dhis2/ui` library +To use `IconWorld16`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWorld16 } from '@dhis2/ui' +import { IconWorld16 } from '@dhis2/ui' ``` @@ -4904,11 +4904,11 @@ import { SvgWorld16 } from '@dhis2/ui' #### Usage -To use `SvgWorld24`, you can import the component from the `@dhis2/ui` library +To use `IconWorld24`, you can import the component from the `@dhis2/ui` library ```js -import { SvgWorld24 } from '@dhis2/ui' +import { IconWorld24 } from '@dhis2/ui' ``` diff --git a/scripts/generate-api-docs.js b/scripts/generate-api-docs.js index b78f02496e..883089f41d 100755 --- a/scripts/generate-api-docs.js +++ b/scripts/generate-api-docs.js @@ -76,11 +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 += `To use \`${ast.displayName}\`, you can import the component from the \`@dhis2/ui\` library \n\n` + table += `To use \`${toDisplayName}\`, you can import the component from the \`@dhis2/ui\` library \n\n` table += ` \`\`\`js -import { ${ast.displayName} } from '@dhis2/ui' +import { ${toDisplayName} } from '@dhis2/ui' \`\`\`\n\n ` } From 269b291ccf52750d4a2e3aedb35f0836c4f53141 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 12:59:42 +0000 Subject: [PATCH 04/28] docs: fix undefined description --- scripts/generate-api-docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generate-api-docs.js b/scripts/generate-api-docs.js index 883089f41d..d4143781e2 100755 --- a/scripts/generate-api-docs.js +++ b/scripts/generate-api-docs.js @@ -100,7 +100,7 @@ import { ${toDisplayName} } from '@dhis2/ui' defaultValue ? `\`${defaultValue.value}\`` : '' }`, required: `${required ? '*' : ''}`, - description: description.replace(/\n/g, '
'), + description: description?.replace(/\n/g, '
') ?? '', type: `${format_type(type)}`, }) ) From 15f5c503a29c202a4641632a2d2f129ef6c4b0e2 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 13:38:05 +0000 Subject: [PATCH 05/28] docs: fix undefined type issue --- scripts/generate-api-docs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/generate-api-docs.js b/scripts/generate-api-docs.js index d4143781e2..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}` } } } From 90bcd61dd849d6efa856daf5067514be741dd67e Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 13:43:38 +0000 Subject: [PATCH 06/28] docs: temporary remove cy for the sake of this pr --- .github/workflows/dhis2-verify-lib.yml | 7 ------- 1 file changed, 7 deletions(-) diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index 589461a2b5..d51bbcf8eb 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -86,11 +86,6 @@ jobs: if: "!github.event.push.repository.fork && github.actor != 'dependabot[bot]'" needs: [build] - strategy: - fail-fast: false - matrix: - containers: [1, 2, 3, 4] - steps: - name: Checkout uses: actions/checkout@v2 @@ -115,8 +110,6 @@ jobs: start: 'yarn cy:start' wait-on: 'http://localhost:5000' wait-on-timeout: 300 - record: true - parallel: true group: 'e2e' tag: ${{ github.event_name }} env: From 2331a003c61ebf849ae82075825ec797fa42ff0b Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 13:43:48 +0000 Subject: [PATCH 07/28] docs: add alertbar samples --- collections/ui/API.md | 26 +++++++++++-- components/alert/API.md | 8 ++-- components/alert/src/alert-bar/alert-bar.js | 6 ++- components/calendar/API.md | 18 +++++++++ docs/docs/components/alertbar.md | 43 +++++++++++++++++++++ 5 files changed, 92 insertions(+), 9 deletions(-) diff --git a/collections/ui/API.md b/collections/ui/API.md index adeb2567f7..de3a9ddbff 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -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|||| @@ -231,6 +231,24 @@ 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 diff --git a/components/alert/API.md b/components/alert/API.md index 23e669859f..6aa9db37b9 100644 --- a/components/alert/API.md +++ b/components/alert/API.md @@ -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|||| 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/calendar/API.md b/components/calendar/API.md index cc8e8edee3..26f8eaac53 100644 --- a/components/calendar/API.md +++ b/components/calendar/API.md @@ -24,3 +24,21 @@ import { Calendar } from '@dhis2/ui' |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/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 8a04ce5e0b..eadcac2316 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -46,6 +46,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,16 +63,29 @@ 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_. + #### Warning 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 +97,12 @@ 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 +137,24 @@ 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. From b437101ff33d538565ac3c2c088ea1ee9d6eb491 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 15:57:01 +0000 Subject: [PATCH 08/28] docs: temp update workflow --- .github/workflows/dhis2-verify-lib.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index d51bbcf8eb..493d8100ab 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -110,8 +110,6 @@ jobs: start: 'yarn cy:start' wait-on: 'http://localhost:5000' wait-on-timeout: 300 - group: 'e2e' - tag: ${{ github.event_name }} env: BROWSER: none COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }} From d9b3afb6d279e1631f6c34230e8a69cc4156d8fe Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 15:57:09 +0000 Subject: [PATCH 09/28] docs: change formatting --- docs/docs/components/alertbar.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index eadcac2316..59be58979e 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -65,7 +65,9 @@ An alert bar communicates something to the user by showing a prominent, floating ```jsx - 1000 objects updated. + + 1000 objects updated. + ``` @@ -73,7 +75,6 @@ An alert bar communicates something to the user by showing a prominent, floating - 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_. - #### Warning @@ -82,7 +83,9 @@ An alert bar communicates something to the user by showing a prominent, floating ```jsx - Some data is taking a long time to sync. + + Some data is taking a long time to sync. + ``` @@ -99,7 +102,9 @@ An alert bar communicates something to the user by showing a prominent, floating ```jsx - There was a problem loading this dashboard. + + There was a problem loading this dashboard. + ``` @@ -143,13 +148,15 @@ An alert bar communicates something to the user by showing a prominent, floating actions={[ { label: 'Save', - onClick: clickHandler + onClick: clickHandler, }, { label: 'Cancel', - onClick: clickHandler + onClick: clickHandler, }, - ]} permanent> + ]} + permanent + > Hello world From 4cd1944314d9adac34e342c97a20c5ef7c50bc09 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 16:43:24 +0000 Subject: [PATCH 10/28] docs: add alertstack documentation --- docs/docs/components/alertbar.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 59be58979e..9763051dcc 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -173,6 +173,22 @@ 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 From 631b8f60abea83eef53241d8c326745ca867e8cc Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 3 Jan 2024 16:50:46 +0000 Subject: [PATCH 11/28] docs: name avatar properly --- docs/docs/components/alertbar.md | 4 ++-- docs/docs/components/avatar.md | 17 ++++++++++++++--- docs/sidebars.js | 2 +- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 9763051dcc..b2bf91fed6 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -180,9 +180,9 @@ As you can see with all the demo's above, we've used the `AlertStack` 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' +import { AlertStack, AlertBar } from '@dhis2/ui'; -; + ... ... ... 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/sidebars.js b/docs/sidebars.js index a9034a905b..64fba85447 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', ], }, { From 2988ee4536a0685fb577cb0b88c559047dc94f24 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 5 Feb 2024 15:41:09 +0100 Subject: [PATCH 12/28] docs: add useAlert to alertbar --- docs/docs/components/alertbar.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index b2bf91fed6..2e89524e18 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -18,6 +18,19 @@ An alert bar communicates something to the user by showing a prominent, floating ## Usage +Usage of the AlertBar component is not recommended when using the Application Platform, as integration is already implemented directly. + +An easy way to show the AlertBar using the Application Platform is by using the `useAlert` hook. A simple example of how to use the `useAlert` hook is shown below: + +```js +// Create the alert +const { show } = useAlert('My alert message', { duration: 3000 }) +// ...later (show the alert) +show() +``` + +You can read more about the hook on the [Developer Portal](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. From a60708884ed99b38866f8a3438f1ce982c174b5c Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 5 Feb 2024 15:42:32 +0100 Subject: [PATCH 13/28] docs: linting --- docs/docs/components/alertbar.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 2e89524e18..1bc46fcbf5 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -18,7 +18,7 @@ An alert bar communicates something to the user by showing a prominent, floating ## Usage -Usage of the AlertBar component is not recommended when using the Application Platform, as integration is already implemented directly. +Usage of the AlertBar component is not recommended when using the Application Platform, as integration is already implemented directly. An easy way to show the AlertBar using the Application Platform is by using the `useAlert` hook. A simple example of how to use the `useAlert` hook is shown below: @@ -193,9 +193,9 @@ As you can see with all the demo's above, we've used the `AlertStack` 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'; +import { AlertStack, AlertBar } from '@dhis2/ui' - +; ... ... ... From 1528c7e0c72171dd777243fba2d17231cff1d22d Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 14:39:55 +0100 Subject: [PATCH 14/28] docs: update alertbar notice --- docs/docs/components/alertbar.md | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 1bc46fcbf5..1b47225297 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -18,18 +18,35 @@ 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. +::: -An easy way to show the AlertBar using the Application Platform is by using the `useAlert` hook. A simple example of how to use the `useAlert` hook is shown below: +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. -```js -// Create the alert -const { show } = useAlert('My alert message', { duration: 3000 }) -// ...later (show the alert) -show() +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() + + // ... +} ``` -You can read more about the hook on the [Developer Portal](https://developers.dhis2.org/docs/app-runtime/hooks/useAlert). +Read more about the `useAlert()` hook at the [App Runtime documentation]((https://developers.dhis2.org/docs/app-runtime/hooks/useAlert)) ### When to use From cb8003d7b7ffe9702a0f951485f3d69a5ea2c44d Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 14:41:05 +0100 Subject: [PATCH 15/28] docs: formatting --- docs/docs/components/alertbar.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 1b47225297..8369fb6c6a 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -46,7 +46,7 @@ const MyComponent = () => { } ``` -Read more about the `useAlert()` hook at the [App Runtime documentation]((https://developers.dhis2.org/docs/app-runtime/hooks/useAlert)) +Read more about the `useAlert()` hook at the [App Runtime documentation](<(https://developers.dhis2.org/docs/app-runtime/hooks/useAlert)>) ### When to use @@ -211,7 +211,6 @@ To use the `AlertStack` component, you can simply wrap your `AlertBar` component ```jsx import { AlertStack, AlertBar } from '@dhis2/ui' - ; ... ... From 4f656ca20ad33e2558eb9d42ce7d9c69f1386726 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 14:53:47 +0100 Subject: [PATCH 16/28] docs: fix link --- docs/docs/components/alertbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 8369fb6c6a..ce9c55d133 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -46,7 +46,7 @@ const MyComponent = () => { } ``` -Read more about the `useAlert()` hook at the [App Runtime documentation](<(https://developers.dhis2.org/docs/app-runtime/hooks/useAlert)>) +Read more about the `useAlert()` hook at the [App Runtime documentation](https://developers.dhis2.org/docs/app-runtime/hooks/useAlert) ### When to use From 3e49884b5aa08fbc1c6b0ae3cf71874ec87d204a Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 16:23:50 +0100 Subject: [PATCH 17/28] docs: improved ui docs --- docs/docs/components/button.md | 51 +++++++++++- docs/docs/components/calendar.md | 136 ++++++++++++++++++++++--------- docs/docs/components/card.md | 4 + 3 files changed, 153 insertions(+), 38 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 4f71631b3f..b5e9881a7b 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -11,7 +11,7 @@ import API from '../../../components/button/API.md' Buttons are used to trigger actions. There are different button variants that are used for different types of actions. - + ## Usage @@ -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,13 @@ 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 +128,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 +142,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 +160,13 @@ Buttons are available in different sizes. Use the size that matches the usage gu +```jsx +
+ + +
+``` + - 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 +181,13 @@ Buttons are available in different sizes. Use the size that matches the usage gu +```jsx +
+ + +
+``` + - 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 +200,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 +215,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.md b/docs/docs/components/calendar.md index 52a86da41c..4f01edf93b 100644 --- a/docs/docs/components/calendar.md +++ b/docs/docs/components/calendar.md @@ -18,55 +18,117 @@ 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. You can see all three calendars below with their respective code blocks. + +### Narrow day names -
- - - -
+ + + +```jsx + +``` + +### Short day names + + + +```jsx + +``` + +### English day names + + + + + +```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). +::: + +### Nepali -
- - -
+ +```jsx + +``` + +### Transliterated in latin characters + + + + +```jsx + +``` + ## Gregorian calendar Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic. 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. From 91f5544a08955db5cf9cf97a6e80c8eb52a7890f Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 16:24:21 +0100 Subject: [PATCH 18/28] docs: formatting --- docs/docs/components/button.md | 18 ++++++++++-------- docs/docs/components/calendar.md | 11 ++++------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index b5e9881a7b..6fa258091f 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -11,7 +11,7 @@ import API from '../../../components/button/API.md' Buttons are used to trigger actions. There are different button variants that are used for different types of actions. - + ## Usage @@ -88,7 +88,9 @@ Buttons are used to trigger actions. There are different button variants that ar ```jsx
- +
``` @@ -161,9 +163,9 @@ Buttons are available in different sizes. Use the size that matches the usage gu ```jsx -
- - +
+ +
``` @@ -182,9 +184,9 @@ Buttons are available in different sizes. Use the size that matches the usage gu ```jsx -
- - +
+ +
``` diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md index 4f01edf93b..c78a482d26 100644 --- a/docs/docs/components/calendar.md +++ b/docs/docs/components/calendar.md @@ -88,11 +88,11 @@ Ethiopic calendar with narrow day names, short day names and localised to Englis Nepali calendar (with Nepali and English characters) -:::note +:::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). ::: -### Nepali +### Nepali ```jsx - + ``` ### Transliterated in latin characters + Date: Mon, 4 Mar 2024 21:25:47 +0100 Subject: [PATCH 19/28] docs: adjust calendar docs --- docs/docs/components/calendar.md | 140 +++++++++++++++---------------- 1 file changed, 69 insertions(+), 71 deletions(-) diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md index c78a482d26..c85341a2c6 100644 --- a/docs/docs/components/calendar.md +++ b/docs/docs/components/calendar.md @@ -18,39 +18,36 @@ 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. You can see all three calendars below with their respective code blocks. +Ethiopic calendar with narrow day names, short day names and localised to English. ### Narrow day names - +
+ + + +
-```jsx - -``` - -### Short day names - - - - +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 ``` -### English day names - - - - - -```jsx - -``` - ## Nepali calendar Nepali calendar (with Nepali and English characters) @@ -92,40 +67,40 @@ 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). ::: -### Nepali - +
+ + +
+ + +```jsx + // Napali - - -```jsx - -``` -### Transliterated in latin characters - - + // Nepali transliterated in latin characters - - -```jsx - ``` + ## Gregorian calendar Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic. @@ -164,6 +139,16 @@ 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 @@ -198,13 +183,26 @@ 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 From 0960924c7a02422ca603db373a0ca1e6f4087e43 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 4 Mar 2024 21:49:21 +0100 Subject: [PATCH 20/28] docs: more files updated with demos --- docs/docs/components/calendar-input.md | 14 ++++++++ docs/docs/components/calendar.md | 16 ++------- docs/docs/components/checkbox.md | 5 +++ docs/docs/components/chip.md | 17 ++++++++++ docs/docs/components/data-table.md | 46 +++++++++++++++++++------- 5 files changed, 73 insertions(+), 25 deletions(-) diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md index f1000cc5ca..4c078ba853 100644 --- a/docs/docs/components/calendar-input.md +++ b/docs/docs/components/calendar-input.md @@ -115,6 +115,20 @@ Ethiopic calendar (with narrow day names, short day names and localised to Engli +The wrapper is a custom component that wraps the calendar and input field. It is not part of the library. This component is called `CalendarDemo` in our code, and can be found in the [source code](https://github.com/dhis2/ui/blob/08c3e684970437048179179d8cfad5e2edcfc814/docs/src/components/CalendarDemo.jsx#L6). + +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 c85341a2c6..e579721b6c 100644 --- a/docs/docs/components/calendar.md +++ b/docs/docs/components/calendar.md @@ -100,7 +100,6 @@ Nepali is a custom calendar not natively implemented in Temporal and Nepali loca /> ``` - ## Gregorian calendar Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic. @@ -142,11 +141,7 @@ 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 @@ -186,14 +181,9 @@ 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`. ::: @@ -202,7 +192,7 @@ Additionally the component supports a number of other calendars that are not cur ### 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). +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/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. -

Storybook demo: Date table.

+

Storybook demo: Date table.

 +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 -

Storybook demo: Sorting.

+

Storybook demo: 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 -

Storybook demo: Filtering inline.

+

Storybook demo: 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 -

Storybook demo: Fixed header.

+

Storybook demo: 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 -

Storybook demo: Fixed column.

+

Storybook demo: Fixed column.

 - 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 -

Storybook demo: Expandable rows.

+

Storybook demo: 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 -

Storybook demo: Selectable rows.

+

Storybook demo: 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 -

Storybook demo: Draggable rows.

+

Storybook demo: 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 -

Storybook demo: Bordered cells.

+

Storybook demo: 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 -

Storybook demo: Built-in styles.

+

Storybook demo: 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 -

Storybook demo: Large cells.

+

Storybook demo: 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) From d481f9801bfd7940b398233b2531607579a11866 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 11:06:29 +0000 Subject: [PATCH 21/28] docs: add developer portal to sidebar --- docs/sidebars.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/sidebars.js b/docs/sidebars.js index 64fba85447..17b9c320ac 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -96,6 +96,11 @@ const sidebars = { ], }, 'package/changelog', + { + type: 'link', + label: 'Developer Portal', + href: 'https://developers.dhis2.org', + }, ], } From af65b0736fbd840cafacb70a4a4118ff164ea101 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 11:06:40 +0000 Subject: [PATCH 22/28] docs: add code samples --- docs/docs/components/elevation.md | 10 +++- docs/docs/components/fileinput.md | 27 +++++++++- docs/docs/components/inputfield.md | 57 ++++++++++++++++++++- docs/docs/components/loading.md | 13 +++++ docs/docs/components/menu.md | 79 ++++++++++++++++++++++++++++-- 5 files changed, 179 insertions(+), 7 deletions(-) diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md index d2e6f23a2a..6fa1a85857 100644 --- a/docs/docs/components/elevation.md +++ b/docs/docs/components/elevation.md @@ -14,12 +14,20 @@ 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..6bce948ec6 100644 --- a/docs/docs/components/fileinput.md +++ b/docs/docs/components/fileinput.md @@ -20,6 +20,8 @@ A file input is used to choose and upload files. ## Usage + + ### When to use - **Adding files from a user's machine**. Use a file input when a user can upload a file from their local machine. This is usually as part of a form. @@ -40,6 +42,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 +56,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 +71,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 +92,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 +109,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..c68fe6e036 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,10 @@ 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 +85,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 +101,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 +118,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 +136,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 +150,10 @@ 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 +164,10 @@ 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 +177,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 +190,10 @@ 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 +203,10 @@ 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 +215,9 @@ 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 +236,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..ffa4067827 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,9 @@ 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 +71,12 @@ 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..fdaa29b78a 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,14 @@ 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 +179,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 +203,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 +228,13 @@ 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 +244,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) From 9563c8674d9a3d41b42827b37cfec58f2cef3e7f Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 12:34:26 +0000 Subject: [PATCH 23/28] docs: add more code samples --- docs/docs/components/modal.md | 67 ++++++++++++++++- docs/docs/components/notice-box.md | 28 +++++++- docs/docs/components/org-unit-tree.md | 4 +- docs/docs/components/pagination.md | 14 +++- docs/docs/components/popover.md | 4 +- docs/docs/components/radio.md | 7 +- docs/docs/components/segmented-control.md | 32 +++++++-- docs/docs/components/select.md | 88 ++++++++++++++++++++++- docs/docs/components/switch.md | 13 +++- docs/docs/components/tab.md | 18 ++++- docs/docs/components/tag.md | 21 +++++- docs/docs/components/tooltip.md | 13 +++- docs/docs/components/transfer.md | 2 +- 13 files changed, 292 insertions(+), 19 deletions(-) diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md index b0716ce761..88d9a9e72b 100755 --- a/docs/docs/components/modal.md +++ b/docs/docs/components/modal.md @@ -53,10 +53,32 @@ 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 +90,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 +122,26 @@ 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 +151,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..60beb169c3 100644 --- a/docs/docs/components/notice-box.md +++ b/docs/docs/components/notice-box.md @@ -49,6 +49,12 @@ 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 +66,13 @@ 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 +85,13 @@ 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 +103,12 @@ 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 +134,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. -

See storybook for demos.

+

See storybook for demos.

 ## 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..d76ab06e05 100644 --- a/docs/docs/components/pagination.md +++ b/docs/docs/components/pagination.md @@ -43,6 +43,10 @@ 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 +56,10 @@ 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 +70,10 @@ 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 +83,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. -

Storybook demo: Popover.

+

Storybook demo: Popover.

 ## 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..8129ff1794 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 +81,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..d71157e077 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -53,6 +53,15 @@ 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 +77,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 +113,7 @@ Selects are used to choose one or more items from a list of options. + - 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 +136,14 @@ 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 +162,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 +201,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 +231,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 +261,14 @@ 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 +290,15 @@ 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 +320,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 +338,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..590c9e0ef2 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,6 +44,12 @@ Switches are used to toggle something between an on and off state. + +```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..2ca8a6c11e 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -51,6 +51,13 @@ 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 +73,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 +92,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..67e5cf15e0 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,10 @@ 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 +78,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..d3a7b8d83f 100644 --- a/docs/docs/components/transfer.md +++ b/docs/docs/components/transfer.md @@ -44,7 +44,7 @@ A transfer is made up of two lists. The _source list_ that shows the available o ### Footer - + - Use footers for actions that apply to a list, like _Reload items_. From 32d9f7a229a434beaf02fc199b691cdfb6a63c90 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 12:35:41 +0000 Subject: [PATCH 24/28] docs: add select sample --- docs/docs/components/select.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index d71157e077..d2aaccece8 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -113,6 +113,13 @@ 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. From 15a43edb929cdf530926229900f6419759e59ef6 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 13:42:54 +0000 Subject: [PATCH 25/28] docs: add transfer code samples --- docs/docs/components/transfer.md | 73 ++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/docs/docs/components/transfer.md b/docs/docs/components/transfer.md index d3a7b8d83f..d27b41d4f6 100644 --- a/docs/docs/components/transfer.md +++ b/docs/docs/components/transfer.md @@ -32,12 +32,47 @@ 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. @@ -47,6 +82,25 @@ A transfer is made up of two lists. The _source list_ that shows the available o +```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 +109,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 +126,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 From 68cc358ebe11917dc176a86a3a7a619f1d8da53b Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 13:57:22 +0000 Subject: [PATCH 26/28] chore: formatting --- docs/docs/components/elevation.md | 11 +++++- docs/docs/components/fileinput.md | 8 ++-- docs/docs/components/inputfield.md | 42 ++++++++++++++++---- docs/docs/components/loading.md | 4 +- docs/docs/components/menu.md | 35 ++++++++++------- docs/docs/components/modal.md | 48 ++++++++++++++++++----- docs/docs/components/notice-box.md | 22 ++++++++--- docs/docs/components/pagination.md | 27 +++++++++++-- docs/docs/components/segmented-control.md | 11 +++--- docs/docs/components/select.md | 15 +++++-- docs/docs/components/switch.md | 2 +- docs/docs/components/tab.md | 11 ++++-- docs/docs/components/tooltip.md | 4 +- docs/docs/components/transfer.md | 14 +++++-- 14 files changed, 187 insertions(+), 67 deletions(-) diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md index 6fa1a85857..8d9f2ed4ed 100644 --- a/docs/docs/components/elevation.md +++ b/docs/docs/components/elevation.md @@ -23,7 +23,16 @@ Elevation is used to create and communicate depth in an interface. 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
+
+ An elevated element +
``` This example usees the `e200` variant. diff --git a/docs/docs/components/fileinput.md b/docs/docs/components/fileinput.md index 6bce948ec6..d1de2e8b4a 100644 --- a/docs/docs/components/fileinput.md +++ b/docs/docs/components/fileinput.md @@ -20,8 +20,6 @@ A file input is used to choose and upload files. ## Usage - - ### When to use - **Adding files from a user's machine**. Use a file input when a user can upload a file from their local machine. This is usually as part of a form. @@ -94,9 +92,9 @@ A file input is used to choose and upload files. ```jsx - - - + + + ``` diff --git a/docs/docs/components/inputfield.md b/docs/docs/components/inputfield.md index c68fe6e036..236d5af4ac 100644 --- a/docs/docs/components/inputfield.md +++ b/docs/docs/components/inputfield.md @@ -56,7 +56,7 @@ 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. @@ -70,7 +70,11 @@ 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. @@ -151,7 +155,12 @@ 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. @@ -165,7 +174,9 @@ 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. @@ -179,7 +190,7 @@ 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. @@ -191,7 +202,12 @@ An input is used to enter data, like text or a number. ```jsx - + ``` - Use a number input for entering numbers. @@ -204,7 +220,12 @@ 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. @@ -216,8 +237,13 @@ 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 diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md index ffa4067827..c4be767ddb 100644 --- a/docs/docs/components/loading.md +++ b/docs/docs/components/loading.md @@ -54,8 +54,9 @@ 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 @@ -77,6 +78,7 @@ Loaders are used to show that something is in progress. They keep users informed ``` + - 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 fdaa29b78a..ec0be1f67b 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -132,10 +132,10 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ```jsx - + - + @@ -158,9 +158,13 @@ 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= {}/> + } label="Filter data" /> + } label="Change time period" /> + } + label="Open in Data Visualizer app" + suffix={} + /> ``` @@ -181,9 +185,9 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ```jsx - } label="Save" /> - } label="Rename" /> - } label="Share" /> + } label="Save" /> + } label="Rename" /> + } label="Share" /> ``` @@ -205,11 +209,11 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ```jsx - } label="Save" /> - } label="Rename" /> - } label="Share" /> + } label="Save" /> + } label="Rename" /> + } label="Share" /> - } label="Delete program" /> + } label="Delete program" /> ``` @@ -230,11 +234,12 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ```jsx - } label="Save" /> - } label="Rename" /> - } label="Share" /> + } 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. diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md index 88d9a9e72b..b6905db6e8 100755 --- a/docs/docs/components/modal.md +++ b/docs/docs/components/modal.md @@ -66,14 +66,28 @@ The `hide` variable used in the demo's below are initiated using `useState(true) Modal title - - + + - - + + @@ -126,17 +140,31 @@ The `hide` variable used in the demo's below are initiated using `useState(true) Update profile - - + + - There's a problem with this form. - + There's a problem with this form. - - + + diff --git a/docs/docs/components/notice-box.md b/docs/docs/components/notice-box.md index 60beb169c3..c50f2a65bc 100644 --- a/docs/docs/components/notice-box.md +++ b/docs/docs/components/notice-box.md @@ -51,7 +51,8 @@ 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. + Dashboard data can take a few hours to update, so the most recent data might + not be shown. ``` @@ -68,8 +69,12 @@ 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. -
+ No one will be able to find this program because it doesn't have any + assigned organisation units. +
+ ``` @@ -87,8 +92,12 @@ A notice box shows important information about a situation. ```jsx - There isn't any data because there was a problem generating analytics tables. -
+ There isn't any data because there was a problem generating analytics + tables. +
+ ``` @@ -105,7 +114,8 @@ A notice box shows important information about a situation. ```jsx - Your password has been reset. You can log in with your username and password. + Your password has been reset. You can log in with your username and + password. ``` diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md index d76ab06e05..4ca8aebef0 100644 --- a/docs/docs/components/pagination.md +++ b/docs/docs/components/pagination.md @@ -44,7 +44,14 @@ 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. @@ -57,7 +64,14 @@ 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. @@ -71,7 +85,14 @@ Different elements of the pagination component can be included, depending on the ```jsx - + ``` - Changes the number of items included in a page. diff --git a/docs/docs/components/segmented-control.md b/docs/docs/components/segmented-control.md index 8129ff1794..3c6cf47520 100644 --- a/docs/docs/components/segmented-control.md +++ b/docs/docs/components/segmented-control.md @@ -36,19 +36,20 @@ A segmented control is used to choose between related options that have an effec ## Usage ```jsx - diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index d2aaccece8..1b1730b288 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -61,7 +61,6 @@ Selects are used to choose one or more items from a list of options. ``` - - Use a single select if the user can only choose one option. #### Multi select @@ -78,7 +77,7 @@ Selects are used to choose one or more items from a list of options. ```jsx - + @@ -144,7 +143,10 @@ Selects are used to choose one or more items from a list of options. ```jsx - + @@ -276,6 +278,7 @@ Selects are used to choose one or more items from a list of options. ``` + - 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. @@ -298,7 +301,11 @@ Selects are used to choose one or more items from a list of options. ```jsx - + diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index 590c9e0ef2..4cb22f1113 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -50,7 +50,7 @@ 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. +- 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 diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md index 2ca8a6c11e..f989e3ce36 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -53,11 +53,14 @@ Tabs are used to navigate between different views within the same page or contex ```jsx - }>Notifications - } selected>Sharing and access - }>Downloads + }>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. @@ -77,7 +80,7 @@ Tabs are used to navigate between different views within the same page or contex Tab label 1 Tab label 2 - Tab label 3 + Tab label 3 Tab label 4 ``` diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md index 67e5cf15e0..ab07d7173b 100644 --- a/docs/docs/components/tooltip.md +++ b/docs/docs/components/tooltip.md @@ -65,7 +65,9 @@ A tooltip is used to show contextual information when triggered by clicking, foc ```jsx -Hover to trigger a tooltip with a longer open delay and shorter close delay. + + Hover to trigger a tooltip with a longer open delay and shorter close delay. + ``` - Tooltips have two delay durations: `open` and `close`. diff --git a/docs/docs/components/transfer.md b/docs/docs/components/transfer.md index d27b41d4f6..ebc5340ff0 100644 --- a/docs/docs/components/transfer.md +++ b/docs/docs/components/transfer.md @@ -35,7 +35,7 @@ A transfer is made up of two lists. The _source list_ that shows the available o 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', @@ -69,10 +69,18 @@ const onChange = (payload) => setSelected(payload.selected) The `header` component is as follows: ```jsx -

{props.label}

+

+ {props.label} +

``` - - Use headers for titles that make it clear what the transfer options are. - _Source list_ headers could also contain group filters. From 90ce56f856098b473eef4648a99082fe184eb6f8 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Wed, 17 Apr 2024 13:59:59 +0000 Subject: [PATCH 27/28] chore: undo workflow changes --- .github/workflows/dhis2-verify-lib.yml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index 493d8100ab..589461a2b5 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -86,6 +86,11 @@ jobs: if: "!github.event.push.repository.fork && github.actor != 'dependabot[bot]'" needs: [build] + strategy: + fail-fast: false + matrix: + containers: [1, 2, 3, 4] + steps: - name: Checkout uses: actions/checkout@v2 @@ -110,6 +115,10 @@ jobs: start: 'yarn cy:start' wait-on: 'http://localhost:5000' wait-on-timeout: 300 + record: true + parallel: true + group: 'e2e' + tag: ${{ github.event_name }} env: BROWSER: none COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }} From d02a84bb3de324949645fba17c507c9b5756e573 Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Mon, 29 Apr 2024 11:52:57 -0400 Subject: [PATCH 28/28] docs: updated jsx and removed redundant comment --- docs/docs/components/calendar-input.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md index 4c078ba853..607a3af15d 100644 --- a/docs/docs/components/calendar-input.md +++ b/docs/docs/components/calendar-input.md @@ -115,14 +115,11 @@ Ethiopic calendar (with narrow day names, short day names and localised to Engli -The wrapper is a custom component that wraps the calendar and input field. It is not part of the library. This component is called `CalendarDemo` in our code, and can be found in the [source code](https://github.com/dhis2/ui/blob/08c3e684970437048179179d8cfad5e2edcfc814/docs/src/components/CalendarDemo.jsx#L6). - The Gregorian with initial date is then generated with this code. ```jsx -