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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/css",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI CSS",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.1",
+        "@dhis2/ui-constants": "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/css-reset/css-reset.js

@@ -0,0 +1,199 @@
+import { theme } from '@dhis2/ui-constants'
+import React from 'react'
+
+const CssReset = () => (
+    <style jsx global>{`
+        html {
+            line-height: 1.15; /* 1 */
+            -webkit-text-size-adjust: 100%; /* 2 */
+            box-sizing: border-box;
+        }
+
+        *,
+        *:before,
+        *:after {
+            font-family: ${theme.fonts};
+            box-sizing: inherit;
+        }
+
+        body {
+            margin: 0;
+            font-family: ${theme.fonts};
+        }
+
+        main {
+            display: block;
+        }
+
+        h1 {
+            font-size: 2em;
+            margin: 0.67em 0;
+        }
+
+        hr {
+            box-sizing: content-box; /* 1 */
+            height: 0; /* 1 */
+            overflow: visible; /* 2 */
+        }
+
+        pre {
+            font-family: monospace, monospace; /* 1 */
+            font-size: 1em; /* 2 */
+        }
+
+        a {
+            background-color: transparent;
+        }
+
+        abbr[title] {
+            border-bottom: none; /* 1 */
+            text-decoration: underline; /* 2 */
+            text-decoration: underline dotted; /* 2 */
+        }
+
+        b,
+        strong {
+            font-weight: bolder;
+        }
+
+        code,
+        kbd,
+        samp {
+            font-family: monospace, monospace; /* 1 */
+            font-size: 1em; /* 2 */
+        }
+
+        small {
+            font-size: 80%;
+        }
+
+        sub,
+        sup {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        sub {
+            bottom: -0.25em;
+        }
+
+        sup {
+            top: -0.5em;
+        }
+
+        img {
+            border-style: none;
+        }
+
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+            font-family: inherit; /* 1 */
+            font-size: 100%; /* 1 */
+            line-height: 1.15; /* 1 */
+            margin: 0; /* 2 */
+        }
+
+        button,
+        input {
+            /* 1 */
+            overflow: visible;
+        }
+
+        button,
+        select {
+            /* 1 */
+            text-transform: none;
+        }
+
+        button,
+        [type='button'],
+        [type='reset'],
+        [type='submit'] {
+            -webkit-appearance: button;
+        }
+
+        button::-moz-focus-inner,
+        [type='button']::-moz-focus-inner,
+        [type='reset']::-moz-focus-inner,
+        [type='submit']::-moz-focus-inner {
+            border-style: none;
+            padding: 0;
+        }
+
+        button:-moz-focusring,
+        [type='button']:-moz-focusring,
+        [type='reset']:-moz-focusring,
+        [type='submit']:-moz-focusring {
+            outline: 1px dotted ButtonText;
+        }
+
+        fieldset {
+            padding: 0.35em 0.75em 0.625em;
+        }
+
+        legend {
+            box-sizing: border-box; /* 1 */
+            color: inherit; /* 2 */
+            display: table; /* 1 */
+            max-width: 100%; /* 1 */
+            padding: 0; /* 3 */
+            white-space: normal; /* 1 */
+        }
+
+        progress {
+            vertical-align: baseline;
+        }
+
+        textarea {
+            overflow: auto;
+        }
+
+        [type='checkbox'],
+        [type='radio'] {
+            box-sizing: border-box; /* 1 */
+            padding: 0; /* 2 */
+        }
+
+        [type='number']::-webkit-inner-spin-button,
+        [type='number']::-webkit-outer-spin-button {
+            height: auto;
+        }
+
+        [type='search'] {
+            -webkit-appearance: textfield; /* 1 */
+            outline-offset: -2px; /* 2 */
+        }
+
+        [type='search']::-webkit-search-decoration {
+            -webkit-appearance: none;
+        }
+
+        ::-webkit-file-upload-button {
+            -webkit-appearance: button; /* 1 */
+            font: inherit; /* 2 */
+        }
+
+        details {
+            display: block;
+        }
+
+        summary {
+            display: list-item;
+        }
+
+        template {
+            display: none;
+        }
+
+        [hidden] {
+            display: none;
+        }
+    `}</style>
+)
+
+export { CssReset }

