Style updates

.gitignore

@@ -1 +1,2 @@
 node_modules
+.env

package.json

@@ -1,11 +1,13 @@
 {
   "name": "components",
-  "version": "1.0.0",
+  "version": "0.1.0",
+  "repository": "https://github.com/10digits/components.git",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
+    "build": "BABEL_ENV=production babel src -d dist",
     "build-storybook": "build-storybook"
   },
   "keywords": [],
@@ -14,12 +16,18 @@
   "dependencies": {
     "dayjs": "^1.8.16"
   },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@storybook/addon-actions": "^5.2.4",
+    "@storybook/addon-links": "^5.2.4",
+    "@storybook/addons": "^5.2.4",
+    "@storybook/react": "^5.2.4",
     "babel-loader": "^8.0.6"
   }
 }

src/CountBadge/index.js

@@ -0,0 +1,61 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.css';
+import classnames from 'classnames';
+
+const CountBadge = ({
+  children,
+  hideCount,
+  isAttached,
+  fillColor,
+  strokeColor,
+  size,
+}) => {
+  const count =
+    children > 99 ? (
+      <Fragment>
+        99<sup>+</sup>
+      </Fragment>
+    ) : (
+      children
+    );
+  return (
+    <div
+      className={classnames([
+        'CountBadge',
+        {
+          'CountBadge__is-attached': isAttached,
+        },
+      ])}
+      style={{
+        color: strokeColor,
+        backgroundColor: fillColor,
+        fontSize: size / 2,
+        height: size,
+        width: size,
+      }}
+      title={children}
+    >
+      {hideCount ? null : count}
+    </div>
+  );
+};
+
+CountBadge.propTypes = {
+  hideCount: PropTypes.bool,
+  children: PropTypes.string.isRequired,
+  strokeColor: PropTypes.string,
+  fillColor: PropTypes.string,
+  size: PropTypes.number,
+};
+
+CountBadge.defaultProps = {
+  hideCount: false,
+  isAttached: false,
+  strokeColor: '#ffffff',
+  fillColor: '#d01c1c',
+  size: 24,
+};
+
+export default CountBadge;

src/CountBadge/styles.css

@@ -0,0 +1,31 @@
+.CountBadge {
+  align-items: center;
+  border-radius: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  margin: 1px;
+  position: relative;
+}
+
+.CountBadge__is-attached {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(55%, -55%);
+}
+
+.CountBadge::after {
+  border-radius: 100%;
+  border: 0.18em solid;
+  bottom: -1px; /* -1px on position to tackle background colour fuzzing */
+  content: '';
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+
+sup {
+  transform: translateY(-20%);
+}

src/index.js

@@ -1,6 +1,7 @@
 import Article from './Article';
 import Blockquote from './Blockquote';
 import Clickable from './Clickable';
+import CountBadge from './CountBadge';
 import Field from './Field';
 import Form from './Form';
 import H from './H';
@@ -21,6 +22,7 @@ export {
   Article,
   Blockquote,
   Clickable,
+  CountBadge,
   Field,
   Form,
   H,

stories/CountBadge.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { CountBadge, Clickable } from '../src';
+
+export default {
+  title: 'CountBadge',
+};
+
+export const twelve = () => <CountBadge>12</CountBadge>;
+export const four = () => <CountBadge fillColor="#797979">4</CountBadge>;
+export const one = () => (
+  <CountBadge strokeColor="#333333" fillColor="#c78ae3">
+    1
+  </CountBadge>
+);
+export const ninetyNine = () => <CountBadge fillColor="#006dcc">99</CountBadge>;
+export const twoHundred = () => <CountBadge>200</CountBadge>;
+export const small = () => <CountBadge size={16}>2</CountBadge>;
+export const smallNoCount = () => (
+  <CountBadge hideCount size={12}>
+    2
+  </CountBadge>
+);
+export const large = () => (
+  <CountBadge fillColor="#e7912f" strokeColor="#e7542f" size={100}>
+    50
+  </CountBadge>
+);
+export const extraLarge = () => <CountBadge size={400}>88</CountBadge>;
+
+export const attached = () => (
+  <span style={{ position: 'relative' }}>
+    <Clickable
+      onClick={() => {
+        return;
+      }}
+    >
+      Count
+    </Clickable>
+    <CountBadge size={24} isAttached>2</CountBadge>
+  </span>
+);