feat(StatusPill): add component

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,43 @@
+import React from 'react';
+import Styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { StatusDot } from '../StatusDot/index';
+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.string,
+};
+export default StatusPill;

src/components/StatusPill/StatusPill.types.ts

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

src/components/StatusPill/index.ts

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