@dhis2-ui/alert 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -33,15 +33,16 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "10.16.1",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2-ui/portal": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/alert-bar/action.js

@@ -0,0 +1,37 @@
+import { spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+class Action extends Component {
+    onClick = (event) => {
+        this.props.onClick(event)
+        this.props.hide(event)
+    }
+
+    render() {
+        return (
+            <span onClick={this.onClick} data-test={this.props.dataTest}>
+                {this.props.label}
+                <style jsx>{`
+                    span {
+                        margin-inline-end: ${spacers.dp12};
+                        text-decoration: underline;
+                        white-space: nowrap;
+                    }
+                    span:hover {
+                        cursor: pointer;
+                    }
+                `}</style>
+            </span>
+        )
+    }
+}
+
+Action.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    hide: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+}
+
+export { Action }

package/src/alert-bar/actions.js

@@ -0,0 +1,47 @@
+import { arrayWithLength } from '@dhis2/prop-types'
+import { spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Action } from './action.js'
+
+const Actions = ({ actions, hide, dataTest }) => {
+    if (!actions) {
+        return null
+    }
+
+    return (
+        <div>
+            {actions.map((action) => (
+                <Action
+                    key={action.label}
+                    {...action}
+                    hide={hide}
+                    dataTest={`${dataTest}-action`}
+                />
+            ))}
+            <style jsx>{`
+                div {
+                    margin-inline-start: ${spacers.dp48};
+                    margin-inline-end: -${spacers.dp12};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+const actionsPropType = arrayWithLength(
+    0,
+    2,
+    PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        onClick: PropTypes.func.isRequired,
+    })
+)
+
+Actions.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    hide: PropTypes.func.isRequired,
+    actions: actionsPropType,
+}
+
+export { Actions, actionsPropType }

package/src/alert-bar/alert-bar.e2e.stories.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { AlertBar } from './index.js'
+
+window.onHidden = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'AlertBar' }
+
+export const Default = () => <AlertBar>Default</AlertBar>
+export const CustomDuration = () => (
+    <AlertBar duration={2000}>Custom duration</AlertBar>
+)
+export const PermanentWithActions = () => (
+    <AlertBar
+        permanent
+        actions={[
+            { label: 'Save', onClick: () => {} },
+            { label: 'Cancel', onClick: () => {} },
+        ]}
+    >
+        With Actions
+    </AlertBar>
+)
+export const DisabledIcon = () => <AlertBar icon={false}>Message</AlertBar>
+export const CustomIcon = () => (
+    <AlertBar icon={<span>Custom icon</span>}>Message</AlertBar>
+)
+export const WithMessage = () => <AlertBar>With a message</AlertBar>
+export const WithOnHidden = () => (
+    <AlertBar onHidden={window.onHidden}>Message</AlertBar>
+)
+export const Permanent = () => <AlertBar permanent>Message</AlertBar>
+export const HiddenProp = () => {
+    const [hidden, setHidden] = useState(true)
+    const toggleVisibility = () => setHidden((prevHidden) => !prevHidden)
+    return (
+        <React.Fragment>
+            <button
+                style={{
+                    display: 'block',
+                    position: 'fixed',
+                    bottom: 150,
+                    left: 10,
+                }}
+                onClick={toggleVisibility}
+            >
+                {hidden ? 'Show' : 'Hide'}
+            </button>
+            <AlertBar permanent hidden={hidden} onHidden={window.onHidden}>
+                Short text
+            </AlertBar>
+        </React.Fragment>
+    )
+}

package/src/alert-bar/alert-bar.js

@@ -0,0 +1,180 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useRef, useState, useEffect } from 'react'
+import { Actions, actionsPropType } from './actions.js'
+import styles, { ANIMATION_TIME } from './alert-bar.styles.js'
+import { Dismiss } from './dismiss.js'
+import { Icon, iconPropType } from './icon.js'
+import { Message } from './message.js'
+
+const AlertBar = ({
+    actions,
+    children,
+    className,
+    critical,
+    dataTest = 'dhis2-uicore-alertbar',
+    duration = 8000,
+    hidden,
+    icon = true,
+    permanent,
+    success,
+    warning,
+    onHidden,
+}) => {
+    const [inViewport, setInViewport] = useState(!hidden)
+    const [inDOM, setInDOM] = useState(!hidden)
+    const alertRef = useRef(null)
+    const showTimeout = useRef(null)
+    const displayTimeout = useRef(null)
+    const hideTimeout = useRef(null)
+    const displayStartTime = useRef(null)
+    const displayTimeRemaining = useRef(null)
+    const info = !critical && !success && !warning
+    const shouldAutoHide = !(permanent || warning || critical)
+    const show = () => {
+        setInDOM(true)
+        setInViewport(true)
+    }
+    const hide = () => {
+        setInDOM(true)
+        setInViewport(false)
+    }
+    const remove = () => {
+        setInDOM(false)
+        setInViewport(false)
+        onHidden && onHidden({}, null)
+    }
+    const clearAllTimeouts = () => {
+        clearTimeout(showTimeout.current)
+        clearTimeout(displayTimeout.current)
+        clearTimeout(hideTimeout.current)
+    }
+    const runHideAnimation = () => {
+        clearAllTimeouts()
+        if (alertRef.current) {
+            alertRef.current.style.setProperty(
+                '--alert-bar-collapse',
+                `-${alertRef.current.offsetHeight}px`
+            )
+        }
+        hide()
+        hideTimeout.current = setTimeout(remove, ANIMATION_TIME)
+    }
+    const startDisplayTimeout = () => {
+        if (shouldAutoHide) {
+            clearAllTimeouts()
+            displayStartTime.current = Date.now()
+            displayTimeRemaining.current = duration
+            displayTimeout.current = setTimeout(
+                runHideAnimation,
+                displayTimeRemaining.current
+            )
+        }
+    }
+    const runShowAnimation = () => {
+        clearAllTimeouts()
+        show()
+        showTimeout.current = setTimeout(startDisplayTimeout, ANIMATION_TIME)
+    }
+    const pauseDisplayTimeout = () => {
+        if (shouldAutoHide) {
+            clearAllTimeouts()
+            const elapsedTime = Date.now() - displayStartTime.current
+            displayTimeRemaining.current -= elapsedTime
+        }
+    }
+    const resumeDisplayTimeout = () => {
+        if (shouldAutoHide) {
+            clearAllTimeouts()
+            displayTimeout.current = setTimeout(
+                runHideAnimation,
+                displayTimeRemaining.current
+            )
+        }
+    }
+
+    useEffect(() => {
+        // Additional check on inDOM prevents the AlertBar from briefly showing
+        // when it is mounted with a hidden prop set to true
+        if (hidden && inDOM) {
+            runHideAnimation()
+        }
+        if (!hidden) {
+            runShowAnimation()
+        }
+
+        return clearAllTimeouts
+    }, [hidden])
+
+    return !inDOM ? null : (
+        <div
+            ref={alertRef}
+            className={cx(className, {
+                info,
+                success,
+                warning,
+                critical,
+                inViewport,
+            })}
+            data-test={dataTest}
+            onMouseEnter={pauseDisplayTimeout}
+            onMouseLeave={resumeDisplayTimeout}
+        >
+            <Icon
+                dataTest={`${dataTest}-icon`}
+                icon={icon}
+                critical={critical}
+                success={success}
+                warning={warning}
+                info={info}
+            />
+            <Message>{children}</Message>
+            <Actions
+                actions={actions}
+                hide={runHideAnimation}
+                dataTest={dataTest}
+            />
+            <Dismiss
+                onClick={runHideAnimation}
+                dataTest={`${dataTest}-dismiss`}
+            />
+
+            <style jsx>{styles}</style>
+        </div>
+    )
+}
+
+const alertTypePropType = mutuallyExclusive(
+    ['success', 'warning', 'critical'],
+    PropTypes.bool
+)
+
+AlertBar.propTypes = {
+    /** 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 */
+    warning: alertTypePropType,
+    onHidden: PropTypes.func,
+}
+
+export { AlertBar }

package/src/alert-bar/alert-bar.prod.stories.js

@@ -0,0 +1,258 @@
+import { IconFile16 } from '@dhis2/ui-icons'
+import React, { useState } from 'react'
+import { AlertBar } from './index.js'
+
+const subtitle = `
+A floating alert that informs the user about temporary information
+in the context of the current screen.
+`
+
+const description = `
+Alert bars notify a user of some information. There are different types of
+alert bar for displaying different types of content. Use the alert bar type
+that matches your content type and importance. Note that alert bar can be
+ignored by the user, so they shouldn't be used for content that needs to
+block an app flow, use a modal instead.
+
+Alert bars are always displayed at centered and fixed at the bottom of the
+screen. Some types of alert bar dismiss after a set time, others must be
+dismissed by the user.
+
+See specification: [Design System](https://github.com/dhis2/design-system/blob/master/molecules/alertbar.md)
+
+\`\`\`js
+import { AlertBar } from '@dhis2/ui'
+\`\`\`
+`
+
+const Wrapper = (fn) => (
+    <div style={{ height: '260px' }}>
+        <div
+            className="alert-bars"
+            style={{
+                width: '100%',
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                paddingLeft: 16,
+            }}
+        >
+            {fn()}
+        </div>
+    </div>
+)
+
+const alertTypeArgType = {
+    table: {
+        type: {
+            summary: 'bool',
+            detail: "'success', 'warning', and 'critical' are mutually exclusive props",
+        },
+        defaultValue: {
+            summary: false,
+        },
+    },
+    control: {
+        type: 'boolean',
+    },
+}
+const iconArgType = {
+    table: {
+        type: {
+            summary: 'bool | element',
+        },
+    },
+}
+
+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: {
+            summary: '[{ label: string, onClick: func }]',
+        },
+    },
+}
+
+export default {
+    title: 'Alert Bar',
+    component: AlertBar,
+    decorators: [Wrapper],
+    args: {
+        children: 'I will autohide',
+    },
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: {
+            description: {
+                component: description,
+            },
+        },
+    },
+    argTypes: {
+        actions: { ...actionsArgType },
+        critical: { ...alertTypeArgType },
+        success: { ...alertTypeArgType },
+        warning: { ...alertTypeArgType },
+        permanent: { ...permanentArgType },
+        children: { ...childrenArgType },
+        icon: { ...iconArgType },
+    },
+}
+
+export const Default = (args) => <AlertBar {...args}></AlertBar>
+
+export const States = () => (
+    <React.Fragment>
+        <AlertBar permanent>Default (info)</AlertBar>
+        <AlertBar permanent success>
+            Success
+        </AlertBar>
+        <AlertBar permanent warning>
+            Warning
+        </AlertBar>
+        <AlertBar permanent critical>
+            Critical
+        </AlertBar>
+    </React.Fragment>
+)
+
+export const RTL = () => (
+    <React.Fragment>
+        <div dir="rtl">
+            <AlertBar permanent>Default (info)</AlertBar>
+            <AlertBar permanent success>
+                Success
+            </AlertBar>
+            <AlertBar permanent warning>
+                Warning
+            </AlertBar>
+            <AlertBar permanent critical>
+                Critical
+            </AlertBar>
+        </div>
+    </React.Fragment>
+)
+
+export const AutoHiding = () => (
+    <React.Fragment>
+        <AlertBar permanent>Permanent never auto-hides</AlertBar>
+        <AlertBar warning>Warning never auto-hides</AlertBar>
+        <AlertBar critical>Critial never auto-hides</AlertBar>
+        <AlertBar
+            duration={2000}
+            onHidden={(payload, event) => {
+                console.log('onHidden payload', payload)
+                console.log('onHidden event', event)
+            }}
+        >
+            Custom duration, hides after 2s
+        </AlertBar>
+        <AlertBar
+            onHidden={(payload, event) => {
+                console.log('onHidden payload', payload)
+                console.log('onHidden event', event)
+            }}
+        >
+            Default auto-hides after 8s
+        </AlertBar>
+    </React.Fragment>
+)
+AutoHiding.storyName = 'Auto hiding'
+
+export const WithActions = () => (
+    <AlertBar
+        permanent
+        actions={[
+            { label: 'Save', onClick: () => {} },
+            { label: 'Cancel', onClick: () => {} },
+        ]}
+    >
+        With Actions
+    </AlertBar>
+)
+WithActions.storyName = 'With actions'
+
+export const WithActionsAndInsufficientSpace = () => (
+    <AlertBar
+        permanent
+        actions={[
+            { label: 'Long action 1', onClick: () => {} },
+            { label: 'Long action 2', onClick: () => {} },
+        ]}
+    >
+        Some text, a pretty normal amount, that conflicts with pretty long
+        actions
+    </AlertBar>
+)
+WithActionsAndInsufficientSpace.storyName =
+    'With actions and insufficient space'
+
+export const Icons = () => (
+    <React.Fragment>
+        <AlertBar permanent>Default icon</AlertBar>
+        <AlertBar permanent icon={false}>
+            No icon
+        </AlertBar>
+        <AlertBar permanent icon={<IconFile16 />}>
+            Custom icon
+        </AlertBar>
+    </React.Fragment>
+)
+
+export const TextOverflow = () => (
+    <React.Fragment>
+        <AlertBar permanent>Short text</AlertBar>
+        <AlertBar permanent>
+            If the alert bar gets a ver long text, it will grow to a maximum of
+            600px and the text will overflow across several lines. If there are
+            multiple AlertBars in a stack, they will all grow to the size of the
+            widest sibling.
+        </AlertBar>
+    </React.Fragment>
+)
+TextOverflow.storyName = 'Text overflow'
+
+export const HiddenProp = () => {
+    const [hidden, setHidden] = useState(true)
+    const toggleVisibility = () => setHidden((prevHidden) => !prevHidden)
+    return (
+        <React.Fragment>
+            <button
+                style={{
+                    display: 'block',
+                    position: 'fixed',
+                    bottom: 150,
+                    left: 10,
+                }}
+                onClick={toggleVisibility}
+            >
+                {hidden ? 'Show' : 'Hide'}
+            </button>
+            <AlertBar permanent hidden={hidden}>
+                Short text
+            </AlertBar>
+        </React.Fragment>
+    )
+}
+HiddenProp.storyName = 'Hidden prop'

package/src/alert-bar/alert-bar.styles.js

@@ -0,0 +1,92 @@
+import { colors, spacers, elevations } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export const ANIMATION_TIME = 350
+
+export default css`
+    div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 4px;
+        box-shadow: ${elevations.e300};
+        padding-top: ${spacers.dp8};
+        padding-inline-end: ${spacers.dp8};
+        padding-bottom: ${spacers.dp8};
+        padding-inline-start: ${spacers.dp16};
+        margin-bottom: ${spacers.dp16};
+        max-width: 600px;
+        min-width: 300px;
+        font-size: 14px;
+        pointer-events: all;
+    }
+
+    /* States */
+
+    div.info {
+        background-color: ${colors.grey900};
+        color: ${colors.white};
+    }
+    div.success {
+        background-color: ${colors.green800};
+        color: ${colors.white};
+    }
+    div.warning {
+        background-color: ${colors.yellow300};
+        color: ${colors.yellow900};
+    }
+    div.critical {
+        background-color: ${colors.red800};
+        color: ${colors.white};
+    }
+
+    /* Animation */
+
+    @keyframes slidein {
+        from {
+            transform: translateY(${spacers.dp24});
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slideout {
+        0% {
+            transform: translateY(0);
+            opacity: 1;
+            margin-bottom: ${spacers.dp16};
+        }
+        45% {
+            opacity: 0;
+        }
+        100% {
+            transform: translateY(${spacers.dp8});
+            opacity: 0;
+            margin-bottom: var(--alert-bar-collapse, ${spacers.dp16});
+        }
+    }
+
+    div.inViewport {
+        animation-duration: ${ANIMATION_TIME}ms;
+        animation-name: slidein;
+        animation-fill-mode: forwards;
+        animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    div {
+        animation-duration: ${ANIMATION_TIME}ms;
+        animation-name: slideout;
+        animation-fill-mode: forwards;
+        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        div,
+        div.inViewport {
+            animation-duration: 0ms;
+        }
+    }
+`

package/src/alert-bar/dismiss.js

@@ -0,0 +1,39 @@
+import { spacers } from '@dhis2/ui-constants'
+import { IconCross24 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Dismiss = ({ onClick, dataTest }) => (
+    <div onClick={onClick} data-test={dataTest}>
+        <IconCross24 />
+        <style jsx>{`
+            div {
+                margin-inline-start: ${spacers.dp16};
+                min-height: 32px;
+                min-width: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 5px;
+            }
+            div:hover {
+                cursor: pointer;
+                background: rgba(0, 0, 0, 0.15);
+            }
+            div:active {
+                background: rgba(0, 0, 0, 0.25);
+            }
+            div :global(svg) {
+                width: 18px;
+                height: 18px;
+            }
+        `}</style>
+    </div>
+)
+
+Dismiss.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+}
+
+export { Dismiss }

package/src/alert-bar/features/api/index.js

@@ -0,0 +1,51 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an AlertBar with onHidden handler is rendered', () => {
+    cy.visitStory('AlertBar', 'With on hidden')
+})
+
+Given('an AlertBar with disabled icon is rendered', () => {
+    cy.visitStory('AlertBar', 'Disabled icon')
+})
+
+Given('an AlertBar with custom icon is rendered', () => {
+    cy.visitStory('AlertBar', 'Custom icon')
+})
+
+Given('an AlertBar with a message is rendered', () => {
+    cy.visitStory('AlertBar', 'With message')
+})
+
+Given('an AlertBar with permanent is rendered', () => {
+    cy.visitStory('AlertBar', 'Permanent')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
+When('the Alertbar is not rendered', () => {
+    cy.wait(8000)
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('not.exist')
+})
+
+Then('the icon will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-icon"]').should('be.visible')
+})
+
+Then('the icon will not be rendered', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-icon"]').should('not.exist')
+})
+
+Then('the custom icon will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar-icon"]')
+        .contains('Custom icon')
+        .should('be.visible')
+})
+
+Then('the message will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar"]')
+        .contains('With a message')
+        .should('be.visible')
+})
+
+Then('the AlertBar will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})

package/src/alert-bar/features/api.feature

@@ -0,0 +1,29 @@
+Feature: AlertBar API
+
+    Scenario: AlertBar icon shows by default
+        Given a default AlertBar is rendered
+        Then the icon will be visible
+
+    Scenario: AlertBar icon can be hidden
+        Given an AlertBar with disabled icon is rendered
+        Then the icon will not be rendered
+
+    Scenario: Custom AlertBar icon
+        Given an AlertBar with custom icon is rendered
+        Then the custom icon will be visible
+
+    Scenario: Standard AlertBar with a message
+        Given an AlertBar with a message is rendered
+        Then the message will be visible
+
+    Scenario: The AlertBar renders with a permanent flag
+        Given an AlertBar with permanent is rendered
+        When the default duration has passed
+        Then the AlertBar will be visible
+
+    Scenario: AlertBar will call the onHidden cb when hidden
+        Given an AlertBar with onHidden handler is rendered
+        When the default duration has passed
+        Then the AlertBar is not rendered
+        Then the onHidden handler is called
+

package/src/alert-bar/features/common/index.js

@@ -0,0 +1,26 @@
+import { When, Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default AlertBar is rendered', () => {
+    cy.visitStory('AlertBar', 'Default')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
+Given('the AlertBar is rendered', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('exist')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
+Then('the AlertBar is not rendered', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('not.exist')
+})
+
+When('the default duration has passed', () => {
+    cy.wait(8000)
+})
+
+Then('the onHidden handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onHidden).to.be.calledOnce
+        expect(win.onHidden).to.be.calledWith({}, null)
+    })
+})

