Alert Component

DesignSystem::AlertComponent.new(title: 'Abc', text: 'Def', **attrs)

Produces an alert component, with a title and optional additional content. It can include a close button (X) (passed in as a block), and can render action buttons (passed in as a block). These are based on the DesignSystem::Button, but will always be rendered with the tertiary style. The close button has no functionality and needs handling by the user.

Options

• title: The title/summary of the alert. (required)
• text: The content of the alert. This is wrapped in markdown, which allows some flexibility with the content, but it is not 100% optimal yet (we need to handle more complex markdown in Core). If you want to add bullet points etc, it will work but you may need to fix minor styling issues for now in your calling app (optional)
• type: The type of alert (options: 'error', 'warning', 'information', 'success'). Defaults to 'error'. (optional)

• modifiers: Additional classes to add to the alert. Simly add the extra class(es), and it/they will be appended to the base (optional)

  basic example:

  DesignSystem::AlertComponent.new(title: 'Alert title', text: 'Some important text')

  produces:

  <div class="rpf-alert rpf-alert--aye rpf-alert--error">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
  <h3 class="rpf-alert__title">Alert title</h3>
  </div>
  <div class="rpf-alert__body">
  <div class="rpf-alert__text">
    <div class="rpf-markdown">
      <p>Some important text with an <a href="https://www.example.com">important link</a>.</p>
    </div>
  </div>
  </div>
  </div>

  example with actions:

  DesignSystem::AlertComponent.new(title: 'Action alert', type: 'information') do |c|
  c.with_action(text: 'Special action', href: '#', type: :link)
  end

  produces:

  <div class="rpf-alert rpf-alert--aye rpf-alert--information">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
  <h3 class="rpf-alert__title">Action alert</h3>
  </div>
  <div class="rpf-alert__body">
  <div class="rpf-alert__actions">
    <a class="rpf-button rpf-button--sm rpf-button--tertiary" href="#">Special action</a>
  </div>
  </div>
  </div>

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