From cf444b24443549dfc90987ed532bc4de8af1983d Mon Sep 17 00:00:00 2001 From: Rene Pot Date: Tue, 10 Sep 2024 13:36:02 +0100 Subject: [PATCH] docs: migrate demos to embed instead (#1568) * docs: first demo of embedding docs * docs(demo): add controls to alertbar * chore: add check to only run on non-draft PRs * chore: simply * docs: update demos * docs: format * docs: fix demo url * docs: fix 2 linting issues * chore: undo draft test change * docs: simplify demo story paths * chore: update outdated github action * docs: create elevation story * chore: update demo url * docs: implement styling for button Co-authored-by: Joe Cooper <33054985+cooper-joe@users.noreply.github.com> * docs: implement styling for button Co-authored-by: Joe Cooper <33054985+cooper-joe@users.noreply.github.com> * docs: implement styling for button Co-authored-by: Joe Cooper <33054985+cooper-joe@users.noreply.github.com> * docs: implement styling for button Co-authored-by: Joe Cooper <33054985+cooper-joe@users.noreply.github.com> * docs: fix wording --------- Co-authored-by: Mozafar Haider Co-authored-by: Joe Cooper <33054985+cooper-joe@users.noreply.github.com> --- .github/workflows/dhis2-verify-lib.yml | 11 +- collections/forms/i18n/en.pot | 4 +- .../src/alert-bar/alert-bar.prod.stories.js | 35 ++- .../src/stories/calendar.prod.stories.js | 35 +++ components/card/src/card.prod.stories.js | 9 +- .../css-variables.prod.stories.js | 61 +++++ .../file-input-field.prod.stories.js | 1 + .../input-field/input-field.prod.stories.js | 4 +- .../circular-loader.prod.stories.js | 1 + .../modal/src/modal/modal.prod.stories.js | 57 +++++ .../pagination/src/pagination.prod.stories.js | 7 +- .../single-select-field.prod.stories.js | 7 + .../single-select.prod.stories.js | 2 +- docs/docs/components/alertbar.md | 67 +++--- docs/docs/components/avatar.md | 23 +- docs/docs/components/button.md | 64 +++--- docs/docs/components/calendar-input.md | 107 +-------- docs/docs/components/calendar.md | 198 +++++++--------- docs/docs/components/card.md | 12 +- docs/docs/components/checkbox.md | 27 ++- docs/docs/components/chip.md | 36 +-- docs/docs/components/data-table.md | 82 ++++--- docs/docs/components/elevation.md | 22 +- docs/docs/components/fileinput.md | 73 +++--- docs/docs/components/inputfield.md | 141 +++++++----- docs/docs/components/loading.md | 78 ++++--- docs/docs/components/menu.md | 176 ++++++--------- docs/docs/components/modal.md | 69 +++--- docs/docs/components/notice-box.md | 73 +++--- docs/docs/components/org-unit-tree.md | 14 +- docs/docs/components/pagination.md | 32 +-- docs/docs/components/popover.md | 8 +- docs/docs/components/radio.md | 30 ++- docs/docs/components/segmented-control.md | 32 +-- docs/docs/components/select.md | 212 +++++------------- docs/docs/components/switch.md | 23 +- docs/docs/components/tab.md | 38 ++-- docs/docs/components/tag.md | 96 ++++++-- docs/docs/components/tooltip.md | 53 +++-- docs/docs/components/transfer.md | 74 +++--- docs/src/components/CalendarDemo.jsx | 66 ------ docs/src/components/DemoComponent.jsx | 75 ++++++- docs/src/components/DemoComponent.module.css | 35 +++ docs/src/components/ModalDemos.jsx | 168 -------------- docs/src/components/TransferDemos.jsx | 189 ---------------- docs/src/constants.js | 2 + 46 files changed, 1174 insertions(+), 1455 deletions(-) delete mode 100644 docs/src/components/CalendarDemo.jsx delete mode 100644 docs/src/components/ModalDemos.jsx delete mode 100644 docs/src/components/TransferDemos.jsx create mode 100644 docs/src/constants.js diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index b591890c4b..b6db804855 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -48,7 +48,7 @@ jobs: - run: ./scripts/create-artifact.sh - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 with: name: lib-build path: lib-build.tar @@ -63,7 +63,7 @@ jobs: with: node-version: 20.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build @@ -84,7 +84,7 @@ jobs: with: node-version: 20.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build @@ -100,7 +100,6 @@ jobs: runs-on: ubuntu-latest if: "!github.event.push.repository.fork && github.actor != 'dependabot[bot]'" needs: [build, setup-matrix] - strategy: fail-fast: false matrix: @@ -116,7 +115,7 @@ jobs: with: node-version: 20.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build @@ -176,7 +175,7 @@ jobs: with: node-version: 20.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot index 589f3f8baa..dd42956f40 100644 --- a/collections/forms/i18n/en.pot +++ b/collections/forms/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-07-17T14:10:05.852Z\n" -"PO-Revision-Date: 2024-07-17T14:10:05.853Z\n" +"POT-Creation-Date: 2024-09-09T12:09:30.724Z\n" +"PO-Revision-Date: 2024-09-09T12:09:30.724Z\n" msgid "Upload file" msgstr "Upload file" diff --git a/components/alert/src/alert-bar/alert-bar.prod.stories.js b/components/alert/src/alert-bar/alert-bar.prod.stories.js index 5b14904ef6..a79fc37e79 100644 --- a/components/alert/src/alert-bar/alert-bar.prod.stories.js +++ b/components/alert/src/alert-bar/alert-bar.prod.stories.js @@ -48,6 +48,9 @@ const alertTypeArgType = { summary: 'bool', detail: "'success', 'warning', and 'critical' are mutually exclusive props", }, + defaultValue: { + summary: false, + }, }, control: { type: 'boolean', @@ -60,6 +63,29 @@ const iconArgType = { }, }, } + +const permanentArgType = { + table: { + type: { + summary: 'bool', + }, + defaultValue: { + summary: false, + }, + }, + control: { + type: 'boolean', + }, +} + +const childrenArgType = { + table: { + type: { + summary: 'String to display in the alert bar', + }, + }, +} + const actionsArgType = { table: { type: { @@ -72,6 +98,9 @@ export default { title: 'Alert Bar', component: AlertBar, decorators: [Wrapper], + args: { + children: 'I will autohide', + }, parameters: { componentSubtitle: subtitle, docs: { @@ -85,13 +114,13 @@ export default { critical: { ...alertTypeArgType }, success: { ...alertTypeArgType }, warning: { ...alertTypeArgType }, + permanent: { ...permanentArgType }, + children: { ...childrenArgType }, icon: { ...iconArgType }, }, } -export const Default = (args) => ( - Default - I will autohide -) +export const Default = (args) => export const States = () => ( diff --git a/components/calendar/src/stories/calendar.prod.stories.js b/components/calendar/src/stories/calendar.prod.stories.js index ff5a81f9ce..3144cdffbb 100644 --- a/components/calendar/src/stories/calendar.prod.stories.js +++ b/components/calendar/src/stories/calendar.prod.stories.js @@ -20,6 +20,41 @@ export default { componentSubtitle: subtitle, docs: { description: { component: description } }, }, + argTypes: { + calendar: { + control: 'select', + options: [ + 'gregory', + 'islamic', + 'nepali', + 'ethiopic', + 'persian', + 'indian', + ], + }, + weekDayFormat: { + control: 'select', + options: ['long', 'short', 'narrow'], + }, + locale: { + control: 'text', + }, + numberingSystem: { + control: 'select', + options: ['latn', 'arab', 'ethi'], + }, + }, +} + +export const Basic = (args) => { + return +} + +Basic.args = { + onDateSelect: (date) => console.log(date), + calendar: 'gregory', + weekDayFormat: 'narrow', + locale: 'en', } export const Ethiopic = (args) => { diff --git a/components/card/src/card.prod.stories.js b/components/card/src/card.prod.stories.js index 3bf22f7bfe..7421eb4c57 100644 --- a/components/card/src/card.prod.stories.js +++ b/components/card/src/card.prod.stories.js @@ -27,10 +27,17 @@ export default { componentSubtitle: subtitle, docs: { description: { component: description } }, }, + argTypes: { + children: { control: { type: 'text' } }, + }, } export const Default = (args) => ( - + ) + +Default.args = { + children: 'Card content', +} diff --git a/components/css/src/css-variables/css-variables.prod.stories.js b/components/css/src/css-variables/css-variables.prod.stories.js index b7a9486062..cbd8285e5b 100644 --- a/components/css/src/css-variables/css-variables.prod.stories.js +++ b/components/css/src/css-variables/css-variables.prod.stories.js @@ -49,3 +49,64 @@ export const NoVariables = (args) => (

By default no custom properties are inserted.

) + +export const Elevations = (args) => ( + + +
+
+ e100 +
+
+ e200 +
+
+ e300 +
+
+ e400 +
+
+ +) diff --git a/components/file-input/src/file-input-field/file-input-field.prod.stories.js b/components/file-input/src/file-input-field/file-input-field.prod.stories.js index 5cb7435d59..bcb4a8094b 100644 --- a/components/file-input/src/file-input-field/file-input-field.prod.stories.js +++ b/components/file-input/src/file-input-field/file-input-field.prod.stories.js @@ -26,6 +26,7 @@ export default { onChange: onChange, name: 'uploadName', label: 'Upload something', + buttonLabel: 'Upload a file', }, argTypes: { small: { ...sharedPropTypes.sizeArgType }, diff --git a/components/input/src/input-field/input-field.prod.stories.js b/components/input/src/input-field/input-field.prod.stories.js index 4bf091d920..63dcda1c67 100644 --- a/components/input/src/input-field/input-field.prod.stories.js +++ b/components/input/src/input-field/input-field.prod.stories.js @@ -128,13 +128,13 @@ export const InputWidth = (args) => ( diff --git a/components/loader/src/circular-loader/circular-loader.prod.stories.js b/components/loader/src/circular-loader/circular-loader.prod.stories.js index a52f9f902b..90c7ca7bd9 100644 --- a/components/loader/src/circular-loader/circular-loader.prod.stories.js +++ b/components/loader/src/circular-loader/circular-loader.prod.stories.js @@ -25,6 +25,7 @@ export default { small: { ...sharedPropTypes.sizeArgType }, large: { ...sharedPropTypes.sizeArgType }, extrasmall: { ...sharedPropTypes.sizeArgType }, + invert: { ...sharedPropTypes.sizeArgType }, }, } diff --git a/components/modal/src/modal/modal.prod.stories.js b/components/modal/src/modal/modal.prod.stories.js index d421cfeecd..250fdf274f 100644 --- a/components/modal/src/modal/modal.prod.stories.js +++ b/components/modal/src/modal/modal.prod.stories.js @@ -1,12 +1,16 @@ import { sharedPropTypes } from '@dhis2/ui-constants' import { Box } from '@dhis2-ui/box' import { Button, ButtonStrip } from '@dhis2-ui/button' +import { Center as CenteredContent } from '@dhis2-ui/center' +import { InputField } from '@dhis2-ui/input' +import { CircularLoader } from '@dhis2-ui/loader' import { FlyoutMenu, MenuDivider, MenuItem, MenuSectionHeader, } from '@dhis2-ui/menu' +import { NoticeBox } from '@dhis2-ui/notice-box' import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select' import { Tooltip } from '@dhis2-ui/tooltip' import React, { useEffect, useState } from 'react' @@ -669,6 +673,59 @@ export const LargeWithSelectComponent = (args) => ( LargeWithSelectComponent.args = { large: true } LargeWithSelectComponent.storyName = 'Large: with Select component' +export const ModalWithErrorState = (args) => ( + + Update profile + + + + + There is a problem with this form. + + + + + + + + + +) +ModalWithErrorState.storyName = 'With error state' + +export const ModalWithLoadingState = (args) => ( + + Modal title + + + + + + + + + + + + + + +) +ModalWithLoadingState.storyName = 'With loading state' + export const LargeModalWithMoreNestedModals = (args) => ( <> diff --git a/components/pagination/src/pagination.prod.stories.js b/components/pagination/src/pagination.prod.stories.js index 111ed65890..b6d346f184 100644 --- a/components/pagination/src/pagination.prod.stories.js +++ b/components/pagination/src/pagination.prod.stories.js @@ -63,7 +63,12 @@ export const NoTotalAtLastPageWithoutPageLength = Template.bind({}) NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage } export const WithoutPageSizeSelect = Template.bind({}) -WithoutPageSizeSelect.args = { ...pagers.atTenthPage, hidePageSizeSelect: true } +WithoutPageSizeSelect.args = { + ...pagers.atTenthPage, + hidePageSizeSelect: true, + hidePageSelect: false, + hidePageSummary: false, +} export const WithoutGoToPageSelect = Template.bind({}) WithoutGoToPageSelect.args = { ...pagers.atTenthPage, hidePageSelect: true } diff --git a/components/select/src/single-select-field/single-select-field.prod.stories.js b/components/select/src/single-select-field/single-select-field.prod.stories.js index 9ae6b55cf2..bd0a610a00 100644 --- a/components/select/src/single-select-field/single-select-field.prod.stories.js +++ b/components/select/src/single-select-field/single-select-field.prod.stories.js @@ -89,6 +89,13 @@ StatusError.args = { } StatusError.storyName = 'Status: Error' +export const StatusDisabled = Template.bind({}) +StatusDisabled.args = { + disabled: true, + ...WithHelpText.args, +} +StatusDisabled.storyName = 'Status: Disabled' + export const Required = Template.bind({}) Required.args = { required: true } diff --git a/components/select/src/single-select/single-select.prod.stories.js b/components/select/src/single-select/single-select.prod.stories.js index b0ebcec064..6039292bef 100644 --- a/components/select/src/single-select/single-select.prod.stories.js +++ b/components/select/src/single-select/single-select.prod.stories.js @@ -207,7 +207,7 @@ WithOptionsASelectionAndDisabled.storyName = 'With options, a selection and disabled' export const WithPrefix = WithOptionsTemplate.bind({}) -WithPrefix.args = { prefix: 'Prefix text' } +WithPrefix.args = { prefix: 'Prefix text', selected: '1' } export const WithPrefixAndSelection = WithOptionsTemplate.bind({}) WithPrefixAndSelection.args = { diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 6ad62ed254..c47a4be2f7 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -3,18 +3,15 @@ title: Alert bar --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { DocFigure } from '@site/src/components/DocFigure.jsx' -import { AlertBar } from '@dhis2/ui' - 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, using one of several styles each indicating a different purpose. - - - Hello world - + ## Usage @@ -72,9 +69,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ #### Info - - Data export complete. - + ```jsx @@ -89,9 +88,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ #### Success - - 1000 objects updated. - + ```jsx @@ -107,14 +108,16 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ #### Warning - - Some data is taking a long time to sync. - + ```jsx - Some data is taking a long time to sync. + Sync incomplete ``` @@ -126,14 +129,16 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ #### Critical - - There was a problem loading this dashboard. - + ```jsx - There was a problem loading this dashboard. + Problem loading data ``` @@ -160,17 +165,10 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ ### Actions - - Hello world - + ```jsx @@ -203,6 +201,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/ - 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. diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md index 03fffee556..88ae68e1e8 100644 --- a/docs/docs/components/avatar.md +++ b/docs/docs/components/avatar.md @@ -4,18 +4,16 @@ id: avatar --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { DocFigure } from '@site/src/components/DocFigure.jsx' -import { UserAvatar } from '@dhis2/ui' - import API from '../../../components/user-avatar/API.md' # User Avatar A User Avatar is a visual icon that represents a user. - - - + ## Usage @@ -37,15 +35,10 @@ A User Avatar is a visual icon that represents a user. #### Size - -
- - - - - -
- + Avatars are available in different sizes. Use the size that works best for the space available and the context. diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 70a02cbbbb..ff9574581f 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -3,16 +3,16 @@ title: Button --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Button, DropdownButton, SplitButton, IconCheckmark24 } from '@dhis2/ui' - import API from '../../../components/button/API.md' # Button Buttons are used to trigger actions. There are different button variants that are used for different types of actions. - - - + ## Usage @@ -37,9 +37,11 @@ Buttons are used to trigger actions. There are different button variants that ar #### Basic - - - + ```jsx @@ -50,9 +52,11 @@ Buttons are used to trigger actions. There are different button variants that ar #### Primary - - - + ```jsx @@ -64,9 +68,11 @@ Buttons are used to trigger actions. There are different button variants that ar #### Secondary - - - + ```jsx @@ -78,20 +84,26 @@ Buttons are used to trigger actions. There are different button variants that ar #### Destructive - -
- - -
- + ```jsx -
- - -
+ +``` + + + +```jsx + ``` - Only use for primary-type actions that will destroy data. diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md index 9b35c65d5a..5aaca0bc2a 100644 --- a/docs/docs/components/calendar-input.md +++ b/docs/docs/components/calendar-input.md @@ -3,9 +3,6 @@ title: Calendar Input --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { CalendarDemo } from '@site/src/components/CalendarDemo.jsx' -import { Box, CalendarInput } from '@dhis2/ui' - import API from '../../../components/calendar/API.md' # Calendar Input @@ -14,106 +11,12 @@ This is an Input wrapper around [calendar](./calendar) to display an input that ## Demo -Ethiopic calendar (with narrow day names, short day names and localised to English) +Below you'll find a customizable demo of the CalendarInput component. Click "show full demo" to see this and other components. - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - + The Gregorian with initial date is then generated with this code. diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md index 9dde639cce..0da47ffcc0 100644 --- a/docs/docs/components/calendar.md +++ b/docs/docs/components/calendar.md @@ -3,8 +3,8 @@ title: Calendar --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { CalendarDemo as Calendar } from '@site/src/components/CalendarDemo.jsx' -import { Box } from '@dhis2/ui' +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' import API from '../../../components/calendar/API.md' @@ -22,30 +22,11 @@ Ethiopic calendar with narrow day names, short day names and localised to Englis ### Narrow 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`. @@ -55,88 +36,87 @@ To display the calendar with short day names, use the codeblock below. For the n locale="am-ET" numberingSystem="ethi" timeZone="Europe/London" - weekDayFormat="short" + weekDayFormat="narrow" /> ``` ## Nepali calendar -Nepali calendar (with Nepali and English 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 calendar with Napali characters. + + ```jsx - // Napali - - - // Nepali transliterated in latin characters - +// Napali + +``` + +Nepali calendar transliterated into latin characters. + + +```jsx +// Nepali transliterated in latin characters + ``` ## Gregorian calendar Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic. - -
- + + - + + - + + - + + - + + -
- + + To display the calendar with a specific locale, use the codeblock below. Adjust the locale to the desired language. @@ -148,35 +128,29 @@ To display the calendar with a specific locale, use the codeblock below. Adjust 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. diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index dde83cfd93..f933250260 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -3,22 +3,22 @@ title: Card --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Card } from '@dhis2/ui' - import API from '../../../components/card/API.md' # Card A card is a container element used to group together and separate blocks of content. - - This is content that's inside a card. - + ## Usage ```jsx -This is content that's inside a card. +Card Content. ``` ### When to use diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index 46d317d2e9..57bd4307d9 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -3,22 +3,20 @@ title: Checkbox --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Checkbox } from '@dhis2/ui' - import API from '../../../components/checkbox/API.md' # Checkbox Checkboxes are used to choose one or more items from a list. A checkbox can also be used to toggle an option. - - - - + ```jsx - - + ``` ## Usage @@ -42,10 +40,15 @@ Checkboxes are used to choose one or more items from a list. A checkbox can also #### Size - - - - + + +```jsx + +``` - Checkboxes are available in two sizes, regular and `dense`. Regular sized checkboxes are useful when there's space available. Use `dense` sized checkboxes in compact, information-dense interfaces. diff --git a/docs/docs/components/chip.md b/docs/docs/components/chip.md index bd8c1e3ad6..d2e53a75b1 100644 --- a/docs/docs/components/chip.md +++ b/docs/docs/components/chip.md @@ -3,17 +3,17 @@ title: Chip --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Chip, IconStar24 } from '@dhis2/ui' - import API from '../../../components/chip/API.md' # Chip Chips are used to select from a set of defined options. Chips can also represent a set of chosen options. - - Hello world - + ```jsx Hello world @@ -40,13 +40,13 @@ Chips are used to select from a set of defined options. Chips can also represent #### Size - - Hello world - Hello world - + ```jsx -Hello world Hello world ``` @@ -70,9 +70,11 @@ Chips are used to select from a set of defined options. Chips can also represent ### Removable - - Hello world - + ```jsx Hello world @@ -83,9 +85,11 @@ Chips are used to select from a set of defined options. Chips can also represent ### Icon - - } >Hello world - + ```jsx }>Hello world diff --git a/docs/docs/components/data-table.md b/docs/docs/components/data-table.md index 6485e2d14c..2db70b907a 100644 --- a/docs/docs/components/data-table.md +++ b/docs/docs/components/data-table.md @@ -3,18 +3,18 @@ title: Data table --- import { Demo } from '@site/src/components/DemoComponent.jsx' - import API from '../../../components/table/API.md' # Data table A data table is used to display and allow interaction with data in a structured way. - -

