@ably/ui 14.0.0-dev.f6c8d86 → 14.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 (118) hide show
  1. package/core/Accordion.js +1 -1
  2. package/core/Code.js +1 -1
  3. package/core/ContactFooter/component.css +9 -7
  4. package/core/ContactFooter.js +1 -1
  5. package/core/CookieMessage/component.css +12 -10
  6. package/core/CookieMessage.js +1 -1
  7. package/core/Expander.js +1 -0
  8. package/core/Flash/component.css +21 -19
  9. package/core/Flash.js +1 -1
  10. package/core/Footer/component.css +24 -22
  11. package/core/Footer.js +1 -1
  12. package/core/Meganav/component.css +105 -103
  13. package/core/Meganav/component.js +1 -1
  14. package/core/Meganav.js +1 -1
  15. package/core/Notice/component.css +6 -4
  16. package/core/Notice/component.js +1 -1
  17. package/core/Notice.js +1 -1
  18. package/core/Slider/component.css +32 -30
  19. package/core/Slider/component.js +1 -1
  20. package/core/Slider.js +1 -1
  21. package/core/Table/Table.js +1 -1
  22. package/core/Table/TableCell.js +3 -3
  23. package/core/Table/data.js +1 -1
  24. package/core/Table.js +1 -1
  25. package/core/scripts.js +1 -1
  26. package/core/styles/buttons.css +123 -121
  27. package/core/styles/forms.css +51 -49
  28. package/core/styles/layout.css +16 -14
  29. package/core/styles/properties.css +252 -250
  30. package/core/styles/text.css +167 -165
  31. package/core/styles.components.css +24 -22
  32. package/core/utils/syntax-highlighter.css +59 -55
  33. package/package.json +2 -4
  34. package/src/core/Accordion.tsx +8 -6
  35. package/src/core/Code.tsx +0 -1
  36. package/src/core/ContactFooter/component.css +9 -7
  37. package/src/core/ContactFooter.tsx +0 -1
  38. package/src/core/CookieMessage/component.css +12 -10
  39. package/src/core/CookieMessage.tsx +0 -1
  40. package/src/core/Expander/Expander.stories.tsx +132 -0
  41. package/src/core/Expander.tsx +63 -0
  42. package/src/core/Flash/component.css +21 -19
  43. package/src/core/Flash.tsx +0 -1
  44. package/src/core/Footer/component.css +24 -22
  45. package/src/core/Footer.tsx +0 -1
  46. package/src/core/Meganav/component.css +105 -103
  47. package/src/core/Meganav/component.js +0 -2
  48. package/src/core/Meganav.tsx +0 -1
  49. package/src/core/Notice/component.css +6 -4
  50. package/src/core/Notice/component.js +0 -1
  51. package/src/core/Notice.tsx +0 -1
  52. package/src/core/Slider/Slider.stories.tsx +2 -2
  53. package/src/core/Slider/component.css +32 -30
  54. package/src/core/Slider/component.js +0 -2
  55. package/src/core/Slider.tsx +51 -20
  56. package/src/core/Table/Table.tsx +1 -2
  57. package/src/core/Table/TableCell.tsx +2 -40
  58. package/src/core/Table/data.tsx +21 -1
  59. package/src/core/Table.tsx +1 -12
  60. package/src/core/scripts.js +0 -2
  61. package/src/core/styles/buttons.css +123 -121
  62. package/src/core/styles/forms.css +51 -49
  63. package/src/core/styles/layout.css +16 -14
  64. package/src/core/styles/properties.css +252 -250
  65. package/src/core/styles/text.css +167 -165
  66. package/src/core/styles.components.css +24 -22
  67. package/src/core/utils/syntax-highlighter.css +59 -55
  68. package/core/.DS_Store +0 -0
  69. package/core/Accordion/.DS_Store +0 -0
  70. package/core/Code/.DS_Store +0 -0
  71. package/core/ContactFooter/.DS_Store +0 -0
  72. package/core/CookieMessage/.DS_Store +0 -0
  73. package/core/CustomerLogos/.DS_Store +0 -0
  74. package/core/DropdownMenu/.DS_Store +0 -0
  75. package/core/FeaturedLink/.DS_Store +0 -0
  76. package/core/Flash/.DS_Store +0 -0
  77. package/core/Footer/.DS_Store +0 -0
  78. package/core/Icon/.DS_Store +0 -0
  79. package/core/Loader/.DS_Store +0 -0
  80. package/core/Logo/.DS_Store +0 -0
  81. package/core/Meganav/.DS_Store +0 -0
  82. package/core/MeganavBlogPostsList/.DS_Store +0 -0
  83. package/core/MeganavControl/.DS_Store +0 -0
  84. package/core/MeganavControlMobileDropdown/.DS_Store +0 -0
  85. package/core/MeganavControlMobilePanelClose/.DS_Store +0 -0
  86. package/core/MeganavControlMobilePanelOpen/.DS_Store +0 -0
  87. package/core/MeganavSearchAutocomplete/.DS_Store +0 -0
  88. package/core/MeganavSearchSuggestions/.DS_Store +0 -0
  89. package/core/Notice/.DS_Store +0 -0
  90. package/core/Slider/.DS_Store +0 -0
  91. package/core/Table/.DS_Store +0 -0
  92. package/core/Tooltip/.DS_Store +0 -0
  93. package/src/.DS_Store +0 -0
  94. package/src/core/.DS_Store +0 -0
  95. package/src/core/Accordion/.DS_Store +0 -0
  96. package/src/core/Code/.DS_Store +0 -0
  97. package/src/core/ContactFooter/.DS_Store +0 -0
  98. package/src/core/CookieMessage/.DS_Store +0 -0
  99. package/src/core/CustomerLogos/.DS_Store +0 -0
  100. package/src/core/DropdownMenu/.DS_Store +0 -0
  101. package/src/core/FeaturedLink/.DS_Store +0 -0
  102. package/src/core/Flash/.DS_Store +0 -0
  103. package/src/core/Footer/.DS_Store +0 -0
  104. package/src/core/Icon/.DS_Store +0 -0
  105. package/src/core/Loader/.DS_Store +0 -0
  106. package/src/core/Logo/.DS_Store +0 -0
  107. package/src/core/Meganav/.DS_Store +0 -0
  108. package/src/core/MeganavBlogPostsList/.DS_Store +0 -0
  109. package/src/core/MeganavControl/.DS_Store +0 -0
  110. package/src/core/MeganavControlMobileDropdown/.DS_Store +0 -0
  111. package/src/core/MeganavControlMobilePanelClose/.DS_Store +0 -0
  112. package/src/core/MeganavControlMobilePanelOpen/.DS_Store +0 -0
  113. package/src/core/MeganavSearchAutocomplete/.DS_Store +0 -0
  114. package/src/core/MeganavSearchSuggestions/.DS_Store +0 -0
  115. package/src/core/Notice/.DS_Store +0 -0
  116. package/src/core/Slider/.DS_Store +0 -0
  117. package/src/core/Table/.DS_Store +0 -0
  118. package/src/core/Tooltip/.DS_Store +0 -0
