@phillips/seldon 1.7.0 → 1.7.2

package/dist/_virtual/_commonjsHelpers.js

@@ -1,8 +1,6 @@
-var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function l(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 export {
-  o as commonjsGlobal,
-  l as getDefaultExportFromCjs
+  e as getDefaultExportFromCjs
 };

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

@@ -1,31 +1,25 @@
-export interface ButtonProps {
+import { CommonProps } from '../../utils';
+export interface ButtonProps extends CommonProps {
     /**
-     * Is this the principal call to action on the page?
+     * Button contents
      */
-    primary?: boolean;
+    children: React.ReactNode;
     /**
-     * What background color to use
+     * True if button comes after text
      */
-    backgroundColor?: string;
+    iconLast?: boolean;
     /**
-     * How large should the button be?
+     * Optional click handler
      */
-    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
     /**
-     * Button contents
+     * Is this the principal call to action on the page?
      */
-    children: React.ReactNode;
-    /**
-    * Unique id for component
-    */
-    id?: string;
+    primary?: boolean;
     /**
-     * Optional click handler
+     * How large should the button be?
      */
-    onClick?: () => void;
+    size?: 'sm' | 'md' | 'lg';
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ primary, size, backgroundColor, children, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ primary, size, children, iconLast, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,22 +1,17 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import m from "../../node_modules/classnames/index.js";
-import { px as o } from "../../utils/index.js";
-const c = ({
-  primary: n = !0,
-  size: r = "md",
-  backgroundColor: s,
-  children: u,
-  id: t,
-  ...e
-}) => /* @__PURE__ */ a(
+import { px as t } from "../../utils/index.js";
+const c = ({ primary: n = !0, size: s = "md", children: u, iconLast: a = !1, id: o, ...r }) => /* @__PURE__ */ e(
   "button",
   {
-    "data-testid": t ? `button-${t}` : "button",
-    id: t,
+    "data-testid": o ? `button-${o}` : "button",
+    id: o,
     type: "button",
-    className: m(`${o}-button`, `${o}-button--${r}`, { [`${o}-button--secondary`]: !n }),
-    style: { backgroundColor: s },
-    ...e,
+    className: m(`${t}-button`, `${t}-button--${s}`, {
+      [`${t}-button--secondary`]: !n,
+      [`${t}-button--icon-last`]: a
+    }),
+    ...r,
     children: u
   }
 );

package/dist/components/Header/Header.js

@@ -3,27 +3,9 @@ import i from "../Button/Button.js";
 const a = ({ user: n, onLogin: r, onLogout: h, onCreateAccount: c }) => /* @__PURE__ */ e("header", { children: /* @__PURE__ */ l("div", { className: "storybook-header", children: [
   /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ e("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
-          fill: "#FFF"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
-          fill: "#555AB9"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
-          fill: "#91BAF8"
-        }
-      )
+      /* @__PURE__ */ e("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+      /* @__PURE__ */ e("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
+      /* @__PURE__ */ e("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
     ] }) }),
     /* @__PURE__ */ e("h1", { children: "Acme" })
   ] }),

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

@@ -16,16 +16,16 @@ interface HeroBannerProps {
      */
     subHeadText?: string;
     /**
-    * Is there an association related to this sale?
-    */
+     * Is there an association related to this sale?
+     */
     association?: string;
     /**
-    * What background image or color to use
-    */
+     * What background image or color to use
+     */
     background?: string;
     /**
-    * Unique id for component testing
-    */
+     * Unique id for component testing
+     */
     id?: string;
 }
 declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, id }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HeroBanner/HeroBanner.js

@@ -1,14 +1,6 @@
 import { jsx as n, jsxs as s } from "react/jsx-runtime";
 import { px as t } from "../../utils/index.js";
-const r = `${t}-hero-banner`, m = ({
-  prehead: e,
-  date: l,
-  headerText: o,
-  subHeadText: c,
-  association: h,
-  background: p,
-  id: a
-}) => /* @__PURE__ */ n(
+const r = `${t}-hero-banner`, m = ({ prehead: e, date: l, headerText: o, subHeadText: c, association: h, background: p, id: a }) => /* @__PURE__ */ n(
   "header",
   {
     "data-testid": a ? `hero-banner-${a}` : "hero-banner",

package/dist/components/Input/Input.js

@@ -2,63 +2,60 @@ import { jsxs as P, jsx as r } from "react/jsx-runtime";
 import * as R from "react";
 import e from "../../node_modules/classnames/index.js";
 import { px as t, useNormalizedInputProps as y } from "../../utils/index.js";
-const z = R.forwardRef(({
-  className: p,
-  defaultValue: l,
-  disabled: u,
-  hideLabel: d,
-  id: n,
-  inline: o,
-  invalid: m,
-  invalidText: $,
-  labelText: c,
-  onChange: _,
-  onClick: b,
-  placeholder: f,
-  readOnly: a,
-  size: w = "md",
-  type: s = "text",
-  value: x,
-  warn: h,
-  warnText: v,
-  ...I
-}, N) => {
-  const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(
-    `${t}-${s}-input`,
-    `${t}-input`,
-    `${t}-input--${w}`,
-    {
+const z = R.forwardRef(
+  ({
+    className: p,
+    defaultValue: l,
+    disabled: u,
+    hideLabel: d,
+    id: n,
+    inline: o,
+    invalid: m,
+    invalidText: $,
+    labelText: c,
+    onChange: _,
+    onClick: b,
+    placeholder: f,
+    readOnly: a,
+    size: w = "md",
+    type: s = "text",
+    value: x,
+    warn: h,
+    warnText: v,
+    ...I
+  }, N) => {
+    const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
       [`${t}-input--inline`]: o,
       [`${t}-input--readonly`]: a,
       [`${t}-input--disabled`]: i.disabled,
       [`${t}-input--invalid`]: i.invalid,
       [`${t}-input--warn`]: i.warn,
       [`${p}__wrapper`]: p
-    }
-  );
-  return /* @__PURE__ */ P("div", { className: j, children: [
-    /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
-    /* @__PURE__ */ r(
-      "input",
-      {
-        className: e(`${t}-input__input`, { className: p }),
-        "data-testid": n,
-        defaultValue: l,
-        disabled: i.disabled,
-        id: n,
-        onChange: _,
-        onClick: b,
-        placeholder: f,
-        readOnly: a,
-        ref: N,
-        type: i.type,
-        value: x,
-        ...I
-      }
-    ),
-    i.validation
-  ] });
-});
+    });
+    return /* @__PURE__ */ P("div", { className: j, children: [
+      /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          className: e(`${t}-input__input`, { className: p }),
+          "data-testid": n,
+          defaultValue: l,
+          disabled: i.disabled,
+          id: n,
+          onChange: _,
+          onClick: b,
+          placeholder: f,
+          readOnly: a,
+          ref: N,
+          type: i.type,
+          value: x,
+          ...I
+        }
+      ),
+      i.validation
+    ] });
+  }
+);
 z.displayName = "Input";
 export {
   z as default

package/dist/components/Select/Select.js

@@ -2,60 +2,57 @@ import { jsxs as R, jsx as l } from "react/jsx-runtime";
 import * as y from "react";
 import a from "../../node_modules/classnames/index.js";
 import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
-const S = y.forwardRef(({
-  children: r,
-  className: n,
-  defaultValue: o,
-  disabled: d,
-  hideLabel: u,
-  id: e,
-  inline: m,
-  invalid: $,
-  invalidText: c,
-  labelText: _,
-  onChange: b,
-  onClick: f,
-  readOnly: p,
-  size: w = "md",
-  value: h,
-  warn: v,
-  warnText: x,
-  ...j
-}, N) => {
-  const s = "select", i = z({ disabled: d, id: e, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), P = a(
-    `${t}-${s}-input`,
-    `${t}-input`,
-    `${t}-input--${w}`,
-    {
+const S = y.forwardRef(
+  ({
+    children: r,
+    className: n,
+    defaultValue: o,
+    disabled: d,
+    hideLabel: u,
+    id: e,
+    inline: m,
+    invalid: $,
+    invalidText: c,
+    labelText: _,
+    onChange: b,
+    onClick: f,
+    readOnly: p,
+    size: w = "md",
+    value: h,
+    warn: v,
+    warnText: x,
+    ...j
+  }, N) => {
+    const s = "select", i = z({ disabled: d, id: e, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), P = a(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
       [`${t}-input--inline`]: m,
       [`${t}-input--readonly`]: p,
       [`${t}-input--disabled`]: i.disabled,
       [`${t}-input--invalid`]: i.invalid,
       [`${t}-input--warn`]: i.warn,
       [`${n}__wrapper`]: n
-    }
-  );
-  return /* @__PURE__ */ R("div", { className: P, children: [
-    /* @__PURE__ */ l("label", { htmlFor: e, className: a(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
-    /* @__PURE__ */ l(
-      "select",
-      {
-        className: a(`${t}-input__input`, { className: n }),
-        "data-testid": e,
-        defaultValue: o,
-        disabled: i.disabled,
-        id: e,
-        onChange: b,
-        onClick: f,
-        ref: N,
-        value: h,
-        ...j,
-        children: r
-      }
-    ),
-    i.validation
-  ] });
-});
+    });
+    return /* @__PURE__ */ R("div", { className: P, children: [
+      /* @__PURE__ */ l("label", { htmlFor: e, className: a(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
+      /* @__PURE__ */ l(
+        "select",
+        {
+          className: a(`${t}-input__input`, { className: n }),
+          "data-testid": e,
+          defaultValue: o,
+          disabled: i.disabled,
+          id: e,
+          onChange: b,
+          onClick: f,
+          ref: N,
+          value: h,
+          ...j,
+          children: r
+        }
+      ),
+      i.validation
+    ] });
+  }
+);
 export {
   S as default
 };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { default as Button } from './components/Button/Button';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
-export { default as DatePicker } from './components/DatePicker/DatePicker';
 export { default as Header } from './components/Header/Header';
 export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
 export { default as Input } from './components/Input/Input';

package/dist/index.js

@@ -1,18 +1,16 @@
 import { default as a } from "./components/Button/Button.js";
-import { default as o } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as u } from "./components/DatePicker/DatePicker.js";
-import { default as l } from "./components/Header/Header.js";
-import { default as m } from "./components/HeroBanner/HeroBanner.js";
-import { default as x } from "./components/Input/Input.js";
-import { default as B } from "./components/Select/Select.js";
-import { default as H } from "./pages/Page.js";
+import { default as t } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as u } from "./components/Header/Header.js";
+import { default as l } from "./components/HeroBanner/HeroBanner.js";
+import { default as m } from "./components/Input/Input.js";
+import { default as x } from "./components/Select/Select.js";
+import { default as B } from "./pages/Page.js";
 export {
   a as Button,
-  u as DatePicker,
-  o as ErrorBoundary,
-  l as Header,
-  m as HeroBanner,
-  x as Input,
-  H as Page,
-  B as Select
+  t as ErrorBoundary,
+  u as Header,
+  l as HeroBanner,
+  m as Input,
+  B as Page,
+  x as Select
 };

package/dist/scss/_reset.scss

@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -11,19 +13,32 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
 #root {
   isolation: isolate;
-}
+}

package/dist/scss/_typography.scss

@@ -1,17 +1,27 @@
 @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;
+  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;
 }
 
-
-
 /** Fonts **/
 @font-face {
   font-family: 'DistinctDisplay';
@@ -56,7 +66,6 @@ body {
 
 @mixin bodyText {
   color: $soft-black;
-  @include DistinctText();
 }
 
 // @TODO: uncomment when site is able to be refactored
@@ -76,4 +85,4 @@ body {
 // button {
 //   color: $soft-black;
 //   @include DistinctText();
-// }
+// }

package/dist/scss/_utils.scss

@@ -5,7 +5,7 @@
   border: 0;
   margin: -1px;
   block-size: 1px;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
@@ -35,4 +35,4 @@
   top: 50px;
   text-align: center;
   line-height: 1;
-}
+}

package/dist/scss/_vars.scss

@@ -1,8 +1,6 @@
-
 // prefix
 $px: phillips;
 
-
 // Primary color palette
 $pure-black: #000000;
 $primary-black: #323232;
@@ -32,7 +30,6 @@ $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
 
-
 // Font-variables
 $DistinctDisplay: 'DistinctDisplay';
 $DistinctDisplayItalic: 'DistinctDisplayItalic';
@@ -43,4 +40,4 @@ $DistinctText: 'DistinctText';
 $header-color: $pure-black;
 $header-family: $DistinctDisplay;
 $text-color: $soft-black;
-$text-family: $DistinctText;
+$text-family: $DistinctText;

package/dist/scss/components/Button/_button.scss

@@ -1,4 +1,5 @@
 @import '../../vars';
+@import '../../_utils';
 
 .#{$px}-button {
   @include bodyText;
@@ -12,17 +13,48 @@
   justify-content: center;
   min-width: 9rem;
   padding: 0.5em 1.75em;
-  transition: color 0.25s, background-color 0.25s, font-weight 0.25s;
+  transition:
+    color 0.25s,
+    background-color 0.25s,
+    font-weight 0.25s;
 
   &:hover,
   &:focus {
-    background-color: $soft-black;
+    background-color: $primary-black;
+
+    svg {
+      fill: $pure-white;
+    }
+  }
+  svg {
+    fill: $pure-white;
+    transition: fill 0.25s;
+    margin-inline-end: 0.5rem;
+    width: 1em;
   }
 
   &--secondary {
     color: $text-color;
     background-color: transparent;
     box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
+
+    &:hover,
+    &:focus {
+      color: $pure-white;
+
+      svg {
+        fill: $pure-white;
+      }
+    }
+
+    svg {
+      fill: $text-color;
+    }
+  }
+
+  &.#{$px}-button--icon-last svg {
+    margin-inline-end: unset;
+    margin-inline-start: 0.5rem;
   }
 
   &--sm {
@@ -39,8 +71,6 @@
   }
 
   * {
-    margin: 0
+    margin: 0;
   }
-
 }
-

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -2,7 +2,6 @@
 @import '../../vars';
 @import '../../typography';
 
-
 .flatpickr-calendar {
   @include DistinctText;
 
@@ -67,9 +66,9 @@
     padding: 0.65rem 0 0 0;
   }
 
-  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
-  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
-  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
     -webkit-box-shadow: -10px 0 0 #e6e6e6;
     box-shadow: -10px 0 0 #e6e6e6;
   }

package/dist/scss/components/Header/_header.scss

@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;