@dhis2-ui/help 10.16.2 → 10.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/help",
-    "version": "10.16.2",
+    "version": "10.16.3",
     "description": "UI Help",
     "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/features/accepts_children/index.js

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

package/src/help.e2e.stories.js

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

package/src/help.js

@@ -0,0 +1,59 @@
+import { spacers, theme, colors, sharedPropTypes } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Help = ({
+    children,
+    valid,
+    error,
+    warning,
+    className,
+    dataTest = 'dhis2-uicore-help',
+}) => (
+    <p
+        className={cx(className, {
+            valid,
+            error,
+            warning,
+        })}
+        data-test={dataTest}
+    >
+        {children}
+
+        <style jsx>{`
+            p {
+                margin-top: ${spacers.dp4};
+                margin-right: 0;
+                margin-bottom: 0;
+                margin-left: 0;
+                font-size: 12px;
+                line-height: 14px;
+                color: ${theme.default};
+            }
+
+            .valid {
+                color: ${colors.blue700};
+            }
+
+            .error {
+                color: ${theme.error};
+            }
+
+            .warning {
+                color: ${colors.yellow800};
+            }
+        `}</style>
+    </p>
+)
+
+Help.propTypes = {
+    children: PropTypes.string,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    error: sharedPropTypes.statusPropType,
+    valid: sharedPropTypes.statusPropType,
+    warning: sharedPropTypes.statusPropType,
+}
+
+export { Help }

package/src/help.prod.stories.js

@@ -0,0 +1,45 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { Help } from './help.js'
+
+const description = `
+Small text for giving guiding information or feedback, especially for data entry instructions or form validation feedback.
+
+\`\`\`js
+import { Help } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Help',
+    component: Help,
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+    args: { children: 'Allow me to be of assistance' },
+}
+
+const Template = (args) => <Help {...args} />
+
+export const Default = Template.bind({})
+
+export const StatusWarning = Template.bind({})
+StatusWarning.args = { warning: true }
+StatusWarning.storyName = 'Status: Warning'
+
+export const StatusValid = Template.bind({})
+StatusValid.args = { valid: true }
+StatusValid.storyName = 'Status: Valid'
+
+export const StatusError = Template.bind({})
+StatusError.args = { error: true }
+StatusError.storyName = 'Status: Error'
+
+export const TextOverflow = (args) => (
+    <div style={{ width: 200 }}>
+        <Help {...args}>I take up more space than my container</Help>
+    </div>
+)

package/src/index.js

@@ -0,0 +1 @@
+export { Help } from './help.js'