@udes-ui/core

@udes-ui/core

Core UDES React components, built using Material UI.

Reference

createModifiedTheme

createModifiedTheme(Theme, ThemeOptions) => Theme

Overrides the given Material UI Theme according to the provided ThemeOptions and returns the modified Theme.

See createMuiTheme for the format of ThemeOptions: https://material-ui.com/customization/theming/#api

ThemeProvider

Acts as both a Material UI ThemeProvider and a styled-components ThemeProvider component. This is required to enable other components in this package to work.

Provides the default UDES theme. The theme can be overidden by specifying the theme prop with a theme returned by createModifiedTheme.

Prop Name	Type	Default	Description
theme	Theme?	require("@udes-ui/core").theme	The Material UI theme that child components will use.

<ThemeProvider>...</ThemeProvider>

import { theme } from "@udes-ui/core";

const newTheme = createModifiedTheme(theme, {
  typography: {
    h1: {
      fontSize: "48px"
    }
  }
})

<ThemeProvider theme={theme}>...</ThemeProvider>

Button

A button with an integrated loading spinner, available in primary and secondary variants.

Prop Name	Type	Default	Description
type	"submit" | "reset" | "button"	"button"	Form behaviour.
"data-testid"	string?	-	The button's data-testid, for use with DOM / React Testing Library.
name	string?	-	Name for form data.
value	string?	-	Value for form data.
variant	"primary" | "secondary"	"primary"	UDES button variant to use.
fullWidth	boolean	false	If true, the button will take up the full width of its container.
disabled	boolean	false	-
loading	boolean	false	-
onClick	(e: React.MouseEvent<HTMLButtonElement>) => void	-	-

<Button onClick={() => doConfirm()}>Confirm</Button>

VerticalLayout

Stacks all children vertically, with spacing between them.

Prop Name	Type	Default	Description
spacing	number?	2	The spacing to use, as a multiple of the Material UI theme's base spacing.

<VerticalLayout>
  <Button>Accept</Button>
  <Button>Cancel</Button>
</VerticalLayout>