@phillips/seldon 1.4.1 → 1.6.0

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,33 @@ p {
 }
 @mixin DistinctText {
   font-family: $DistinctText;
-}
+}
+
+@mixin headerText {
+  color: $primary-black;
+  @include DistinctDisplay();
+}
+
+@mixin bodyText {
+  color: $soft-black;
+  @include DistinctText();
+}
+
+// @TODO: uncomment when site is able to be refactored
+// 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;
@@ -32,4 +33,14 @@ $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
 
 
-$text-color: $pure-black;
+// Font-variables
+$DistinctDisplay: 'DistinctDisplay';
+$DistinctDisplayItalic: 'DistinctDisplayItalic';
+$DistinctItalic: 'DistinctItalic';
+$DistinctText: 'DistinctText';
+
+// Text variables
+$header-color: $pure-black;
+$header-family: $DistinctDisplay;
+$text-color: $soft-black;
+$text-family: $DistinctText;

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

@@ -1,34 +1,41 @@
 @import '../../vars';
 
 .#{$px}-button {
-  background-color: #1ea7fd;
+  @include bodyText;
+  align-items: center;
+  background-color: $pure-black;
   border: 0;
-  border-radius: 3rem;
+  border-radius: 3em;
   color: white;
   cursor: pointer;
-  display: inline-block;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  line-height: 1;
-  min-width: 4rem;
-  padding: 0.5rem 1rem;
+  display: inline-flex;
+  justify-content: center;
+  min-width: 9rem;
+  padding: 0.5em 1.75em;
+  transition: color 0.25s, background-color 0.25s, font-weight 0.25s;
+
+  &:hover,
+  &:focus {
+    background-color: $soft-black;
+  }
 
   &--secondary {
     color: $text-color;
     background-color: transparent;
-    box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
   }
 
-  &--small {
+  &--sm {
     font-size: 0.75rem;
   }
 
-  &--medium {
-    font-size: 0.875rem;
+  &--md {
+    font-size: 1rem;
   }
 
-  &--large {
-    font-size: 1rem;
+  &--lg {
+    font-size: 1.05rem;
+    padding: 0.75em 1.75em;
   }
 
   * {

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

@@ -0,0 +1,81 @@
+@import 'flatpickr/dist/flatpickr.css';
+@import '../../vars';
+@import '../../typography';
+
+
+.flatpickr-calendar {
+  @include DistinctText;
+
+  .flatpickr-day,
+  .flatpickr-day.selected,
+  .flatpickr-day:hover,
+  .flatpickr-day:focus,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange {
+    border-radius: 0;
+  }
+  .flatpickr-day.selected,
+  .flatpickr-day:hover,
+  .flatpickr-day:focus,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange {
+    background: $pure-black;
+    border-color: $pure-black;
+    color: $pure-white;
+  }
+
+  .flatpickr-day.today {
+    border-color: transparent;
+    @include DistinctDisplay;
+    font-weight: bold;
+    position: relative;
+
+    &::after {
+      background-color: $pure-black;
+      bottom: 2px;
+      content: '';
+      height: 0.25rem;
+      width: 0.25rem;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .flatpickr-months .flatpickr-prev-month:hover,
+  .flatpickr-months .flatpickr-next-month:hover {
+    background-color: $pure-black;
+    svg {
+      fill: $pure-white;
+    }
+  }
+
+  .flatpickr-current-month,
+  .flatpickr-monthDropdown-months,
+  .flatpickr-current-month input.cur-year {
+    @include DistinctDisplay;
+    font-size: 1rem;
+    text-transform: uppercase;
+  }
+
+  .flatpickr-weekday {
+    @include DistinctDisplay;
+    font-weight: bold;
+  }
+
+  .flatpickr-current-month {
+    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)) {
+    -webkit-box-shadow: -10px 0 0 #e6e6e6;
+    box-shadow: -10px 0 0 #e6e6e6;
+  }
+
+  &.arrowTop:before,
+  &.arrowTop:after {
+    content: unset;
+  }
+}

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

@@ -0,0 +1,165 @@
+@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;
+    }
+
+    .#{$px}-input__input {
+      background-color: rgba(239, 239, 239, 0.3);
+    }
+  }
+
+  // Invalid
+  &--invalid {
+    color: $error-red;
+
+    .#{$px}-input__label,
+    .#{$px}-input__input,
+    .#{$px}-input__input::placeholder,
+    .#{$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

@@ -1,8 +1,14 @@
+// 🌎 Globals
 @import './vars';
 // @TODO: add styles when we can do a site wide regressions QA
 // @use 'reset';
 @import './typography';
+// ⚛️ Components
 @import 'components/Button/button';
+@import 'components/DatePicker/datePicker';
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
+@import 'components/Input/input';
+@import 'components/Toggle/toggle';
+// 📑 Pages
 @import 'pages/page';

package/dist/utils/index.d.ts

@@ -1 +1,57 @@
+import * as React from 'react';
 export declare const px = "phillips";
+export declare const noOP: () => void;
+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,43 @@
-const p = "phillips";
+import { jsx as s } from "react/jsx-runtime";
+const a = "phillips", p = () => {
+};
+function u({
+  disabled: l = !1,
+  id: r,
+  invalid: d = !1,
+  invalidText: t = "invalid",
+  readOnly: o = !1,
+  type: n,
+  warn: v = !1,
+  warnText: e
+}) {
+  const i = {
+    disabled: !o && l,
+    invalid: !o && !l && d,
+    invalidId: `${r}-error-msg`,
+    type: n === "toggle" ? "checkbox" : n,
+    warn: !o && !l && !d && v,
+    warnId: `${r}-warn-msg`,
+    validation: null
+  };
+  return i.invalid && (i.validation = /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${a}-input__validation ${a}-${n}-input--invalid`,
+      id: i.invalidId,
+      children: t
+    }
+  )), i.warn && (i.validation = /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${a}-input__validation ${a}-${n}-input--warn`,
+      id: i.warnId,
+      children: e
+    }
+  )), i;
+}
 export {
-  p as px
+  p as noOP,
+  a as px,
+  u as useNormalizedInputProps
 };