@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/dist/useUniqueAlphabeticalId.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { useMemo } from "react";
 import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId.js";
 export const useUniqueAlphabeticalId = id => {

package/dist/useUniqueAlphabeticalId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueAlphabeticalId.js","names":["useMemo","createUniqueAlphabeticalId","useUniqueAlphabeticalId","id","uniqueAlphabeticalId"],"sources":["../src/useUniqueAlphabeticalId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueAlphabeticalId } from \"./createUniqueAlphabeticalId\";\n\nexport const useUniqueAlphabeticalId = (id?: string) => {\n  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);\n\n  return id ?? uniqueAlphabeticalId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,0B;AAET,OAAO,MAAMC,uBAAuB,GAAIC,EAAD,IAAiB;EACtD,MAAMC,oBAAoB,GAAGJ,OAAO,CAAC,MAAMC,0BAA0B,EAAjC,EAAqC,EAArC,CAApC;EAEA,OAAOE,EAAE,IAAIC,oBAAb;AACD,CAJM"}
+{"version":3,"file":"useUniqueAlphabeticalId.js","names":["useMemo","createUniqueAlphabeticalId","useUniqueAlphabeticalId","id","uniqueAlphabeticalId"],"sources":["../src/useUniqueAlphabeticalId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueAlphabeticalId } from \"./createUniqueAlphabeticalId\";\n\nexport const useUniqueAlphabeticalId = (id?: string) => {\n  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);\n\n  return id ?? uniqueAlphabeticalId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAAC,SAEvBC,0BAA0B;AAEnC,OAAO,MAAMC,uBAAuB,GAAIC,EAAW,IAAK;EACtD,MAAMC,oBAAoB,GAAGJ,OAAO,CAAC,MAAMC,0BAA0B,CAAC,CAAC,EAAE,EAAE,CAAC;EAE5E,OAAOE,EAAE,IAAIC,oBAAoB;AACnC,CAAC"}

package/dist/useUniqueId.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { useMemo } from "react";
 import { createUniqueId } from "./createUniqueId.js";
 export const useUniqueId = id => {

package/dist/useUniqueId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/useUniqueId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueId } from \"./createUniqueId\";\n\nexport const useUniqueId = (id?: string) => {\n  const uniqueId = useMemo(() => createUniqueId(), []);\n\n  return id ?? uniqueId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,c;AAET,OAAO,MAAMC,WAAW,GAAIC,EAAD,IAAiB;EAC1C,MAAMC,QAAQ,GAAGJ,OAAO,CAAC,MAAMC,cAAc,EAArB,EAAyB,EAAzB,CAAxB;EAEA,OAAOE,EAAE,IAAIC,QAAb;AACD,CAJM"}
+{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/useUniqueId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueId } from \"./createUniqueId\";\n\nexport const useUniqueId = (id?: string) => {\n  const uniqueId = useMemo(() => createUniqueId(), []);\n\n  return id ?? uniqueId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAAC,SAEvBC,cAAc;AAEvB,OAAO,MAAMC,WAAW,GAAIC,EAAW,IAAK;EAC1C,MAAMC,QAAQ,GAAGJ,OAAO,CAAC,MAAMC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC;EAEpD,OAAOE,EAAE,IAAIC,QAAQ;AACvB,CAAC"}

package/i18n.config.json

@@ -0,0 +1,7 @@
+{
+  "resourceFile": "odyssey-react-mui.properties",
+  "resourceFilePath": "packages/odyssey-react-mui/src/properties",
+  "translationsFilePath": "packages/odyssey-react-mui/src/properties/translations",
+  "commitPrefix": "chore(odyssey-react-mui): ",
+  "reviewers": ["okta/eng-globalizationcore", "okta/design-system"]
+}

package/package.json

@@ -1,19 +1,33 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.23.0",
+  "version": "1.0.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
   "sideEffects": false,
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/index.js"
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/src/index.d.ts"
+      ],
+      "icons": [
+        "./dist/src/icons.generated/index.d.ts"
+      ],
+      "labs": [
+        "./dist/src/labs/index.d.ts"
+      ]
     }
   },
