@kaizen/components 0.0.0-canary-debug-tab-20251015223744 → 0.0.0-canary-container-query-titleblock-20251105031251

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 (115) hide show
  1. package/dist/cjs/src/RichTextEditor/RichTextEditor/RichTextEditor.cjs +9 -24
  2. package/dist/cjs/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss.cjs +1 -1
  3. package/dist/cjs/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.cjs +51 -0
  4. package/dist/cjs/src/RichTextEditor/RichTextEditor/utils/controlmap.cjs +44 -10
  5. package/dist/cjs/src/RichTextEditor/utils/core/hooks/useRichTextEditor.cjs +17 -20
  6. package/dist/cjs/src/SingleSelect/SingleSelect.cjs +2 -0
  7. package/dist/cjs/src/Tabs/subcomponents/TabList/TabList.cjs +21 -29
  8. package/dist/cjs/src/Tile/InformationTile/InformationTile.cjs +2 -0
  9. package/dist/cjs/src/Tile/MultiActionTile/MultiActionTile.cjs +2 -0
  10. package/dist/cjs/src/Tile/TileGrid/TileGrid.cjs +2 -0
  11. package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.cjs +3 -3
  12. package/dist/esm/src/RichTextEditor/RichTextEditor/RichTextEditor.mjs +10 -25
  13. package/dist/esm/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss.mjs +1 -1
  14. package/dist/esm/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.mjs +43 -0
  15. package/dist/esm/src/RichTextEditor/RichTextEditor/utils/controlmap.mjs +44 -10
  16. package/dist/esm/src/RichTextEditor/utils/core/hooks/useRichTextEditor.mjs +18 -21
  17. package/dist/esm/src/SingleSelect/SingleSelect.mjs +2 -0
  18. package/dist/esm/src/Tabs/subcomponents/TabList/TabList.mjs +21 -29
  19. package/dist/esm/src/Tile/InformationTile/InformationTile.mjs +2 -0
  20. package/dist/esm/src/Tile/MultiActionTile/MultiActionTile.mjs +2 -0
  21. package/dist/esm/src/Tile/TileGrid/TileGrid.mjs +2 -0
  22. package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.mjs +3 -3
  23. package/dist/styles.css +64 -69
  24. package/dist/types/RichTextEditor/RichTextEditor/RichTextEditor.d.ts +2 -2
  25. package/dist/types/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.d.ts +12 -0
  26. package/dist/types/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/index.d.ts +1 -0
  27. package/dist/types/RichTextEditor/RichTextEditor/utils/controlmap.d.ts +1 -1
  28. package/dist/types/SingleSelect/SingleSelect.d.ts +2 -0
  29. package/dist/types/Tile/InformationTile/InformationTile.d.ts +2 -0
  30. package/dist/types/Tile/MultiActionTile/MultiActionTile.d.ts +2 -0
  31. package/dist/types/Tile/TileGrid/TileGrid.d.ts +2 -0
  32. package/locales/ar.json +37 -1
  33. package/locales/bg.json +37 -1
  34. package/locales/cs.json +37 -1
  35. package/locales/cy.json +37 -1
  36. package/locales/da.json +37 -1
  37. package/locales/de.json +37 -1
  38. package/locales/el.json +37 -1
  39. package/locales/en-GB.json +37 -1
  40. package/locales/en.json +40 -4
  41. package/locales/es-419.json +37 -1
  42. package/locales/es.json +37 -1
  43. package/locales/et.json +37 -1
  44. package/locales/fi.json +37 -1
  45. package/locales/fr-CA.json +37 -1
  46. package/locales/fr.json +37 -1
  47. package/locales/he.json +37 -1
  48. package/locales/hi.json +37 -1
  49. package/locales/ht.json +37 -1
  50. package/locales/hu.json +37 -1
  51. package/locales/id.json +37 -1
  52. package/locales/it.json +37 -1
  53. package/locales/ja.json +37 -1
  54. package/locales/km-KH.json +37 -1
  55. package/locales/ko.json +37 -1
  56. package/locales/lt.json +37 -1
  57. package/locales/lv.json +37 -1
  58. package/locales/mi.json +37 -1
  59. package/locales/ms.json +37 -1
  60. package/locales/nb.json +37 -1
  61. package/locales/nl.json +37 -1
  62. package/locales/pl.json +37 -1
  63. package/locales/pt-BR.json +37 -1
  64. package/locales/pt.json +37 -1
  65. package/locales/ro.json +37 -1
  66. package/locales/ru.json +37 -1
  67. package/locales/si-LK.json +37 -1
  68. package/locales/sk.json +37 -1
  69. package/locales/sr.json +37 -1
  70. package/locales/sv.json +37 -1
  71. package/locales/th.json +37 -1
  72. package/locales/tl.json +37 -1
  73. package/locales/tr.json +37 -1
  74. package/locales/uk.json +37 -1
  75. package/locales/vi.json +37 -1
  76. package/locales/zh-TW.json +37 -1
  77. package/locales/zh.json +37 -1
  78. package/package.json +1 -1
  79. package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss +8 -20
  80. package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.tsx +4 -4
  81. package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx +12 -30
  82. package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.module.scss +0 -1
  83. package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.tsx +62 -0
  84. package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/index.ts +1 -0
  85. package/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx +46 -9
  86. package/src/RichTextEditor/utils/commands/fixtures/data.json +1 -1
  87. package/src/RichTextEditor/utils/commands/listIsActive.spec.ts +2 -2
  88. package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx +11 -0
  89. package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.ts +17 -21
  90. package/src/SingleSelect/SingleSelect.tsx +2 -0
  91. package/src/SingleSelect/_docs/SingleSelect--api-specification.mdx +4 -2
  92. package/src/SingleSelect/_docs/SingleSelect--usage-guidelines.mdx +10 -2
  93. package/src/SingleSelect/_docs/SingleSelect.stickersheet.stories.tsx +1 -1
  94. package/src/SingleSelect/_docs/SingleSelect.stories.tsx +1 -1
  95. package/src/Tabs/subcomponents/TabList/TabList.tsx +30 -40
  96. package/src/Tile/InformationTile/InformationTile.tsx +2 -0
  97. package/src/Tile/InformationTile/_docs/InformationTile.mdx +3 -1
  98. package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx +1 -1
  99. package/src/Tile/InformationTile/_docs/InformationTile.stories.tsx +1 -1
  100. package/src/Tile/MultiActionTile/MultiActionTile.tsx +2 -0
  101. package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx +3 -1
  102. package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx +1 -1
  103. package/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx +1 -1
  104. package/src/Tile/TileGrid/TileGrid.tsx +2 -0
  105. package/src/Tile/TileGrid/_docs/TileGrid.mdx +3 -1
  106. package/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx +1 -1
  107. package/src/Tile/TileGrid/_docs/TileGrid.stories.tsx +1 -1
  108. package/src/TitleBlock/TitleBlock.module.scss +13 -8
  109. package/src/TitleBlock/_docs/{TitkeBlock--usage-guidelines.mdx → TitleBlock--usage-guidelines.mdx} +9 -1
  110. package/src/TitleBlock/_docs/TitleBlock.stories.tsx +71 -0
  111. package/src/TitleBlock/_mixins.scss +6 -6
  112. package/src/TitleBlock/subcomponents/NavigationTabs.module.scss +0 -1
  113. package/src/__alpha__/SingleSelect/_docs/SingleSelect.spec.stories.tsx +1 -1
  114. package/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.tsx +4 -3
  115. package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css +0 -4
