Email

package email

props {
  // Preview is the text that an inbox shows after the subject. It is not visible in the email.
  Preview  string = ""
  // Width is the largest width of the content in pixels.
  Width    int = 600
  // Children is the sections of the email.
  Children gx.Node
}

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:var(--background)">
  <tbody>
    <tr>
      <td align="center" style="padding:24px 12px">
        if p.Preview != "" {
          <div style="display:none;max-height:0;overflow:hidden;opacity:0">{p.Preview}</div>
        }
        <table role="presentation" width={p.width()} cellpadding="0" cellspacing="0" border="0" style={p.style()}>
          <tbody>
            <tr>
              <td align="left">{p.Children}</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

package email

props {
  // Card gives the section a border, a background and padding.
  Card     bool = false
  // Children is the content of the section.
  Children gx.Node
}

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tbody>
    <tr>
      <td style={p.style()}>{p.Children}</td>
    </tr>
  </tbody>
</table>

package email

props {
  // Children is the columns of the row.
  Children gx.Node
}

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tbody>
    <tr>{p.Children}</tr>
  </tbody>
</table>

package email

props {
  // Width is the width of the column in pixels. Zero shares the width of the row.
  Width    int = 0
  // Align is the horizontal position of the content: Left, Center or Right.
  Align    Align = Left
  // Children is the content of the column.
  Children gx.Node
}

<td align={p.Align.attr()} style={p.style()}>{p.Children}</td>

package email

props {
  // Muted gives the text a smaller size and a weaker colour, for a note.
  Muted    bool = false
  // Align is the horizontal position of the text: Left, Center or Right.
  Align    Align = Left
  // Children is the text.
  Children gx.Node
}

<p style={p.style()}>{p.Children}</p>

package email

props {
  // Level is the level of the heading: 1, 2 or 3.
  Level    int = 1
  // Align is the horizontal position of the heading: Left, Center or Right.
  Align    Align = Left
  // Children is the text of the heading.
  Children gx.Node
}

switch p.level() {
case 2:
  <h2 style={p.style()}>{p.Children}</h2>
case 3:
  <h3 style={p.style()}>{p.Children}</h3>
default:
  <h1 style={p.style()}>{p.Children}</h1>
}

package email

props {
  // Href is the address that the button opens. gx.RenderEmail makes a site path an absolute URL.
  Href     gx.URL
  // Align is the horizontal position of the button: Left, Center or Right.
  Align    Align = Left
  // Children is the label of the button.
  Children gx.Node
}

<table role="presentation" align={p.Align.attr()} cellpadding="0" cellspacing="0" border="0" style="margin:0 0 16px">
  <tbody>
    <tr>
      <td align="center" style="background-color:var(--primary);border-radius:var(--radius)">
        <a href={p.Href} style="display:inline-block;padding:12px 20px;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:700;color:var(--primary-foreground);text-decoration:none">{p.Children}</a>
      </td>
    </tr>
  </tbody>
</table>

package email

props {
  // Src is the address of the image. gx.RenderEmail makes a site path an absolute URL.
  Src    gx.URL
  // Alt is the text of the image. An email client shows it when it blocks images.
  Alt    string
  // Width is the width of the image in pixels.
  Width  int
  // Height is the height of the image in pixels.
  Height int
}

<img src={p.Src} alt={p.Alt} width={size(p.Width)} height={size(p.Height)} style={p.style()} />

package email

<hr style="border:0;border-top:1px solid var(--border);margin:24px 0" />

package email

import "github.com/alternayte/gx"

// DocumentFixtures are the examples of Document in the dev gallery.
var DocumentFixtures = gx.Fixtures[DocumentProps]{
	"Default": {Children: Text(TextProps{Children: gx.Text("The content of the email is here.")})},
	"Preview": {Preview: "Your order is on its way.", Width: 480, Children: Text(TextProps{Children: gx.Text("An inbox shows the preview text after the subject.")})},
}

package email

import "github.com/alternayte/gx"

// SectionFixtures are the examples of Section in the dev gallery.
var SectionFixtures = gx.Fixtures[SectionProps]{
	"Default": {Children: Text(TextProps{Children: gx.Text("A section groups the parts of an email.")})},
	"Card":    {Card: true, Children: Text(TextProps{Children: gx.Text("A card section has a border and padding.")})},
}

package email

import "github.com/alternayte/gx"

// RowFixtures are the examples of Row in the dev gallery.
var RowFixtures = gx.Fixtures[RowProps]{
	"TwoColumns": {Children: gx.Frag(
		Column(ColumnProps{Children: gx.Text("Tea, 2 boxes")}),
		Column(ColumnProps{Width: 120, Align: Right, Children: gx.Text("12.00")}),
	)},
}

package email

import "github.com/alternayte/gx"

// ColumnFixtures are the examples of Column in the dev gallery.
var ColumnFixtures = gx.Fixtures[ColumnProps]{
	"Default": {Children: gx.Text("A column shares the width of the row.")},
	"Fixed":   {Width: 160, Children: gx.Text("160 pixels")},
	"Right":   {Align: Right, Children: gx.Text("To the right")},
}

