@gitlab/ui/dist/components/base/alert/alert.documentation.js

GitLab UI Components

import examples from './examples';

var alert = "# Alert\n\n<!-- STORY -->\nAlerts allow the application to pass along relevant system information to the\nuser without impeding their journey. Alerts are system generated and may or may\nnot be derived by a user’s action.\n\n## Dismissible alerts\n\nAlerts don't handle their own visibility, so it's the parent component's\nresponsbility to listen for the `dismiss` event and hide the alert in some way.\nFor example:\n\n```html\n<script>\n  ...\n  computed: {\n    shouldShowAlert() {\n      return !this.isAlertDismissed && this.someOtherCondition();\n    },\n  },\n  ...\n</script>\n\n<template>\n  ...\n  <gl-alert v-if=\"shouldShowAlert\" @dismiss=\"isAlertDismissed = true\">\n    An important message\n  </gl-alert>\n  ...\n</template>\n```\n";

var description = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': alert
});

var alert_documentation = {
  description: description,
  examples: examples,
  followsDesignSystem: true,
  propsInfo: {
    primaryButtonText: {
      additionalInfo: 'If provided, renders a primary action button.'
    },
    primaryButtonLink: {
      additionalInfo: 'If provided, renders the primary button as a link.'
    },
    secondaryButtonText: {
      additionalInfo: 'If provided, renders a secondary action button.'
    },
    secondaryButtonLink: {
      additionalInfo: 'If provided, renders the secondary button as a link.'
    }
  },
  events: [{
    event: 'dismiss',
    description: 'Emitted when the dismiss button is clicked.'
  }, {
    event: 'primaryAction',
    description: 'Emitted when the primary action button is clicked.'
  }, {
    event: 'secondaryAction',
    description: 'Emitted when the secondary action button is clicked.'
  }],
  slots: [{
    name: 'default',
    description: 'The alert message to display.'
  }, {
    name: 'actions',
    description: "If the primary/secondary action buttons aren't flexible enough, place arbitrary content here."
  }]
};

export default alert_documentation;