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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Tag",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.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_icon/index.js

@@ -0,0 +1,21 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default Tag is rendered', () => {
+    cy.visitStory('Tag', 'Without icon')
+    cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible')
+})
+
+Given('a Tag with an icon is rendered', () => {
+    cy.visitStory('Tag', 'With icon')
+    cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible')
+})
+
+Then('the icon will not be rendered', () => {
+    cy.get('[data-test="dhis2-uicore-tag-icon"]').should('not.exist')
+})
+
+Then('the icon will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-tag-icon"]')
+        .contains('Icon')
+        .should('be.visible')
+})

package/src/features/accepts_icon.feature

@@ -0,0 +1,9 @@
+Feature: The Tag accepts an icon prop
+
+    Scenario: Tag has no icon by default
+        Given a default Tag is rendered
+        Then the icon will not be rendered
+
+    Scenario: Tag with icon
+        Given a Tag with an icon is rendered
+        Then the icon will be visible

package/src/features/accepts_max_width/index.js

@@ -0,0 +1,28 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a tag with the default max width and enough content to fill it completely is rendered',
+    () => {
+        cy.wrap('240px').as('maxWidth')
+        cy.visitStory('Tag', 'With default max width')
+        cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible')
+    }
+)
+
+Given(
+    'a tag with a max width and enough content to fill it completely is rendered',
+    () => {
+        cy.wrap('30px').as('maxWidth')
+        cy.visitStory('Tag', 'With custom max width')
+        cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible')
+    }
+)
+
+Then('the width of the tag should be exactly the max width', () => {
+    cy.all(
+        () => cy.get('@maxWidth'),
+        () => cy.get('[data-test="dhis2-uicore-tag"]')
+    ).then(([maxWidth, tag]) => {
+        expect(tag).to.have.css('width', maxWidth)
+    })
+})

package/src/features/accepts_max_width.feature

@@ -0,0 +1,9 @@
+Feature: The Tag's max-width can be overwritten
+
+    Scenario: A Tag has a default max width
+        Given a tag with the default max width and enough content to fill it completely is rendered
+        Then the width of the tag should be exactly the max width
+
+    Scenario: A Tag has a custom max width
+        Given a tag with a max width and enough content to fill it completely is rendered
+        Then the width of the tag should be exactly the max width

package/src/features/accepts_text/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Tag with text is rendered', () => {
+    cy.visitStory('Tag', 'With text')
+    cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible')
+})
+
+Then('the text will be visible', () => {
+    cy.get('[data-test="dhis2-uicore-tag-text"]')
+        .contains('Text content')
+        .should('be.visible')
+})

package/src/features/accepts_text.feature

@@ -0,0 +1,5 @@
+Feature: The Tag displays text
+
+    Scenario: Standard Tag with text
+        Given a Tag with text is rendered
+        Then the text will be visible

package/src/index.js

@@ -0,0 +1 @@
+export { Tag } from './tag.js'

package/src/tag-icon.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const TagIcon = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            display: flex;
+            align-items: center;
+            margin-inline-end: 4px;
+            max-height: 16px;
+            max-width: 16px;
+        `}</style>
+    </div>
+)
+
+TagIcon.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}

package/src/tag-text.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const TagText = ({ children, dataTest }) => (
+    <span data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        `}</style>
+    </span>
+)
+
+TagText.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}

package/src/tag.e2e.stories.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Tag } from './tag.js'
+
+export default { title: 'Tag' }
+export const WithoutIcon = () => <Tag>Default</Tag>
+export const WithIcon = () => <Tag icon={<span>Icon</span>}>Default</Tag>
+export const WithText = () => <Tag>Text content</Tag>
+export const WithDefaultMaxWidth = () => (
+    <Tag>
+        This is a lot of content that should exceed the default max width of the
+        tag component quite significantly so testing is still works when the
+        default value of the max width is changed
+    </Tag>
+)
+export const WithCustomMaxWidth = () => <Tag maxWidth="30px">Text content</Tag>

