Feat; add spinner component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.192",
+  "version": "0.0.193",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",
@@ -139,4 +139,4 @@
     "url": "https://github.com/GovConnex/UI/issues"
   },
   "homepage": "https://github.com/GovConnex/UI#readme"
-}
+}

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import Box from "../Box";
+import styled, {keyframes} from "styled-components";
+import {customStyles} from "../../core/styleFunctions";
+
+const spinner = keyframes`
+  to {transform: rotate(360deg);}
+`;
+
+const StyledSpinner = styled.div<{
+  variant: SpinnerVariant;
+  subtype: SpinnerSubtype;
+  isAbsolute: boolean;
+  isOffset: boolean;
+}>`
+  box-sizing: border-box;
+  ${({isAbsolute}) =>
+    isAbsolute &&
+    `
+  position: absolute;
+  top: 50%;
+  left: 50%;`}
+  width: 16px;
+  height: 16px;
+  ${({isOffset}) =>
+    isOffset &&
+    `
+  margin-top: -8px;
+  margin-left: -8px;
+  `}
+  border-radius: 50%;
+  border: 2px solid transparent;
+  animation: ${spinner} 0.6s linear infinite;
+
+  ${({theme, variant}) =>
+    variant === "primary" &&
+    `
+      border-top-color: ${theme.core.content.contentInversePrimary};
+    `}
+
+  ${({theme, subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "default" &&
+    `
+      border-top-color: ${theme.core.content.contentPrimary}
+    `}
+
+    ${({theme, subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "success" &&
+    `
+      border-top-color: ${theme.extended.support.successDark}
+    `}
+
+    ${({theme, subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "error" &&
+    `
+      border-top-color: ${theme.extended.support.errorDark}
+    `}
+
+    ${({theme, subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "warning" &&
+    `
+      border-top-color: ${theme.extended.support.warningDark}
+    `}
+
+    ${({theme, subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "info" &&
+    `
+      border-top-color: ${theme.extended.support.infoDark}
+    `}
+
+    ${({theme, subtype, variant}) =>
+    variant === "primary" &&
+    subtype === "inverse" &&
+    `
+      border-top-color: ${theme.core.content.contentPrimary};
+    `}
+
+    ${({subtype, variant}) =>
+    (variant === "secondary" || variant === "tertiary") &&
+    subtype === "inverse" &&
+    `
+      border-top-color: white;
+    `}
+
+    ${({theme, variant}) =>
+    variant === "danger" &&
+    `
+      border-top-color: ${theme.extended.state.secondaryBase}
+    `}
+`;
+
+export type SpinnerVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "text"
+  | "danger"
+  | "secondaryDanger";
+export type SpinnerSubtype =
+  | "default"
+  | "info"
+  | "success"
+  | "error"
+  | "warning"
+  | "inverse";
+
+export function Spinner({
+  variant = "primary",
+  subtype = "inverse",
+  isAbsolute = false,
+  isOffset = false,
+  cs,
+  children,
+}: {
+  variant?: SpinnerVariant;
+  subtype?: SpinnerSubtype;
+  isAbsolute?: boolean;
+  isOffset?: boolean;
+  cs?: customStyles;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Box
+      cs={
+        {
+          display: "flex",
+          flexDirection: "row",
+          gap: "spacing.xs",
+          alignItems: "center",
+          ...cs,
+        } as customStyles
+      }
+    >
+      <Box>
+        <StyledSpinner
+          variant={variant}
+          subtype={subtype}
+          isAbsolute={isAbsolute}
+          isOffset={isOffset}
+        />
+      </Box>
+      {children}
+    </Box>
+  );
+}

src/components/index.ts

@@ -35,6 +35,7 @@ export {default as Button} from "./Button";
 export {default as Menu, ButtonMenu} from "./Menu";
 export {default as GridBox} from "./GridBox";
 export {default as Tabs} from "./Tabs";
+export {Spinner} from "./Spinner/Spinner";
 export * from "./MenuList";
 export * from "./List";
 export * from "./StackedList";