@aivenio/aquarium 1.65.2 → 1.67.0-rc1

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 (106) hide show
  1. package/README.md +11 -3
  2. package/dist/_variables.scss +69 -3
  3. package/dist/atoms.cjs +821 -325
  4. package/dist/atoms.mjs +816 -325
  5. package/dist/charts.cjs +1 -1
  6. package/dist/charts.mjs +1 -1
  7. package/dist/src/atoms/Alert/Alert.js +15 -15
  8. package/dist/src/atoms/Banner/Banner.js +3 -3
  9. package/dist/src/atoms/Card/Card.js +6 -6
  10. package/dist/src/atoms/Checkbox/Checkbox.d.ts +1 -1
  11. package/dist/src/atoms/Checkbox/Checkbox.js +7 -7
  12. package/dist/src/atoms/DataList/DataList.js +5 -5
  13. package/dist/src/atoms/Dialog/Dialog.d.ts +2 -2
  14. package/dist/src/atoms/Dialog/Dialog.js +4 -4
  15. package/dist/src/atoms/DropdownMenu/DropdownMenu.js +8 -10
  16. package/dist/src/atoms/Modal/Modal.js +4 -4
  17. package/dist/src/atoms/Navigation/Navigation.js +5 -5
  18. package/dist/src/atoms/Popover/Popover.js +2 -2
  19. package/dist/src/atoms/ProgressBar/ProgressBar.js +6 -6
  20. package/dist/src/atoms/RadioButton/RadioButton.d.ts +1 -1
  21. package/dist/src/atoms/RadioButton/RadioButton.js +4 -4
  22. package/dist/src/atoms/Section/Section.js +2 -2
  23. package/dist/src/atoms/Select/Select.js +16 -19
  24. package/dist/src/atoms/Stepper/Stepper.js +12 -11
  25. package/dist/src/atoms/Switch/Switch.d.ts +1 -1
  26. package/dist/src/atoms/Switch/Switch.js +5 -5
  27. package/dist/src/atoms/Table/Table.js +6 -6
  28. package/dist/src/atoms/Timeline/Timeline.js +3 -3
  29. package/dist/src/atoms/Toast/Toast.js +5 -5
  30. package/dist/src/atoms/Typography/Typography.d.ts +2 -2
  31. package/dist/src/atoms/Typography/Typography.js +2 -2
  32. package/dist/src/atoms/index.d.ts +5 -0
  33. package/dist/src/atoms/index.js +6 -1
  34. package/dist/src/charts/PieChart/ChartValue.js +1 -1
  35. package/dist/src/js/resolveTheme.js +2 -14
  36. package/dist/src/molecules/Accordion/Accordion.js +2 -2
  37. package/dist/src/molecules/Badge/Badge.d.ts +10 -4
  38. package/dist/src/molecules/Badge/Badge.js +6 -5
  39. package/dist/src/molecules/Banner/Banner.d.ts +1 -1
  40. package/dist/src/molecules/Breadcrumbs/Breadcrumbs.js +4 -4
  41. package/dist/src/molecules/Button/Button.d.ts +9 -9
  42. package/dist/src/molecules/Button/Button.js +6 -6
  43. package/dist/src/molecules/Chip/Chip.js +10 -10
  44. package/dist/src/molecules/ChoiceChip/ChoiceChip.js +3 -3
  45. package/dist/src/molecules/ControlLabel/ControlLabel.js +2 -2
  46. package/dist/src/molecules/DataList/DataList.d.ts +5 -1
  47. package/dist/src/molecules/DataList/DataList.js +7 -6
  48. package/dist/src/molecules/DataList/DataListGroup.d.ts +1 -1
  49. package/dist/src/molecules/DataList/DataListGroup.js +4 -3
  50. package/dist/src/molecules/DataTable/DataTable.js +1 -1
  51. package/dist/src/molecules/Divider/Divider.js +2 -2
  52. package/dist/src/molecules/Drawer/Drawer.js +7 -9
  53. package/dist/src/molecules/Dropdown/Dropdown.js +6 -6
  54. package/dist/src/molecules/DropdownMenu/DropdownMenu.js +10 -2
  55. package/dist/src/molecules/Icon/Icon.d.ts +2 -2
  56. package/dist/src/molecules/Icon/Icon.js +3 -3
  57. package/dist/src/molecules/Input/Input.d.ts +4 -3
  58. package/dist/src/molecules/Input/Input.js +10 -4
  59. package/dist/src/molecules/List/List.js +2 -2
  60. package/dist/src/molecules/ListItem/ListItem.js +2 -2
  61. package/dist/src/molecules/MultiInput/InputChip.js +10 -11
  62. package/dist/src/molecules/NativeSelect/NativeSelect.js +6 -6
  63. package/dist/src/molecules/Pagination/Pagination.js +2 -2
  64. package/dist/src/molecules/Section/Section.js +2 -2
  65. package/dist/src/molecules/SegmentedControl/SegmentedControl.js +12 -12
  66. package/dist/src/molecules/Skeleton/Skeleton.js +2 -2
  67. package/dist/src/molecules/Tabs/Tabs.js +9 -9
  68. package/dist/src/molecules/TagLabel/TagLabel.js +4 -4
  69. package/dist/src/molecules/Timeline/Timeline.js +2 -2
  70. package/dist/src/molecules/Tooltip/Tooltip.js +3 -3
  71. package/dist/src/utils/constants.js +6 -6
  72. package/dist/src/utils/form/CharCounter/CharCounter.js +2 -2
  73. package/dist/src/utils/form/HelperText/HelperText.js +2 -2
  74. package/dist/src/utils/form/InputAdornment/InputAdornment.js +6 -6
  75. package/dist/src/utils/form/Label/Label.js +6 -6
  76. package/dist/styles.css +355 -240
  77. package/dist/system.cjs +496 -235
  78. package/dist/system.mjs +502 -241
  79. package/dist/tailwind/tailwind.backgroundColor.d.ts +43 -0
  80. package/dist/tailwind/tailwind.backgroundColor.js +44 -0
  81. package/dist/tailwind/tailwind.borderColor.d.ts +44 -0
  82. package/dist/tailwind/tailwind.borderColor.js +32 -0
  83. package/dist/tailwind/tailwind.borderRadius.d.ts +1 -0
  84. package/dist/tailwind/tailwind.borderRadius.js +5 -0
  85. package/dist/tailwind/tailwind.colors.d.ts +102 -0
  86. package/dist/tailwind/tailwind.colors.js +106 -0
  87. package/dist/tailwind/tailwind.elevations.d.ts +8 -0
  88. package/dist/tailwind/tailwind.elevations.js +9 -0
  89. package/dist/tailwind/tailwind.margin.d.ts +22 -0
  90. package/dist/tailwind/tailwind.margin.js +23 -0
  91. package/dist/tailwind/tailwind.spacing.d.ts +21 -0
  92. package/dist/tailwind/tailwind.spacing.js +22 -0
  93. package/dist/tailwind/tailwind.textColor.d.ts +56 -0
  94. package/dist/tailwind/tailwind.textColor.js +39 -0
  95. package/dist/tailwind/tailwind.typography.d.ts +14 -0
  96. package/dist/tailwind/tailwind.typography.js +15 -0
  97. package/dist/tailwind/textColor.d.ts +219 -0
  98. package/dist/tailwind/textColor.js +651 -0
  99. package/dist/tailwind/typography.d.ts +219 -0
  100. package/dist/tailwind/typography.js +651 -0
  101. package/dist/tailwind.config.js +74 -5
  102. package/dist/tailwind.theme.json +253 -1
  103. package/dist/tsconfig.module.tsbuildinfo +1 -1
  104. package/dist/types/designTokens.d.ts +2 -0
  105. package/dist/types/tailwindGenerated.d.ts +1 -1
  106. package/package.json +2 -2