package/src/tag.js

@@ -0,0 +1,112 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TagIcon } from './tag-icon.js'
+import { TagText } from './tag-text.js'
+
+export const Tag = ({
+    maxWidth = '240px',
+    neutral,
+    negative,
+    positive,
+    icon,
+    bold,
+    className,
+    dataTest = 'dhis2-uicore-tag',
+    children,
+}) => (
+    <div
+        data-test={dataTest}
+        className={cx(className, {
+            neutral,
+            positive,
+            negative,
+            bold,
+        })}
+    >
+        {icon && <TagIcon dataTest={`${dataTest}-icon`}>{icon}</TagIcon>}
+        <TagText dataTest={`${dataTest}-text`}>{children}</TagText>
+        <style jsx>
+            {`
+                div {
+                    padding: 5px 6px;
+                    border-radius: 3px;
+                    background-color: ${colors.grey300};
+                    fill: ${colors.grey700};
+                    color: ${colors.grey900};
+                    max-width: ${maxWidth};
+                    display: inline-flex;
+                    align-items: center;
+                    font-size: 13px;
+                    height: 23px;
+                }
+                .negative {
+                    background-color: ${colors.red100};
+                    fill: ${colors.red800};
+                    color: ${colors.red900};
+                }
+
+                .neutral {
+                    background-color: ${colors.blue100};
+                    fill: ${colors.blue800};
+                    color: ${colors.blue900};
+                }
+
+                .positive {
+                    background-color: ${colors.green100};
+                    fill: ${colors.green800};
+                    color: ${colors.green900};
+                }
+
+                .bold {
+                    font-weight: 700;
+                    background-color: ${colors.grey700};
+                    color: ${colors.white};
+                    fill: ${colors.white};
+                }
+
+                .bold.neutral {
+                    background-color: ${colors.blue800};
+                    color: ${colors.blue050};
+                    fill: ${colors.white};
+                }
+
+                .bold.positive {
+                    background-color: ${colors.green700};
+                    color: ${colors.green050};
+                    fill: ${colors.white};
+                }
+
+                .bold.negative {
+                    background-color: ${colors.red700};
+                    color: ${colors.red050};
+                    fill: ${colors.white};
+                }
+            `}
+        </style>
+    </div>
+)
+
+const tagVariantPropType = mutuallyExclusive(
+    ['neutral', 'positive', 'negative'],
+    PropTypes.bool
+)
+
+Tag.propTypes = {
+    /** Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. */
+    bold: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. */
+    icon: PropTypes.node,
+    maxWidth: PropTypes.string,
+    /** Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props */
+    negative: tagVariantPropType,
+    /** Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props */
+    neutral: tagVariantPropType,
+    /** Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props */
+    positive: tagVariantPropType,
+}

