Exports

src/components/ui/StatusTags/StatusTags.stories.tsx

@@ -0,0 +1,39 @@
+import { StatusTag as StatusTagComponent } from ".";
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof StatusTagComponent> = {
+  title: "DRT Components/UI/StatusTags",
+  component: StatusTagComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusTagComponent>;
+
+export const Success: Story = {
+  args: {
+    type: "success",
+    text: "Hurrah!",
+  }
+};
+
+export const Info: Story = {
+  args: {
+    type: "info",
+    text: "How interesting!",
+  }
+};
+
+export const Warning: Story = {
+  args: {
+    type: "warning",
+    text: "Here be dragons...",
+  }
+};
+
+export const Error: Story = {
+  args: {
+    type: "error",
+    text: "Oh dear...",
+  }
+};

src/components/ui/StatusTags/StatusTags.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Alert, AlertColor, AlertProps } from "@mui/material";
+import { styled, useTheme } from '@mui/material/styles';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/Info';
+import ErrorIcon from '@mui/icons-material/Error';
+import ReportIcon from '@mui/icons-material/Report';
+
+const StyledAlert = styled(Alert)<AlertProps>(() => ({
+  fontWeight: 'bold',
+  color: '#fff',
+  '& .MuiSvgIcon-root': {
+    color: '#fff',
+    width: '0.9em',
+    height: '0.9em',
+  }
+}));
+
+export interface IStatusTag {
+  type: string,
+  text: string
+}
+
+export const StatusTag = ({type, text}: IStatusTag) => {
+  const theme = useTheme()
+  let bgColor, icon; 
+  let severity = 'success';
+  switch (type) {
+    case 'success':
+      bgColor = theme.palette.success.main
+      severity = 'success'
+      icon = <CheckCircleIcon />
+      break;
+    case 'warning':
+      bgColor = theme.palette.warning.main
+      severity = 'warning'
+      icon = <ErrorIcon />
+      break;
+    case 'error':
+      bgColor = theme.palette.error.main
+      severity = 'error'
+      icon = <ReportIcon />
+      break;
+    case 'info':
+    default:
+      bgColor = theme.palette.info.main
+      severity = 'info'
+      icon = <InfoIcon />
+      break;
+  }
+  return <StyledAlert sx={{backgroundColor: bgColor, py: 0 }} icon={icon} severity={severity as AlertColor}>{text}</StyledAlert>
+}

src/components/ui/StatusTags/index.ts

@@ -0,0 +1,2 @@
+export { StatusTag } from "./StatusTags";
+export type {IStatusTag} from './StatusTags';

src/components/ui/StyledTable/StyledTable.stories.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Table as MuiTable, TableHead, TableCell, TableBody, TableRow } from "@mui/material";
+import {InfoTooltip} from '../ui/InfoTooltip';
+
+import type {Meta, StoryObj} from '@storybook/react';
+
+const meta: Meta<typeof MuiTable> = {
+    title: "DRT Components/MUI Components",
+    component: MuiTable,
+};
+
+export default meta;
+type Story = StoryObj<typeof MuiTable>;
+
+function createData(
+  name: string,
+  calories: number,
+  fat: number,
+  carbs: number,
+  protein: number,
+) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+
+export const Table: Story = {
+    render: (storyContext) => {
+        return <MuiTable>
+          <TableHead>
+            <TableRow>
+              <TableCell>Dessert (100g serving)</TableCell>
+              <TableCell align="right">
+                Calories
+                <InfoTooltip text="A unit of energy, often used to express the nutritional value of foods" />
+              </TableCell>
+              <TableCell align="right">Fat&nbsp;(g)</TableCell>
+              <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+              <TableCell align="right">Protein&nbsp;(g)</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.name}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  {row.name}
+                </TableCell>
+                <TableCell align="right">{row.calories}</TableCell>
+                <TableCell align="right">{row.fat}</TableCell>
+                <TableCell align="right">{row.carbs}</TableCell>
+                <TableCell align="right">{row.protein}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </MuiTable>
+    }
+};

src/components/ui/StyledTable/StyledTable.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { TableHead, TableHeadProps, TableCell, TableCellProps, TableBody, TableBodyProps } from "@mui/material";
+import { styled } from '@mui/material/styles';
+
+export const StyledTableHeader = styled(TableHead)<TableHeadProps>(() => ({
+  fontWeight: 'bold',
+  backgroundColor: '#334F96',
+  color: '#fff',
+  tableLayout: 'fixed',
+}));
+
+export const StyledTableHeaderCell = styled(TableCell)<TableCellProps>(() => ({
+  fontWeight: 'bold',
+  color: '#fff',
+  whiteSpace: 'nowrap',
+}));
+
+export const StyledTableBody = styled(TableBody)<TableBodyProps>(() => ({
+  '& tr:nth-of-type(even) ': {
+    backgroundColor: '#efefef',
+  },
+  '& > td': {
+    verticalAlign: 'top'
+  }
+}));
+
+export const RelativeTableCell = styled(TableCell)<TableCellProps>(() => ({
+  position: 'relative'
+}));
+
+export const CellHighlight = styled('div')(() => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  height: '3px',
+}));
+
+export interface ICellStatusHighlight {
+  status: string,
+}
+
+export const CellStatusHighlight = ({status}: ICellStatusHighlight) => {
+  let bgColor;
+  switch (status) {
+    case 'success':
+      bgColor = '#86AD1B'
+      break;
+    case 'warning':
+      bgColor = '#C94900'
+      break;
+    case 'error':
+      bgColor = '#FF5C5C'
+      break;
+    case 'info':
+    default:
+      bgColor = '#404252'
+      break;
+  }
+  return <CellHighlight sx={{backgroundColor: bgColor}} />
+}

src/components/ui/StyledTable/index.ts

@@ -0,0 +1,8 @@
+export { 
+  StyledTableHeader, 
+  StyledTableHeaderCell, 
+  StyledTableBody,
+  RelativeTableCell, 
+  CellHighlight,
+  CellStatusHighlight,
+} from "./StyledTable";

src/components/ui/index.ts

@@ -0,0 +1,17 @@
+export { Highlight } from "./Highlight";
+export type { IHighlight } from "./Highlight";
+
+export type {IInfoTooltip} from "./InfoTooltip";
+export {InfoTooltip} from "./InfoTooltip";
+
+export { StatusTag } from "./StatusTags";
+export type {IStatusTag} from './StatusTags';
+
+export { 
+  StyledTableHeader, 
+  StyledTableHeaderCell, 
+  StyledTableBody,
+  RelativeTableCell, 
+  CellHighlight,
+  CellStatusHighlight,
+} from "./StyledTable";