package/README.md CHANGED
@@ -60,7 +60,7 @@ This project requires certain environment variables to be set before commands su
60
60
 
61
61
  - Create an npm account [here](https://www.npmjs.com/signup) if you don't already have one.
62
62
  - Generate a token for your account. You can read about how to do so [here](https://docs.npmjs.com/creating-and-viewing-access-tokens). For the purposes of building the project, read-only access will suffice.
63
- - Copy the sample environment file: `cp .env.sample env`
63
+ - Copy the sample environment file: `cp .env.sample .env`
64
64
  - Add the necessary data into the newly-created `.env` file.
65
65
  - Source the `.env` file for the environment variables to be set: `source .env`
66
66
 
@@ -81,9 +81,12 @@ After Figma has been edited, run:
81
81
  - Install Tailwind CSS IntelliSense extension. See <https://github.com/tailwindlabs/tailwindcss-intellisense#recommended-vs-code-settings>
82
82
  - Install ESLint extension and optionally enable auto-format on save. See _"Step 4 — Formatting on Save"_ from <https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code>
83
83
 
84
- ### npm link
84
+ ### Running locally
85
85
 
86
- To develop Aquarium components in the context of an application, it is easier to do it with [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link). It allows you to make changes to components, and instantly see the change in the context of the app (e.g. Console).
86
+ To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application (e.g. Console).
87
+ There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link), or copying the module into your app. This allows you to make changes to components and instantly see the change in the context of the app.
88
+
89
+ #### npm link
87
90
 
88
91
  1. In design-system directory, run `npm link`
89
92
  2. In design-system directory, run `npm link <path to app>/node_modules/react` to avoid running into conflict of having two react instances. This will otherwise break the rules of hooks and crash the app. More info on the issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react). If the command fails with errors about peer dependencies, re-run the command, adding `--force` at the end.
