diff --git a/.betterer/.betterer.results b/.betterer/.betterer.results index c6e446f5e..b3c1de3c4 100644 --- a/.betterer/.betterer.results +++ b/.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"] ] }` 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/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx index fa16212cd..41ee8874e 100644 --- a/src/components/StatusDot/StatusDot.tsx +++ b/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', 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..77e1706a3 --- /dev/null +++ b/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 = ({ + color = 'inactive', + label, +}) => ( + + + + {label} + + +); + +StatusPill.propTypes = { + label: PropTypes.string.isRequired, + color: PropTypes.oneOf(Object.keys(StatusDotColors)), +}; +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..3a1cc69c3 --- /dev/null +++ b/src/components/StatusPill/StatusPill.types.ts @@ -0,0 +1,6 @@ +import { StatusDotColors } from '../StatusDot/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'; diff --git a/src/components/index.ts b/src/components/index.ts index 0ed009616..220587696 100644 --- a/src/components/index.ts +++ b/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';