@nationalarchives/frontend 0.31.0 → 0.33.0

package/nationalarchives/utilities/tables/_index.scss

@@ -8,37 +8,39 @@
 @use "../../tools/spacing";
 @use "../../tools/typography";
 
-$table-overflow-shadow-width: 1.5rem;
+$table-overflow-shadow-width: 1.25rem;
+$table-overflow-shadow-colour: rgb(0 0 0 / 40%);
+$table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
 
-@property --left-fade {
+@property --overflow-shadow-start {
   syntax: "<color>";
   inherits: false;
-  initial-value: rgb(0 0 0 / 0%);
+  initial-value: #{$table-overflow-shadow-colour-hidden};
 }
 
-@property --right-fade {
+@property --overflow-shadow-end {
   syntax: "<color>";
   inherits: false;
-  initial-value: rgb(0 0 0 / 0%);
+  initial-value: #{$table-overflow-shadow-colour-hidden};
 }
 
-@keyframes scrollfade {
+@keyframes overflow-shadows {
   0% {
-    --left-fade: rgb(0 0 0 / 0%);
-    --right-fade: rgb(0 0 0 / 40%);
+    --overflow-shadow-start: #{$table-overflow-shadow-colour-hidden};
+    --overflow-shadow-end: #{$table-overflow-shadow-colour};
   }
 
-  10% {
-    --left-fade: rgb(0 0 0 / 40%);
+  5% {
+    --overflow-shadow-start: #{$table-overflow-shadow-colour};
   }
 
-  90% {
-    --right-fade: rgb(0 0 0 / 40%);
+  95% {
+    --overflow-shadow-end: #{$table-overflow-shadow-colour};
   }
 
   100% {
-    --right-fade: rgb(0 0 0 / 0%);
-    --left-fade: rgb(0 0 0 / 40%);
+    --overflow-shadow-start: #{$table-overflow-shadow-colour};
+    --overflow-shadow-end: #{$table-overflow-shadow-colour-hidden};
   }
 }
 
@@ -163,51 +165,154 @@ $table-overflow-shadow-width: 1.5rem;
   overflow: auto;
 
   background:
+    linear-gradient(
+      to right,
+      colour.colour-var("background") 50%,
+      rgb(255 255 255 / 0%)
+    ),
+    linear-gradient(
+        to right,
+        rgb(255 255 255 / 0%),
+        colour.colour-var("background") 50%
+      )
+      0 100%,
     radial-gradient(
       ellipse #{$table-overflow-shadow-width} 50% at left center,
-      var(--left-fade),
-      rgb(0 0 0 / 0%)
+      #{$table-overflow-shadow-colour},
+      #{$table-overflow-shadow-colour-hidden}
     ),
     radial-gradient(
         ellipse #{$table-overflow-shadow-width} 50% at right center,
-        var(--right-fade),
-        rgb(0 0 0 / 0%)
+        #{$table-overflow-shadow-colour},
+        #{$table-overflow-shadow-colour-hidden}
       )
-      transparent;
+      0 100% transparent;
+  background-size:
+    #{$table-overflow-shadow-width * 2} 100%,
+    #{$table-overflow-shadow-width * 2} 100%,
+    100% 100%,
+    100% 100%;
+  background-repeat: no-repeat;
+  background-position:
+    0 0,
+    100%,
+    0 0,
+    100%;
+  background-attachment: local, local, scroll, scroll;
 
   border-radius: 0.1px;
 
   container-type: inline-size;
 
-  animation: scrollfade ease-out;
-  animation-timeline: --scrollfade;
-  scroll-timeline: --scrollfade x;
+  contain: paint;
+
+  /*
+  * ------------------------------------------
+  * Can remove the @supports rule when support
+  * for the scroll-driven animations below has
+  * been enabled by default in Firefox and the
+  * documented scroll-timeline syntax (x and y
+  * as opposed to vertical and horizontal) can
+  * be used
+  * https://caniuse.com/mdn-css_properties_animation-timeline_view
+  * ------------------------------------------
+  */
+  @supports (scroll-timeline: --overflow-shadows x) {
+    background:
+      radial-gradient(
+        ellipse #{$table-overflow-shadow-width} 50% at left center,
+        var(--overflow-shadow-start),
+        #{$table-overflow-shadow-colour-hidden}
+      ),
+      radial-gradient(
+          ellipse #{$table-overflow-shadow-width} 50% at right center,
+          var(--overflow-shadow-end),
+          #{$table-overflow-shadow-colour-hidden}
+        )
+        transparent;
+    background-position: 0;
+
+    animation: overflow-shadows 1ms linear;
+    animation-timeline: --overflow-shadows;
+    scroll-timeline: --overflow-shadows x;
+  }
 
   &:last-child {
     margin-bottom: 0;
   }
 
-  &:focus-visible {
-    @include a11y.focus-outline;
+  &:focus:not(:focus-visible) {
+    @include a11y.no-focus-outline;
   }
 
-  .tna-table__caption {
-    max-width: calc(100vw - #{grid.gutter-width-double()});
-    max-width: 100cqw;
+  .tna-table {
+    &__caption {
+      max-width: calc(100vw - #{grid.gutter-width-double()});
+      max-width: 100cqw;
 
-    position: sticky;
-    left: 0;
+      position: sticky;
+      left: 0;
 
-    @include media.on-tiny {
-      max-width: calc(100vw - #{grid.gutter-width-tiny-double()});
-      max-width: 100cqw;
+      @include media.on-tiny {
+        max-width: calc(100vw - #{grid.gutter-width-tiny-double()});
+        max-width: 100cqw;
+      }
     }
   }
 
+  // &--sticky-first-column {
+  //   background: radial-gradient(
+  //       ellipse #{$table-overflow-shadow-width} 50% at right center,
+  //       var(--overflow-shadow-end),
+  //       #{$table-overflow-shadow-colour-hidden}
+  //     )
+  //     transparent;
+
+  //   .tna-table {
+  //     &__header,
+  //     &__cell {
+  //       &:first-child {
+  //         max-width: 50vw;
+  //         max-width: 50cqw;
+
+  //         position: sticky;
+  //         left: 0;
+  //         z-index: 1;
+
+  //         overflow-wrap: break-word;
+
+  //         hyphens: auto;
+  //         @include colour.colour-background("background");
+
+  //         &::after {
+  //           content: "";
+
+  //           width: 0.75rem;
+
+  //           position: absolute;
+  //           top: 0;
+  //           bottom: -1px;
+  //           left: 100%;
+
+  //           background: linear-gradient(
+  //             90deg,
+  //             var(--overflow-shadow-start) 0%,
+  //             #{$table-overflow-shadow-colour-hidden} 100%
+  //           );
+  //           animation: overflow-shadows linear;
+  //           animation-timeline: --overflow-shadows;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+
   &--scroll {
-    .tna-table__caption {
-      &::after {
-        content: " (scroll to see more)";
+    .tna-table {
+      &__caption {
+        &::after {
+          content: " (scroll to see more)";
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",