Merge branch 'develop' into header-responsive

package.json

@@ -34,6 +34,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@svgr/cli": "^8.1.0",
     "@types/jest": "^29.5.3",
+    "@types/minimist": "^1.2.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",

src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Loader } from "./Loader";
+
+export default { 
+   component: Loader,
+} as Meta<typeof Loader>;
+type Story = StoryObj<typeof Loader>;
+
+export const IndeterminateLoader: Story = {
+   args: {
+     variant: "indeterminate"
+   },
+};
+
+export const DeterminateLoader: Story = {
+   args: {
+      variant: "determinate",
+      value: 17
+   },
+};

src/components/Loader/Loader.test.tsx

@@ -0,0 +1,27 @@
+import renderer from "react-test-renderer"
+import { Loader } from "./Loader"
+
+describe('Loader', () => {
+
+  test('Indeterminate Loader component renders correctly', () => {
+    const component = renderer.create(
+      <Loader variant="indeterminate" />
+    )
+
+    const tree = component.toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('Determinate Loader component renders correctly', () => {
+
+    const component = renderer.create(
+      <Loader variant={'determinate'} value={17} />
+    )
+
+    const tree = component.toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+})

src/components/Loader/Loader.tsx

@@ -0,0 +1,61 @@
+import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { ReactElement } from "react";
+
+type DeterminateLoaderProps = {
+  variant: 'determinate'
+  /** Progress value to display */
+  value: number;
+};
+
+type IndeterminateLoaderProps = {
+  variant: 'indeterminate'
+}
+
+type LoaderProps = DeterminateLoaderProps | IndeterminateLoaderProps;
+
+function CircularProgressWithLabel(
+  props: CircularProgressProps & { value: number },
+) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress variant="determinate" {...props} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="text.secondary"
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * A basic determinate or indeterminate loader
+ */
+export const Loader = (props: LoaderProps) => {
+
+  let progressComponent:ReactElement;
+  if( props.variant == "determinate") {
+    progressComponent = <CircularProgressWithLabel value={props.value}/>
+  } else {
+    progressComponent = <CircularProgress />
+  }
+
+  return (
+    progressComponent
+  );
+};

src/components/Loader/index.ts

@@ -0,0 +1 @@
+export * from "./Loader";

src/components/Typography/Typography.scss

@@ -1,5 +1,3 @@
-@use "@nasapds/wds/css/typography.css";
-
 .MuiTypography-root.MuiTypography-body1{
    &.wds-typography-display-bold-120{
       @extend .wds-typography-display-bold-120;

src/index.ts

@@ -6,6 +6,7 @@ export * from "./components/FeaturedLinkListItem";
 export * from "./components/Header";
 export * from "./components/HelloWorld";
 export * from "./components/Icons";
+export * from "./components/Loader";
 export * from "./components/Pagination";
 export * from "./components/Tag";
 export * from "./components/TextField";