@norges-domstoler/dds-components 17.0.0 → 17.2.0

package/README.md

@@ -54,6 +54,7 @@ Tilgjengelige komponenter:
 - Chip
 - DatePicker
 - DescriptionList
+- DetailList
 - Divider
 - Drawer
 - EmptyContent
@@ -76,6 +77,7 @@ Tilgjengelige komponenter:
 - RadioButton
 - Search
 - Select
+- Skeleton
 - SkipToContent
 - Spinner
 - Stack

package/dist/index.css

@@ -717,6 +717,13 @@
 :where(.Input_char-counter) {
   margin-left: auto;
 }
+:where(.Input_icon) {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: 1;
+  color: var(--dds-color-icon-default);
+}
 
 /* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
 .TextOverflowEllipsis_wrapper {
@@ -1584,6 +1591,54 @@
   margin: var(--dds-spacing-x2);
 }
 
+/* src/components/DetailList/DetailList.module.css */
+.DetailList_list {
+  display: table;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.DetailList_list--with-dividers {
+  .DetailList_row {
+    border-bottom: 1px solid var(--dds-color-border-default);
+  }
+}
+.DetailList_list--striped {
+  .DetailList_row {
+    &:nth-of-type(even) {
+      background-color: var(--dds-color-surface-default);
+    }
+    &:nth-of-type(odd) {
+      background-color: var(--dds-color-surface-subtle);
+    }
+  }
+}
+.DetailList_list--normal {
+  .DetailList_cell {
+    padding-block: var(--dds-spacing-x1-5);
+    padding-inline: var(--dds-spacing-x0-75);
+  }
+}
+.DetailList_list--compact {
+  .DetailList_cell {
+    padding: var(--dds-spacing-x0-75);
+  }
+}
+.DetailList_list--extra-compact {
+  .DetailList_cell {
+    padding: var(--dds-spacing-x0-5);
+  }
+}
+.DetailList_row {
+  display: table-row;
+}
+.DetailList_cell {
+  display: table-cell;
+}
+.DetailList_term {
+  font-weight: var(--dds-font-weight-bold);
+}
+
 /* src/components/Drawer/Drawer.module.css */
 .Drawer_container {
   --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
@@ -2654,9 +2709,14 @@
   box-sizing: border-box;
   max-width: 100%;
 }
-.Select_icon {
-  margin-right: var(--dds-spacing-x0-5);
-  margin-left: -1px;
+.Select_icon--medium {
+  left: var(--dds-spacing-x0-75);
+}
+.Select_icon--small {
+  left: var(--dds-spacing-x0-75);
+}
+.Select_icon--tiny {
+  left: var(--dds-spacing-x0-5);
 }
 .Select_control {
   &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
@@ -2932,12 +2992,7 @@
   padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
 }
 .Search_search-icon {
-  position: absolute;
   left: var(--dds-spacing-x0-75);
-  top: 50%;
-  transform: translate(0, -50%);
-  z-index: 1;
-  color: var(--dds-color-icon-default);
 }
 .Search_clear-button {
   position: absolute;
@@ -3112,6 +3167,20 @@
   border-radius: var(--dds-border-radius-rounded);
 }
 
+/* src/components/Skeleton/Skeleton.module.css */
+@keyframes Skeleton_ddsSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+.Skeleton_container {
+  animation: Skeleton_ddsSkeletonAnimation 0.75s ease-out infinite alternate;
+  background-color: var(--dds-color-surface-skeleton);
+}
+
 /* src/components/SkipToContent/SkipToContent.module.css */
 .SkipToContent_wrapper {
   background-color: var(--dds-color-surface-inverse-default);
@@ -3218,6 +3287,14 @@
     font: var(--dds-font-body-sans-01);
     font-weight: var(--dds-font-weight-bold);
   }
+  .Table_row--body {
+    &:nth-of-type(odd) {
+      background-color: var(--dds-color-surface-subtle);
+    }
+    &:nth-of-type(even) {
+      background-color: var(--dds-color-surface-default);
+    }
+  }
 }
 .Table_row {
   @media (prefers-reduced-motion: no-preference) {
@@ -3246,9 +3323,9 @@
   &.Table_row--selected:nth-of-type(odd) {
     background-color: var(--dds-color-surface-selected-default);
   }
-}
-.Table_row--hoverable:hover {
-  background-color: var(--dds-color-surface-hover-default);
+  &.Table_row--hoverable:hover {
+    background-color: var(--dds-color-surface-hover-default);
+  }
 }
 .Table_cell--head {
   background-color: var(--dds-color-brand-primary-subtle);
@@ -3480,21 +3557,14 @@
 .TextInput_input--extended {
   width: 100%;
 }
-.TextInput_icon {
-  position: absolute;
-  z-index: 1;
-}
 .TextInput_icon--medium {
   left: var(--dds-spacing-x0-75);
-  top: calc(50% - (var(--dds-icon-size-medium) / 2));
 }
 .TextInput_icon--small {
   left: var(--dds-spacing-x0-75);
-  top: calc(50% - (var(--dds-icon-size-medium) / 2));
 }
 .TextInput_icon--tiny {
   left: var(--dds-spacing-x0-5);
-  top: calc(50% - (var(--dds-icon-size-small) / 2));
 }
 .TextInput_label {
   display: block;