+  "exports": {
+    "./icons": "./dist/icons.generated/index.js",
+    "./labs": "./dist/labs/index.js",
+    ".": "./dist/index.js",
+    "./README.md": "./README.md"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/okta/odyssey",
@@ -23,9 +37,15 @@
     "@emotion/cache": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.117",
-    "@mui/material": "^5.11.6",
+    "@mui/material": "^5.12.3",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.23.0"
+    "@mui/x-date-pickers": "^5.0.15",
+    "@okta/odyssey-design-tokens": "1.0.0",
+    "date-fns": "^2.30.0",
+    "i18next": "^22.4.15",
+    "material-react-table": "^1.14.0",
+    "react-i18next": "^12.2.2",
+    "ts-node": "^10.9.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +53,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "46e7484fa0317496e65b9ba8b3f930956b0470e9"
+  "gitHead": "7b68d42ee9f74c21b72eb47bdfdda1df31388e87"
 }

package/scripts/generateIconsIndex.ts

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { readdir, writeFile } from "node:fs/promises";
+import { extname, basename } from "node:path";
+
+const currentYear = new Date().getFullYear();
+
+export const headerComment = `/*!
+ * Copyright (c) ${currentYear}-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+`;
+
+readdir("./src/icons.generated")
+  .then((filenames) =>
+    headerComment.concat(
+      filenames
+        .map((filename) => basename(filename, extname(filename)))
+        .map((filename) => `export * from "./${filename}";`)
+        .join("\n")
+    )
+  )
+  .then((content) => writeFile("./src/icons.generated/index.ts", content))
+  .then(() => {
+    console.info("Completed writing index file.");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

package/scripts/properties-to-ts.js

@@ -0,0 +1,96 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Part of this has been copied over from @okta/ui-build-tools' own internal node script
+// https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
+
+import { resolve, join, basename, extname } from "node:path";
+import {
+  readFileSync,
+  writeFileSync,
+  rmSync,
+  existsSync,
+  mkdirSync,
+} from "node:fs";
+import properties from "properties";
+import readdir from "recursive-readdir";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+const convert = (baseFiles, propertiesTargetDir) => {
+  for (const src of baseFiles) {
+    const filename = basename(src);
+    const extension = extname(src);
+    const source = `${readFileSync(src)}`;
+
+    properties.parse(source, function (error, obj) {
+      if (error) {
+        return console.error(error);
+      }
+
+      const targetFile = join(
+        propertiesTargetDir,
+        filename.replace(extension, ".ts")
+      );
+      writeFileSync(
+        targetFile,
+        `export const translation = ${JSON.stringify(obj)};`
+      );
+    });
+  }
+};
+
+async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
+  const sourceDirectory = resolve(resourcePath);
+  const propertiesTargetDirectory = resolve(targetJsonPath);
+
+  if (!existsSync(sourceDirectory)) {
+    mkdirSync(sourceDirectory);
+  }
+  if (existsSync(propertiesTargetDirectory)) {
+    rmSync(propertiesTargetDirectory, { recursive: true, force: true });
+  }
+  mkdirSync(propertiesTargetDirectory);
+
+  let baseFiles = await readdir(sourceDirectory);
+  convert(baseFiles, propertiesTargetDirectory);
+}
+
+yargs(hideBin(process.argv))
+  .scriptName("properties-to-ts")
+  .usage("$0 <cmd> [args]")
+  .command(
+    "bundle",
+    "Converts properties file to ts",
+    (yargs) => {
+      yargs
+        .positional("resourcePath", {
+          type: "string",
+          default: "src/properties",
+          describe: "A relative path to resources based on cwd.",
+        })
+        .positional("targetJsonPath", {
+          type: "string",
+          default: "src/properties/ts",
+          describe: "A relative path to directory for ts file output",
+        });
+    },
+    function (argv) {
+      const { resourcePath, targetJsonPath } = argv;
+
+      convertPropertiesToJson({
+        resourcePath,
+        targetJsonPath,
+      });
+    }
+  )
+  .help().argv;

package/src/@types/i18next.d.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import "i18next";
+import { translation as en } from "../properties/ts/odyssey-react-mui";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: {
+      translations: typeof en;
+    };
+  }
+}

