@phillips/seldon 1.5.0 → 1.6.0

package/dist/scss/_typography.scss

@@ -49,20 +49,31 @@ body {
   font-family: $DistinctText;
 }
 
-h1,
-h2,
-h3,
-h4 {
+@mixin headerText {
   color: $primary-black;
   @include DistinctDisplay();
 }
 
-p,
-input,
-label,
-div,
-a,
-button {
+@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/_vars.scss

@@ -33,10 +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

@@ -83,6 +83,10 @@ $lg: #{$px}-input--lg;
     .#{$px}-input__input {
       cursor: default;
     }
+
+    .#{$px}-input__input {
+      background-color: rgba(239, 239, 239, 0.3);
+    }
   }
 
   // Invalid
@@ -91,6 +95,7 @@ $lg: #{$px}-input--lg;
 
     .#{$px}-input__label,
     .#{$px}-input__input,
+    .#{$px}-input__input::placeholder,
     .#{$px}-input__validation {
       color: inherit;
     }

package/dist/scss/styles.scss

@@ -1,10 +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,5 +1,6 @@
 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

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -32,6 +32,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "flatpickr": "^4.6.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },