@phillips/seldon 1.15.0 → 1.16.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/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

@@ -147,3 +147,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.16.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",