feat(ui): JobMeta component

packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap

@@ -314505,6 +314505,47 @@ exports[`Storyshots Components/Delta slightlyPositive 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/JobMeta default 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root"
+  >
+    <div
+      className="item"
+    >
+      <h2
+        className="itemTitle"
+      >
+        #123
+      </h2>
+      <p>
+        July 3th 
+      </p>
+    </div>
+    <div
+      className="item"
+    >
+      <h2
+        className="itemTitle"
+      >
+        #122
+      </h2>
+      <p>
+        July 4th
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/JobName custom component 1`] = `
 <div
   style={

packages/ui/src/components/job-meta/index.js

@@ -0,0 +1 @@
+export * from './job-meta';

packages/ui/src/components/job-meta/job-meta.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import css from './job-meta.module.css';
+
+export const JobMeta = (props) => {
+  const {
+    as: Component, className, meta, ...restProps
+  } = props;
+
+  const rootClassName = cx(css.root, className);
+
+  return (
+    <Component className={rootClassName} {...restProps}>
+      {meta.map(({ title, content }, index) => {
+        const key = index;
+
+        return (
+          <div className={css.item} key={key}>
+            {title && (<h2 className={css.itemTitle}>{title}</h2>)}
+            {content.map((item) => (
+              <>{item}</>
+            ))}
+          </div>
+        );
+      })}
+    </Component>
+  );
+};
+
+JobMeta.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+
+  /** Contrnt */
+  meta: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    content: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element])),
+  })).isRequired,
+
+  /** Render component */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
+
+JobMeta.defaultProps = {
+  className: '',
+  as: 'div',
+};

packages/ui/src/components/job-meta/job-meta.module.css

@@ -0,0 +1,19 @@
+.root {
+  padding: var(--space-xsmall) var(--space-small);
+  display: flex;
+}
+
+.item {
+  flex: 1 1 100%;
+}
+
+.itemTitle {
+  margin: 0;
+  font-size: 1em;
+  font-weight: bold;
+  color: var(--color-gray-light);
+}
+
+.item + .item {
+  margin-left: var(--space-xsmall);
+}

packages/ui/src/components/job-meta/job-meta.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { JobMeta } from '.';
+
+const stories = storiesOf('Components/JobMeta', module);
+stories.addDecorator(getWrapperDecorator());
+
+stories.add('default', () => (
+  <JobMeta
+    meta={[
+      {
+        title: '#123',
+        content: [
+          <p>July 3th </p>,
+        ],
+      },
+      {
+        title: '#122',
+        content: [
+          <p>July 4th</p>,
+        ],
+      },
+    ]}
+  />
+));