Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
[terra-badge] Added example for Badge (#3909)
Browse files Browse the repository at this point in the history 
Co-authored-by: Shalini <SG067724@cerner.net>
Co-authored-by: Akshar <ac086323@cerner.net>
Co-authored-by: Supreeth <supreeth.mr1990@gmail.com>
Co-authored-by: ashishkcerner <126875089+ashishkcerner@users.noreply.github.com>
  • Loading branch information
@SG067724 @arcw76183450
@supreethmr @ashishkumbhare116
5 people authored Oct 16, 2023
1 parent 888fb00 commit 665c991
Show file tree
Hide file tree
Showing 21 changed files with 360 additions and 82 deletions.
6 changes: 6 additions & 0 deletions packages/terra-badge/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

## Unreleased

* Added
* Added hidden text to announce the intent of the badge

* Changed
* Removed `aria-hidden` from the textContent to announce text of badge

## 3.57.0 - (February 15, 2023)

* Changed
Expand Down
4 changes: 3 additions & 1 deletion packages/terra-badge/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@
},
"peerDependencies": {
"react": "^16.8.5",
"react-dom": "^16.8.5"
"react-dom": "^16.8.5",
"react-intl": ">=2.8.0 <6.0.0"
},
"dependencies": {
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
"terra-enzyme-intl": "^3.0.0",
"terra-theme-context": "^1.0.0",
"terra-visually-hidden-text": "^2.36.0"
}
Expand Down
14 changes: 11 additions & 3 deletions packages/terra-badge/src/Badge.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import classNamesBind from 'classnames/bind';
import { injectIntl } from 'react-intl';
import ThemeContext from 'terra-theme-context';
import VisuallyHiddenText from 'terra-visually-hidden-text';
import styles from './Badge.module.scss';
Expand Down Expand Up @@ -39,6 +40,11 @@ const propTypes = {
* Sets the badge color scheme. One of `default`, `primary`, `secondary`, `positive`, `negative`, `warning`, `info`.
*/
intent: PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'warning', 'positive', 'negative']),
/**
* @private
* The intl object to be injected for translations.
*/
intl: PropTypes.shape({ formatMessage: PropTypes.func }),
/**
* Reverses the position of the icon and text.
*/
Expand Down Expand Up @@ -71,6 +77,7 @@ const defaultProps = {
const Badge = ({
size,
intent,
intl,
isReversed,
text,
icon,
Expand All @@ -90,14 +97,15 @@ const Badge = ({
customProps.className,
);

const textContent = text ? <span className={styles.text} aria-hidden="true">{text}</span> : null;
const textContent = text ? <span className={styles.text}>{text}</span> : null;
const intentText = intent !== BadgeIntent.DEFAULT ? <VisuallyHiddenText text={intl.formatMessage({ id: `Terra.badge.intent.${intent}` })} /> : null;
const visuallyHiddenTextContent = visuallyHiddenText ? <VisuallyHiddenText text={visuallyHiddenText} /> : null;
const content = isReversed ? [visuallyHiddenTextContent, textContent, icon, customProps.children] : [icon, visuallyHiddenTextContent, textContent, customProps.children];
const content = isReversed ? [intentText, textContent, visuallyHiddenTextContent, icon, customProps.children] : [icon, intentText, textContent, visuallyHiddenTextContent, customProps.children];
return React.createElement('span', { ...customProps, className: badgeClassNames }, ...content);
};

Badge.propTypes = propTypes;
Badge.defaultProps = defaultProps;

export default Badge;
export default injectIntl(Badge);
export { BadgeIntent, BadgeSize };
41 changes: 21 additions & 20 deletions packages/terra-badge/tests/jest/Badge.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
import React from 'react';
import { mountWithIntl, shallowWithIntl } from 'terra-enzyme-intl';
import Badge from '../../src/Badge';

const iconValue = <img alt="Test icon" />;
// Snapshot Tests
it('should render a default component with nothing', () => {
const wrapper = shallow(<Badge />);
const wrapper = shallowWithIntl(<Badge />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component with text and large size', () => {
const wrapper = shallow(<Badge size="large" text="Large" />);
const wrapper = shallowWithIntl(<Badge size="large" text="Large" />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component with text and secondary intent', () => {
const wrapper = shallow(<Badge text="Secondary" intent="secondary" />);
const wrapper = shallowWithIntl(<Badge text="Secondary" intent="secondary" />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component with icon and medium size', () => {
const wrapper = shallow(<Badge size="medium" icon={iconValue} />);
const wrapper = shallowWithIntl(<Badge size="medium" icon={iconValue} />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component with icon and warning intent', () => {
const wrapper = shallow(<Badge icon={iconValue} intent="warning" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} intent="warning" />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component in the order, icon and text with medium size', () => {
const wrapper = shallow(<Badge text="Test value" size="medium" icon={iconValue} />);
const wrapper = shallowWithIntl(<Badge text="Test value" size="medium" icon={iconValue} />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component in the order, text and icon with info intent', () => {
const wrapper = shallow(<Badge text="Test value" icon={iconValue} intent="info" isReversed />);
const wrapper = shallowWithIntl(<Badge text="Test value" icon={iconValue} intent="info" isReversed />).dive();
expect(wrapper).toMatchSnapshot();
});

it('should render a badge component with visually hidden text', () => {
const wrapper = shallow(<Badge text="3" visuallyHiddenText="Risk Score 3" />);
const wrapper = shallowWithIntl(<Badge text="3" visuallyHiddenText="Risk Score 3" />).dive();
expect(wrapper).toMatchSnapshot();
});

Expand All @@ -48,21 +49,21 @@ it('should render a badge component with visually hidden text', () => {
describe('Badge with only text', () => {
// With default props
it('should have the class terra-Badge--default and terra-Badge--small', () => {
const wrapper = shallow(<Badge text="Test value" />);
const wrapper = shallowWithIntl(<Badge text="Test value" />).dive();
expect(wrapper.prop('className')).toContain('badge small default');
expect(wrapper.find('.text').text()).toEqual('Test value');
});

// Only intent props
it('and only intent props, should have the class terra-Badge--primary and terra-Badge--small', () => {
const wrapper = shallow(<Badge text="Test value" intent="primary" />);
const wrapper = shallowWithIntl(<Badge text="Test value" intent="primary" />).dive();
expect(wrapper.prop('className')).toContain('badge small primary');
expect(wrapper.find('.text').text()).toEqual('Test value');
});

// Only size props
it('and only size props, should have the class terra-Badge--default and terra-Badge--huge', () => {
const wrapper = shallow(<Badge text="Test value" size="huge" />);
const wrapper = shallowWithIntl(<Badge text="Test value" size="huge" />).dive();
expect(wrapper.prop('className')).toContain('badge huge default');
expect(wrapper.find('.text').text()).toEqual('Test value');
});
Expand All @@ -71,21 +72,21 @@ describe('Badge with only text', () => {
describe('Badge with only icon', () => {
// With default props
it('should have the class terra-Badge--default, terra-Badge--small and has-icon', () => {
const wrapper = shallow(<Badge icon={iconValue} />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon small default');
expect(wrapper.childAt(0).is('img')).toEqual(true);
});

// Only intent props
it('and only intent props, should have the class terra-Badge--primary, terra-Badge--small and has-icon', () => {
const wrapper = shallow(<Badge icon={iconValue} intent="primary" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} intent="primary" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon small primary');
expect(wrapper.childAt(0).is('img')).toEqual(true);
});

// Only size props
it('and only size props, should have the class terra-Badge--default, terra-Badge--huge and has-icon', () => {
const wrapper = shallow(<Badge icon={iconValue} size="huge" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} size="huge" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon huge default');
expect(wrapper.childAt(0).is('img')).toEqual(true);
});
Expand All @@ -94,30 +95,30 @@ describe('Badge with only icon', () => {
describe('Badge with icon and text', () => {
// With default props
it('should have the class terra-Badge--default, terra-Badge--small, has-icon with icon followed by text', () => {
const wrapper = shallow(<Badge icon={iconValue} text="Test value" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} text="Test value" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon small default');
expect(wrapper.childAt(0).is('img')).toEqual(true);
expect(wrapper.find('.text').text()).toEqual('Test value');
});
// Reversed order for icon and text
it('should have the class terra-Badge--default, terra-Badge--small, has-icon and is-reversed with text followed by icon', () => {
const wrapper = shallow(<Badge icon={iconValue} text="Test value" isReversed />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} text="Test value" isReversed />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon is-reversed small default');
expect(wrapper.childAt(1).is('img')).toEqual(true);
expect(wrapper.find('.text').text()).toEqual('Test value');
});

// With size prop
it('should have the class terra-Badge--default, terra-Badge--tiny and has-icon with icon followed by text', () => {
const wrapper = shallow(<Badge icon={iconValue} text="Test value" size="tiny" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} text="Test value" size="tiny" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon tiny default');
expect(wrapper.childAt(0).is('img')).toEqual(true);
expect(wrapper.find('.text').text()).toEqual('Test value');
});

// With intent prop
it('should have the class terra-Badge--primary, terra-Badge--small and has-icon with icon followed by text', () => {
const wrapper = shallow(<Badge icon={iconValue} text="Test value" intent="primary" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} text="Test value" intent="primary" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon small primary');
expect(wrapper.childAt(0).is('img')).toEqual(true);
expect(wrapper.find('.text').text()).toEqual('Test value');
Expand All @@ -127,7 +128,7 @@ describe('Badge with icon and text', () => {
describe('Badge with additional props', () => {
// With custom props
it('should have the class terra-Badge--primary, terra-Badge--small and has-icon with icon followed by text', () => {
const wrapper = shallow(<Badge icon={iconValue} text="Test value" intent="primary" lang="English" className="negative" />);
const wrapper = shallowWithIntl(<Badge icon={iconValue} text="Test value" intent="primary" lang="English" className="negative" />).dive();
expect(wrapper.prop('className')).toContain('badge has-icon small primary negative');
expect(wrapper.prop('lang')).toEqual('English');
expect(wrapper.childAt(0).is('img')).toEqual(true);
Expand All @@ -139,7 +140,7 @@ describe('Badge with additional props', () => {
.mockReturnValue({
className: 'orion-fusion-theme',
});
const wrapper = mount(<Badge text="Test value" />);
const wrapper = mountWithIntl(<Badge text="Test value" />);
expect(wrapper).toMatchSnapshot();
});
});
101 changes: 81 additions & 20 deletions packages/terra-badge/tests/jest/__snapshots__/Badge.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Badge with additional props correctly applies the theme context className 1`] = `
<Badge
icon={null}
intent="default"
isReversed={false}
size="small"
<InjectIntl(Badge)
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": null,
"now": [Function],
"onError": [Function],
"textComponent": "span",
"timeZone": null,
}
}
text="Test value"
>
<span
className="badge small default orion-fusion-theme"
<Badge
icon={null}
intent="default"
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": null,
"now": [Function],
"onError": [Function],
"textComponent": "span",
"timeZone": null,
}
}
isReversed={false}
size="small"
text="Test value"
>
<span
aria-hidden="true"
className="text"
className="badge small default orion-fusion-theme"
>
Test value
<span
className="text"
>
Test value
</span>
</span>
</span>
</Badge>
</Badge>
</InjectIntl(Badge)>
`;

exports[`should render a badge component in the order, icon and text with medium size 1`] = `
Expand All @@ -29,7 +86,6 @@ exports[`should render a badge component in the order, icon and text with medium
alt="Test icon"
/>
<span
aria-hidden="true"
className="text"
>
Test value
Expand All @@ -41,8 +97,10 @@ exports[`should render a badge component in the order, text and icon with info i
<span
className="badge has-icon is-reversed small info"
>
<VisuallyHiddenText
text="Terra.badge.intent.info"
/>
<span
aria-hidden="true"
className="text"
>
Test value
Expand Down Expand Up @@ -70,6 +128,9 @@ exports[`should render a badge component with icon and warning intent 1`] = `
<img
alt="Test icon"
/>
<VisuallyHiddenText
text="Terra.badge.intent.warning"
/>
</span>
`;

Expand All @@ -78,7 +139,6 @@ exports[`should render a badge component with text and large size 1`] = `
className="badge large default"
>
<span
aria-hidden="true"
className="text"
>
Large
Expand All @@ -90,8 +150,10 @@ exports[`should render a badge component with text and secondary intent 1`] = `
<span
className="badge small secondary"
>
<VisuallyHiddenText
text="Terra.badge.intent.secondary"
/>
<span
aria-hidden="true"
className="text"
>
Secondary
Expand All @@ -103,15 +165,14 @@ exports[`should render a badge component with visually hidden text 1`] = `
<span
className="badge small default"
>
<VisuallyHiddenText
text="Risk Score 3"
/>
<span
aria-hidden="true"
className="text"
>
3
</span>
<VisuallyHiddenText
text="Risk Score 3"
/>
</span>
`;

Expand Down
Loading

0 comments on commit 665c991

Please sign in to comment.