package/src/alert-bar/features/hide/index.js

@@ -0,0 +1,39 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a permanent AlertBar with hidden and onHidden is rendered', () => {
+    cy.visitStory('AlertBar', 'Hidden prop')
+})
+
+Given('an AlertBar with a custom duration is rendered', () => {
+    cy.visitStory('AlertBar', 'Custom duration')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
+Given('a permanent AlertBar with actions is rendered', () => {
+    cy.visitStory('AlertBar', 'Permanent with actions')
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})
+
+When('the user clicks on the "Cancel" button', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-alertbar-action"]:contains("Cancel")'
+    ).click()
+})
+
+When('the user click a button which toggles the hidden prop to false', () => {
+    cy.get('button:contains("Show")').click()
+})
+
+When('the user click a button which toggles the hidden prop to true', () => {
+    cy.get('button:contains("Hide")').click()
+})
+
+When('the custom duration has passed', () => {
+    cy.wait(2000)
+})
+
+Then('the onHidden handler is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onHidden).to.not.be.called
+    })
+})

package/src/alert-bar/features/hide.feature

@@ -0,0 +1,26 @@
+Feature: Hiding the AlertBar
+
+    Scenario: AlertBar hides automatically after the default time
+        Given a default AlertBar is rendered
+        When the default duration has passed
+        Then the AlertBar is not rendered
+
+    Scenario: AlertBars hides automatically after a custom time
+        Given an AlertBar with a custom duration is rendered
+        When the custom duration has passed
+        Then the AlertBar is not rendered
+
+    Scenario: The user clicks the "Cancel" button
+        Given a permanent AlertBar with actions is rendered
+        When the user clicks on the "Cancel" button
+        Then the AlertBar is not rendered
+
+    Scenario: The hidden prop is toggled
+        Given a permanent AlertBar with hidden and onHidden is rendered
+        Then the AlertBar is not rendered
+        And the onHidden handler is not called
+        When the user click a button which toggles the hidden prop to false
+        Then the AlertBar is rendered
+        When the user click a button which toggles the hidden prop to true
+        Then the AlertBar is not rendered
+        And the onHidden handler is called

