@dhis2-ui/menu 10.16.2 → 10.16.3

package/src/menu-item/menu-item.styles.js

@@ -0,0 +1,133 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    li {
+        display: flex;
+        align-items: stretch;
+        padding: 0;
+        cursor: pointer;
+        list-style: none;
+        background-color: ${colors.white};
+        color: ${colors.grey900};
+        fill: ${colors.grey900};
+        font-size: 14px;
+        line-height: 16px;
+        user-select: none;
+    }
+
+    li:hover {
+        background-color: ${colors.grey200};
+    }
+
+    li:active,
+    li.active {
+        background-color: ${colors.grey300};
+    }
+
+    li.destructive {
+        color: ${colors.red700};
+        fill: ${colors.red600};
+    }
+
+    li.destructive:hover {
+        background-color: ${colors.red050};
+    }
+
+    li.destructive:active,
+    li.destructive.active {
+        background-color: ${colors.red100};
+    }
+
+    li.disabled {
+        cursor: not-allowed;
+        color: ${colors.grey500};
+        fill: ${colors.grey500};
+    }
+
+    li.disabled:hover {
+        background-color: ${colors.white};
+    }
+
+    /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
+    li:focus {
+        outline: 3px solid ${theme.focus};
+        outline-offset: -3px;
+    }
+    li:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    a {
+        display: inline-flex;
+        flex-grow: 1;
+        align-items: center;
+        padding: 0 ${spacers.dp16};
+        min-height: 40px;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    li.with-chevron a {
+        padding-inline-end: ${spacers.dp8};
+    }
+
+    li.dense a {
+        padding: 0 ${spacers.dp12};
+        min-height: 32px;
+    }
+
+    li.with-chevron.dense a {
+        padding-inline-end: ${spacers.dp4};
+    }
+
+    .label {
+        flex-grow: 1;
+        padding: ${spacers.dp12} 0;
+    }
+
+    li.dense .label {
+        padding: ${spacers.dp8} 0;
+    }
+
+    .icon {
+        flex-grow: 0;
+        margin-inline-end: ${spacers.dp12};
+        width: 24px;
+        height: 24px;
+    }
+
+    .suffix {
+        display: flex;
+        align-items: center;
+        margin-inline-start: ${spacers.dp8};
+    }
+
+    .chevron {
+        display: flex;
+        align-items: center;
+        flex-grow: 0;
+        margin-inline-start: ${spacers.dp24};
+    }
+
+    .chevron:dir(rtl) {
+        transform: rotate(180deg);
+    }
+
+    li.dense .icon {
+        margin-inline-end: ${spacers.dp8};
+        width: 16px;
+        height: 16px;
+    }
+
+    li .icon > :global(svg) {
+        width: 24px;
+        height: 24px;
+    }
+
+    li.dense .icon > :global(svg),
+    li .chevron > :global(svg) {
+        width: 16px;
+        height: 16px;
+    }
+`

package/src/menu-section-header/features/accepts_label/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MenuSectionHeader supplied with a label is rendered', () => {
+    cy.visitStory('MenuSectionHeader', 'With Label')
+    cy.get('[data-test="dhis2-uicore-menusectionheader"]').should('be.visible')
+})
+
+Then('the label is visible', () => {
+    cy.get(':contains("label")').should('be.visible')
+})

package/src/menu-section-header/features/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: The MenuSectionHeader accepts a label prop
+
+    Scenario: MenuSectionHeader renders supplied label
+        Given a MenuSectionHeader supplied with a label is rendered
+        Then the label is visible

package/src/menu-section-header/index.js

@@ -0,0 +1 @@
+export { MenuSectionHeader } from './menu-section-header.js'

package/src/menu-section-header/menu-section-header.e2e.stories.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Menu } from '../index.js'
+import { MenuSectionHeader } from './index.js'
+
+export default {
+    title: 'MenuSectionHeader',
+    component: MenuSectionHeader,
+    decorators: [(story) => <Menu>{story()}</Menu>],
+}
+
+export const WithLabel = () => <MenuSectionHeader label="label" />

package/src/menu-section-header/menu-section-header.js

@@ -0,0 +1,52 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import { Divider } from '@dhis2-ui/divider'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const MenuSectionHeader = ({
+    className,
+    dataTest = 'dhis2-uicore-menusectionheader',
+    dense,
+    hideDivider,
+    label,
+}) => (
+    <li data-test={dataTest} className={cx(className, { dense })}>
+        {!hideDivider && <Divider dense={dense} />}
+
+        <h6>{label}</h6>
+
+        <style jsx>{`
+            li {
+                list-style: none;
+                background-color: ${colors.white};
+                user-select: none;
+                padding: 0;
+                line-height: 0;
+            }
+            h6 {
+                margin: 0;
+                padding: ${spacers.dp8} ${spacers.dp16} ${spacers.dp8}
+                    ${spacers.dp16};
+                font-size: 13px;
+                line-height: 16px;
+                font-weight: 500;
+                color: ${colors.grey700};
+            }
+            li.dense h6 {
+                padding: ${spacers.dp8} ${spacers.dp12} ${spacers.dp4}
+                    ${spacers.dp12};
+            }
+        `}</style>
+    </li>
+)
+
+MenuSectionHeader.propTypes = {
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    hideDivider: PropTypes.bool,
+    label: PropTypes.node,
+}
+
+export { MenuSectionHeader }

package/src/menu-section-header/menu-section-header.prod.stories.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Menu, MenuItem } from '../index.js'
+import { MenuSectionHeader } from './menu-section-header.js'
+
+const description = `
+Items in a menu can be split into separate sections by using Dividers. Group relevant menu items together to help the user understand the options quickly. A Divider can be used alone. If using a Menu Section Header, a divider will be automatically included. Try not to group single menu items together. An exception to this is a critical destructive menu item, like 'Delete', which can be separated from other menu items.
+
+\`\`\`js
+import { MenuSectionHeader } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Menu Section Header',
+    component: MenuSectionHeader,
+    args: { label: 'Section header' },
+    parameters: { docs: { description: { component: description } } },
+}
+
+const Template = ({ menuArgs, ...args }) => (
+    <Menu {...menuArgs}>
+        <MenuItem label="Menu item above" />
+        <MenuSectionHeader {...args} />
+        <MenuItem label="Menu item below" />
+    </Menu>
+)
+Template.propTypes = { menuArgs: PropTypes.shape() }
+
+export const Default = Template.bind({})
+
+export const Dense = Template.bind({})
+Dense.args = { menuArgs: { dense: true }, dense: true }
+
+export const WithoutDivider = Template.bind({})
+WithoutDivider.args = { hideDivider: true }
+
+export const TopOfList = (args) => (
+    <Menu>
+        <MenuSectionHeader {...args} />
+        <MenuItem label="Item 1" />
+        <MenuItem label="Item 2" />
+    </Menu>
+)
+TopOfList.args = { label: 'Top of list (so <Menu> hides divider)' }
+TopOfList.parameters = {
+    docs: {
+        description: {
+            story: 'When the Section Header is the first child of a `<Menu>`, the Menu parent automatically applies the `hideDivider` prop.',
+        },
+    },
+}