@dhis2-ui/box 10.16.2 → 10.16.3-alpha.1

package/package.json

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Box } from './box.js'
+
+export default { title: 'Box' }
+export const WithChildren = () => <Box>I am a child</Box>
+export const Multiple = () => (
+    <Box marginTop="16px" maxWidth="400px">
+        I am a child in a Box.
+    </Box>
+)

package/src/box.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Box = ({
+    overflow,
+    height,
+    minHeight,
+    maxHeight,
+    width,
+    minWidth,
+    maxWidth,
+    marginTop,
+    children,
+    dataTest = 'dhis2-uicore-box',
+    className,
+}) => (
+    <div data-test={dataTest} className={className}>
+        {children}
+        <style jsx>{`
+            div {
+                ${marginTop ? `margin-top: ${marginTop};` : ''}
+                ${height ? `height: ${height};` : ''}
+                ${minHeight ? `min-height: ${minHeight};` : ''}
+                ${maxHeight ? `max-height: ${maxHeight};` : ''}
+                ${width ? `width: ${width};` : ''}
+                ${minWidth ? `min-width: ${minWidth};` : ''}
+                ${maxWidth ? `max-width: ${maxWidth};` : ''}
+                ${overflow ? `overflow: ${overflow};` : ''}
+            }
+        `}</style>
+    </div>
+)
+
+Box.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    height: PropTypes.string,
+    marginTop: PropTypes.string,
+    maxHeight: PropTypes.string,
+    maxWidth: PropTypes.string,
+    minHeight: PropTypes.string,
+    minWidth: PropTypes.string,
+    overflow: PropTypes.string,
+    width: PropTypes.string,
+}

package/src/box.prod.stories.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Box } from './box.js'
+
+const description = `
+A box for creating some layout on the page.
+
+\`\`\`js
+import { Box } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Box',
+    component: Box,
+    parameters: { docs: { description: { component: description } } },
+}
+
+const Template = (args) => <Box {...args} />
+
+export const Default = Template.bind({})
+Default.args = { children: 'I am a child in a Box.' }
+
+export const Height = Template.bind({})
+Height.args = {
+    ...Default.args,
+    height: '250px',
+}
+
+export const MaxHeight = Template.bind({})
+MaxHeight.args = {
+    children: (
+        <p style={{ height: '500px' }}>I am a tall child in a low Box.</p>
+    ),
+    maxHeight: '250px',
+}
+
+export const MinHeight = Template.bind({})
+MinHeight.args = { ...Default.args, minHeight: '50vh' }
+
+export const Width = Template.bind({})
+Width.args = { ...Default.args, width: '250px' }
+
+export const MinWidth = Template.bind({})
+MinWidth.args = { ...Default.args, minWidth: '50vh' }
+
+export const MaxWidth = Template.bind({})
+MaxWidth.args = { ...Default.args, maxWidth: '50vh' }
+
+export const Overflow = Template.bind({})
+Overflow.args = {
+    maxHeight: '250px',
+    overflow: 'scroll',
+    children: (
+        <p style={{ height: '500px' }}>
+            I am a tall child in a low Box, and my parent clips me
+        </p>
+    ),
+}

package/src/features/accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Box with children is rendered', () => {
+    cy.visitStory('Box', 'With children')
+    cy.get('[data-test="dhis2-uicore-box"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

package/src/features/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The Box renders children
+
+    Scenario: A Box with children
+        Given a Box with children is rendered
+        Then the children are visible

package/src/features/accepts_multiple_props/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Box with multiple props is rendered', () => {
+    cy.visitStory('Box', 'Multiple')
+    cy.get('[data-test="dhis2-uicore-box"]').should('be.visible')
+})
+
+Then('the styles are all applied', () => {
+    cy.get('[data-test="dhis2-uicore-box"]')
+        .should('have.css', 'margin-top', '16px')
+        .should('have.css', 'max-width', '400px')
+})

package/src/features/accepts_multiple_props.feature

@@ -0,0 +1,5 @@
+Feature: The Box accepts multiple props
+
+    Scenario: A Box with multiple props
+        Given a Box with multiple props is rendered
+        Then the styles are all applied

package/src/index.js

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