package/src/Autocomplete.tsx

@@ -24,56 +24,89 @@ export type AutocompleteProps<
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * Enables multiple choice selection
+   */
   hasMultipleChoices?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["multiple"];
+  /**
+   * The hint text for the Autocomplete input
+   */
   hint?: string;
+  /**
+   * Allows the input of custom values
+   */
   isCustomValueAllowed?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["freeSolo"];
+  /**
+   * Disables the Autocomplete input
+   */
   isDisabled?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["disabled"];
+  /**
+   * Displays a loading indicator
+   */
   isLoading?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["loading"];
+  /**
+   * Makes the Autocomplete input read-only
+   */
   isReadOnly?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["readOnly"];
+  /**
+   * The label text for the autocomplete input
+   */
   label: string;
+  /**
+   * Callback fired when the value of the autocomplete input changes
+   */
   onChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onChange"];
+  /**
+   * Callback fired when the input value of the autocomplete input changes
+   */
   onInputChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onInputChange"];
+  /**
+   * The options for the Autocomplete input
+   */
   options: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["options"];
+  /**
+   * The value of the Autocomplete input
+   */
   value?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
@@ -87,8 +120,8 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
-  isCustomValueAllowed,
   hasMultipleChoices,
+  isCustomValueAllowed,
   isDisabled,
   isLoading,
   isReadOnly,
@@ -122,6 +155,8 @@ const Autocomplete = <
 
   return (
     <MuiAutocomplete
+      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
+      aria-disabled={isDisabled}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}

package/src/Banner.tsx

@@ -10,9 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor, AlertProps } from "@mui/material";
+import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
+import { Link } from "./Link";
+import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
-import { Alert, Link, ScreenReaderText } from "./";
+import { useTranslation } from "react-i18next";
+
+export const bannerRoleValues = ["status", "alert"] as const;
+export const bannerSeverityValues: AlertColor[] = [
+  "success",
+  "info",
+  "warning",
+  "error",
+];
 
 export type BannerProps = {
   /**
@@ -35,11 +45,11 @@ export type BannerProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof bannerRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof bannerSeverityValues)[number];
   /**
    * The text content of the alert
    */
@@ -53,18 +63,23 @@ const Banner = ({
   role,
   severity,
   text,
-}: BannerProps) => (
-  <Alert onClose={onClose} role={role} severity={severity} variant="banner">
-    <ScreenReaderText>{severity}:</ScreenReaderText>
-    {text}
-    {linkUrl && (
-      <Link href={linkUrl} variant="monochrome">
-        {linkText}
-      </Link>
-    )}
-  </Alert>
-);
+}: BannerProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert onClose={onClose} role={role} severity={severity} variant="banner">
+      <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
+      <AlertTitle>{text}</AlertTitle>
+      {linkUrl && (
+        <Link href={linkUrl} variant="monochrome">
+          {linkText}
+        </Link>
+      )}
+    </Alert>
+  );
+};
 
 const MemoizedBanner = memo(Banner);
+MemoizedBanner.displayName = "Banner";
 
 export { MemoizedBanner as Banner };

package/src/Box.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
+import { ReactNode, forwardRef } from "react";
+
+export type BoxProps = {
+  children?: ReactNode;
+  component?: MuiBoxProps["component"];
+  sx?: MuiBoxProps["sx"];
+};
+
+export const Box = forwardRef<HTMLElement, BoxProps>(
+  ({ children, component, sx }, ref) => (
+    <MuiBox ref={ref} children={children} component={component} sx={sx} />
+  )
+);
+
+Box.displayName = "Box";

