@phillips/seldon 1.18.0 → 1.19.1

package/README.md

@@ -6,6 +6,8 @@
 
 Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.
 
+We use Storybook to document the components. Our storybook is hosted in Netlify at [here](https://phillips-seldon.netlify.app/?path=/docs/welcome--overview).
+
 ## Installation
 
 ```
@@ -16,38 +18,6 @@ npm install @phillips/seldon
 yarn add @phillips/seldon
 ```
 
-## What's included
-
-```
-@phillips/seldon/
-├── components
-│   └── HeroBanner
-│       └── HeroBanner.d.ts
-│       └── HeroBanner.js
-│   └── ...
-├── Pages
-│   └── HomePage
-│       └── HomePage.d.ts
-│       └── HomePage.js
-│   └── ...
-├── scss
-│   └── components
-│       └── HeroBanner
-│           └── _HeroBanner.scss
-│       └── ...
-│   └── Pages
-│       └── HomePage
-│           └── _HomePage.scss
-│       └── ...
-│   └── _reset.scss
-│   └── _typography_.scss
-│   └── _vars.scss
-│   └── styles.scss (sass entrypoint)
-├── utils
-├── index.d.ts
-├── index.js
-```
-
 ### Styling
 
 The project contains a `scss` folder. Here you will find the main export of our sass styles. This will include all the styles bundled with this package, including resets and typography styles.

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from 'react';
+import { LinkVariants } from './utils';
+export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Describes where the link is used. It controls the styling of the link so we apply consistent styles. Defaults to `standalone`.  See the documentation [here](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5731-12815) to see where each variant is used.
+     *
+     * @default standalone
+     * @see LinkVariants
+     */
+    variant?: LinkVariants;
+    /**
+     * The text of the link
+     */
+    children: React.ReactNode;
+    /**
+     * URL to navigate to when clicked
+     */
+    href: string;
+    /**
+     * Can be used to render alternative link components like the prefetching `Link` from `@remix-run/react`.
+     * This component should handle the `children`, `data-testid`, `id`, `className`, and `href` props.
+     */
+    element?: React.ElementType<LinkProps & {
+        'data-testid': string;
+    }>;
+}
+/**
+ * ## Overview
+ *
+ * A component that can be used to navigate to different pages or external websites. Renders a standard anchor tag by default.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?node-id=5736%3A13364&mode=dev)
+ */
+declare const Link: ({ children, id, className, element: Element, variant, href, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export default Link;

package/dist/components/Link/Link.js

@@ -0,0 +1,30 @@
+import { jsx as k } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
+import { px as p } from "../../utils/index.js";
+import { getLinkVariantClassName as f, isLinkExternal as x, LinkVariants as d } from "./utils.js";
+const V = ({
+  children: s,
+  id: a,
+  className: r,
+  element: t = "a",
+  variant: e = d.standalone,
+  href: n,
+  ...o
+}) => {
+  const i = c(`${p}-link`, f(e), r), l = a ? `link-${a}` : "link", m = x(n);
+  return /* @__PURE__ */ k(
+    t,
+    {
+      ...o,
+      href: n,
+      "data-testid": l,
+      id: a,
+      className: i,
+      ...m && t === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
+      children: s
+    }
+  );
+};
+export {
+  V as default
+};

package/dist/components/Link/utils.d.ts

@@ -0,0 +1,12 @@
+export declare const getLinkVariantClassName: (variant: keyof typeof LinkVariants) => string;
+export declare const isLinkExternal: (href: string) => boolean;
+export declare enum LinkVariants {
+    /** Default variant, used */
+    standalone = "standalone",
+    /** link rendering emailto: */
+    email = "email",
+    /** these links are being rendered in a list */
+    list = "list",
+    /** link is being rendered within body copy */
+    inline = "inline"
+}

package/dist/components/Link/utils.js

@@ -0,0 +1,10 @@
+import { px as t } from "../../utils/index.js";
+const n = (l) => `${t}-link--${l}`, a = (l) => !!l.match(
+  /(http[s]?:\/\/)(?!.*phillips\.com)([a-zA-Z0-9\-.]+)(:[0-9]{1,4})?([a-zA-Z0-9/\-._~:?#[\]@!$&'()*+,;=]*)/g
+);
+var e = /* @__PURE__ */ ((l) => (l.standalone = "standalone", l.email = "email", l.list = "list", l.inline = "inline", l))(e || {});
+export {
+  e as LinkVariants,
+  n as getLinkVariantClassName,
+  a as isLinkExternal
+};

package/dist/components/LinkBlock/LinkBlock.d.ts

@@ -0,0 +1,17 @@
+import { LinkProps } from '../Link/Link';
+export interface LinkBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Props for the Link component */
+    linkProps: Omit<LinkProps, 'variant'>;
+    /** Renders description under link */
+    description: string;
+}
+/**
+ * ## Overview
+ *
+ * The LinkBlock component is used to render a link with a description underneath it. Usually this is used in a list of links.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5709-8035&mode=design&t=CTNssP89Nrnt6Jkw-0)
+ *
+ */
+declare const LinkBlock: ({ linkProps, description, className: classNameProp, id, ...props }: LinkBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkBlock;

package/dist/components/LinkBlock/LinkBlock.js

@@ -0,0 +1,15 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import k from "../../node_modules/classnames/index.js";
+import { px as d } from "../../utils/index.js";
+import p from "../Link/Link.js";
+import { LinkVariants as f } from "../Link/utils.js";
+const h = ({ linkProps: s, description: i, className: e, id: t, ...l }) => {
+  const a = `${d}-link-block`, m = k(a, e), r = s.element ?? p, n = t ? `link-block-${t}` : "link-block";
+  return /* @__PURE__ */ c("div", { ...l, className: m, id: t, "data-testid": n, children: [
+    /* @__PURE__ */ o(r, { ...s, "data-testid": `${n}-link`, variant: f.list }),
+    /* @__PURE__ */ o("p", { className: `${a}__description`, children: i })
+  ] });
+};
+export {
+  h as default
+};

package/dist/components/LinkList/LinkList.d.ts

@@ -0,0 +1,15 @@
+import LinkBlock, { type LinkBlockProps } from '../LinkBlock/LinkBlock';
+import React from 'react';
+export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** These children should be an array of LinkBlock components */
+    children: React.ReactElement<LinkBlockProps, typeof LinkBlock>[];
+}
+/**
+ * ## Overview
+ *
+ * The LinkList component is used to display a list of LinkBlocks in a 3 column list on some breakpoints and 1 column list on others.  Because of the 3 column design, the set of LinkBlocks should be divisible by 3.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5709-8035&mode=design&t=jOnrmrqnE8lCQvGR-4)
+ */
+declare const LinkList: ({ children, id, ...props }: LinkListProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkList;

package/dist/components/LinkList/LinkList.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import f from "../LinkBlock/LinkBlock.js";
+import c from "react";
+import { px as u } from "../../utils/index.js";
+import { Grid as p } from "../Grid/Grid.js";
+const y = ({ children: a, id: s, ...m }) => {
+  const d = s ? `link-list-${s}` : "link-list", t = `${u}-link-list`;
+  return /* @__PURE__ */ i(p, { ...m, "data-testid": d, id: s, className: t, element: "ul", role: "list", children: a.map((r) => {
+    var l, e;
+    return c.isValidElement(r) && r.type !== f ? (console.warn("LinkList only accepts LinkBlock children"), null) : /* @__PURE__ */ i("li", { className: `${t}--item`, children: r }, (e = (l = r == null ? void 0 : r.props) == null ? void 0 : l.linkProps) == null ? void 0 : e.href);
+  }) });
+};
+export {
+  y as default
+};

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { default as Grid, type GridProps } from './components/Grid/Grid';
 export { default as Header, type HeaderProps } from './components/Header/Header';
 export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner';
 export { default as Input, type InputProps } from './components/Input/Input';
+export { default as Link, type LinkProps } from './components/Link/Link';
+export { LinkVariants } from './components/Link/utils';
+export { default as LinkBlock, type LinkBlockProps } from './components/LinkBlock/LinkBlock';
+export { default as LinkList, type LinkListProps } from './components/LinkList/LinkList';
 export { default as Select, type SelectProps } from './components/Select/Select';
 export { default as SplitPanel, type SplitPanelProps } from './components/SplitPanel/SplitPanel';
 export { default as Subscribe, type SubscribeProps } from './components/Subscribe/Subscribe';

package/dist/index.js

@@ -1,30 +1,38 @@
 import { default as t } from "./components/Button/Button.js";
 import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as l } from "./components/Footer/Footer.js";
+import { default as s } from "./components/Footer/Footer.js";
 import { Grid as u } from "./components/Grid/Grid.js";
-import { default as p } from "./components/Header/Header.js";
+import { default as d } from "./components/Header/Header.js";
 import { default as x } from "./components/HeroBanner/HeroBanner.js";
 import { default as n } from "./components/Input/Input.js";
-import { default as c } from "./components/Select/Select.js";
-import { default as B } from "./components/SplitPanel/SplitPanel.js";
-import { default as w } from "./components/Subscribe/Subscribe.js";
-import { default as L } from "./components/Social/Social.js";
-import { default as V } from "./components/ViewingsList/ViewingsList.js";
-import { default as E } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as G } from "./pages/Page.js";
+import { default as k } from "./components/Link/Link.js";
+import { LinkVariants as c } from "./components/Link/utils.js";
+import { default as g } from "./components/LinkBlock/LinkBlock.js";
+import { default as b } from "./components/LinkList/LinkList.js";
+import { default as H } from "./components/Select/Select.js";
+import { default as y } from "./components/SplitPanel/SplitPanel.js";
+import { default as F } from "./components/Subscribe/Subscribe.js";
+import { default as I } from "./components/Social/Social.js";
+import { default as j } from "./components/ViewingsList/ViewingsList.js";
+import { default as v } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as A } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  l as Footer,
+  s as Footer,
   u as Grid,
-  p as Header,
+  d as Header,
   x as HeroBanner,
   n as Input,
-  G as Page,
-  c as Select,
-  L as Social,
-  B as SplitPanel,
-  E as StatefulViewingsList,
-  w as Subscribe,
-  V as ViewingsList
+  k as Link,
+  g as LinkBlock,
+  b as LinkList,
+  c as LinkVariants,
+  A as Page,
+  H as Select,
+  I as Social,
+  y as SplitPanel,
+  v as StatefulViewingsList,
+  F as Subscribe,
+  j as ViewingsList
 };

