@jobber/components 4.14.1-import-typ.5 → 4.15.0

package/Grid.d.ts

@@ -0,0 +1 @@
+export * from "./dist/Grid";

package/Grid.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var Grid = require("./dist/Grid");
+
+Object.keys(Grid).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return Grid[key];
+    },
+  });
+});

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { GridCell, GridCellProps } from "./GridCell";
+import alignments from "./GridAlign.css";
+interface GridProps {
+    /**
+     * Add spacing between elements.
+     */
+    readonly gap?: boolean;
+    /**
+     * Adjust the alignment of columns. We only support a few select properties
+     * from `align-items` due to the nature of the other properties acting the
+     * same. Read more about [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property values.
+     */
+    readonly alignItems?: keyof typeof alignments;
+    /**
+     * Array of `Grid.Cell` children
+     */
+    readonly children: Array<ReactElement<GridCellProps>>;
+}
+export declare const GRID_TEST_ID = "ATL-Grid";
+export declare function Grid({ alignItems, gap, children, }: GridProps): JSX.Element;
+export declare namespace Grid {
+    var Cell: typeof GridCell;
+}
+export {};

package/dist/Grid/GridCell/GridCell.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from "react";
+/**
+ * Breakpoints that we support
+ */
+declare const breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+/**
+ *  Grab the type from breakpoints const
+ */
+type ValuesOf<T extends readonly unknown[]> = T[number];
+type Breakpoints = ValuesOf<typeof breakpoints>;
+type ColumnSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface GridCellProps {
+    /**
+     * Set how many columns wide the cell is in the grid
+     */
+    readonly size: {
+        [Breakpoint in Breakpoints]?: ColumnSizes;
+    };
+}
+export declare const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+export declare function GridCell({ size, children }: PropsWithChildren<GridCellProps>): JSX.Element;
+export {};

package/dist/Grid/GridCell/index.d.ts

@@ -0,0 +1 @@
+export * from "./GridCell";

package/dist/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from "./Grid";

package/dist/Grid/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z$2 = "._3ktwlV3aNFk- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:490px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 640px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width:1440px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width:1680px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
+var styles$1 = {"gridCell":"_3ktwlV3aNFk-"};
+styleInject_es.styleInject(css_248z$2);
+
+/**
+ * Breakpoints that we support
+ */
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const MAX_COLUMNS = 12;
+const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+function GridCell({ size, children }) {
+    /**
+     * Build CSS variables for column sizes for all possible breakpoints to size
+     * the column
+     */
+    const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
+    return (React__default["default"].createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles$1.gridCell, style: cssSizeVariables }, children));
+}
+function getSizeCSSVariables(size) {
+    return (breakpointsObj, currentSize) => {
+        let columnSize = size[currentSize];
+        // If a column size isn't provided in the size prop, use the previous
+        // breakpoint's value
+        if (!columnSize) {
+            const existingValues = Object.values(breakpointsObj);
+            const lastKnownValue = existingValues[existingValues.length - 1];
+            columnSize = lastKnownValue || MAX_COLUMNS;
+        }
+        breakpointsObj[`--gridCell--size-${currentSize}`] = columnSize;
+        return breakpointsObj;
+    };
+}
+
+var css_248z$1 = ".NqFGJV-UF3Q- {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n@media (min-width:768px) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n  }\n}\n\n@media (--medium-screens-and-up) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n  }\n}\n";
+var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = "._8XlrWg3FV-Q- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.uKzqJPlYxJs- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.CSBjeFlj2xQ- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.BYyFdzONXyk- {\n  -ms-flex-align: stretch;\n      align-items: stretch;\n}\n";
+var alignments = {"center":"_8XlrWg3FV-Q-","start":"uKzqJPlYxJs-","end":"CSBjeFlj2xQ-","stretch":"BYyFdzONXyk-"};
+styleInject_es.styleInject(css_248z);
+
+const GRID_TEST_ID = "ATL-Grid";
+function Grid({ alignItems = "start", gap = true, children, }) {
+    const classnames = classnames__default["default"](styles.grid, alignments[alignItems], {
+        [styles.gap]: gap,
+    });
+    return (React__default["default"].createElement("div", { "data-testid": GRID_TEST_ID, className: classnames }, children));
+}
+Grid.Cell = GridCell;
+
+exports.GRID_TEST_ID = GRID_TEST_ID;
+exports.Grid = Grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.14.1-import-typ.5+4700e8f4",
+  "version": "4.15.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,8 +19,8 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.38.2",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/design": "^0.39.0",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.1.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4700e8f4991644783978b5e9fcf7082e82075502"
+  "gitHead": "ee6d0ff34cc6b097c94a320e6b0391fc83907c66"
 }

package/rollup.config.js

@@ -27,7 +27,6 @@ export default {
             require.resolve("@jobber/design/src/responsiveBreakpoints.css"),
           ],
         }),
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
         require("postcss-preset-env")({
           stage: 1,
           preserve: true,