Atoms - two columns text, three columns text (WIP)

config/locales/activerecord.cs.yml

@@ -344,6 +344,7 @@ cs:
     messages:
       at_least_one: Vyplňte alespoň jedno políčko.
       invalid_count: musí být přesně %{count}
+      color_mode_without_wrapper: nelze nastavit na tmavý bez zvolení obalu
 
     attributes:
       verified_captcha:

config/locales/activerecord.en.yml

@@ -257,6 +257,7 @@ en:
     messages:
       at_least_one: Fill at least one of the fields.
       invalid_count: must be exactly %{count}
+      color_mode_without_wrapper: cannot be set to dark without selecting a wrapper
 
     attributes:
       verified_captcha:

test/dummy/app/components/dummy/atom/three_columns_text_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Dummy::Atom::ThreeColumnsTextComponent < ApplicationComponent
+  def initialize(atom:, atom_options: {})
+    @atom = atom
+    @atom_options = atom_options
+  end
+end

test/dummy/app/components/dummy/atom/three_columns_text_component.slim

@@ -0,0 +1,3 @@
+.d-atom.d-atom-three-columns-text
+  .container-fluid
+    = @atom

test/dummy/app/components/dummy/atom/two_columns_text_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Dummy::Atom::TwoColumnsTextComponent < ApplicationComponent
+  bem_class_name :background, :two_columns_on_mobile
+
+  def initialize(atom:, atom_options: {})
+    @atom = atom
+    @atom_options = atom_options
+    @background = @atom.wrapper == "background"
+    @dark_mode = @atom.color_mode == "dark"
+    @two_columns_on_mobile = @atom.mobile_layout == "two"
+  end
+
+  def inner_narrow_container_tag
+    h = {
+      tag: :div,
+      class: "container-fluid container-fluid--forced-padding container-narrow"
+    }
+
+    h
+  end
+end

test/dummy/app/components/dummy/atom/two_columns_text_component.sass

@@ -0,0 +1,81 @@
+.d-atom-two-columns-text
+  &[data-bs-theme="dark"]
+    background: transparent
+
+  &__wrapper
+    border-radius: $border-radius
+
+  &--background &__wrapper
+    background: $shade-100
+    padding: map-get($spacers, l) 0
+
+  &__title
+    margin-bottom: map-get($spacers, f)
+
+  &__column-title
+    position: relative
+    font-weight: $font-weight-semibold
+    padding-bottom: map-get($spacers, b)
+    align-self: end
+
+    &--left
+      grid-column: 1
+      grid-row: 1
+
+    &--right
+      grid-column: 2
+      grid-row: 1
+
+    &::after
+      content: ''
+      display: block
+      position: absolute
+      bottom: 0
+      left: 0
+      width: 100%
+      height: 1px
+      background: $transparent-300
+      border-radius: map-get($spacers, a)
+
+  &__grid-container
+    display: grid
+    grid-template-columns: 1fr 1fr
+    gap: map-get($spacers, c) map-get($spacers, f)
+
+  &__content
+    &--left
+      grid-column: 1
+      grid-row: 2
+
+    &--right
+      grid-column: 2
+      grid-row: 2
+
+  +media-breakpoint-down(xl)
+    &--background &__wrapper
+      padding: map-get($spacers, g) 0
+
+    &__grid-container
+      gap: px-to-rem(10px)
+
+    &__column-title
+      +font-size-text-xs
+
+  +media-breakpoint-down(sm)
+    &--background &__wrapper
+      padding: map-get($spacers, d) 0
+
+    &:not(&--two-columns-on-mobile) &__grid-container
+      grid-template-columns: 1fr
+      grid-auto-flow: row
+
+    &:not(&--two-columns-on-mobile) &__column-title,
+    &:not(&--two-columns-on-mobile) &__content
+      grid-column: 1
+      grid-row: auto
+
+    &--two-columns-on-mobile &__grid-container
+      gap: px-to-rem(10px) map-get($spacers, d)
+
+    &__wrapper
+      border-radius: 0

test/dummy/app/components/dummy/atom/two_columns_text_component.slim

@@ -0,0 +1,39 @@
+.d-atom.my-atom[
+  data-bs-theme=(@dark_mode ? "dark" : nil)
+  class=bem_class_name
+]
+  .container-fluid.container-fluid--with-narrow
+    .d-atom-two-columns-text__wrapper
+      *inner_narrow_container_tag
+        .d-atom-two-columns-text__inner
+          - if @atom.title.present?   
+            .d-atom-two-columns-text__title
+              .d-rich-text
+                == cstypo @atom.title
+
+          .d-atom-two-columns-text__grid-container
+            - if @atom.column_1_title.present?
+              .d-atom-two-columns-text__column-title[
+                class="d-atom-two-columns-text__column-title--left"
+                class="fs-text-s"
+              ]
+                = @atom.column_1_title
+
+            .d-atom-two-columns-text__content[
+              class="d-atom-two-columns-text__content--left"
+              class="d-rich-text"
+            ]
+              == cstypo @atom.column_1
+
+            - if @atom.column_2_title.present?
+              .d-atom-two-columns-text__column-title[
+                class="d-atom-two-columns-text__column-title--right"
+                class="fs-text-s"
+              ]
+                = @atom.column_2_title
+
+            .d-atom-two-columns-text__content[
+              class="d-atom-two-columns-text__content--right"
+              class="d-rich-text"
+            ]
+              == cstypo @atom.column_2

