@okta/odyssey-react-mui 0.14.1

package/src/components/Link/Link.tsx

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2022-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 React, { forwardRef, ReactElement } from "react";
+
+import { Link as MuiLink, SvgIcon } from "@mui/material";
+import type { LinkProps as MuiLinkProps } from "@mui/material";
+
+export interface LinkProps extends MuiLinkProps {
+  icon?: ReactElement;
+}
+
+export const Link = forwardRef<HTMLLinkElement | HTMLAnchorElement, LinkProps>(
+  (props) => {
+    const { icon, children, target } = props;
+    return (
+      <MuiLink {...props}>
+        <span className="Link-icon">{icon}</span>
+        {children}
+        {target === "_blank" && (
+          <span className="Link-indicator" role="presentation">
+            <SvgIcon viewBox="0 0 16 16">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z"
+                fill="currentColor"
+              />
+            </SvgIcon>
+          </span>
+        )}
+      </MuiLink>
+    );
+  }
+);

package/src/components/Link/index.tsx

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export * from "./Link";

package/src/components/PasswordInput/PasswordInput.test.tsx

@@ -0,0 +1,51 @@
+/*!
+ * Copyright (c) 2022-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 React from "react";
+import { render, screen } from "@testing-library/react";
+import { a11yCheck } from "../../../test";
+import { PasswordInput } from ".";
+
+const label = "Password";
+const tooltipOnLabel = "Show password";
+const tooltipOffLabel = "Hide password";
+
+describe("PasswordInput", () => {
+  it("renders into the document", () => {
+    render(<PasswordInput label={label} tooltipLabel={tooltipOnLabel} />);
+    expect(screen.getByLabelText(label)).toBeVisible();
+  });
+
+  it("has a button that changes the type when clicked", () => {
+    const tooltipLabel = (isHidden: boolean) => {
+      return isHidden ? tooltipOnLabel : tooltipOffLabel;
+    };
+    render(
+      <PasswordInput
+        label={label}
+        tooltipLabel={tooltipLabel}
+        defaultValue="Imma password"
+      />
+    );
+    const inputElement = screen.getByLabelText(label);
+    expect(inputElement).toHaveValue("Imma password");
+    expect(inputElement).toHaveAttribute("type", "password");
+    const eyeButton = screen.getByRole("button");
+    expect(eyeButton).toBeInTheDocument();
+    eyeButton.click();
+    expect(inputElement).toHaveAttribute("type", "text");
+  });
+
+  a11yCheck(() =>
+    render(<PasswordInput label="input label" tooltipLabel="tooltip label" />)
+  );
+});

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,111 @@
+/*!
+ * Copyright (c) 2022-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 React, { forwardRef, useState, useMemo } from "react";
+import type { Ref, ChangeEvent, MouseEvent } from "react";
+import type { OutlinedInputProps, TooltipProps } from "@mui/material";
+import {
+  Tooltip,
+  IconButton,
+  Box,
+  InputLabel,
+  OutlinedInput,
+  InputAdornment,
+} from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { useOid } from "../../utils";
+
+interface State {
+  password: string;
+  showPassword: boolean;
+}
+
+export interface PasswordInputProps
+  extends Omit<OutlinedInputProps, "type" | "label" | "defaultValue" | "ref"> {
+  ref?: Ref<HTMLInputElement>;
+  defaultValue?: string;
+  label: string;
+  tooltipLabel?:
+    | TooltipProps["title"]
+    | ((isHidden: boolean) => TooltipProps["title"]);
+}
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  (props, ref) => {
+    const {
+      tooltipLabel,
+      id,
+      label,
+      defaultValue: password = "",
+      inputProps,
+      ...rest
+    } = props;
+
+    const [values, setValues] = useState<State>({
+      password,
+      showPassword: false,
+    });
+
+    const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setValues({ ...values, password: event.target.value });
+      props.onChange?.(event);
+    };
+
+    const handleClickShowPassword = () => {
+      setValues({
+        ...values,
+        showPassword: !values.showPassword,
+      });
+    };
+
+    const handleMouseDownPassword = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+    };
+
+    const tooltipTitle = useMemo(() => {
+      return typeof tooltipLabel === "function"
+        ? tooltipLabel(values.showPassword === false)
+        : tooltipLabel;
+    }, [values, tooltipLabel]);
+
+    const oid = useOid(id);
+
+    return (
+      <Box>
+        <InputLabel htmlFor={oid}>{label}</InputLabel>
+        <OutlinedInput
+          {...rest}
+          id={oid}
+          inputProps={inputProps}
+          inputRef={ref}
+          onChange={handlePasswordChange}
+          type={values.showPassword ? "text" : "password"}
+          value={values.password}
+          endAdornment={
+            <InputAdornment position="end">
+              <Tooltip title={tooltipTitle}>
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          }
+        />
+      </Box>
+    );
+  }
+);

package/src/components/PasswordInput/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export * from "./PasswordInput";

package/src/components/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export * from "./PasswordInput";
+export * from "./Link";

package/src/index.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export * from "./components";
+export * from "./themes";

package/src/themes/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export * from "./odyssey";

package/src/themes/odyssey/components.ts

@@ -0,0 +1,321 @@
+/*!
+ * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
+
+export const components: ThemeOptions["components"] = {
+  MuiCssBaseline: {
+    styleOverrides: {
+      boxSizing: "border-box",
+    },
+  },
+  MuiCircularProgress: {
+    defaultProps: {
+      size: "1.14285714rem",
+      thickness: 8,
+      color: "primary",
+      disableShrink: false,
+      variant: "indeterminate",
+    },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        ...(ownerState.color !== "inherit" && {
+          color: "#00297a",
+        }),
+      }),
+      circle: ({ ownerState }) => ({
+        ...(ownerState.variant === "indeterminate" && {
+          strokeDasharray: "160%, 360%",
+        }),
+      }),
+    },
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: {
+        color: "#1d1d21",
+        lineHeight: "1.42857143",
+        fontSize: "1rem",
+        fontWeight: 600,
+      },
+    },
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        lineHeight: "1.14285714",
+      },
+      input: {
+        boxSizing: "border-box",
+        height: "auto",
+      },
+    },
+  },
+  MuiTypography: {
+    defaultProps: {
+      fontFamily:
+        "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+    },
+    styleOverrides: {
+      paragraph: {
+        marginBottom: "1.14285714rem",
+      },
+    },
+  },
+  MuiLink: {
+    styleOverrides: {
+      root: {
+        color: "#1662dd",
+        textDecoration: "none",
+
+        "&:hover": {
+          color: "#1662dd",
+          textDecoration: "underline",
+        },
+
+        "&:focus-visible": {
+          outlineColor: "#1662dd",
+          outlineOffset: "2px",
+          outlineStyle: "solid",
+          outlineWidth: "1px",
+        },
+
+        "&:visited": {
+          color: "#1662dd",
+        },
+
+        ".Link-indicator, .Link-icon": {
+          display: "inline-block",
+          height: "1em",
+          lineHeight: 1,
+        },
+
+        ".Link-indicator": {
+          marginInlineStart: "0.57142857rem",
+        },
+
+        ".Link-icon": {
+          marginInlineEnd: "0.57142857rem",
+        },
+        svg: {
+          fontSize: "1rem",
+          height: "1em",
+          position: "relative",
+          top: "-0.0625em",
+          verticalAlign: "middle",
+          width: "1em",
+        },
+      },
+    },
+    variants: [
+      {
+        props: { variant: "monochrome" },
+        style: {
+          color: "#1d1d21",
+          textDecoration: "underline",
+
+          "&:hover": {
+            color: "#6e6e78",
+          },
+
+          "&:focus-visible": {
+            outlineColor: "#1662dd",
+            outlineOffset: "2px",
+            outlineStyle: "solid",
+            outlineWidth: "1px",
+          },
+
+          "&:visited": {
+            color: "#1d1d21",
+          },
+        },
+      },
+    ],
+  },
+  MuiButtonBase: {
+    defaultProps: {
+      disableRipple: true,
+    },
+  },
+  MuiButton: {
+    defaultProps: {
+      disableElevation: true,
+    },
+    variants: [
+      {
+        props: { variant: "primary" },
+        style: {
+          fontWeight: 600,
+          color: "#ffffff",
+          borderColor: "transparent",
+          backgroundColor: "#1662dd",
+
+          "&:hover, &:focus-visible": {
+            backgroundColor: "#00297a",
+          },
+
+          "&:active": {
+            backgroundColor: "#1662dd",
+          },
+
+          "&:disabled": {
+            color: "#ffffff",
+            backgroundColor: "#a7b5ec",
+          },
+        },
+      },
+      {
+        props: { variant: "secondary" },
+        style: {
+          backgroundColor: "#f5f5f6",
+          borderColor: "#d7d7dc",
+          color: "#1d1d21",
+          "&:hover": {
+            background: "#f2f5ff",
+            borderColor: "#a7b5ec",
+            color: "#1662dd",
+          },
+
+          "&:focus-visible": {
+            backgroundColor: "#1662dd",
+            color: "#1662dd",
+          },
+
+          "&:active": {
+            borderColor: "#1662dd",
+          },
+
+          "&:disabled": {
+            borderColor: "#ebebed",
+            backgroundColor: "#ebebed",
+            color: "#8c8c96",
+          },
+        },
+      },
+      {
+        props: { variant: "danger" },
+        style: {
+          backgroundColor: "#da372c",
+          color: "#ffffff",
+          "&:hover": {
+            borderColor: "transparent",
+            backgroundColor: "#640019",
+          },
+
+          "&:focus-visible": {
+            outlineColor: "#f88c90",
+            backgroundColor: "#640019",
+          },
+
+          "&:active": {
+            borderColor: "transparent",
+            backgroundColor: "#da372c",
+          },
+
+          "&:disabled": {
+            color: "#ffffff",
+            borderColor: "#f88c90",
+            backgroundColor: "#f88c90",
+          },
+        },
+      },
+      {
+        props: { variant: "floating" },
+        style: {
+          backgroundColor: "#ffffff",
+          color: "#1d1d21",
+          borderColor: "transparent",
+
+          "&:hover, &:focus-visible": {
+            backgroundColor: "rgba(29, 29, 33, 0.1)",
+            borderColor: "transparent",
+          },
+          "&:active": {
+            backgroundColor: "rgba(29, 29, 33, 0.2)",
+            borderColor: "transparent",
+          },
+          "&:disabled": {
+            backgroundColor: "rgba(235, 235, 237, 0.6)",
+            color: "#6e6e78",
+            borderColor: "transparent",
+          },
+        },
+      },
+      {
+        props: { size: "s" },
+        style: {
+          paddingBlock: "calc(0.57142857rem - 1px)",
+          paddingInline: "calc(0.85714286rem - - 1px)",
+          fontSize: "1rem",
+        },
+      },
+      {
+        props: { size: "l" },
+        style: {
+          paddingBlock: "calc(1.14285714rem - 1px)",
+          paddingInline: "calc(1.14285714rem - 1px)",
+        },
+      },
+      {
+        props: { fullWidth: true },
+        style: {
+          display: "block",
+          width: "100%",
+          marginBlock: "0",
+          marginInline: "0",
+
+          "&:not(:last-child)": {
+            marginBlockEnd: "1.14285714rem",
+          },
+        },
+      },
+    ],
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        ...ownerState,
+        fontWeight: 600,
+        paddingBlock: "0.85714286rem",
+        paddingInline: "0.85714286rem",
+        display: "inline-block",
+        position: "relative",
+        marginBlock: "0",
+        marginInline: "0",
+        transitionProperty:
+          "color, background-color, border-color, outline-offset, outline-color",
+        transitionDuration: "100ms",
+        transitionTimingFunction: "linear",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        outlineColor: "transparent",
+        outlineOffset: "0",
+        fontSize: "1rem",
+        lineHeight: "1.14285714",
+        whiteSpace: "nowrap",
+
+        "& + &": {
+          marginInlineStart: "0.57142857rem",
+        },
+
+        "&:focus-visible": {
+          outlineOffset: "2px",
+          outlineStyle: "solid",
+          outlineWidth: "2px",
+        },
+
+        "&:disabled": {
+          cursor: "not-allowed",
+          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from 'none'
+        },
+      }),
+    },
+  },
+};

package/src/themes/odyssey/components.types.ts

@@ -0,0 +1,78 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+declare module "@mui/material/Link" {
+  interface LinkPropsVariantOverrides {
+    default: true;
+    monochrome: true;
+    body1: false;
+    body2: false;
+    button: false;
+    caption: false;
+    h1: false;
+    h2: false;
+    h3: false;
+    h4: false;
+    h5: false;
+    h6: false;
+    inherit: false;
+    overline: false;
+    subtitle1: false;
+    subtitle2: false;
+  }
+
+  interface LinkPropsUnderlineOverrides {
+    none: false;
+    hover: false;
+    always: false;
+  }
+
+  interface LinkPropsColorOverrides {
+    inherit: false;
+    primary: false;
+    secondary: false;
+    error: false;
+    info: false;
+    warning: false;
+    success: false;
+  }
+}
+declare module "@mui/material/Button" {
+  interface ButtonPropsVariantOverrides {
+    floating: true;
+    primary: true;
+    secondary: true;
+    danger: true;
+    text: false;
+    contained: false;
+    outlined: false;
+  }
+  interface ButtonPropsSizeOverrides {
+    s: true;
+    m: true;
+    l: true;
+    small: false;
+    medium: false;
+    large: false;
+  }
+  interface ButtonPropsColorOverrides {
+    inherit: false;
+    primary: false;
+    secondary: false;
+    error: false;
+    info: false;
+    warning: false;
+    success: false;
+  }
+}
+
+export {};

package/src/themes/odyssey/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+export { theme as odysseyTheme } from "./theme";