feat: add Status component (#260)

packages/react/src/components/status/status.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Status, StatusType } from './status';
+import { mountWithTheme } from '../../test-utils/renderer';
+
+const statusTypesArray: StatusType[] = ['enabled', 'disabled', 'blocked'];
+
+describe('Status', () => {
+    statusTypesArray.forEach((type) => (
+        it(`matches snapshot (${type})`, () => {
+            const tree = mountWithTheme(<Status type={type} label={type} />);
+
+            expect(tree).toMatchSnapshot();
+        })
+    ));
+});

packages/react/src/components/status/status.tsx

@@ -0,0 +1,45 @@
+import React, { VoidFunctionComponent } from 'react';
+import styled from 'styled-components';
+import { Theme } from '../../themes';
+
+export type StatusType = 'enabled' | 'disabled' | 'blocked';
+
+function getBackgroundColor(type: StatusType, theme: Theme): string {
+    switch (type) {
+        case 'enabled':
+            return theme.notifications['success-1.1'];
+        case 'disabled':
+            return theme.greys.white;
+        case 'blocked':
+            return theme.notifications['error-2.1'];
+    }
+}
+
+const Wrapper = styled.div<{ type: StatusType }>`
+    align-items: center;
+    display: flex;
+
+    ${({ type, theme }) => type === 'disabled' && `color: ${theme.greys['dark-grey']}`}
+`;
+
+const Circle = styled.div<{ type: StatusType }>`
+    background-color: ${({ type, theme }) => getBackgroundColor(type, theme)};
+    border: ${({ type, theme }) => (type === 'disabled' ? `1px solid ${theme.greys['dark-grey']}` : 'none')};
+    border-radius: 50%;
+    box-sizing: border-box;
+    height: 10px;
+    margin-right: calc(var(--spacing-base) * 1.5);
+    width: 10px;
+`;
+
+interface Props {
+    label: string;
+    type: StatusType;
+}
+
+export const Status: VoidFunctionComponent<Props> = ({ label, type }) => (
+    <Wrapper type={type}>
+        <Circle type={type} />
+        <span>{label}</span>
+    </Wrapper>
+);

packages/react/src/index.ts

@@ -50,6 +50,7 @@ export * from './components/table/table';
 export { Modal } from './components/modal/modal';
 export { ModalDialog } from './components/modal/modal-dialog';
 export { Tag, Tags } from './components/tags/tags';
+export { Status } from './components/status/status';
 export { SkipLink } from './components/skip-link/skip-link';
 export { useModal } from './components/modal/use-modal';
 export { UserProfile } from './components/user-profile/user-profile';

packages/storybook/stories/status.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Status } from '@equisoft/design-elements-react';
+import { Story } from '@storybook/react';
+
+export default {
+    component: Status,
+    title: 'Data/Status',
+};
+
+export const Normal: Story = () => (
+    <>
+        <Status type="enabled" label="Enabled" />
+        <Status type="disabled" label="Disabled" />
+        <Status type="blocked" label="Blocked" />
+    </>
+);