package/src/Button.tsx

@@ -12,46 +12,121 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { memo, ReactElement, useContext, useMemo } from "react";
+import { memo, ReactElement, useCallback } from "react";
 
-import { Icon } from "./Icon";
-import { MuiPropsContext } from "./MuiPropsContext";
+import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 
+export const buttonSizeValues = ["small", "medium", "large"] as const;
+export const buttonTypeValues = ["button", "submit", "reset"] as const;
+export const buttonVariantValues = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "danger",
+  "floating",
+] as const;
+
 export type ButtonProps = {
-  endIcon?: ReactElement<typeof Icon>;
+  /**
+   * The ARIA label for the Button
+   */
+  ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Button
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The ID of the element that describes the Button
+   */
+  ariaDescribedBy?: string;
+  /**
+   * The icon element to display at the end of the Button
+   */
+  endIcon?: ReactElement;
+  /**
+   * The ID of the Button
+   */
   id?: string;
+  /**
+   * Determines whether the Button is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * Determines whether the Button should take up the full available width
+   */
   isFullWidth?: boolean;
+  /**
+   * The text content of the Button
+   */
+  label?: string;
+  /**
+   * The click event handler for the Button
+   */
   onClick?: MuiButtonProps["onClick"];
-  size?: MuiButtonProps["size"];
-  startIcon?: ReactElement<typeof Icon>;
-  text?: string;
   /**
-   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   * The size of the button
+   */
+  size?: (typeof buttonSizeValues)[number];
+  /**
+   * The icon element to display at the start of the Button
+   */
+  startIcon?: ReactElement;
+  /**
+   * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
-  variant?: "primary" | "secondary" | "danger" | "floating";
-};
+  /**
+   * The type of the HTML button element
+   */
+  type?: (typeof buttonTypeValues)[number];
+  /**
+   * The variant of the Button
+   */
+  variant: (typeof buttonVariantValues)[number];
+} & (
+  | {
+      endIcon?: ReactElement;
+      label: string;
+      startIcon?: ReactElement;
+    }
+  | {
+      endIcon?: ReactElement;
+      label?: "" | undefined;
+      startIcon: ReactElement;
+    }
+  | {
+      endIcon: ReactElement;
+      label?: "" | undefined;
+      startIcon?: ReactElement;
+    }
+);
 
 const Button = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
   endIcon,
   id,
   isDisabled,
   isFullWidth,
+  label = "",
   onClick,
   size = "medium",
   startIcon,
-  text,
   tooltipText,
+  type = "button",
   variant,
 }: ButtonProps) => {
-  const muiProps = useContext(MuiPropsContext);
+  const muiProps = useMuiProps();
 
-  const button = useMemo(
-    () => (
+  const renderButton = useCallback(
+    (muiProps) => (
       <MuiButton
         {...muiProps}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         disabled={isDisabled}
         endIcon={endIcon}
         fullWidth={isFullWidth}
@@ -59,21 +134,25 @@ const Button = ({
         onClick={onClick}
         size={size}
         startIcon={startIcon}
+        type={type}
         variant={variant}
       >
-        {text}
+        {label}
       </MuiButton>
     ),
     [
+      ariaDescribedBy,
+      ariaLabel,
+      ariaLabelledBy,
       endIcon,
       id,
       isDisabled,
       isFullWidth,
-      muiProps,
+      label,
       onClick,
       size,
       startIcon,
-      text,
+      type,
       variant,
     ]
   );
@@ -82,14 +161,16 @@ const Button = ({
     <>
       {tooltipText && (
         <Tooltip ariaType="description" placement="top" text={tooltipText}>
-          {button}
+          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
         </Tooltip>
       )}
-      {!tooltipText && button}
+
+      {!tooltipText && renderButton(muiProps)}
     </>
   );
 };
 
 const MemoizedButton = memo(Button);
+MemoizedButton.displayName = "Button";
 
 export { MemoizedButton as Button };