@phillips/seldon 1.1.8 → 1.2.0

package/README.md

@@ -1,5 +1,7 @@
 # Easel Design System 🎨 by Phillips Auction House
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/45a31dc9-7c19-482a-ae3d-be6bb2533cef/deploy-status)](https://app.netlify.com/sites/snazzy-liger-5606f7/deploys)
+
 Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.
 
 ## Installation
@@ -19,13 +21,13 @@ yarn add @phillips/seldon
 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.
 
 ```scss
-@use '@phillips/seldon/scss/styles';
+@use '@phillips/seldon/dist/scss/styles';
 ```
 
 If you wish to only import specific component styles you can find them in their respective directories inside the `scss` folder.
 
 ```scss
-@use '@phillips/seldon/scss/components/Button/button';
+@use '@phillips/seldon/dist/scss/components/Button/button';
 ```
 
 ### Components
@@ -33,7 +35,7 @@ If you wish to only import specific component styles you can find them in their
 Each component can be imported in your project by referencing the component name inside the `components` directory.
 
 ```js
-import Button from '@phillips/seldon/components/Button/Button';
+import Button from '@phillips/seldon/dist/components/Button/Button';
 ```
 
 You can also use named exports for multiple component imports from main index file.

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/pages/Page.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import n from "react";
+import * as n from "react";
 import a from "../components/Header/Header.js";
-const c = () => {
+const h = () => {
   const [r, t] = n.useState();
   return /* @__PURE__ */ o("article", { children: [
     /* @__PURE__ */ e(
@@ -54,5 +54,5 @@ const c = () => {
   ] });
 };
 export {
-  c as default
+  h as default
 };

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.8",
+  "version": "1.2.0",
   "type": "module",
-  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,19 +21,23 @@
   ],
   "scripts": {
     "dev": "vite",
-    "clean": "rimraf './dist'rimraf",
-    "clean:stories": "rimraf ./storybook-static'",
     "build": "npm run clean && tsc && vite build && rimraf --glob './public/scss'",
+    "build:storybook": "storybook build",
+    "clean": "rimraf './dist'",
+    "clean:stories": "rimraf './storybook-static'",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
     "start": "storybook dev -p 6006",
-    "build:storybook": "npm run clean:stories && storybook build"
+    "preview": "npx http-server storybook-static",
+    "prepare": "husky install"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^7.0.22",
     "@storybook/addon-interactions": "^7.0.22",
@@ -56,6 +59,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
+    "husky": "^8.0.3",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.1",
     "rollup-plugin-copy": "^3.4.0",
@@ -78,19 +82,29 @@
     "plugins": [
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "CHANGELOG.md"
+        }
+      ],
       "@semantic-release/npm",
       [
         "@semantic-release/git",
         {
           "assets": [
             "package.json",
-            "package-lock.json",
-            "README.md",
             "CHANGELOG.md"
           ],
           "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
         }
       ]
     ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ],
+    "helpUrl": "https://www.conventionalcommits.org/en/v1.0.0/"
   }
 }