@phillips/seldon 1.21.0 → 1.22.1

package/dist/components/Footer/Footer.d.ts

@@ -1,5 +1,4 @@
 export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
-    chidlren?: React.ReactNode;
     /**
      * Copyright data added to bottom of site
      */

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextVariants } from './types';
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to the appropriate HTML based on the variant.
+     */
+    element?: React.ElementType;
+    /**
+     * The OOTB style to apply to the text
+     */
+    variant?: TextVariants;
+}
+/**
+ * ## Overview
+ *
+ * All text rendered in the UI can be wrapped in this component to enforce consistent styling and semantic HTML.
+ *
+ * [Figma Link](https://www.figma.com/design/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?node-id=6344-139&t=BUiWETQbkkWoDZ5V-4)
+ */
+declare const Text: ({ children, id, element: CustomElement, variant, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export default Text;

package/dist/components/Text/Text.js

@@ -0,0 +1,28 @@
+import { jsx as l } from "react/jsx-runtime";
+import { px as p } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
+import { TextVariants as c } from "./types.js";
+import { determineDefaultTextElement as d, determineTextClassName as i } from "./utils.js";
+const $ = ({
+  children: m,
+  id: t,
+  element: s,
+  variant: e = c.body2,
+  className: o,
+  ...a
+}) => {
+  const r = t ? `text-${t}` : "text", n = `${p}-text`, x = s || d(e);
+  return /* @__PURE__ */ l(
+    x,
+    {
+      ...a,
+      "data-testid": r,
+      id: t,
+      className: f(n, i(e), o),
+      children: m
+    }
+  );
+};
+export {
+  $ as default
+};

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

@@ -0,0 +1,2 @@
+export { TextVariants } from './types';
+export { default as Text, type TextProps } from './Text';

package/dist/components/Text/types.d.ts

@@ -0,0 +1,20 @@
+export declare enum TextVariants {
+    display0 = "display0",
+    display1 = "display1",
+    display2 = "display2",
+    display3 = "display3",
+    display4 = "display4",
+    heading1 = "heading1",
+    heading2 = "heading2",
+    heading3 = "heading3",
+    heading4 = "heading4",
+    body1 = "body1",
+    body2 = "body2",
+    body3 = "body3",
+    button = "button",
+    ctaLg = "ctaLg",
+    ctaSm = "ctaSm",
+    email = "email",
+    label = "label",
+    textBadge = "textBadge"
+}

package/dist/components/Text/types.js

@@ -0,0 +1,4 @@
+var l = /* @__PURE__ */ ((d) => (d.display0 = "display0", d.display1 = "display1", d.display2 = "display2", d.display3 = "display3", d.display4 = "display4", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.button = "button", d.ctaLg = "ctaLg", d.ctaSm = "ctaSm", d.email = "email", d.label = "label", d.textBadge = "textBadge", d))(l || {});
+export {
+  l as TextVariants
+};

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

@@ -0,0 +1,3 @@
+import { TextVariants } from './types';
+export declare const determineTextClassName: (variant?: TextVariants) => string;
+export declare const determineDefaultTextElement: (variant?: TextVariants) => string;

package/dist/components/Text/utils.js

@@ -0,0 +1,10 @@
+import { px as a } from "../../utils/index.js";
+import { TextVariants as r } from "./types.js";
+const c = (e = r.body1) => {
+  const t = e.replace("labelText", "label-text").replace("textBadge", "text-badge").replace("ctaSm", "cta-sm").replace("ctaLg", "cta-lg");
+  return `${a}-text--${t.charAt(0).toLowerCase() + t.slice(1)}`;
+}, s = (e = r.body1) => e.includes("body") ? "p" : e === r.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+export {
+  s as determineDefaultTextElement,
+  c as determineTextClassName
+};

package/dist/index.d.ts

@@ -18,4 +18,6 @@ export { default as Subscribe, type SubscribeProps } from './components/Subscrib
 export { default as Social, type SocialProps } from './components/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './components/ViewingsList/ViewingsList';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
+export * from './components/Text';
+export { PaddingTokens } from './utils';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,44 +1,50 @@
 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 { Grid as d } from "./components/Grid/Grid.js";
+import { default as s } from "./components/Footer/Footer.js";
+import { Grid as l } from "./components/Grid/Grid.js";
 import { default as p } from "./components/Header/Header.js";
-import { default as x } from "./components/HeroBanner/HeroBanner.js";
+import { default as u } from "./components/HeroBanner/HeroBanner.js";
 import { default as n } from "./components/Input/Input.js";
 import { default as k } from "./components/Link/Link.js";
-import { LinkVariants as c } from "./components/Link/utils.js";
+import { LinkVariants as S } from "./components/Link/utils.js";
 import { default as B } from "./components/LinkBlock/LinkBlock.js";
-import { default as G } from "./components/LinkList/LinkList.js";
-import { default as V } from "./components/Row/Row.js";
-import { default as H } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as y } from "./components/GridItem/types.js";
-import { default as E } from "./components/Select/Select.js";
-import { default as R } from "./components/SplitPanel/SplitPanel.js";
-import { default as j } from "./components/Subscribe/Subscribe.js";
-import { default as v } from "./components/Social/Social.js";
-import { default as C } from "./components/ViewingsList/ViewingsList.js";
-import { default as J } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as M } from "./pages/Page.js";
+import { default as w } from "./components/LinkList/LinkList.js";
+import { default as I } from "./components/Row/Row.js";
+import { default as T } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as H } from "./components/GridItem/types.js";
+import { default as A } from "./components/Select/Select.js";
+import { default as F } from "./components/SplitPanel/SplitPanel.js";
+import { default as h } from "./components/Subscribe/Subscribe.js";
+import { default as q } from "./components/Social/Social.js";
+import { default as z } from "./components/ViewingsList/ViewingsList.js";
+import { default as D } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as K } from "./components/Text/types.js";
+import { default as N } from "./components/Text/Text.js";
+import { PaddingTokens as Q } from "./utils/index.js";
+import { default as W } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  l as Footer,
-  d as Grid,
-  H as GridItem,
-  y as GridItemAlign,
+  s as Footer,
+  l as Grid,
+  T as GridItem,
+  H as GridItemAlign,
   p as Header,
-  x as HeroBanner,
+  u as HeroBanner,
   n as Input,
   k as Link,
   B as LinkBlock,
-  G as LinkList,
-  c as LinkVariants,
-  M as Page,
-  V as Row,
-  E as Select,
-  v as Social,
-  R as SplitPanel,
-  J as StatefulViewingsList,
-  j as Subscribe,
-  C as ViewingsList
+  w as LinkList,
+  S as LinkVariants,
+  Q as PaddingTokens,
+  W as Page,
+  I as Row,
+  A as Select,
+  q as Social,
+  F as SplitPanel,
+  D as StatefulViewingsList,
+  h as Subscribe,
+  N as Text,
+  K as TextVariants,
+  z as ViewingsList
 };

package/dist/scss/_type.scss

@@ -56,7 +56,7 @@
     text-transform: lowercase;
   }
 
-  @if $label == 'text' {
+  @if $label == 'label' {
     font-size: $text-label-size;
     font-weight: 500;
     letter-spacing: 0.0625rem;
@@ -90,8 +90,8 @@
     @include labelText($email);
   }
 
-  @if $token == 'text' {
-    @include labelText($text);
+  @if $token == 'label' {
+    @include labelText($label);
   }
 
   @if $token == 'text-badge' {

package/dist/scss/_typography.scss

@@ -1,8 +1,5 @@
 @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:
@@ -31,8 +28,8 @@ body {
 /** Fonts **/
 @font-face {
   font-family: DistinctDisplay;
-  src: url('../fonts/Distinct-Display.woff') format('woff');
-  src: url('../fonts/Distinct-Display.woff2') format('woff2');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Display.woff') format('woff');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Display.woff2') format('woff2');
 }
 
 @mixin DistinctDisplay {
@@ -42,8 +39,8 @@ body {
 @font-face {
   font-family: DistinctDisplay;
   font-style: italic;
-  src: url('../fonts/Distinct-DisplayItalic.woff') format('woff');
-  src: url('../fonts/Distinct-DisplayItalic.woff2') format('woff2');
+  src: url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff') format('woff');
+  src: url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff2') format('woff2');
 }
 
 @mixin DistinctDisplayItalic {
@@ -51,10 +48,21 @@ body {
   font-style: italic;
 }
 
+/** Fonts **/
+@font-face {
+  font-family: Montserrat;
+  src: url('@phillips/seldon/dist/fonts/Montserrat.woff') format('woff');
+  src: url('@phillips/seldon/dist/fonts/Montserrat.woff2') format('woff2');
+}
+
+@mixin Montserrat {
+  font-family: Montserrat, sans-serif;
+}
+
 @font-face {
   font-family: Distinct;
-  src: url('../fonts/Distinct-Text.woff') format('woff');
-  src: url('../fonts/Distinct-Text.woff2') format('woff2');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Text.woff') format('woff');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Text.woff2') format('woff2');
 }
 
 @mixin DistinctText {
@@ -64,8 +72,8 @@ body {
 @font-face {
   font-family: Distinct;
   font-style: italic;
-  src: url('../fonts/Distinct-Italic.woff') format('woff');
-  src: url('../fonts/Distinct-Italic.woff2') format('woff2');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Italic.woff') format('woff');
+  src: url('@phillips/seldon/dist/fonts/Distinct-Italic.woff2') format('woff2');
 }
 
 @mixin DistinctItalic {

package/dist/scss/_vars.scss

@@ -72,7 +72,7 @@ $button: 'button';
 $cta-sm: 'cta-sm';
 $cta-lg: 'cta-lg';
 $email: 'email';
-$text: 'text';
+$label: 'label';
 $text-badge: 'text-badge';
 $display0: 'display0';
 $display1: 'display1';
@@ -86,6 +86,8 @@ $heading4: 'heading4';
 $body1: 'body1';
 $body2: 'body2';
 $body3: 'body3';
+$text-tokens: $button, $cta-sm, $cta-lg, $email, $label, $text-badge, $display0, $display1, $display2, $display3,
+  $display4, $heading1, $heading2, $heading3, $heading4, $body1, $body2, $body3;
 
 ////////////////////////
 /// FONT SIZE TOKENS:

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

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../_utils';
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
@@ -9,7 +10,8 @@
   }
 
   &-align-center {
-    grid-column: calc((#{$total-cols} + 1 - #{$span}) / 2) / span #{$span};
+    grid-column: math.ceil(math.div($total-cols + 1 - $span, 2)) / span #{$span};
+    text-align: center;
   }
 }
 
@@ -20,14 +22,14 @@
 
   @for $i from 1 through 2 {
     &--span-xs-#{$i} {
-      @include gridItemColumnSpan(#{$i}, 2);
+      @include gridItemColumnSpan($i, 2);
     }
   }
 
   @include media($breakpoint-sm) {
     @for $i from 1 through 4 {
       &--span-sm-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 4);
+        @include gridItemColumnSpan($i, 4);
       }
     }
   }
@@ -35,7 +37,7 @@
   @include media($breakpoint-md) {
     @for $i from 1 through 12 {
       &--span-md-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 12);
+        @include gridItemColumnSpan($i, 12);
       }
     }
   }
@@ -43,7 +45,7 @@
   @include media($breakpoint-lg) {
     @for $i from 1 through 12 {
       &--span-lg-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 12);
+        @include gridItemColumnSpan($i, 12);
       }
     }
   }

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

@@ -9,6 +9,7 @@
   display: flex;
   flex-flow: column;
   justify-content: center;
+  margin-bottom: $spacing-lg;
   min-height: 25rem;
   padding: 1rem;
   width: 100%;

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

@@ -0,0 +1,27 @@
+@import '../../_vars';
+
+.#{$px}-text {
+  @each $variant in $text-tokens {
+    &--#{$variant} {
+      @include text($variant);
+    }
+  }
+}
+
+h1.#{$px}-text,
+blockquote.#{$px}-text {
+  margin-bottom: $spacing-xl;
+}
+
+h2.#{$px}-text {
+  margin-bottom: $spacing-lg;
+}
+h3.#{$px}-text {
+  margin-bottom: $spacing-md;
+}
+h4.#{$px}-text {
+  margin-bottom: $spacing-sm;
+}
+p.#{$px}-text {
+  margin-bottom: $spacing-md;
+}

package/dist/scss/styles.scss

@@ -26,6 +26,7 @@
 @import 'components/Link/link';
 @import 'components/LinkBlock/linkBlock';
 @import 'components/LinkList/linkList';
+@import 'components/Text/text';
 
 // 📑 Pages
 @import 'pages/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -42,30 +42,30 @@
     "flatpickr": "^4.6.13"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@figma/code-connect": "^0.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.0.4",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-mdx-gfm": "^8.1.3",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-vite": "^8.1.1",
-    "@storybook/theming": "^8.1.3",
+    "@semantic-release/github": "^10.0.5",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-mdx-gfm": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/react": "^8.1.4",
+    "@storybook/react-vite": "^8.1.4",
+    "@storybook/theming": "^8.1.4",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/color": "^3.0.6",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "@vitest/coverage-v8": "^1.6.0",
     "color": "^4.2.3",
     "eslint": "^8.57.0",
@@ -82,15 +82,15 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.77.2",
     "semantic-release": "^23.1.1",
-    "storybook": "^8.1.1",
-    "stylelint": "^16.5.0",
+    "storybook": "^8.1.4",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.3.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",