@phillips/seldon 1.26.1 → 1.27.0

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

@@ -0,0 +1,114 @@
+@import '@phillips/seldon/dist/scss/vars';
+
+.#{$px}-nav {
+  background: $pure-white;
+  color: $soft-black;
+  height: 100%;
+  overflow: hidden;
+  padding-top: 4.5rem;
+  position: relative;
+  width: 100%;
+
+  @media (min-width: $breakpoint-md) {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: visible;
+    padding-top: 0;
+    place-content: center right;
+    position: unset;
+    width: auto;
+  }
+
+  &--expanded &__label {
+    animation: 1s linear fade-in-out forwards;
+  }
+
+  &__label {
+    animation: 1s linear fade-in-out2 forwards;
+    font-size: 1.25rem;
+    padding-left: 0.625rem;
+    visibility: var(--visible);
+  }
+
+  & &__back-btn {
+    background-color: transparent;
+    cursor: pointer;
+    font-weight: 800;
+    height: 60px;
+    opacity: 0;
+    padding: 1rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition:
+      opacity 0s linear,
+      background-color 0.5s;
+    width: auto;
+  }
+
+  &--expanded &__back-btn {
+    opacity: 1;
+    transition:
+      opacity 0.5s linear 0.25s,
+      background-color 0.5s;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    // Remove label and mobile buttons on larger screens
+    .#{$px}-nav__back-btn,
+    .#{$px}-nav__close-btn,
+    .#{$px}-nav__label {
+      display: none;
+    }
+  }
+
+  // Zero out default styles for possible children
+  button {
+    appearance: none;
+    background: none;
+    border: none;
+    color: inherit;
+    display: block;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+  }
+
+  &__back-btn:hover,
+  &__back-btn:focus,
+  &__close-btn:hover,
+  &__close-btn:focus {
+    background-color: #f4f4f4;
+  }
+}
+
+// Animations
+
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-out2 {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@import '@phillips/seldon/dist/scss/_vars';
 
 .#{$px}-row {
   // horizontal padding is fixed

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

@@ -0,0 +1,101 @@
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
+
+.#{$px}-search {
+  align-items: center;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  padding: 0.47rem;
+
+  &__overlay {
+    background-color: rgba(0, 0, 0, 50%);
+    display: none;
+    height: 100%;
+    inset: 0;
+    position: fixed;
+    width: 100%;
+    z-index: 2;
+
+    &--active {
+      display: block;
+      & + .#{$px}-search__button {
+        z-index: 3;
+      }
+    }
+  }
+
+  &__button {
+    background: transparent;
+    border: none;
+    height: 18px;
+    margin: 0;
+    padding: 0;
+    width: 18px;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      border: 2px solid black;
+      border-radius: 50%;
+      height: 35px;
+      padding: 0.125rem;
+      position: absolute;
+      right: 1rem;
+      width: 35px;
+    }
+
+    &__icon {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &__input-wrapper {
+    background: #323232;
+    color: $white;
+    display: flex;
+    height: 100px;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 60px;
+    transition: 0.5s ease;
+    width: 0;
+    z-index: 3;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      top: 60px;
+    }
+
+    &--active {
+      width: 50%;
+
+      @media (max-width: #{$breakpoint-md - 1}) {
+        top: 60px;
+        width: 100%;
+      }
+    }
+
+    &__icon {
+      height: 24px;
+      left: 35px;
+      position: absolute;
+      top: 30px;
+      width: 24px;
+
+      path {
+        fill: $white;
+      }
+    }
+    .#{$px}-input__input {
+      background: #323232;
+      border-bottom: 1px solid white;
+      border-left: 0;
+      border-radius: unset;
+      border-right: 0;
+      border-top: 0;
+      color: white;
+      margin: 1rem 2rem;
+      padding: 1rem 2rem;
+    }
+  }
+}

package/dist/scss/components/Social/_social.scss

@@ -1,6 +1,6 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
+@import '@phillips/seldon/dist/scss/type';
 
 .#{$px}-social {
   align-items: center;

