add a demonstration of custom components
Change-Id: Ide51413f1cf66b8275f130f1478fa02b55923a2f
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index 0a5ce9e..6610d37 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -14,7 +14,7 @@
export const UsernameInput = ({infoButtonProps, ...props}) => {
const [isSelected, setIsSelected] = React.useState(false);
- const [input, setInput] = React.useState();
+ const [input, setInput] = React.useState(props.defaultValue);
const [startAdornment, setStartAdornment] = React.useState()
const onChange = React.useCallback((event) => {
@@ -58,7 +58,7 @@
export const PasswordInput = ({infoButtonProps, ...props}) => {
const [showPassword, setShowPassword] = React.useState(false);
const [isSelected, setIsSelected] = React.useState(false);
- const [input, setInput] = React.useState();
+ const [input, setInput] = React.useState(props.defaultValue);
const [startAdornment, setStartAdornment] = React.useState()
const toggleShowPassword = () => {
@@ -113,7 +113,7 @@
export const NickNameInput = (props) => {
const [isSelected, setIsSelected] = React.useState(false);
- const [input, setInput] = React.useState();
+ const [input, setInput] = React.useState(props.defaultValue);
const [startAdornmentVisibility, setStartAdornmentVisibility] = React.useState()
const onChange = React.useCallback((event) => {
@@ -143,7 +143,7 @@
export const RegularInput = (props) => {
const [isSelected, setIsSelected] = React.useState(false);
- const [input, setInput] = React.useState();
+ const [input, setInput] = React.useState(props.defaultValue);
const [startAdornmentVisibility, setStartAdornmentVisibility] = React.useState()
const [endAdornmentVisibility, setEndAdornmentVisibility] = React.useState()
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
new file mode 100644
index 0000000..7f4e0f3
--- /dev/null
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -0,0 +1,60 @@
+import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
+import { CancelButton, EditButton, UploadButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
+import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
+import defaultTheme from './default'
+
+export const ThemeDemonstrator = () => {
+ return (
+ <ThemeProvider theme={defaultTheme}>
+ <Stack spacing="5px">
+ <Stack>
+ <Typography variant="h1">Exemple de titre H1</Typography>
+ <Typography variant="h2">Exemple de titre H2</Typography>
+ <Typography variant="h3">Exemple de titre H3</Typography>
+ <Typography variant="h4">Exemple de titre H4</Typography>
+ <Typography variant="h5">Exemple de titre H5</Typography>
+ <Typography variant="body1">Texte courant principal</Typography>
+ <Typography variant="body2">Texte courant secondaire</Typography>
+ <Typography variant="caption">Légendes et annotations</Typography>
+ </Stack>
+ <Stack spacing="5px" padding="5px" width="300px" >
+ <Button variant="contained">Bouton primaire</Button>
+ <Button variant="outlined">Bouton secondaire</Button>
+ <Button variant="text">Bouton tertiaire</Button>
+ <Button variant="contained" size="small">Bouton liste préférences</Button>
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <CancelButton/>
+ <EditButton/>
+ <UploadButton/>
+ <TakePictureButton/>
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <InfoButton/>
+ <TipButton/>
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <BackButton/>
+ <CloseButton/>
+ </Stack>
+ <Stack>
+ <Switch/>
+ </Stack>
+ <Stack padding="5px" width="300px" >
+ <UsernameInput/>
+ <UsernameInput
+ error
+ defaultValue="Cyrille"
+ />
+ <PasswordInput/>
+ <PasswordInput
+ error
+ defaultValue="SavoirFaireLinux"
+ />
+ <NickNameInput/>
+ <RegularInput/>
+ </Stack>
+ </Stack>
+ </ThemeProvider>
+ )
+}
\ No newline at end of file
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
index 6764097..db10bde 100644
--- a/client/src/themes/default.js
+++ b/client/src/themes/default.js
@@ -16,6 +16,9 @@
},
typography: {
fontFamily: "Ubuntu",
+ allVariants: {
+ color: "black"
+ },
h1: {
fontWeight: 400,
fontSize: "26px",