WIP (#184)

.github/dependabot.yaml

@@ -1,12 +1,22 @@
 version: 2
 updates:
-  # github-actions
   - package-ecosystem: github-actions
     directory: /
     schedule:
       interval: weekly
-      
+    target-branch: "1.x"
   - package-ecosystem: npm
     directory: /
     schedule:
       interval: weekly
+    target-branch: "1.x"
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+    target-branch: "master"
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    target-branch: "master"

gallery/src/components/ButtonExample.tsx

@@ -0,0 +1,51 @@
+import { Autocomplete, Button, Fab, Paper, Popper, Stack, styled, TextField, Typography } from "@mui/material"
+import { useRef, useState } from "react"
+import { ArrowDropDown } from "@mui/icons-material"
+
+const InnerPaper = styled(Paper)({
+	maxWidth: "600px",
+	boxShadow:
+		"0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);",
+})
+
+export const ButtonExample = () => {
+	return (
+		<Paper variant="padded">
+			<Typography variant="h2">Eksempel på knapper</Typography>
+
+			<Typography variant="h3">Primary</Typography>
+
+			<InnerPaper variant="padded">
+				<Button variant="contained">Enabled</Button>
+				&nbsp;
+				<Button variant="contained" disabled>
+					Disabled
+				</Button>
+			</InnerPaper>
+
+			<Typography variant="h3">Secondary</Typography>
+
+			<InnerPaper variant="padded">
+				<Button variant="contained" color="secondary">
+					Enabled
+				</Button>
+				&nbsp;
+				<Button variant="contained" color="secondary" disabled>
+					Disabled
+				</Button>
+			</InnerPaper>
+
+			<Typography variant="h3">Secondary Result</Typography>
+
+			<InnerPaper variant="padded">
+				<Button variant="contained" color="secondaryResult">
+					Enabled
+				</Button>
+				&nbsp;
+				<Button variant="contained" color="secondaryResult" disabled>
+					Disabled
+				</Button>
+			</InnerPaper>
+		</Paper>
+	)
+}

gallery/src/components/Colors.tsx

@@ -53,9 +53,7 @@ const PaletteDisplay = ({ name, path }: { name: string; path: string }) => {
 			<Box display="grid" gridTemplateAreas={{ xs: '"a a" "b c" "d e"', md: '"a a b c" "a a d e"' }}>
 				<ColorDrop path={path} name="Main" big gridArea="a" />
 				<ColorDrop path={path} name="Dark" gridArea="b" />
-				<ColorDrop path={path} name="50p" gridArea="c" />
 				<ColorDrop path={path} name="Light" gridArea="d" />
-				<ColorDrop path={path} name="25p" gridArea="e" />
 			</Box>
 		</Stack>
 	)
@@ -68,9 +66,7 @@ const TextPaletteDisplay = ({}) => {
 			<Box display="grid" gridTemplateAreas={'"a a b c" "a a d e" "a a f g"'}>
 				<ColorDrop path={"text"} name="Primary" big gridArea="a" />
 				<ColorDrop path={"text"} name="Secondary" gridArea="b" />
-				<ColorDrop path={"text"} name="50p" gridArea="c" />
 				<ColorDrop path={"text"} name="Disabled" gridArea="d" />
-				<ColorDrop path={"text"} name="25p" gridArea="e" />
 				<ColorDrop path={"text"} name="White" gridArea="f" />
 			</Box>
 		</Stack>
@@ -86,13 +82,9 @@ const BackgroundPaletteDisplay = ({}) => {
 		<Stack sx={{ maxWidth: { xs: "100%", md: "80%", xl: "60%" } }}>
 			<Typography variant="h4">Backgrounds</Typography>
 			<Stack>
-				<ColorDrop path={"background"} name="Black" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="White" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="Disabled" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="Border" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="Hover" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="Selected" direction={"row"} sx={{ ...dropSx }} />
-				<ColorDrop path={"background"} name="Primary" direction={"row"} sx={{ ...dropSx }} />
+				<ColorDrop path={"background"} name="Default" direction={"row"} sx={{ ...dropSx }} />
+				<ColorDrop path={"background"} name="Content" direction={"row"} sx={{ ...dropSx }} />
+				<ColorDrop path={"background"} name="Assets" direction={"row"} sx={{ ...dropSx }} />
 			</Stack>
 		</Stack>
 	)
@@ -107,26 +99,12 @@ export const Colors = () => {
 				<Grid item xs={6}>
 					<PaletteDisplay name="Primary colors" path="primary" />
 				</Grid>
-				<Grid item xs={6}>
-					<PaletteDisplay name="Info" path="info" />
-				</Grid>
 				<Grid item xs={6}>
 					<PaletteDisplay name="Secondary colors" path="secondary" />
 				</Grid>
-				<Grid item xs={6}>
-					<PaletteDisplay name="Error" path="error" />
-				</Grid>
-
 				<Grid item xs={6}>
 					<TextPaletteDisplay />
 				</Grid>
-
-				<Grid item xs={6}>
-					<PaletteDisplay name="Warning" path="warning" />
-				</Grid>
-				<Grid item xs={6}>
-					<PaletteDisplay name="Success" path="success" />
-				</Grid>
 				<Grid item xs={6}>
 					<BackgroundPaletteDisplay />
 				</Grid>

gallery/src/components/Gallery.tsx

@@ -1,13 +1,17 @@
-import { Container, Stack, Typography } from "@mui/material"
+import { Container, Stack, Switch, Typography } from "@mui/material"
 import { Colors } from "./Colors"
-import { SpacingExample } from "./SpacingExample"
+import { ButtonExample } from "./ButtonExample"
+import { SwitchExample } from "./SwitchExample"
+import { RadioExample } from "./RadioExample"
 
 export const Gallery = () => (
 	<Container maxWidth="xl">
-		<Typography variant="h1">Arkivverket MUI theme</Typography>
+		<Typography variant="h1">Digitalarkivet MUI theme</Typography>
 		<Stack>
 			<Colors />
-			<SpacingExample />
+			<ButtonExample />
+			<SwitchExample />
+			<RadioExample />
 		</Stack>
 	</Container>
 )

gallery/src/components/RadioExample.tsx

@@ -0,0 +1,47 @@
+import {
+	Autocomplete,
+	Button,
+	Fab,
+	FormControl,
+	FormControlLabel,
+	FormLabel,
+	Paper,
+	Popper,
+	Radio,
+	RadioGroup,
+	Stack,
+	styled,
+	Switch,
+	TextField,
+	Typography,
+} from "@mui/material"
+import { useRef, useState } from "react"
+import { ArrowDropDown } from "@mui/icons-material"
+
+const InnerPaper = styled(Paper)({
+	maxWidth: "600px",
+	boxShadow:
+		"0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);",
+})
+
+export const RadioExample = () => {
+	return (
+		<Paper variant="padded">
+			<Typography variant="h2">Eksempel på Radiobuttons</Typography>
+
+			<InnerPaper variant="padded">
+				<FormControl>
+					<RadioGroup
+						aria-labelledby="demo-radio-buttons-group-label"
+						defaultValue="superawesome"
+						name="radio-buttons-group"
+					>
+						<FormControlLabel value="superawesome" control={<Radio />} label="Superawesome" />
+						<FormControlLabel value="awesome" control={<Radio />} label="Awesome" />
+						<FormControlLabel value="other" control={<Radio />} label="Other" disabled />
+					</RadioGroup>
+				</FormControl>
+			</InnerPaper>
+		</Paper>
+	)
+}

gallery/src/components/SwitchExample.tsx

@@ -0,0 +1,23 @@
+import { Autocomplete, Button, Fab, Paper, Popper, Stack, styled, Switch, TextField, Typography } from "@mui/material"
+import { useRef, useState } from "react"
+import { ArrowDropDown } from "@mui/icons-material"
+
+const InnerPaper = styled(Paper)({
+	maxWidth: "600px",
+	boxShadow:
+		"0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);",
+})
+
+export const SwitchExample = () => {
+	return (
+		<Paper variant="padded">
+			<Typography variant="h2">Eksempel på Switches</Typography>
+
+			<InnerPaper variant="padded">
+				<Switch />
+				&nbsp;
+				<Switch disabled />
+			</InnerPaper>
+		</Paper>
+	)
+}

package.json

@@ -40,7 +40,7 @@
 		"ts-loader": "^9.4.2",
 		"typescript": "^5.0.2",
 		"webpack": "^5.76.0",
-		"webpack-cli": "^5.0.1",
+		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.11.1"
 	},
 	"files": [