feat(StatusDot): add component

src/components/StatusDot/StatusDot.enums.ts

@@ -0,0 +1,6 @@
+export const StatusDotColors = {
+  good: 'good',
+  bad: 'bad',
+  neutral: 'neutral',
+  inactive: 'inactive',
+} as const;

src/components/StatusDot/StatusDot.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react/types-6-0';
+
+import StatusDot from './StatusDot';
+import { Inline } from '../layout';
+
+export default {
+  title: 'components/StatusDot',
+  component: StatusDot,
+} as Meta;
+
+export const Default: Story = () => (
+  <Inline gap="lg">
+    <StatusDot color="good" />
+    <StatusDot color="bad" />
+    <StatusDot color="neutral" />
+    <StatusDot color="inactive" />
+  </Inline>
+);

src/components/StatusDot/StatusDot.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { getRadii, pxToRem } from '../../utils';
+
+const StatusDotColors = {
+  good: '100, 244, 81',
+  bad: '242, 46, 67',
+  neutral: '84, 129, 217',
+  inactive: '216, 216, 216',
+};
+
+const StatusDotComponent = Styled.div`
+  width: ${pxToRem(12)};
+  height: ${pxToRem(12)};
+  border-radius: ${getRadii('round')};
+  background-color: rgba(${({ color }) => StatusDotColors[color]});
+  border: 2px solid white;
+  box-shadow: 0 0 12px 0px rgba(${({ color }) =>
+    `${StatusDotColors[color]}, 0.5`});
+`;
+
+const StatusDot = ({ color }) => (
+  <StatusDotComponent color={color} role="presentation" />
+);
+
+StatusDot.propTypes = {
+  color: PropTypes.string,
+};
+
+export default StatusDot;

src/components/StatusDot/index.ts

@@ -0,0 +1,2 @@
+export { default as StatusDot } from './StatusDot';
+export { StatusDotColors } from './StatusDot.enums';