diff --git a/.storybook/image-snapshots/expected/components_StatusPill_Default.png b/.storybook/image-snapshots/expected/components_StatusPill_Default.png new file mode 100644 index 000000000..99db065b7 Binary files /dev/null and b/.storybook/image-snapshots/expected/components_StatusPill_Default.png differ diff --git a/src/components/StatusPill/StatusPill.stories.tsx b/src/components/StatusPill/StatusPill.stories.tsx new file mode 100644 index 000000000..463bb7721 --- /dev/null +++ b/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 = () => ( + + + + + + +); diff --git a/src/components/StatusPill/StatusPill.tsx b/src/components/StatusPill/StatusPill.tsx new file mode 100644 index 000000000..66e8e6393 --- /dev/null +++ b/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 = ({ + color = 'inactive', + label, +}) => ( + + + + {label} + + +); + +StatusPill.propTypes = { + label: PropTypes.string.isRequired, + color: PropTypes.string, +}; +export default StatusPill; diff --git a/src/components/StatusPill/StatusPill.types.ts b/src/components/StatusPill/StatusPill.types.ts new file mode 100644 index 000000000..609bf089c --- /dev/null +++ b/src/components/StatusPill/StatusPill.types.ts @@ -0,0 +1,6 @@ +import { StatusDotColors } from '../StatusDot'; + +export interface StatusPillProps { + color?: keyof typeof StatusDotColors; + label: string; +} diff --git a/src/components/StatusPill/index.ts b/src/components/StatusPill/index.ts new file mode 100644 index 000000000..151fbe9fc --- /dev/null +++ b/src/components/StatusPill/index.ts @@ -0,0 +1 @@ +export { default as StatusPill } from './StatusPill';