Lerna versionbump [ci skip]

- @navikt/ds-react@0.5.3
Update index.ts
2026-10-13 09:12:03 +00:00 · 2021-06-04 16:12:35 +00:00 · 2021-06-04 17:57:19 +02:00 · 2021-06-04 09:55:02 +00:00 · 2021-06-04 11:40:23 +02:00
17 changed files with 91 additions and 94 deletions
@@ -1,8 +1,8 @@
 .navds-accordion-anchor-menu {
-  padding: 1rem 0;
+  padding: var(--navds-spacing-4) 0;
 }

 .navds-accordion-anchor-menu__title {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: var(--navds-spacing-4);
+  margin-right: var(--navds-spacing-4);
 }
@@ -32,7 +32,7 @@
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
  display: flex;
-  padding: 0.75rem 1rem;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
  line-height: 1.5rem; /* TODO: fix typography. */
 }

@@ -40,7 +40,7 @@
  font-size: 1.5rem;
  color: var(--navds-color-text-link);
  flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }

 .navds-accordion-menu-collapsable--open
@@ -53,7 +53,7 @@
 .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }

 .navds-accordion-menu-collapsable
@@ -63,7 +63,7 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
 }

 .navds-accordion-menu-collapsable
@@ -75,7 +75,7 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 4rem;
+  padding-left: var(--navds-spacing-16);
 }

 .navds-accordion-menu-item:focus,
@@ -26,7 +26,7 @@
  height: 1.25em;
  transform: rotateZ(0deg);
  flex-shrink: 0;
-  margin-left: 1rem;
+  margin-left: var(--navds-spacing-4);
 }

 .navds-accordion__chevron--up {
@@ -38,7 +38,7 @@
 }

 .navds-accordion__button {
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: 4px;
  background: transparent;
  border: 0;
@@ -57,7 +57,7 @@
 }

 .navds-accordion__content {
-  padding: 0.5rem 1rem 1rem;
+  padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
 }

 .navds-accordion--open .navds-accordion__content {
@@ -3,7 +3,7 @@
  border: var(--navds-border-default);

  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875em 1em;
+  padding: 1.1875rem var(--navds-spacing-4);
  display: grid;
  grid-auto-flow: column;
  column-gap: 0.75rem;
@@ -12,7 +12,7 @@

 .navds-alert--small {
  border-radius: 0;
-  padding: 0.5em 1em;
+  padding: var(--navds-spacing-2) var(--navds-spacing-4);
 }

 .navds-alert > svg {
@@ -11,13 +11,13 @@
  border-style: solid;
  border-width: 2px;

-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
 }

-.navds-button.navds-button--small {
+.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button:focus {
@@ -35,14 +35,14 @@
  background-color: var(--navds-color-action-hover);
  border-width: 0;

-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.625rem var(--navds-spacing-8);
 }

 .navds-button--primary:hover.navds-button--small,
 .navds-button--primary:active.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.3125rem var(--navds-spacing-4);
 }

 .navds-button--primary:active {
@@ -86,8 +86,8 @@

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.625rem var(--navds-spacing-8);
  border-width: 0;
  transform: translateY(calc(-1 * 2px));
  position: relative;
@@ -97,7 +97,7 @@
 .navds-button--action.navds-button--small,
 .navds-button--danger.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.3125rem var(--navds-spacing-4);
 }

 .navds-button--action:not(:focus),
@@ -155,8 +155,8 @@

 .navds-button--danger:focus,
 .navds-button--action:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
  transform: translateY(calc(-1 * 2px));
  position: relative;
  border-width: 2px;
@@ -165,7 +165,7 @@
 .navds-button--action:focus.navds-button--small,
 .navds-button--danger:focus.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button--action:hover:focus {
@@ -178,8 +178,8 @@

 .navds-button--action:hover:focus,
 .navds-button--danger:hover:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.625rem var(--navds-spacing-8);
  border-width: 0;
  color: var(--navds-color-text-inverse);
 }
@@ -187,7 +187,7 @@
 .navds-button--action:hover:focus.navds-button--small,
 .navds-button--danger:hover:focus.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.3125rem var(--navds-spacing-4);
 }

 .navds-button--action:active:focus {
@@ -202,8 +202,8 @@

 .navds-button--action:active:focus,
 .navds-button--danger:active:focus {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 2px);
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
  transform: translateY(0);
  position: relative;
  border-width: 2px;
@@ -213,7 +213,7 @@
 .navds-button--action:active:focus.navds-button--small,
 .navds-button--danger:active:focus.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125em - 2px) calc(1.11em - 2px);
