@phillips/seldon 1.4.0 → 1.5.0

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+export interface InputProps extends Record<string, unknown> {
+    /**
+     * Optional className to be applied to the `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
+     */
+    defaultValue?: string | number;
+    /**
+     * Booolean to specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Boolean to specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * A custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Boolean to specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Validation text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Text that will be read by a screen reader when visiting this control
+     */
+    labelText: string;
+    /**
+     * Optional `onChange` handler that is called whenever `<input>` is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Optional `onClick` handler that is called whenever the `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Optional text to be used for the placeholder attribute of the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Boolean to deterimine whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Enum to determine the height of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * String that determines  the type of the `<input>` (e.g 'text', 'date', 'numeber', etc.)
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>` for controlled inputs
+     */
+    value?: string | number | undefined;
+    /**
+     * Boolean to specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,64 @@
+import { jsxs as P, jsx as s } from "react/jsx-runtime";
+import * as R from "react";
+import e from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
+const k = R.forwardRef(({
+  className: p,
+  defaultValue: l,
+  disabled: o,
+  hideLabel: u,
+  id: n,
+  inline: d,
+  invalid: m,
+  invalidText: $,
+  labelText: c,
+  onChange: _,
+  onClick: b,
+  placeholder: f,
+  readOnly: a,
+  size: w = "md",
+  type: r = "text",
+  value: x,
+  warn: h,
+  warnText: v,
+  ...j
+}, I) => {
+  const i = z({ disabled: o, id: n, invalid: m, invalidText: $, readOnly: a, type: r, warn: h, warnText: v }), N = e(
+    `${t}-${r}-input`,
+    `${t}-input`,
+    `${t}-input--${w}`,
+    {
+      [`${t}-input--inline`]: d,
+      [`${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: N, children: [
+    /* @__PURE__ */ s("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: c }),
+    /* @__PURE__ */ s(
+      "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: I,
+        type: i.type,
+        value: x,
+        ...j
+      }
+    ),
+    i.validation
+  ] });
+});
+export {
+  k as default
+};

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { InputProps } from '../Input/Input';
+export interface SelectProps extends InputProps {
+    /**
+     * Option elements that are selectable
+     */
+    children: React.ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,61 @@
+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}`,
+    {
+      [`${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
+  ] });
+});
+export {
+  S as default
+};

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 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 Input } from './components/Input/Input';
+export { default as Select } from './components/Select/Select';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,10 +1,14 @@
-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";
+import { default as a } from "./components/Button/Button.js";
+import { default as o } from "./components/Header/Header.js";
+import { default as u } from "./components/HeroBanner/HeroBanner.js";
+import { default as l } from "./components/Input/Input.js";
+import { default as m } from "./components/Select/Select.js";
+import { default as x } from "./pages/Page.js";
 export {
-  r as Button,
-  t as Header,
-  d as HeroBanner,
-  l as Page
+  a as Button,
+  o as Header,
+  u as HeroBanner,
+  l as Input,
+  x as Page,
+  m as Select
 };

package/dist/scss/_typography.scss

@@ -10,16 +10,7 @@ body {
     -webkit-overflow-scrolling: touch;
 }
 
-h1,
-h2,
-h3,
-h4 {
-  color: $primary-black;
-}
 