package/dist/scss/components/SplitPanel/_splitPanel.scss

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-split-panel {
   align-items: center;

package/dist/scss/components/SplitPanel/_splitPanel.stories.scss

@@ -1,4 +1,4 @@
-@import '../../vars';
+@import '@phillips/seldon/dist/scss/vars';
 
 .split-panel-story {
   background-color: #f4f2f1;

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
+@import '@phillips/seldon/dist/scss/type';
+@import '@phillips/seldon/dist/scss/typography';
 
 .#{$px}-subscribe {
   max-width: 30rem;

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

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@import '@phillips/seldon/dist/scss/_vars';
 
 .#{$px}-text {
   @each $variant in $text-tokens {

package/dist/scss/components/Toggle/_toggle.scss

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 $toggleBaseWidth: 3rem;
 $inline: #{$px}-input--inline;

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

@@ -0,0 +1,115 @@
+@import '@phillips/seldon/dist/scss/_vars';
+
+.#{$px}-user-management {
+  align-items: center;
+  background-color: #f4f4f4;
+  display: flex;
+  height: 30px;
+  justify-content: flex-end;
+  left: 0;
+  padding: 0 $spacing-md;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+
+  @media (max-width: #{$breakpoint-md - 1}) {
+    align-items: flex-start;
+    background: transparent;
+    flex-direction: column;
+    height: unset;
+    margin-top: auto;
+    padding: 0;
+    position: unset;
+  }
+
+  > li {
+    border: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  &__account-wrapper {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      width: 100%;
+    }
+
+    .#{$px}-link {
+      @media (max-width: #{$breakpoint-md - 1}) {
+        width: 100%;
+      }
+
+      & > span {
+        color: $soft-black;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        letter-spacing: 0.125rem;
+      }
+    }
+  }
+
+  &__account-icon {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      path {
+        fill: $soft-black;
+      }
+    }
+
+    @media (max-width: #{$breakpoint-md - 1}) {
+      display: none;
+    }
+  }
+
+  .#{$px}-nav__item {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      &::after {
+        opacity: 0;
+      }
+      .#{$px}-user-management__language {
+        &__selections {
+          padding: 0.8125rem;
+        }
+      }
+    }
+    .#{$px}-user-management__language {
+      &__selections {
+        @media (min-width: $breakpoint-md) {
+          background: $off-white;
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 85%);
+          display: block;
+          left: unset;
+          min-height: unset;
+          min-width: 130px;
+          padding: 0;
+          position: absolute;
+          right: 0;
+          top: 30px;
+          width: 100%;
+
+          > li {
+            height: auto;
+          }
+          .#{$px}-input {
+            &--inline {
+              gap: 0.825rem;
+            }
+
+            &__input {
+              height: 18px;
+              width: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -1,6 +1,6 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
+@import '@phillips/seldon/dist/scss/typography';
 
 .#{$px}-viewings-list {
   align-items: center;

package/dist/scss/styles.scss

@@ -17,13 +17,19 @@
 @import 'components/Grid/grid';
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
+@import 'components/Navigation/navigation';
+@import 'components/Navigation/NavigationItem/navigationItem';
+@import 'components/Navigation/NavigationItemTrigger/navigationItemTrigger';
+@import 'components/Navigation/NavigationList/navigationList';
 @import 'components/Input/input';
 @import 'components/Row/row';
 @import 'components/GridItem/gridItem';
+@import 'components/Search/search';
 @import 'components/Social/social';
 @import 'components/SplitPanel/splitPanel';
 @import 'components/Subscribe/subscribe';
 @import 'components/Toggle/toggle';
+@import 'components/UserManagement/userManagement';
 @import 'components/ViewingsList/viewingsList';
 @import 'components/Link/link';
 @import 'components/LinkBlock/linkBlock';

package/dist/types/commonTypes.d.ts

@@ -0,0 +1,4 @@
+export declare enum SupportedLanguages {
+    en = "en",
+    zh = "zh"
+}

package/dist/types/commonTypes.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.en = "en", r.zh = "zh", r))(e || {});
+export {
+  e as SupportedLanguages
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -45,21 +45,21 @@
     "react-modal": "^3.16.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
+    "@chromatic-com/storybook": "^1.6.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@figma/code-connect": "^0.2.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.0.6",
-    "@storybook/addon-essentials": "^8.1.10",
+    "@semantic-release/github": "^10.1.0",
+    "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
     "@storybook/blocks": "^8.1.4",
     "@storybook/react": "^8.1.4",
     "@storybook/react-vite": "^8.1.4",
-    "@storybook/theming": "^8.1.10",
+    "@storybook/theming": "^8.1.11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -73,6 +73,7 @@
     "@vitest/coverage-v8": "^1.6.0",
     "color": "^4.2.3",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
@@ -81,20 +82,20 @@
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.8",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.77.6",
     "semantic-release": "^23.1.1",
     "storybook": "^8.1.4",
     "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.3.1",
+    "stylelint-scss": "^6.3.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",