Merge pull request #820 from securityscorecard/Mnau-mnau@UXD-1240

feat(StatusDot): add component

.betterer/.betterer.results

@@ -11,7 +11,7 @@ exports[`no more deprecated components`] = {
     "../src/components/FlexContainer/index.ts:1246547685": [
       [0, 0, 59, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "3330215570"]
     ],
-    "../src/components/index.ts:3740729044": [
+    "../src/components/index.ts:3052257943": [
       [18, 0, 32, "\'./FlexContainer\' import is restricted from being used by a pattern. FlexContainer is deprecated. Please use Layout primitives instead.", "726759703"]
     ]
   }`

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,34 @@
+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',
+} as const;
+
+const StatusDotComponent = Styled.div`
+  width: ${pxToRem(12)};
+  height: ${pxToRem(12)};
+  border-radius: ${getRadii('round')};
+  background-color: rgb(${({ color }) => StatusDotColors[color]});
+  border: 2px solid white;
+  box-shadow: 0 0 12px 0px rgba(${({ color }) =>
+    `${StatusDotColors[color]}, 0.5`});
+`;
+
+const StatusDot = ({
+  color = 'inactive',
+}: {
+  color: keyof typeof StatusDotColors;
+}) => <StatusDotComponent color={color} role="presentation" />;
+
+StatusDot.propTypes = {
+  color: PropTypes.oneOf(Object.keys(StatusDotColors)),
+};
+
+export default StatusDot;

src/components/StatusDot/index.ts

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

src/components/index.ts

@@ -32,6 +32,7 @@ export * from './Signal';
 export * from './SingleDatePicker';
 export * from './SortableList';
 export * from './Spinner';
+export * from './StatusDot';
 export * from './Stepper';
 export * from './Table';
 export * from './Tabs';