package/src/core/styles/forms.css CHANGED
@@ -1,62 +1,64 @@
1
- .ui-checkbox-p1 {
2
- @apply flex items-start mb-16 font-sans font-medium;
3
- }
1
+ @layer components {
2
+ .ui-checkbox-p1 {
3
+ @apply flex items-start mb-16 font-sans font-medium;
4
+ }
4
5
 
5
- .ui-checkbox-p2 {
6
- @apply flex items-start mb-12 font-sans font-medium;
7
- }
6
+ .ui-checkbox-p2 {
7
+ @apply flex items-start mb-12 font-sans font-medium;
8
+ }
8
9
 
9
- .ui-checkbox-input {
10
- @apply opacity-0 absolute h-20 w-20;
11
- }
10
+ .ui-checkbox-input {
11
+ @apply opacity-0 absolute h-20 w-20;
12
+ }
12
13
 
13
- .ui-checkbox-styled {
14
- @apply w-20 h-20 mr-16;
15
- @apply bg-white flex flex-shrink-0 justify-center items-center;
16
- @apply border border-dark-grey rounded-md focus-within:border-active-orange;
17
- }
14
+ .ui-checkbox-styled {
15
+ @apply w-20 h-20 mr-16;
16
+ @apply bg-white flex flex-shrink-0 justify-center items-center;
17
+ @apply border border-dark-grey rounded-md focus-within:border-active-orange;
18
+ }
18
19
 
19
- .ui-checkbox-styled-tick {
20
- @apply hidden text-white;
21
- }
20
+ .ui-checkbox-styled-tick {
21
+ @apply hidden text-white;
22
+ }
22
23
 
23
- .ui-checkbox-label-p1 {
24
- @apply select-none;
25
- @apply text-p1 font-medium text-cool-black;
26
- }
24
+ .ui-checkbox-label-p1 {
25
+ @apply select-none;
26
+ @apply text-p1 font-medium text-cool-black;
27
+ }
27
28
 
28
- .ui-checkbox-label-p2 {
29
- @apply select-none;
30
- @apply text-p2 font-medium text-cool-black;
31
- }
29
+ .ui-checkbox-label-p2 {
30
+ @apply select-none;
31
+ @apply text-p2 font-medium text-cool-black;
32
+ }
32
33
 
33
- .ui-checkbox-input:disabled + .ui-checkbox-styled {
34
- @apply bg-gui-unavailable border;
35
- }
34
+ .ui-checkbox-input:disabled + .ui-checkbox-styled {
35
+ @apply bg-gui-unavailable border;
36
+ }
36
37
 
37
- .ui-checkbox-input:focus + .ui-checkbox-styled {
38
- border-width: 0.125rem;
39
- @apply border-gui-focus;
40
- }
38
+ .ui-checkbox-input:focus + .ui-checkbox-styled {
39
+ border-width: 0.125rem;
40
+ @apply border-gui-focus;
41
+ }
41
42
 
42
- .ui-checkbox-input:checked + .ui-checkbox-styled {
43
- @apply bg-active-orange border-dark-grey border;
44
- }
43
+ .ui-checkbox-input:checked + .ui-checkbox-styled {
44
+ @apply bg-active-orange border-dark-grey border;
45
+ }
45
46
 
46
- .ui-checkbox-input:checked + .ui-checkbox-styled svg {
47
- @apply block;
48
- }
47
+ .ui-checkbox-input:checked + .ui-checkbox-styled svg {
48
+ @apply block;
49
+ }
49
50
 
50
- .ui-textarea {
51
- @apply font-sans font-medium text-cool-black text-p1;
52
- @apply p-input mb-16;
53
- @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
54
- @apply hover:bg-white hover:shadow-input hover:border-transparent;
55
- @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
56
- }
51
+ .ui-textarea {
52
+ @apply font-sans font-medium text-cool-black text-p1;
53
+ @apply p-input mb-16;
54
+ @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
55
+ @apply hover:bg-white hover:shadow-input hover:border-transparent;
56
+ @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
57
+ }
57
58
 
58
- .ui-textarea::placeholder {
59
- /* CSS vars don't work in ::placeholder in Webkit :( */
60
- /* color: var(--text-dark-grey); */
61
- color: #76767c;
59
+ .ui-textarea::placeholder {
60
+ /* CSS vars don't work in ::placeholder in Webkit :( */
61
+ /* color: var(--text-dark-grey); */
62
+ color: #76767c;
63
+ }
62
64
  }
package/src/core/styles/layout.css CHANGED
@@ -1,19 +1,21 @@
1
- .ui-standard-container {
2
- @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
3
- }
1
+ @layer components {
2
+ .ui-standard-container {
3
+ @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
4
+ }
4
5
 
5
- .ui-grid-gap {
6
- @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
7
- }
6
+ .ui-grid-gap {
7
+ @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
8
+ }
8
9
 
9
- .ui-grid-gap-x {
10
- @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
11
- }
10
+ .ui-grid-gap-x {
11
+ @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
12
+ }
12
13
 
13
- .ui-grid-px {
14
- @apply px-24 sm:px-32 md:px-40 lg:px-64;
15
- }
14
+ .ui-grid-px {
15
+ @apply px-24 sm:px-32 md:px-40 lg:px-64;
16
+ }
16
17
 
17
- .ui-grid-mx {
18
- @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
18
+ .ui-grid-mx {
19
+ @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
20
+ }
19
21
  }