initial box (heavily inspired by shopify Box) (#2195)

* initial box (heavily inspired by shopify Box)

* 🎨 Theming-demo

* rm printHidden prop

* sr-only: clip is deprecated, adding clip-path

* setting up padding story box primitive

* 95% complete padding example for Box (dynamic css code unfolding with types)

* WIP on padding/margin for box

* working box padding/block/inline/margin?

* remove console.log

* story for Box, copy implementation from padding to apply to margin as well

* remove unwanted props on Box

* refactor semantic-colors.json, use json import for types in Box.tsx

* squashme

* Box: working border & background

* 🔥 remove props on Box we will not implement in v1

* refactoring / less things needed (no margin) and things that are broken show up in stories

* 🐛 fix erroneous padding assignment (a flipped index)

* fully recreated LinkPanel

* box: add all borderRadius props

* box: complete example for chat bubbles

* 📝 refactor box hover props to be an object instead

* checkout main yarn.lock

* yarn changeset

* 📝 add jsdoc for Box

* 📝 add token documentation

* 🚧 Box: add barrel file

* 🔥 remove overriding tokens for Box

* ♻️ refactor the borderRadius API

* 🔥 remove console.logs

* bump ts version (make them all equal)

* fix new type error that surfaced when upgrading TS

* add yarn.lock

* 🚧 testing with older TS version again

* Revert "🚧 testing with older TS version again"

This reverts commit ca09f3c.

* add minimum permissions check utility (official github action)

* Revert "add minimum permissions check utility (official github action)"

This reverts commit f9dd5ea.

* test with "read-all|write-all" for a chromatic.yml action

* remove unused comments

* 🚧 try skip a test suite

* Revert "🚧 try skip a test suite"

This reverts commit ccf4711.

* 🚧 update all node-version to 19

* 💥 Force-tester GHA

* 💥 bump node-version to 20

* 💥 test with jsonModules again, but this time with node v20

* 🚧 revert type erasure (for tests)

* 🔥 remove hover from Box

* 🚧 test with module identifier import

* 🚧 squashme

* a working token type solution

* 📝 group Primitives in storybook

* no longer assert type, hint instead

* 📝 improve jsdoc for Box

* 📝 improve jsdoc for Box

* 🚧 test relative import for github action

* 🚧 test ordering of yarn builds

* 🚧 test ordering of yarn workspaces

* 🚧 test dependency for yarn workspaces

* 🐛 fix human error in token refactoring

* 📝 reword jsdoc

* ♻️ refactor

* 🚧 test again with module identifier import

* squashme

* 🚧 fully revert to importing .json

* 🚧 remove duplicate types

* 🔥 remove style-dicitonary format (now unused), fix shadow.json refs

* remove devDependency on tokens (for react)

* 📝♻️ update comments & naming

* 🚚 Oppdatert CSS-config etter ny primitives gruppering

* make border-color also control border-style

* add examples for Box to aksel.nav.no

* ⬆️ Yarn sort av dependencies

* 🎨 BorderWidth tokens

* 🎨 Css for borderRadius

* 🎨 Setup responsiveRadius utility

* ♻️ Forenklet borderRadius

* 🎨 refactor padding in box

* 🔥 Fjernet unødvendig kode

* 🎨 Oppdatert token for borderWidth

* 🐛 Default 0px border

* 🏷️ Refactor types

* 🐛 Fikset stories

* ♻️ refactor away one of the getResponsiveProps(), renaming

* ♻️ refactor + add token exceptions

* 🐛 new props based on BoxProps

* 📝 Oppdatert box-eksempler

* 📝 border-eksempler

* 📝 shadow-eksempel

* 📝 header demo

* 🔥 Fjernet theming demo, la til panel-demo

* 🚚 Flyttet show/hide inn i primitives

* 🚚 extract stateful colors to separate files

* 🚚 move shadow stateful tokens as well

* ♻️ rename some Box types

* 🚚 re-add missing token

* 🚚 move types file to utils, (bonus: fix some jsdoc)

* ➕ add @navikt/ds-tokens to react

* Update .changeset/happy-pianos-cheat.md

---------

Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>

.changeset/happy-pianos-cheat.md

@@ -0,0 +1,7 @@
+---
+"@navikt/ds-tokens": minor
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Box: Ny primitive, erstatter dagens `Panel`

@navikt/core/css/baseline/_utilities.css

@@ -28,6 +28,7 @@
 .navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -50,6 +51,7 @@
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
   clip: auto;
+  clip-path: none;
   height: auto;
   margin: 0;
   overflow: visible;

@navikt/core/css/config/_mappings.js

@@ -31,6 +31,34 @@ const StyleMappings = {
     },
   ],
   components: [
+    {
+      component: "Box",
+      main: primitivesCss,
+    },
+    {
+      component: "HGrid",
+      main: primitivesCss,
+    },
+    {
+      component: "HStack",
+      main: primitivesCss,
+    },
+    {
+      component: "VStack",
+      main: primitivesCss,
+    },
+    {
+      component: "Spacer",
+      main: primitivesCss,
+    },
+    {
+      component: "Show",
+      main: primitivesCss,
+    },
+    {
+      component: "Hide",
+      main: primitivesCss,
+    },
     {
       component: "Accordion",
       main: "accordion.css",
@@ -100,10 +128,6 @@ const StyleMappings = {
       main: "help-text.css",
       dependencies: ["popover.css"],
     },
-    {
-      component: "HGrid",
-      main: primitivesCss,
-    },
     { component: "Ingress", main: typoCss },
     {
       component: "InternalHeader",
@@ -139,26 +163,6 @@ const StyleMappings = {
     { component: "Select", main: formCss, dependencies: [typoCss] },
     { component: "Skeleton", main: "skeleton.css", dependencies: [] },
     { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    {
-      component: "HStack",
-      main: primitivesCss,
-    },
-    {
-      component: "VStack",
-      main: primitivesCss,
-    },
-    {
-      component: "Spacer",
-      main: primitivesCss,
-    },
-    {
-      component: "Show",
-      main: primitivesCss,
-    },
-    {
-      component: "Hide",
-      main: primitivesCss,
-    },
     { component: "Switch", main: formCss, dependencies: [typoCss] },
     { component: "Table", main: "table.css", dependencies: [typoCss] },
     { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },

@navikt/core/css/primitives/box.css

@@ -0,0 +1,117 @@
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: initial;
+  --__ac-box-padding-md: initial;
+  --__ac-box-padding-lg: initial;
+  --__ac-box-padding-xl: initial;
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-block-sm: initial;
+  --__ac-box-padding-inline-sm: initial;
+  --__ac-box-padding-block-md: initial;
+  --__ac-box-padding-inline-md: initial;
+  --__ac-box-padding-block-lg: initial;
+  --__ac-box-padding-inline-lg: initial;
+  --__ac-box-padding-block-xl: initial;
+  --__ac-box-padding-inline-xl: initial;
+  --__ac-box-padding: var(--__ac-box-padding-xs);
+  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: initial;
+  --__ac-box-border-radius-md: initial;
+  --__ac-box-border-radius-lg: initial;
+  --__ac-box-border-radius-xl: initial;
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
+  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
+  background-color: var(--__ac-box-background);
+  border-style: solid;
+  border-color: var(--__ac-box-border-color);
+  border-radius: var(--__ac-box-border-radius);
+  box-shadow: var(--__ac-box-shadow);
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+@media (min-width: 480px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-md,
+      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-md,
+      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-md,
+      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-lg,
+      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-lg,
+      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-lg,
+      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-lg,
+      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-xl,
+      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-xl,
+      var(
+        --__ac-box-padding-inline-lg,
+        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+      )
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-xl,
+      var(
+        --__ac-box-padding-block-lg,
+        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+      )
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-xl,
+      var(
+        --__ac-box-border-radius-lg,
+        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+      )
+    );
+  }
+}

@navikt/core/css/primitives/index.css

@@ -1,3 +1,4 @@
+@import "box.css";
 @import "hgrid.css";
 @import "stack.css";
 @import "responsive.css";

@navikt/core/react/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@floating-ui/react": "0.24.1",
     "@navikt/aksel-icons": "^5.4.1",
+    "@navikt/ds-tokens": "^5.4.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/grid/grid.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BodyLong, Grid, Cell, ContentContainer } from "../index";
 
 export default {
-  title: "ds-react/Grid",
+  title: "ds-react/Primitives/Grid",
   component: { Grid, Cell },
   parameters: {
     layout: "fullscreen",

@navikt/core/react/src/index.ts

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";