Skip to content

Commit a979ddb

Browse files
kevinparkersonkevinparkerson
authored
Merge pull request #2247 from aswinshenoy/badges-component
Add Badges component
2 parents 14c4b11 + 8c1db4a commit a979ddb

File tree

13 files changed

+642
-74
lines changed

13 files changed

+642
-74
lines changed

‎components/badge/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`DOM snapshots SLDSBadge Color Variants 1`] = `
4+
<div
5+
style={
6+
Object {
7+
"padding": "1rem",
8+
}
9+
}
10+
>
11+
<span
12+
className="slds-badge"
13+
id="badge-base-example-default"
14+
>
15+
<span
16+
className="slds-badge__icon slds-badge__icon_left"
17+
>
18+
<span>
19+
<svg
20+
aria-hidden="true"
21+
className="slds-icon slds-icon_xx-small slds-icon-text-default"
22+
>
23+
<use
24+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
25+
/>
26+
</svg>
27+
28+
</span>
29+
</span>
30+
423 Credits Available
31+
</span>
32+
<span
33+
className="slds-badge slds-badge_lightest"
34+
id="badge-base-example-light"
35+
>
36+
<span
37+
className="slds-badge__icon slds-badge__icon_left"
38+
>
39+
<span>
40+
<svg
41+
aria-hidden="true"
42+
className="slds-icon slds-icon_xx-small slds-icon-text-default"
43+
>
44+
<use
45+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
46+
/>
47+
</svg>
48+
49+
</span>
50+
</span>
51+
423 Credits Available
52+
</span>
53+
<span
54+
className="slds-badge slds-badge_inverse"
55+
id="badge-base-example-inverse"
56+
>
57+
<span
58+
className="slds-badge__icon slds-badge__icon_left"
59+
>
60+
<span>
61+
<svg
62+
aria-hidden="true"
63+
className="slds-icon slds-icon_xx-small"
64+
>
65+
<use
66+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
67+
/>
68+
</svg>
69+
70+
</span>
71+
</span>
72+
423 Credits Available
73+
</span>
74+
</div>
75+
`;
76+
77+
exports[`DOM snapshots SLDSBadge Default 1`] = `
78+
<div
79+
style={
80+
Object {
81+
"padding": "1rem",
82+
}
83+
}
84+
>
85+
<span
86+
className="slds-badge"
87+
id="badge-base-example"
88+
>
89+
<span
90+
className="slds-badge__icon slds-badge__icon_left"
91+
/>
92+
423 Credits Available
93+
</span>
94+
</div>
95+
`;
96+
97+
exports[`DOM snapshots SLDSBadge w/ Icons 1`] = `
98+
<div
99+
style={
100+
Object {
101+
"padding": "1rem",
102+
}
103+
}
104+
>
105+
<span
106+
className="slds-badge"
107+
id="badge-base-example-icon-left"
108+
>
109+
<span
110+
className="slds-badge__icon slds-badge__icon_left"
111+
>
112+
<span>
113+
<svg
114+
aria-hidden="true"
115+
className="slds-icon slds-icon_xx-small slds-icon-text-default"
116+
>
117+
<use
118+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
119+
/>
120+
</svg>
121+
122+
</span>
123+
</span>
124+
423 Credits Available
125+
</span>
126+
<span
127+
className="slds-badge"
128+
id="badge-base-example-icon-right"
129+
>
130+
423 Credits Available
131+
<span
132+
className="slds-badge__icon slds-badge__icon_right"
133+
>
134+
<span>
135+
<svg
136+
aria-hidden="true"
137+
className="slds-icon slds-icon_xx-small slds-icon-text-default"
138+
>
139+
<use
140+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"
141+
/>
142+
</svg>
143+
144+
</span>
145+
</span>
146+
</span>
147+
</div>
148+
`;

‎components/badge/__docs__/storybook-stories.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { BADGE } from '../../../utilities/constants';
5+
import Default from '../__examples__/default';
6+
import WithIcon from '../__examples__/with-icon';
7+
import ColorVariants from '../__examples__/color-variants';
8+
9+
storiesOf(BADGE, module)
10+
.addDecorator((getStory) => (
11+
<div
12+
style={{
13+
padding: '1rem',
14+
}}
15+
>
16+
{getStory()}
17+
</div>
18+
))
19+
.add('Default', () => <Default />)
20+
.add('w/ Icons', () => <WithIcon />)
21+
.add('Color Variants', () => <ColorVariants />);

‎components/badge/__examples__/color-variants.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import Badge from '~/components/badge';
3+
import IconSettings from '~/components/icon-settings';
4+
import Icon from '~/components/icon';
5+
6+
class Example extends React.Component {
7+
static displayName = 'badgeExample';
8+
9+
render() {
10+
return (
11+
<IconSettings iconPath="/assets/icons">
12+
<Badge
13+
id="badge-base-example-default"
14+
content="423 Credits Available"
15+
icon={<Icon category="utility" name="moneybag" size="xx-small" />}
16+
/>
17+
<Badge
18+
id="badge-base-example-light"
19+
color="light"
20+
content="423 Credits Available"
21+
icon={<Icon category="utility" name="moneybag" size="xx-small" />}
22+
/>
23+
<Badge
24+
id="badge-base-example-inverse"
25+
color="inverse"
26+
content="423 Credits Available"
27+
icon={
28+
<Icon
29+
category="utility"
30+
name="moneybag"
31+
size="xx-small"
32+
colorVariant="base"
33+
/>
34+
}
35+
/>
36+
</IconSettings>
37+
);
38+
}
39+
}
40+
41+
export default Example;

