docs: migrating demos to embed instead

.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
 
@@ -177,7 +176,7 @@ jobs:
                   node-version: 20.x
                   cache: 'yarn'
 
-            - uses: actions/download-artifact@v2
+            - uses: actions/download-artifact@v4
               with:
                   name: lib-build
 

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"

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) => (
-    <AlertBar {...args}>Default - I will autohide</AlertBar>
-)
+export const Default = (args) => <AlertBar {...args}></AlertBar>
 
 export const States = () => (
     <React.Fragment>

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 <Calendar {...args} />
+}
+
+Basic.args = {
+    onDateSelect: (date) => console.log(date),
+    calendar: 'gregory',
+    weekDayFormat: 'narrow',
+    locale: 'en',
 }
 
 export const Ethiopic = (args) => {

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) => (
-    <Box width="358px" height="358px">
+    <Box width="200px" height="75px">
         <Card {...args} />
     </Box>
 )
+
+Default.args = {
+    children: 'Card content',
+}

components/css/src/css-variables/css-variables.prod.stories.js

@@ -49,3 +49,64 @@ export const NoVariables = (args) => (
         <p>By default no custom properties are inserted.</p>
     </App>
 )
+
+export const Elevations = (args) => (
+    <App>
+        <CssVariables elevations {...args} />
+        <div
+            style={{
+                display: 'flex',
+                gap: '8px',
+            }}
+        >
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e100',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e100
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e200',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e200
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e300',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e300
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e400',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e400
+            </div>
+        </div>
+    </App>
+)

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

components/input/src/input-field/input-field.prod.stories.js

@@ -128,13 +128,13 @@ export const InputWidth = (args) => (
         <InputField
             {...args}
             name="input1"
-            label="My textarea has a width of 100px"
+            label="My inputField has a width of 100px"
             inputWidth="100px"
         />
         <InputField
             {...args}
             name="input2"
-            label="My textarea has a width of 220px"
+            label="My inputField has a width of 220px"
             inputWidth="220px"
         />
     </>

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

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) => (
+    <Modal {...args}>
+        <ModalTitle>Update profile</ModalTitle>
+        <ModalContent>
+            <InputField
+                label="First name"
+                required
+                error
+                validationText="First name can't be empty."
+                inputWidth="320px"
+            />
+            <InputField
+                label="Last name"
+                value="Olefeme"
+                required
+                inputWidth="320px"
+            />
+            <Box marginTop="16px">
+                <NoticeBox error>There is a problem with this form.</NoticeBox>
+            </Box>
+        </ModalContent>
+        <ModalActions>
+            <ButtonStrip end>
+                <Button secondary>Cancel</Button>
+                <Button disabled primary>
+                    Save changes
+                </Button>
+            </ButtonStrip>
+        </ModalActions>
+    </Modal>
+)
+ModalWithErrorState.storyName = 'With error state'
+
+export const ModalWithLoadingState = (args) => (
+    <Modal {...args}>
+        <ModalTitle>Modal title</ModalTitle>
+        <ModalContent>
+            <Box minHeight="240px">
+                <CenteredContent>
+                    <CircularLoader />
+                </CenteredContent>
+            </Box>
+        </ModalContent>
+        <ModalActions>
+            <ButtonStrip end>
+                <Button secondary>Cancel</Button>
+                <Button primary>Save changes</Button>
+            </ButtonStrip>
+        </ModalActions>
+    </Modal>
+)
+ModalWithLoadingState.storyName = 'With loading state'
+
 export const LargeModalWithMoreNestedModals = (args) => (
     <>
         <Modal {...args}>

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 }

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 }