Form validation demo improvements (#3132)

navikt · Sep 9, 2024 · 1d585e6 · 1d585e6
1 parent 1b2dc88
commit 1d585e6
Show file tree

Hide file tree

Showing 12 changed files with 240 additions and 228 deletions.
diff --git a/aksel.nav.no/website/components/website-modules/examples/examples.module.css b/aksel.nav.no/website/components/website-modules/examples/examples.module.css
@@ -1,25 +1,38 @@
-.examples a {
+.container {
+  padding-inline: 1rem;
+}
+
+.container a {
   text-underline-offset: initial;
   text-decoration-thickness: auto;
 }
 
-.container {
+.containerDefault {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
 .containerStatic {
   display: flex;
   justify-content: center;
   height: 100%;
-  padding: 1.5rem 1rem;
+  padding-block: 1.5rem;
 }
 
-.containerStatic > * {
+.exampleStatic {
   max-width: 30rem;
   width: 100%;
 }
+
+.containerFull {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.containerStaticFull {
+  padding-block: 1.5rem;
+}
diff --git a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
@@ -11,16 +11,19 @@ import { HStack } from "@navikt/ds-react";
 import styles from "./examples.module.css";
 
 type withDsT = {
-  variant?: "full" | "inverted" | "static" | "subtle";
+  /**
+   * Full: No horizontal centering (i.e. full width).
+   * Static: No vertical centering and static (but responsive) width. Used for dynamic-height examples like ExpansionCard.
+   * Static-full: No centering in any direction.
+   */
+  variant?: "full" | "static" | "static-full";
+  background?: "inverted" | "subtle";
   showBreakpoints?: boolean;
 };
 
 export const withDsExample = (
   Component: ComponentType,
-  /**
-   * Static: Used for dynamic-height examples like ExpansionCard
-   */
-  { variant, showBreakpoints }: withDsT = {},
+  { variant, background, showBreakpoints }: withDsT = {},
 ) => {
   const DsHOC = (props: any) => {
     const [width, setWidth] = useState<number>();
@@ -64,7 +67,7 @@ export const withDsExample = (
           gap="05"
           className="absolute left-0 top-0 rounded-br-medium p-1"
           align="center"
-          style={{ background: getBg(variant) }}
+          style={{ background: getBg(background) }}
         >
           <Icon aria-hidden fontSize="1.5rem" /> {`${breakpoint}`}
         </HStack>
@@ -73,18 +76,18 @@ export const withDsExample = (
 
     return (
       <div
-        className={cl(styles.examples, {
+        className={cl(styles.container, {
+          [styles.containerDefault]: !variant,
           [styles.containerStatic]: variant === "static",
-          [styles.container]: variant !== "static",
+          [styles.containerFull]: variant === "full",
+          [styles.containerStaticFull]: variant === "static-full",
         })}
-        style={{ background: getBg(variant) }}
+        style={{ background: getBg(background) }}
       >
         {showBreakpoints && <BreakpointText />}
         <div
           id="ds-example"
-          className={cl({
-            "w-full": variant === "full",
-          })}
+          className={variant === "static" ? styles.exampleStatic : undefined}
         >
           <Component {...props} />
         </div>
@@ -99,8 +102,8 @@ export const withDsExample = (
   return DsHOC;
 };
 
-function getBg(variant: withDsT["variant"]): string {
-  switch (variant) {
+function getBg(background: withDsT["background"]): string {
+  switch (background) {
     case "inverted":
       return "var(--a-surface-inverted)";
     case "subtle":

diff --git a/aksel.nav.no/website/pages/eksempler/README.md b/aksel.nav.no/website/pages/eksempler/README.md
@@ -14,7 +14,7 @@ Alle linjer som inneholder `examples/withDsExample` + alt under `// EXAMPLES DO
 
 Demo-komponent må ha navn `Example` for at CodeSandbox-knapp skal fungere riktig.
 
-`withDsExample` tar imot parametere, e.g. `{variant: 'static'}` for å sette bredde på komponent til "page width", eller `{variant: 'full'}` for full bredde.
+`withDsExample` tar imot parametere, se JSDOC for detaljer.
 
 ### Args
 

diff --git a/aksel.nav.no/website/pages/eksempler/chat/colors.tsx b/aksel.nav.no/website/pages/eksempler/chat/colors.tsx
@@ -24,7 +24,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, { variant: "subtle" });
+export default withDsExample(Example, { background: "subtle" });
 
 /* Storybook story */
 export const Demo = {

diff --git a/aksel.nav.no/website/pages/eksempler/loader/inverted.tsx b/aksel.nav.no/website/pages/eksempler/loader/inverted.tsx
@@ -6,7 +6,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, { variant: "inverted" });
+export default withDsExample(Example, { background: "inverted" });
 
 export const args = {
   index: 2,

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx
@@ -24,7 +24,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "subtle",
+  background: "subtle",
 });
 
 /* Storybook story */

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-hide/layout-med-sidebar.tsx b/aksel.nav.no/website/pages/eksempler/primitive-hide/layout-med-sidebar.tsx
@@ -130,7 +130,7 @@ const MobileSidebar = ({ className }: { className?: string }) => (
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "subtle",
+  background: "subtle",
 });
 
 /* Storybook story */

diff --git a/aksel.nav.no/website/pages/eksempler/primitive-show/layout-med-sidebar.tsx b/aksel.nav.no/website/pages/eksempler/primitive-show/layout-med-sidebar.tsx
@@ -130,7 +130,7 @@ const MobileSidebar = ({ className }: { className?: string }) => (
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "subtle",
+  background: "subtle",
 });
 
 /* Storybook story */

diff --git a/aksel.nav.no/website/pages/eksempler/search/darkmode.tsx b/aksel.nav.no/website/pages/eksempler/search/darkmode.tsx
@@ -10,7 +10,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example, { variant: "inverted" });
+export default withDsExample(Example, { background: "inverted" });
 
 export const args = {
   index: 7,

diff --git a/aksel.nav.no/website/pages/templates/skjemavalidering/demo.tsx b/aksel.nav.no/website/pages/templates/skjemavalidering/demo.tsx
@@ -11,6 +11,7 @@ import {
   TextField,
   VStack,
 } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const validatePersonnummer = (p: string) => {
   // Det er anbefalt å bruke https://github.com/navikt/fnrvalidator for å validere personnummer.
@@ -63,106 +64,103 @@ const Example = () => {
 
   if (formState.submitted)
     return (
-      <Page>
-        <Page.Block as="main" width="lg" gutters>
-          <VStack gap="8" align="center">
-            <Heading size="large">Demo slutt</Heading>
-            <Button
-              onClick={() => {
-                location.hash = "";
-                location.reload();
-              }}
-            >
-              Nullstill
-            </Button>
-          </VStack>
-        </Page.Block>
-      </Page>
+      <Page.Block width="lg" gutters>
+        <VStack gap="8" align="center">
+          <Heading size="large">Demo slutt</Heading>
+          <Button
+            onClick={() => {
+              location.hash = "";
+              location.reload();
+            }}
+          >
+            Nullstill
+          </Button>
+        </VStack>
+      </Page.Block>
     );
 
   return (
-    <Page>
-      <Page.Block as="main" width="lg" gutters>
-        <form onSubmit={onSubmit}>
-          <VStack gap="8">
-            <TextField
-              id="personnummer"
-              label="Personnummer"
-              value={values.personnummer}
-              onChange={(e) =>
-                setValues({ ...values, personnummer: e.currentTarget.value })
-              }
-              onBlur={() => {
-                formState.tries &&
-                  setErrors({
-                    ...errors,
-                    personnummer: validatePersonnummer(values.personnummer),
-                  });
-              }}
-              error={errors.personnummer}
-            />
-            <RadioGroup
-              id="transportmiddel"
-              tabIndex={-1}
-              legend="Transportmiddel"
-              value={values.transportmiddel}
-              onChange={(newValue) => {
-                setValues({ ...values, transportmiddel: newValue });
-                setErrors({ ...errors, transportmiddel: "" });
-              }}
-              error={errors.transportmiddel}
-            >
-              <Radio value="car">Bil</Radio>
-              <Radio value="walking">Gange</Radio>
-              <Radio value="public">Kollektivtransport</Radio>
-            </RadioGroup>
+    <Page.Block width="lg" gutters>
+      <form onSubmit={onSubmit}>
+        <VStack gap="8">
+          <TextField
+            id="personnummer"
+            label="Personnummer"
+            htmlSize={11}
+            value={values.personnummer}
+            onChange={(e) =>
+              setValues({ ...values, personnummer: e.currentTarget.value })
+            }
+            onBlur={() => {
+              formState.tries &&
+                setErrors({
+                  ...errors,
+                  personnummer: validatePersonnummer(values.personnummer),
+                });
+            }}
+            error={errors.personnummer}
+          />
+          <RadioGroup
+            id="transportmiddel"
+            tabIndex={-1}
+            legend="Transportmiddel"
+            value={values.transportmiddel}
+            onChange={(newValue) => {
+              setValues({ ...values, transportmiddel: newValue });
+              setErrors({ ...errors, transportmiddel: "" });
+            }}
+            error={errors.transportmiddel}
+          >
+            <Radio value="car">Bil</Radio>
+            <Radio value="walking">Gange</Radio>
+            <Radio value="public">Kollektivtransport</Radio>
+          </RadioGroup>
 
-            {Object.values(errors).some(Boolean) && (
-              <ErrorSummary
-                ref={errorSummaryRef}
-                heading="Du må rette disse feilene før du kan fortsette:"
-              >
-                {Object.entries(errors)
-                  .filter(([, error]) => error)
-                  .map(([key, error]) => (
-                    <ErrorSummary.Item href={`#${key}`} key={key}>
-                      {error}
-                    </ErrorSummary.Item>
-                  ))}
-              </ErrorSummary>
-            )}
+          {Object.values(errors).some(Boolean) && (
+            <ErrorSummary
+              ref={errorSummaryRef}
+              heading="Du må rette disse feilene før du kan fortsette:"
+            >
+              {Object.entries(errors)
+                .filter(([, error]) => error)
+                .map(([key, error]) => (
+                  <ErrorSummary.Item href={`#${key}`} key={key}>
+                    {error}
+                  </ErrorSummary.Item>
+                ))}
+            </ErrorSummary>
+          )}
 
-            <HGrid
-              gap={{ xs: "4", sm: "8 4" }}
-              columns={{ xs: 1, sm: 2 }}
-              width={{ sm: "fit-content" }}
+          <HGrid
+            gap={{ xs: "4", sm: "8 4" }}
+            columns={{ xs: 1, sm: 2 }}
+            width={{ sm: "fit-content" }}
+          >
+            <Button
+              type="button"
+              variant="secondary"
+              icon={<ArrowLeftIcon aria-hidden />}
+              iconPosition="left"
             >
-              <Button
-                type="button"
-                variant="secondary"
-                icon={<ArrowLeftIcon aria-hidden />}
-                iconPosition="left"
-              >
-                Forrige steg
-              </Button>
-              <Button
-                type="submit"
-                variant="primary"
-                icon={<ArrowRightIcon aria-hidden />}
-                iconPosition="right"
-              >
-                Neste steg
-              </Button>
-            </HGrid>
-          </VStack>
-        </form>
-      </Page.Block>
-    </Page>
+              Forrige steg
+            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              icon={<ArrowRightIcon aria-hidden />}
+              iconPosition="right"
+            >
+              Neste steg
+            </Button>
+          </HGrid>
+        </VStack>
+      </form>
+    </Page.Block>
   );
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default Example;
+export default withDsExample(Example, { variant: "static-full" });
 
 /* Storybook story */
 export const Demo = {