@dialpad/dialtone 8.22.0 → 9.0.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.
Files changed (107) hide show
  1. package/README.md +86 -29
  2. package/package.json +115 -115
  3. package/CHANGELOG.json +0 -1
  4. package/LICENSE.md +0 -21
  5. package/lib/build/favicons/dialpad/favicon-beta-notification__512.png +0 -0
  6. package/lib/build/favicons/dialpad/favicon-beta__512.png +0 -0
  7. package/lib/build/favicons/dialpad/favicon-csr__512.png +0 -0
  8. package/lib/build/favicons/dialpad/favicon-notification__512.png +0 -0
  9. package/lib/build/favicons/dialpad/favicon-staging-notification__512.png +0 -0
  10. package/lib/build/favicons/dialpad/favicon-staging__512.png +0 -0
  11. package/lib/build/favicons/dialpad/favicon__512.png +0 -0
  12. package/lib/build/favicons/favicon-dialtone__512.png +0 -0
  13. package/lib/build/favicons/uberconference/favicon-uberconference__512.png +0 -0
  14. package/lib/build/fonts/Archivo-Bold.woff2 +0 -0
  15. package/lib/build/fonts/Archivo-Regular.woff2 +0 -0
  16. package/lib/build/fonts/Archivo-SemiBold.woff2 +0 -0
  17. package/lib/build/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  18. package/lib/build/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  19. package/lib/build/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  20. package/lib/build/less/components/avatar.less +0 -169
  21. package/lib/build/less/components/badge.less +0 -139
  22. package/lib/build/less/components/banner.less +0 -77
  23. package/lib/build/less/components/breadcrumbs.less +0 -88
  24. package/lib/build/less/components/button.less +0 -579
  25. package/lib/build/less/components/card.less +0 -56
  26. package/lib/build/less/components/chip.less +0 -222
  27. package/lib/build/less/components/codeblock.less +0 -26
  28. package/lib/build/less/components/collapsible.less +0 -33
  29. package/lib/build/less/components/combobox.less +0 -28
  30. package/lib/build/less/components/datepicker.less +0 -146
  31. package/lib/build/less/components/emoji-picker.less +0 -222
  32. package/lib/build/less/components/forms.less +0 -153
  33. package/lib/build/less/components/icon.less +0 -63
  34. package/lib/build/less/components/image-viewer.less +0 -35
  35. package/lib/build/less/components/input.less +0 -327
  36. package/lib/build/less/components/item-layout.less +0 -53
  37. package/lib/build/less/components/keyboard-shortcut.less +0 -39
  38. package/lib/build/less/components/link.less +0 -130
  39. package/lib/build/less/components/list-group.less +0 -48
  40. package/lib/build/less/components/list-item-group.less +0 -17
  41. package/lib/build/less/components/modal.less +0 -340
  42. package/lib/build/less/components/notice.less +0 -171
  43. package/lib/build/less/components/pagination.less +0 -41
  44. package/lib/build/less/components/popover.less +0 -99
  45. package/lib/build/less/components/presence.less +0 -60
  46. package/lib/build/less/components/radio-checkbox.less +0 -278
  47. package/lib/build/less/components/root-layout.less +0 -125
  48. package/lib/build/less/components/selects.less +0 -152
  49. package/lib/build/less/components/skeleton.less +0 -98
  50. package/lib/build/less/components/stack.less +0 -129
  51. package/lib/build/less/components/tab-panel.less +0 -15
  52. package/lib/build/less/components/table.less +0 -118
  53. package/lib/build/less/components/tabs.less +0 -219
  54. package/lib/build/less/components/toast.less +0 -120
  55. package/lib/build/less/components/toggle.less +0 -173
  56. package/lib/build/less/components/tooltip.less +0 -267
  57. package/lib/build/less/dialtone-globals.less +0 -60
  58. package/lib/build/less/dialtone-reset.less +0 -362
  59. package/lib/build/less/dialtone-variables.less +0 -16
  60. package/lib/build/less/dialtone.less +0 -72
  61. package/lib/build/less/themes/default.less +0 -83
  62. package/lib/build/less/themes/example.less +0 -89
  63. package/lib/build/less/utilities/backgrounds.less +0 -139
  64. package/lib/build/less/utilities/borders.less +0 -196
  65. package/lib/build/less/utilities/colors.less +0 -122
  66. package/lib/build/less/utilities/effects.less +0 -210
  67. package/lib/build/less/utilities/flex.less +0 -227
  68. package/lib/build/less/utilities/grid.less +0 -244
  69. package/lib/build/less/utilities/interactivity.less +0 -69
  70. package/lib/build/less/utilities/layout.less +0 -146
  71. package/lib/build/less/utilities/sizing.less +0 -152
  72. package/lib/build/less/utilities/spacing.less +0 -107
  73. package/lib/build/less/utilities/svg.less +0 -58
  74. package/lib/build/less/utilities/typography.less +0 -300
  75. package/lib/build/less/variables/layout.less +0 -19
  76. package/lib/build/less/variables/sizes.less +0 -64
  77. package/lib/build/less/variables/typography.less +0 -46
  78. package/lib/build/less/variables/visual-styles.less +0 -77
  79. package/lib/build/svg/spot/browser-list-callout.svg +0 -57
  80. package/lib/build/svg/spot/browser-table-graph.svg +0 -111
  81. package/lib/build/svg/spot/female-laptop-typing.svg +0 -336
  82. package/lib/build/svg/spot/file-upload.svg +0 -56
  83. package/lib/build/svg/spot/male-laptop-typing.svg +0 -160
  84. package/lib/build/svg/spot/publish.svg +0 -110
  85. package/lib/build/svg/spot/wireless-screenshare.svg +0 -34
  86. package/lib/dist/css/dialtone.css +0 -18804
  87. package/lib/dist/css/dialtone.min.css +0 -1
  88. package/lib/dist/fonts/Archivo-Bold.woff2 +0 -0
  89. package/lib/dist/fonts/Archivo-Regular.woff2 +0 -0
  90. package/lib/dist/fonts/Archivo-SemiBold.woff2 +0 -0
  91. package/lib/dist/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  92. package/lib/dist/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  93. package/lib/dist/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  94. package/lib/dist/svg/spot/browser-list-callout.svg +0 -1
  95. package/lib/dist/svg/spot/browser-table-graph.svg +0 -1
  96. package/lib/dist/svg/spot/female-laptop-typing.svg +0 -1
  97. package/lib/dist/svg/spot/file-upload.svg +0 -1
  98. package/lib/dist/svg/spot/male-laptop-typing.svg +0 -1
  99. package/lib/dist/svg/spot/publish.svg +0 -1
  100. package/lib/dist/svg/spot/wireless-screenshare.svg +0 -1
  101. package/lib/dist/vue/spot/SpotBrowserListCallout.vue +0 -3
  102. package/lib/dist/vue/spot/SpotBrowserTableGraph.vue +0 -3
  103. package/lib/dist/vue/spot/SpotFemaleLaptopTyping.vue +0 -3
  104. package/lib/dist/vue/spot/SpotFileUpload.vue +0 -3
  105. package/lib/dist/vue/spot/SpotMaleLaptopTyping.vue +0 -3
  106. package/lib/dist/vue/spot/SpotPublish.vue +0 -3
  107. package/lib/dist/vue/spot/SpotWirelessScreenshare.vue +0 -3
