diff --git a/app/components/tailwind/heading.rb b/app/components/tailwind/heading.rb index fa838d91c..2d117a78f 100644 --- a/app/components/tailwind/heading.rb +++ b/app/components/tailwind/heading.rb @@ -5,21 +5,20 @@ module Tailwind class Heading < ViewComponent::Base extend T::Sig + DEFAULT_SIZES = T.let({ h1: "4xl", h2: "3xl", h3: "2xl" }.freeze, T::Hash[Symbol, String]) + # Doing this very long winded way to ensure that tailwind doesn't remove styles being used here + SIZES = T.let({ "xl" => "text-xl", "2xl" => "text-2xl", "3xl" => "text-3xl", "4xl" => "text-4xl" }.freeze, T::Hash[String, String]) + WEIGHTS = T.let({ "semibold" => "font-semibold", "bold" => "font-semibold" }.freeze, T::Hash[String, String]) + COLORS = T.let({ "fuchsia" => "text-fuchsia", "navy" => "text-navy" }.freeze, T::Hash[String, String]) + FONTS = T.let({ "display" => "font-display", "sans" => "font-sans" }.freeze, T::Hash[String, String]) + # TODO: Perhaps we should allow the size override to work by saying we want an h1 heading but with the styling of an h2? sig { params(tag: Symbol, size: T.nilable(String), color: T.nilable(String), font: T.nilable(String), weight: T.nilable(String), extra_classes: String).void } def initialize(tag:, size: nil, color: nil, font: nil, weight: nil, extra_classes: "") super - default_size = case tag - when :h1 - "4xl" - when :h2 - "3xl" - when :h3 - "2xl" - else - raise "Unexpected tag #{tag}" - end + default_size = DEFAULT_SIZES[tag] + raise "Unexpected tag #{tag}" if default_size.nil? # Set the default styling size ||= default_size @@ -27,47 +26,12 @@ def initialize(tag:, size: nil, color: nil, font: nil, weight: nil, extra_classe color ||= "navy" font ||= "display" - c = [] - - c << case size - when "xl" - "text-xl" - when "2xl" - "text-2xl" - when "3xl" - "text-3xl" - when "4xl" - "text-4xl" - else - raise "Unexpected size #{size}" - end - - c << case weight - when "semibold" - "font-semibold" - when "bold" - "font-bold" - else - raise "Unexpected weight #{weight}" - end - - c << case color - when "fuchsia" - "text-fuchsia" - when "navy" - "text-navy" - else - raise "Unexpected color #{color}" - end + raise "Unexpected size #{size}" unless SIZES.key?(size) + raise "Unexpected weight #{weight}" unless WEIGHTS.key?(weight) + raise "Unexpected color #{color}" unless COLORS.key?(color) + raise "Unexpected font #{font}" unless FONTS.key?(font) - c << case font - when "display" - "font-display" - when "sans" - "font-sans" - else - raise "Unexpected font #{font}" - end + c = [SIZES[size], WEIGHTS[weight], COLORS[color], FONTS[font]] # TODO: Not sure whether we should be setting max width on all headings c << "max-w-4xl" if tag == :h1 @@ -76,7 +40,7 @@ def initialize(tag:, size: nil, color: nil, font: nil, weight: nil, extra_classe c << extra_classes @tag = tag - @class = T.let(c, T::Array[String]) + @class = T.let(c, T::Array[T.nilable(String)]) end end end