add mailer components

[juan-apa]

• Adds components to build emails FAST

UI Kit:

UI Kit code:

<%= render Warped::Emails::Heading.new("Headings", level: :h3, align: :left) %>

<%= render Warped::Emails::Heading.new("Heading 1", level: :h1) %>
<%= render Warped::Emails::Heading.new("Heading 2", level: :h2) %>
<%= render Warped::Emails::Heading.new("Heading 3", level: :h3) %>
<%= render Warped::Emails::Heading.new("Heading 4", level: :h4) %>
<%= render Warped::Emails::Heading.new("Heading 5", level: :h5) %>
<%= render Warped::Emails::Heading.new("Heading 6", level: :h6) %>


<%= render Warped::Emails::Divider.new %>
<%= render Warped::Emails::Heading.new("Text Sizes", level: :h3, align: :left) %>

<%= render Warped::Emails::Text.new('Text lg', size: :lg) %>
<%= render Warped::Emails::Text.new('Text md', size: :md) %>
<%= render Warped::Emails::Text.new('Text sm', size: :sm) %>
<%= render Warped::Emails::Text.new('Text xs', size: :xs) %>


<%= render Warped::Emails::Divider.new %>
<%= render Warped::Emails::Heading.new("Text Colors", level: :h3, align: :left) %>

<%= render Warped::Emails::Text.new('The brown fox jumps over the lazy dog', color: :placeholder) %>
<%= render Warped::Emails::Text.new('The brown fox jumps over the lazy dog', color: :info) %>
<%= render Warped::Emails::Text.new('The brown fox jumps over the lazy dog', color: :success) %>
<%= render Warped::Emails::Text.new('The brown fox jumps over the lazy dog', color: :warning) %>
<%= render Warped::Emails::Text.new('The brown fox jumps over the lazy dog', color: :error) %>

<%= render Warped::Emails::Divider.new %>
<%= render Warped::Emails::Heading.new("Text Weights", level: :h3, align: :left) %>

<%= render Warped::Emails::Text.new('Regular: The brown fox jumps over the lazy dog', weight: :regular) %>
<%= render Warped::Emails::Text.new('Bold: The brown fox jumps over the lazy dog', weight: :bold) %>

<%= render Warped::Emails::Divider.new %>
<%= render Warped::Emails::Heading.new("Buttons", level: :h3, align: :left) %>

<%= render Warped::Emails::Button.new('Primary lg', 'https://example.com', size: :lg, type: :primary) %>
<%= render Warped::Emails::Button.new('Primary md', 'https://example.com', size: :md, type: :primary) %>
<%= render Warped::Emails::Button.new('Primary sm', 'https://example.com', size: :sm, type: :primary) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Button.new('Success lg', 'https://example.com', size: :lg, type: :success) %>
<%= render Warped::Emails::Button.new('Success md', 'https://example.com', size: :md, type: :success) %>
<%= render Warped::Emails::Button.new('Success sm', 'https://example.com', size: :sm, type: :success) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Button.new('Warning lg', 'https://example.com', size: :lg, type: :warning) %>
<%= render Warped::Emails::Button.new('Warning md', 'https://example.com', size: :md, type: :warning) %>
<%= render Warped::Emails::Button.new('Warning sm', 'https://example.com', size: :sm, type: :warning) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Button.new('Danger lg', 'https://example.com', size: :lg, type: :danger) %>
<%= render Warped::Emails::Button.new('Danger md', 'https://example.com', size: :md, type: :danger) %>
<%= render Warped::Emails::Button.new('Danger sm', 'https://example.com', size: :sm, type: :danger) %>


<%= render Warped::Emails::Divider.new %>
<%= render Warped::Emails::Heading.new("Links", level: :h3, align: :left) %>

<%= render Warped::Emails::Link.new('lg regular link', 'https://example.com', size: :lg, color: :regular, display: :block) %>
<%= render Warped::Emails::Link.new('lg placeholder link', 'https://example.com', size: :lg, color: :placeholder, display: :block) %>
<%= render Warped::Emails::Link.new('lg info link', 'https://example.com', size: :lg, color: :info, display: :block) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Link.new('md regular link', 'https://example.com', size: :md, color: :regular, display: :block) %>
<%= render Warped::Emails::Link.new('md placeholder link', 'https://example.com', size: :md, color: :placeholder, display: :block) %>
<%= render Warped::Emails::Link.new('md info link', 'https://example.com', size: :md, color: :info, display: :block) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Link.new('sm regular link', 'https://example.com', size: :sm, color: :regular, display: :block) %>
<%= render Warped::Emails::Link.new('sm placeholder link', 'https://example.com', size: :sm, color: :placeholder, display: :block) %>
<%= render Warped::Emails::Link.new('sm info link', 'https://example.com', size: :sm, color: :info, display: :block) %>

<%= render Warped::Emails::Spacer.new %>

<%= render Warped::Emails::Link.new('xs regular link', 'https://example.com', size: :xs, color: :regular, display: :block) %>
<%= render Warped::Emails::Link.new('xs placeholder link', 'https://example.com', size: :xs, color: :placeholder, display: :block) %>
<%= render Warped::Emails::Link.new('xs info link', 'https://example.com', size: :xs, color: :info, display: :block) %>