@navikt/ds-css 7.23.2 → 7.24.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 7.24.0
+
+### Minor Changes
+
+- LinkCard: :tada: Added new component 'LinkCard'. ([#3883](https://github.com/navikt/aksel/pull/3883))
+
+- Table: :tada: Added prop 'stickyHeader', allowing header to remain sticky while scrolling in table. ([#3893](https://github.com/navikt/aksel/pull/3893))
+
+### Patch Changes
+
+- Forms: Added built-in scroll-margin to TextField, Textarea and Select. ([#3897](https://github.com/navikt/aksel/pull/3897))
+
+- Switch: Size='small' are now visually comparable to radio and checkbox in the same size. ([#3892](https://github.com/navikt/aksel/pull/3892))
+
 ## 7.23.2
 
 ### Patch Changes

package/config/_mappings.js

@@ -145,6 +145,11 @@ const StyleMappings = {
     },
     { component: "Label", main: typoCss },
     { component: "Link", main: "link.css", dependencies: [typoCss] },
+    {
+      component: "LinkCard",
+      main: "link-card.css",
+      dependencies: [typoCss, "link-anchor.css"],
+    },
     {
       component: "LinkPanel",
       main: "link-panel.css",

package/darkside/form/select.darkside.css

@@ -11,6 +11,7 @@
   position: relative;
   padding: var(--ax-space-8);
   padding-right: var(--ax-space-40);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/switch.darkside.css

@@ -20,6 +20,7 @@
 
   .aksel-switch--small > & {
     height: 2rem;
+    width: 2.5rem;
     top: 0;
   }
 }
@@ -32,19 +33,21 @@
 
 .aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
+  --__axc-switch-inline-padding: 3.25rem;
 
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-2);
-  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding);
 
   .aksel-switch--right & {
-    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
+    padding: var(--__axc-switch-block-padding) var(--__axc-switch-inline-padding) var(--__axc-switch-block-padding) 0;
   }
 
   .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
+    --__axc-switch-inline-padding: 2.75rem;
   }
 
   &.aksel-switch--with-description {
@@ -87,7 +90,9 @@
   transition-timing-function: ease;
 
   .aksel-switch--small > & {
-    top: var(--ax-space-4);
+    top: var(--ax-space-6);
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .aksel-switch__input:checked ~ & {
@@ -135,6 +140,11 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
+  .aksel-switch--small & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
   .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
@@ -145,18 +155,15 @@
     top: 0;
   }
 
-  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
-    visibility: visible;
-    opacity: 1;
+  .aksel-switch--small > .aksel-switch__input:checked ~ .aksel-switch__track > & {
+    transform: translateX(1rem);
+    width: 1rem;
+    height: 1rem;
+    left: 0;
+    top: 0;
   }
 }
 
-.aksel-switch__checkmark {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 @media (hover: hover) and (pointer: fine) {
   .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.17rem);
@@ -165,6 +172,10 @@
   .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.1rem);
   }
+
+  .aksel-switch--small > .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 
 .aksel-switch--right {
@@ -227,6 +238,10 @@
     & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
+
+    &.aksel-switch--small > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
+      transform: translateX(1rem);
+    }
   }
 }
 

package/darkside/form/text-field.darkside.css

@@ -7,6 +7,7 @@
   min-height: 3rem;
   width: 100%;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &:hover {
     border-color: var(--ax-border-strong);

package/darkside/form/textarea.darkside.css

@@ -10,6 +10,7 @@
   width: 100%;
   display: block;
   color: var(--ax-text-neutral);
+  scroll-margin-block-start: 4rem;
 
   &::placeholder {
     color: var(--ax-text-neutral-subtle);

package/darkside/index.css

@@ -38,6 +38,8 @@
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
 @import "./link-panel.darkside.css" layer(aksel.components);
+@import "./link-anchor.darkside.css" layer(aksel.components);
+@import "./link-card.darkside.css" layer(aksel.components);
 @import "./loader.darkside.css" layer(aksel.components);
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);

package/darkside/link-anchor.darkside.css

@@ -0,0 +1,53 @@
+.aksel-link-anchor__overlay {
+  cursor: pointer;
+
+  &:focus-within {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+@supports selector(:has(*)) {
+  .aksel-link-anchor__overlay:focus-within {
+    outline: unset;
+  }
+
+  .aksel-link-anchor__overlay:has(:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.aksel-link-anchor {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+  color: inherit;
+
+  &:hover,
+  .aksel-link-anchor__overlay:hover & {
+    text-decoration-thickness: 0.111em;
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
+  }
+
+  .aksel-link-anchor__overlay &:focus-visible {
+    outline: none;
+  }
+}
+
+.aksel-link-anchor__arrow {
+  transition: transform 200ms;
+  transform: translateX(0);
+  flex-shrink: 0;
+
+  .aksel-link-anchor:hover &,
+  .aksel-link-anchor__overlay:hover & {
+    transform: translateX(4px);
+  }
+}

package/darkside/link-card.darkside.css

@@ -0,0 +1,109 @@
+.aksel-link-card {
+  --__axc-link-card-padding-block: var(--ax-space-16);
+  --__axc-link-card-padding-inline: var(--ax-space-20);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  text-decoration: none;
+  color: var(--ax-text-neutral);
+  transition-property: border-color, box-shadow, transform, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0, 1);
+  position: relative;
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
+  padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
+  cursor: pointer;
+  display: grid;
+  grid-template-areas:
+    "image image"
+    "icon title"
+    "icon description"
+    "icon footer";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: min-content min-content min-content auto;
+  align-items: center;
+
+  &:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
+    grid-template-rows: auto 1fr;
+
+    & .aksel-link-card__title {
+      align-items: center;
+    }
+
+    & .aksel-link-card__icon {
+      align-self: center;
+    }
+  }
+
+  &:hover {
+    border-color: var(--ax-border-default);
+    box-shadow: 0 0 0 1px var(--ax-border-default);
+  }
+}
+
+.aksel-link-card--small {
+  --__axc-link-card-padding-block: var(--ax-space-12);
+  --__axc-link-card-padding-inline: var(--ax-space-16);
+}
+
+.aksel-link-card__title {
+  grid-area: title;
+  color: var(--ax-text-subtle);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ax-space-8);
+  hyphens: auto;
+
+  .aksel-link-card[data-color="neutral"] &,
+  &[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+}
+
+.aksel-link-card__description {
+  grid-area: description;
+  margin-block-start: var(--ax-space-4);
+}
+
+.aksel-link-card__footer {
+  grid-area: footer;
+  margin-block-start: var(--ax-space-16);
+  display: flex;
+  align-self: flex-end;
+  gap: var(--ax-space-8);
+  flex-wrap: wrap;
+}
+
+.aksel-link-card__icon {
+  grid-area: icon;
+  width: max-content;
+  height: max-content;
+  display: grid;
+  place-content: center;
+  color: var(--ax-text-default);
+  align-self: flex-start;
+  margin-inline-end: var(--ax-space-16);
+
+  .aksel-link-card--small & {
+    margin-inline-end: var(--ax-space-12);
+  }
+}
+
+.aksel-link-card__image-container {
+  overflow: hidden;
+  grid-area: image;
+  margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
+  margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
+  border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  position: relative;
+
+  & :is(img, picture) {
+    object-fit: cover;
+    display: block;
+    max-width: 100%;
+    height: 100%;
+  }
+}

package/darkside/table.darkside.css

@@ -2,10 +2,23 @@
   width: 100%;
   border-collapse: collapse;
   display: table;
+
+  &.aksel-table--sticky-header {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
 }
 
 .aksel-table__header {
   display: table-header-group;
+
+  .aksel-table--sticky-header & {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--ax-bg-default);
+    box-sizing: border-box;
+  }
 }
 
 .aksel-table__body {

package/dist/component/form.css

@@ -743,6 +743,7 @@ li.navds-file-item {
   position: relative;
   padding: 0.5rem;
   padding-right: 2rem;
+  scroll-margin-block-start: 4rem;
 }
 @media (forced-colors: active) {
   .navds-select__input.navds-select__input.navds-select__input {
@@ -852,6 +853,7 @@ li.navds-file-item {
 }
 .navds-switch--small > .navds-switch__input {
   height: 2rem;
+  width: 2.5rem;
   top: 0;
 }
 /* Label */
@@ -869,10 +871,10 @@ li.navds-file-item {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem;
 }
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 2.75rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
 }
 .navds-switch--with-description,
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
@@ -900,7 +902,9 @@ li.navds-file-item {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1);
+  top: var(--a-spacing-1-alt);
+  width: 2.25rem;
+  height: 1.25rem;
 }
 .navds-switch--right > .navds-switch__input,
 .navds-switch--right > .navds-switch__track {
@@ -955,6 +959,10 @@ li.navds-file-item {
   align-items: center;
   justify-content: center;
 }
+.navds-switch--small .navds-switch__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
@@ -964,11 +972,12 @@ li.navds-file-item {
   left: 0;
   top: 0;
 }
-.navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
-  visibility: visible;
-}
-.navds-switch__checkmark {
-  visibility: hidden;
+.navds-switch--small > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+  width: 1rem;
+  height: 1rem;
+  left: 0;
+  top: 0;
 }
 @media (hover: hover) and (pointer: fine) {
   .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
@@ -978,6 +987,10 @@ li.navds-file-item {
   .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
     transform: translateX(1.125rem);
   }
+
+  .navds-switch--small > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.875rem);
+  }
 }
 .navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(0);
@@ -985,6 +998,9 @@ li.navds-file-item {
 .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
 }
+.navds-switch--small > .navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1rem);
+}
 /* Disabled */
 .navds-switch__input:disabled {
   appearance: none;
@@ -1085,6 +1101,7 @@ li.navds-file-item {
   min-height: 3rem;
   width: 100%;
   color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 .navds-text-field__input[size] {
   width: auto;
@@ -1169,6 +1186,7 @@ li.navds-file-item {
   width: 100%;
   display: block;
   color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+  scroll-margin-block-start: 4rem;
 }
 .navds-textarea__input::placeholder {
   color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));