@phillips/seldon 1.1.9 → 1.2.1

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/_typography.scss

@@ -0,0 +1,59 @@
+@import './vars';
+
+body {
+  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;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-overflow-scrolling: touch;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  color: $primary-black;
+}
+
+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/scss/components/Button/_button.scss

@@ -1,4 +1,4 @@
-@use '../../utils/vars' as *;
+@import '../../vars';
 
 .#{$px}-button {
   background-color: #1ea7fd;

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

@@ -0,0 +1,61 @@
+@import '../../vars';
+
+.#{$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';
-@use 'utils/typography';
-@use 'components/Button/button';
-@use 'components/Header/header';
-@use 'pages/page';
+@import './vars';
+// @TODO: add styles when we can do a site wide regressions QA
+// @use 'reset';
+@import './typography';
+@import 'components/Button/button';
+@import 'components/Header/header';
+@import 'components/HeroBanner/heroBanner';
+@import 'pages/page';

package/dist/utils/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,14 +17,13 @@
     }
   },
   "files": [
-    "dist/**",
-    "!dist/src"
+    "dist/**"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "npm run clean && tsc && vite build && rimraf --glob './public/scss'",
+    "build": "npm run clean && tsc && vite build",
     "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}"

package/dist/scss/utils/_typography.scss

@@ -1,22 +0,0 @@
-@use './vars' as *;
-
-body {
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-size: 16px;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-overflow-scrolling: touch;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  color: $primary-black;
-}
-
-p {
-  color: $soft-black;
-}

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>