package/README.md CHANGED
@@ -1,53 +1,110 @@
1
1
  # Dialtone
2
2
 
3
- This is the home for Dialtone, Dialpad's design system. It includes the resources needed to create consistent, predictable interfaces that conform to Dialpad’s design principles, language, styles, and best practices.
3
+ The monorepo for Dialpad's design system Dialtone.
4
4
 
5
- ## Install Dialtone
5
+ ## About this repo
6
6
 
7
- ### Install it via NPM:
7
+ The @dialpad/dialtone repository is a monorepo composed of independently released Dialtone NPM packages.
8
+
9
+ The following is a list of packages included in this monorepo. Note that libraries (packages folder) are separated from apps (apps folder):
10
+
11
+ ```sh
12
+ dialtone/
13
+ |--- .github # Github configuration and workflows
14
+ |--- apps # Apps
15
+ |--- dialtone-documentation # Documentation site
16
+ |--- packages # NPM packages
17
+ |--- dialtone # Dialtone CSS library
18
+ |--- dialtone-icons # Dialtone SVG icons library
19
+ |--- dialtone-tokens # Dialtone tokens library
20
+ |--- eslint-plugin-dialtone # Custom ESLint rules for Dialtone users
21
+ |--- scripts # Shared scripts
8
22
  ```
