docs: add alertbar samples

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 <br/>`[{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.<br/>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

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 <br/>`[{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.<br/>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||||

components/alert/src/alert-bar/alert-bar.js

@@ -149,21 +149,25 @@ 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,
     className: PropTypes.string,
     /** 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 */

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

docs/docs/components/alertbar.md

@@ -46,6 +46,12 @@ An alert bar communicates something to the user by showing a prominent, floating
     <AlertBar permanent>Data export complete.</AlertBar>
 </Demo>
 
+```jsx
+<AlertStack>
+    <AlertBar permanent>Data export complete.</AlertBar>
+</AlertStack>
+```
+
 -   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
     <AlertBar success permanent>1000 objects updated.</AlertBar>
 </Demo>
 
+```jsx
+<AlertStack>
+    <AlertBar success permanent>1000 objects updated.</AlertBar>
+</AlertStack>
+```
+
 -   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
 
 <Demo>
     <AlertBar warning permanent>Some data is taking a long time to sync.</AlertBar>
 </Demo>
 
+```jsx
+<AlertStack>
+    <AlertBar warning permanent>Some data is taking a long time to sync.</AlertBar>
+</AlertStack>
+```
+
 -   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
     <AlertBar critical permanent>There was a problem loading this dashboard.</AlertBar>
 </Demo>
 
+```jsx
+<AlertStack>
+    <AlertBar critical permanent>There was a problem loading this dashboard.</AlertBar>
+</AlertStack>
+```
+
 -   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</AlertBar>
 </Demo>
 
+```jsx
+<AlertStack>
+    <AlertBar
+        actions={[
+            {
+                label: 'Save',
+                onClick: clickHandler
+            },
+            {
+                label: 'Cancel',
+                onClick: clickHandler
+            },
+        ]} permanent>
+        Hello world
+    </AlertBar>
+</AlertStack>
+```
+
 -   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.