@dhis2-ui/card 10.16.2 → 10.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/card",
-    "version": "10.16.2",
+    "version": "10.16.3",
     "description": "UI Card",
     "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",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/card.e2e.stories.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Card } from './card.js'
+
+export default { title: 'Card' }
+export const WithChildren = () => (
+    <Card>
+        <span>I am a child</span>
+        <span>I am a child</span>
+        <span>I am a child</span>
+    </Card>
+)

package/src/card.js

@@ -0,0 +1,32 @@
+import { colors, elevations } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
+    <div className={cx(className)} data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                display: inline-block;
+                position: relative;
+
+                width: 100%;
+                height: 100%;
+
+                border-radius: 3px;
+                background: ${colors.white};
+                box-shadow: ${elevations.e100};
+            }
+        `}</style>
+    </div>
+)
+
+Card.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export { Card }

package/src/card.prod.stories.js

@@ -0,0 +1,43 @@
+import { Box } from '@dhis2-ui/box'
+import React from 'react'
+import { Card } from './card.js'
+
+const subtitle = `
+A card is a container element for grouping together
+and separating blocks of content.
+`
+
+const description = `
+Use a card where there is content that can be grouped together.
+Cards are most often useful when this grouped content may be repeated,
+for example with items on a dashboard, or different sections of patient
+information displayed in a profile.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { Card } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Card',
+    component: Card,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    argTypes: {
+        children: { control: { type: 'text' } },
+    },
+}
+
+export const Default = (args) => (
+    <Box width="200px" height="75px">
+        <Card {...args} />
+    </Box>
+)
+
+Default.args = {
+    children: 'Card content',
+}

package/src/features/accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Card with children is rendered', () => {
+    cy.visitStory('Card', 'With children')
+    cy.get('[data-test="dhis2-uicore-card"]').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 Card renders children
+
+    Scenario: A Card with children
+        Given a Card with children is rendered
+        Then the children are visible

package/src/index.js

@@ -0,0 +1 @@
+export { Card } from './card.js'