feat(GlExperimentBadge): Add story for beta

- Remove helpPageUrl prop and add URL for each type
- Remove WithHelpPageUrl story
- Fix trailing space in link

src/components/experimental/experiment_badge/experiment_badge.md

-The component is representing a badge, marking the experimental features.
-It is supposed to be used with the AI experiments, and comes with a popover explaining
-what experiment means.
+The component represents a badge to mark experiment and beta features.
+It comes with a popover that explains what experiment or beta means, and links
+to [Support for features in different stages of development](https://docs.gitlab.com/ee/policy/development_stages_support.html)
+for more information.
 
 ## Usage
 
 ```html
-<gl-experiment-badge help-page-url="https://gitlab.com" popover-placement="bottom" />
+<gl-experiment-badge popover-placement="bottom" type="beta" />
 ```

src/components/experimental/experiment_badge/experiment_badge.spec.js

 import { shallowMount } from '@vue/test-utils';
 import GlBadge from '../../base/badge/badge.vue';
 import GlPopover from '../../base/popover/popover.vue';
-import GlLink from '../../base/link/link.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
 import GlExperimentBadge, { i18n } from './experiment_badge.vue';
 
@@ -12,7 +11,6 @@ describe('GlExperimentBadge', () => {
 
   const findBadge = () => wrapper.findComponent(GlBadge);
   const findPopover = () => wrapper.findComponent(GlPopover);
-  const findHelpLink = () => wrapper.findComponent(GlLink);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(GlExperimentBadge, {
@@ -40,12 +38,6 @@ describe('GlExperimentBadge', () => {
     expect(findPopover().props('placement')).toBe(popoverPlacement);
   });
 
-  it('sets the link to the help page if passed', () => {
-    const helpPageUrl = 'https://gitlab.com';
-    createComponent({ helpPageUrl });
-    expect(findHelpLink().attributes('href')).toBe(helpPageUrl);
-  });
-
   it('generates the unique ID to connect the button and the popover', () => {
     expect(findBadge().attributes('id')).toBe('fakeUniqueId');
     expect(findPopover().attributes('target')).toBe('fakeUniqueId');

src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -4,11 +4,9 @@ import readme from './experiment_badge.md';
 const defaultValue = (prop) => GlExperimentBadge.props[prop].default;
 
 const generateProps = ({
-  helpPageUrl = defaultValue('helpPageUrl'),
   popoverPlacement = defaultValue('popoverPlacement'),
   type = defaultValue('type'),
 } = {}) => ({
-  helpPageUrl,
   popoverPlacement,
   type,
 });
@@ -19,7 +17,6 @@ const Template = (args, { argTypes }) => ({
   template: `
     <div class="gl-flex gl-justify-center gl-items-center gl-h-62">
       <gl-experiment-badge
-        :help-page-url='helpPageUrl'
         :popover-placement='popoverPlacement'
         :type='type' />
     </div>
@@ -29,10 +26,10 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
-export const WithHelpPageUrl = Template.bind({});
-WithHelpPageUrl.args = {
+export const Beta = Template.bind({});
+Beta.args = {
   ...generateProps({
-    helpPageUrl: 'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
+    type: 'beta',
   }),
 };
 

src/components/experimental/experiment_badge/experiment_badge.vue

@@ -4,11 +4,12 @@ import GlBadge from '../../base/badge/badge.vue';
 import GlLink from '../../base/link/link.vue';
 import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
-import { badgeTypes, badgeTypeValidator } from './constants';
+import { badgeTypeValidator } from './constants';
 
 export const i18n = {
   experiment: {
     BADGE: 'Experiment',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#experiment',
     POPOVER_TITLE: "What's an experiment?",
     POPOVER_CONTENT:
       'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
@@ -16,11 +17,11 @@ export const i18n = {
       'Might be unstable or cause data loss.',
       'Are not supported and might not be documented.',
       'Could be changed or removed at any time.',
-      'Are subject to the GitLab Testing Agreement.',
     ],
   },
   beta: {
     BADGE: 'Beta',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#beta',
     POPOVER_TITLE: "What's a beta?",
     POPOVER_CONTENT:
       "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
@@ -28,7 +29,6 @@ export const i18n = {
       'Have a low risk of data loss, but might still be unstable.',
       'Are supported on a commercially-reasonable effort basis.',
       'Have a near complete user experience.',
-      'Are subject to the GitLab Testing Agreement.',
     ],
   },
 };
@@ -42,14 +42,6 @@ export default {
     GlLink,
   },
   props: {
-    /**
-     * The URL of a page to provide more explanations on the experiment.
-     */
-    helpPageUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
     /**
      * The placement of the popover in relation to the button.
      */
@@ -59,12 +51,12 @@ export default {
       default: 'bottom',
     },
     /**
-     * The type of the badge.
+     * The type of the badge. Can be 'experiment' or 'beta'.
      */
     type: {
       type: String,
       required: false,
-      default: badgeTypes[0],
+      default: 'experiment',
       validator: badgeTypeValidator,
     },
   },
@@ -98,10 +90,9 @@ export default {
     >
       <gl-sprintf :message="activeType.POPOVER_CONTENT">
         <template #link="{ content }">
-          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="!gl-text-sm">
-            {{ content }}
-          </gl-link>
-          <span v-else>{{ content }}</span>
+          <gl-link :href="activeType.HELP_PAGE_URL" target="_blank" class="!gl-text-sm">
+            {{ content }}</gl-link
+          >
         </template>
         <template #bullets>
           <ul class="gl-mb-0 gl-pl-5">