Storybook demo: Date table.

- + -A minimal version of the linked demo looks like this. +A minimal version of the demo looks like this. ```jsx @@ -50,85 +50,95 @@ A minimal version of the linked demo looks like this. ### Sorting - -

Storybook demo: Sorting.

- + - Data table items can be sorted by different columns by clicking on the sort icon in a column header. - Always allow sorting of items by different columns unless the order is specific and shouldn't be changed. ### Filtering: Inline - -

Storybook demo: Filtering inline.

- + - Use inline filters in complex interfaces to offer filtering functionality without extra controls outside of the table. - If filtering is the main functionality of the data table, consider offering standalone filters. ### 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. ### Fixed columns - -

Storybook demo: Fixed column.

- + - Use fixed columns in dense interfaces where the table might need to be scrolled horizontally. - Any number of columns can be fixed, but usually a single column is enough, as long as it provides a clear reference for the rest of the row. ### 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. ### 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. ### 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. ### 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. ### Built-in styles - -

Storybook demo: Built-in styles.

- + - A data table offers several built-in text styles. - Use the built-in styles to help offer a consistent data table experience across DHIS2 apps. ### Large cells - -

Storybook demo: Large cells.

- + - Use large cells can be used for data tables that will don't show a lot of rows. - Large cells can help users scan and work with a few rows. @@ -194,4 +204,4 @@ Patterns are common ways of achieving some functionality. Patterns aren't offere ## Links -- Demo +- Demo diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md index 8d9f2ed4ed..a25b859e99 100644 --- a/docs/docs/components/elevation.md +++ b/docs/docs/components/elevation.md @@ -3,21 +3,12 @@ title: Elevation --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { CssVariables } from '@dhis2/ui' - import API from '../../../components/css/API.md' # Elevation Elevation is used to create and communicate depth in an interface. - - - -
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. @@ -48,15 +39,10 @@ This example usees the `e200` variant. ### Variants - - -
-
e100
-
e200
-
e300
-
e400
-
- + - There are four levels of elevation: `e100`, `e200`, `e300`, `e400`. - Use different elevation levels to communicate different depths or stacks of elements. diff --git a/docs/docs/components/fileinput.md b/docs/docs/components/fileinput.md index cfa9748a1c..691e64622e 100644 --- a/docs/docs/components/fileinput.md +++ b/docs/docs/components/fileinput.md @@ -3,20 +3,16 @@ title: File input --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { FileInputField, FileListItem } from '@dhis2/ui' - import API from '../../../components/file-input/API.md' # File input A file input is used to choose and upload files. - - - + ## Usage @@ -34,11 +30,11 @@ A file input is used to choose and upload files. ##### Label - - - + ```jsx @@ -48,11 +44,11 @@ A file input is used to choose and upload files. ##### Button - - - + ```jsx @@ -62,18 +58,14 @@ A file input is used to choose and upload files. ##### Help text - - - + ```jsx - + ``` - Use help text to tell the user about any limitations or expectations of the files, like size or format. @@ -82,19 +74,24 @@ A file input is used to choose and upload files. ### Multiple files - - - - - - - + ```jsx - - - + + + ``` diff --git a/docs/docs/components/inputfield.md b/docs/docs/components/inputfield.md index f3eec0a902..999cc5bb43 100644 --- a/docs/docs/components/inputfield.md +++ b/docs/docs/components/inputfield.md @@ -3,17 +3,17 @@ title: Input --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { InputField, TextAreaField, Tooltip } from '@dhis2/ui' - import API from '../../../components/input/API.md' # Input An input is used to enter data, like text or a number. - - - + ## Usage @@ -38,9 +38,11 @@ An input is used to enter data, like text or a number. ##### Label - - - + ```jsx @@ -50,12 +52,14 @@ An input is used to enter data, like text or a number. ##### Placeholder - - - + ```jsx - + ``` - Only use placeholder text to clarify what kind of content is expected. @@ -65,15 +69,17 @@ An input is used to enter data, like text or a number. ##### Help text - - - + ```jsx ``` @@ -82,15 +88,13 @@ An input is used to enter data, like text or a number. #### Size - -
- - -
- + ```jsx - ``` @@ -98,19 +102,18 @@ An input is used to enter data, like text or a number. #### Width - -
- - -
- + ```jsx - - + + ``` -- Inputs width should reflect the expected content. +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. @@ -118,9 +121,11 @@ An input is used to enter data, like text or a number. ### Textarea - - - + ```jsx @@ -136,9 +141,11 @@ An input is used to enter data, like text or a number. ### Read-only - - - + ```jsx @@ -150,16 +157,18 @@ An input is used to enter data, like text or a number. ### State: Error - - - + ```jsx ``` @@ -169,9 +178,17 @@ An input is used to enter data, like text or a number. ### State: Disabled - - - + + +```jsx + +``` + +However, it is recommended to add a Tooltip to explain why the input is disabled. ```jsx @@ -184,9 +201,11 @@ An input is used to enter data, like text or a number. ### Data type: Text - - - + ```jsx @@ -197,9 +216,11 @@ An input is used to enter data, like text or a number. ### Data type: Number - - - + ```jsx - - + ```jsx - - + ```jsx - - + ## Usage @@ -37,9 +38,10 @@ Loaders are used to show that something is in progress. They keep users informed #### Circular - - - + ```jsx @@ -49,9 +51,11 @@ Loaders are used to show that something is in progress. They keep users informed #### Linear - - - + ```jsx @@ -63,14 +67,32 @@ Loaders are used to show that something is in progress. They keep users informed #### Size - -
- - - - -
- + + + + + + + + + + + + + + ```jsx @@ -86,15 +108,15 @@ Loaders are used to show that something is in progress. They keep users informed ### Inverted - -
- - -
- + + +```jsx + +``` - Inverted loaders can be used on dark backgrounds, like a blocking backdrop layer. diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md index 11aef00a17..92759444be 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -3,21 +3,16 @@ title: Menu --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { FlyoutMenu, MenuItem, MenuDivider, MenuSectionHeader, IconSave24, IconDelete24, IconShare24, IconEdit24, IconVisualizationColumn24, IconFilter24, IconClock24, IconLaunch16 } from '@dhis2/ui' - import API from '../../../components/menu/API.md' # Menu A menu gives access to menu items, through a panel that opens from a trigger element. Menu items usually trigger actions. - - - - - - - + ## Usage @@ -41,23 +36,39 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ##### Order and grouping - - - - - - - - - + ```jsx - - + + + + + + + + + + + + + + + + + + + + + + - - + + + ``` @@ -66,24 +77,12 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ##### Size - -
- - - - - - - - -
- + ```jsx - - - - @@ -95,13 +94,7 @@ A menu gives access to menu items, through a panel that opens from a trigger ele #### Nesting - - - - - - - +As shown in the [order and grouping](#order-and-grouping) section, a menu can contain multiple levels of menu items. ```jsx @@ -119,16 +112,7 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ### Dividers and section headers - - - - - - - - - - +As shown in the [order and grouping](#order-and-grouping) section, a menu can contain dividers and section headers. ```jsx @@ -148,22 +132,17 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ### Suffix - - - } label="Filter data" /> - } label="Change time period" /> - } label="Open in Data Visualizer app" suffix= {}/> - - + ```jsx - } label="Filter data" /> - } label="Change time period" /> } - label="Open in Data Visualizer app" - suffix={} + suffix={} + icon={} + label="Open in data visualizer" /> ``` @@ -175,20 +154,19 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ### Icon - - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - - + ```jsx - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - + + } label="Menu item" /> + } + label="Menu item - with custom icon fill" + /> + ``` - A menu item can show an icon. @@ -197,24 +175,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ### Type: Destructive - - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - - } label="Delete program" /> - - + ```jsx - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - - } label="Delete program" /> - + ``` - Use destructive menu items for critical, destructive actions like _Delete_ or _End process_. @@ -224,20 +192,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele ### State: Disabled - - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - - + ```jsx - - } label="Save" /> - } label="Rename" /> - } label="Share" /> - + ``` - Use disabled menu items when a menu item is temporarily unavailable. diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md index 6f430258b4..8b7c843008 100755 --- a/docs/docs/components/modal.md +++ b/docs/docs/components/modal.md @@ -3,18 +3,16 @@ title: Modal --- import { Demo } from '../../src/components/DemoComponent.jsx' -import { ModalDemoMain, ModalDemoActions, ModalDemoLoading, ModalDemoError } from '@site/src/components/ModalDemos.jsx' -import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui' - import API from '../../../components/modal/API.md' # Modal A modal shows content on a layer on top of page, interrupting a workflow and focusing a user's attention on the modal contents. - - - + ## Usage @@ -57,36 +55,43 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc 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. ::: - - - + + +Here's the initial state of the demo, showing the buttons that control the modal: + +```jsx + + + + + +``` + +Here's the modal that is controlled by the buttons: ```jsx - Modal title + Can be hidden - - + - + @@ -100,9 +105,10 @@ The `hide` variable used in the demo's below are initiated using `useState(true) ### State: Loading - - - + ```jsx @@ -132,9 +138,10 @@ The `hide` variable used in the demo's below are initiated using `useState(true) ### State: Error - - - + ```jsx diff --git a/docs/docs/components/notice-box.md b/docs/docs/components/notice-box.md index 99abd0d4e3..b414ad1af9 100644 --- a/docs/docs/components/notice-box.md +++ b/docs/docs/components/notice-box.md @@ -3,7 +3,6 @@ title: Notice box --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { NoticeBox, Button } from '@dhis2/ui' import API from '../../../components/notice-box/API.md' @@ -11,11 +10,10 @@ import API from '../../../components/notice-box/API.md' A notice box shows important information about a situation. - - - Notice box content - - + ## Usage @@ -43,11 +41,10 @@ A notice box shows important information about a situation. #### Information - - - Dashboard data can take a few hours to update, so the most recent data might not be shown. - - + ```jsx @@ -60,21 +57,15 @@ A notice box shows important information about a situation. #### Warning - - - No one will be able to find this program because it doesn't have any assigned organisation units. -
- - + ```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 access this program. Add some Organisation Units to + the access list. ``` @@ -83,21 +74,15 @@ A notice box shows important information about a situation. #### Error - - - There isn't any data because there was a problem generating analytics tables. -
- - + ```jsx - - There isn't any data because there was a problem generating analytics - tables. -
- + + Data could be accessed from outside this instance. Update access rules + immediately. ``` @@ -106,16 +91,14 @@ A notice box shows important information about a situation. #### Valid - - - Your password has been reset. You can log in with your username and password. - - + ```jsx - - Your password has been reset. You can log in with your username and - password. + + Programs using these rules are updated automatically. ``` diff --git a/docs/docs/components/org-unit-tree.md b/docs/docs/components/org-unit-tree.md index dbcdb1dd6e..28b7711d92 100644 --- a/docs/docs/components/org-unit-tree.md +++ b/docs/docs/components/org-unit-tree.md @@ -3,8 +3,6 @@ title: Organisation unit tree --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { OrganisationUnitTree } from '@dhis2/ui' - import API from '../../../components/organisation-unit-tree/API.md' # Organisation unit tree @@ -13,9 +11,10 @@ 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.

