feat(atoms): add code component

src/atoms/Code/Code.js

@@ -0,0 +1,20 @@
+// @flow
+
+import React from 'react';
+import { CodeWrapperTag, CodeBodyTag } from './Code.theme';
+
+type CodeProps = {
+  children: React$Node,
+}
+
+const Code = ({ children }: CodeProps) => (
+  <CodeWrapperTag>
+    <CodeBodyTag>
+      { children }
+    </CodeBodyTag>
+  </CodeWrapperTag>
+);
+
+export {
+  Code,
+};

src/atoms/Code/Code.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('ATOMS/Code', module, (story, { Code }) => {
+    story
+      .add('default', () => (
+        <Code>
+          <p>npm i -g 8base</p>
+          <p>8base init my-project</p>
+        </Code>
+      ));
+  });
+};
+

src/atoms/Code/Code.theme.js

@@ -0,0 +1,37 @@
+// @flow
+
+import { createStyledTag, createTheme } from '../../utils';
+
+const name = 'code';
+
+const theme = createTheme(name, {
+});
+
+const CodeWrapperTag = createStyledTag(name, (props) => ({
+  border: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
+  borderRadius: props.theme.SIZES.MAIN_BORDER_RADIUS,
+  display: 'flex',
+
+  '&:before': {
+    content: '""',
+    display: 'block',
+    width: '3rem',
+    backgroundColor: props.theme.COLORS.LIGHT_GRAY5,
+    borderRight: `1px solid ${props.theme.COLORS.LIGHT_GRAY1}`,
+    zIndex: -1,
+  },
+}));
+
+const CodeBodyTag = createStyledTag(name, (props) => ({
+  padding: '2rem',
+  fontFamily: 'Courier',
+  lineHeight: '2',
+  color: props.theme.COLORS.DARK_GRAY1,
+  fontWeight: 'normal',
+}));
+
+export {
+  theme,
+  CodeBodyTag,
+  CodeWrapperTag,
+};

src/atoms/Code/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { Code } from './Code';
+export { theme } from './Code.theme';

src/atoms/atoms.js

@@ -6,6 +6,7 @@ export { Breadcrumbs } from './Breadcrumbs';
 export { Card } from './Card';
 export { Checkbox } from './dataEntry/Checkbox';
 export { CheckboxField } from './dataEntry/CheckboxField';
+export { Code } from './Code';
 export { Dialog } from './Dialog';
 export { Divider } from './Divider';
 export { Dropdown } from './Dropdown';

src/atoms/theme.js

@@ -5,6 +5,7 @@ import { theme as buttonTheme } from './Button';
 import { theme as breadcrumbsTheme } from './Breadcrumbs';
 import { theme as cardTheme } from './Card';
 import { theme as checkboxTheme } from './dataEntry/Checkbox';
+import { theme as codeTheme } from './Code';
 import { theme as dialogTheme } from './Dialog';
 import { theme as dividerTheme } from './Divider';
 import { theme as dropdownTheme } from './Dropdown';
@@ -38,6 +39,7 @@ export const theme = {
   ...breadcrumbsTheme,
   ...cardTheme,
   ...checkboxTheme,
+  ...codeTheme,
   ...dialogTheme,
   ...dividerTheme,
   ...dropdownTheme,

storybook/__tests__/__snapshots__/storyshots.test.js.snap

@@ -2387,6 +2387,57 @@ exports[`Storyshots ATOMS/Card without multiple sections 1`] = `
 </div>
 `;
 
+exports[`Storyshots ATOMS/Code default 1`] = `
+.emotion-4 {
+  margin: 2rem;
+}
+
+.emotion-2 {
+  border: 1px solid #d0d7dd;
+  border-radius: .5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-2:before {
+  content: "";
+  display: block;
+  width: 3rem;
+  background-color: #f4f7f9;
+  border-right: 1px solid #d0d7dd;
+  z-index: -1;
+}
+
+.emotion-0 {
+  padding: 2rem;
+  font-family: Courier;
+  line-height: 2;
+  color: #323c47;
+  font-weight: normal;
+}
+
+<div
+  className="emotion-4 emotion-5"
+>
+  <div
+    className="emotion-2 emotion-1"
+  >
+    <div
+      className="emotion-0 emotion-1"
+    >
+      <p>
+        npm i -g 8base
+      </p>
+      <p>
+        8base init my-project
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots ATOMS/DATA ENTRY/Checkbox with check 1`] = `
 .emotion-12 {
   margin: 2rem;