Bounty feat: Add NotificationDot component (#208)

* feat: Add NotificationDot component

* refactor: Use positive show prop instead of negative invisible prop

src/__tests__/components/notificationdot.test.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { renderWithTheme } from "../../testHelpers";
+import NotificationDot from "../../components/NotificationDot/NotificationDot";
+
+it("renders correctly", () => {
+  const { asFragment } = renderWithTheme(
+    <NotificationDot>
+      <div />
+    </NotificationDot>
+  );
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <span
+        class="sc-bdfBwQ gfxPDG"
+      >
+        <div />
+        <span
+          class="sc-gsTCUz cfVzjW"
+        />
+      </span>
+    </DocumentFragment>
+  `);
+});

src/components/NotificationDot/NotificationDot.tsx

@@ -0,0 +1,30 @@
+import React, { cloneElement, Children, ReactElement } from "react";
+import styled from "styled-components";
+import { NotificationDotProps, DotProps } from "./types";
+
+const NotificationDotRoot = styled.span`
+  display: inline-flex;
+  position: relative;
+`;
+
+const Dot = styled.span<DotProps>`
+  display: ${({ show }) => (show ? "inline-flex" : "none")};
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  border: 1px solid ${({ theme }) => theme.colors.invertedContrast};
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.failure};
+`;
+
+const NotificationDot: React.FC<NotificationDotProps> = ({ show = false, children, ...props }) => (
+  <NotificationDotRoot>
+    {Children.map(children, (child: ReactElement) => cloneElement(child, props))}
+    <Dot show={show} />
+  </NotificationDotRoot>
+);
+
+export default NotificationDot;

src/components/NotificationDot/index.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import NotificationDot from "./NotificationDot";
+import Button from "../Button/Button";
+import ButtonMenu from "../ButtonMenu/ButtonMenu";
+import ButtonMenuItem from "../ButtonMenu/ButtonMenuItem";
+
+export default {
+  title: "Components/NotificationDot",
+  component: NotificationDot,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  return (
+    <NotificationDot show>
+      <Button>Hi</Button>
+    </NotificationDot>
+  );
+};
+
+const Row = styled.div`
+  & > * + * {
+    margin-left: 16px;
+  }
+`;
+
+export const MenuButtons: React.FC = () => {
+  const [index, setIndex] = useState(0);
+  const handleClick = (newIndex) => setIndex(newIndex);
+  return (
+    <Row>
+      <ButtonMenu activeIndex={index} onItemClick={handleClick}>
+        <NotificationDot show={index === 0}>
+          <ButtonMenuItem>Button 1</ButtonMenuItem>
+        </NotificationDot>
+        <NotificationDot show={index === 1}>
+          <ButtonMenuItem>Button 2</ButtonMenuItem>
+        </NotificationDot>
+        <NotificationDot show={index === 2}>
+          <ButtonMenuItem>Button 3</ButtonMenuItem>
+        </NotificationDot>
+        <NotificationDot show={index === 3}>
+          <ButtonMenuItem>Button 4</ButtonMenuItem>
+        </NotificationDot>
+      </ButtonMenu>
+    </Row>
+  );
+};

src/components/NotificationDot/index.tsx

@@ -0,0 +1,2 @@
+export { default as NotificationDot } from "./NotificationDot";
+export type { NotificationDotProps, DotProps } from "./types";

src/components/NotificationDot/types.ts

@@ -0,0 +1,8 @@
+export interface NotificationDotProps {
+  show?: boolean;
+  children: React.ReactElement | React.ReactElement[];
+}
+
+export interface DotProps {
+  show: boolean;
+}

src/index.ts

@@ -12,6 +12,7 @@ export * from "./components/Heading";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/Layouts";
+export * from "./components/NotificationDot";
 export * from "./components/Radio";
 export * from "./components/Svg";
 export * from "./components/Tag";