@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/card.stories.tsx

@@ -0,0 +1,469 @@
+import {
+	CalendarDotsIcon,
+	ClockIcon,
+	DownloadSimpleIcon,
+	HourglassHighIcon,
+	ListChecksIcon,
+	MapPinIcon,
+	PaperPlaneRightIcon,
+	SmileyMehIcon,
+	UploadSimpleIcon,
+} from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Card,
+	Flex,
+	Grid,
+	Group,
+	Heading,
+	Info,
+	Input,
+	Prose,
+	Tag,
+} from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Card og Group",
+	id: "designsystem-card",
+	parameters: {
+		layout: "fullscreen",
+	},
+	decorators: [
+		(Story) => (
+			<div
+				className={`${styles.body} ${styles.grid}`}
+				style={{ padding: "2em" }}
+			>
+				<style>
+					{
+						"html:not(:has(.sbdocs-content)) { background: var(--ds-color-background-default) }"
+					}
+				</style>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const radius = ["sm", "md", "lg", "xl"] as const;
+const paddings = [
+	0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 18, 22, 26, 30,
+];
+
+export const Default: Story = {
+	render: () => <div className={styles.card}>Card</div>,
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Card>Card</Card>
+			<Card href="#">Lenke</Card>
+			<Card as="button" onClick={() => alert("Click!")}>
+				Knapp
+			</Card>
+			<Group>
+				<Grid data-gap="1">
+					<Card>Card in group</Card>
+					<Card>Card in group</Card>
+					<Card>Card in group</Card>
+				</Grid>
+			</Group>
+		</>
+	),
+};
+
+export const Padding: Story = {
+	render: () => (
+		<Grid>
+			<strong>Padding:</strong>
+			{paddings.map((pad) => (
+				<div key={pad} className={styles.card} data-pad={pad}>
+					data-pad="{pad}"
+				</div>
+			))}
+			<strong>Fluid padding (try resizing screen):</strong>
+			{paddings.map((pad) => (
+				<div key={pad} className={styles.card} data-pad={`2-${pad}`}>
+					data-pad="2-{pad}"
+				</div>
+			))}
+		</Grid>
+	),
+};
+
+export const Radius: Story = {
+	render: () => (
+		<>
+			{radius.map((value) => (
+				<div key={value} className={styles.card} data-radius={value}>
+					data-radius="{value}"
+				</div>
+			))}
+		</>
+	),
+};
+
+export const Interactive: Story = {
+	render: () => (
+		<>
+			<a href="#anchor" className={styles.card}>
+				As link
+			</a>
+			<button type="button" className={styles.card}>
+				As button
+			</button>
+			<div data-clickdelegatefor="my-link" className={styles.card}>
+				<div className={styles.prose}>
+					<a id="my-link" href="#anchor">
+						With data-clickdelegatefor targeting link
+					</a>
+					<button type="button" className={styles.button}>
+						Inner button with other function
+					</button>
+				</div>
+			</div>
+		</>
+	),
+};
+
+export const Responsive: Story = {
+	render: () => (
+		<>
+			Grupperte eksempler:
+			<a href="#anchor" className={styles.card}>
+				<div className={styles.flex}>
+					<h2 data-size="md" data-self="250" data-fixed>
+						123456789
+					</h2>
+					<div className={styles.flex} data-self="500" data-items="100">
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<CalendarDotsIcon />
+								<span>06.12.2024</span>
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								19:37
+							</div>
+						</div>
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<UploadSimpleIcon />
+								Groene Tuin
+							</div>
+							<div className={styles.info}>
+								<i>🇫🇷</i>
+								Frankrike
+							</div>
+						</div>
+						<div className={styles.grid} data-self="500" data-items="250">
+							<div className={styles.info}>
+								<DownloadSimpleIcon />
+								Blomquist Blomster AS
+							</div>
+							<div className={styles.info}>
+								<ListChecksIcon />
+								Daucus carota, Hydrangea paniculata, +4
+							</div>
+						</div>
+					</div>
+				</div>
+			</a>
+			<Card>
+				<Flex data-align="start">
+					<Info data-self="250" data-fixed>
+						<small>Opprettet 01.01.1970</small>
+						<Heading data-size="2xs">KY.KELLI.815.493.00</Heading>
+					</Info>
+					<Flex data-self="500">
+						<Flex data-self="500" data-align="start">
+							<Grid data-self="200">
+								<Info>
+									<PaperPlaneRightIcon />
+									Firmanavn AS
+								</Info>
+								<Info>
+									<i>🇳🇱</i> Nederland
+								</Info>
+							</Grid>
+							<Info data-self="300">
+								<DownloadSimpleIcon />
+								Bomsterlandet importerer bomster AS, Rogaland
+							</Info>
+						</Flex>
+						<Tag data-fixed data-color="info" data-icon="none">
+							Skal på tilsyn
+						</Tag>
+					</Flex>
+				</Flex>
+			</Card>
+			<div className={styles.card}>
+				<div className={styles.flex} data-align="center">
+					<h2 data-size="md" data-self="250" data-fixed>
+						Bambus
+					</h2>
+					<div
+						className={styles.flex}
+						data-self="500"
+						data-items="150"
+						data-align="center"
+					>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<MapPinIcon />
+								Grunerlokka, Oslo
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								12.00 - 22.00
+							</div>
+						</div>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<SmileyMehIcon />
+								06.01.2024
+							</div>
+							<div className={styles.info}>
+								<HourglassHighIcon />
+								107.02.2020
+							</div>
+						</div>
+						<button
+							type="button"
+							className={styles.button}
+							data-variant="secondary"
+							data-nowrap
+							data-fixed
+							data-arrow
+						>
+							Planlegg tur
+						</button>
+					</div>
+				</div>
+			</div>
+			<div className={styles.card}>
+				<div className={styles.flex} data-align="center">
+					<h2 data-size="md" data-self="250" data-fixed>
+						Burgern
+					</h2>
+					<div
+						className={styles.flex}
+						data-self="500"
+						data-items="150"
+						data-align="center"
+					>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<MapPinIcon />
+								Sentrum, Oslo
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								14.00 - 22.00{" "}
+								<span
+									className={styles.tag}
+									data-size="sm"
+									data-color="info"
+									data-icon="none"
+								>
+									Kveld
+								</span>
+							</div>
+						</div>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<SmileyMehIcon />
+								14.06.2022
+							</div>
+							<div className={styles.info}>
+								<HourglassHighIcon />
+								13.02.2023
+							</div>
+						</div>
+						<button
+							type="button"
+							className={styles.button}
+							data-variant="secondary"
+							data-nowrap
+							data-fixed
+							data-arrow
+						>
+							Planlegg tur
+						</button>
+					</div>
+				</div>
+			</div>
+			<div className={styles.card}>
+				<div className={styles.flex} data-align="center">
+					<h2 data-size="md" data-self="250" data-fixed>
+						Den lekke tomat
+					</h2>
+					<div
+						className={styles.flex}
+						data-self="500"
+						data-items="150"
+						data-align="center"
+					>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<MapPinIcon />
+								Sagene, Oslo
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								11.00 - 22.00
+							</div>
+						</div>
+						<div className={styles.grid} data-items="150">
+							<div className={styles.info}>
+								<SmileyMehIcon />
+								08.01.2024
+							</div>
+							<div className={styles.info}>
+								<HourglassHighIcon />
+								23.03.2025
+							</div>
+						</div>
+						<button
+							type="button"
+							className={styles.button}
+							data-variant="secondary"
+							data-nowrap
+							data-fixed
+							data-arrow
+						>
+							Planlegg tur
+						</button>
+					</div>
+				</div>
+			</div>
+			Ikke gruppert eksempel:
+			<div className={styles.card}>
+				<div className={styles.flex} data-items="150">
+					<h2 data-size="md">Ananasen</h2>
+					<div className={styles.info}>
+						<MapPinIcon />
+						Loren, Oslo
+					</div>
+					<div className={styles.info}>
+						<ClockIcon />
+						13.00 - 22.00
+					</div>
+					<div className={styles.info}>
+						<SmileyMehIcon />
+						06.01.2023
+					</div>
+					<div className={styles.info}>
+						<HourglassHighIcon />
+						07.04.2025
+					</div>
+					<button
+						type="button"
+						className={styles.button}
+						data-variant="secondary"
+						data-arrow
+					>
+						Planlegg tur
+					</button>
+				</div>
+			</div>
+		</>
+	),
+};
+
+// export const Expandable: Story = {
+// 	render: () => (
+// 		<u-details className={styles.card}>
+// 			<u-summary className={styles.flex} data-align="center">
+// 				<h2 data-size="md" data-self="250" data-fixed>
+// 					123456789
+// 				</h2>
+// 				<span className={styles.flex} data-self="500" data-items="100">
+// 					<span className={styles.grid} data-items="100">
+// 						<div className={styles.info}>
+// 							<CalendarDotsIcon />
+// 							06.12.2024
+// 						</span>
+// 						<div className={styles.info}>
+// 							<ClockIcon />
+// 							19:37
+// 						</span>
+// 					</span>
+// 					<span className={styles.grid} data-items="100">
+// 						<div className={styles.info}>
+// 							<UploadSimpleIcon />
+// 							Groene Tuin
+// 						</span>
+// 						<div className={styles.info}>
+// 							<i>🇫🇷</i>
+// 							Frankrike
+// 						</span>
+// 					</span>
+// 					<span className={styles.grid} data-self="500" data-items="250">
+// 						<div className={styles.info}>
+// 							<DownloadSimpleIcon />
+// 							Blomquist Blomster AS
+// 						</span>
+// 						<div className={styles.info}>
+// 							<ListChecksIcon />
+// 							Daucus carota, Hydrangea paniculata, +4
+// 						</span>
+// 					</span>
+// 				</span>
+// 			</u-summary>
+// 			<div>Hei</div>
+// 		</u-details>
+// 	),
+// };
+
+export const GroupStory: Story = {
+	name: "Group",
+	parameters: { showInOverview: true },
+	render: () => (
+		<div className={styles.group}>
+			<div className={styles.grid} data-gap="1">
+				<div className={styles.card}>Card</div>
+				<div className={styles.card}>Card</div>
+				<div className={styles.card}>Card</div>
+			</div>
+		</div>
+	),
+};
+
+export const WithInput: Story = {
+	render: () => (
+		<Grid data-items="400" data-fixed>
+			<Card as="label">
+				<Prose>
+					<Heading>
+						<Input type="radio" name="radio-card" />
+						Velg dette kortet
+					</Heading>
+					<p>
+						Quisque vitae nibh quis dui lobortis consectetur. Vivamus sed nisl
+						quis enim venenatis hendrerit eu vitae mauris. Praesent at commodo
+						libero.
+					</p>
+				</Prose>
+			</Card>
+			<Card as="label">
+				<Prose>
+					<Heading>
+						<Input type="radio" name="radio-card" />
+						Velg dette kortet
+					</Heading>
+					<p>
+						Quisque vitae nibh quis dui lobortis consectetur. Vivamus sed nisl
+						quis enim venenatis hendrerit eu vitae mauris. Praesent at commodo
+						libero.
+					</p>
+				</Prose>
+			</Card>
+		</Grid>
+	),
+};

package/mtds/ai/chart.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables, JumpTo } from '../../.storybook/blocks';
+import { Button, Grid } from '../react';
+import * as stories from './chart.stories';
+
+<Meta of={stories} />
+
+# Chart
+
+<JumpTo />
+
+<Button style={{ marginBlock: '0 -1em' }} href="?path=/docs/identitet-infografikk--docs" data-variant="secondary" data-arrow>Se også Infografikk-generator</Button>
+
+## Kode
+- Bruk elementet `<mtds-chart>`
+- Bruk `data-variant="column | column-stacked | bar | bar-stacked | line | area | doughnut"`
+- Sett inn en tabell som inneholder:
+  - Første rad med grupperings-ledetekster
+  - Andre rad og utover med dataserier, hvor første kolonne er dataserie-tittel
+  - **Merk:** Bruk av `thead`, `tbody` eller `th` er valgfritt - radene parses uansett
+  - **React?** Du kan alternativt sende inn data som en array via `data`-prop
+<Canvas of={stories.Default} />
+
+## Stående stolpediagram
+- Bruk `data-variant="column"` for stående søylediagram
+- Bruk `data-variant="column-stacked"` for stablet gruppering
+<Grid data-items="300"><Canvas sourceState='none' of={stories.Column} /><Canvas sourceState='none' of={stories.ColumnStacked} /></Grid>
+
+## Liggende stolpediagram
+- Bruk `data-variant="bar"` for liggende søylediagram
+- Bruk `data-variant="bar-stacked"` for stablet gruppering
+<Grid data-items="300"><Canvas sourceState='none' of={stories.Bar} /><Canvas sourceState='none' of={stories.BarStacked} /></Grid>
+
+## Linjediagram
+- Bruk `data-variant="line"` for linjediagram eller  `data-variant="area"` for fylt linjediagram
+<Grid data-items="300"><Canvas sourceState='none' of={stories.Line} /><Canvas sourceState='none' of={stories.Area} /></Grid>
+
+## Kakediagram
+- Bruk `data-variant="pie"` eller `data-variant="doughnut"` for Kakediagram
+<Grid data-items="300"><Canvas sourceState='none' of={stories.Pie} /><Canvas sourceState='none' of={stories.Doughnut} /></Grid>
+
+## Skjule elementer
+- Bruk `data-legend="false"` for å skjule legend
+- Bruk `data-dots="false"` for å skjule dotter i `data-variant="line | area"`
+- Bruk `data-steps="false"` for å skjule steg-tekster
+- Bruk `data-labels="false"` for å skjule grupperings-lekster
+<Grid data-items="300"><Canvas sourceState='none' of={stories.WithLegendDisabled} /><Canvas sourceState='none' of={stories.WithDotsDisabled} /></Grid>
+
+<CssVariables component='chart' />
+
+Du kan med andre ord styre hvilket dataset som har hvilken farge, ved å f.eks gjøre:
+
+```css
+/* Forskjellig farge for hver gruppe */
+.my-chart {
+  --mtdsc-chart-color-1: var(--mtds-color-charts-chart-c);
+  --mtdsc-chart-color-2: var(--mtds-color-charts-chart-b);
+  --mtdsc-chart-color-3: var(--mtds-color-charts-chart-a);
+}
+
+/* Forskjellig farge for hver verdi i samme gruppe: */
+.my-chart {
+  --mtdsc-chart-color-1-1: var(--mtds-color-charts-chart-c);
+  --mtdsc-chart-color-1-2: var(--mtds-color-charts-chart-b);
+  --mtdsc-chart-color-1-3: var(--mtds-color-charts-chart-a);
+}
+```