9
- npm install @dialpad/dialtone
23
+
24
+ ## Tooling
25
+
26
+ - We use [pnpm](https://pnpm.io) for managing workspaces
27
+
28
+ If you do not have pnpm installed, you can install it with:
29
+
30
+ ```bash
31
+ npm install -g pnpm
10
32
  ```
11
33
 
12
- ### Import dialtone:
13
- - CSS/LESS:
14
- ```less
15
- @import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.min.css";
34
+ - We use [Nx](https://nx.dev/) as build system for improved speed and easier monorepo administration.
35
+ nx is installed as a dev dependency in the root of the project.
36
+
37
+ ## Quick start
38
+
39
+ Once pnpm is installed, in the monorepo root run:
40
+
41
+ ```bash
42
+ pnpm install
16
43
  ```
17
- - Javascript:
18
- ```js
19
- import '@dialpad/dialtone/lib/dist/css/dialtone.min.css';
44
+
45
+ This will install the dependencies for all packages.
46
+
47
+ In order to run dialtone locally, you can use:
48
+
49
+ ```bash
50
+ # This will start the server for the documentation site and the library so it is live updated with any changes.
51
+ pnpm run start:dialtone
20
52
  ```
21
53
 
22
- ### Add dialtone's theme class to the `<body>`
54
+ Access the local server at `http://localhost:4000`
55
+
56
+ For dialtone vue 2 storybook and library run:
23
57
 
24
- - Light mode
25
- ```html
26
- <body class="dialtone-theme-light">...</body>
58
+ ```bash
59
+ pnpm run start:dialtone-vue2
27
60
  ```
28
61
 
29
- - Dark mode
30
- ```html
31
- <body class="dialtone-theme-dark">...</body>
62
+ Access the local storybook server for Dialtone Vue 2 via `http://localhost:9010/`
63
+
64
+ For dialtone vue 3 storybook and library run:
65
+
66
+ ```bash
67
+ pnpm run start:dialtone-vue3
68
+ ```
69
+
70
+ Access the local storybook server for Dialtone Vue 3 via `http://localhost:9011/`
71
+
72
+ ## Local development
73
+
74
+ Use the `--filter` flag to run commands
75
+ for a specific package or app.
76
+
77
+ ### Adding dependencies for individual packages
78
+
79
+ ```bash
80
+ pnpm add <dependency> --filter <package/app>
32
81
  ```
33
82
 
34
- This will define the Dialtone CSS variables for your desired theme.
35
- It is required to do this for Dialtone to function.
83
+ To install a local dependency, just add the `--workspace` flag
36
84
 
37
- ## Building Dialtone locally
85
+ ```bash
86
+ pnpm add <dependency> --filter <package/app> --workspace
87
+ ```
38
88
 
39
- To build Dialtone locally, visit our [installation instructions](https://dialpad.design/guides/getting-started/#build-dialtone-locally).
89
+ ### Running commands for individual packages
40
90
 
41
- ## Contributing
91
+ You can run commands like `build`, `test`, `start` from
92
+ the root of the project with:
42
93
 
43
- If you're interested in contributing to Dialtone, please read our [contributing docs](https://github.com/dialpad/dialtone/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
94
+ ```bash
95
+ pnpm nx <command> <package/app>
96
+ ```
44
97
 
45
- ## Requesting features / reporting bugs
98
+ Example:
46
99
 
47
- Requesting a feature or reporting a bug? Please do so at the below links:
100
+ ```bash
101
+ pnpm nx build dialtone-documentation
102
+ ```
48
103
 
49
- - [Request Feature](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10901&pid=12428)
50
- - [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10878&pid=12428)
104
+ ### Releasing
51
105
 
106
+ ```bash
107
+ pnpm run release
108
+ ```
52
109
 
53
- Please also feel free to contact us via the [#dialtone Slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions
110
+ This will automatically release all packages that need to be released.
package/package.json CHANGED
@@ -1,145 +1,145 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone",
3
- "version": "8.22.0",
4
- "description": "Dialpad's design system",
5
- "keywords": [
6
- "Dialpad",
7
- "Dialtone",
8
- "Design System",
9
- "CSS"
10
- ],
11
- "homepage": "https://dialpad.design",
12
- "bugs": {
13
- "email": "dialtone@dialpad.com"
14
- },
15
- "license": "MIT",
16
- "contributors": [
17
- {
18
- "name": "Brad Paugh",
19
- "email": "brad.paugh@dialpad.com",
20
- "url": "https://github.com/braddialpad"
21
- },
22
- {
23
- "name": "Francis Rupert",
24
- "email": "francis.rupert@dialpad.com",
25
- "url": "https://github.com/francisrupert"
26
- },
27
- {
28
- "name": "Julio Ortega",
29
- "email": "julio.ortega@dialpad.com",
30
- "url": "https://github.com/juliodialpad"
31
- },
32
- {
33
- "name": "Ignacio Ropolo",
34
- "email": "ignacio.ropolo@dialpad.com",
35
- "url": "https://github.com/iropolo"
36
- },
37
- {
38
- "name": "Nina Repetto",
39
- "email": "nina.repetto@dialpad.com",
40
- "url": "https://github.com/ninamarina"
41
- }
42
- ],
43
- "files": [
44
- "lib",
45
- "dist",
46
- "CHANGELOG.json"
47
- ],
48
- "bin": {
49
- "dialtone-health-check": "./lib/dist/js/dialtone_health_check/index.cjs",
50
- "dialtone-migration-helper": "./lib/dist/js/dialtone_migration_helper/index.js"
51
- },
52
- "repository": "git@github.com:dialpad/dialtone.git",
53
- "type": "module",
54
- "unpkg": "dist/css/dialtone.min.css",
55
- "browserslist": [
56
- "last 1 version",
57
- "maintained node versions"
58
- ],
59
- "publishConfig": {
60
- "access": "public"
61
- },
62
- "dependencies": {
63
- "docopt": "^0.6.2"
64
- },
3
+ "version": "9.0.0",
4
+ "description": "Dialpad's Dialtone design system monorepo",
65
5
  "devDependencies": {
66
- "@commitlint/cli": "^17.6.6",
6
+ "@commitlint/cli": "^18.4.3",
67
7
  "@commitlint/config-conventional": "^17.6.6",
68
8
  "@dialpad/conventional-changelog-angular": "^1.1.1",
69
9
  "@dialpad/semantic-release-changelog-json": "^1.0.0",
70
10
  "@semantic-release/changelog": "^6.0.3",
11
+ "@semantic-release/exec": "^6.0.3",
71
12
  "@semantic-release/git": "^10.0.1",
72
- "@vue/cli-plugin-eslint": "~5.0.8",
73
- "@vue/cli-service": "~5.0.8",
74
- "autoprefixer": "^10.4.14",
75
- "child_process": "^1.0.2",
76
- "cssnano": "^6.0.1",
77
- "del": "^6.1.1",
78
- "eslint": "8.44.0",
13
+ "gulp": "^4.0.2",
14
+ "eslint": "^8.55.0",
79
15
  "eslint-config-semistandard": "^17.0.0",
80
16
  "eslint-config-standard": "^17.1.0",
81
17
  "eslint-plugin-import": "^2.27.5",
82
18
  "eslint-plugin-jest": "^25.2.2",
83
19
  "eslint-plugin-node": "^11.1.0",
84
20
  "eslint-plugin-promise": "^6.1.1",
21
+ "eslint-plugin-storybook": "^0.6.15",
22
+ "eslint-plugin-vitest": "^0.2.6",
23
+ "eslint-plugin-vitest-globals": "^1.3.1",
85
24
  "eslint-plugin-vue": "^9.15.1",
86
25
  "eslint-plugin-vuejs-accessibility": "^2.1.0",
87
- "gulp": "^4.0.2",
88
- "gulp-cached": "^1.1.1",
89
- "gulp-concat": "^2.6.1",
90
- "gulp-less": "^5.0.0",
91
- "gulp-postcss": "^9.0.1",
92
- "gulp-rename": "^2.0.0",
93
- "gulp-replace": "^1.1.4",
94
- "gulp-sourcemaps": "^3.0.0",
95
- "gulp-svgmin": "^4.1.0",
96
26
  "husky": "^8.0.3",
97
- "jest": "^29.5.0",
98
- "less": "^4.2.0",
99
27
  "lesshint": "^6.3.7",
100
- "lint-staged": "^13.2.3",
101
- "npm-run-all": "^4.1.5",
102
- "oslllo-svg-fixer": "^2.2.0",
103
- "path": "^0.12.7",
104
- "postcss-less": "^6.0.0",
105
- "postcss-sorting": "^8.0.2",
106
- "precss": "^4.0.0",
28
+ "lint-staged": "^15.2.0",
29
+ "markdownlint": "^0.32.1",
30
+ "markdownlint-cli": "^0.35.0",
31
+ "nx": "^17.2.1",
107
32
  "semantic-release": "^21.0.6",
33
+ "semantic-release-npm-github-publish": "^1.5.4",
34
+ "semantic-release-plus": "^20.0.0",
108
35
  "stylelint": "15.11.0",
109
36
  "stylelint-config-rational-order": "^0.1.2",
110
- "stylelint-config-recommended-less": "^1.0.4",
37
+ "stylelint-config-recommended-less": "1.0.4",
111
38
  "stylelint-config-standard": "^33.0.0",
112
- "stylelint-less": "^1.0.7",
39
+ "stylelint-less": "1.0.4",
113
40
  "stylelint-no-px": "^1.0.1",
114
- "through2": "^4.0.2",
115
- "tinycolor2": "^1.6.0",
116
- "yargs": "^17.7.2",
117
- "@dialpad/dialtone-tokens": "^1.23.2"
41
+ "vitest": "^1.0.4"
118
42
  },
119
- "peerDependencies": {
120
- "chalk": "^5.2.0",
121
- "globby": "^13.1.4",
122
- "inquirer": "^9.1.5"
43
+ "resolutions": {
44
+ "@dialpad/dialtone-css>postcss-preset-env": "^7.0.0",
45
+ "@dialpad/dialtone-css>stylelint": "^15.10.1"
123
46
  },
124
- "jest": {
125
- "coverageThreshold": {
126
- "global": {
127
- "statements": 100
47
+ "files": [
48
+ "dist"
49
+ ],
50
+ "exports": {
51
+ "./css": {
52
+ "style": "./dist/css/dialtone.min.css"
53
+ },
54
+ "./vue2": {
55
+ "import": {
56
+ "types": "./dist/vue2/types/index.d.ts",
57
+ "default": "./dist/vue2/dialtone-vue.js"
58
+ },
59
+ "require": {
60
+ "types": "./dist/vue2/types/index.d.ts",
61
+ "default": "./dist/vue2/dialtone-vue.cjs"
62
+ }
63
+ },
64
+ "./vue2/emoji": {
65
+ "import": {
66
+ "types": "./dist/vue2/types/emoji.d.ts",
67
+ "default": "./dist/vue2/emoji.js"
68
+ },
69
+ "require": {
70
+ "types": "./dist/vue2/types/emoji.d.ts",
71
+ "default": "./dist/vue2/emoji.cjs"
72
+ }
73
+ },
74
+ "./vue2/directives": {
75
+ "import": {
76
+ "types": "./dist/vue2/types/directives.d.ts",
77
+ "default": "./dist/vue2/directives.js"
78
+ },
79
+ "require": {
80
+ "types": "./dist/vue2/types/directives.d.ts",
81
+ "default": "./dist/vue2/directives.cjs"
82
+ }
83
+ },
84
+ "./vue2/css": {
85
+ "style": "./dist/vue2/style.css"
86
+ },
87
+ "./vue3": {
88
+ "import": {
89
+ "types": "./dist/vue3/types/index.d.ts",
90
+ "default": "./dist/vue3/dialtone-vue.js"
91
+ },
92
+ "require": {
93
+ "types": "./dist/vue3/types/index.d.ts",
94
+ "default": "./dist/vue3/dialtone-vue.cjs"
95
+ }
96
+ },
97
+ "./vue3/emoji": {
98
+ "import": {
99
+ "types": "./dist/vue3/types/emoji.d.ts",
100
+ "default": "./dist/vue3/emoji.js"
101
+ },
102
+ "require": {
103
+ "types": "./dist/vue3/types/emoji.d.ts",
104
+ "default": "./dist/vue3/emoji.cjs"
128
105
  }
129
- }
106
+ },
107
+ "./vue3/directives": {
108
+ "import": {
109
+ "types": "./dist/vue3/types/directives.d.ts",
110
+ "default": "./dist/vue3/directives.js"
111
+ },
112
+ "require": {
113
+ "types": "./dist/vue3/types/directives.d.ts",
114
+ "default": "./dist/vue3/directives.cjs"
115
+ }
116
+ },
117
+ "./vue3/css": {
118
+ "style": "./dist/vue3/style.css"
119
+ },
120
+ "./eslint-plugin": "./dist/eslint-plugin/index.js"
130
121
  },
122
+ "homepage": "https://dialtone.dialpad.com",
123
+ "keywords": [
124
+ "Dialpad",
125
+ "Dialtone",
126
+ "Dialtone Vue",
127
+ "Dialtone Icons",
128
+ "Dialtone Tokens",
129
+ "Design System",
130
+ "Components",
131
+ "Component Library"
132
+ ],
133
+ "license": "MIT",
134
+ "repository": "git@github.com:dialpad/dialtone.git",
131
135
  "scripts": {
132
- "build": "gulp --gulpfile ./gulpfile.cjs",
133
- "lint": "run-s lint:library lint:code",
134
- "lint:fix": "run-s lint-staged:library lint-staged:code",
135
- "lesshint": "npx lesshint 'lib/build/less/utilities'",
136
- "lint-staged:code": "npm run lint:code -- --fix",
137
- "lint-staged:library": "npm run stylelint -- --fix",
138
- "lint:code": "eslint '**/*.{js,cjs,vue}'",
139
- "lint:library": "run-s stylelint lesshint",
140
- "start": "gulp watch",
141
- "stylelint": "npx stylelint 'lib/build/less/**/*.less'",
142
- "build:icons": "gulp icons",
143
- "test:postcss-generator-plugin": "jest --coverage && eslint ."
136
+ "test": "nx run-many --target=test",
137
+ "build": "nx run-many --target=build",
138
+ "lint": "nx run-many --target=lint --projects=dialtone-css,dialtone-vue2,dialtone-vue3,dialtone-documentation",
139
+ "start:dialtone": "nx run-many --target=start --projects=dialtone-css,dialtone-documentation",
140
+ "start:dialtone-vue3": "nx run-many --target=start --projects=dialtone-css,dialtone-vue3",
141
+ "start:dialtone-vue2": "nx run-many --target=start --projects=dialtone-css,dialtone-vue2",
142
+ "release": "./scripts/release.sh",
143
+ "test:vitest": "vitest"
144
144
  }
145
145
  }