package/src/tag.prod.stories.js

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Tag } from './tag.js'
+
+const subtitle =
+    'Used to display categorizing labels or information for other elements in a collection.'
+
+const description = `
+Tags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component.
+
+Tags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method.
+
+Tags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements.
+
+\`\`\`js
+import { Tag } from '@dhis2/ui'
+\`\`\`
+
+`
+
+const tagArgType = {
+    table: { type: { summary: 'bool' } },
+    control: { type: 'boolean' },
+}
+
+export default {
+    title: 'Tag',
+    component: Tag,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    argTypes: {
+        negative: { ...tagArgType },
+        neutral: { ...tagArgType },
+        positive: { ...tagArgType },
+    },
+    args: {
+        children: 'Dog',
+    },
+}
+
+const ExampleIcon = () => (
+    <svg
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g fill="inherit">
+            <path d="m6.00003329 5c-.40449432-.00016901-.76925356.24336235-.92416402.61701786-.15491047.3736555-.06945918.80383558.21650172 1.08991608s.71610521.37171165 1.08982546.21695745c.37372025-.15475421.61740424-.51941158.61740424-.92390594.00011082-.26517416-.10515147-.51952543-.29261873-.70707109-.18746725-.18754566-.44177449-.29291436-.70694867-.29291436z" />
+            <path d="m9.10419761 8.52484537c.76535472-.94655629 1.06135379-2.18836523.80523589-3.37821761-.05634956-.27032079-.32125073-.44379594-.59167333-.38746761-.2704226.05632834-.4439631.32112977-.38761355.59145056.19496765.89486787-.02567692 1.82986482-.60017581 2.5432874-.72092529.88419157-1.88113225 1.28314793-2.99364655 1.02941488-1.11251431-.25373305-1.98479962-1.11624341-2.25073114-2.22550911-.26593151-1.10926569.12051398-2.27331263.99713349-3.00355471.69583114-.57340823 1.61098701-.80724221 2.4967314-.63794667.17734061.03661596.36062942-.02545013.47919689-.16226782.11856746-.1368177.15389197-.32701448.09235365-.49725733s-.21032645-.29393785-.38899706-.32339268c-1.92234735-.37212623-3.83170501.70111683-4.5123533 2.53637752s.06739468 3.8933194 1.76783755 4.86377602c1.70044287.97045659 3.85367697.56818039 5.08870246-.95069268z" />
+            <path d="m5.99960069 0c-1.97689694.00113-3.82650358.97550158-4.94544231 2.60525583-1.11893874 1.62975425-1.3637448 3.70593215-.65455769 5.55124417.05611465.17686038.20555481.3081025.38818046.34090985.18262565.03280736.36840126-.03821571.48256414-.18448699.11416287-.14627127.13793722-.34373427.0617554-.51292286-.85968765-2.23032693-.01933119-4.75713774 2.00488351-6.02834816s4.66524393-.93071599 6.30084518.81233583c1.63560122 1.74305182 1.80759312 4.40037955.41033032 6.33972937-1.39726277 1.93934986-3.97236477 2.61745126-6.14355901 1.61778296-.16228789-.0750258-.35227387-.0577729-.49839205.0452597-.14611818.1030325-.22616973.2761916-.21000001.45425.01616973.1780583.12610416.3339645.28839206.4089903.78810364.364813 1.64655922.5525468 2.515.5500256 3.31370847 0 5.99999991-2.68631714 5.99999991-6.0000256s-2.68629144-6-5.99999991-6z" />
+            <path d="m8.99960069 3.5c0-.20225265-.1218571-.38459013-.30873435-.46195903-.18687725-.07736891-.40196034-.03452776-.54492981.1085414-.14296946.14306916-.18566067.35818204-.10816151.5450053.07749917.18682326.25992156.30855316.46218139.30841233.27600227-.00019246.49964428-.22399048.49964428-.5z" />
+            <circle cx="1.499601" cy="9.5" r="1" />
+        </g>
+    </svg>
+)
+
+const ExampleLargeIcon = () => (
+    <svg
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"
+            fill="inherit"
+        />
+    </svg>
+)
+
+const Template = (args) => <Tag {...args} />
+
+export const Default = Template.bind({})
+
+export const WithIcon = Template.bind({})
+WithIcon.args = { icon: <ExampleIcon /> }
+
+export const Neutral = Template.bind({})
+Neutral.args = { neutral: true }
+
+export const Positive = Template.bind({})
+Positive.args = { positive: true }
+
+export const Negative = Template.bind({})
+Negative.args = { negative: true }
+
+export const Bold = Template.bind({})
+Bold.args = { bold: true }
+
+export const WithLargeIcon = Template.bind({})
+WithLargeIcon.args = { icon: <ExampleLargeIcon /> }
+
+export const WithClippedLongText = Template.bind({})
+WithClippedLongText.args = {
+    icon: <ExampleIcon />,
+    children: 'I am long text, therefore I get clipped before I finish',
+}
+
+export const WithClippedTextAndMaxWidth = Template.bind({})
+WithClippedTextAndMaxWidth.args = {
+    children: 'I am long text',
+    maxWidth: '50px',
+}
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTL.args = { icon: <ExampleIcon /> }