@jobber/design 0.30.0 → 0.30.1-pre.11
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/dist/index.js +46 -47
- package/package.json +11 -13
package/dist/index.js
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
var classnames = require('classnames');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
8
10
|
|
|
9
11
|
function styleInject(css, ref) {
|
|
10
12
|
if ( ref === void 0 ) ref = {};
|
|
@@ -33,17 +35,14 @@ function styleInject(css, ref) {
|
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
|
|
36
|
-
var css_248z = ".
|
|
37
|
-
|
|
38
|
-
styleInject(css_248z);
|
|
38
|
+
var css_248z$2 = ".icon {\n fill: var(--color-greyBlue);\n display: inline-block;\n vertical-align: middle;\n}\n\n.longArrowUp {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n.longArrowDown {\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n}\n\n.thumbsDown {\n -webkit-transform: scaleY(-1);\n transform: scaleY(-1);\n}\n\n.person,\n.clients,\n.company,\n.property {\n fill: var(--color-teal);\n}\n\n.job,\n.jobOnHold {\n fill: var(--color-job);\n}\n\n.visit,\n.moveVisits {\n fill: var(--color-lime);\n}\n\n.event {\n fill: var(--color-yellow);\n}\n\n.quote {\n fill: var(--color-quote);\n}\n\n.request {\n fill: var(--color-request);\n}\n\n.task {\n fill: var(--color-navy);\n}\n\n.userUnassigned,\n.reminder,\n.trash {\n fill: var(--color-destructive);\n}\n\n.checkmark {\n fill: var(--color-success);\n}\n\n.timer {\n fill: var(--color-lightBlue);\n}\n\n.invoice,\n.invoiceLater,\n.sendInvoice,\n.paidInvoice {\n fill: var(--color-invoice);\n}\n\n.badInvoice {\n fill: var(--color-critical);\n}\n\n.payment,\n.expense {\n fill: var(--color-orange);\n}\n\n.archive {\n fill: var(--color-blue);\n}\n\n.video {\n fill: var(--color-lightBlue);\n}\n\n/* non-Atlantis colors to match brand colors of these file-types */\n\n.excel {\n fill: rgb(31, 115, 71);\n}\n\n.pdf {\n fill: rgb(195, 27, 0);\n}\n\n.word {\n fill: rgb(41, 86, 154);\n}\n";
|
|
39
|
+
styleInject(css_248z$2);
|
|
39
40
|
|
|
40
|
-
var css_248z$1 = ".
|
|
41
|
-
var sizes = {"small":"_isfJqqskSRqop8TStvGA","base":"_3ctOeOMP7zLhU37n25xoZC","large":"_2SoAwA0A8G1BGDNjtkt-lt"};
|
|
41
|
+
var css_248z$1 = ".small {\n width: var(--base-unit);\n height: var(--base-unit);\n}\n\n.base {\n width: calc(var(--base-unit) * 1.5);\n height: calc(var(--base-unit) * 1.5);\n}\n\n.large {\n width: calc(var(--base-unit) * 2);\n height: calc(var(--base-unit) * 2);\n}\n";
|
|
42
42
|
styleInject(css_248z$1);
|
|
43
43
|
|
|
44
|
-
var css_248z
|
|
45
|
-
|
|
46
|
-
styleInject(css_248z$2);
|
|
44
|
+
var css_248z = ".white {\n fill: var(--color-white);\n}\n\n.grey {\n fill: var(--color-grey);\n}\n\n.greyBlue {\n fill: var(--color-greyBlue);\n}\n\n.greyBlueDark {\n fill: var(--color-greyBlue--dark);\n}\n\n.blue {\n fill: var(--color-blue);\n}\n\n.lightBlue {\n fill: var(--color-lightBlue);\n}\n\n.green {\n fill: var(--color-green);\n}\n\n.yellow {\n fill: var(--color-yellow);\n}\n\n.red {\n fill: var(--color-red);\n}\n\n.navy {\n fill: var(--color-navy);\n}\n\n.orange {\n fill: var(--color-orange);\n}\n\n.interactive {\n fill: var(--color-interactive);\n}\n\n.interactiveHover {\n fill: var(--color-interactive--hover);\n}\n\n.destructive {\n fill: var(--color-destructive);\n}\n\n.destructiveHover {\n fill: var(--color-destructive--hover);\n}\n\n.interactiveSubtle {\n fill: var(--color-interactive--subtle);\n}\n\n.interactiveSubtleHover {\n fill: var(--color-interactive--subtle--hover);\n}\n\n.disabled {\n fill: var(--color-disabled);\n}\n\n.disabledSecondary {\n fill: var(--color-disabled--secondary);\n}\n\n.focus {\n fill: var(--color-focus);\n}\n\n.critical {\n fill: var(--color-critical);\n}\n\n.criticalSurface {\n fill: var(--color-critical--surface);\n}\n\n.criticalOnSurface {\n fill: var(--color-critical--onSurface);\n}\n\n.warning {\n fill: var(--color-warning);\n}\n\n.warningSurface {\n fill: var(--color-warning--surface);\n}\n\n.warningOnSurface {\n fill: var(--color-warning--onSurface);\n}\n\n.success {\n fill: var(--color-success);\n}\n\n.successSurface {\n fill: var(--color-success--surface);\n}\n\n.successOnSurface {\n fill: var(--color-success--onSurface);\n}\n\n.informative {\n fill: var(--color-informative);\n}\n\n.informativeSurface {\n fill: var(--color-informative--surface);\n}\n\n.informativeOnSurface {\n fill: var(--color-informative--onSurface);\n}\n\n.inactive {\n fill: var(--color-inactive);\n}\n\n.inactiveSurface {\n fill: var(--color-inactive--surface);\n}\n\n.inactiveOnSurface {\n fill: var(--color-inactive--onSurface);\n}\n\n.heading {\n fill: var(--color-heading);\n}\n\n.text {\n fill: var(--color-text);\n}\n\n.textSecondary {\n fill: var(--color-text--secondary);\n}\n\n.textReverse {\n fill: var(--color-text--reverse);\n}\n\n.textReverseSecondary {\n fill: var(--color-text--reverse--secondary);\n}\n\n.surface {\n fill: var(--color-surface);\n}\n\n.surfaceHover {\n fill: var(--color-surface--hover);\n}\n\n.surfaceActive {\n fill: var(--color-surface--active);\n}\n\n.surfaceBackground {\n fill: var(--color-surface--background);\n}\n\n.surfaceReverse {\n fill: var(--color-surface--reverse);\n}\n\n.brand {\n fill: var(--color-brand);\n}\n\n.brandHighlight {\n fill: var(--color-brand--highlight);\n}\n";
|
|
45
|
+
styleInject(css_248z);
|
|
47
46
|
|
|
48
47
|
/* tslint:disable */
|
|
49
48
|
/* eslint-disable */
|
|
@@ -485,17 +484,17 @@ const iconMap = {
|
|
|
485
484
|
}
|
|
486
485
|
};
|
|
487
486
|
|
|
488
|
-
const iconClassMap = getInvertedClassMap(
|
|
489
|
-
const sizesClassMap = getInvertedClassMap(
|
|
490
|
-
const colorsClassMap = getInvertedClassMap(
|
|
487
|
+
const iconClassMap = getInvertedClassMap(css_248z$2);
|
|
488
|
+
const sizesClassMap = getInvertedClassMap(css_248z$1);
|
|
489
|
+
const colorsClassMap = getInvertedClassMap(css_248z);
|
|
491
490
|
function getInvertedClassMap(classMap) {
|
|
492
491
|
return Object.keys(classMap).reduce((acc, value) => (Object.assign(Object.assign({}, acc), { [classMap[value]]: value })), {});
|
|
493
492
|
}
|
|
494
493
|
function getIcon({ name, color, size = "base" }) {
|
|
495
|
-
const svgClassNames =
|
|
496
|
-
[
|
|
497
|
-
[
|
|
498
|
-
[
|
|
494
|
+
const svgClassNames = classnames__default["default"](css_248z$2.icon, css_248z$1[size], {
|
|
495
|
+
[css_248z$2.longArrowUp]: name === "longArrowUp",
|
|
496
|
+
[css_248z$2.longArrowDown]: name === "longArrowDown",
|
|
497
|
+
[css_248z$2.thumbsDown]: name === "thumbsDown",
|
|
499
498
|
});
|
|
500
499
|
const pathClassNames = getPathClassNames(name, color);
|
|
501
500
|
const paths = getPaths(name);
|
|
@@ -526,36 +525,36 @@ function mapToCorrectIcon(name) {
|
|
|
526
525
|
}
|
|
527
526
|
}
|
|
528
527
|
function getPathClassNames(name, color) {
|
|
529
|
-
return
|
|
530
|
-
[
|
|
531
|
-
[
|
|
532
|
-
[
|
|
533
|
-
[
|
|
534
|
-
[
|
|
535
|
-
[
|
|
536
|
-
[
|
|
537
|
-
[
|
|
538
|
-
[
|
|
539
|
-
[
|
|
540
|
-
[
|
|
541
|
-
[
|
|
542
|
-
[
|
|
543
|
-
[
|
|
544
|
-
[
|
|
545
|
-
[
|
|
546
|
-
[
|
|
547
|
-
[
|
|
548
|
-
[
|
|
549
|
-
[
|
|
550
|
-
[
|
|
551
|
-
[
|
|
552
|
-
[
|
|
553
|
-
[
|
|
554
|
-
[
|
|
555
|
-
[
|
|
556
|
-
[
|
|
557
|
-
[
|
|
558
|
-
[
|
|
528
|
+
return classnames__default["default"](color && css_248z[color], {
|
|
529
|
+
[css_248z$2.person]: name === "person",
|
|
530
|
+
[css_248z$2.clients]: name === "clients",
|
|
531
|
+
[css_248z$2.company]: name === "company",
|
|
532
|
+
[css_248z$2.property]: name === "property",
|
|
533
|
+
[css_248z$2.userUnassigned]: name === "userUnassigned",
|
|
534
|
+
[css_248z$2.job]: name === "job",
|
|
535
|
+
[css_248z$2.jobOnHold]: name === "jobOnHold",
|
|
536
|
+
[css_248z$2.visit]: name === "visit",
|
|
537
|
+
[css_248z$2.moveVisits]: name === "moveVisits",
|
|
538
|
+
[css_248z$2.event]: name === "event",
|
|
539
|
+
[css_248z$2.request]: name === "request",
|
|
540
|
+
[css_248z$2.reminder]: name === "reminder",
|
|
541
|
+
[css_248z$2.trash]: name === "trash",
|
|
542
|
+
[css_248z$2.task]: name === "task",
|
|
543
|
+
[css_248z$2.timer]: name === "timer",
|
|
544
|
+
[css_248z$2.quote]: name === "quote",
|
|
545
|
+
[css_248z$2.invoice]: name === "invoice",
|
|
546
|
+
[css_248z$2.checkmark]: name === "checkmark",
|
|
547
|
+
[css_248z$2.invoiceLater]: name === "invoiceLater",
|
|
548
|
+
[css_248z$2.badInvoice]: name === "badInvoice",
|
|
549
|
+
[css_248z$2.sendInvoice]: name === "sendInvoice",
|
|
550
|
+
[css_248z$2.paidInvoice]: name === "paidInvoice",
|
|
551
|
+
[css_248z$2.payment]: name === "payment",
|
|
552
|
+
[css_248z$2.expense]: name === "expense",
|
|
553
|
+
[css_248z$2.archive]: name === "archive",
|
|
554
|
+
[css_248z$2.excel]: name === "excel",
|
|
555
|
+
[css_248z$2.pdf]: name === "pdf",
|
|
556
|
+
[css_248z$2.word]: name === "word",
|
|
557
|
+
[css_248z$2.video]: name === "video",
|
|
559
558
|
});
|
|
560
559
|
}
|
|
561
560
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/design",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.1-pre.11+18c0b8e3",
|
|
4
4
|
"description": "Design foundation for the Jobber Atlantis Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -20,38 +20,36 @@
|
|
|
20
20
|
"build:cssTypes": "tcm src/icons",
|
|
21
21
|
"build:colors": "node buildColors.js",
|
|
22
22
|
"build:foundation": "node buildFoundation.js && node jobberStyle.js && npm run build:foundationTypes && npm run build:addTypeLinterExceptions && npm run build:addFoundationLinterExceptions && npm run build:removeTempFiles",
|
|
23
|
-
"build:foundationTypes": "tsc --declaration --emitDeclarationOnly --allowJs foundation.js --outDir .",
|
|
23
|
+
"build:foundationTypes": "tsc --declaration --emitDeclarationOnly --allowJs foundation.js --outDir . --skipLibCheck",
|
|
24
24
|
"build:addTypeLinterExceptions": "(printf '/* tslint:disable */\n/* eslint-disable */\n/* This file is automatically generated and should not be edited. */\n'; cat foundation.d.ts) > foundation.d.ts.temp",
|
|
25
25
|
"build:addFoundationLinterExceptions": "(printf '/* tslint:disable */\n/* eslint-disable */\n/* This file is automatically generated and should not be edited. */\n'; cat foundation.js) > foundation.js.temp",
|
|
26
26
|
"build:removeTempFiles": "rm -f src/foundation.js && mv foundation.d.ts.temp foundation.d.ts && mv foundation.js.temp foundation.js",
|
|
27
27
|
"build:iconCssStyle": "node buildIconStyles.js && npm run build:iconCssStyleTypes",
|
|
28
|
-
"build:iconCssStyleTypes": "tsc --declaration --emitDeclarationOnly --allowJs src/icons/iconStyles.ts --outDir ./src/icons",
|
|
28
|
+
"build:iconCssStyleTypes": "tsc --declaration --emitDeclarationOnly --allowJs src/icons/iconStyles.ts --outDir ./src/icons --skipLibCheck",
|
|
29
29
|
"clean": "rm -rf dist/* icons/* colors.js foundation.* iconStyles.* tsconfig.tsbuildinfo",
|
|
30
|
-
"
|
|
30
|
+
"bootstrap": "npm run clean && npm run build"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"classnames": "^2.3.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
+
"@rollup/plugin-commonjs": "^24.0.1",
|
|
37
|
+
"@types/node": "^18.15.7",
|
|
36
38
|
"autoprefixer": "^9.5.1",
|
|
37
39
|
"css-to-react-native-transform": "^2.0.0",
|
|
38
|
-
"postcss": "^
|
|
40
|
+
"postcss": "^8.4.21",
|
|
39
41
|
"postcss-calc": "7.0.2",
|
|
40
42
|
"postcss-cli": "^6.1.2",
|
|
41
|
-
"postcss-copy": "^7.1.0",
|
|
42
43
|
"postcss-custom-properties": "^8.0.10",
|
|
43
44
|
"postcss-import": "^12.0.1",
|
|
44
45
|
"postcss-preset-env": "^6.6.0",
|
|
45
46
|
"rollup": "^1.11.3",
|
|
46
|
-
"rollup-plugin-commonjs": "^9.3.4",
|
|
47
47
|
"rollup-plugin-copy": "^3.4.0",
|
|
48
|
-
"rollup-plugin-multi-input": "^
|
|
49
|
-
"rollup-plugin-
|
|
50
|
-
"rollup-plugin-
|
|
51
|
-
"rollup-plugin-typescript": "^1.0.1",
|
|
52
|
-
"rollup-plugin-typescript2": "^0.31.2",
|
|
48
|
+
"rollup-plugin-multi-input": "^1.4.1",
|
|
49
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
50
|
+
"rollup-plugin-typescript2": "^0.34.1",
|
|
53
51
|
"typed-css-modules": "^0.7.0",
|
|
54
52
|
"typescript": "^4.9.5"
|
|
55
53
|
},
|
|
56
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "18c0b8e39ccf769eecbdce75b81233f1d0dcc4fc"
|
|
57
55
|
}
|