package/src/css-reset/css-reset.prod.stories.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { CssReset } from './index.js'
+
+const description = `
+A tool for adding a global normalization stylesheet into the DOM that applies DHIS2 styles.
+
+- https://github.com/necolas/normalize.css
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+\`\`\`js
+import { CssReset } from '@dhis2/ui'
+\`\`\`
+`
+
+const App = ({ children }) => <div>{children}</div>
+
+export default {
+    title: 'CSS Reset',
+    component: CssReset,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const Default = (args) => (
+    <App>
+        <CssReset {...args} />
+
+        <p>
+            The <code>CssReset</code> component injects a global normalization
+            stylesheet into the DOM that sets the DHIS2 application defaults.
+        </p>
+
+        <p>
+            This also sets the <code>font-family</code> on the <code>body</code>{' '}
+            element to the DHIS2 font, which allows it to trickle down to the
+            components as well.
+        </p>
+
+        <p>
+            Just include the component in your application, preferably as early
+            as possible to avoid FOUC.{' '}
+        </p>
+    </App>
+)

package/src/css-reset/index.js

@@ -0,0 +1 @@
+export { CssReset } from './css-reset.js'

package/src/css-variables/css-variables.e2e.stories.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { CssVariables } from './index.js'
+
+export default { title: 'CssVariables' }
+export const WithColors = () => (
+    <React.Fragment>
+        <CssVariables colors />
+        <div
+            id="custom"
+            style={{ backgroundColor: 'var(--colors-blue900)' }}
+        ></div>
+    </React.Fragment>
+)
+export const WithTheme = () => (
+    <React.Fragment>
+        <CssVariables theme />
+        <div
+            id="custom"
+            style={{ backgroundColor: 'var(--theme-primary900)' }}
+        ></div>
+    </React.Fragment>
+)
+export const WithLayers = () => (
+    <React.Fragment>
+        <CssVariables layers />
+        <div
+            id="custom"
+            style={{ zIndex: 'var(--layers-alert)', position: 'absolute' }}
+        ></div>
+    </React.Fragment>
+)
+export const WithSpacers = () => (
+    <React.Fragment>
+        <CssVariables spacers />
+        <div id="custom" style={{ margin: 'var(--spacers-dp4)' }}></div>
+    </React.Fragment>
+)
+export const WithElevations = () => (
+    <React.Fragment>
+        <CssVariables elevations />
+        <div id="custom" style={{ boxShadow: 'var(--elevations-e100)' }}></div>
+    </React.Fragment>
+)

package/src/css-variables/css-variables.js

@@ -0,0 +1,53 @@
+import * as theme from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const toPrefixedThemeSection = (themeSectionKey) =>
+    // eslint-disable-next-line import/namespace
+    Object.entries(theme[themeSectionKey]).reduce((prefixed, [key, value]) => {
+        prefixed[`${themeSectionKey}-${key}`] = value
+
+        return prefixed
+    }, {})
+
+const toCustomPropertyString = (themeSection) =>
+    Object.entries(themeSection)
+        .map(([key, value]) => `--${key}: ${value};`)
+        .join('\n')
+
+const CssVariables = ({
+    colors = false,
+    theme = false,
+    layers = false,
+    spacers = false,
+    elevations = false,
+}) => {
+    const allowedProps = { colors, theme, layers, spacers, elevations }
+    const variables = Object.keys(allowedProps)
+        // Filter all props that are false
+        .filter((prop) => allowedProps[prop])
+        // Map props to corresponding theme section and prefixes keys with section name
+        .map(toPrefixedThemeSection)
+        // Map each section to a single string of css custom property declarations
+        .map(toCustomPropertyString)
+        // Join all the sections to a single string
+        .join('\n')
+
+    return (
+        <style jsx global>{`
+            html {
+                ${variables}
+            }
+        `}</style>
+    )
+}
+
+CssVariables.propTypes = {
+    colors: PropTypes.bool,
+    elevations: PropTypes.bool,
+    layers: PropTypes.bool,
+    spacers: PropTypes.bool,
+    theme: PropTypes.bool,
+}
+
+export { CssVariables }

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

@@ -0,0 +1,112 @@
+import React from 'react'
+import { CssVariables } from './index.js'
+
+const description = `
+A utility for adding DHIS2 theme variables to global CSS variables.
+
+\`\`\`js
+import { CssVariables } from '@dhis2/ui'
+\`\`\`
+`
+
+const App = ({ children }) => <div>{children}</div>
+
+export default {
+    title: 'CSS Variables',
+    component: CssVariables,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const AllVariables = (args) => (
+    <App>
+        <CssVariables {...args} />
+
+        <p>
+            The sections of the theme that should be inserted can be toggled
+            with flags, which allows the theme variables to be used as regular
+            CSS custom properties. So this{' '}
+            <span style={{ color: 'var(--colors-red500)' }}>text</span> uses the
+            vanilla CSS{' '}
+            <span style={{ color: 'var(--colors-blue500)' }}>
+                custom properties
+            </span>{' '}
+            set by the CssVariables component.
+        </p>
+    </App>
+)
+AllVariables.args = {
+    colors: true,
+    theme: true,
+    layers: true,
+    spacers: true,
+    elevations: true,
+}
+
+export const NoVariables = (args) => (
+    <App>
+        <CssVariables {...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>
+)

package/src/css-variables/features/sets_variables/index.js

@@ -0,0 +1,53 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a CssVariables component with colors flag is rendered', () => {
+    cy.visitStory('CssVariables', 'With colors')
+})
+
+Given('a CssVariables component with theme flag is rendered', () => {
+    cy.visitStory('CssVariables', 'With theme')
+})
+
+Given('a CssVariables component with layers flag is rendered', () => {
+    cy.visitStory('CssVariables', 'With layers')
+})
+
+Given('a CssVariables component with spacers flag is rendered', () => {
+    cy.visitStory('CssVariables', 'With spacers')
+})
+
+Given('a CssVariables component with elevations flag is rendered', () => {
+    cy.visitStory('CssVariables', 'With elevations')
+})
+
+Then('the colors css variables are set', () => {
+    cy.get('div#custom').should(
+        'have.css',
+        'background-color',
+        'rgb(9, 51, 113)'
+    )
+})
+
+Then('the theme css variables are set', () => {
+    cy.get('div#custom').should(
+        'have.css',
+        'background-color',
+        'rgb(9, 51, 113)'
+    )
+})
+
+Then('the layers css variables are set', () => {
+    cy.get('div#custom').should('have.css', 'z-index', '9999')
+})
+
+Then('the spacers css variables are set', () => {
+    cy.get('div#custom').should('have.css', 'margin', '4px')
+})
+
+Then('the elevations css variables are set', () => {
+    cy.get('div#custom').should(
+        'have.css',
+        'box-shadow',
+        'rgba(33, 41, 52, 0.06) 0px 1px 2px 0px, rgba(33, 41, 52, 0.1) 0px 1px 3px 0px'
+    )
+})

package/src/css-variables/features/sets_variables.feature

@@ -0,0 +1,21 @@
+Feature: CssVariables sets css variables
+
+    Scenario: CssVariables with colors
+        Given a CssVariables component with colors flag is rendered
+        Then the colors css variables are set
+
+    Scenario: CssVariables with theme
+        Given a CssVariables component with theme flag is rendered
+        Then the theme css variables are set
+
+    Scenario: CssVariables with layers
+        Given a CssVariables component with layers flag is rendered
+        Then the layers css variables are set
+
+    Scenario: CssVariables with spacers
+        Given a CssVariables component with spacers flag is rendered
+        Then the spacers css variables are set
+
+    Scenario: CssVariables with elevations
+        Given a CssVariables component with elevations flag is rendered
+        Then the elevations css variables are set

package/src/css-variables/index.js

@@ -0,0 +1 @@
+export { CssVariables } from './css-variables.js'

package/src/index.js

@@ -0,0 +1,2 @@
+export { CssReset } from './css-reset/index.js'
+export { CssVariables } from './css-variables/index.js'