test/dummy/app/models/dummy/atom/three_columns_text.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class Dummy::Atom::ThreeColumnsText < Folio::Atom::Base
+  ATTACHMENTS = %i[]
+
+  STRUCTURE = {
+    title: :richtext,
+    column_1_title: :string,
+    column_1: :richtext,
+    column_2_title: :string,
+    column_2: :richtext,
+    column_3_title: :string,
+    column_3: :richtext,
+    mobile_layout: %w[one two],
+    wrapper: %w[none background outline],
+    color_mode: %w[light dark],
+  }
+
+  ASSOCIATIONS = {}
+
+  validates :column_1,
+            :column_2,
+            :column_3,
+            presence: true
+
+  validate :validate_color_mode
+
+  private
+    def validate_color_mode
+      if wrapper == "none" && color_mode == "dark"
+        errors.add(:color_mode, :color_mode_without_wrapper)
+      end
+    end
+end
+
+# == Schema Information
+#
+# Table name: folio_atoms
+#
+#  id              :bigint(8)        not null, primary key
+#  type            :string
+#  position        :integer
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  placement_type  :string
+#  placement_id    :bigint(8)
+#  locale          :string
+#  data            :jsonb
+#  associations    :jsonb
+#
+# Indexes
+#
+#  index_folio_atoms_on_placement_type_and_placement_id  (placement_type,placement_id)
+#

test/dummy/app/models/dummy/atom/two_columns_text.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class Dummy::Atom::TwoColumnsText < Folio::Atom::Base
+  ATTACHMENTS = %i[]
+
+  STRUCTURE = {
+    title: :richtext,
+    column_1_title: :string,
+    column_1: :richtext,
+    column_2_title: :string,
+    column_2: :richtext,
+    mobile_layout: %w[one two],
+    wrapper: %w[none background outline],
+    color_mode: %w[light dark],
+  }
+
+  ASSOCIATIONS = {}
+
+  validates :column_1,
+            :column_2,
+            presence: true
+
+  validate :validate_color_mode
+
+  private
+    def validate_color_mode
+      if wrapper == "none" && color_mode == "dark"
+        errors.add(:color_mode, :color_mode_without_wrapper)
+      end
+    end
+end
+
+# == Schema Information
+#
+# Table name: folio_atoms
+#
+#  id              :bigint(8)        not null, primary key
+#  type            :string
+#  position        :integer
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  placement_type  :string
+#  placement_id    :bigint(8)
+#  locale          :string
+#  data            :jsonb
+#  associations    :jsonb
+#
+# Indexes
+#
+#  index_folio_atoms_on_placement_type_and_placement_id  (placement_type,placement_id)
+#

test/dummy/config/locales/atom.cs.yml

@@ -16,6 +16,11 @@ cs:
         margin/medium: Střední (Výchozí)
         margin/large: Velká
         margin/extra-large: Extra velká
+      dummy/atom/documents:
+        size: Velikost
+        size/small: Malá
+        size/medium: Střední
+        size/large: Velká
       dummy/atom/image_and_content:
         image_side: Obrázek
         image_side/left: Nalevo
@@ -58,11 +63,21 @@ cs:
         theme: Barvy
         theme/light: Světlé
         theme/dark: Tmavé
-      dummy/atom/documents:
-        size: Velikost
-        size/small: Malá
-        size/medium: Střední
-        size/large: Velká
+      dummy/atom/two_columns_text:
+        column_1_title: Nadpis sloupce 1
+        column_1: Sloupec 1
+        column_2_title: Nadpis sloupce 2
+        column_2: Sloupec 2
+        mobile_layout: Mobilní layout
+        mobile_layout/one: Jeden sloupec
+        mobile_layout/two: Dva sloupce
+        wrapper: Obal
+        wrapper/none: Žádný
+        wrapper/background: Pozadí
+        wrapper/outline: Ohraničení
+        color_mode: Barevný režim
+        color_mode/light: Světlý
+        color_mode/dark: Tmavý
     models:
       dummy/atom/cards/extra_small: Karta - extra malá
       dummy/atom/cards/full_width: Karta - na celou šířku
@@ -86,4 +101,6 @@ cs:
       dummy/atom/perex: Perex
       dummy/atom/quotation: Citace
       dummy/atom/text: Text
+      dummy/atom/three_columns_text: Three_columns_text
       dummy/atom/title: Nadpis
+      dummy/atom/two_columns_text: Text ve dvou sloupcích

test/dummy/config/locales/atom.en.yml

@@ -15,6 +15,11 @@ en:
         margin/medium: Medium (Default)
         margin/large: Large
         margin/extra-large: Extra Large
+      dummy/atom/documents:
+        size: Size
+        size/small: Small
+        size/medium: Medium
+        size/large: Large
       dummy/atom/image_and_content:
         image_side: Image
         image_side/left: On the left
@@ -57,11 +62,21 @@ en:
         theme: Theme
         theme/light: Light
         theme/dark: Dark
-      dummy/atom/documents:
-        size: Size
-        size/small: Small
-        size/medium: Medium
-        size/large: Large
+      dummy/atom/two_columns_text:
+        column_1_title: Column 1 title
+        column_1: Column 1
+        column_2_title: Column 2 title
+        column_2: Column 2
+        mobile_layout: Mobile layout
+        mobile_layout/one: One column
+        mobile_layout/two: Two columns
+        wrapper: Wrapper
+        wrapper/none: None
+        wrapper/background: Background
+        wrapper/outline: Outline
+        color_mode: Color mode
+        color_mode/light: Light
+        color_mode/dark: Dark
     models:
       dummy/atom/cards/extra_small: Card - extra small
       dummy/atom/cards/full_width: Card - full width
@@ -85,4 +100,6 @@ en:
       dummy/atom/perex: Perex
       dummy/atom/quotation: Quotation
       dummy/atom/text: Text
+      dummy/atom/three_columns_text: Three_columns_text
       dummy/atom/title: Title
+      dummy/atom/two_columns_text: Two columns text