@dhis2-ui/notice-box 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/notice-box",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI NoticeBox",
     "repository": {
         "type": "git",
@@ -33,14 +33,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.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/__tests__/notice-box-icon.test.js

@@ -0,0 +1,104 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { NoticeBoxIcon } from '../notice-box-icon.js'
+
+describe('NoticeBoxIcon', () => {
+    it('should render info icon by default', () => {
+        const wrapper = shallow(<NoticeBoxIcon dataTest="test" />)
+
+        expect(wrapper.find('SvgWarningFilled24')).toHaveLength(0)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(1)
+    })
+
+    it('should render 16px info icon when dense', () => {
+        const wrapper = shallow(<NoticeBoxIcon dense dataTest="test" />)
+
+        expect(wrapper.find('SvgInfoFilled16')).toHaveLength(1)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0)
+    })
+
+    it('should render 16px error icon when dense and error', () => {
+        const wrapper = shallow(<NoticeBoxIcon dense error dataTest="test" />)
+
+        expect(wrapper.find('SvgErrorFilled16')).toHaveLength(1)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0)
+    })
+
+    it('should render custom icon when icon is set', () => {
+        const wrapper = shallow(
+            <NoticeBoxIcon
+                icon={<span className="custom">x</span>}
+                dataTest="test"
+            />
+        )
+
+        expect(wrapper.find('.custom')).toHaveLength(1)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0)
+    })
+
+    it('should ignore status props when custom icon is set', () => {
+        const wrapper = shallow(
+            <NoticeBoxIcon
+                error
+                icon={<span className="custom">x</span>}
+                dataTest="test"
+            />
+        )
+
+        expect(wrapper.find('.custom')).toHaveLength(1)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0)
+    })
+
+    it('should log errors when both warning and error flag are set', () => {
+        const spy = jest
+            .spyOn(global.console, 'error')
+            .mockImplementation(() => {})
+        shallow(<NoticeBoxIcon warning error dataTest="test" />)
+
+        expect(spy.mock.calls[0]).toEqual([
+            'Warning: Failed %s type: %s%s',
+            'prop',
+            "Invalid prop `error` supplied to `NoticeBoxIcon`, Property 'error' is mutually exclusive with 'warning', but both have a thruthy value.",
+            expect.any(String),
+        ])
+
+        expect(spy.mock.calls[1]).toEqual([
+            'Warning: Failed %s type: %s%s',
+            'prop',
+            "Invalid prop `warning` supplied to `NoticeBoxIcon`, Property 'warning' is mutually exclusive with 'error', but both have a thruthy value.",
+            expect.any(String),
+        ])
+
+        spy.mockRestore()
+    })
+
+    it('should render error icon when both warning and error flag are set', () => {
+        const spy = jest
+            .spyOn(global.console, 'error')
+            .mockImplementation(() => {})
+        const wrapper = shallow(<NoticeBoxIcon warning error dataTest="test" />)
+
+        expect(wrapper.find('SvgWarningFilled24')).toHaveLength(0)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(1)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0)
+
+        spy.mockRestore()
+    })
+
+    it('should render error icon when only error flag is set', () => {
+        const wrapper = shallow(<NoticeBoxIcon error dataTest="test" />)
+
+        expect(wrapper.find('SvgWarningFilled24')).toHaveLength(0)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(1)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0)
+    })
+
+    it('should render warning icon when only warning flag is set', () => {
+        const wrapper = shallow(<NoticeBoxIcon warning dataTest="test" />)
+
+        expect(wrapper.find('SvgWarningFilled24')).toHaveLength(1)
+        expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0)
+        expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0)
+    })
+})

package/src/__tests__/notice-box-message.test.js

@@ -0,0 +1,21 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { NoticeBoxMessage } from '../notice-box-message.js'
+
+describe('NoticeBoxMessage', () => {
+    it('should return null when there are no children', () => {
+        const props = {
+            dataTest: 'test',
+        }
+
+        expect(NoticeBoxMessage(props)).toBe(null)
+    })
+
+    it('should render children', () => {
+        const wrapper = shallow(
+            <NoticeBoxMessage dataTest="test">children</NoticeBoxMessage>
+        )
+
+        expect(wrapper.text()).toEqual(expect.stringContaining('children'))
+    })
+})

package/src/__tests__/notice-box-title.test.js