+  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button--action:hover:focus:active {
@@ -264,8 +264,8 @@
 **************************/

 .navds-button:disabled:disabled {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.625rem var(--navds-spacing-8);
  background-color: var(--navds-color-disabled);
  color: var(--navds-color-text-inverse);
  cursor: not-allowed;
@@ -276,5 +276,5 @@

 .navds-button:disabled:disabled.navds-button--small {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125em 1.11em;
+  padding: 0.3125rem var(--navds-spacing-4);
 }
@@ -2,9 +2,9 @@
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
-  padding: 0.25em;
+  padding: var(--navds-spacing-1);
 }

 .navds-copy-to-clipboard__popover {
-  padding: 0.25rem;
+  padding: var(--navds-spacing-1);
 }
@@ -21,7 +21,7 @@
  **************************/

 .navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
+  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
  align-self: stretch;
@@ -47,7 +47,7 @@

 .navds-header__user {
  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
+  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
  border-left: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -56,5 +56,5 @@
 }

 .navds-header__name.navds-body-short {
-  margin-right: 1rem;
+  margin-right: var(--navds-spacing-4);
 }
@@ -168,12 +168,12 @@
 }

 .navds-layout__header-title {
-  margin: 0.25rem 0.85rem;
+  margin: var(--navds-spacing-1) var(--navds-spacing-3);
 }

@media (min-width: 448px) {
  .navds-layout__header-title {
-    margin: 0.25rem 0;
+    margin: var(--navds-spacing-1) 0;
  }
 }

@@ -6,7 +6,7 @@
  background-color: var(--navds-color-background);
  display: block;
  position: relative;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: 4px;
  overflow: auto;
  max-height: 100%;
@@ -29,7 +29,7 @@
  left: 0;
  right: 0;
  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
 }

 .navds-modal__button--shake {
@@ -45,9 +45,10 @@

 .navds-modal__button {
  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
  display: flex;
+  padding: var(--navds-spacing-2);
 }

 .navds-modal__button svg {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.5.2",
+  "version": "0.5.3",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.3.1",
+    "@navikt/ds-tokens": "^0.3.2",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -1,7 +1,7 @@
 .navds-panel {
  background-color: var(--navds-color-white);
  display: block;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: var(--navds-border-radius);
  border: 1px solid transparent;
 }
@@ -6,7 +6,7 @@
  display: inline-block;

  /* Padding calculated based on 16px font for 24px tall tag */
-  padding: 0.0625rem 0.5rem;
+  padding: 0.0625rem var(--navds-spacing-2);
 }

 .navds-tag--error {
@@ -11,7 +11,7 @@
 }

 .navds-title--2xl.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-s);
+  margin-bottom: var(--navds-spacing-5);
 }

 .navds-title--xl {
@@ -21,7 +21,7 @@
 }

 .navds-title--xl.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-xs);
+  margin-bottom: var(--navds-spacing-4);
 }

 .navds-title--l {
@@ -31,7 +31,7 @@
 }

 .navds-title--l.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .navds-title--m {
@@ -41,7 +41,7 @@
 }

 .navds-title--m.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .navds-title--s {
@@ -51,7 +51,7 @@
 }

 .navds-title--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 /* Ingress */
@@ -63,7 +63,7 @@
 }

 .navds-ingress.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xl);
+  margin-bottom: var(--navds-spacing-10);
 }

 /* Body */
