@jobber/components 3.0.6-pre.3 → 3.1.0

package/CHANGELOG.md

@@ -8,6 +8,25 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.0.6...@jobber/components@3.1.0) (2023-02-17)
+
+
+### Features
+
+* **components:** Add Customizable Header Prop to Atlantis Web Card Component ([#1026](https://github.com/GetJobber/atlantis/issues/1026)) ([4961208](https://github.com/GetJobber/atlantis/commit/4961208efa6db6e2aec4318f29cb637334f43ea1))
+
+
+
+
+
+## [3.0.6](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.0.5...@jobber/components@3.0.6) (2023-02-16)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [3.0.5](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.0.4...@jobber/components@3.0.5) (2023-02-14)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Card/Card.d.ts

@@ -1,18 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { XOR } from "ts-xor";
-import colors from "./colors.css";
-interface CardProps {
-    /**
-     * The `accent`, if provided, will effect the color accent at the top of
-     * the card.
-     */
-    readonly accent?: keyof typeof colors;
-    readonly children: ReactNode | ReactNode[];
-    /**
-     * The title of the card.
-     */
-    readonly title?: string;
-}
+import { CardProps } from "./types";
 interface LinkCardProps extends CardProps {
     /**
      * URL that the card would navigate to once clicked.
@@ -27,5 +15,5 @@ interface ClickableCardProps extends CardProps {
     onClick(event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
 }
 declare type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
-export declare function Card({ accent, children, onClick, title, url, external, }: CardPropOptions): JSX.Element;
+export declare function Card({ accent, header, children, onClick, title, url, external, }: CardPropOptions): JSX.Element;
 export {};

package/dist/Card/CardHeader.d.ts

@@ -0,0 +1,10 @@
+import { CardProps } from "./types";
+interface CardHeaderProps extends Pick<CardProps, "title" | "header"> {
+    className: string;
+}
+/**
+ * Intended to be used in the Card component.
+ * Use `<Card header={header} />` component instead.
+ */
+export declare function CardHeader({ className, title, header }: CardHeaderProps): JSX.Element;
+export {};

package/dist/Card/index.js

@@ -2,13 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-270d6549.js');
+var Card = require('../Card-0810e0f8.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 require('../Heading-a9a66964.js');
 require('../Typography-fbe0ed6e.js');
+require('../Button-cd30df0f.js');
+require('react-router-dom');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Menu-13deda94.js');
+require('uuid');
+require('framer-motion');
+require('@jobber/hooks');
 
 
 

package/dist/Card/types.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement, ReactNode } from "react";
+import colors from "./colors.css";
+import { ButtonProps } from "../Button";
+import { MenuProps } from "../Menu";
+export declare type ActionProps = ReactElement<Omit<ButtonProps, "size" | "fullWidth"> | MenuProps>;
+export interface HeaderActionProps {
+    /**
+     * The title of the card.
+     */
+    readonly title?: string;
+    /**
+     * The action props that renders into a button on the card header.
+     */
+    readonly action?: ActionProps;
+}
+export interface CardProps {
+    /**
+     * The `accent`, if provided, will effect the color accent at the top of
+     * the card.
+     */
+    readonly accent?: keyof typeof colors;
+    readonly children: ReactNode | ReactNode[];
+    /**
+     * @deprecated
+     * Use header instead.
+     *
+     */
+    readonly title?: string;
+    /**
+     * The header props of the card.
+     */
+    readonly header?: string | HeaderActionProps | ReactElement;
+}

package/dist/{Card-270d6549.js → Card-0810e0f8.js}

@@ -5,13 +5,15 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var Heading = require('./Heading-a9a66964.js');
+var Button = require('./Button-cd30df0f.js');
+var Menu = require('./Menu-13deda94.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$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U {\n  --card--border-color: var(--color-border);\n  display: block;\n  width: 100%;\n  border: var(--border-base) solid var(--card--border-color);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * > * {\n  --public-content--padding: 0;\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U:active {\n  outline: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE {\n  border-top-width: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl {\n  --card--border-color: transparent;\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl:hover,\n._3rK5LR5T1LRokq5vsb0JUl:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1XhV_cQQhlcMC9ag5E9jhU {\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\n}\n";
+var css$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U {\n  --card--border-color: var(--color-border);\n  display: block;\n  width: 100%;\n  border: var(--border-base) solid var(--card--border-color);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2w-ENhwzKCQRe6WuvVd7_U > * > * {\n  --public-content--padding: 0;\n}\n\n._2w-ENhwzKCQRe6WuvVd7_U:active {\n  outline: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE {\n  border-top-width: 0;\n}\n\n._1UYHkzg1Vo2DMU6bWTiDvE::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--color-grey);\n  border-top: 0.5rem solid var(--card--accent-color);\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl {\n  --card--border-color: transparent;\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all var(--timing-quick) linear;\n}\n\n._3rK5LR5T1LRokq5vsb0JUl:hover,\n._3rK5LR5T1LRokq5vsb0JUl:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._1XhV_cQQhlcMC9ag5E9jhU {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--card--base-padding);\n  background-color: var(--color-surface--background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n";
 var styles = {"card":"_2w-ENhwzKCQRe6WuvVd7_U","accent":"_1UYHkzg1Vo2DMU6bWTiDvE","clickable":"_3rK5LR5T1LRokq5vsb0JUl","header":"_1XhV_cQQhlcMC9ag5E9jhU"};
 styleInject_es.styleInject(css$1);
 
@@ -47,12 +49,47 @@ function CardClickable(_a) {
     }
 }
 
+/**
+ * Intended to be used in the Card component.
+ * Use `<Card header={header} />` component instead.
+ */
+function CardHeader(_a) {
+    var className = _a.className, title = _a.title, header = _a.header;
+    // Case 1: Deprecated Title
+    if (title) {
+        return (React__default["default"].createElement("div", { className: className }, title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title)));
+    }
+    if (typeof header === "string") {
+        return (React__default["default"].createElement("div", { className: className }, header && React__default["default"].createElement(Heading.Heading, { level: 3 }, header)));
+    }
+    // header is a custom component
+    if (React__default["default"].isValidElement(header)) {
+        return header;
+    }
+    // header is an action
+    if (header === null || header === void 0 ? void 0 : header.action) {
+        return (React__default["default"].createElement("div", { className: className },
+            (header === null || header === void 0 ? void 0 : header.title) && React__default["default"].createElement(Heading.Heading, { level: 3 }, header === null || header === void 0 ? void 0 : header.title),
+            renderHeaderAction(header.action)));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+function renderHeaderAction(action) {
+    if (action.type === Button.Button) {
+        var props = tslib_es6.__assign(tslib_es6.__assign({ type: "tertiary" }, action.props), { size: "small" });
+        return action && React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, props));
+    }
+    if (action.type === Menu.Menu) {
+        return action && React__default["default"].createElement(Menu.Menu, tslib_es6.__assign({}, action.props));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
 function Card(_a) {
-    var accent = _a.accent, children = _a.children, onClick = _a.onClick, title = _a.title, url = _a.url, _b = _a.external, external = _b === void 0 ? false : _b;
+    var accent = _a.accent, header = _a.header, children = _a.children, onClick = _a.onClick, title = _a.title, url = _a.url, _b = _a.external, external = _b === void 0 ? false : _b;
     var className = classnames__default["default"](styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent]);
     var cardContent = (React__default["default"].createElement(React__default["default"].Fragment, null,
-        title && (React__default["default"].createElement("div", { className: styles.header },
-            React__default["default"].createElement(Heading.Heading, { level: 3 }, title))),
+        React__default["default"].createElement(CardHeader, { className: styles.header, title: title, header: header }),
         children));
     if (onClick) {
         return (React__default["default"].createElement(CardClickable, { className: className, onClick: onClick }, cardContent));

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-270d6549.js');
+var Card = require('../Card-0810e0f8.js');
 var Content = require('../Content-18de5fbb.js');
 var Emphasis = require('../Emphasis-75a3f411.js');
 require('../tslib.es6-5b50eb8e.js');
@@ -11,6 +11,14 @@ require('classnames');
 require('../style-inject.es-dcee06b6.js');
 require('../Heading-a9a66964.js');
 require('../Typography-fbe0ed6e.js');
+require('../Button-cd30df0f.js');
+require('react-router-dom');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Menu-13deda94.js');
+require('uuid');
+require('framer-motion');
+require('@jobber/hooks');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import { IconNames } from "@jobber/design";
-interface MenuProps {
+export interface MenuProps {
     /**
      * Custom menu activator. If this is not provided a default [… More] will be used.
      */
@@ -43,4 +43,3 @@ export interface ActionProps {
      */
     shouldFocus?: boolean;
 }
-export {};

package/dist/Menu/index.d.ts

@@ -1 +1 @@
-export { Menu, SectionProps, ActionProps } from "./Menu";
+export { Menu, SectionProps, ActionProps, MenuProps } from "./Menu";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "3.0.6-pre.3+cdc9f63a",
+  "version": "3.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,9 +18,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.28.4-pre.3+cdc9f63a",
-    "@jobber/formatters": "^0.2.1-pre.422+cdc9f63a",
-    "@jobber/hooks": "^1.12.2-pre.82+cdc9f63a",
+    "@jobber/design": "^0.28.3",
+    "@jobber/formatters": "^0.2.0",
+    "@jobber/hooks": "^1.12.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -87,5 +87,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "cdc9f63ad661eb2ed1941f492609553477153736"
+  "gitHead": "13f5f954bfa837d4c49d6b812fe4db63b5acadfc"
 }