Module: Decidim::Design::TypographyHelper

Defined in:
decidim-design/app/helpers/decidim/design/typography_helper.rb

Instance Method Summary collapse

Instance Method Details

#typography_sections ⇒ Object 



6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
# File 'decidim-design/app/helpers/decidim/design/typography_helper.rb', line 6

def typography_sections
  [
    {
      id: "typefaces",
      contents: [
        {
          type: :text,
          values: [
            t("decidim.design.foundations.typography.typefaces_description_1"),
            t("decidim.design.foundations.typography.typefaces_description_2")
          ]
        },
        {
          type: :table,
          options: { headings: %w(Example) },
          items: typography_table(
            { type: "typefaces", example: "Source Sans Pro Bold", class: "font-bold" },
            { type: "typefaces", example: "Source Sans Pro Semibold", class: "font-semibold" },
            { type: "typefaces", example: "Source Sans Pro Regulars", class: "font-normal" }
          )
        }
      ]
    },
    {
      id: "headings",
      contents: [
        {
          type: :table,
          options: { headings: ["Level", "Semibold 600", "Bold 700", "Size"] },
          items: typography_table(
            { type: "headings", level: "Hero H1", text: "Hero heading", size: "text-5xl" },
            { type: "headings", level: "H1", text: "Heading H1", size: "text-4xl" },
            { type: "headings", level: "H2", text: "Heading H2", size: "text-3xl" },
            { type: "headings", level: "H3", text: "Heading H3", size: "text-2xl" },
            { type: "headings", level: "H4", text: "Heading H4", size: "text-xl" },
            { type: "headings", level: "H5", text: "Heading H5", size: "text-lg" },
            { type: "headings", level: "H6", text: "Heading H6", size: "text-md" }
          )
        }
      ]
    },
    {
      id: "content",
      contents: [
        {
          type: :table,
          options: { headings: ["Regular 400", "Semibold 600", "Bold 700", "Size"] },
          items: typography_table(
            { type: "content", text: "Sample content", size: "text-xl" },
            { type: "content", text: "Sample content", size: "text-lg" },
            { type: "content", text: "Sample content", size: "text-md" },
            { type: "content", text: "Sample content", size: "text-sm" },
            { type: "content", text: "Sample content", size: "text-xs" }
          )
        }
      ]
    },
    {
      id: "readability",
      contents: [
        {
          type: :table,
          options: { headings: [t("decidim.design.foundations.typography.headings.size"), t("decidim.design.foundations.typography.headings.layout"),
                                t("decidim.design.foundations.typography.headings.characters")] },
          items: typography_table(
            { type: "readability", size: "text-xl", layout: 6, chars: 81 },
            { type: "readability", size: "text-lg", layout: 6, chars: 90 },
            { type: "readability", size: "text-md", layout: 5, chars: 84 },
            { type: "readability", size: "text-sm", layout: 4, chars: 76 }
          )
        }
      ]
    }
  ]
end

#typography_table(*table_rows, **_opts) ⇒ Object 



82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
# File 'decidim-design/app/helpers/decidim/design/typography_helper.rb', line 82

def typography_table(*table_rows, **_opts)
  table_rows.each_with_index.map do |table_cell, ix|
    row = []

    row << content_tag(:span, table_cell[:example], class: "text-lg #{table_cell[:class]}") if table_cell[:type] == "typefaces"

    if table_cell[:type] == "headings"
      row << table_cell[:level]
      row << content_tag(:span, ix.positive? ? table_cell[:text] : "", class: "font-semibold #{table_cell[:size]}")
      row << content_tag(:span, table_cell[:text], class: "font-bold #{table_cell[:size]}")
      row << content_tag(:span, table_cell[:size], class: "text-secondary underline text-center")
    end

    if table_cell[:type] == "content"
      row << content_tag(:span, table_cell[:text], class: "font-normal #{table_cell[:size]}")
      row << content_tag(:span, table_cell[:text], class: "font-semibold  #{table_cell[:size]}")
      row << content_tag(:span, table_cell[:text], class: "font-bold  #{table_cell[:size]}")
      row << content_tag(:span, table_cell[:size], class: "text-secondary underline text-center")
    end

    if table_cell[:type] == "readability"
      row << content_tag(:span, table_cell[:size], class: "text-secondary underline")
      row << table_cell[:layout].to_s
      row << table_cell[:chars].to_s
    end

    row
  end
end