‎components/badge/__examples__/default.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import Badge from '~/components/badge';
3+
import IconSettings from '~/components/icon-settings';
4+
5+
class Example extends React.Component {
6+
static displayName = 'badgeExample';
7+
8+
render() {
9+
return (
10+
<IconSettings iconPath="/assets/icons">
11+
<Badge id="badge-base-example" content="423 Credits Available" />
12+
</IconSettings>
13+
);
14+
}
15+
}
16+
17+
export default Example;

‎components/badge/__examples__/with-icon.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import Badge from '~/components/badge';
3+
import IconSettings from '~/components/icon-settings';
4+
import Icon from '~/components/icon';
5+
6+
class Example extends React.Component {
7+
static displayName = 'badgeExample';
8+
9+
render() {
10+
return (
11+
<IconSettings iconPath="/assets/icons">
12+
<Badge
13+
id="badge-base-example-icon-left"
14+
content="423 Credits Available"
15+
icon={<Icon category="utility" name="moneybag" size="xx-small" />}
16+
/>
17+
<Badge
18+
id="badge-base-example-icon-right"
19+
content="423 Credits Available"
20+
icon={<Icon category="utility" name="moneybag" size="xx-small" />}
21+
iconAlignment="right"
22+
/>
23+
</IconSettings>
24+
);
25+
}
26+
}
27+
28+
export default Example;

‎components/badge/component.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"component": "badge",
3+
"status": "prod",
4+
"display-name": "Badge",
5+
"classKey": "Badge",
6+
"SLDS-component-path": "/components/badges",
7+
"site-stories": [
8+
"/__examples__/color-variants.jsx",
9+
"/__examples__/default.jsx",
10+
"/__examples__/with-icon.jsx"
11+
],
12+
"url-slug": "badges"
13+
}

‎components/badge/index.jsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
2+
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
3+
4+
// Implements the [Badge design pattern](https://latest-216.lightningdesignsystem.com/components/badges/) in React.
5+
6+
// ## Dependencies
7+
8+
// ### React
9+
import React from 'react';
10+
import PropTypes from 'prop-types';
11+
import classNames from 'classnames';
12+
13+
// ### shortid
14+
// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
15+
// shortid is a short, non-sequential, url-friendly, unique id generator
16+
import shortid from 'shortid';
17+
18+
// ## Constants
19+
import { BADGE } from '../../utilities/constants';
20+
21+
/**
22+
* Badges are labels which hold small amounts of information.
23+
*/
24+
class Badge extends React.Component {
25+
constructor(props) {
26+
super(props);
27+
this.generatedId = shortid.generate();
28+
}
29+
30+
/**
31+
* Get the Badge's HTML id. Generate a new one if no ID present.
32+
*/
33+
getId() {
34+
return this.props.id || this.generatedId;
35+
}
36+
37+
render() {
38+
const icon = (
39+
<span
40+
className={classNames(
41+
'slds-badge__icon',
42+
`slds-badge__icon_${this.props.iconAlignment}`
43+
)}
44+
style={this.props.style}
45+
>
46+
{this.props.icon}
47+
</span>
48+
);
49+
50+
return (
51+
<span
52+
id={this.getId()}
53+
className={classNames(
54+
'slds-badge',
55+
{
56+
'slds-badge_inverse': this.props.color === 'inverse',
57+
'slds-badge_lightest': this.props.color === 'light',
58+
},
59+
this.props.className
60+
)}
61+
>
62+
{this.props.iconAlignment === 'left' ? (
63+
<React.Fragment>
64+
{icon}
65+
{this.props.content}
66+
</React.Fragment>
67+
) : (
68+
<React.Fragment>
69+
{this.props.content}
70+
{icon}
71+
</React.Fragment>
72+
)}
73+
</span>
74+
);
75+
}
76+
}
77+
78+
Badge.displayName = BADGE;
79+
80+
Badge.propTypes = {
81+
/**
82+
* CSS classes that are applied to the component
83+
*/
84+
className: PropTypes.oneOfType([
85+
PropTypes.array,
86+
PropTypes.object,
87+
PropTypes.string,
88+
]),
89+
90+
/**
91+
* Id of component, if desired. If not provided an id is automatically generated
92+
*/
93+
id: PropTypes.string,
94+
95+
/**
96+
* Custom styles to be passed to the component
97+
*/
98+
style: PropTypes.object,
99+
100+
/**
101+
* Color variant for the badge component
102+
*/
103+
color: PropTypes.oneOf(['default', 'inverse', 'light']),
104+
105+
/**
106+
* Icon alignment for the badge component
107+
*/
108+
iconAlignment: PropTypes.oneOf(['left', 'right']),
109+
110+
/**
111+
* Content to be placed inside the badge component
112+
*/
113+
content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
114+
};
115+
116+
Badge.defaultProps = {
117+
iconAlignment: 'left',
118+
color: 'default',
119+
};
120+
121+
export default Badge;

0 commit comments

Comments
 (0)