0.0.6 • Published 4 years ago
@udes-ui/core v0.0.6
@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>