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

package/package.json

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

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

package/src/features/can_be_required.feature

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

package/src/index.js

@@ -0,0 +1 @@
+export { Label } from './label.js'

package/src/label.e2e.stories.js

@@ -0,0 +1,6 @@
+import { Label } from '@dhis2-ui/label'
+import React from 'react'
+
+export default { title: 'Label' }
+export const WithChildren = () => <Label>I am a child</Label>
+export const WithRequired = () => <Label required>Content</Label>

package/src/label.js

@@ -0,0 +1,59 @@
+import { colors } from '@dhis2/ui-constants'
+import { Required } from '@dhis2-ui/required'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const styles = css`
+    label {
+        display: block;
+        box-sizing: border-box;
+        font-size: 14px;
+        line-height: 19px;
+        color: ${colors.grey900};
+        padding: 0;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+    }
+`
+
+const constructClassName = ({ disabled, className }) =>
+    cx(className, {
+        disabled: disabled,
+    })
+
+export const Label = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-label',
+    disabled,
+    htmlFor,
+    id,
+    required,
+}) => (
+    <label
+        id={id}
+        htmlFor={htmlFor}
+        className={constructClassName({ className, disabled })}
+        data-test={dataTest}
+    >
+        <span>{children}</span>
+
+        {required && <Required dataTest={`${dataTest}-required`} />}
+
+        <style jsx>{styles}</style>
+    </label>
+)
+
+Label.propTypes = {
+    children: PropTypes.string,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    htmlFor: PropTypes.string,
+    id: PropTypes.string,
+    required: PropTypes.bool,
+}