ContentEditor TopToolbar component

The top toolbar is an always visible toolbar
that contains controls to format text and insert
new blocks of content

app/assets/javascripts/content_editor/components/divider.vue

+<template>
+  <span class="gl-mx-3 gl-border-r-solid gl-border-r-1 gl-border-gray-200"></span>
+</template>

app/assets/javascripts/content_editor/components/top_toolbar.vue

+<script>
+import Divider from './divider.vue';
+import ToolbarButton from './toolbar_button.vue';
+
+export default {
+  components: {
+    ToolbarButton,
+    Divider,
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-display-flex gl-justify-content-end gl-pb-3 gl-pt-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
+  >
+    <toolbar-button
+      data-testid="bold"
+      content-type="bold"
+      icon-name="bold"
+      :label="__('Bold')"
+      :editor="editor"
+    />
+    <toolbar-button
+      data-testid="italic"
+      content-type="italic"
+      icon-name="italic"
+      :label="__('Italic')"
+      :editor="editor"
+    />
+    <toolbar-button
+      data-testid="code"
+      content-type="code"
+      icon-name="code"
+      :label="__('Code')"
+      :editor="editor"
+    />
+    <divider />
+    <toolbar-button
+      data-testid="blockquote"
+      content-type="blockquote"
+      icon-name="quote"
+      :label="__('Insert a quote')"
+      :editor="editor"
+    />
+    <toolbar-button
+      data-testid="bullet-list"
+      content-type="bullet_list"
+      icon-name="list-bulleted"
+      :label="__('Add a bullet list')"
+      :editor="editor"
+    />
+    <toolbar-button
+      data-testid="ordered-list"
+      content-type="ordered_list"
+      icon-name="list-numbered"
+      :label="__('Add a numbered list')"
+      :editor="editor"
+    />
+  </div>
+</template>

locale/gitlab.pot

@@ -5229,6 +5229,9 @@ msgstr ""
 msgid "Board|Load more issues"
 msgstr ""
 
+msgid "Bold"
+msgstr ""
+
 msgid "Bold text"
 msgstr ""
 
@@ -17899,6 +17902,9 @@ msgstr ""
 msgid "It's you"
 msgstr ""
 
+msgid "Italic"
+msgstr ""
+
 msgid "Italic text"
 msgstr ""
 

spec/frontend/content_editor/components/top_toolbar_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import ToolbarButton from '~/content_editor/components/toolbar_button.vue';
+import TopToolbar from '~/content_editor/components/top_toolbar.vue';
+
+describe('content_editor/components/top_toolbar', () => {
+  let wrapper;
+  let editor;
+
+  const buildEditor = () => {
+    editor = {};
+  };
+
+  const buildWrapper = () => {
+    wrapper = extendedWrapper(
+      shallowMount(TopToolbar, {
+        propsData: {
+          editor,
+        },
+      }),
+    );
+  };
+
+  beforeEach(() => {
+    buildEditor();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    testId            | button
+    ${'bold'}         | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold' }}
+    ${'italic'}       | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic' }}
+    ${'code'}         | ${{ contentType: 'code', iconName: 'code', label: 'Code' }}
+    ${'blockquote'}   | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote' }}
+    ${'bullet-list'}  | ${{ contentType: 'bullet_list', iconName: 'list-bulleted', label: 'Add a bullet list' }}
+    ${'ordered-list'} | ${{ contentType: 'ordered_list', iconName: 'list-numbered', label: 'Add a numbered list' }}
+  `('renders $testId button', ({ testId, buttonProps }) => {
+    buildWrapper();
+    expect(wrapper.findByTestId(testId).props()).toMatchObject({
+      ...buttonProps,
+      editor,
+    });
+  });
+});