package/dist/scss/_reset.scss

@@ -39,6 +39,20 @@ h6 {
   overflow-wrap: break-word;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+}
+
 #root {
   isolation: isolate;
 }

package/dist/scss/_type.scss

@@ -1,5 +1,10 @@
 @import './vars';
 
+@mixin underline($padding: 0, $width: 0.0625rem, $color: $cta-blue) {
+  border-bottom: $width solid $color;
+  padding-bottom: $padding;
+}
+
 @mixin hText($size: $heading-size1, $color: $primary-black, $transform-style: capitalize) {
   color: $color;
   font-family: DistinctDisplay, sans-serif;

package/dist/scss/_typography.scss

@@ -1,5 +1,8 @@
 @import './vars';
 
+// Design wants this replaced in the future with a local version of Montserrat
+@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600;0,700;1,400&display=swap';
+
 html,
 body {
   font-family:

package/dist/scss/_utils.scss

@@ -39,10 +39,26 @@
   width: 2rem;
 }
 
-@mixin grid($columns: 2) {
+@mixin gridMargins {
+  margin: 0 $spacing-medium;
+
+  @media (min-width: $breakpoint3) {
+    margin: 0 $spacing-large;
+  }
+
+  @media (min-width: $breakpoint4) {
+    margin: 0 $spacing-xl;
+  }
+}
+
+@mixin grid($columns: 2, $margins-on: true) {
   display: grid;
   gap: $spacing-medium;
   grid-template-columns: repeat($columns, 1fr);
+
+  @if $margins-on {
+    @include gridMargins;
+  }
 }
 
 @mixin gridContainer($margins-on: true) {
@@ -50,48 +66,63 @@
   gap: $spacing-medium;
   grid-template-columns: repeat(2, 1fr);
 
-  @if $margins-on {
-    margin: 0 $spacing-medium;
-  }
-
   @media (min-width: $breakpoint2) {
     grid-template-columns: repeat(4, 1fr);
   }
 
   @media (min-width: $breakpoint3) {
     grid-template-columns: repeat(12, 1fr);
-
-    @if $margins-on {
-      margin: 0 $spacing-large;
-    }
   }
 
-  @media (min-width: $breakpoint4) {
-    @if $margins-on {
-      margin: 0 $spacing-xl;
-    }
+  @if $margins-on {
+    @include gridMargins;
   }
 }
 
-@mixin media($breakpoint) {
-  @if $breakpoint == $sm {
+@mixin media($breakpoint, $type: 'min') {
+  @if $breakpoint == $breakpoint-sm {
     // $breakpoint2: 961px;
-    @media (min-width: $breakpoint2) {
-      @content;
+    @if $type == 'min' {
+      @media (min-width: $breakpoint2) {
+        @content;
+      }
+    }
+
+    @if $type == 'max' {
+      @media (max-width: $breakpoint2) {
+        @content;
+      }
     }
   }
 
-  @if $breakpoint == $md {
+  @if $breakpoint == $breakpoint-md {
     // $breakpoint3: 1401px;
-    @media (min-width: $breakpoint3) {
-      @content;
+
+    @if $type == 'min' {
+      @media (min-width: $breakpoint3) {
+        @content;
+      }
+    }
+
+    @if type == 'max' {
+      @media (max-width: $breakpoint3) {
+        @content;
+      }
     }
   }
 
-  @if $breakpoint == $lg {
+  @if $breakpoint == $breakpoint-lg {
     // $breakpoint4: 1801px;
-    @media (min-width: $breakpoint4) {
-      @content;
+    @if type == 'min' {
+      @media (min-width: $breakpoint4) {
+        @content;
+      }
+    }
+
+    @if type == 'max' {
+      @media (max-width: $breakpoint4) {
+        @content;
+      }
     }
   }
 }

package/dist/scss/_vars.scss

@@ -229,6 +229,6 @@ $max-site-width: 1560px;
 /// Media breakpoint tokens:
 ///////////////////////////
 
-$sm: 'sm';
-$md: 'md';
-$lg: 'lg';
+$breakpoint-sm: 'sm';
+$breakpoint-md: 'md';
+$breakpoint-lg: 'lg';

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

@@ -18,11 +18,11 @@
     padding: $spacing-medium $spacing-medium $spacing-small;
     text-align: right;
 
-    @include media('md') {
+    @include media($breakpoint-md) {
       padding: $spacing-medium $spacing-large $spacing-small;
     }
 
-    @include media('lg') {
+    @include media($breakpoint-lg) {
       padding: $spacing-medium $spacing-xl $spacing-small;
     }
 
@@ -50,17 +50,17 @@
     flex-direction: column;
     padding: $spacing-large $spacing-medium 0;
 
-    @include media('sm') {
+    @include media($breakpoint-sm) {
       align-items: flex-start;
       flex-direction: row;
       justify-content: space-between;
     }
 
-    @include media('md') {
+    @include media($breakpoint-md) {
       padding: 3.75rem $spacing-large;
     }
 
-    @include media('lg') {
+    @include media($breakpoint-lg) {
       padding: 3.75rem $spacing-xl;
     }
   }
@@ -68,7 +68,7 @@
   &__content-split-panel__left {
     margin-bottom: $spacing-medium;
 
-    @include media('sm') {
+    @include media($breakpoint-sm) {
       margin-bottom: 0;
     }
   }
@@ -76,7 +76,7 @@
   &__content-split-panel__right {
     display: flex;
 
-    @include media('sm') {
+    @include media($breakpoint-sm) {
       justify-content: flex-end;
     }
   }

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

@@ -0,0 +1,34 @@
+@import '../../type';
+
+.#{$px}-link {
+  @include text($cta-sm);
+
+  color: $cta-blue;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover:not(&--list),
+  &:focus:not(&--list) {
+    @include underline;
+  }
+
+  &:hover,
+  &:focus {
+    color: $cta-blue;
+    outline: unset;
+  }
+
+  &--inline {
+    font-size: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+  }
+
+  &--list {
+    color: $soft-black;
+  }
+
+  &--email {
+    @include text($email);
+  }
+}

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

@@ -0,0 +1,14 @@
+@import '../../type';
+@import '../../vars';
+
+.#{$px}-link-block {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xsm;
+  text-align: center;
+
+  &__description {
+    @include text($body2);
+  }
+}

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

@@ -0,0 +1,12 @@
+@import '../../_utils';
+
+.#{$px}-link-list {
+  &--item {
+    // mobile first
+    grid-column: span 2;
+
+    @include media($breakpoint-sm) {
+      grid-column: span 4;
+    }
+  }
+}

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

@@ -7,7 +7,7 @@
   display: inline-flex;
   flex-direction: column;
 
-  @include media('sm') {
+  @include media($breakpoint-sm) {
     align-items: flex-end;
   }
 
@@ -25,7 +25,7 @@
     margin: 0 0 $spacing-medium;
     padding: 0;
 
-    @include media('sm') {
+    @include media($breakpoint-sm) {
       gap: 0 1rem;
     }
 

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

@@ -15,7 +15,7 @@
     flex: 1 1 0px;
   }
 
-  @include media('sm') {
+  @include media($breakpoint-sm) {
     align-items: stretch;
     flex-direction: row;
 

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

@@ -19,7 +19,7 @@
     text-align: center;
   }
 
-  @include media('sm') {
+  @include media($breakpoint-sm) {
     &__title,
     &__blurb {
       text-align: left;

package/dist/scss/styles.scss

@@ -20,6 +20,9 @@
 @import 'components/Subscribe/subscribe';
 @import 'components/Toggle/toggle';
 @import 'components/ViewingsList/viewingsList';
+@import 'components/Link/link';
+@import 'components/LinkBlock/linkBlock';
+@import 'components/LinkList/linkList';
 
 // 📑 Pages
 @import 'pages/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -24,9 +24,8 @@
     "dist/**"
   ],
   "scripts": {
-    "dev": "vite",
-    "test": "jest",
     "start": "storybook dev -p 6006",
+    "test": "jest",
     "build": "npm run clean && tsc && vite build",
     "build:storybook": "storybook build",
     "preview": "npx http-server storybook-static",
@@ -39,13 +38,12 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "flatpickr": "^4.6.13",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0"
+    "flatpickr": "^4.6.13"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@figma/code-connect": "^0.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.3",
@@ -75,7 +73,9 @@
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "prettier": "3.0.3",
-    "prop-types": "^15.8.1",
+    "react-docgen-typescript": "^2.2.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -88,7 +88,6 @@
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.1",
     "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
     "typescript": "^5.0.2",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^2.3.0",