-p {
-  color: $soft-black;
-}
 
 /** Fonts **/
 @font-face {
@@ -56,4 +47,22 @@ p {
 }
 @mixin DistinctText {
   font-family: $DistinctText;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  color: $primary-black;
+  @include DistinctDisplay();
+}
+
+p,
+input,
+label,
+div,
+a,
+button {
+  color: $soft-black;
+  @include DistinctText();
 }

package/dist/scss/_utils.scss

@@ -0,0 +1,38 @@
+@mixin hidden {
+  position: absolute;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  block-size: 1px;
+  clip: rect(0,0,0,0);
+  inline-size: 1px;
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+@mixin warning-icon-before {
+  border-left: 0.75rem solid transparent;
+  border-right: 0.75rem solid transparent;
+  border-bottom: 1.25rem solid #d6d141;
+  content: '';
+  height: 0;
+  position: absolute;
+  right: 14px;
+  top: 45px;
+  width: 0;
+}
+
+@mixin warning-icon-after {
+  color: $pure-black;
+  content: '!';
+  font-family: arial;
+  font-size: 0.85vrem;
+  height: 2rem;
+  width: 2rem;
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  text-align: center;
+  line-height: 1;
+}

package/dist/scss/_vars.scss

@@ -20,6 +20,7 @@ $off-white: #f4f2f1;
 
 // Notification color palette
 $error-red: #ff0000;
+$warn-yellow: #d6d141;
 $post-sale-magenta: #ff0085;
 $clock-widget-blue: #4a90e2;
 $clock-widget-green: #6a9c53;
@@ -33,3 +34,9 @@ $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
 
 
 $text-color: $pure-black;
+
+// Font-variables
+$DistinctDisplay: 'DistinctDisplay';
+$DistinctDisplayItalic: 'DistinctDisplayItalic';
+$DistinctItalic: 'DistinctItalic';
+$DistinctText: 'DistinctText';

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

@@ -94,10 +94,6 @@
             font-size: 2.375rem;
         }
 
-        @media (max-width: 28.8125rem) { 
-            margin: 0;
-        }
-
         span {
             font-size: 1.625rem;
         }

package/dist/scss/components/Input/_input.scss

@@ -0,0 +1,160 @@
+@import '../../vars';
+@import '../../_utils';
+
+$md: #{$px}-input--md;
+$lg: #{$px}-input--lg;
+
+// Shared Input styles
+.#{$px}-input {
+  display: flex;
+  flex-direction: column;
+
+  &__label {
+    margin-bottom: 0.5rem;
+
+    &--hidden {
+      @include hidden();
+    }
+  }
+
+  &__input {
+    accent-color: $pure-black;
+    border: 3px solid currentColor;
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    // width: 100%;
+  }
+
+  &__validation {
+    display: -webkit-box;
+    line-height: 1.25;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  // Small input size
+  &--sm {
+    .#{$px}-input__input {
+      padding: 0.25rem 0.5rem;
+    }
+  }
+
+  // Large input size
+  &--lg {
+    .#{$px}-input__input {
+      padding: 0.75rem 0.5rem;
+    }
+  }
+
+  // Inline
+  &--inline {
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .#{$px}-input__input {
+      align-self: center;
+      width: unset;
+    }
+
+    .#{$px}-input__label {
+      max-width: 8.75rem;
+    }
+  }
+
+  // Disabled
+  &--disabled {
+    color: $keyline-gray;
+
+    .#{$px}-input__label,
+    .#{$px}-input__input {
+      color: inherit;
+      cursor: not-allowed;
+    }
+  }
+
+  // Read only
+  &--readonly {
+    pointer-events: none;
+
+    .#{$px}-input__label,
+    .#{$px}-input__input {
+      cursor: default;
+    }
+  }
+
+  // Invalid
+  &--invalid {
+    color: $error-red;
+
+    .#{$px}-input__label,
+    .#{$px}-input__input,
+    .#{$px}-input__validation {
+      color: inherit;
+    }
+  }
+
+  // warn
+  &--warn {
+    .#{$px}-input__label {
+      position: relative;
+    }
+  }
+
+  .#{$px}-input__validation {
+    animation: reveal 0.45s linear forwards;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.#{$px}-radio-input,
+.#{$px}-checkbox-input {
+  .#{$px}-input__input {
+    align-self: flex-start;
+  }
+
+  &.#{$px}-input--inline {
+    .#{$px}-input__input {
+      align-self: center;
+    }
+  }
+}
+
+.#{$px}-input--inline.#{$px}-radio-input,
+.#{$px}-input--inline.#{$px}-checkbox-input,
+.#{$px}-input--inline.#{$px}-toggle-input  {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  position: relative;
+  transition: padding 0.25s;
+
+  &.#{$px}-input--invalid,
+  &.#{$px}-input--warn {
+    padding-top: 1.5rem;
+
+    .#{$px}-input__validation {
+      left: 0;
+      position: absolute;
+      top: 0
+    }
+  }
+
+  &.#{$px}-input--warn {
+    padding-top: 2.75rem;
+  }
+}
+
+.#{$px}-select-input .#{$px}-input__input {
+  flex: 1;
+}
+
+@keyframes reveal {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/scss/components/Toggle/_toggle.scss

@@ -0,0 +1,179 @@
+@import '../../vars';
+@import '../../_utils';
+
+$toggleBaseWidth: 3rem;
+$inline: #{$px}-input--inline;
+$disabled: #{$px}-input--disabled;
+$invalid: #{$px}-input--invalid;
+$warn: #{$px}-input--warn;
+$md: #{$px}-input--md;
+$lg: #{$px}-input--lg;
+// Shared Input styles
+.#{$px}-toggle-input {
+  position: relative;
+  transition: padding 0.25s;
+
+  .#{$px}-input__label {
+    line-height: 1;
+    margin-bottom: 2.5rem;
+    // margin-left: 66px;
+    position: relative;
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1.85rem;
+    }
+
+    &::before {
+      background-color: rgba(0,0,0, .4);
+      border-radius: 1rem;
+      width: $toggleBaseWidth;
+      height: 1rem;
+      left: 0;
+      transition: background-color 0.25s, color 0.25s;
+    }
+
+    &::after {
+      // background-color: transparent;
+      background: #fff linear-gradient(transparent,rgba($pure-black, 0.05));
+      border-radius: 50%;
+      box-shadow: 0 1px 2px 0 rgba($pure-black,.15), 0 0 0 1px rgba($pure-black,.15) inset;
+      color: white;
+      height: 1rem;
+      left: 0;
+      width: 1rem;
+      transform: translate(0, 0);
+      transition: transform 0.25s;
+    }
+  }
+
+  &.#{$inline} {
+
+    .#{$px}-input__label {
+      margin-bottom: 0.5rem;
+      margin-left: 66px;
+
+      &::before {
+        left: unset;
+        right: calc(1rem + 100%);
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+
+      &::after {
+        left: unset;
+        right: calc($toggleBaseWidth + 100%);
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+    }
+  }
+
+  // Hide actual checkbox input
+  .#{$px}-input__input {
+    @include hidden;
+    margin-bottom: 0;
+  }
+
+  &.#{$invalid}.#{$inline} {
+    padding-top: 2rem;
+  }
+
+
+  // Height changes
+  &.#{$md},
+  &.#{$lg} {
+    .#{$px}-input__label::after {
+      right: calc($toggleBaseWidth - 0.5rem + 100%);
+    }
+  }
+  &.#{$md} {
+    .#{$px}-input__label {
+      margin-bottom: 3rem;
+
+      &::before {
+        height: 1.5rem;
+      }
+
+      &::after {
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+    }
+
+    &.#{$inline} {
+      .#{$px}-input__label {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+  &.#{$lg} {
+    .#{$px}-input__label {
+      margin-bottom: 3.5rem;
+
+      &::before {
+        width: 3.5rem;
+        height: 2rem;
+      }
+
+      &::after {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+
+    &.#{$inline} {
+      .#{$px}-input__label {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+
+  &.#{$lg}.#{$inline} {
+    .#{$px}-input__label {
+      margin-left: 4.375rem;
+    }
+  }
+
+  // When in checked state
+  &:has(input:checked) {
+
+    .#{$px}-input__label {
+      &::before {
+        background-color: $pure-black;
+      }
+
+      &::after {
+        transform: translate($toggleBaseWidth - 1rem, 0)
+      }
+    }
+
+    &.#{$md} .#{$px}-input__label::after,
+    &.#{$lg} .#{$px}-input__label::after {
+      transform: translate($toggleBaseWidth - 1.5rem, 0)
+    }
+
+
+    &.#{$inline} .#{$px}-input__label::after { transform: translate($toggleBaseWidth - 1rem, -50%); }
+
+    &.#{$md}.#{$inline} .#{$px}-input__label::after,
+    &.#{$lg}.#{$inline} .#{$px}-input__label::after {
+      transform: translate($toggleBaseWidth - 1.5rem, -50%);
+    }
+
+    // Error state checked
+    &.#{$invalid} .#{$px}-input__label::before { background-color: $error-red; }
+
+    // warn state checked
+    &.#{$warn} .#{$px}-input__label::before { background-color: $warn-yellow; }
+  }
+  &.#{$warn} {
+    &.#{$md},
+    &.#{$lg} {
+      padding-top: 3.5rem;
+    }
+  }
+}