package/locales/tl.json CHANGED
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "I-clear ang paghahanap"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "Bold"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "Naka-bullet na listahan"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "Bawasan ang indent"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "Dagdagan ang indent"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "Italic"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "Link"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "De-numerong listahan"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "Pag-format ng text"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "Underline"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "makipag-ugnayan sa suporta"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "Karagdagang mga aksiyon"
198
234
  }
199
- }
235
+ }
package/locales/tr.json CHANGED
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "Aramayı temizle"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "Kalın"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "Madde listesi"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "Girintiyi azaltın"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "Girintiyi artırın"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "İtalik"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "Bağlantı"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "Numaralı liste"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "Metin biçimlendirme"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "Altını çizin"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "sorun devam ederse"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "Ek eylemler"
198
234
  }
199
- }
235
+ }
package/locales/uk.json CHANGED
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "Очистити пошук"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "Жирний"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "Маркований список"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "Зменшити відступ"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "Збільшити відступ"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "Курсив"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "Посилання"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "Нумерований список"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "Форматування тексту"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "Підкреслити"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "зверніться до служби підтримки,"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "Додаткові дії"
198
234
  }
199
- }
235
+ }
package/locales/vi.json CHANGED
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "Tìm kiếm rõ ràng"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "Đậm"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "Danh sách có dấu đầu dòng"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "Giảm thụt lề"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "Tăng thụt lề"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "Nghiêng"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "Liên kết"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "Danh sách được đánh số"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "Định dạng văn bản"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "Gạch chân"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "liên hệ với bộ phận hỗ trợ"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "Các hành động bổ sung"
198
234
  }
