Update documentation on mr widgets

What does this MR do and why?

Updates the Merge Request Widget documentation.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Here's an example of a widget that uses all fields available:

<script>
import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
import { __ } from '~/locale';

export default {
  name: 'WidgetHelloWorld',
  components: {
    MrWidget,
  },
  computed: {
    summary() {
      return { title: __('Hello World'), subtitle: __('I am a subtext') };
    },
    content() {
      return [
        {
          text: __('Content text 1'),
          subtext: __('Content subtext 1'),
          supportingText: __('Content supporting text 1'),
          tooltipText: __('I am a tooltip'),
          link: {
            href: 'https://www.gitlab.com',
            text: __('I am a link'),
          },
          badge: {
            variant: 'success',
            text: __('I am a badge'),
          },
          header: __('I am a header'),
          helpPopover: {
            options: { title: __('Popover title') },
            content: {
              text: __('I am a help popover'),
              //   learnMorePath: '/user/application_security/index',
            },
          },
          actions: [
            {
              id: 'my_id',
              href: '/',
              dataMethod: 'GET',
              dataClipboardText: __('clipboard text'),
              icon: 'trash',
              variant: 'success',
              loading: false,
              testId: 'my_test_id',
              text: __('I am an action'),
              class: 'my_class',
              trackFullReportClicked: true,
            },
          ],
          children: [],
        },
        {
          text: __('Content text 2'),
          subtext: __('Content subtext 2'),
          supportingText: __('Content supporting text 2'),
        },
      ];
    },
  },
};
</script>
<template>
  <mr-widget
    :summary="summary"
    :content="content"
    :is-collapsible="true"
    :widget-name="$options.name"
  />
</template>

And here's how it gets loaded:

Screenshot from the documentation page:

Screenshot

How to set up and validate locally

1. Visit /help/development/fe_guide/merge_request_widget_extensions.md
2. Check the documentation

Related to #438943 (closed)