@@ -0,0 +1,21 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { NoticeBoxTitle } from '../notice-box-title.js'
+
+describe('NoticeBoxTitle', () => {
+    it('should return null when there is no title', () => {
+        const props = {
+            dataTest: 'test',
+        }
+
+        expect(NoticeBoxTitle(props)).toBe(null)
+    })
+
+    it('should render title', () => {
+        const wrapper = shallow(
+            <NoticeBoxTitle title="title" dataTest="test" />
+        )
+
+        expect(wrapper.text()).toEqual(expect.stringContaining('title'))
+    })
+})

package/src/features/accepts_children/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a NoticeBox receives a message as children', () => {
+    cy.visitStory('NoticeBox', 'With children')
+    cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible')
+})
+
+Then('the message is visible', () => {
+    cy.get('[data-test="dhis2-uicore-noticebox-content-message"]')
+        .contains('The noticebox content')
+        .should('be.visible')
+})

package/src/features/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The NoticeBox can render an optional message
+
+    Scenario: A NoticeBox is provided a message
+        Given a NoticeBox receives a message as children
+        Then the message is visible

package/src/features/accepts_title/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a NoticeBox receives a title prop', () => {
+    cy.visitStory('NoticeBox', 'With title')
+    cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible')
+})
+
+Then('the title is visible', () => {
+    cy.get('[data-test="dhis2-uicore-noticebox-content-title"]')
+        .contains('The noticebox title')
+        .should('be.visible')
+})

package/src/features/accepts_title.feature

@@ -0,0 +1,5 @@
+Feature: The NoticeBox can render an optional title
+
+    Scenario: A NoticeBox is provided a title
+        Given a NoticeBox receives a title prop
+        Then the title is visible

package/src/index.js

@@ -0,0 +1 @@
+export { NoticeBox } from './notice-box.js'

package/src/notice-box-content.js

