@kaizen/components 2.0.4 → 2.0.6

package/locales/sv.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "Rensa sökning"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Fetstil"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Punktlista"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Minska indrag"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Öka indrag"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "Kursiv"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Länk"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "Numrerad lista"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Textformatering"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Understrykning"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "kontakta supporten"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ytterligare åtgärder"
   }
-}
+}

package/locales/th.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "ล้างการค้นหา"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "ตัวหนา"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "รายการหัวข้อย่อย"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "ลดการเยื้อง"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "เพิ่มการเยื้อง"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "ตัวเอียง"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "ลิงก์"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "รายการที่มีหมายเลข"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "การจัดรูปแบบข้อความ"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "ขีดเส้นใต้"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "ติดต่อฝ่ายสนับสนุน"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "การดำเนินการเพิ่มเติม"
   }
-}
+}

package/locales/tl.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "I-clear ang paghahanap"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Bold"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Naka-bullet na listahan"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Bawasan ang indent"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Dagdagan ang indent"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "Italic"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Link"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "De-numerong listahan"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Pag-format ng text"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Underline"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "makipag-ugnayan sa suporta"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Karagdagang mga aksiyon"
   }
-}
+}

package/locales/tr.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "Aramayı temizle"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Kalın"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Madde listesi"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Girintiyi azaltın"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Girintiyi artırın"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "İtalik"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Bağlantı"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "Numaralı liste"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Metin biçimlendirme"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Altını çizin"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "sorun devam ederse"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ek eylemler"
   }
-}
+}

package/locales/uk.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "Очистити пошук"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Жирний"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Маркований список"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Зменшити відступ"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Збільшити відступ"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "Курсив"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Посилання"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "Нумерований список"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Форматування тексту"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Підкреслити"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "зверніться до служби підтримки,"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Додаткові дії"
   }
-}
+}

package/locales/vi.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "Tìm kiếm rõ ràng"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Đậm"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Danh sách có dấu đầu dòng"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Giảm thụt lề"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Tăng thụt lề"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "Nghiêng"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Liên kết"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "Danh sách được đánh số"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Định dạng văn bản"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Gạch chân"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "liên hệ với bộ phận hỗ trợ"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Các hành động bổ sung"
   }
-}
+}

package/locales/zh-TW.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "清除搜尋"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "粗體"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "項目符號清單"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "減少縮排"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "增加縮排"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "斜體"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "連結"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "編號清單"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "文字格式化"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "底線"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "聯絡支援中心"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "其他行動"
   }
-}
+}

package/locales/zh.json

@@ -85,6 +85,42 @@
     "description" : "Label for the clear search button",
     "message" : "清除搜索"
   },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "粗体"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "项目符号列表"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "减少缩进"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "增加缩进"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "斜体"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "链接"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "编号列表"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "文本格式"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "下划线"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "联系支持人员"
@@ -196,4 +232,4 @@
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "附加操作"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -51,6 +51,10 @@
     display: inline-block;
   }
 
