@phillips/seldon 1.15.0 → 1.17.0

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,18 @@
+import { ElementType } from 'react';
+import { CommonProps } from '../../utils';
+export interface GridProps extends CommonProps {
+    /**
+     * Button contents
+     */
+    children: React.ReactNode;
+    /**
+     * Optional element to render in place of a button e.g. React-Router, etc
+     */
+    element?: ElementType;
+    /**
+     * Optional boolean to dictate if the grid has left and right margins
+     */
+    hasMargins?: boolean;
+}
+export declare function Grid({ children, className, element: Element, hasMargins, id, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export default Grid;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,29 @@
+import { jsx as m } from "react/jsx-runtime";
+import s from "../../node_modules/classnames/index.js";
+import { px as n } from "../../utils/index.js";
+function g({
+  children: e,
+  className: t,
+  element: i = "section",
+  hasMargins: o = !0,
+  id: r,
+  ...a
+}) {
+  return /* @__PURE__ */ m(
+    i,
+    {
+      "data-testid": r ? `grid-container-${r}` : "grid-container",
+      id: r,
+      className: s(`${n}-grid__container`, {
+        [`${t}`]: t,
+        [`${n}-grid__container--has-margins`]: o
+      }),
+      ...a,
+      children: e
+    }
+  );
+}
+export {
+  g as Grid,
+  g as default
+};

package/dist/components/ViewingsList/ViewingsListCardForm.js

@@ -43,6 +43,18 @@ const o = `${X}-viewings-list-card-form`, l = ({
   return T.useEffect(() => {
     f(p === "true");
   }, [p]), /* @__PURE__ */ a(W, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingLabel-${r}`,
+        name: "viewingLabelValue",
+        defaultValue: Z,
+        labelText: Y,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalidText: e == null ? void 0 : e.viewingLabelValue
+      }
+    ),
     /* @__PURE__ */ t(
       u,
       {
@@ -79,18 +91,6 @@ const o = `${X}-viewings-list-card-form`, l = ({
         invalidText: e == null ? void 0 : e.viewingHours2
       }
     ),
-    /* @__PURE__ */ t(
-      u,
-      {
-        id: `viewingLabel-${r}`,
-        name: "viewingLabelValue",
-        defaultValue: Z,
-        labelText: Y,
-        size: "sm",
-        invalid: e == null ? void 0 : e.viewingLabelValue,
-        invalidText: e == null ? void 0 : e.viewingLabelValue
-      }
-    ),
     /* @__PURE__ */ t(
       u,
       {
@@ -113,6 +113,19 @@ const o = `${X}-viewings-list-card-form`, l = ({
       {
         className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
         children: [
+          /* @__PURE__ */ t(
+            u,
+            {
+              id: `previewLabel-${r}`,
+              name: "previewLabelValue",
+              defaultValue: I,
+              labelText: j,
+              size: "sm",
+              invalid: e == null ? void 0 : e.previewLabelValue,
+              invalidText: e == null ? void 0 : e.previewLabelValue,
+              hidden: !m
+            }
+          ),
           /* @__PURE__ */ t(
             u,
             {
@@ -151,19 +164,6 @@ const o = `${X}-viewings-list-card-form`, l = ({
               invalidText: e == null ? void 0 : e.previewHours2,
               hidden: !m
             }
-          ),
-          /* @__PURE__ */ t(
-            u,
-            {
-              id: `previewLabel-${r}`,
-              name: "previewLabelValue",
-              defaultValue: I,
-              labelText: j,
-              size: "sm",
-              invalid: e == null ? void 0 : e.previewLabelValue,
-              invalidText: e == null ? void 0 : e.previewLabelValue,
-              hidden: !m
-            }
           )
         ]
       }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Button } from './components/Button/Button';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { default as Grid } from './components/Grid/Grid';
 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,20 +1,22 @@
-import { default as r } from "./components/Button/Button.js";
-import { default as o } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as s } from "./components/Header/Header.js";
-import { default as d } from "./components/HeroBanner/HeroBanner.js";
-import { default as p } from "./components/Input/Input.js";
-import { default as x } from "./components/Select/Select.js";
-import { default as i } from "./components/ViewingsList/ViewingsList.js";
-import { default as B } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as H } from "./pages/Page.js";
+import { default as t } from "./components/Button/Button.js";
+import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { Grid as s } from "./components/Grid/Grid.js";
+import { default as d } from "./components/Header/Header.js";
+import { default as p } from "./components/HeroBanner/HeroBanner.js";
+import { default as x } from "./components/Input/Input.js";
+import { default as n } from "./components/Select/Select.js";
+import { default as B } from "./components/ViewingsList/ViewingsList.js";
+import { default as H } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as S } from "./pages/Page.js";
 export {
-  r as Button,
-  o as ErrorBoundary,
-  s as Header,
-  d as HeroBanner,
-  p as Input,
-  H as Page,
-  x as Select,
-  B as StatefulViewingsList,
-  i as ViewingsList
+  t as Button,
+  a as ErrorBoundary,
+  s as Grid,
+  d as Header,
+  p as HeroBanner,
+  x as Input,
+  S as Page,
+  n as Select,
+  H as StatefulViewingsList,
+  B as ViewingsList
 };

package/dist/scss/_typography.scss

@@ -71,7 +71,6 @@ body {
   @include DistinctDisplay();
   color: $primary-black;
   font-weight: 400;
-  font-style: italic;
 }
 
 @mixin bodyText {

package/dist/scss/_utils.scss

@@ -36,3 +36,36 @@
   text-align: center;
   line-height: 1;
 }
+
+@mixin grid($columns: 2) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $spacing-medium;
+}
+
+@mixin gridContainer($margins-on: true) {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacing-medium;
+
+  @if $margins-on {
+    margin: 0 $spacing-medium;
+  }
+
+  @media (min-width: $breakpoint2) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (min-width: $breakpoint3) {
+    grid-template-columns: repeat(12, 1fr);
+    @if $margins-on {
+      margin: 0 $spacing-large;
+    }
+  }
+
+  @media (min-width: $breakpoint4) {
+    @if $margins-on {
+      margin: 0 $spacing-xl;
+    }
+  }
+}

package/dist/scss/_vars.scss

@@ -8,10 +8,11 @@ $px: phillips;
 // Primary color palette
 $pure-black: #000000;
 $primary-black: #323232;
-$pure-white: #ffffff;
+$white: #ffffff;
+
 // Secondary color palette
 $soft-black: #545454;
-$dark-gray: #75715f;
+$dark-gray: #7b7474;
 // Utilititarian color palette
 $keyline-gray: #949494;
 $medium-gray: #c3bebb;
@@ -21,15 +22,25 @@ $off-white: #f4f2f1;
 $error-red: #ff0000;
 $error-pink: rgba(255, 229, 229, 0.9);
 $warn-yellow: #d6d141;
-$post-sale-magenta: #ff0085;
-$clock-widget-blue: #4a90e2;
-$clock-widget-green: #6a9c53;
-$clock-widget-maroon: #6b0000;
-$clock-widget-red: #b00000;
+$post-sale-pink: #ff0086;
+$cta-blue: #4a90e2;
+// AM color palette
+$widget-blue: #4a90e2;
+$widget-green: #6a9c53;
+$widget-maroon: #6b0000;
+$widget-red: #b00000;
+$clock-widget-blue: $widget-blue;
+$clock-widget-green: $widget-green;
+$clock-widget-maroon: $widget-maroon;
+$clock-widget-red: $widget-red;
 // Articker color palette
 $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+// Legacy mapping
+$pure-white: $white;
+$post-sale-magenta: $post-sale-pink;
+
 // Text variables
 $header-color: $pure-black;
 $text-color: $soft-black;
@@ -147,3 +158,65 @@ $email-label-size: var(--label-size2);
 $cta-lg-label-size: var(--label-size1);
 $text-label-size: var(--label-size3);
 $text-badge-label-size: var(--label-size3);
+
+////////////////////////
+/// SPACING TOKENS:
+///////////////////////
+
+:root {
+  --spacing-micro: 0.25rem;
+  --spacing-xsm: 0.5rem;
+  --spacing-small: 1rem;
+  --spacing-medium: 2rem;
+  --spacing-large: 3rem;
+  --spacing-xl: 6rem;
+
+  @media (max-width: 960px) {
+    --spacing-micro: 0.19rem;
+    --spacing-xsm: 0.38rem;
+    --spacing-small: 0.75rem;
+    --spacing-medium: 1.5rem;
+    --spacing-large: 2.25rem;
+    --spacing-xl: 4.8rem;
+  }
+
+  @media (min-width: 1800px) {
+    --spacing-micro: 0.31rem;
+    --spacing-xsm: 0.63rem;
+    --spacing-small: 1.25rem;
+    --spacing-medium: 2.5rem;
+    --spacing-large: 3.75rem;
+    --spacing-xl: 7.5rem;
+  }
+}
+
+$spacing-micro: var(--spacing-micro);
+$spacing-xsm: var(--spacing-xsm);
+$spacing-small: var(--spacing-small);
+$spacing-medium: var(--spacing-medium);
+$spacing-large: var(--spacing-large);
+$spacing-xl: var(--spacing-xl);
+
+// PADDING
+$padding-micro: var(--spacing-micro);
+$padding-xsm: var(--spacing-xsm);
+$padding-small: var(--spacing-small);
+$padding-medium: var(--spacing-medium);
+$padding-large: var(--spacing-large);
+$padding-xl: var(--spacing-xl);
+
+// MARGIN
+$margin-micro: var(--spacing-micro);
+$margin-xsm: var(--spacing-xsm);
+$margin-small: var(--spacing-small);
+$margin-medium: var(--spacing-medium);
+$margin-large: var(--spacing-large);
+$margin-xl: var(--spacing-xl);
+
+////////////////////////
+/// Breakpoint TOKENS:
+///////////////////////
+
+$breakpoint2: 961px;
+$breakpoint3: 1401px;
+$breakpoint4: 1801px;

package/dist/scss/components/Grid/_grid.scss

@@ -0,0 +1,20 @@
+@import '../../vars';
+@import '../../_utils';
+
+.#{$px}-grid {
+  &__container {
+    @include gridContainer(false);
+  }
+
+  &__container--has-margins {
+    margin: 0 $spacing-medium;
+
+    @media (min-width: 1401px) {
+      margin: 0 $spacing-large;
+    }
+
+    @media (min-width: 1801px) {
+      margin: 0 $spacing-xl;
+    }
+  }
+}

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

@@ -9,7 +9,7 @@
   flex-direction: column;
   gap: 2.5rem;
   padding: 1rem;
-  width: 38rem;
+  max-width: 38rem;
 
   &__title {
     @include headerText;

package/dist/scss/styles.scss

@@ -11,5 +11,6 @@
 @import 'components/Input/input';
 @import 'components/Toggle/toggle';
 @import 'components/ViewingsList/viewingsList';
+@import 'components/Grid/grid';
 // 📑 Pages
 @import 'pages/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",