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

Commit c262e59

Browse files
nicolasfontnicolasfont
committed
Rename Chip to Badge
1 parent 6ce08c7 commit c262e59

9 files changed

Lines changed: 43 additions & 35 deletions

File tree

‎CHANGELOG.md‎

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

33
## New Component
44

5-
- Add Chip component
5+
- Add Badge component
66

77
# 6.10.0
88

packages/visual-stack-docs/src/containers/Components/Docs/chip.js renamed to packages/visual-stack-docs/src/containers/Components/Docs/badge.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ import React from 'react';
22
import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';
33
import { Demo, Snippet } from '../../../components/Demo';
44
/* s2:start */
5-
import { Chip } from '@cjdev/visual-stack';
5+
import { Badge } from '@cjdev/visual-stack';
66
/* s2:end */
77
import Box from '@cjdev/visual-stack/lib/experimental/Box';
88

99
export default () => (
10-
<Demo srcFile="/samples/src/containers/Components/Docs/chip.js">
10+
<Demo srcFile="/samples/src/containers/Components/Docs/Badge.js">
1111
{snippets => {
1212
return (
1313
<div>
1414
<Panel>
1515
<Body>
1616
{/* s1:start */}
1717
<Box direction="row" gap="default">
18-
<Chip backgroundColor="#9C52F7">CJ Performer</Chip>
19-
<Chip backgroundColor="#EA4B93">CJ Spotlight</Chip>
20-
<Chip backgroundColor="#4574E2">Content Certified</Chip>
21-
<Chip backgroundColor="#0CAAAC">New to Network</Chip>
22-
<Chip backgroundColor="#072477">SubAffiliate</Chip>
18+
<Badge backgroundColor="#9C52F7">CJ Performer</Badge>
19+
<Badge backgroundColor="#EA4B93">CJ Spotlight</Badge>
20+
<Badge backgroundColor="#4574E2">Content Certified</Badge>
21+
<Badge backgroundColor="#0CAAAC">New to Network</Badge>
22+
<Badge backgroundColor="#072477">SubAffiliate</Badge>
2323
</Box>
2424
{/* s1:end */}
2525
<Snippet tag="s2" src={snippets} />

‎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/Chip/Chip.css renamed to packages/visual-stack/src/components/Badge/Badge.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.vs-chip {
1+
.vs-badge {
22
font-weight: 600;
33
font-size: 1rem;
44
line-height: 1rem;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import classNames from 'classnames';
22
import PropTypes from 'prop-types';
33
import React from 'react';
4-
import './Chip.css';
4+
import './Badge.css';
55
import Box from '../../experimental/Box';
66

7-
export const Chip = ({
7+
export const Badge = ({
88
children,
99
className,
1010
backgroundColor,
@@ -14,7 +14,7 @@ export const Chip = ({
1414
return (
1515
<Box
1616
{...restProps}
17-
className={classNames('vs-chip', className)}
17+
className={classNames('vs-badge', className)}
1818
style={{
1919
backgroundColor,
2020
color,
@@ -25,7 +25,7 @@ export const Chip = ({
2525
);
2626
};
2727

28-
Chip.propTypes = {
28+
Badge.propTypes = {
2929
backgroundColor: PropTypes.string,
3030
children: PropTypes.node,
3131
className: PropTypes.string,

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/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;

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@ import ArrowRightIcon from 'mdi-react/ArrowRightIcon';
77
import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
88
import { Button } from '../Button.js';
99
import * as R from 'ramda';
10+
1011
const Badge = ({ children }) => {
11-
return <div className="vs-badge">{children}</div>
12-
}
12+
return <div className="vs-sliding-panel-badge">{children}</div>;
13+
};
1314

14-
const removeUnrelatedProps = R.omit(["initialActive",
15-
"syncStateToOpen",
16-
"expandFilterDropdown",
17-
"hideFilterDropdown",
18-
"toggleSlidingPanel",
19-
"setSlidingPanelActiveState"]);
15+
const removeUnrelatedProps = R.omit([
16+
'initialActive',
17+
'syncStateToOpen',
18+
'expandFilterDropdown',
19+
'hideFilterDropdown',
20+
'toggleSlidingPanel',
21+
'setSlidingPanelActiveState',
22+
]);
2023

2124
export const ToggleIcon = ({
2225
onClick,
@@ -120,14 +123,19 @@ export const SlidingPanelDropdown = ({
120123
'vs-expanded': expanded,
121124
});
122125
return (
123-
<ul className={containerClasses} id={id} {...removeUnrelatedProps(restProps)}>
126+
<ul
127+
className={containerClasses}
128+
id={id}
129+
{...removeUnrelatedProps(restProps)}
130+
>
124131
<li>
125-
<a onClick={onClick} className="vs-sliding-panel-section-container-label">
132+
<a
133+
onClick={onClick}
134+
className="vs-sliding-panel-section-container-label"
135+
>
126136
<div className="vs-sliding-panel-section-label">
127137
{label}
128-
{badge && <Badge>
129-
{badge}
130-
</Badge>}
138+
{badge && <Badge>{badge}</Badge>}
131139
</div>
132140
<div className="vs-sliding-panel-chevron-container">
133141
<ChevronRightIcon />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import './global';
33
// modules that do not need qualification. i.e., the components
44
// they export can be scoped to VisualStack.<component>
55
export * from './components/Button';
6-
export * from './components/Chip';
6+
export * from './components/Badge';
77
export * from './components/Spinner';
88

99
// modules that need scoping. i.e. the components they

0 commit comments

Comments
 (0)