Alert Component with close button

Produces an alert component, with a title and optional additional content and a close button (X). Add the close button as a block using with_close_button as shown in example below. The close button has no functionality and needs handling by the user. You can pass in any attributes you want to the close such as an id or data attributes. The only attribute that is set by default and cannot be overridden is the class - this is overriden here to ensure it is always styled correctly.

Options

• see default for all options

  example with close button:

  DesignSystem::AlertComponent.new(title: 'Alert with close button') do |c|
  c.with_close_button(data: { action: 'close' })
  end

  produces:

  <div class="rpf-alert rpf-alert--">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
  <h3 class="rpf-alert__title">Alert with close button</h3>
  <div class="rpf-alert__close">
    <button data-action="close" class="rpf-button rpf-button--sm rpf-button--tertiary rpf-button--icon-only">
      <span class="rpf-button__icon material-symbols-sharp">close</span>
    </button>
  </div>
  </div>
  <div class="rpf-alert__body"></div>
  </div>

• The overall Alert tag itself also accepts all the usual HTML attributes for a div tag, e.g. id, class, data- etc.