@@ -0,0 +1,40 @@
+import { spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { NoticeBoxMessage } from './notice-box-message.js'
+import { NoticeBoxTitle } from './notice-box-title.js'
+
+export const NoticeBoxContent = ({
+    children,
+    dataTest = 'dhis2-uicore-noticebox-content',
+    title,
+    dense = false,
+}) => {
+    return (
+        <div data-test={dataTest}>
+            <NoticeBoxTitle
+                title={title}
+                dense={dense}
+                dataTest={`${dataTest}-title`}
+            />
+            <NoticeBoxMessage dense={dense} dataTest={`${dataTest}-message`}>
+                {children}
+            </NoticeBoxMessage>
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-direction: column;
+                    gap: ${dense ? '2px' : spacers.dp8};
+                    padding-block-start: ${dense ? '0' : '3px'};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+NoticeBoxContent.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    title: PropTypes.string,
+}

package/src/notice-box-icon.js

@@ -0,0 +1,83 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import { colors, spacers } from '@dhis2/ui-constants'
+import {
+    IconCheckmarkCircle16,
+    IconCheckmarkCircle24,
+    IconErrorFilled16,
+    IconErrorFilled24,
+    IconInfoFilled16,
+    IconInfoFilled24,
+    IconWarningFilled16,
+    IconWarningFilled24,
+} from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const NoticeBoxIcon = ({
+    valid,
+    warning,
+    error,
+    dataTest,
+    dense = false,
+    icon,
+}) => {
+    const marginInlineEnd = dense ? spacers.dp8 : spacers.dp12
+
+    if (icon != null) {
+        return (
+            <div data-test={dataTest}>
+                {icon}
+                <style jsx>{`
+                    div {
+                        display: flex;
+                        flex-shrink: 0;
+                        align-items: flex-start;
+                        line-height: 0;
+                        margin-inline-end: ${marginInlineEnd};
+                    }
+                `}</style>
+            </div>
+        )
+    }
+
+    let color = colors.blue900
+    let Icon = dense ? IconInfoFilled16 : IconInfoFilled24
+
+    if (valid) {
+        color = colors.green700
+        Icon = dense ? IconCheckmarkCircle16 : IconCheckmarkCircle24
+    }
+
+    if (warning) {
+        color = colors.yellow700
+        Icon = dense ? IconWarningFilled16 : IconWarningFilled24
+    }
+
+    if (error) {
+        color = colors.red700
+        Icon = dense ? IconErrorFilled16 : IconErrorFilled24
+    }
+
+    return (
+        <div data-test={dataTest}>
+            <Icon color={color} />
+
+            <style jsx>{`
+                margin-inline-end: ${marginInlineEnd};
+                margin-block-start: ${dense ? '1px' : '0'};
+                height: ${dense ? spacers.dp16 : spacers.dp24};
+            `}</style>
+        </div>
+    )
+}
+
+NoticeBoxIcon.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    /** Uses 16px icons and tighter spacing between icon and content */
+    dense: PropTypes.bool,
+    error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+    /** Replaces the default status icon (error/warning/valid still affect box styling) */
+    icon: PropTypes.node,
+    valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+    warning: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+}

package/src/notice-box-message.js

@@ -0,0 +1,29 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const NoticeBoxMessage = ({ children, dataTest, dense = false }) => {
+    if (!children) {
+        return null
+    }
+
+    return (
+        <div data-test={dataTest}>
+            {children}
+
+            <style jsx>{`
+                div {
+                    color: ${colors.grey900};
+                    font-size: ${dense ? '13px' : '14px'};
+                    line-height: ${dense ? '18px' : '19px'};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+NoticeBoxMessage.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    dense: PropTypes.bool,
+}

package/src/notice-box-title.js

@@ -0,0 +1,30 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const NoticeBoxTitle = ({ title, dataTest, dense = false }) => {
+    if (!title) {
+        return null
+    }
+
+    return (
+        <h6 data-test={dataTest}>
+            {title}
+            <style jsx>{`
+                h6 {
+                    color: ${colors.grey900};
+                    font-size: ${dense ? '13px' : '14px'};
+                    font-weight: 500;
+                    line-height: ${dense ? '18px' : '19px'};
+                    margin: 0;
+                }
+            `}</style>
+        </h6>
+    )
+}
+
+NoticeBoxTitle.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    dense: PropTypes.bool,
+    title: PropTypes.string,
+}

package/src/notice-box.e2e.stories.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { NoticeBox } from './notice-box.js'
+
+export default { title: 'NoticeBox' }
+export const WithChildren = () => <NoticeBox>The noticebox content</NoticeBox>
+export const WithTitle = () => <NoticeBox title="The noticebox title" />

package/src/notice-box.js

@@ -0,0 +1,91 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import { spacers, colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { NoticeBoxContent } from './notice-box-content.js'
+import { NoticeBoxIcon } from './notice-box-icon.js'
+
+export const NoticeBox = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-noticebox',
+    title,
+    warning,
+    error,
+    valid,
+    dense = false,
+    icon,
+}) => {
+    const classnames = cx(className, 'root', { warning, error, valid, dense })
+
+    return (
+        <div className={classnames} data-test={dataTest}>
+            <NoticeBoxIcon
+                error={error}
+                warning={warning}
+                valid={valid}
+                dense={dense}
+                icon={icon}
+                dataTest={`${dataTest}-icon`}
+            />
+            <div>
+                <NoticeBoxContent
+                    title={title}
+                    dense={dense}
+                    dataTest={`${dataTest}-content`}
+                >
+                    {children}
+                </NoticeBoxContent>
+            </div>
+
+            <style jsx>{`
+                .root {
+                    background: ${colors.blue050};
+                    border: 1px solid ${colors.blue200};
+                    border-radius: 3px;
+                    display: flex;
+                    padding-block: ${spacers.dp12};
+                    padding-inline: ${spacers.dp16};
+                }
+
+                .root.dense {
+                    padding-block: ${spacers.dp8};
+                    padding-inline: ${spacers.dp8};
+                }
+
+                .root.warning {
+                    background: ${colors.yellow050};
+                    border: 1px solid ${colors.yellow200};
+                }
+
+                .root.error {
+                    background: ${colors.red050};
+                    border: 2px solid ${colors.red500};
+                }
+
+                .root.valid {
+                    background: ${colors.green050};
+                    border: 1px solid ${colors.green200};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+NoticeBox.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Uses 16px icons and tighter padding and internal spacing */
+    dense: PropTypes.bool,
+    /** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
+    error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+    /** Replaces the default status icon; `error`, `warning`, and `valid` still set box colors */
+    icon: PropTypes.node,
+    title: PropTypes.string,
+    /** Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props */
+    valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+    /** Applies 'warning' message styles. Mutually exclusive with the `error` and `valid` props */
+    warning: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+}

package/src/notice-box.prod.stories.js

@@ -0,0 +1,146 @@
+import { colors, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconCalendar24 } from '@dhis2/ui-icons'
+import React from 'react'
+import { NoticeBox } from './notice-box.js'
+
+const subtitle = `Highlights useful information that is directly relevant to the page the user is viewing`
+
+const description = `
+Use a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of.
+
+Notice boxes are different from alert bars in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened.
+
+Another way to decide which component to use:
+
+- a notice box will usually be displayed when a page loads, before a user takes action
+- an alert bar will usually display in response to an action/event
+
+Notice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display.
+
+Do not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information.
+
+Learn more about Notice Boxes at [Design System: Notice Box](https://github.com/dhis2/design-system/blob/master/molecules/notice-box.md).
+
+\`\`\`js
+import { NoticeBox } from '@dhis2/ui'
+\`\`\`
+`
+
+const text =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+    'Ut semper interdum scelerisque. Suspendisse ut velit sed ' +
+    'lacus pretium convallis vitae sit amet purus. Nam ut ' +
+    'libero rhoncus, consectetur sem a, sollicitudin lectus.'
+
+export default {
+    title: 'Notice Box',
+    component: NoticeBox,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    argTypes: {
+        dense: { control: 'boolean' },
+        error: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        valid: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const DashboardUpdateTemplate = (args) => (
+    <NoticeBox {...args}>
+        Data shown in this dashboard may take a few hours to update. Scheduled
+        dashboard updates can be managed in the scheduler app.
+    </NoticeBox>
+)
+
+export const Default = DashboardUpdateTemplate.bind({})
+Default.args = { title: 'Your database was updated in the last 24 hours' }
+
+export const WithCustomIcon = (args) => (
+    <NoticeBox {...args}>
+        Dashboard updates can be managed in the scheduler app.
+    </NoticeBox>
+)
+WithCustomIcon.args = {
+    title: 'Scheduled maintenance',
+    icon: <IconCalendar24 color={colors.grey900} />,
+}
+
+export const Valid = (args) => (
+    <NoticeBox {...args}>
+        Programs using these rules are updated automatically.
+    </NoticeBox>
+)
+Valid.args = {
+    valid: true,
+    title: 'Program rules exported successfully',
+}
+
+export const Warning = (args) => (
+    <NoticeBox {...args}>
+        No one will be able to access this program. Add some Organisation Units
+        to the access list.
+    </NoticeBox>
+)
+Warning.args = {
+    warning: true,
+    title: 'This program has no assigned Organisation Units',
+}
+
+export const Error = () => (
+    <NoticeBox title="Access rules for this instance are set to 'Public'" error>
+        Data could be accessed from outside this instance. Update access rules
+        immediately.
+    </NoticeBox>
+)
+Error.args = {
+    error: true,
+    title: "Access rules for this instance are set to 'Public'",
+}
+
+export const WithALongTitle = (args) => (
+    <NoticeBox {...args}>The title text will wrap</NoticeBox>
+)
+WithALongTitle.args = { error: true, title: text }
+
+export const WithoutTitle = () => (
+    <NoticeBox>This noticebox does not have a title.</NoticeBox>
+)
+
+export const TitleOnly = () => (
+    <NoticeBox title="This noticebox has only a title"></NoticeBox>
+)
+
+const RtlNoticeTemplate = (args) => (
+    <div dir="rtl">
+        <NoticeBox {...args}>هذه رسالة باللغة العربية.</NoticeBox>
+    </div>
+)
+
+export const RTL = RtlNoticeTemplate.bind({})
+RTL.args = { title: 'مثال على العنوان' }
+RTL.storyName = 'RTL Text'
+
+export const Dense = DashboardUpdateTemplate.bind({})
+Dense.args = {
+    dense: true,
+    title: 'Your database was updated in the last 24 hours',
+}
+
+export const DenseWithALongTitle = (args) => (
+    <NoticeBox {...args}>The title text will wrap</NoticeBox>
+)
+DenseWithALongTitle.args = { dense: true, error: true, title: text }
+
+export const DenseWithoutTitle = (args) => (
+    <NoticeBox {...args}>This noticebox does not have a title.</NoticeBox>
+)
+DenseWithoutTitle.args = { dense: true }
+
+export const DenseTitleOnly = (args) => <NoticeBox {...args}></NoticeBox>
+DenseTitleOnly.args = { dense: true, title: 'This noticebox has only a title' }
+
+export const DenseRTL = RtlNoticeTemplate.bind({})
+DenseRTL.args = { dense: true, title: 'مثال على العنوان' }
+DenseRTL.storyName = 'Dense RTL Text'