- + ## Usage @@ -32,6 +31,11 @@ An organisation unit tree is used to choose organisation units from a hierarchy. ### Selection mode: Single + + - In _Single selection mode_ only one organisation unit can be chosen. - Use this mode when choosing more than one organisation unit isn't valid. diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md index 491f607024..083b410c6a 100644 --- a/docs/docs/components/pagination.md +++ b/docs/docs/components/pagination.md @@ -3,7 +3,6 @@ title: Pagination --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Pagination } from '@dhis2/ui' import API from '../../../components/pagination/API.md' @@ -11,9 +10,10 @@ import API from '../../../components/pagination/API.md' Pagination is used to navigate content across several pages. - - - + ## Usage @@ -39,9 +39,11 @@ Different elements of the pagination component can be included, depending on the ### Element: Page number selector - - - + ```jsx - - + ```jsx - - + ```jsx -

Storybook demo: Popover.

- + ## Usage diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md index 4a6192de55..57fbced36b 100644 --- a/docs/docs/components/radio.md +++ b/docs/docs/components/radio.md @@ -3,18 +3,18 @@ title: Radio --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Radio } from '@dhis2/ui' - import API from '../../../components/radio/API.md' +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' # Radio Radio inputs are used to choose one item from a list. - - - - + ## Usage @@ -43,10 +43,20 @@ Radio inputs are used to choose one item from a list. #### Size - - - - + + + + + + + + ```jsx diff --git a/docs/docs/components/segmented-control.md b/docs/docs/components/segmented-control.md index 1e1da41e50..7c750f7774 100644 --- a/docs/docs/components/segmented-control.md +++ b/docs/docs/components/segmented-control.md @@ -3,7 +3,6 @@ title: Segmented control --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { SegmentedControl } from '@dhis2/ui' import API from '../../../components/segmented-control/API.md' @@ -11,27 +10,10 @@ 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 @@ -39,15 +21,15 @@ A segmented control is used to choose between related options that have an effec - - - - - - - - - - - - - + ## Usage @@ -40,24 +28,17 @@ Selects are used to choose one or more items from a list of options. #### Single select - - - - - - - - - - - - + ```jsx - - - + + + ``` @@ -65,19 +46,14 @@ Selects are used to choose one or more items from a list of options. #### Multi select - - - - - - - - - - + ```jsx - + @@ -97,20 +73,11 @@ Selects are used to choose one or more items from a list of options. ##### Placeholder - - - - - - - - - - - - - - + ```jsx @@ -127,20 +94,11 @@ Selects are used to choose one or more items from a list of options. ##### Help text - - - - - - - - - - - - - - + ```jsx - - - - - - - - - - - + ```jsx - - - - - @@ -195,20 +140,10 @@ Selects are used to choose one or more items from a list of options. ### Filtering - - - - - - - - - - - - - - + ```jsx @@ -225,20 +160,10 @@ Selects are used to choose one or more items from a list of options. ### Clearing - - - - - - - - - - - - - - + ```jsx @@ -255,20 +180,11 @@ Selects are used to choose one or more items from a list of options. ### Prefix - - - - - - - - - - - - - - + ```jsx @@ -285,25 +201,15 @@ Selects are used to choose one or more items from a list of options. ### State: Error - - - - - - - - - - - - - - + ```jsx @@ -319,20 +225,10 @@ Selects are used to choose one or more items from a list of options. ### State: Disabled - - - - - - - - - - - - - - + ```jsx diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index 42399666f4..7e7bc91025 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -3,7 +3,6 @@ title: Switch --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Switch } from '@dhis2/ui' import API from '../../../components/switch/API.md' @@ -11,16 +10,15 @@ import API from '../../../components/switch/API.md' Switches are used to toggle something between an on and off state. - - - - + ## Usage ```jsx - - + ``` ### When to use @@ -40,14 +38,13 @@ Switches are used to toggle something between an on and off state. #### Size - - - - + ```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. diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md index ed27492cac..e6963b22c8 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -3,7 +3,6 @@ title: Tabs --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { TabBar, Tab, IconSubscribe16, IconShare16, IconDownload16 } from '@dhis2/ui' import API from '../../../components/tab/API.md' @@ -11,14 +10,10 @@ import API from '../../../components/tab/API.md' Tabs are used to navigate between different views within the same page or context. - - - Tab label 1 - Tab label 2 - Tab label 3 - Tab label 4 - - + ## Usage @@ -43,13 +38,10 @@ Tabs are used to navigate between different views within the same page or contex ### Icon - - - }>Notifications - } selected>Sharing and access - }>Downloads - - + ```jsx @@ -67,14 +59,12 @@ Tabs are used to navigate between different views within the same page or contex ### State: Disabled - - - Tab label 1 - Tab label 2 - Tab label 3 - Tab label 4 - - + + +In the example above you can see the 3rd tab is disabled. ```jsx diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md index f93c9aa182..c6c23e034d 100644 --- a/docs/docs/components/tag.md +++ b/docs/docs/components/tag.md @@ -3,7 +3,8 @@ title: Tag --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Chip, Tag, IconError16, IconCheckmarkCircle16 } from '@dhis2/ui' +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' import API from '../../../components/tag/API.md' @@ -11,9 +12,10 @@ import API from '../../../components/tag/API.md' Tags are used to label items by a set of shared properties, like category or status. - - Tag label - + ## Usage @@ -28,12 +30,39 @@ Tags are used to label items by a set of shared properties, like category or sta ### Variants -| Variant | When to use | -| ---------------------------- | ------------------------------------------------------------------------- | -| Default | The default choice. Use this if no other variant matches the use case. | -| Neutral | Use to communicate neutrality, when something isn't positive or negative. | -| Positive | Use to communicate success or validity. | -| Negative | Use to communicate a problem or error. | +| Variant | When to use | +| -------- | ------------------------------------------------------------------------- | +| Default | The default choice. Use this if no other variant matches the use case. | +| Neutral | Use to communicate neutrality, when something isn't positive or negative. | +| Positive | Use to communicate success or validity. | +| Negative | Use to communicate a problem or error. | + + + + + + + + + + + + + + + ```jsx Default @@ -52,12 +81,10 @@ Tags are used to label items by a set of shared properties, like category or sta ### Icon - -
- } positive>Passed - } negative>Failed -
- + ```jsx } positive>Passed @@ -70,14 +97,35 @@ Tags are used to label items by a set of shared properties, like category or sta ### Bold - -
- Tag label - Tag label - Tag label - Tag label -
- + + + + + + + + + + + + + + ```jsx Tag label diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md index 74c387f784..87576744e8 100644 --- a/docs/docs/components/tooltip.md +++ b/docs/docs/components/tooltip.md @@ -3,7 +3,8 @@ title: Tooltip --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { Tooltip } from '@dhis2/ui' +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' import API from '../../../components/tooltip/API.md' @@ -11,9 +12,10 @@ import API from '../../../components/tooltip/API.md' A tooltip is used to show contextual information when triggered by clicking, focusing, or hovering an element. - - Hover to trigger tooltip. - + ## Usage @@ -38,15 +40,32 @@ A tooltip is used to show contextual information when triggered by clicking, foc ### Position - - Hover to trigger top tooltip. -
- Hover to trigger left tooltip. -
- Hover to trigger right tooltip. -
- Hover to trigger bottom tooltip. - + + + + + + + + + + + + + + ```jsx Hover to trigger top tooltip. @@ -60,9 +79,11 @@ A tooltip is used to show contextual information when triggered by clicking, foc ### Delay - - Hover to trigger a tooltip with a longer open delay and shorter close delay. - + ```jsx diff --git a/docs/docs/components/transfer.md b/docs/docs/components/transfer.md index cd7a508eb6..e261277895 100644 --- a/docs/docs/components/transfer.md +++ b/docs/docs/components/transfer.md @@ -3,18 +3,16 @@ title: Transfer --- import { Demo } from '@site/src/components/DemoComponent.jsx' -import { TransferDemoMain, TransferDemoHeader, TransferDemoFooter, TransferDemoReorder, TransferDemoFilter } from '@site/src/components/TransferDemos.jsx' -import { Transfer, Button } from '@dhis2/ui' - import API from '../../../components/transfer/API.md' # Transfer A transfer is used to make complex selections from a list of options. - - - + ## Usage @@ -52,9 +50,11 @@ const onChange = (payload) => setSelected(payload.selected) ### Header - - - + ```jsx setSelected(payload.selected) /> ``` -The `header` component is as follows: - -```jsx -