package/dist/scss/styles.scss

@@ -5,4 +5,6 @@
 @import 'components/Button/button';
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
+@import 'components/Input/input';
+@import 'components/Toggle/toggle';
 @import 'pages/page';

package/dist/utils/index.d.ts

@@ -1 +1,56 @@
+import * as React from 'react';
 export declare const px = "phillips";
+export interface InputProps {
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the type of the `<input>`
+     */
+    type: string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+interface NormalizedProps {
+    disabled?: boolean;
+    invalid?: boolean;
+    invalidId?: string;
+    type?: string;
+    warn?: boolean;
+    warnId?: string;
+    validation: JSX.Element | null;
+}
+/**
+ * Returns an object containing non-colliding props and additional, generated ones.
+ * This hook ensures that only either "invalid" or "warn" is true but never both at
+ * the same time. Regardless whether "invalid" or "warn", the appropriate validation
+ * message is passed as "validation".
+ * It also ensure that neither "invalid", nor "warn", nor "disabled" are enabled when
+ * "readonly" is passed as "readonly" takes precedence.
+
+ */
+export declare function useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText, }: InputProps): NormalizedProps;
+export {};

package/dist/utils/index.js

@@ -1,4 +1,41 @@
-const p = "phillips";
+import { jsx as s } from "react/jsx-runtime";
+const n = "phillips";
+function c({
+  disabled: l = !1,
+  id: r,
+  invalid: d = !1,
+  invalidText: t = "invalid",
+  readOnly: o = !1,
+  type: a,
+  warn: v = !1,
+  warnText: e
+}) {
+  const i = {
+    disabled: !o && l,
+    invalid: !o && !l && d,
+    invalidId: `${r}-error-msg`,
+    type: a === "toggle" ? "checkbox" : a,
+    warn: !o && !l && !d && v,
+    warnId: `${r}-warn-msg`,
+    validation: null
+  };
+  return i.invalid && (i.validation = /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${n}-input__validation ${n}-${a}-input--invalid`,
+      id: i.invalidId,
+      children: t
+    }
+  )), i.warn && (i.validation = /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${n}-input__validation ${n}-${a}-input--warn`,
+      id: i.warnId,
+      children: e
+    }
+  )), i;
+}
 export {
-  p as px
+  n as px,
+  c as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,10 +47,9 @@
     "@storybook/blocks": "^7.0.22",
     "@storybook/react": "^7.0.22",
     "@storybook/react-vite": "^7.0.22",
-    "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.1",
     "@types/color": "^3.0.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.0.37",