199
- }
235
+ }
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "清除搜尋"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "粗體"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "項目符號清單"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "減少縮排"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "增加縮排"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "斜體"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "連結"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "編號清單"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "文字格式化"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "底線"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "聯絡支援中心"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "其他行動"
198
234
  }
199
- }
235
+ }
package/locales/zh.json CHANGED
@@ -85,6 +85,42 @@
85
85
  "description" : "Label for the clear search button",
86
86
  "message" : "清除搜索"
87
87
  },
88
+ "kz.rte.bold" : {
89
+ "description" : "Label for the \"Bold\" button in a text editor",
90
+ "message" : "粗体"
91
+ },
92
+ "kz.rte.bullet_list" : {
93
+ "description" : "Label for the \"Bullet list\" button in a text editor",
94
+ "message" : "项目符号列表"
95
+ },
96
+ "kz.rte.decrease_indent" : {
97
+ "description" : "Label for the \"Decrease indent\" button in a text editor",
98
+ "message" : "减少缩进"
99
+ },
100
+ "kz.rte.increase_indent" : {
101
+ "description" : "Label for the \"Increase indent\" button in a text editor",
102
+ "message" : "增加缩进"
103
+ },
104
+ "kz.rte.italic" : {
105
+ "description" : "Label for the \"Italic\" button in a text editor",
106
+ "message" : "斜体"
107
+ },
108
+ "kz.rte.link" : {
109
+ "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
110
+ "message" : "链接"
111
+ },
112
+ "kz.rte.numbered_list" : {
113
+ "description" : "Label for the \"Numbered list\" button in a text editor",
114
+ "message" : "编号列表"
115
+ },
116
+ "kz.rte.toolbar.aria_label" : {
117
+ "description" : "Label for the text formatting toolbar in a Rich Text Editor",
118
+ "message" : "文本格式"
119
+ },
120
+ "kz.rte.underline" : {
121
+ "description" : "Label for the \"Underline\" button in a text editor",
122
+ "message" : "下划线"
123
+ },
88
124
  "kzErrorPage" : {
89
125
  "description" : "Label for contact button",
90
126
  "message" : "联系支持人员"
@@ -196,4 +232,4 @@
196
232
  "description" : "Label for a dropdown menu holding additional actions",
197
233
  "message" : "附加操作"
198
234
  }
199
- }
235
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "0.0.0-canary-debug-tab-20251015223744",
3
+ "version": "0.0.0-canary-container-query-titleblock-20251105031251",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
@@ -51,6 +51,10 @@
51
51
  display: inline-block;