@@ -93,6 +96,11 @@ To develop Aquarium components in the context of an application, it is easier to
93
96
  6. Done! Now you should be able to develop DS locally, and changes are reflected to the application which depends on `@aivenio/aquarium`
94
97
  7. When you want to stop using the npm link, and go back to the regular imported version, in your app directory, run `npm unlink --no-save @aivenio/aquarium`, then `npm i` to reinstall the dependency.
95
98
 
99
+ #### Copy module
100
+
101
+ npm link can be tricky to get working. A simpler approach is to build the module and copy it into your application's `node-modules` directory:
102
+ `npm run build:ds:module && cp -r dist <path to app>/node_modules/@aivenio/aquarium`
103
+
96
104
  ### Running tests
97
105
 
98
106
  Remember that `source .env` is needed before NPM commands.
package/dist/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 17 Apr 2024 07:03:59 GMT
3
+ // Generated on Wed, 22 May 2024 07:31:01 GMT
4
4
 
5
5
  $border-radius-none: 0px !default;
6
6
  $border-radius-sm: 0.125rem !default;
@@ -111,9 +111,52 @@ $screens-sm: 672px !default;
111
111
  $screens-md: 1056px !default;
112
112
  $screens-lg: 1312px !default;
113
113
  $screens-xl: 1536px !default;
114
+ $background-color-body: var(--aquarium-colors-white) !default;
115
+ $background-color-body-intense: var(--aquarium-colors-grey-80) !default;
116
+ $background-color-popover-content: var(--aquarium-colors-white) !default;
117
+ $background-color-muted: var(--aquarium-colors-grey-0) !default;
118
+ $background-color-default: var(--aquarium-colors-grey-5) !default;
119
+ $background-color-intense: var(--aquarium-colors-grey-20) !default;
120
+ $background-color-primary-muted: var(--aquarium-colors-primary-40) !default;
121
+ $background-color-primary-default: var(--aquarium-colors-primary-80) !default;
122
+ $background-color-primary-intense: var(--aquarium-colors-primary-90) !default;
123
+ $background-color-primary-active: var(--aquarium-colors-primary-5) !default;
124
+ $background-color-primary-hover: var(--aquarium-colors-primary-5) !default;
125
+ $background-color-info-muted: var(--aquarium-colors-info-10) !default;
126
+ $background-color-info-default: var(--aquarium-colors-info-70) !default;
127
+ $background-color-info-intense: var(--aquarium-colors-info-90) !default;
128
+ $background-color-success-muted: var(--aquarium-colors-success-5) !default;
129
+ $background-color-success-default: var(--aquarium-colors-success-70) !default;
130
+ $background-color-success-intense: var(--aquarium-colors-success-90) !default;
131
+ $background-color-warning-muted: var(--aquarium-colors-warning-5) !default;
132
+ $background-color-warning-default: var(--aquarium-colors-warning-70) !default;
133
+ $background-color-warning-intense: var(--aquarium-colors-warning-90) !default;
134
+ $background-color-danger-muted: var(--aquarium-colors-error-10) !default;
135
+ $background-color-danger-default: var(--aquarium-colors-error-20) !default;
136
+ $background-color-danger-intense: var(--aquarium-colors-error-50) !default;
137
+ $background-color-status-announcement: var(--aquarium-colors-primary-5) !default;
138
+ $background-color-status-info: var(--aquarium-colors-info-10) !default;
139
+ $background-color-status-warning: var(--aquarium-colors-warning-5) !default;
140
+ $background-color-status-danger: var(--aquarium-colors-error-5) !default;
141
+ $background-color-status-success: var(--aquarium-colors-success-5) !default;
114
142
  $border-color-muted: var(--aquarium-colors-grey-5) !default;
