fix(Stories): Add various storybook stories to component pages

What does this MR do?

In the recent research we conducted (gitlab-org/ux-research#2413 (closed)), we found that design system consumers having to look in multiple places caused mistakes and frustrations. To reduce that, and move closer to a SSOT, we're exploring making design.gitlab.com fully featured enough to not need to go elsewhere (as have others before gitlab-org/gitlab-ui#888 (comment 1535852676)).

it feels like there needs to be some kind of layout adjustment to accommodate this larger number of examples so that the overall component pages are still usable/digestible.

Agree with this. My thinking is getting the stories in in their current form is an improvement. It moves us away from needing to reference storybook directly. But it also really highlights the opportunities for improving design.gitlab.com. I don't think there is capacity to do these sorts of layout adjustments in this milestone, and I do think this MR takes us in the right direction, so I'd like to proceed.

Label

• Retitle stories
• Add with close button

Modal

• Add scrolling content
• Add without actions

Pagination

• Retitle stories to make clear they are offset pagination variants
• Fix truncated story

Path

• Add titles
• Add popover example

Popover

• Add titles
• Add with close button

Toast

• Add action
• Add long content

Toggle

• Add left label position

Tooltip

• Add right
• Add bottom
• Add left

Does this MR meet the acceptance criteria?

• The MR title and commit messages meet the Pajamas commit conventions.
• The “What does this MR do?” section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per “Say why not just what”.
  • For example, if the MR is focused on usage guidelines, addressing accessibility challenges could be added in a separate MR.
• Relevant label(s) are applied to the MR.
• The MR is added to a milestone.
• If creating a new component page from scratch, it follows the page template structure.
• Content follows the Pajamas voice and tone guidelines, falling back on the GitLab Documentation Style Guide when needed.
• Related pages are cross-linked, where helpful. Component pages have related components and patterns defined in their Markdown front matter.
• If embedding a Figma file, it follows the Figma embed guide.
• Review requested from any GitLab designer or directly from a maintainer or trainee maintainer.

Links