Skip to content

Commit

Permalink
add UI Kit to the components
Browse files Browse the repository at this point in the history
  • Loading branch information
@juan-apa
juan-apa committed Mar 6, 2024
1 parent efce753 commit 8d35c2c
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 60 deletions.
9 changes: 4 additions & 5 deletions lib/warped/emails/components/button.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ module Emails
class Button < Base
variant do
base do
["font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif",
"font-weight: 400",
["font-weight: 400",
"color: #333",
"text-decoration: none",
"display: inline-block",
Expand All @@ -25,9 +24,9 @@ class Button < Base
end

size do
sm { ["font-size: 12px", "padding: 4px 8px"] }
md { ["font-size: 14px", "padding: 6px 12px"] }
lg { ["font-size: 16px", "padding: 8px 16px"] }
sm { ["font-size: 13px", "padding: 6px 16px", "line-height: 16px"] }
md { ["font-size: 16px", "padding: 8px 24px", "line-height: 20px"] }
lg { ["font-size: 19px", "padding: 16px 28px", "line-height: 24px"] }
end
end

Expand Down
36 changes: 21 additions & 15 deletions lib/warped/emails/components/heading.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,56 @@ module Warped
module Emails
class Heading < Base
variant do
base do
["font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif",
"font-weight: 400",
"color: #333"]
end
base { ["font-weight: 400"] }

level do
h1 { "font-size: 32px; line-height: 40px" }
h2 { "font-size: 24px; line-height: 32px" }
h3 { "font-size: 20px; line-height: 28px" }
h4 { "font-size: 16px; line-height: 24px" }
h5 { "font-size: 14px; line-height: 20px" }
h6 { "font-size: 12px; line-height: 16px" }
h1 { ["font-size: 45px", "line-height: 50px"] }
h2 { ["font-size: 40px", "line-height: 45px"] }
h3 { ["font-size: 35px", "line-height: 40px"] }
h4 { ["font-size: 30px", "line-height: 35px"] }
h5 { ["font-size: 25px", "line-height: 30px"] }
h6 { ["font-size: 20px", "line-height: 25px"] }
end

align do
left { "text-align: left" }
center { "text-align: center" }
right { "text-align: right" }
end

color do
regular { "color: #14181F" }
placeholder { "color: #8B939F" }
info { "color: #1C51A4" }
success { "color: #60830D" }
warning { "color: #82620F" }
error { "color: #AB2816" }
end
end

default_variant level: :h1, align: :center
default_variant level: :h1, align: :center, color: :regular

def initialize(text = nil, level: :h1, align: :center)
def initialize(text = nil, level: :h1, align: :center, color: :regular)
super()
@text = text
@level = level
@align = align
@color = color
end

def text
content.presence || @text
end

def template
style = style(level:, align:)
style = style(level:, align:, color:)

tag.send(level, text, style:)
end

private

attr_reader :level, :align
attr_reader :level, :align, :color
end
end
end
7 changes: 4 additions & 3 deletions lib/warped/emails/components/layouts/main.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ class Main < Base
variant do
base do
[
"max-width: 600px", "margin: 20px auto 0 auto", "padding: 20px 30px",
"background-color: #fff", "border-radius: 5px", "box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
"font-family: 'Open Sans', 'Roboto', 'Segoe UI', Arial, sans-serif",
"max-width: 600px", "margin: 20px auto 0 auto",
"padding: 20px 30px", "background-color: #fff",
"border-radius: 5px", "box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
]
end
end
Expand All @@ -22,7 +24,6 @@ def template(&)
content_tag(:div, style: "vertical-align: middle;") do
concat tag.header(header)
concat tag.main(main)
concat render Divider.new
concat tag.footer(footer)
end
end
Expand Down
28 changes: 19 additions & 9 deletions lib/warped/emails/components/link.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,51 @@ module Warped
module Emails
class Link < Base
variant do
base { ["text-decoration: underline"] }

size do
sm { "font-size: 12px" }
md { "font-size: 14px" }
lg { "font-size: 16px" }
xs { ["font-size: 11px", "line-height: 16px"] }
sm { ["font-size: 13px", "line-height: 16px"] }
md { ["font-size: 16px", "line-height: 24px"] }
lg { ["font-size: 19px", "line-height: 24px"] }
end

color do
regular { "color: #333" }
muted { "color: #666666" }
regular { "color: #414750" }
placeholder { "color: #8B939F" }
info { "color: #1C51A4" }
end

display do
block { "display: block" }
inline { "display: inline" }
end
end

default_variant size: :md, color: :regular
default_variant size: :md, color: :info, display: :inline

def initialize(text = nil, href, size: :md, color: :regular)
def initialize(text = nil, href, size: :md, color: :regular, display: :inline)
super()
@text = text
@href = href
@size = size
@color = color
@display = display
end

def text
content.presence || @text
end

def template
style = style(size:, color:)
style = style(size:, color:, display:)

tag.a(text, href:, style:)
end

private

attr_reader :href, :size, :color
attr_reader :href, :size, :color, :display
end
end
end
19 changes: 6 additions & 13 deletions lib/warped/emails/components/table.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,14 @@ class Table < Base
slots_one :header
slots_many :rows

def initialize(content)
super()
@content = content
end

def template
raise ArgumentError, "at least one row must be passed to the table" if rows_content.empty?
raise ArgumentError, "at least one row must be passed to the table" if rows.empty?

tag.table(style) do
concat tag.thead(header, style: header_style) if header.present?
if rows.any?
concat tag.tbody do
rows.each do |row|
concat tag.tr(row, style: row_style)
end
content_tag(:table, style:) do
concat content_tag(:thead, header, style: style(:header))
concat content_tag(:tbody) do
rows.each do |row|
concat content_tag(:tr, row, style: style(:row))
end
end
end
Expand Down
26 changes: 14 additions & 12 deletions lib/warped/emails/components/text.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,31 @@ module Warped
module Emails
class Text < Base
variant do
base { "font-family: Arial, sans-serif" }

size do
sm { "font-size: 12px" }
md { "font-size: 14px" }
lg { "font-size: 16px" }
xs { ["font-size: 11px", "line-height: 16px"] }
sm { ["font-size: 13px", "line-height: 16px"] }
md { ["font-size: 16px", "line-height: 24px"] }
lg { ["font-size: 19px", "line-height: 24px"] }
end

color do
regular { "color: #333" }
muted { "color: #666666" }
regular { "color: #414750" }
placeholder { "color: #8B939F" }
info { "color: #1C51A4" }
success { "color: #60830D" }
warning { "color: #82620F" }
error { "color: #AB2816" }
end

align do
left { "text-align: left" }
right { "text-align: right" }
left { "text-align: left" }
right { "text-align: right" }
center { "text-align: center" }
end

weight do
light { "font-weight: lighter" }
regular { "font-weight: normal" }
bold { "font-weight: bold" }
regular { "font-weight: 400" }
bold { "font-weight: 700" }
end
end

Expand Down
6 changes: 3 additions & 3 deletions lib/warped/emails/styleable.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ def style(variant_name = :_base_variant, **kwargs)
end

# @!visibility private
class VariantBuilder
class VariantBuilder < BasicObject
delegate :variants, to: :@component

def initialize(component, variant_name: :_base_variant, group_name: nil)
Expand All @@ -78,7 +78,7 @@ def compile_variants(&)
end

def method_missing(name, &)
return super unless block_given?
return super unless ::Kernel.block_given?

if !@group_name && name == :base
_defin_base_style(&)
Expand All @@ -94,7 +94,7 @@ def respond_to_missing?(...) = true
private

def _define_variant_group(name, &)
self.class.new(@component, variant_name: @variant_name, group_name: name).compile_variants(&)
VariantBuilder.new(@component, variant_name: @variant_name, group_name: name).compile_variants(&)
end

def _define_subvariant(name, &block)
Expand Down

0 comments on commit 8d35c2c

Please sign in to comment.