@phillips/seldon 1.40.0 → 1.41.0

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -1,8 +1,9 @@
 @use '../../../allPartials' as *;
 
 .#{$px}-nav__item {
+  background: $pure-white;
+
   @include isHeaderMobile {
-    border-bottom: 1px solid #ccc;
     max-width: 320px;
     width: 100%;
   }
@@ -11,30 +12,32 @@
     align-items: center;
     display: flex;
     max-width: unset;
+  }
 
-    &:hover,
-    &:focus,
-    &:focus-within {
-      .#{$px}-nav__item--label {
-        color: $pure-black;
-      }
-    }
+  & > button {
+    @include DistinctDisplay;
 
-    & & {
-      border-bottom: 1px solid #ccc;
+    text-transform: uppercase;
+
+    &:hover::after,
+    &:focus::after {
+      background: $pure-black;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: $header-height;
     }
   }
 
-  & > button,
-  &--label {
-    /* TODO: Create token to handle these styles dynamically */
-    color: $soft-black;
+  & > button {
+    @include DistinctDisplay;
+    @include text($snwHeaderLink);
+
     display: block;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    letter-spacing: 0.125rem;
-    line-height: 0.8125rem;
-    text-transform: uppercase;
+    position: relative;
+    white-space: nowrap;
     width: 100%;
 
     @include isHeaderMobile {
@@ -51,8 +54,9 @@
     }
   }
 
+  // Submenu
   ul {
-    background: $off-white;
+    background: $pure-white;
     overflow: hidden scroll;
     position: absolute;
     right: 0;
@@ -64,20 +68,19 @@
   @include isHeaderDesktop {
     ul {
       align-content: start;
-      background: #f4f4f4;
       height: auto;
       left: 0;
       max-height: 0;
       min-height: 0;
       overflow: hidden;
       position: fixed;
-      top: 90px;
+      top: $header-submenu-top;
       width: 100%;
       z-index: -1;
 
       li {
-        display: flex;
-        justify-content: end;
+        display: inline;
+        white-space: nowrap;
 
         button,
         a,
@@ -86,17 +89,6 @@
             border: none;
           }
         }
-
-        span {
-          &--badge {
-            display: flex;
-            justify-content: flex-end;
-          }
-
-          &--label {
-            text-wrap: nowrap;
-          }
-        }
       }
     }
 
@@ -130,26 +122,28 @@
     z-index: 0;
   }
 
-  & > a,
-  & > button,
-  & > p {
+  & > button {
     background-color: transparent;
     border: 0;
     display: flex;
-    padding: 0.625rem;
+    padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
   }
 
   @include isHeaderMobile {
+    & > a,
+    & > button {
+      display: flex;
+      padding: 0.5rem 0.625rem;
+    }
+
     & > a:focus,
-    & > button:focus,
-    & > p:focus {
+    & > button:focus {
       background-color: #f4f4f4;
     }
 
     &:hover {
       & > a,
-      & > button,
-      & > p {
+      & > button {
         background-color: #f4f4f4;
       }
     }
@@ -164,26 +158,6 @@
       background: #f4f4f4;
     }
 
-    &:not(ul ul li)::after,
-    &:not(ul ul li a):focus::after,
-    &:not(ul ul li button):focus::after {
-      background: rgb(84, 84, 84);
-      content: '';
-      height: 2px;
-      left: 50%;
-      position: absolute;
-      top: 70%;
-      transform: translateX(-50%);
-      width: 0;
-    }
-
-    &:not(ul ul li):hover::after,
-    &:not(ul ul li) a:focus::after,
-    &:not(ul ul li) button:focus::after,
-    &:not(ul ul li) p:focus::after {
-      width: 85%;
-    }
-
     .#{$px}-nav__list-item {
       position: static;
       z-index: 1;
@@ -202,40 +176,15 @@
 }
 
 .#{$px}-nav__list__section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
   &--large-cta {
     margin-right: 1rem;
 
     @include isHeaderMobile {
       margin-right: 0;
     }
-    .#{$px}-nav__item {
-      &--badge {
-        /* TODO: Create token to handle these styles dynamically */
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        font-weight: 400;
-        justify-content: flex-end;
-        letter-spacing: 0.25rem;
-        line-height: 0.8125rem;
-        min-width: 25%;
-        text-align: right;
-        text-transform: uppercase;
-
-        @include pText(0.8125rem, $keyline-gray);
-
-        &:hover {
-          color: $keyline-gray;
-        }
-
-        @include isHeaderMobile {
-          /* TODO: Create token to handle these styles dynamically */
-          align-items: flex-start;
-          font-size: 0.6rem;
-          letter-spacing: 0.125rem;
-          min-width: 35%;
-        }
-      }
-    }
   }
 }

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -2,7 +2,7 @@
 
 .#{$px}-nav__list {
   display: flex;
-  justify-content: right;
+  justify-content: center;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -29,9 +29,6 @@
   }
 
   & .#{$px}-nav__item > & {
