@danske/sapphire-css 31.1.1 → 31.2.1

package/components/table/table.module.css

@@ -140,7 +140,9 @@
 
 .sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover
   .sapphire-table__headCell_container,
-.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover
+.sapphire-table__headCell.sapphire-table__headCell--sortable:not(
+    .js-hover
+  ):hover
   .sapphire-table__headCell_container {
   background-color: var(--sapphire-table-color-background-hover);
   border-radius: var(--sapphire-table-size-radius-hover);
@@ -210,6 +212,10 @@
   width: var(--sapphire-table-size-width-selection-cell);
 }
 
+.sapphire-table__selectionCell:not(:first-child) {
+  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-default);
+}
+
 .sapphire-table__cell:first-child {
   padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
 }
@@ -241,25 +247,63 @@
 /**
 * Row divider. Only shown when row is not focused, because of z-index issue with the focus ring.
 */
-.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible) {
+.sapphire-table__row:not(
+    .is-focus,
+    :not(.js-focus):focus-visible,
+    .sapphire-table__row--expanded
+  ) {
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-table-color-border-separator);
+}
+
+.sapphire-table__row-expanded-view {
   box-shadow: inset 0px -1px 0px 0px var(--sapphire-table-color-border-separator);
 }
 
+.sapphire-table__row-expand-button {
+  display: inline-flex; /* for transform to take effect */
+  transition: transform ease-in-out var(--sapphire-table-time-transition-arrow);
+  margin-left: var(--sapphire-table-size-spacing-icon-left-default);
+}
+
+.sapphire-table td:has(.sapphire-table__row-expand-button) {
+  width: 0; /* To prevent the cell from growing more than needed. only needed when td is used for cells */
+}
+
+.sapphire-table__row--expanded .sapphire-table__row-expand-button {
+  transform: rotate(180deg);
+}
+
 .sapphire-table--without-last-divider
-  .sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible):last-child {
+  .sapphire-table__row:not(
+    .is-focus,
+    :not(.js-focus):focus-visible
+  ):last-child {
   box-shadow: none;
 }
 
-.sapphire-table--interactive .sapphire-table__row {
+.sapphire-table--interactive .sapphire-table__row,
+.sapphire-table__row--interactive {
   cursor: default; /* by default cursor is text selection, which is unintuitive when rows are clickable */
 }
 
 .sapphire-table--interactive .sapphire-table__row.is-hover,
-.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover {
+.sapphire-table__row--interactive.is-hover,
+.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,
+.sapphire-table__row--interactive:not(.js-hover):hover {
   background-color: var(--sapphire-table-color-background-hover);
   cursor: pointer;
 }
 
+.sapphire-table__row--highlighted {
+  background-color: var(--sapphire-table-color-background-hover);
+}
+.sapphire-table__row--highlighted > *:first-child /* setting the highlight style on the first cell,
+since box-shadow is used for separator on rows,
+and to avoid the complications of merging the two shadows */ {
+  box-shadow: inset var(--sapphire-table-size-width-highlight) 0px 0px 0px
+    var(--sapphire-table-color-background-highlight);
+}
+
 /**
  * Selection actions. Optionally shown when a table uses multiple selection.
  */

package/components/table/table.module.css.d.ts

@@ -27,8 +27,13 @@ declare const styles: {
   readonly "sapphire-table__headCell_content--ellipsed": string;
   readonly "sapphire-table__row--active": string;
   readonly "sapphire-table__row--selected": string;
+  readonly "sapphire-table__row--expanded": string;
+  readonly "sapphire-table__row-expanded-view": string;
+  readonly "sapphire-table__row-expand-button": string;
   readonly "sapphire-table--without-last-divider": string;
   readonly "sapphire-table--interactive": string;
+  readonly "sapphire-table__row--interactive": string;
+  readonly "sapphire-table__row--highlighted": string;
   readonly "sapphire-table__selection-action-bar": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;

package/components/tabs/tabs.module.css

@@ -127,8 +127,12 @@
   z-index: 1;
 }
 
-.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   color: var(--sapphire-tabs-color-content-inactive-hover);
 }
 

package/components/tag/tag.module.css

@@ -64,8 +64,12 @@
 }
 
 /* Actionable */
-.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(--sapphire-tag-color-background-primary-hover);
   cursor: pointer;
 }

package/components/textField/textField.module.css

@@ -271,7 +271,9 @@
   color: var(--sapphire-text-field-color-content-stepper-default);
 }
 
-.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(
+    .js-hover
+  ):hover,
 .sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
   background-color: var(--sapphire-text-field-color-background-stepper-hover);
   color: var(--sapphire-text-field-color-content-stepper-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "31.1.1",
+  "version": "31.2.1",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -46,7 +46,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^2.0.0",
-    "@danske/sapphire-react": "3.17.0",
+    "@danske/sapphire-react": "^3.39.2",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^39.1.0"
+    "@danske/sapphire-design-tokens": "^39.2.0"
   },
-  "gitHead": "5aa8a7225377aa11bab09590c0a7d631ef87c7e0"
+  "gitHead": "a8ebdf9b67baf003c82173820a5244a9755d7f95"
 }