@phillips/seldon 1.29.0 → 1.30.0

package/dist/assets/chevronNext.svg.js

@@ -0,0 +1,4 @@
+const e = "data:image/svg+xml,%3csvg%20width='6'%20height='10'%20viewBox='0%200%206%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.630178%200.73557C0.944399%200.421477%201.45199%200.421477%201.76621%200.73557L5.46435%204.43222C5.77857%204.74631%205.77857%205.25369%205.46435%205.56779L1.76621%209.26443C1.45199%209.57852%200.944399%209.57852%200.630178%209.26443C0.315957%208.95034%200.315957%208.44295%200.630178%208.12886L3.75627%204.99597L0.630178%201.87114C0.315957%201.55705%200.324014%201.04161%200.630178%200.73557Z'%20fill='%23949494'/%3e%3c/svg%3e";
+export {
+  e as default
+};

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BreadcrumbItemProps } from './BreadcrumbItem';
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The items to be displayed in the Breadcrumb. The items will be displayed left
+     * to right in which they are ordered in the array (0 index being the first element)
+     */
+    items: BreadcrumbItemProps[];
+}
+/**
+ * ## Overview
+ *
+ * Overview of Breadcrumb component
+ *
+ * [Figma Link](https://www.figma.com/design/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?node-id=4530-104045&t=IK3N3sxxhS2I6uFh-0)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-breadcrumb--overview)
+ */
+declare const Breadcrumb: ({ className, items, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,11 @@
+import { jsx as a } from "react/jsx-runtime";
+import { getCommonProps as n } from "../../utils/index.js";
+import t from "../../node_modules/classnames/index.js";
+import b from "./BreadcrumbItem.js";
+const h = ({ className: l, items: e = [], ...m }) => {
+  const { className: o, ...s } = n(m, "Breadcrumb");
+  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(o, l), ...s, ...m, children: /* @__PURE__ */ a("ol", { children: e.map((r, c) => /* @__PURE__ */ a(b, { href: r.href, label: r.label, isCurrent: e.length - 1 === c }, r.label)) }) });
+};
+export {
+  h as default
+};

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Hypertext reference to navigate to breadcrumb item
+     */
+    href?: string;
+    /**
+     * Whether the user is on the current item page or not
+     */
+    isCurrent?: boolean;
+    /**
+     * Label to display in the breadcrumb
+     */
+    label?: string;
+}
+declare const BreadcrumbItem: ({ className, href, label, isCurrent, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,23 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { getCommonProps as i } from "../../utils/index.js";
+import m from "../../node_modules/classnames/index.js";
+import u from "../../assets/chevronNext.svg.js";
+const b = ({ className: a, href: s, label: c, isCurrent: r = !1, ...t }) => {
+  const { className: e, ...n } = i(t, "Breadcrumb"), l = r ? "page" : !1, f = r ? "" : s;
+  return /* @__PURE__ */ p("li", { children: [
+    /* @__PURE__ */ o(
+      "a",
+      {
+        "aria-current": l,
+        className: m(e, a, { [`${e}--current`]: r }),
+        href: f,
+        ...n,
+        children: c
+      }
+    ),
+    r ? null : /* @__PURE__ */ o("img", { className: m(e, a, "chevron"), src: u })
+  ] });
+};
+export {
+  b as default
+};

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb';
+export { default as BreadcrumbItem, type BreadcrumbItemProps } from './BreadcrumbItem';

package/dist/index.d.ts

@@ -31,3 +31,4 @@ export { default as StatefulViewingsList, type StatefulViewingsListProps, } from
 export * from './components/Text';
 export { default as UserManagement, type UserManagementProps } from './components/UserManagement/UserManagement';
 export * from './types/commonTypes';
+export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';

package/dist/index.js

@@ -1,77 +1,81 @@
-import { PaddingTokens as o, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as m, px as p, useNormalizedInputProps as d } from "./utils/index.js";
-import { default as u } from "./pages/Page.js";
-import { default as x } from "./components/Button/Button.js";
-import { default as g } from "./components/IconButton/IconButton.js";
-import { default as S } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as I } from "./components/Footer/Footer.js";
-import { Grid as N } from "./components/Grid/Grid.js";
-import { default as B } from "./components/Header/Header.js";
-import { default as v } from "./components/Navigation/Navigation.js";
-import { default as b } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as G } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import { default as H } from "./components/Navigation/NavigationList/NavigationList.js";
-import { default as h } from "./components/HeroBanner/HeroBanner.js";
-import { default as z } from "./components/Input/Input.js";
-import { default as E } from "./components/Link/Link.js";
-import { LinkVariants as O } from "./components/Link/utils.js";
-import { default as U } from "./components/LinkBlock/LinkBlock.js";
-import { default as j } from "./components/LinkList/LinkList.js";
-import { default as D } from "./components/Row/Row.js";
-import { default as K } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as W } from "./components/GridItem/types.js";
-import { default as Z } from "./components/Search/Search.js";
-import { default as $ } from "./components/Select/Select.js";
-import { default as te } from "./components/SplitPanel/SplitPanel.js";
-import { default as re } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as fe } from "./components/Subscribe/types.js";
-import { default as me } from "./components/Social/Social.js";
-import { default as de } from "./components/ViewingsList/ViewingsList.js";
-import { default as ue } from "./components/Modal/Modal.js";
-import { default as xe } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as ge } from "./components/Text/types.js";
-import { default as Se } from "./components/Text/Text.js";
-import { default as Ie } from "./components/UserManagement/UserManagement.js";
-import { SupportedLanguages as Ne } from "./types/commonTypes.js";
+import { PaddingTokens as a, defaultYear as f, emailValidation as m, generatePaddingClassName as p, getCommonProps as s, noOp as d, px as l, useNormalizedInputProps as u } from "./utils/index.js";
+import { default as x } from "./pages/Page.js";
+import { default as g } from "./components/Button/Button.js";
+import { default as S } from "./components/IconButton/IconButton.js";
+import { default as I } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as B } from "./components/Footer/Footer.js";
+import { Grid as P } from "./components/Grid/Grid.js";
+import { default as b } from "./components/Header/Header.js";
+import { default as T } from "./components/Navigation/Navigation.js";
+import { default as G } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as H } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as h } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as z } from "./components/HeroBanner/HeroBanner.js";
+import { default as E } from "./components/Input/Input.js";
+import { default as O } from "./components/Link/Link.js";
+import { LinkVariants as U } from "./components/Link/utils.js";
+import { default as j } from "./components/LinkBlock/LinkBlock.js";
+import { default as D } from "./components/LinkList/LinkList.js";
+import { default as K } from "./components/Row/Row.js";
+import { default as W } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as Z } from "./components/GridItem/types.js";
+import { default as $ } from "./components/Search/Search.js";
+import { default as te } from "./components/Select/Select.js";
+import { default as oe } from "./components/SplitPanel/SplitPanel.js";
+import { default as fe } from "./components/Subscribe/Subscribe.js";
+import { SubscriptionState as pe } from "./components/Subscribe/types.js";
+import { default as de } from "./components/Social/Social.js";
+import { default as ue } from "./components/ViewingsList/ViewingsList.js";
+import { default as xe } from "./components/Modal/Modal.js";
+import { default as ge } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as Se } from "./components/Text/types.js";
+import { default as Ie } from "./components/Text/Text.js";
+import { default as Be } from "./components/UserManagement/UserManagement.js";
+import { SupportedLanguages as Pe } from "./types/commonTypes.js";
+import { default as be } from "./components/Breadcrumb/Breadcrumb.js";
+import "react/jsx-runtime";
+import "./node_modules/classnames/index.js";
 export {
-  x as Button,
-  S as ErrorBoundary,
-  I as Footer,
-  N as Grid,
-  K as GridItem,
-  W as GridItemAlign,
-  B as Header,
-  h as HeroBanner,
-  g as IconButton,
-  z as Input,
-  E as Link,
-  U as LinkBlock,
-  j as LinkList,
-  O as LinkVariants,
-  ue as Modal,
-  v as Navigation,
-  b as NavigationItem,
-  G as NavigationItemTrigger,
-  H as NavigationList,
-  o as PaddingTokens,
-  u as Page,
-  D as Row,
-  Z as Search,
-  $ as Select,
-  me as Social,
-  te as SplitPanel,
-  xe as StatefulViewingsList,
-  re as Subscribe,
-  fe as SubscriptionState,
-  Ne as SupportedLanguages,
-  Se as Text,
-  ge as TextVariants,
-  Ie as UserManagement,
-  de as ViewingsList,
-  r as defaultYear,
-  a as emailValidation,
-  f as generatePaddingClassName,
+  be as Breadcrumb,
+  g as Button,
+  I as ErrorBoundary,
+  B as Footer,
+  P as Grid,
+  W as GridItem,
+  Z as GridItemAlign,
+  b as Header,
+  z as HeroBanner,
+  S as IconButton,
+  E as Input,
+  O as Link,
+  j as LinkBlock,
+  D as LinkList,
+  U as LinkVariants,
+  xe as Modal,
+  T as Navigation,
+  G as NavigationItem,
+  H as NavigationItemTrigger,
+  h as NavigationList,
+  a as PaddingTokens,
+  x as Page,
+  K as Row,
+  $ as Search,
+  te as Select,
+  de as Social,
+  oe as SplitPanel,
+  ge as StatefulViewingsList,
+  fe as Subscribe,
+  pe as SubscriptionState,
+  Pe as SupportedLanguages,
+  Ie as Text,
+  Se as TextVariants,
+  Be as UserManagement,
+  ue as ViewingsList,
+  f as defaultYear,
+  m as emailValidation,
+  p as generatePaddingClassName,
   s as getCommonProps,
-  m as noOp,
-  p as px,
-  d as useNormalizedInputProps
+  d as noOp,
+  l as px,
+  u as useNormalizedInputProps
 };

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index4.js";
+import { __module as t } from "../../_virtual/index5.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index5.js";
+import { __module as e } from "../../../../_virtual/index4.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/scss/_vars.scss

