@phillips/seldon 1.7.1 → 1.8.0

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';
@@ -50,13 +60,13 @@ body {
 }
 
 @mixin headerText {
-  color: $primary-black;
   @include DistinctDisplay();
+  color: $primary-black;
+  font-weight: 400;
 }
 
 @mixin bodyText {
   color: $soft-black;
-  @include DistinctText();
 }
 
 // @TODO: uncomment when site is able to be refactored
@@ -76,4 +86,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-path: inset(100%);
   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,53 @@
   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 {
+  &--secondary,
+  &--ghost {
     color: $text-color;
     background-color: transparent;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
+    border: 1px solid;
+
+    &:hover,
+    &:focus {
+      color: $pure-white;
+
+      svg {
+        fill: $pure-white;
+      }
+    }
+
+    svg {
+      fill: $text-color;
+    }
+  }
+
+  &--ghost {
+    border-color: transparent;
+  }
+
+  &.#{$px}-button--icon-last svg {
+    margin-inline-end: unset;
+    margin-inline-start: 0.5rem;
   }
 
   &--sm {
@@ -39,8 +76,13 @@
   }
 
   * {
-    margin: 0
+    margin: 0;
   }
-
 }
 
+.#{$px}-button__group {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: center;
+  width: 100%;
+}

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;

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

@@ -1,101 +1,101 @@
 @import '../../vars';
 
 .#{$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%;
+  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%;
 
-    @media (max-width: 28.8125rem) {
-        flex-direction: column;
-        align-items: center;
-        gap: 1.875rem;
-        align-self: stretch;
-        padding: 1.875rem 0.9375rem;
-        background: $pure-black;
+  @media (max-width: 28.8125rem) {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.875rem;
+    align-self: stretch;
+    padding: 1.875rem 0.9375rem;
+    background: $pure-black;
 
-        &::before{
-            content: '';
-            background: var(--background);
-            width: 100%;
-            height: 12rem;
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center center;
-        }
+    &::before {
+      content: '';
+      background: var(--background);
+      width: 100%;
+      height: 12rem;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
     }
+  }
 
-    h1 {
-        font-family: 'DistinctDisplay', sans-serif;
-    }
+  h1 {
+    font-family: 'DistinctDisplay', sans-serif;
+  }
 
-    h1 span,
-    p {
-        font-family: 'DistinctText', sans-serif;        
-    }
+  h1 span,
+  p {
+    font-family: 'DistinctText', sans-serif;
+  }
 
-    h1,
-    h1 span,
-    p {
-        color: $pure-white;
-        font-weight: 400;
-        margin: 0;
-        text-transform: uppercase;
-    }
+  h1,
+  h1 span,
+  p {
+    color: $pure-white;
+    font-weight: 400;
+    margin: 0;
+    text-transform: uppercase;
+  }
 
-    p {
-        font-size: 0.875rem;
-        line-height: 1;
-        letter-spacing: 0.125rem;
-        text-align: center;
-    }
+  p {
+    font-size: 0.875rem;
+    line-height: 1;
+    letter-spacing: 0.125rem;
+    text-align: center;
+  }
 
-    & .#{$px}-hero-banner__content-wrapper {
-        max-width: 1082px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  & .#{$px}-hero-banner__content-wrapper {
+    max-width: 1082px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-    & .#{$px}-hero-banner__pre-head {
-        align-items: flex-start;
-        display: flex;
-        font-size: 0.75rem;
-        gap: 1.875rem;
+  & .#{$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;
-        }
+    @media (min-width: 28.8125rem) {
+      font-size: 0.875rem;
+    }
 
-        @media (max-width: 28.8125rem) { 
-            flex-direction: column;
-            gap: 1rem;
-            align-items: center;
-        }
+    @media (max-width: 28.8125rem) {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
     }
+  }
 
-    & .#{$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;
+  & .#{$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;
-        }
+    @media (min-width: 28.8125rem) {
+      font-size: 2.375rem;
+    }
 
-        span {
-            font-size: 1.625rem;
-        }
+    span {
+      font-size: 1.625rem;
     }
+  }
 }

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

@@ -8,9 +8,19 @@ $lg: #{$px}-input--lg;
 .#{$px}-input {
   display: flex;
   flex-direction: column;
+  width: 100%;
+
+  &--hidden {
+    @include hidden();
+  }
 
   &__label {
+    color: $keyline-gray;
+    font-size: 0.8125rem;
+    font-weight: 600;
     margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    word-break: break-word;
 
     &--hidden {
       @include hidden();
@@ -18,8 +28,10 @@ $lg: #{$px}-input--lg;
   }
 
   &__input {
-    accent-color: $pure-black;
-    border: 3px solid currentColor;
+    accent-color: $soft-black;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    font-size: 0.8125rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
     // width: 100%;
@@ -60,7 +72,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__label {
-      max-width: 8.75rem;
+      // max-width: 8.75rem;
     }
   }
 
@@ -129,7 +141,7 @@ $lg: #{$px}-input--lg;
 
 .#{$px}-input--inline.#{$px}-radio-input,
 .#{$px}-input--inline.#{$px}-checkbox-input,
-.#{$px}-input--inline.#{$px}-toggle-input  {
+.#{$px}-input--inline.#{$px}-toggle-input {
   flex-direction: row-reverse;
   justify-content: flex-end;
   position: relative;
@@ -142,7 +154,7 @@ $lg: #{$px}-input--lg;
     .#{$px}-input__validation {
       left: 0;
       position: absolute;
-      top: 0
+      top: 0;
     }
   }
 

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

