Komp-331-maldatepicker (#598)

* Endrer på malen * Ny mal på datepicker * Fikser konsistent onchange mellom custom og native * Legger dependencies i riktig package * Legger til changeset
kartverket · Nov 2, 2023 · 66849b6 · 66849b6
1 parent 0ab79d6
commit 66849b6
Show file tree

Hide file tree

Showing 14 changed files with 198 additions and 64 deletions.
diff --git a/.changeset/plenty-zebras-build.md b/.changeset/plenty-zebras-build.md
@@ -0,0 +1,5 @@
+---
+"@kvib/react": patch
+---
+
+Datepicker: Endrer onChange til å returnere Date på både desktop og mobil (native).
diff --git a/apps/storybook/stories/components/alert/Alert.mdx b/apps/storybook/stories/components/alert/Alert.mdx
@@ -1,6 +1,6 @@
 import { Title, Canvas, Meta, Story, Controls } from "@storybook/blocks";
 import * as AlertStories from "./Alert.stories";
-import { DocsHeading, DocsAnatomy, DocsStoriesContainer, DocsStory } from "../../templates";
+import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory } from "../../templates";
 import { Box } from "@kvib/react/src";
 
 <Meta of={AlertStories} />
@@ -24,7 +24,7 @@ import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@kvib/react";
 
 <DocsHeading>Options</DocsHeading>
 
-<DocsStoriesContainer>
+<DocsContainer>
 <DocsStory
   title="Title"
   description="The title is optional, but should, when used, always convey a concise and descriptive message."
@@ -53,10 +53,14 @@ import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@kvib/react";
   description="Use the apperance to convey different levels of emphasis, or to direct the alert towards a certain direction."
   story={<Canvas of={AlertStories.AlertEmphasisWarning} />}
 />
-</DocsStoriesContainer>
+</DocsContainer>
 
 <DocsHeading>Kjente feil</DocsHeading>
 
+<DocsContainer>
+
 Bruk av colorScheme="orange" og variant="solid" sammen gir for lav kontrast. Dette fargetemaet er også brukt med status="warning", som dermed heller ikke kan brukes sammen med variant="solid".
 
 Det er foreløpig ikke mulig å bytte ut eller droppe status-ikonet for alerter.