+  .toolbarWrapper {
+    border-bottom: inherit;
+  }
+
   /* stylelint-disable no-descending-specificity */
   .editorWrapper {
     position: relative;
@@ -62,37 +66,21 @@
     &:hover,
     &:focus-within {
       border-color: $color-gray-600;
-
-      .toolbar {
-        border-color: $color-gray-600;
-      }
     }
 
     &.error {
-      &,
-      .toolbar {
-        border-color: $color-red-500;
-      }
+      border-color: $color-red-500;
 
       &:hover {
-        &,
-        .toolbar {
-          border-color: $color-red-600;
-        }
+        border-color: $color-red-600;
       }
     }
 
     &.caution {
-      &,
-      .toolbar {
-        border-color: $color-yellow-600;
-      }
+      border-color: $color-yellow-600;
 
       &:hover {
-        &,
-        .toolbar {
-          border-color: $color-yellow-700;
-        }
+        border-color: $color-yellow-700;
       }
     }
     /* stylelint-enable no-descending-specificity */

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.tsx

@@ -87,8 +87,8 @@ describe('RTE receives list controls', () => {
   it('renders list buttons when receiving a list controls', () => {
     render(<TestRTE />)
 
-    const bulletButton = screen.getByRole('button', { name: 'Bullet List' })
-    const orderedButton = screen.getByRole('button', { name: 'Numbered List' })
+    const bulletButton = screen.getByRole('button', { name: 'Bullet list' })
+    const orderedButton = screen.getByRole('button', { name: 'Numbered list' })
 
     expect(bulletButton && orderedButton).toBeTruthy()
   })
@@ -117,7 +117,7 @@ describe('RTE receives list controls', () => {
       })
 
       await waitFor(() => {
-        fireEvent.click(screen.getByRole('button', { name: 'Bullet List' }))
+        fireEvent.click(screen.getByRole('button', { name: 'Bullet list' }))
         screen.getByRole('list')
 
         expect(document.querySelectorAll('ul').length).toBeGreaterThan(0)
@@ -132,7 +132,7 @@ describe('RTE receives list controls', () => {
       })
 
       await waitFor(() => {
-        fireEvent.click(screen.getByRole('button', { name: 'Numbered List' }))
+        fireEvent.click(screen.getByRole('button', { name: 'Numbered list' }))
 
         expect(document.querySelectorAll('ol').length).toBeGreaterThan(0)
       })

package/src/RichTextEditor/RichTextEditor/RichTextEditor.tsx

@@ -3,8 +3,8 @@ import classnames from 'classnames'
 import { FieldMessage } from '~components/FieldMessage'
 import { Label } from '~components/Label'
 import { InlineNotification } from '~components/Notification'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import { type EditorContentArray, type EditorRows, type ToolbarItems } from '../types'
+import type { OverrideClassName } from '~components/types/OverrideClassName'
+import type { EditorContentArray, EditorRows, ToolbarItems } from '../types'
 import { useRichTextEditor } from '../utils/core'
 import { createLinkManager } from '../utils/plugins'
 import {
@@ -15,10 +15,7 @@ import {
   ProseMirrorState,
 } from '../utils/prosemirror'
 import { createSchemaFromControls } from './schema'
-import { ToggleIconButton } from './subcomponents/ToggleIconButton'
-import { Toolbar } from './subcomponents/Toolbar'
-import { ToolbarSection } from './subcomponents/ToolbarSection'
-import { buildControlMap } from './utils/controlmap'
+import { ToolbarControls } from './subcomponents/ToolbarControls'
 import { buildInputRules } from './utils/inputrules'
 import { buildKeymap } from './utils/keymap'
 import styles from './RichTextEditor.module.scss'
@@ -132,8 +129,6 @@ export const RichTextEditor = ({
 
   const [editorRef, editorState, dispatchTransaction] = useRichTextEditorResult
 
-  const controlMap = buildControlMap(schema, editorState, controls)
-
   // @todo: Fix if possible - avoiding breaking in eslint upgrade
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
@@ -148,28 +143,15 @@ export const RichTextEditor = ({
         <Label classNameOverride={styles.editorLabel} id={labelId} labelText={labelText} />
       )}
       <div className={classnames(styles.editorWrapper, styles[status])}>
-        {controls && (
-          <Toolbar
-            aria-controls={editorId}
-            aria-label="Text formatting"
-            classNameOverride={styles.toolbar}
-          >
-            {controlMap.map((section, index) => (
-              <ToolbarSection key={index}>
-                {section.map((controlConfig, controlKeyIndex) => (
-                  <ToggleIconButton
-                    key={controlKeyIndex}
-                    icon={controlConfig.icon}
-                    disabled={controlConfig.disabled}
-                    label={controlConfig.label}
-                    isActive={controlConfig.isActive}
-                    onClick={(): void => dispatchTransaction(controlConfig.action)}
-                  />
-                ))}
-              </ToolbarSection>
-            ))}
-          </Toolbar>
-        )}
+        <div className={styles.toolbarWrapper}>
+          <ToolbarControls
+            editorId={editorId}
+            controls={controls}
+            editorState={editorState}
+            schema={schema}
+            dispatchTransaction={dispatchTransaction}
+          />
+        </div>
         <div
           id={editorId}
           ref={editorRef}

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.module.scss

@@ -3,6 +3,5 @@
 @layer kz-components {
   .toolbar {
     display: block;
-    border-bottom: 2px solid $color-gray-500;
   }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/ToolbarControls.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
+import type { ToolbarItems } from '../../../types'
+import type { CommandOrTransaction } from '../../../utils/core'
+import type { ProseMirrorModel, ProseMirrorState } from '../../../utils/prosemirror'
+import { useControlMap } from '../../utils/controlmap'
+import { ToggleIconButton } from '../ToggleIconButton'
+import { Toolbar } from '../Toolbar'
+import { ToolbarSection } from '../ToolbarSection'
+
+type ToolbarControlsProps = {
+  editorId: string
+  controls?: ToolbarItems[]
+  editorState: ProseMirrorState.EditorState
+  schema: ProseMirrorModel.Schema<any, any>
+  dispatchTransaction: (commandOrTransaction: CommandOrTransaction) => void
+}
+
+export const ToolbarControls = ({
+  editorId,
+  controls,
+  editorState,
+  schema,
+  dispatchTransaction,
+}: ToolbarControlsProps): JSX.Element | null => {
+  const controlMap = useControlMap(schema, editorState, controls)
+  const { formatMessage } = useIntl()
+  const handleControlClick = useCallback(
+    (action: ProseMirrorState.Command) => {
+      dispatchTransaction(action)
+    },
+    [dispatchTransaction],
+  )
+
+  if (controlMap.length <= 0) return null
+
+  return (
+    <Toolbar
+      aria-controls={editorId}
+      aria-label={formatMessage({
+        id: 'kz.rte.toolbar.aria_label',
+        defaultMessage: 'Text formatting',
+        description: 'Label for the text formatting toolbar in a Rich Text Editor',
+      })}
+    >
+      {controlMap.map((section, index) => (
+        <ToolbarSection key={index}>
+          {section.map((controlConfig, controlKeyIndex) => (
+            <ToggleIconButton
+              key={controlKeyIndex}
+              icon={controlConfig.icon}
+              disabled={controlConfig.disabled}
+              label={controlConfig.label}
+              isActive={controlConfig.isActive}
+              onClick={() => handleControlClick(controlConfig.action)}
+            />
+          ))}
+        </ToolbarSection>
+      ))}
+    </Toolbar>
+  )
+}

package/src/RichTextEditor/RichTextEditor/subcomponents/ToolbarControls/index.ts

@@ -0,0 +1 @@
+export * from './ToolbarControls'