Add Horrizontal bullet list (#4)

src/components/HorizontalBulletList/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import classNames from "classnames";
+import useStyles from "./styles";
+
+const HorizontalBulletList = props => {
+  const classes = useStyles();
+  return (
+    <ul className={classNames(classes.root, props.className)}>
+      {props.children}
+    </ul>
+  );
+};
+
+HorizontalBulletList.defaultProps = {};
+
+export default HorizontalBulletList;

src/components/HorizontalBulletList/index.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import theme from "../../theme";
+import { HorizontalBulletList } from "../../index";
+import { storiesOf } from "@storybook/react";
+import { jsxDecorator } from "storybook-addon-jsx";
+import { muiTheme } from "storybook-addon-material-ui";
+import { Typography } from "@material-ui/core";
+
+const stories = storiesOf("Horizontal bullet list", HorizontalBulletList);
+
+stories.addDecorator(jsxDecorator).addDecorator(muiTheme([theme]));
+
+stories.add("Default", () => (
+  <HorizontalBulletList>
+    <Typography component="li" variant="body2">
+      Hello
+    </Typography>
+
+    <Typography component="li" variant="body2">
+      Hello
+    </Typography>
+
+    <Typography component="li" variant="body2">
+      Hello
+    </Typography>
+
+    <Typography component="li" variant="body2">
+      Hello
+    </Typography>
+  </HorizontalBulletList>
+));

src/components/HorizontalBulletList/styles.js

@@ -0,0 +1,21 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  root: {
+    paddingLeft: 0,
+    listStyleType: "none",
+    "& li": {
+      display: "inline",
+      whiteSpace: "nowrap",
+      marginRight: theme.spacing(2),
+      color: "rgba(0,0,0,.36)",
+    },
+    "& li:after": {
+      content: '"·"',
+      marginLeft: theme.spacing(2),
+    },
+    "& li:last-child::after": {
+      content: "none",
+    },
+  },
+}));

src/index.js

@@ -2,12 +2,14 @@ import InfoBoxComponent from "./components/InfoBox";
 import ProgressButtonComponent from "./components/ProgressButton";
 import KeyNumberBlockComponent from "./components/KeyNumberBlock";
 import ExpandableBottomSheetComponent from "./components/ExpandableBottomSheet";
+import HorizontalBulletListComponent from "./components/HorizontalBulletList";
 import Dhis2IconComponent from "./components/Dhis2Icon";
 import DuoToneChipComponent from "./components/DuoToneChip";
 
 export const InfoBox = InfoBoxComponent;
 export const ProgressButton = ProgressButtonComponent;
 export const KeyNumberBlock = KeyNumberBlockComponent;
 export const ExpandableBottomSheet = ExpandableBottomSheetComponent;
+export const HorizontalBulletList = HorizontalBulletListComponent;
 export const Dhis2Icon = Dhis2IconComponent;
 export const DuoToneChip = DuoToneChipComponent;