115
143
  $border-color-default: var(--aquarium-colors-grey-20) !default;
116
144
  $border-color-intense: var(--aquarium-colors-grey-50) !default;
145
+ $border-color-primary-muted: var(--aquarium-colors-primary-60) !default;
146
+ $border-color-primary-default: var(--aquarium-colors-primary-80) !default;
147
+ $border-color-primary-intense: var(--aquarium-colors-primary-100) !default;
148
+ $border-color-info-muted: var(--aquarium-colors-info-50) !default;
149
+ $border-color-info-default: var(--aquarium-colors-info-70) !default;
150
+ $border-color-info-intense: var(--aquarium-colors-info-90) !default;
151
+ $border-color-success-muted: var(--aquarium-colors-success-10) !default;
152
+ $border-color-success-default: var(--aquarium-colors-success-40) !default;
153
+ $border-color-success-intense: var(--aquarium-colors-success-70) !default;
154
+ $border-color-warning-muted: var(--aquarium-colors-warning-20) !default;
155
+ $border-color-warning-default: var(--aquarium-colors-warning-70) !default;
156
+ $border-color-warning-intense: var(--aquarium-colors-warning-90) !default;
157
+ $border-color-danger-muted: var(--aquarium-colors-error-10) !default;
158
+ $border-color-danger-default: var(--aquarium-colors-error-50) !default;
159
+ $border-color-danger-intense: var(--aquarium-colors-error-80) !default;
117
160
  $border-width-0: 0px !default;
118
161
  $border-width-2: 2px !default;
119
162
  $border-width-4: 4px !default;
@@ -175,5 +218,28 @@ $spacing-l4: 48px !default;
175
218
  $spacing-l5: 64px !default;
176
219
  $spacing-l6: 96px !default;
177
220
  $spacing-l7: 160px !default;
178
- $text-color-muted: var(--aquarium-colors-grey-40) !default;
179
- $text-color-default: var(--aquarium-colors-grey-70) !default;
221
+ $text-color-inactive: var(--aquarium-colors-grey-40) !default;
222
+ $text-color-muted: var(--aquarium-colors-grey-50) !default;
223
+ $text-color-default: var(--aquarium-colors-grey-70) !default;
224
+ $text-color-intense: var(--aquarium-colors-grey-90) !default;
225
+ $text-color-primary-inactive: var(--aquarium-colors-primary-40) !default;
226
+ $text-color-primary-active: var(--aquarium-colors-primary-90) !default;
227
+ $text-color-primary-muted: var(--aquarium-colors-primary-60) !default;
228
+ $text-color-primary-default: var(--aquarium-colors-primary-70) !default;
229
+ $text-color-primary-intense: var(--aquarium-colors-primary-80) !default;
230
+ $text-color-info-inactive: var(--aquarium-colors-info-20) !default;
231
+ $text-color-info-muted: var(--aquarium-colors-info-40) !default;
232
+ $text-color-info-default: var(--aquarium-colors-info-70) !default;
233
+ $text-color-info-intense: var(--aquarium-colors-info-90) !default;
234
+ $text-color-success-inactive: var(--aquarium-colors-success-10) !default;
235
+ $text-color-success-muted: var(--aquarium-colors-success-30) !default;
236
+ $text-color-success-default: var(--aquarium-colors-success-70) !default;
237
+ $text-color-success-intense: var(--aquarium-colors-success-90) !default;
238
+ $text-color-warning-inactive: var(--aquarium-colors-warning-20) !default;
239
+ $text-color-warning-muted: var(--aquarium-colors-warning-40) !default;
240
+ $text-color-warning-default: var(--aquarium-colors-warning-80) !default;
241
+ $text-color-warning-intense: var(--aquarium-colors-warning-100) !default;
242
+ $text-color-danger-inactive: var(--aquarium-colors-error-10) !default;
243
+ $text-color-danger-muted: var(--aquarium-colors-error-20) !default;
244
+ $text-color-danger-default: var(--aquarium-colors-error-50) !default;
245
+ $text-color-danger-intense: var(--aquarium-colors-error-80) !default;