package/src/alert-bar/icon.js

@@ -0,0 +1,80 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import { spacers, colors } from '@dhis2/ui-constants'
+import {
+    IconErrorFilled24,
+    IconInfoFilled24,
+    IconWarningFilled24,
+    IconCheckmark24,
+} from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => {
+    if (error) {
+        return <IconErrorFilled24 color={colors.white} />
+    }
+    if (warning) {
+        return <IconWarningFilled24 color={colors.yellow900} />
+    }
+    if (valid) {
+        return <IconCheckmark24 color={colors.white} />
+    }
+    if (info) {
+        return <IconInfoFilled24 color={colors.white} />
+    }
+
+    return defaultTo
+}
+
+StatusIcon.propTypes = {
+    defaultTo: PropTypes.element,
+    error: PropTypes.bool,
+    info: PropTypes.bool,
+    valid: PropTypes.bool,
+    warning: PropTypes.bool,
+}
+
+const Icon = ({ icon, success, warning, critical, info, dataTest }) => {
+    if (icon === false) {
+        return null
+    }
+
+    return (
+        <div data-test={dataTest}>
+            {React.isValidElement(icon) ? (
+                icon
+            ) : (
+                <StatusIcon
+                    valid={success}
+                    error={critical}
+                    warning={warning}
+                    info={info}
+                />
+            )}
+            <style jsx>{`
+                div {
+                    display: flex;
+                    align-items: center;
+                    margin-inline-end: ${spacers.dp12};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element])
+const alertStatePropType = mutuallyExclusive(
+    ['success', 'warning', 'critical', 'info'],
+    PropTypes.bool
+)
+
+Icon.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    critical: alertStatePropType,
+    icon: iconPropType,
+    info: alertStatePropType,
+    success: alertStatePropType,
+    warning: alertStatePropType,
+}
+
+export { Icon, iconPropType }

package/src/alert-bar/index.js

@@ -0,0 +1 @@
+export { AlertBar } from './alert-bar.js'

package/src/alert-bar/message.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Message = ({ children }) => (
+    <div>
+        {children}
+        <style jsx>{`
+            div {
+                flex-grow: 1;
+            }
+        `}</style>
+    </div>
+)
+
+Message.propTypes = {
+    children: PropTypes.string.isRequired,
+}
+
+export { Message }

package/src/alert-stack/alert-stack.e2e.stories.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { AlertBar } from '../alert-bar/index.js'
+import { AlertStack } from './alert-stack.js'
+
+export default { title: 'AlertStack' }
+
+export const Default = () => (
+    <AlertStack>
+        <AlertBar permanent>Message</AlertBar>
+        <AlertBar permanent>Message</AlertBar>
+        <AlertBar permanent>Message</AlertBar>
+    </AlertStack>
+)

package/src/alert-stack/alert-stack.js

@@ -0,0 +1,44 @@
+import { layers } from '@dhis2/ui-constants'
+import { Portal } from '@dhis2-ui/portal'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const AlertStack = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-alertstack',
+}) => (
+    <Portal>
+        <div className={cx(className)} data-test={dataTest}>
+            {children}
+            <style jsx>{`
+                div {
+                    position: fixed;
+                    top: auto;
+                    inset-inline-end: auto;
+                    bottom: 0;
+                    inset-inline-start: 50%;
+                    transform: translateX(-50%);
+
+                    z-index: ${layers.alert};
+
+                    display: flex;
+                    flex-direction: column-reverse;
+
+                    pointer-events: none;
+                }
+
+                div:dir(rtl) {
+                    transform: translateX(50%);
+                }
+            `}</style>
+        </div>
+    </Portal>
+)
+
+AlertStack.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/alert-stack/alert-stack.prod.stories.js

@@ -0,0 +1,111 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { AlertBar } from '../alert-bar/index.js'
+import { AlertStack } from './alert-stack.js'
+
+const VARIANTS = ['info', 'success', 'warning', 'critical']
+
+const description = `
+A container for Alert Bars.
+
+_**Note:** The demos on this page may be slow._
+
+\`\`\`js
+import { AlertStack } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Alert Stack',
+    component: AlertStack,
+    // Use an iframe in docs to contain 'portal'
+    parameters: {
+        docs: {
+            inlineStories: false,
+            iframeHeight: '300px',
+            description: { component: description },
+        },
+    },
+}
+
+export const Default = (args) => (
+    <AlertStack {...args}>
+        <AlertBar permanent>First notification - I am at the bottom</AlertBar>
+        <AlertBar permanent critical>
+            Second notification
+        </AlertBar>
+        <AlertBar permanent warning>
+            Third notification
+        </AlertBar>
+        <AlertBar permanent success>
+            Fourth notification - I am at the top
+        </AlertBar>
+    </AlertStack>
+)
+
+export const Interactive = (args) => {
+    const [alerts, setAlerts] = useState([])
+    const nextId = useRef(0)
+    const addAlert = () => {
+        const id = nextId.current++
+        const variant = VARIANTS[id % VARIANTS.length]
+        setAlerts((current) => [
+            ...current,
+            { id, variant, message: `Alert #${id} (${variant})` },
+        ])
+    }
+    const removeAlert = (id) => {
+        setAlerts((current) => current.filter((a) => a.id !== id))
+    }
+    return (
+        <>
+            <button
+                onClick={addAlert}
+                style={{
+                    padding: '8px 16px',
+                    fontSize: '14px',
+                    cursor: 'pointer',
+                }}
+            >
+                Add alert
+            </button>
+            <AlertStack {...args}>
+                {alerts.map(({ id, variant, message }) => (
+                    <AlertBar
+                        key={id}
+                        {...{ [variant]: true }}
+                        onHidden={() => removeAlert(id)}
+                    >
+                        {message}
+                    </AlertBar>
+                ))}
+            </AlertStack>
+        </>
+    )
+}
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <AlertStack {...args}>
+                <AlertBar permanent>
+                    First notification - I am at the bottom
+                </AlertBar>
+                <AlertBar permanent critical>
+                    Second notification
+                </AlertBar>
+                <AlertBar permanent warning>
+                    Third notification
+                </AlertBar>
+                <AlertBar permanent success>
+                    Fourth notification - I am at the top
+                </AlertBar>
+            </AlertStack>
+        </div>
+    )
+}

package/src/alert-stack/features/render_children/alertbars.js

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an AlertStack with multiple AlertBars is rendered', () => {
+    cy.visitStory('Alertstack', 'Default')
+    cy.get('[data-test="dhis2-uicore-alertstack"]').should('be.visible')
+})
+
+Then('the AlertBars will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('have.length', 3)
+    cy.get('[data-test="dhis2-uicore-alertbar"]').should('be.visible')
+})

package/src/alert-stack/features/render_children.feature

@@ -0,0 +1,5 @@
+Feature: Shows AlertBars
+
+    Scenario: AlertStack with AlertBars
+        Given an AlertStack with multiple AlertBars is rendered
+        Then the AlertBars will be visible

package/src/alert-stack/index.js

@@ -0,0 +1 @@
+export { AlertStack } from './alert-stack.js'

package/src/index.js

@@ -0,0 +1,2 @@
+export { AlertBar } from './alert-bar/index.js'
+export { AlertStack } from './alert-stack/index.js'