Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit 89c1641

Browse files
khobergkhoberg
authored
Merge pull request #316 from cjdev/badge
Badge
2 parents 07cc78b + 067d54a commit 89c1641

12 files changed

Lines changed: 155 additions & 102 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
## New Component
1515

16-
- Add Chip component
16+
- Add Badge component
1717

1818
# 6.10.0
1919

‎packages/visual-stack-docs/src/containers/Components/Docs/badge.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';
3+
import { Demo, Snippet } from '../../../components/Demo';
4+
/* s1:start */
5+
import { Badge } from '@cjdev/visual-stack';
6+
/* s1:end */
7+
import Box from '@cjdev/visual-stack/lib/experimental/Box';
8+
9+
export default () => (
10+
<Demo srcFile="/samples/src/containers/Components/Docs/Badge.js">
11+
{snippets => {
12+
return (
13+
<div>
14+
<Panel>
15+
<Body>
16+
<Snippet tag="s1" src={snippets} />
17+
</Body>
18+
</Panel>
19+
<Panel>
20+
<Body>
21+
{/* s2:start */}
22+
<Box direction="row" gap="default">
23+
<Badge>1</Badge>
24+
<Badge>2</Badge>
25+
<Badge>3</Badge>
26+
<Badge>4819</Badge>
27+
</Box>
28+
{/* s2:end */}
29+
<Snippet tag="s2" src={snippets} />
30+
</Body>
31+
</Panel>
32+
33+
<Panel>
34+
<Body>
35+
{/* s3:start */}
36+
<Box direction="row" gap="default">
37+
<Badge variant="default">0</Badge>
38+
<Badge variant="cj-green">CJ Green</Badge>
39+
<Badge variant="1">CJ Performer</Badge>
40+
<Badge variant="2">CJ Spotlight</Badge>
41+
<Badge variant="3">Content Certified</Badge>
42+
<Badge variant="4">New to Network</Badge>
43+
<Badge variant="5">SubAffiliate</Badge>
44+
</Box>
45+
{/* s3:end */}
46+
<Snippet tag="s3" src={snippets} />
47+
</Body>
48+
</Panel>
49+
</div>
50+
);
51+
}}
52+
</Demo>
53+
);

‎packages/visual-stack-docs/src/containers/Components/Docs/chip.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/visual-stack-docs/src/containers/Components/Docs/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import SpinnerDocs from './spinner';
2222
import TableDocs from './table';
2323
import TabLayoutDocs from './tablayout';
2424
import CardDocs from './card';
25-
import ChipDocs from './chip';
25+
import BadgeDocs from './badge';
2626
import ListViewDocs from './listview';
2727
import ExpandingInputButtonDocs from './expanding-input-button';
2828
import LoadingAnimationDocs from './loading-animation';
@@ -66,7 +66,7 @@ addComponentRoute('spinner', 'Spinner', <SpinnerDocs />);
6666
addComponentRoute('table', 'Table', <TableDocs />);
6767
addComponentRoute('tablayout', 'TabLayout', <TabLayoutDocs />);
6868
addComponentRoute('card', 'Card', <CardDocs />);
69-
addComponentRoute('chip', 'Chip', <ChipDocs />);
69+
addComponentRoute('badge', 'Badge', <BadgeDocs />);
7070
addComponentRoute('listview', 'List View', <ListViewDocs />);
7171
addComponentRoute('pagination', 'Pagination', <PaginationDocs />);
7272
addComponentRoute(

‎packages/visual-stack/src/components/Badge/Badge.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.vs-badge {
2+
font-weight: 600;
3+
font-size: 1rem;
4+
line-height: 1rem;
5+
border-radius: 0.2rem;
6+
display: inline-block;
7+
color: #ffffff;
8+
padding: 0.2rem 0.4rem;
9+
text-align: center;
10+
text-transform: uppercase;
11+
width: fit-content;
12+
height: fit-content;
13+
}
14+
15+
.vs-badge-variant-default {
16+
background-color: #6d7684;
17+
}
18+
19+
.vs-badge-variant-cj-green {
20+
background-color: #49c5b1;
21+
}
22+
23+
.vs-badge-variant-1 {
24+
background-color: #9c52f7;
25+
}
26+
27+
.vs-badge-variant-2 {
28+
background-color: #ea4b93;
29+
}
30+
31+
.vs-badge-variant-3 {
32+
background-color: #4574e2;
33+
}
34+
35+
.vs-badge-variant-4 {
36+
background-color: #0caaac;
37+
}
38+
39+
.vs-badge-variant-5 {
40+
background-color: #072477;
41+
}

‎packages/visual-stack/src/components/Badge/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import classNames from 'classnames';
2+
import PropTypes from 'prop-types';
3+
import React from 'react';
4+
import './Badge.css';
5+
import Box from '../../experimental/Box';
6+
7+
export const Badge = ({ children, className, variant, ...restProps }) => {
8+
return (
9+
<Box
10+
{...restProps}
11+
className={classNames(
12+
'vs-badge',
13+
`vs-badge-variant-${variant}`,
14+
className
15+
)}
16+
>
17+
{children}
18+
</Box>
19+
);
20+
};
21+
22+
Badge.defaultProps = {
23+
variant: 'default',
24+
};
25+
26+
Badge.propTypes = {
27+
children: PropTypes.node,
28+
className: PropTypes.string,
29+
variant: PropTypes.oneOf('default', 'cj-green', '1', '2', '3', '4', '5'),
30+
};

packages/visual-stack/src/components/Chip/tests/index.test.js renamed to packages/visual-stack/src/components/Badge/tests/index.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3-
import { Chip } from '../';
3+
import { Badge } from '..';
44

55
import Enzyme from 'enzyme';
66
import Adapter from 'enzyme-adapter-react-16';
77
Enzyme.configure({ adapter: new Adapter() });
88

9-
describe('Chip', () => {
9+
describe('Badge', () => {
1010
const el = document.createElement('div');
1111
document.body.appendChild(el);
1212

1313
test('should render children', () => {
1414
const wrapper = mount(
15-
<Chip backgroundColor="red" color="blue">
15+
<Badge backgroundColor="red" color="blue">
1616
CONTENT CERTIFIED
17-
</Chip>
17+
</Badge>
1818
);
19-
expect(wrapper.find(Chip).text()).toEqual('CONTENT CERTIFIED');
19+
expect(wrapper.find(Badge).text()).toEqual('CONTENT CERTIFIED');
2020
});
2121
});

‎packages/visual-stack/src/components/Chip/Chip.css‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/visual-stack/src/components/Chip/index.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/visual-stack/src/components/SlidingPanel/SlidingPanel.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
padding: 0 12px 12px 12px;
131131
}
132132

133-
.vs-badge {
133+
.vs-sliding-panel-badge {
134134
font-size: 10px;
135135
background-color: #6d7684;
136136
color: white;

0 commit comments

Comments
 (0)