+
+</DocsContainer>
diff --git a/apps/storybook/stories/components/alert/Alert.stories.tsx b/apps/storybook/stories/components/alert/Alert.stories.tsx
@@ -41,6 +41,13 @@ type Story = StoryObj<typeof KvibAlert>;
 
 export const Alert: Story = {
   args: { status: "success" },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
   render: (args) => (
     <KvibAlert {...args}>
       <AlertIcon />

diff --git a/apps/storybook/stories/components/datepicker/Datepicker.mdx b/apps/storybook/stories/components/datepicker/Datepicker.mdx
@@ -1,7 +1,8 @@
 import * as DatepickerStories from "./Datepicker.stories";
-import { Canvas, Meta, Controls } from "@storybook/blocks";
-import { DocsHeading, DocsAnatomy, DocsStoriesContainer, DocsStory } from "../../templates";
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks";
+import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory } from "../../templates";
 import { Alert, AlertIcon, AlertDescription } from "@kvib/react/src/alert";
+import { Text, Code, Box } from "@kvib/react/src/";
 
 <Meta of={DatepickerStories} />
 
@@ -13,22 +14,79 @@ Datepicker kombinerer et inputfelt med en popoverkalender hvor brukere kan velge
 import { Datepicker } from "@kvib/react";
 ```
 
-<Alert status="info">
-  <AlertIcon />
-  <AlertDescription>
-    Datepicker er i en testfase. Utfyllende dokumentasjon kommer på et senere tidspunkt. Dersom du har innspill eller
-    tilbakemeldinger, ta kontakt med oss i #gen-designsystem i Slack. Hvis du vil bruke den gamle versjonen kan du bruke
-    `<Input type="date" /> `.
-  </AlertDescription>
-</Alert>
+<DocsContainer>
 
-<DocsHeading>Props</DocsHeading>
+**Egnet til:**
 
-<Canvas of={DatepickerStories.Datepicker} />
-<Controls of={DatepickerStories.Datepicker} />
+- Velge en dato
+
+**Uegnet til:**
+
+- Valg av dato langt tilbake eller frem i tid
+
+</DocsContainer>
+
+<DocsHeading>Alternativer</DocsHeading>
+<DocsContainer>
+  <DocsStory
+    title="Flere detaljer"
+    description={
+      <Text>
+        Popoverkalenderen i datepicker kommer som standard uten ekstra detaljer om måneden. For å legge til ukenummer,
+        legg til propen <Code>showWeekNumber</Code>. Legg til propen <Code>showOutsideDays</Code> for å fylle ut
+        kalenderen med dager som ikke er i samme måned.
+      </Text>
+    }
+    story={<Canvas of={DatepickerStories.DatepickerDetails} />}
+  />
+  <DocsStory
+    title="Datoområde"
+    description={
+      <Text>
+        Det er mulig å sette hvilke datoer som er tilgjengelige å velge mellom ved bruk av <Code>fromDate</Code> og
+        <Code>toDate</Code>. Dersom det går over flere år eller måneder burde <Code>
+          showDropdownMonthYear
+        </Code> være true. Den gjør det mulig å velge mellom måneder og år mer effektivt. For å fjerne spesifikke dager kan man bruke
+        <Code>disabledDays</Code>.
+      </Text>
+    }
+    story={<Canvas of={DatepickerStories.DatepickerArea} />}
+
+/>
+
+  <DocsStory
+    title="Utseende"
+    description={
+      <Text>
+        Datepicker har fire forskjellige varianter for inputfeltet. Disse er outline, filled, flushed og unstyled. I de
+        fleste tilfeller vil outline være passende. Det er fire forskjellige størrelser fra xs til lg. Her vil md passe
+        i de fleste tilfeller.
+      </Text>
+    }
+    story={<Canvas of={DatepickerStories.DatepickerAppearance} />}
+  />
+</DocsContainer>
+
+<DocsHeading>Retningslinjer</DocsHeading>
 
-<DocsHeading>Eksempel</DocsHeading>
+<DocsContainer>
+### Vurder om Datepicker er den rette løsningen for deg
 
-<Canvas of={DatepickerStories.DatepickerExample} />
+Datepicker gjør det enkelt for brukere å navigere gjennom datoer innenfor en bestemt tidsperiode. Imidlertid kan det oppstå utfordringer når den skal dekke lengre tidsrom. For eksempel, når brukeren skal velge et år som ligger langt frem eller tilbake i tid, kan det bli nødvendig å bla gjennom en lang liste med 50 eller flere alternativer i en nedtrekksmeny.
 
-Utfyllende dokumentasjon vil komme på et senere tidspunkt.
+Datovelgere er komplekse komponenter, og i noen tilfeller kan det være mer brukervennlig å la brukeren skrive inn datoen manuelt i en vanlig input. [Forskning utført av Gov.uk](https://design-system.service.gov.uk/patterns/dates/) viser at det kan være en fordel å tilby et enkelt tekstfelt fremfor en interaktiv datovelger.
+
+### Native datepicker på mobil
+
+Datepicker har som standard satt `useNative` til true. Den proppen bestemmer om Datepicker skal bruke native dropdown-kalender på mobil ({`<`}480 px). Native Datepicker for mobil er optimalisert for touch, samtidig som brukeren allerede er vant til den.
+Med native datepicker vil ikke de følgende proppene bli brukt på mobil: `showDropdownMonthYear`, `showOutsideDays`, `showWeekNumber`, `disabledDays`. Det er anbefalt å bruke native Datepicker på mobil, men det er fullt mulig å sette `useNative={false}` for å benytte seg av alle props.
+
+### Date
+
+Datepicker returnerer datoer i [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)-format. Du må selv ta deg av konvertering til ønsket format og da evt tidssoner. I selve komponenten bruker vi [date-fns](https://date-fns.org/) for parsing.
+
+</DocsContainer>
+
+<DocsHeading>Props</DocsHeading>
+<Canvas of={DatepickerStories.Datepicker} />
+<Controls of={DatepickerStories.Datepicker} />
diff --git a/apps/storybook/stories/components/datepicker/Datepicker.stories.tsx b/apps/storybook/stories/components/datepicker/Datepicker.stories.tsx
@@ -134,30 +134,62 @@ const meta: Meta<typeof KvibDatepicker> = {
       },
       control: "boolean",
     },
+    onChange: {
+      description: "Sideeffect to be run when a date is selected.",
+      table: {
+        type: { summary: "(date: Date | undefined) => void" },
+      },
+      control: "function",
+    },
   },
 };
 
 export default meta;
 type DatepickerStory = StoryObj<typeof KvibDatepicker>;
 
 export const Datepicker: DatepickerStory = {
-  args: {},
+  args: { onChange: (v) => console.log("Datepicker changed", v) },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  render: (args) => (
+    <Box h="25rem">
+      <KvibDatepicker aria-label="Datepicker" {...args} />
+    </Box>
+  ),
+};
+
+export const DatepickerDetails: DatepickerStory = {
+  args: {
+    showOutsideDays: true,
+    showWeekNumber: true,
+  },
+  render: (args) => (
+    <Box h="25rem">
+      <KvibDatepicker aria-label="Datepicker example" {...args} />
+    </Box>
+  ),
+};
+
+export const DatepickerAppearance: DatepickerStory = {
+  args: { variant: "flushed", size: "lg" },
   render: (args) => (
     <Box h="25rem">
       <KvibDatepicker aria-label="Datepicker" {...args} />
     </Box>
   ),
 };
 
-export const DatepickerExample: DatepickerStory = {
+export const DatepickerArea: DatepickerStory = {
   args: {
     defaultSelected: new Date("2022-08-01"),
     fromDate: new Date("2022-08-01"),
     toDate: new Date("2022-12-15"),
     showDropdownMonthYear: true,
-    disableNavigation: false,
-    showOutsideDays: true,
-    showWeekNumber: true,
     disabledDays: [new Date("2022-08-16")],
   },
   render: (args) => (

diff --git a/apps/storybook/stories/templates/DocsContainer.tsx b/apps/storybook/stories/templates/DocsContainer.tsx
@@ -0,0 +1,9 @@
+import { Box } from "@kvib/react/src";
+
+type DocsStoriesContainerProps = {
+  children: React.ReactNode;
+};
+
+export const DocsContainer = ({ children }: DocsStoriesContainerProps) => {
+  return <Box padding="0 1rem">{children}</Box>;
+};
diff --git a/apps/storybook/stories/templates/DocsStoriesContainer.tsx b/apps/storybook/stories/templates/DocsStoriesContainer.tsx
diff --git a/apps/storybook/stories/templates/DocsStory.tsx b/apps/storybook/stories/templates/DocsStory.tsx
@@ -2,7 +2,7 @@ import { Box, Heading, SimpleGrid, Text } from "@kvib/react/src";
 
 type DocsStoryProps = {
   title: string;
-  description: string;
+  description: string | JSX.Element;
   story: any;
 };
 

diff --git a/apps/storybook/stories/templates/index.ts b/apps/storybook/stories/templates/index.ts
@@ -1,4 +1,4 @@
-export * from "./DocsStoriesContainer";
+export * from "./DocsContainer";
 export * from "./DocsAnatomy";
 export * from "./DocsStory";
 export * from "./DocsHeading";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,10 +26,7 @@
     "node": "18.15.0"
   },
   "dependencies": {
-    "@changesets/cli": "^2.26.2",
-    "@types/react-day-picker": "^5.3.0",
-    "date-fns": "^2.30.0",
-    "react-day-picker": "^8.9.1"
+    "@changesets/cli": "^2.26.2"
   },
   "packageManager": "npm@9.5.0",
   "lint-staged": {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -37,7 +37,10 @@
     "@emotion/styled": "^11.10.6",
     "@fontsource/mulish": "^5.0.15",
     "chakra-react-select": "^4.7.6",
-    "material-symbols": "^0.13.2"
+    "material-symbols": "^0.13.2",
+    "@types/react-day-picker": "^5.3.0",
+    "date-fns": "^2.30.0",
+    "react-day-picker": "^8.9.1"
   },
   "lint-staged": {
     "*.{ts,tsx,md}": "prettier --write"