@@ -82,11 +82,11 @@
 }

 .navds-body-long.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-l);
+  margin-bottom: var(--navds-spacing-7);
 }

 .navds-body-short.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .navds-body--s {
@@ -96,11 +96,11 @@
 }

 .navds-body-long.navds-body--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-m);
+  margin-bottom: var(--navds-spacing-6);
 }

 .navds-body-short.navds-body--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 /* Label */
@@ -113,7 +113,7 @@
 }

 .navds-label.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-2xs);
+  margin-bottom: var(--navds-spacing-3);
 }

 .navds-label--s {
@@ -123,7 +123,7 @@
 }

 .navds-label--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 /* Small text */
@@ -136,7 +136,7 @@
 }

 .navds-detail.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }

 .navds-detail--s {
@@ -144,5 +144,5 @@
 }

 .navds-detail--s.navds-typo--spacing {
-  margin-bottom: var(--navds-font-spacing-3xs);
+  margin-bottom: var(--navds-spacing-2);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.5.2",
+  "version": "0.5.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@ export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
-export { LinkPanel, LinkPanelProps } from "./link-panel/index";
+export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
 export {
  Title,
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.3.1",
+  "version": "0.3.2",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -161,17 +161,6 @@ module.exports = {
        m: { value: getFontSize(16) },
        s: { value: getFontSize(14) },
      },
-      spacing: {
-        "3xl": { value: getFontSize(40) },
-        "2xl": { value: getFontSize(36) },
-        xl: { value: getFontSize(32) },
-        l: { value: getFontSize(28) },
-        m: { value: getFontSize(24) },
-        s: { value: getFontSize(20) },
-        xs: { value: getFontSize(16) },
-        "2xs": { value: getFontSize(12) },
-        "3xs": { value: getFontSize(8) },
-      },
      weight: {
        bold: { value: "600" },
        regular: { value: "400" },
@@ -189,14 +178,14 @@ module.exports = {
    contentContainer: {
      maxWidth: { value: "79.5rem" },
      padding: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "1.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.6.value}" },
      },
    },
    grid: {
      gutter: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "1.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.6.value}" },
      },
    },
    layout: {
@@ -205,20 +194,18 @@ module.exports = {
        gray: { value: "{navds.color.gray.10.value}" },
      },
      padding: {
-        small: { value: "1rem" },
-        mediumAndLarger: { value: "2.5rem" },
+        small: { value: "{navds.spacing.4.value}" },
+        mediumAndLarger: { value: "{navds.spacing.10.value}" },
      },
    },
-    z: {
-      index: {
-        modal: {
-          content: { value: "1010" },
-          overlay: { value: "1000" },
-        },
-        popover: {
-          default: { value: "2000" },
-          arrow: { value: "-1" },
-        },
+    "z-index": {
+      modal: {
+        content: { value: "1010" },
+        overlay: { value: "1000" },
+      },
+      popover: {
+        default: { value: "2000" },
+        arrow: { value: "-1" },
      },
    },
    sidebar: {
@@ -226,5 +213,14 @@ module.exports = {
        offset: { value: "0" },
      },
    },
+    spacing: Array(24)
+      .fill(0)
+      .reduce(
+        (spacing, _, index) => ({
+          ...spacing,
+          [index + 1]: { value: `${(index + 1) / 4}rem` },
+        }),
+        {}
+      ),
  },
 };
Author	SHA1	Message	Date
github-actions[bot]	3e41d0e6c5	Lerna versionbump [ci skip] - @navikt/ds-react@0.5.3	2021-06-04 16:12:35 +00:00
Ken	d304309962	Update index.ts	2021-06-04 17:57:19 +02:00
github-actions[bot]	360294cab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.3 - @navikt/ds-tokens@0.3.2	2021-06-04 09:55:02 +00:00
Andreas NordahlandKen	cac9c5d1ed	spacing as tokens (#1114 ) * spacing as token * missed a few * fikset typo spacing * fikset button sizing Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-06-04 11:40:23 +02:00