Merge pull request #821 from securityscorecard/Mnau-mnau@UXD-1247

feat(StatusPill): 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:3052257943": [
+    "../src/components/index.ts:3583195122": [
       [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.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { getRadii, pxToRem } from '../../utils';
 
-const StatusDotColors = {
+export const StatusDotColors = {
   good: '100, 244, 81',
   bad: '242, 46, 67',
   neutral: '84, 129, 217',

src/components/StatusPill/StatusPill.stories.tsx

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

src/components/StatusPill/StatusPill.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { StatusDot } from '../StatusDot/index';
+import { StatusDotColors } from '../StatusDot/StatusDot';
+import { StatusPillProps } from './StatusPill.types';
+import PillLabel from '../Pill/PillLabel';
+import { SpaceSizes } from '../../theme';
+import { Inline, Padbox } from '../layout';
+import { PaddingTypes } from '../layout/Padbox/Padbox.enums';
+import { getColor, getRadii, pxToRem } from '../../utils';
+
+const StyledPillWrapper = Styled(Padbox)`
+  display: inline-block;
+  height: ${pxToRem(24)};
+  min-width: 0;
+  border-radius: ${getRadii('round')};
+  border: 1px solid ${getColor('neutral.200')};
+  background-color: ${getColor('neutral.0')};
+  padding-right: ${pxToRem(6)};
+  padding-top: ${pxToRem(3)};
+`;
+
+const StatusPill: React.FC<StatusPillProps> = ({
+  color = 'inactive',
+  label,
+}) => (
+  <StyledPillWrapper
+    paddingSize={SpaceSizes.xs}
+    paddingType={PaddingTypes.squish}
+  >
+    <Inline align="center" gap="sm">
+      <StatusDot color={color} />
+      <PillLabel>{label}</PillLabel>
+    </Inline>
+  </StyledPillWrapper>
+);
+
+StatusPill.propTypes = {
+  label: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(Object.keys(StatusDotColors)),
+};
+export default StatusPill;

src/components/StatusPill/StatusPill.types.ts

@@ -0,0 +1,6 @@
+import { StatusDotColors } from '../StatusDot/StatusDot';
+
+export interface StatusPillProps {
+  color?: keyof typeof StatusDotColors;
+  label: string;
+}

src/components/StatusPill/index.ts

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

src/components/index.ts

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