feat(callout): move to stable

[tay1orjones]

WIP 🚧

Closes #15748

Move to stable checklist

Requirements to move to stable

• The experimental code has stabilized
  • A consuming project has given feedback on the visual design, UX, and dev
    API/implementation
  • The experimental code has been available for a reasonable amount of time
    (~3 months) in aim to catch potential defects with spec, implementation,
    accessibility, etc.

---

• Component is documented on the website
  • Component has a usage, style, and code tab
  • Component has a component demo

---

• React implementation is complete
  • All components exported in src/index.js and should not be unstable_
    prefixed
  • Component is written as a function declaration and uses forwardRef
  • Component has propTypes
    • Each prop type has a comment (used in storybook)
    • Prop types are as specific as needed, prefer PropTypes.shape over
      PropTypes.object if possible
  • Component has a TypeScript interface that mirrors propTypes
  • API comments (in propTypes and TS interface) are the exact same
  • Default props are listed as default args in the function definition (not
    in defaultProps)
    • Note: default props should be stable, in other words props like
      onClick = () => {} can cause re-renders since the function identity
      is not stable
  • Component has a story in <ComponentName>.stories.js
    • Stories show the intended usage of the component and are examples of
      the most common use-cases
    • All stories utilize controls
      • Controls with no meaningful change to the component visuals should
        be hidden from the controls panel, eg. className
      • Props of type node with no proper controls available for
        configuration should be hidden from the controls panel, eg.
        children
    • Component has an .mdx document that
      • Follows the established outline
      • Documents and explains the most common use-cases
      • Provides a prop table
  • All required tests are present
    • Unit/integration tests written with @testing-library/react that
      cover the entire component API
      • Popover's test file is a good example that can be used as a guide
    • Visual regression tests (VRT) are present in
      e2e/components/ComponentName/ComponentName-test.e2e.js that:
      • Snapshot every storybook story
      • Snapshot important discrete states (open, selected, enabled,
        autoAlign etc.) by setting controls/args on a story
    • Accessibility Verifiction Tests (AVT) are present in
      e2e/components/ComponentName/ComponentName-test.avt.e2e.js that:
      • Ensure every story .toBeAccessible()
      • Ensure important discrete states (open, selected, etc.) are covered
        by arranging/interacting with component before calling
        .toBeAccessible()
• Component is connected with Figma Code Connect and has a
  <ComponentName>.figma.tsx file in the code-connect folder.

---

• Component styles are available through @carbon/styles
  • Component styles are housed in a ComponentName/_componentName.scss
    file
  • Component styles are defined within a @mixin
  • Component has an entrypoint file ComponentName/_index.scss that has at
    minimum:
    • @forward 'componentName';
    • @use 'componentName';
    • @include componentName.componentName;

---

• Misc details are complete
  • All files have a copyright banner
  • Component has a label in the GitHub repository

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	da57bf9
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67b38ab45e034a0008555d63
😎 Deploy Preview	https://deploy-preview-18586--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	da57bf9
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67b38ab4e11950000882ee58
😎 Deploy Preview	https://deploy-preview-18586--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	da57bf9
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67b38ab405358200080dee5c
😎 Deploy Preview	https://deploy-preview-18586--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.