Merge pull request #313 from cjdev/vs-chip

Anthony Brice · web-flow · commit 6ce08c712c87 · 2021-01-19T08:53:00.000-08:00
Add Chip component
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# Upcoming
+
+## New Component
+
+- Add Chip component
+
 # 6.10.0
 
 ## New Component
diff --git a/packages/visual-stack-docs/src/containers/Components/Docs/chip.js b/packages/visual-stack-docs/src/containers/Components/Docs/chip.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Panel, Body } from '@cjdev/visual-stack/lib/components/Panel';
+import { Demo, Snippet } from '../../../components/Demo';
+/* s2:start */
+import { Chip } from '@cjdev/visual-stack';
+/* s2:end */
+import Box from '@cjdev/visual-stack/lib/experimental/Box';
+
+export default () => (
+  <Demo srcFile="/samples/src/containers/Components/Docs/chip.js">
+    {snippets => {
+      return (
+        <div>
+          <Panel>
+            <Body>
+              {/* s1:start */}
+              <Box direction="row" gap="default">
+                <Chip backgroundColor="#9C52F7">CJ Performer</Chip>
+                <Chip backgroundColor="#EA4B93">CJ Spotlight</Chip>
+                <Chip backgroundColor="#4574E2">Content Certified</Chip>
+                <Chip backgroundColor="#0CAAAC">New to Network</Chip>
+                <Chip backgroundColor="#072477">SubAffiliate</Chip>
+              </Box>
+              {/* s1:end */}
+              <Snippet tag="s2" src={snippets} />
+              <Snippet tag="s1" src={snippets} />
+            </Body>
+          </Panel>
+        </div>
+      );
+    }}
+  </Demo>
+);
diff --git a/packages/visual-stack-docs/src/containers/Components/Docs/index.js b/packages/visual-stack-docs/src/containers/Components/Docs/index.js
@@ -22,6 +22,7 @@ import SpinnerDocs from './spinner';
 import TableDocs from './table';
 import TabLayoutDocs from './tablayout';
 import CardDocs from './card';
+import ChipDocs from './chip';
 import ListViewDocs from './listview';
 import ExpandingInputButtonDocs from './expanding-input-button';
 import LoadingAnimationDocs from './loading-animation';
@@ -51,7 +52,7 @@ addComponentRoute('list', 'List', <ListDocs />);
 addComponentRoute('modal', 'Modal', <ModalDocs />);
 addComponentRoute('panel', 'Panel', <PanelDocs />);
 addComponentRoute('pageheader', 'Page Header', <PageHeaderDocs />);
-addComponentRoute('percentslider', 'Percent Slider', <PercentSliderDocs />)
+addComponentRoute('percentslider', 'Percent Slider', <PercentSliderDocs />);
 addComponentRoute('select', 'Select', <SelectDocs />);
 addComponentRoute('sidenav', 'SideNav', <SideNavDocs />);
 addComponentRoute('slidingpanel', 'Sliding Panel', <SlidingPanelDocs />);
@@ -65,6 +66,7 @@ addComponentRoute('spinner', 'Spinner', <SpinnerDocs />);
 addComponentRoute('table', 'Table', <TableDocs />);
 addComponentRoute('tablayout', 'TabLayout', <TabLayoutDocs />);
 addComponentRoute('card', 'Card', <CardDocs />);
+addComponentRoute('chip', 'Chip', <ChipDocs />);
 addComponentRoute('listview', 'List View', <ListViewDocs />);
 addComponentRoute('pagination', 'Pagination', <PaginationDocs />);
 addComponentRoute(
diff --git a/packages/visual-stack/src/components/Chip/Chip.css b/packages/visual-stack/src/components/Chip/Chip.css
@@ -0,0 +1,13 @@
+.vs-chip {
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1rem;
+  border-radius: 2px;
+  display: inline-block;
+  color: #ffffff;
+  padding: 2px 4px;
+  text-align: center;
+  text-transform: uppercase;
+  width: fit-content;
+  height: fit-content;
+}
diff --git a/packages/visual-stack/src/components/Chip/index.js b/packages/visual-stack/src/components/Chip/index.js
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import './Chip.css';
+import Box from '../../experimental/Box';
+
+export const Chip = ({
+  children,
+  className,
+  backgroundColor,
+  color,
+  ...restProps
+}) => {
+  return (
+    <Box
+      {...restProps}
+      className={classNames('vs-chip', className)}
+      style={{
+        backgroundColor,
+        color,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+Chip.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: PropTypes.string,
+};
diff --git a/packages/visual-stack/src/components/Chip/tests/index.test.js b/packages/visual-stack/src/components/Chip/tests/index.test.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Chip } from '../';
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Chip', () => {
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+
+  test('should render children', () => {
+    const wrapper = mount(
+      <Chip backgroundColor="red" color="blue">
+        CONTENT CERTIFIED
+      </Chip>
+    );
+    expect(wrapper.find(Chip).text()).toEqual('CONTENT CERTIFIED');
+  });
+});
diff --git a/packages/visual-stack/src/index.js b/packages/visual-stack/src/index.js
@@ -3,6 +3,7 @@ import './global';
 // modules that do not need qualification. i.e., the components
 // they export can be scoped to VisualStack.<component>
 export * from './components/Button';
+export * from './components/Chip';
 export * from './components/Spinner';
 
 // modules that need scoping. i.e. the components they
