@jobber/components 4.22.3 → 4.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Link.d.ts +1 -0
- package/Link.js +17 -0
- package/dist/ConfirmationModal/index.js +2 -2
- package/dist/{ConfirmationModal-ba91bd1d.js → ConfirmationModal-1f48131f.js} +1 -1
- package/dist/FormatFile/index.js +3 -3
- package/dist/{FormatFile-196a73cd.js → FormatFile-7a77494f.js} +1 -1
- package/dist/Gallery/index.js +3 -3
- package/dist/Link/Link.d.ts +9 -0
- package/dist/Link/index.d.ts +1 -0
- package/dist/Link/index.js +15 -0
- package/dist/Modal/index.js +1 -1
- package/dist/{Modal-48e2708a.js → Modal-b684b273.js} +2 -2
- package/dist/Tabs/index.js +1 -1
- package/package.json +2 -2
package/Link.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./dist/Link";
|
package/Link.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true,
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var Link = require("./dist/Link");
|
|
8
|
+
|
|
9
|
+
Object.keys(Link).forEach(function(key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
Object.defineProperty(exports, key, {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function get() {
|
|
14
|
+
return Link[key];
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
});
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var ConfirmationModal = require('../ConfirmationModal-
|
|
5
|
+
var ConfirmationModal = require('../ConfirmationModal-1f48131f.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('@jobber/hooks/useOnKeyDown');
|
|
8
|
-
require('../Modal-
|
|
8
|
+
require('../Modal-b684b273.js');
|
|
9
9
|
require('react-dom');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('framer-motion');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
5
|
-
var Modal = require('./Modal-
|
|
5
|
+
var Modal = require('./Modal-b684b273.js');
|
|
6
6
|
var Content = require('./Content-a6590328.js');
|
|
7
7
|
var Markdown = require('./Markdown-53a0bfda.js');
|
|
8
8
|
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var FormatFile = require('../FormatFile-
|
|
5
|
+
var FormatFile = require('../FormatFile-7a77494f.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('filesize');
|
|
@@ -12,9 +12,9 @@ require('react-router-dom');
|
|
|
12
12
|
require('../Icon-405a216c.js');
|
|
13
13
|
require('@jobber/design');
|
|
14
14
|
require('../Typography-fd6f932a.js');
|
|
15
|
-
require('../ConfirmationModal-
|
|
15
|
+
require('../ConfirmationModal-1f48131f.js');
|
|
16
16
|
require('@jobber/hooks/useOnKeyDown');
|
|
17
|
-
require('../Modal-
|
|
17
|
+
require('../Modal-b684b273.js');
|
|
18
18
|
require('react-dom');
|
|
19
19
|
require('framer-motion');
|
|
20
20
|
require('@jobber/hooks/useRefocusOnActivator');
|
|
@@ -5,7 +5,7 @@ var classnames = require('classnames');
|
|
|
5
5
|
var getHumanReadableFileSize = require('filesize');
|
|
6
6
|
var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
|
|
7
7
|
var Button = require('./Button-7698424c.js');
|
|
8
|
-
var ConfirmationModal = require('./ConfirmationModal-
|
|
8
|
+
var ConfirmationModal = require('./ConfirmationModal-1f48131f.js');
|
|
9
9
|
var Glimmer = require('./Glimmer-a14ad7fd.js');
|
|
10
10
|
var Icon = require('./Icon-405a216c.js');
|
|
11
11
|
var Typography = require('./Typography-fd6f932a.js');
|
package/dist/Gallery/index.js
CHANGED
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
8
|
var LightBox = require('../LightBox-b59ee23b.js');
|
|
9
|
-
var FormatFile = require('../FormatFile-
|
|
9
|
+
var FormatFile = require('../FormatFile-7a77494f.js');
|
|
10
10
|
var Button = require('../Button-7698424c.js');
|
|
11
11
|
require('framer-motion');
|
|
12
12
|
require('react-dom');
|
|
@@ -16,8 +16,8 @@ require('@jobber/hooks/useOnKeyDown');
|
|
|
16
16
|
require('@jobber/hooks/useFocusTrap');
|
|
17
17
|
require('../ButtonDismiss-c7ee94a9.js');
|
|
18
18
|
require('filesize');
|
|
19
|
-
require('../ConfirmationModal-
|
|
20
|
-
require('../Modal-
|
|
19
|
+
require('../ConfirmationModal-1f48131f.js');
|
|
20
|
+
require('../Modal-b684b273.js');
|
|
21
21
|
require('../Heading-a1191b15.js');
|
|
22
22
|
require('../Typography-fd6f932a.js');
|
|
23
23
|
require('../Content-a6590328.js');
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
interface LinkProps {
|
|
3
|
+
readonly url: string;
|
|
4
|
+
readonly ariaLabel?: string;
|
|
5
|
+
readonly ariaExpanded?: boolean;
|
|
6
|
+
readonly external?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare function Link({ url, children, ariaLabel, ariaExpanded, external, }: PropsWithChildren<LinkProps>): JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Link } from "./Link";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
+
|
|
11
|
+
function Link({ url, children, ariaLabel, ariaExpanded, external = false, }) {
|
|
12
|
+
return (React__default["default"].createElement("a", Object.assign({ href: url }, (external && { target: "_blank" }), (ariaLabel && { "aria-label": ariaLabel }), (ariaExpanded && { "aria-expanded": ariaExpanded })), children));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
exports.Link = Link;
|
package/dist/Modal/index.js
CHANGED
|
@@ -18,11 +18,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
18
18
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
19
19
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
20
20
|
|
|
21
|
-
var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding: var(--space-base);\n}\n\n@media (min-width: 768px) {\n
|
|
21
|
+
var css_248z$1 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding-horizontal: var(--space-base);\n --modal--padding-vertical: var(--space-base);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n\n@media (min-width: 768px) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n@media (--medium-screens-and-up) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n.QGRLFHPoV5E- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: 1001;\n z-index: var(--elevation-modal);\n padding: calc(16px / 2);\n padding: var(--space-small);\n overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n._4WzGOMUGj5I- {\n background-color: rgba(0, 0, 0, 0.32);\n background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n position: relative;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: 100%;\n max-width: calc(16px * 37.5);\n max-width: var(--modal--width);\n margin: auto;\n border: calc(16px / 16) solid rgb(225, 225, 225);\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(16px / 8);\n border-radius: var(--radius-base);\n outline-color: rgb(231, 213, 87);\n outline-color: var(--color-focus);\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n --public-content--padding: var(--modal--padding);\n --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n background-color: rgb(244, 244, 244);\n background-color: var(--color-surface--background);\n}\n\n.rKvigUnOyYE- {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n._62c8HLZFwvs- {\n display: -ms-flexbox;\n display: flex;\n padding: calc(16px * 1)\n calc(16px * 1);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- > * {\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
|
|
22
22
|
var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
|
|
23
23
|
styleInject_es.styleInject(css_248z$1);
|
|
24
24
|
|
|
25
|
-
var css_248z = "._65IpUjOZiBg- {\n --modal--padding: var(--space-base);\n max-width: calc(16px * 25);\n max-width: calc(var(--base-unit) * 25);\n}\n\n.Cpwnmw65caA- {\n max-width: calc(16px * 58.75);\n max-width: calc(var(--base-unit) * 58.75);\n}\n";
|
|
25
|
+
var css_248z = "._65IpUjOZiBg- {\n --modal--padding: var(--space-base);\n --public-tab--inset: var(--space-base);\n max-width: calc(16px * 25);\n max-width: calc(var(--base-unit) * 25);\n}\n\n.Cpwnmw65caA- {\n max-width: calc(16px * 58.75);\n max-width: calc(var(--base-unit) * 58.75);\n}\n";
|
|
26
26
|
var sizes = {"small":"_65IpUjOZiBg-","large":"Cpwnmw65caA-"};
|
|
27
27
|
styleInject_es.styleInject(css_248z);
|
|
28
28
|
|
package/dist/Tabs/index.js
CHANGED
|
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
14
14
|
|
|
15
|
-
var css_248z = ":root {\n --tab--height: calc(var(--space-larger) + var(--space-small));\n --tab--inset: var(--space-base);\n --public-tab--inset: var(--tab--inset);\n}\n\n.-kxlqXO5UN0- {\n display: block;\n width: 100%;\n}\n\n.qI4lWMSNH40- {\n position: relative;\n border-bottom: solid calc(16px / 16) rgb(225, 225, 225);\n border-bottom: solid var(--border-base) var(--color-border);\n}\n\n.xohIah5wcoE-:after,\n.qnY4S9sz-8g-:before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 24px;\n}\n\n.xohIah5wcoE-:after {\n right: 0;\n box-shadow: inset -16px 0 16px -16px
|
|
15
|
+
var css_248z = ":root {\n --tab--height: calc(var(--space-larger) + var(--space-small));\n --tab--inset: var(--space-base);\n --public-tab--inset: var(--tab--inset);\n}\n\n.-kxlqXO5UN0- {\n display: block;\n width: 100%;\n}\n\n.qI4lWMSNH40- {\n position: relative;\n border-bottom: solid calc(16px / 16) rgb(225, 225, 225);\n border-bottom: solid var(--border-base) var(--color-border);\n}\n\n.xohIah5wcoE-:after,\n.qnY4S9sz-8g-:before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 24px;\n}\n\n.xohIah5wcoE-:after {\n right: 0;\n box-shadow: inset -16px 0 16px -16px rgba(0, 0, 0, 0.25);\n box-shadow: inset -16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.qnY4S9sz-8g-:before {\n left: 0;\n box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, 0.25);\n box-shadow: inset 16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.wdW31G8Trag- {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n margin-bottom: calc(-1 * (16px / 16));\n margin-bottom: calc(-1 * calc(16px / 16));\n margin-bottom: calc(-1 * var(--border-base));\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n}\n\nul.wdW31G8Trag- {\n -webkit-padding-start: 0;\n padding-left: 0;\n}\n\n.wdW31G8Trag- li {\n display: -ms-flexbox;\n display: flex;\n list-style: none;\n}\n\n.MO7CXQ8xJXo- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n height: calc((16px * 2) + (16px / 2));\n height: calc(calc(16px * 2) + calc(16px / 2));\n height: var(--tab--height);\n margin: 0;\n padding-left: calc(16px * 1);\n padding-left: var(--public-tab--inset);\n padding-right: calc(16px * 1);\n padding-right: var(--public-tab--inset);\n border: solid calc(16px / 16) rgb(225, 225, 225);\n border: solid var(--border-base) var(--color-border);\n border-left-width: 0;\n outline: none;\n background: rgba(255, 255, 255, 1);\n background: var(--color-surface);\n cursor: pointer;\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.MO7CXQ8xJXo-:hover,\n.MO7CXQ8xJXo-:focus {\n background-color: rgb(250, 246, 219);\n background-color: var(--color-surface--hover);\n}\n\n.MO7CXQ8xJXo-:focus span {\n box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n rgb(231, 213, 87);\n box-shadow: var(--shadow-focus);\n}\n\n.kqof65gyv7g- {\n border-top-color: rgb(125, 176, 14);\n border-top-color: var(--color-interactive);\n border-bottom-color: rgba(255, 255, 255, 1);\n border-bottom-color: var(--color-surface);\n}\n\n.kqof65gyv7g-:focus {\n background-color: transparent;\n}\n\n.AimQioztR1U- {\n padding-top: calc(16px * 1);\n padding-top: var(--tab--inset);\n padding-bottom: calc(16px * 1);\n padding-bottom: var(--tab--inset);\n padding-left: calc(16px * 1);\n padding-left: var(--public-tab--inset);\n padding-right: calc(16px * 1);\n padding-right: var(--public-tab--inset);\n}\n";
|
|
16
16
|
var styles = {"tabs":"-kxlqXO5UN0-","overflow":"qI4lWMSNH40-","overflowRight":"xohIah5wcoE-","overflowLeft":"qnY4S9sz-8g-","tabRow":"wdW31G8Trag-","tab":"MO7CXQ8xJXo-","selected":"kqof65gyv7g-","tabContent":"AimQioztR1U-"};
|
|
17
17
|
styleInject_es.styleInject(css_248z);
|
|
18
18
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.23.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"> 1%",
|
|
84
84
|
"IE 10"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "0843b589e39fa9380b30f82dcc7e7b654f6039cf"
|
|
87
87
|
}
|