@@ -13,6 +13,7 @@ $white: #fff;
 // Secondary color palette
 $soft-black: #545454;
 $dark-gray: #7b7474;
+$soft-black-2: #535050;
 
 // Utilititarian color palette
 $keyline-gray: #949494;

package/dist/scss/components/Breadcrumb/_breadcrumb.scss

@@ -0,0 +1,37 @@
+@import '../../_vars';
+
+.#{$px}-breadcrumb {
+  @include text($body3);
+
+  color: $soft-black-2;
+
+  @media (max-width: $breakpoint-sm) {
+    display: none;
+  }
+
+  ol {
+    display: flex;
+    flex-direction: row;
+
+    li {
+      display: flex;
+      flex-direction: row;
+
+      a {
+        margin: $margin-sm;
+        overflow: hidden;
+        text-wrap: nowrap;
+
+        &:hover {
+          color: $widget-blue;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  &--current {
+    color: $primary-black;
+    font-weight: 700;
+  }
+}

package/dist/scss/components/Button/_button.scss

@@ -1,6 +1,6 @@
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/typography';
-@import '@phillips/seldon/dist/scss/utils';
+@import '../../vars';
+@import '../../typography';
+@import '../../utils';
 
 .#{$px}-button {
   @include bodyText;

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 @import 'flatpickr/dist/flatpickr.css';
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/typography';
+@import '../../vars';
+@import '../../typography';
 
 .flatpickr-calendar {
   @include DistinctText;

package/dist/scss/components/Footer/_footer.scss

@@ -1,7 +1,7 @@
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/utils';
-@import '@phillips/seldon/dist/scss/type';
-@import '@phillips/seldon/dist/scss/typography';
+@import '../../vars';
+@import '../../utils';
+@import '../../type';
+@import '../../typography';
 
 .#{$px}-footer {
   background-color: $off-white;

package/dist/scss/components/Grid/_grid.scss

@@ -1,5 +1,5 @@
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/utils';
+@import '../../vars';
+@import '../../utils';
 
 .#{$px}-grid {
   @include gridContainer(false);

package/dist/scss/components/GridItem/_gridItem.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '@phillips/seldon/dist/scss/_utils';
+@import '../../_utils';
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
   grid-column: span $span;

package/dist/scss/components/Header/_header.scss

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

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/vars';
+@import '../../vars';
 
 .#{$px}-hero-banner {
   align-items: center;

package/dist/scss/components/Input/_input.scss

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

package/dist/scss/components/Link/_link.scss

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/type';
+@import '../../type';
 
 .#{$px}-link {
   color: $cta-blue;

package/dist/scss/components/LinkBlock/_linkBlock.scss

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

package/dist/scss/components/LinkList/_linkList.scss

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/_utils';
+@import '../../_utils';
 
 .#{$px}-link-list {
   &--item {

package/dist/scss/components/Modal/_modal.scss

@@ -1,5 +1,5 @@
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/utils';
+@import '../../vars';
+@import '../../utils';
 
 .#{$px}-modal {
   background-color: white;

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

@@ -1,5 +1,5 @@
-@import '@phillips/seldon/dist/scss/vars';
-@import '@phillips/seldon/dist/scss/typography';
+@import '../../vars';
+@import '../../typography';
 
 .#{$px}-nav__item {
   @media (max-width: #{$breakpoint-md - 1}) {
@@ -173,14 +173,6 @@
   @media (min-width: $breakpoint-md) {
     position: relative;
 
-    &:not(ul ul li):hover::before {
-      content: '';
-      height: 100%;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-
     &:not(ul ul li) a:focus,
     &:not(ul ul li) button:focus,
     &:not(ul ul li) p:focus {

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -1 +1 @@
-@import '@phillips/seldon/dist/scss/vars';
+@import '../../vars';

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

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/vars';
+@import '../../vars';
 
 .#{$px}-nav__list {
   display: flex;

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

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/vars';
+@import '../../vars';
 
 .#{$px}-nav {
   background: $pure-white;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-@import '@phillips/seldon/dist/scss/_vars';
+@import '../../_vars';
 
 .#{$px}-user-management {
   align-items: center;

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

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

package/dist/scss/styles.scss

@@ -36,3 +36,4 @@
 @import 'components/LinkList/linkList';
 @import 'components/Text/text';
 @import 'components/Modal/modal';
+@import 'components/Breadcrumb/breadcrumb';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -52,7 +52,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.1.0",
-    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-essentials": "^8.2.1",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
     "@storybook/addon-mdx-gfm": "^8.1.11",