@@ -28,19 +28,23 @@ $lg: #{$px}-input--lg;
     }
 
     &::before {
-      background-color: rgba(0,0,0, .4);
+      background-color: rgba(0, 0, 0, 0.4);
       border-radius: 1rem;
       width: $toggleBaseWidth;
       height: 1rem;
       left: 0;
-      transition: background-color 0.25s, color 0.25s;
+      transition:
+        background-color 0.25s,
+        color 0.25s;
     }
 
     &::after {
       // background-color: transparent;
-      background: #fff linear-gradient(transparent,rgba($pure-black, 0.05));
+      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;
+      box-shadow:
+        0 1px 2px 0 rgba($pure-black, 0.15),
+        0 0 0 1px rgba($pure-black, 0.15) inset;
       color: white;
       height: 1rem;
       left: 0;
@@ -51,7 +55,6 @@ $lg: #{$px}-input--lg;
   }
 
   &.#{$inline} {
-
     .#{$px}-input__label {
       margin-bottom: 0.5rem;
       margin-left: 66px;
@@ -82,7 +85,6 @@ $lg: #{$px}-input--lg;
     padding-top: 2rem;
   }
 
-
   // Height changes
   &.#{$md},
   &.#{$lg} {
@@ -140,24 +142,24 @@ $lg: #{$px}-input--lg;
 
   // When in checked state
   &:has(input:checked) {
-
     .#{$px}-input__label {
       &::before {
         background-color: $pure-black;
       }
 
       &::after {
-        transform: translate($toggleBaseWidth - 1rem, 0)
+        transform: translate($toggleBaseWidth - 1rem, 0);
       }
     }
 
     &.#{$md} .#{$px}-input__label::after,
     &.#{$lg} .#{$px}-input__label::after {
-      transform: translate($toggleBaseWidth - 1.5rem, 0)
+      transform: translate($toggleBaseWidth - 1.5rem, 0);
     }
 
-
-    &.#{$inline} .#{$px}-input__label::after { transform: translate($toggleBaseWidth - 1rem, -50%); }
+    &.#{$inline} .#{$px}-input__label::after {
+      transform: translate($toggleBaseWidth - 1rem, -50%);
+    }
 
     &.#{$md}.#{$inline} .#{$px}-input__label::after,
     &.#{$lg}.#{$inline} .#{$px}-input__label::after {
@@ -165,10 +167,14 @@ $lg: #{$px}-input--lg;
     }
 
     // Error state checked
-    &.#{$invalid} .#{$px}-input__label::before { background-color: $error-red; }
+    &.#{$invalid} .#{$px}-input__label::before {
+      background-color: $error-red;
+    }
 
     // warn state checked
-    &.#{$warn} .#{$px}-input__label::before { background-color: $warn-yellow; }
+    &.#{$warn} .#{$px}-input__label::before {
+      background-color: $warn-yellow;
+    }
   }
   &.#{$warn} {
     &.#{$md},
@@ -176,4 +182,11 @@ $lg: #{$px}-input--lg;
       padding-top: 3.5rem;
     }
   }
+
+  &:has(.#{$px}-input__input:focus) label:before {
+    outline: 2px solid AccentColor;
+    outline: 2px solid Highlight;
+    outline: 2px solid -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
 }

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -0,0 +1,55 @@
+@import '../../vars';
+@import '../../_utils';
+@import '../../typography';
+
+.#{$px}-viewings-list {
+  align-items: center;
+  background-color: $off-white;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 1rem;
+  width: 38rem;
+
+  &__title {
+    @include headerText;
+  }
+}
+
+// viewings-list-card-form
+.#{$px}-viewings-list-card {
+  align-items: flex-start;
+  background-color: $pure-white;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 34rem;
+  padding: 2rem;
+  width: 100%;
+
+  &__title {
+    @include headerText;
+    color: $soft-black;
+  }
+
+  &__location {
+    font-size: 1.25rem;
+  }
+
+  &-form__preview-set {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-inline-start: 1rem;
+    width: 100%;
+
+    &--hidden {
+      @include hidden;
+    }
+  }
+
+  hr {
+    width: 100%;
+  }
+}

package/dist/scss/pages/_page.scss

@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;

package/dist/scss/styles.scss

@@ -10,5 +10,6 @@
 @import 'components/HeroBanner/heroBanner';
 @import 'components/Input/input';
 @import 'components/Toggle/toggle';
+@import 'components/ViewingsList/viewingsList';
 // 📑 Pages
-@import 'pages/page';
+@import 'pages/page';

package/dist/utils/index.d.ts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 export declare const px = "phillips";
-export declare const noOP: () => void;
+export declare const noOp: () => void;
+export interface CommonProps {
+    /**
+     * Optional className to be applied to the outer most element
+     */
+    className?: string;
+    /**
+     * A custom `id`
+     */
+    id?: string;
+}
 export interface InputProps {
     /**
      * Specify whether the `<input>` should be disabled

package/dist/utils/index.js

@@ -19,21 +19,7 @@ function c({
     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;
+  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 {
   n as px,