@phillips/seldon 1.1.9 → 1.2.0

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,31 @@
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: React.ReactElement | string;
+    /**
+    * Unique id for component
+    */
+    id?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare const Button: ({ primary, size, backgroundColor, label, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/components/HeroBanner/HeroBanner.d.ts

@@ -0,0 +1,32 @@
+interface HeroBannerProps {
+    /**
+     * informational text above the header (e.g. region label or "buy now")
+     */
+    prehead?: string;
+    /**
+     * When is this sale taking place?
+     */
+    date?: string;
+    /**
+     * Main header text
+     */
+    headerText: string;
+    /**
+     * Sub-head text
+     */
+    subHeadText?: string;
+    /**
+    * Is there an association related to this sale?
+    */
+    association?: string;
+    /**
+    * What background image or color to use
+    */
+    background?: string;
+    /**
+    * Unique id for component
+    */
+    id?: string;
+}
+declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, id }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
+export default HeroBanner;

package/dist/components/HeroBanner/HeroBanner.js

@@ -0,0 +1,32 @@
+import { jsxs as e, jsx as n } from "react/jsx-runtime";
+import { px as p } from "../../utils/index.js";
+const s = `${p}-hero-banner`, m = ({
+  prehead: l,
+  date: r,
+  headerText: a,
+  subHeadText: c,
+  association: h,
+  background: i,
+  id: o
+}) => /* @__PURE__ */ e(
+  "header",
+  {
+    "data-testid": o ? `hero-banner-${o}` : "hero-banner",
+    className: s,
+    style: { "--background": i },
+    children: [
+      l || r ? /* @__PURE__ */ e("p", { className: `${s}__pre-head`, children: [
+        l ? /* @__PURE__ */ n("span", { children: l }) : null,
+        r ? /* @__PURE__ */ n("span", { children: r }) : null
+      ] }) : null,
+      a ? /* @__PURE__ */ e("h1", { className: `${s}__heading`, children: [
+        a,
+        c ? /* @__PURE__ */ n("span", { children: c }) : null
+      ] }) : null,
+      h ? /* @__PURE__ */ n("p", { children: h }) : null
+    ]
+  }
+);
+export {
+  m as default
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './components/Button/Button';
+export { default as Header } from './components/Header/Header';
+export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
+export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,8 +1,10 @@
-import { default as t } from "./components/Button/Button.js";
-import { default as r } from "./components/Header/Header.js";
-import { default as d } from "./pages/Page.js";
+import { default as r } from "./components/Button/Button.js";
+import { default as t } from "./components/Header/Header.js";
+import { default as d } from "./components/HeroBanner/HeroBanner.js";
+import { default as l } from "./pages/Page.js";
 export {
-  t as Button,
-  r as Header,
-  d as Page
+  r as Button,
+  t as Header,
+  d as HeroBanner,
+  l as Page
 };

package/dist/pages/Page.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Page: React.FC;
+export default Page;

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

@@ -0,0 +1,61 @@
+@use '../../utils/vars' as *;
+
+.#{$px}-hero-banner {
+    align-items: center;
+    background: var(--background);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    min-height: 25rem;
+    padding: 1rem;
+    width: 100%;
+
+    h1,
+    h1 span,
+    p {
+        color: $pure-white;
+        font-weight: 400;
+        margin: 0;
+        text-transform: uppercase;
+        font-family: 'DistinctText';
+    }
+
+    p {
+        font-size: 0.875rem;
+        line-height: 1;
+        letter-spacing: 0.125rem;
+        text-align: center;
+    }
+
+    & .#{$px}-hero-banner__pre-head {
+        align-items: flex-start;
+        display: flex;
+        font-size: 0.75rem;
+        gap: 1.875rem;
+
+        @media (min-width: 28.8125rem) {
+            font-size: 0.875rem;
+        }
+    }
+
+    & .#{$px}-hero-banner__heading {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        font-size: 2rem;
+        line-height: 1;
+        margin: 1.875rem 0;
+        text-align: center;
+
+        @media (min-width: 28.8125rem) {
+            font-size: 2.375rem;
+        }
+
+        span {
+            font-size: 1.625rem;
+        }
+    }
+}

package/dist/scss/styles.scss

@@ -1,5 +1,8 @@
 @use 'utils/vars';
+// @TODO: add styles when we can do a site wide regressions QA
+// @use 'utils/reset';
 @use 'utils/typography';
 @use 'components/Button/button';
 @use 'components/Header/header';
+@use 'components/HeroBanner/heroBanner';
 @use 'pages/page';

package/dist/scss/utils/_typography.scss

@@ -1,7 +1,7 @@
 @use './vars' as *;
 
 body {
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: SeroWebPro,"Helvetica Neue",Helvetica,-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 16px;
     margin: 0;
     -webkit-font-smoothing: antialiased;
@@ -19,4 +19,41 @@ h4 {
 
 p {
   color: $soft-black;
+}
+
+/** Fonts **/
+@font-face {
+  font-family: 'DistinctDisplay';
+  src: url('../../fonts/Distinct-Display.woff') format('woff');
+  src: url('../../fonts/Distinct-Display.woff2') format('woff2');
+}
+@mixin DistinctDisplay {
+  font-family: $DistinctDisplay;
+}
+
+@font-face {
+  font-family: 'DistinctDisplayItalic';
+  src: url('../../fonts/Distinct-DisplayItalic.woff') format('woff');
+  src: url('../../fonts/Distinct-DisplayItalic.woff2') format('woff2');
+}
+@mixin DistinctDisplayItalic {
+  font-family: $DistinctDisplayItalic;
+}
+
+@font-face {
+  font-family: 'DistinctItalic';
+  src: url('../../fonts/Distinct-Italic.woff') format('woff');
+  src: url('../../fonts/Distinct-Italic.woff2') format('woff2');
+}
+@mixin DistinctItalic {
+  font-family: $DistinctItalic;
+}
+
+@font-face {
+  font-family: 'DistinctText';
+  src: url('../../fonts/Distinct-Text.woff') format('woff');
+  src: url('../../fonts/Distinct-Text.woff2') format('woff2');
+}
+@mixin DistinctText {
+  font-family: $DistinctText;
 }

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const px = "phillips";

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "type": "module",
-  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -24,7 +23,7 @@
     "dev": "vite",
     "build": "npm run clean && tsc && vite build && rimraf --glob './public/scss'",
     "build:storybook": "storybook build",
-    "clean": "rimraf './dist'rimraf",
+    "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "start": "storybook dev -p 6006",
@@ -95,7 +94,6 @@
         {
           "assets": [
             "package.json",
-            "dist/**/*.{js,scss}",
             "CHANGELOG.md"
           ],
           "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"