@dhis2-ui/legend 10.16.2 → 10.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/legend",
-    "version": "10.16.2",
+    "version": "10.16.3",
     "description": "UI Legend",
     "repository": {
         "type": "git",
@@ -33,14 +33,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/required": "10.16.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2-ui/required": "10.16.3",
+        "@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/features/accepts_children/index.js

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

package/src/features/can_be_required/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Legend with content and a required flag is rendered', () => {
+    cy.visitStory('Legend', 'With content and required')
+})
+
+Then('the required indicator is visible', () => {
+    cy.get('[data-test="dhis2-uicore-legend-required"]').should('be.visible')
+})

package/src/features/can_be_required.feature

@@ -0,0 +1,5 @@
+Feature: Required status for the Legend
+
+    Scenario: Rendering a Legend that is required
+        Given a Legend with content and a required flag is rendered
+        Then the required indicator is visible

package/src/index.js

@@ -0,0 +1 @@
+export { Legend } from './legend.js'

package/src/legend.e2e.stories.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Legend } from './legend.js'
+
+export default { title: 'Legend' }
+export const WithContentAndRequired = () => (
+    <Legend required>I am wrapped in a legend which has some styling</Legend>
+)
+export const WithChildren = () => <Legend>I am a child</Legend>

package/src/legend.js

@@ -0,0 +1,35 @@
+import { colors } from '@dhis2/ui-constants'
+import { Required } from '@dhis2-ui/required'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Legend = ({
+    className,
+    children,
+    required,
+    dataTest = 'dhis2-uicore-legend',
+}) => (
+    <legend className={className} data-test={dataTest}>
+        {children}
+
+        {required && <Required dataTest={`${dataTest}-required`} />}
+
+        <style jsx>{`
+            legend {
+                font-size: 14px;
+                line-height: 16px;
+                color: ${colors.grey900};
+            }
+        `}</style>
+    </legend>
+)
+
+Legend.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Indicates the associated field set is required */
+    required: PropTypes.bool,
+}
+
+export { Legend }

package/src/legend.prod.stories.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Legend } from './legend.js'
+
+const description = `
+Legends are to be used in a Field Set to describe the form fields.  They may indicate that the fields are required.
+
+See the [Field Set](../?path=/docs/forms-field-set-field-set--usage-example-a-radio-button-group-with-error-status) for a usage example.
+
+\`\`\`js
+import { Legend } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Legend',
+    component: Legend,
+    parameters: { docs: { description: { component: description } } },
+}
+
+const Template = (args) => (
+    <Legend {...args}>I am wrapped in a legend which has some styling</Legend>
+)
+
+export const Default = Template.bind({})
+
+export const Required = Template.bind({})
+Required.args = { required: true }