52
52
  }
53
53
 
54
+ .toolbarWrapper {
55
+ border-bottom: inherit;
56
+ }
57
+
54
58
  /* stylelint-disable no-descending-specificity */
55
59
  .editorWrapper {
56
60
  position: relative;
@@ -62,37 +66,21 @@
62
66
  &:hover,
63
67
  &:focus-within {
64
68
  border-color: $color-gray-600;
65
-
66
- .toolbar {
67
- border-color: $color-gray-600;
68
- }
69
69
  }
70
70
 
71
71
  &.error {
72
- &,
73
- .toolbar {
74
- border-color: $color-red-500;
75
- }
72
+ border-color: $color-red-500;
76
73
 
77
74
  &:hover {
78
- &,
79
- .toolbar {
80
- border-color: $color-red-600;
81
- }
75
+ border-color: $color-red-600;
82
76
  }
83
77
  }
84
78
 
85
79
  &.caution {
86
- &,
87
- .toolbar {
88
- border-color: $color-yellow-600;
89
- }
80
+ border-color: $color-yellow-600;
90
81
 
91
82
  &:hover {
92
- &,
93
- .toolbar {
94
- border-color: $color-yellow-700;
95
- }
83
+ border-color: $color-yellow-700;
96
84
  }
97
85
  }
98
86
  /* stylelint-enable no-descending-specificity */
@@ -87,8 +87,8 @@ describe('RTE receives list controls', () => {
87
87
  it('renders list buttons when receiving a list controls', () => {
88
88
  render(<TestRTE />)
89
89
 
90
- const bulletButton = screen.getByRole('button', { name: 'Bullet List' })
91
- const orderedButton = screen.getByRole('button', { name: 'Numbered List' })
90
+ const bulletButton = screen.getByRole('button', { name: 'Bullet list' })
91
+ const orderedButton = screen.getByRole('button', { name: 'Numbered list' })
92
92
 
93
93
  expect(bulletButton && orderedButton).toBeTruthy()
94
94
  })
@@ -117,7 +117,7 @@ describe('RTE receives list controls', () => {
117
117
  })
118
118
 
119
119
  await waitFor(() => {
120
- fireEvent.click(screen.getByRole('button', { name: 'Bullet List' }))
120
+ fireEvent.click(screen.getByRole('button', { name: 'Bullet list' }))
121
121
  screen.getByRole('list')
122
122
 
123
123
  expect(document.querySelectorAll('ul').length).toBeGreaterThan(0)
@@ -132,7 +132,7 @@ describe('RTE receives list controls', () => {
132
132
  })
133
133
 
134
134
  await waitFor(() => {
135
- fireEvent.click(screen.getByRole('button', { name: 'Numbered List' }))
135
+ fireEvent.click(screen.getByRole('button', { name: 'Numbered list' }))
136
136
 
137
137
  expect(document.querySelectorAll('ol').length).toBeGreaterThan(0)
138
138
  })
@@ -3,8 +3,8 @@ import classnames from 'classnames'
3
3
  import { FieldMessage } from '~components/FieldMessage'
4
4
  import { Label } from '~components/Label'
5
5
  import { InlineNotification } from '~components/Notification'
6
- import { type OverrideClassName } from '~components/types/OverrideClassName'
7
- import { type EditorContentArray, type EditorRows, type ToolbarItems } from '../types'
6
+ import type { OverrideClassName } from '~components/types/OverrideClassName'
7
+ import type { EditorContentArray, EditorRows, ToolbarItems } from '../types'
8
8
  import { useRichTextEditor } from '../utils/core'
9
9
  import { createLinkManager } from '../utils/plugins'
10
10
  import {
@@ -15,10 +15,7 @@ import {
15
15
  ProseMirrorState,
16
16
  } from '../utils/prosemirror'
17
17
  import { createSchemaFromControls } from './schema'
18
- import { ToggleIconButton } from './subcomponents/ToggleIconButton'
19
- import { Toolbar } from './subcomponents/Toolbar'
20
- import { ToolbarSection } from './subcomponents/ToolbarSection'
21
- import { buildControlMap } from './utils/controlmap'
18
+ import { ToolbarControls } from './subcomponents/ToolbarControls'
22
19
  import { buildInputRules } from './utils/inputrules'
23
20
  import { buildKeymap } from './utils/keymap'
24
21
  import styles from './RichTextEditor.module.scss'
@@ -132,8 +129,6 @@ export const RichTextEditor = ({
132
129
 
133
130
  const [editorRef, editorState, dispatchTransaction] = useRichTextEditorResult
134
131
 
135
- const controlMap = buildControlMap(schema, editorState, controls)
136
-
137
132
  // @todo: Fix if possible - avoiding breaking in eslint upgrade
138
133
  // eslint-disable-next-line react-hooks/rules-of-hooks
139
134
  useEffect(() => {
@@ -148,28 +143,15 @@ export const RichTextEditor = ({
148
143
  <Label classNameOverride={styles.editorLabel} id={labelId} labelText={labelText} />
149
144
  )}
150
145
  <div className={classnames(styles.editorWrapper, styles[status])}>
151
- {controls && (
152
- <Toolbar
153
- aria-controls={editorId}
154
- aria-label="Text formatting"
155
- classNameOverride={styles.toolbar}
156
- >
157
- {controlMap.map((section, index) => (
158
- <ToolbarSection key={index}>
159
- {section.map((controlConfig, controlKeyIndex) => (
160
- <ToggleIconButton
161
- key={controlKeyIndex}
162
- icon={controlConfig.icon}
163
- disabled={controlConfig.disabled}
164
- label={controlConfig.label}
165
- isActive={controlConfig.isActive}
166
- onClick={(): void => dispatchTransaction(controlConfig.action)}
167
- />
168
- ))}
169
- </ToolbarSection>
170
- ))}
171
- </Toolbar>
172
- )}
146
+ <div className={styles.toolbarWrapper}>
147
+ <ToolbarControls
148
+ editorId={editorId}
149
+ controls={controls}
150
+ editorState={editorState}
151
+ schema={schema}
152
+ dispatchTransaction={dispatchTransaction}
153
+ />
154
+ </div>
173
155
  <div
174
156
  id={editorId}
175
157
  ref={editorRef}
@@ -3,6 +3,5 @@
3
3
  @layer kz-components {
4
4
  .toolbar {
5
5
  display: block;
6
- border-bottom: 2px solid $color-gray-500;
7
6
  }
8
7
  }
@@ -0,0 +1,62 @@
1
+ import React, { useCallback } from 'react'
2
+ import { useIntl } from '@cultureamp/i18n-react-intl'
3
+ import type { ToolbarItems } from '../../../types'
4
+ import type { CommandOrTransaction } from '../../../utils/core'
5
+ import type { ProseMirrorModel, ProseMirrorState } from '../../../utils/prosemirror'
6
+ import { useControlMap } from '../../utils/controlmap'
7
+ import { ToggleIconButton } from '../ToggleIconButton'
8
+ import { Toolbar } from '../Toolbar'
9
+ import { ToolbarSection } from '../ToolbarSection'
10
+
11
+ type ToolbarControlsProps = {
12
+ editorId: string
13
+ controls?: ToolbarItems[]
14
+ editorState: ProseMirrorState.EditorState
15
+ schema: ProseMirrorModel.Schema<any, any>
16
+ dispatchTransaction: (commandOrTransaction: CommandOrTransaction) => void
17
+ }
18
+
19
+ export const ToolbarControls = ({
20
+ editorId,
21
+ controls,
22
+ editorState,
23
+ schema,
24
+ dispatchTransaction,
25
+ }: ToolbarControlsProps): JSX.Element | null => {
26
+ const controlMap = useControlMap(schema, editorState, controls)
27
+ const { formatMessage } = useIntl()
28
+ const handleControlClick = useCallback(
29
+ (action: ProseMirrorState.Command) => {
30
+ dispatchTransaction(action)
31
+ },
32
+ [dispatchTransaction],
33
+ )
34
+
35
+ if (controlMap.length <= 0) return null
36
+
37
+ return (
38
+ <Toolbar
39
+ aria-controls={editorId}
40
+ aria-label={formatMessage({
41
+ id: 'kz.rte.toolbar.aria_label',
42
+ defaultMessage: 'Text formatting',
43
+ description: 'Label for the text formatting toolbar in a Rich Text Editor',
44
+ })}
45
+ >
46
+ {controlMap.map((section, index) => (
47
+ <ToolbarSection key={index}>
48
+ {section.map((controlConfig, controlKeyIndex) => (
49
+ <ToggleIconButton
50
+ key={controlKeyIndex}
51
+ icon={controlConfig.icon}
52
+ disabled={controlConfig.disabled}
53
+ label={controlConfig.label}
54
+ isActive={controlConfig.isActive}
55
+ onClick={() => handleControlClick(controlConfig.action)}
56
+ />
57
+ ))}
58
+ </ToolbarSection>
59
+ ))}
60
+ </Toolbar>
61
+ )
62
+ }
@@ -0,0 +1 @@
1
+ export * from './ToolbarControls'
@@ -1,4 +1,5 @@
1
1
  import React from 'react'
2
+ import { useIntl } from '@cultureamp/i18n-react-intl'
2
3
  import { Icon } from '~components/Icon'
3
4
  import { type ToolbarControlTypes, type ToolbarItems } from '../../types'
4
5
  import { listIsActive, markIsActive } from '../../utils/commands'
@@ -173,12 +174,15 @@ const filterToolbarControls = (groupedControls: GroupedToolbarControls): Toolbar
173
174
  Object.values(groupedControls).filter((controls) => controls.length > 0)
174
175
 
175
176
  /** Builds an array of object used to map control configuration to rte toolbar buttons */
176
- export const buildControlMap = (
177
+ export const useControlMap = (
177
178
  schema: ProseMirrorModel.Schema,
178
179
  editorState: ProseMirrorState.EditorState,
179
180
  controls?: ToolbarItems[],
180
181
  ): ToolbarControl[][] => {
182
+ const { formatMessage } = useIntl()
183
+
181
184
  if (!controls) return []
185
+
182
186
  const controlGroupIndex: ControlGroupTypes = createControlGroupIndex(controls)
183
187
  const toolbarControls: GroupedToolbarControls = createInitialControls(controlGroupIndex)
184
188
  const listNodes = [schema.nodes.bulletList, schema.nodes.orderedList]
@@ -189,7 +193,11 @@ export const buildControlMap = (
189
193
  toolbarControls[groupIndex].push({
190
194
  isActive: markIsActive(editorState, type),
191
195
  action: createToggleMarkCommand(type),
192
- label: 'Bold',
196
+ label: formatMessage({
197
+ id: 'kz.rte.bold',
198
+ defaultMessage: 'Bold',
199
+ description: 'Label for the "Bold" button in a text editor',
200
+ }),
193
201
  icon: <Icon name="format_bold" isPresentational />,
194
202
  })
195
203
  }
@@ -200,7 +208,11 @@ export const buildControlMap = (
200
208
  toolbarControls[groupIndex].push({
201
209
  isActive: markIsActive(editorState, type),
202
210
  action: createToggleMarkCommand(type),
203
- label: 'Italic',
211
+ label: formatMessage({
212
+ id: 'kz.rte.italic',
213
+ defaultMessage: 'Italic',
214
+ description: 'Label for the "Italic" button in a text editor',
215
+ }),
204
216
  icon: <Icon name="format_italic" isPresentational />,
205
217
  })
206
218
  }
@@ -211,7 +223,11 @@ export const buildControlMap = (
211
223
  toolbarControls[groupIndex].push({
212
224
  isActive: markIsActive(editorState, type),
213
225
  action: createToggleMarkCommand(type),
214
- label: 'Underline',
226
+ label: formatMessage({
227
+ id: 'kz.rte.underline',
228
+ defaultMessage: 'Underline',
229
+ description: 'Label for the "Underline" button in a text editor',
230
+ }),
215
231
  icon: <Icon name="format_underlined" isPresentational />,
216
232
  })
217
233
  }
@@ -222,7 +238,11 @@ export const buildControlMap = (
222
238
  toolbarControls[groupIndex].push({
223
239
  action: createToggleListCommand(type),
224
240
  isActive: listIsActive(editorState, type, listNodes),
225
- label: 'Bullet List',
241
+ label: formatMessage({
242
+ id: 'kz.rte.bullet_list',
243
+ defaultMessage: 'Bullet list',
244
+ description: 'Label for the "Bullet list" button in a text editor',
245
+ }),
226
246
  icon: <Icon name="format_list_bulleted" isPresentational shouldMirrorInRTL />,
227
247
  })
228
248
  }
@@ -233,7 +253,11 @@ export const buildControlMap = (
233
253
  toolbarControls[groupIndex].push({
234
254
  action: createToggleListCommand(type),
235
255
  isActive: listIsActive(editorState, type, listNodes),
236
- label: 'Numbered List',
256
+ label: formatMessage({
257
+ id: 'kz.rte.numbered_list',
258
+ defaultMessage: 'Numbered list',
259
+ description: 'Label for the "Numbered list" button in a text editor',
260
+ }),
237
261
  icon: <Icon name="format_list_numbered" isPresentational shouldMirrorInRTL />,
238
262
  })
239
263
  }
@@ -246,14 +270,22 @@ export const buildControlMap = (
246
270
  action: createLiftListCommand(),
247
271
  disabled: liftListIsDisabled(editorState),
248
272
  isActive: false,
249
- label: 'Decrease indent',
273
+ label: formatMessage({
274
+ id: 'kz.rte.decrease_indent',
275
+ defaultMessage: 'Decrease indent',
276
+ description: 'Label for the "Decrease indent" button in a text editor',
277
+ }),
250
278
  icon: <Icon name="format_indent_decrease" isPresentational shouldMirrorInRTL />,
251
279
  },
252
280
  {
253
281
  action: createIndentListCommand(),
254
282
  disabled: indentListIsDisabled(editorState),
255
283
  isActive: false,
256
- label: 'Increase indent',
284
+ label: formatMessage({
285
+ id: 'kz.rte.increase_indent',
286
+ defaultMessage: 'Increase indent',
287
+ description: 'Label for the "Increase indent" button in a text editor',
288
+ }),
257
289
  icon: <Icon name="format_indent_increase" isPresentational shouldMirrorInRTL />,
258
290
  },
259
291
  )
@@ -266,7 +298,12 @@ export const buildControlMap = (
266
298
  action: createToggleMarkCommand(type),
267
299
  disabled: editorState.selection.empty,
268
300
  isActive: false,
269
- label: 'Link',
301
+ label: formatMessage({
302
+ id: 'kz.rte.link',
303
+ defaultMessage: 'Link',
304
+ description:
305
+ 'Label for the "Link" button in a text editor that allows the creation of hyperlinks in the text',
306
+ }),
270
307
  icon: <Icon name="add_link" isPresentational />,
271
308
  })
272
309
  }
@@ -81,7 +81,7 @@
81
81
  "content": [
82
82
  {
83
83
  "type": "paragraph",
84
- "content": [{ "type": "text", "text": "Bullet List Item Node" }]
84
+ "content": [{ "type": "text", "text": "Bullet list Item Node" }]
85
85
  }
86
86
  ]
87
87
  }