// ColumnWrap renders the column inside a row, as an email uses it.
func ColumnWrap(n gx.Node) gx.Node {
	return Row(RowProps{Children: n})
}

package email

import "github.com/alternayte/gx"

// TextFixtures are the examples of Text in the dev gallery.
var TextFixtures = gx.Fixtures[TextProps]{
	"Default": {Children: gx.Text("Thank you for your order. We send it in two days.")},
	"Muted":   {Muted: true, Children: gx.Text("You get this email because you have an account.")},
	"Center":  {Align: Center, Children: gx.Text("Text in the centre")},
}

package email

import "github.com/alternayte/gx"

// HeadingFixtures are the examples of Heading in the dev gallery.
var HeadingFixtures = gx.Fixtures[HeadingProps]{
	"One":   {Children: gx.Text("Your order is on its way")},
	"Two":   {Level: 2, Children: gx.Text("What you ordered")},
	"Three": {Level: 3, Align: Center, Children: gx.Text("Questions")},
}

package email

import "github.com/alternayte/gx"

// ButtonFixtures are the examples of Button in the dev gallery.
var ButtonFixtures = gx.Fixtures[ButtonProps]{
	"Default": {Href: gx.URL("/orders/1042"), Children: gx.Text("See the order")},
	"Center":  {Href: gx.URL("/orders/1042"), Align: Center, Children: gx.Text("Follow the parcel")},
}

package email

import "github.com/alternayte/gx"

// pixel is a grey image of one pixel, so the gallery needs no file.
const pixel = gx.URL("data:image/gif;base64,R0lGODlhAQABAIAAAMzMzAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==")

// ImageFixtures are the examples of Image in the dev gallery.
var ImageFixtures = gx.Fixtures[ImageProps]{
	"Default": {Src: pixel, Alt: "The logo of the shop", Width: 120, Height: 40},
}

package email

import "github.com/alternayte/gx"

// DividerFixtures are the examples of Divider in the dev gallery.
var DividerFixtures = gx.Fixtures[DividerProps]{
	"Default": {},
}

// Package email holds the parts of an HTML email: inline styles and table
// layout, which each email client reads. A component of this package has no
// class, no signal and no script (GX6010). The styles read the theme tokens
// with var(); gx.RenderEmail gives each one its value.
package email

import (
	"strconv"

	"github.com/alternayte/gx"
)

// Align is the horizontal position of the content of a part.
type Align string

// The positions of the content.
const (
	Left   Align = "left"
	Center Align = "center"
	Right  Align = "right"
)

// attr returns the value of the align attribute; a zero value is Left.
func (a Align) attr() string {
	switch a {
	case Center, Right:
		return string(a)
	}
	return string(Left)
}

// font is the font of each text. An email client has no font of the site.
const font = "font-family:Helvetica,Arial,sans-serif;"

// width returns the width of the content in pixels; a zero value is 600.
func (p DocumentProps) width() string {
	if p.Width <= 0 {
		return "600"
	}
	return strconv.Itoa(p.Width)
}

// style returns the style of the content table.
func (p DocumentProps) style() gx.Style {
	return gx.Style("width:100%;max-width:" + p.width() + "px")
}

// style returns the style of the cell of a section.
func (p SectionProps) style() gx.Style {
	if p.Card {
		return "padding:24px;background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius)"
	}
	return "padding:12px 0"
}

// style returns the style of a column. An empty width shares the row.
func (p ColumnProps) style() gx.Style {
	s := "padding:0 8px 0 0;vertical-align:top;" + font + "font-size:16px;line-height:24px;color:var(--foreground)"
	if p.Width > 0 {
		s += ";width:" + strconv.Itoa(p.Width) + "px"
	}
	return gx.Style(s)
}

// style returns the style of a paragraph.
func (p TextProps) style() gx.Style {
	s := "margin:0 0 16px;" + font + "font-size:16px;line-height:24px;text-align:" + p.Align.attr()
	if p.Muted {
		return gx.Style(s + ";font-size:14px;line-height:20px;color:var(--muted-foreground)")
	}
	return gx.Style(s + ";color:var(--foreground)")
}

// level returns the level of a heading: 1, 2 or 3. A zero value is 1.
func (p HeadingProps) level() int {
	if p.Level < 1 {
		return 1
	}
	if p.Level > 3 {
		return 3
	}
	return p.Level
}

// style returns the style of a heading.
func (p HeadingProps) style() gx.Style {
	size := map[int]string{1: "font-size:28px;line-height:36px", 2: "font-size:22px;line-height:28px", 3: "font-size:18px;line-height:24px"}[p.level()]
	return gx.Style("margin:0 0 16px;" + font + size + ";font-weight:700;color:var(--foreground);text-align:" + p.Align.attr())
}

// size returns a pixel count as an attribute value.
func size(n int) string { return strconv.Itoa(n) }

// style returns the style of an image. The image is not wider than its
// column.
func (p ImageProps) style() gx.Style {
	return "display:block;border:0;outline:none;max-width:100%;height:auto"
}