- {props.label} -

-``` +The `header` component in this case is a simple `h4` element. - Use headers for titles that make it clear what the transfer options are. - _Source list_ headers could also contain group filters. ### Footer - - - + ```jsx - - + + Reload list + ``` - Use footers for actions that apply to a list, like _Reload items_. ### Reordering - - - + ```jsx - - + ```jsx + - Different types of data will need different loading strategies. - Use a [`Loader`](loading.md) to block interaction if using the transfer while loading is taking place can cause problems. - A common pattern is loading more options as a user scrolls. See the [Transfer: Infinite Loading recipe](../recipes/transfer-infinite-loading-all-options-selected.md) for more information. diff --git a/docs/src/components/CalendarDemo.jsx b/docs/src/components/CalendarDemo.jsx deleted file mode 100644 index 869d0feef8..0000000000 --- a/docs/src/components/CalendarDemo.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Box } from '@dhis2-ui/box' -import { Calendar } from '@dhis2-ui/calendar' -import PropTypes from 'prop-types' -import React, { useState } from 'react' - -const CalendarDemo = (props) => { - const [selectedDate, setSelectedDate] = useState() - const isoDate = selectedDate?.withCalendar('iso8601') - - const Component = props.component - - return ( - - { - setSelectedDate(date?.calendarDate ?? null) - }} - {...props} - /> -
-
- {selectedDate && ( - <> -
- Gregorian date: {isoDate.year} - {isoDate.month}{' '} - - {isoDate.day} -
- Calendar date:{' '} - {selectedDate.eraYear || - selectedDate.year} - {selectedDate.month} -{' '} - {selectedDate.day} -
- - )} - {selectedDate === null && <>null} -
-
- - ) -} - -CalendarDemo.defaultProps = { - component: Calendar, - dir: 'ltr', - timeZone: 'UTC', - weekDayFormat: 'narrow', -} -CalendarDemo.propTypes = { - calendar: PropTypes.any.isRequired, - component: PropTypes.elementType, - dir: PropTypes.oneOf(['ltr', 'rtl']), - locale: PropTypes.string, - timeZone: PropTypes.string, - weekDayFormat: PropTypes.string, -} -export { CalendarDemo } diff --git a/docs/src/components/DemoComponent.jsx b/docs/src/components/DemoComponent.jsx index 712d5c4ea9..db6c27866d 100644 --- a/docs/src/components/DemoComponent.jsx +++ b/docs/src/components/DemoComponent.jsx @@ -1,15 +1,80 @@ import PropTypes from 'prop-types' -import React from 'react' +import React, { useRef } from 'react' +import { DEMO_URL } from '../constants.js' import styles from './DemoComponent.module.css' -export const Demo = (props) => { +export const Demo = ({ path, args, height }) => { + const iframeRef = useRef(null) + + const handleReload = () => { + if (iframeRef.current) { + iframeRef.current.contentWindow.location.reload() + } + } + + const formatPath = (path) => { + if (!path) { + return false + } + return path.startsWith('/story/') ? path : `/story/${path}` + } + + const handleShowFullDemo = () => { + const formattedPath = formatPath(path) + const fullDemoUrl = `${DEMO_URL}/?path=${encodeURIComponent( + formattedPath + )}${ + args + ? `&args=${encodeURIComponent(args) + .replace(/%3A/g, ':') + .replace(/%3B/g, ';')}` + : '' + }` + window.open(fullDemoUrl, '_blank', 'noopener,noreferrer') + } + + const iframeSrc = `${DEMO_URL}/iframe.html?path=${encodeURIComponent( + formatPath(path) + )}&full=1&shortcuts=false&singleStory=true${ + args ? `&args=${encodeURIComponent(args)}` : '' + }` + return (
-
Demo
-
{props.children}
+
+ Demo +
+ + +
+
+
+