-    display: grid;
-    grid-template-columns: 20% 20% 20% 20% 20%;
-
     @include isHeaderMobile {
       display: none;
 
@@ -43,50 +40,6 @@
   }
 
   &__section {
-    &--large-cta {
-      grid-column: 1 / span 4;
-      height: fit-content;
-
-      .#{$px}-nav__item:first-child {
-        a {
-          padding-top: 0;
-        }
-      }
-
-      .#{$px}-nav__item:last-child {
-        justify-content: flex-end;
-        &:has(> .#{$px}-link--navLinkSm) {
-          border-bottom: none;
-          padding-bottom: 0;
-        }
-        .#{$px}-link--navLinkSm {
-          .#{$px}-nav__item--label {
-            color: $cta-blue;
-          }
-        }
-      }
-    }
-
-    &--small-cta {
-      display: grid;
-      grid-column: 4 / span 2;
-      height: fit-content;
-
-      @include isHeaderMobile {
-        margin-top: 2rem;
-      }
-    }
-
-    &--large-cta + &--small-cta {
-      display: grid;
-      grid-column: 5 / span 1;
-      height: fit-content;
-    }
-  }
-
-  > li:not(.#{$px}-user-management) {
-    @include isHeaderDesktop {
-      height: 60px;
-    }
+    width: 100%;
   }
 }

package/dist/scss/components/Navigation/_navigation.scss

@@ -1,8 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-nav {
-  background: $off-white;
-  color: $soft-black;
+  background: $pure-white;
   height: 100%;
   overflow: hidden;
   padding-top: 4.5rem;
@@ -10,7 +9,6 @@
   width: 100%;
 
   @include isHeaderDesktop {
-    background: $pure-white;
     display: flex;
     flex-wrap: wrap;
     overflow: visible;

package/dist/scss/components/Row/_row.scss

@@ -4,4 +4,8 @@
   // horizontal padding is fixed
   padding-left: $spacing-lg;
   padding-right: $spacing-lg;
+
+  * .#{$px}-text:last-child {
+    margin-bottom: 0;
+  }
 }

package/dist/scss/components/Search/_search.scss

@@ -52,7 +52,7 @@
     overflow: hidden;
     position: absolute;
     right: 0;
-    top: calc($header-height + $user-management-height);
+    top: $header-submenu-top;
     transition: 0.5s ease;
     width: 0;
     z-index: 3;

package/dist/scss/components/Text/_text.scss

@@ -10,7 +10,7 @@
 
 h1.#{$px}-text,
 blockquote.#{$px}-text {
-  margin-bottom: $spacing-xl;
+  margin-bottom: $spacing-lg;
 }
 
 h2.#{$px}-text {
@@ -19,7 +19,9 @@ h2.#{$px}-text {
 h3.#{$px}-text {
   margin-bottom: $spacing-md;
 }
-h4.#{$px}-text {
+h4.#{$px}-text,
+h5.#{$px}-text,
+h6.#{$px}-text {
   margin-bottom: $spacing-sm;
 }
 p.#{$px}-text {

package/dist/scss/components/UserManagement/_userManagement.scss

@@ -2,7 +2,6 @@
 
 .#{$px}-user-management {
   align-items: center;
-  background-color: #f4f4f4;
   display: flex;
   height: $user-management-height;
   justify-content: flex-end;
@@ -46,13 +45,6 @@
       @include isHeaderMobile {
         width: 100%;
       }
-
-      & > span {
-        color: $soft-black;
-        font-size: 0.8125rem;
-        font-weight: 500;
-        letter-spacing: 0.125rem;
-      }
     }
   }
 

package/dist/scss/components/Video/_video.scss

@@ -0,0 +1,17 @@
+@use '../../allPartials' as *;
+
+.#{$px}-video {
+  aspect-ratio: var(--aspect-ratio);
+  display: block;
+  height: auto;
+  position: relative;
+  width: 100%;
+
+  &__iframe {
+    border: 0;
+    height: 100%;
+    inset: 0;
+    position: absolute;
+    width: 100%;
+  }
+}

package/dist/utils/index.d.ts

@@ -14,7 +14,8 @@ export declare enum PaddingTokens {
     sm = "sm",
     md = "md",
     lg = "lg",
-    xl = "xl"
+    xl = "xl",
+    xxl = "xxl"
 }
 export declare const noOp: () => void;
 export interface InputProps {

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { kebabCase as d } from "../node_modules/change-case/dist/index.js";
 import * as u from "react";
-const i = "phillips", v = ({ id: e, ...n }, a) => {
+const i = "phillips", x = ({ id: e, ...n }, a) => {
   const t = d(a);
   return {
     ...n,
@@ -9,10 +9,10 @@ const i = "phillips", v = ({ id: e, ...n }, a) => {
     className: `${i}-${t}`
   };
 };
-var p = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e))(p || {});
-const g = () => {
+var p = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(p || {});
+const v = () => {
 };
-function x({
+function g({
   disabled: e = !1,
   id: n,
   invalid: a = !1,
@@ -47,8 +47,8 @@ export {
   N as encodeURLSearchParams,
   I as findChildrenOfType,
   w as generatePaddingClassName,
-  v as getCommonProps,
-  g as noOp,
+  x as getCommonProps,
+  v as noOp,
   i as px,
-  x as useNormalizedInputProps
+  g as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -34,8 +34,9 @@
     "clean:stories": "rimraf './storybook-static'",
     "create-component": "node --no-warnings --loader ts-node/esm .template/scripts/createComponent.ts",
     "format": "prettier . --write",
-    "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
+    "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles && npm run lint:md",
     "lint:styles": "stylelint \"src/**/*.scss\" --fix",
+    "lint:md": "markdownlint \"src/**/*.{md,mdx}\" --fix",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -85,6 +86,7 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.1.4",
+    "markdownlint-cli": "^0.41.0",
     "prettier": "3.3.3",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",