diff --git a/config/locales/activerecord.cs.yml b/config/locales/activerecord.cs.yml
index c91b9e73d..2cbb4d956 100644
--- a/config/locales/activerecord.cs.yml
+++ b/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:
diff --git a/config/locales/activerecord.en.yml b/config/locales/activerecord.en.yml
index b44f3874f..34c2334cf 100644
--- a/config/locales/activerecord.en.yml
+++ b/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:
diff --git a/test/dummy/app/components/dummy/atom/three_columns_text_component.rb b/test/dummy/app/components/dummy/atom/three_columns_text_component.rb
new file mode 100644
index 000000000..e97d69766
--- /dev/null
+++ b/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
diff --git a/test/dummy/app/components/dummy/atom/three_columns_text_component.slim b/test/dummy/app/components/dummy/atom/three_columns_text_component.slim
new file mode 100644
index 000000000..1d54c6dda
--- /dev/null
+++ b/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
diff --git a/test/dummy/app/components/dummy/atom/two_columns_text_component.rb b/test/dummy/app/components/dummy/atom/two_columns_text_component.rb
new file mode 100644
index 000000000..e98ed2e11
--- /dev/null
+++ b/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
diff --git a/test/dummy/app/components/dummy/atom/two_columns_text_component.sass b/test/dummy/app/components/dummy/atom/two_columns_text_component.sass
new file mode 100644
index 000000000..e0d0544a2
--- /dev/null
+++ b/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
diff --git a/test/dummy/app/components/dummy/atom/two_columns_text_component.slim b/test/dummy/app/components/dummy/atom/two_columns_text_component.slim
new file mode 100644
index 000000000..490a4b782
--- /dev/null
+++ b/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
diff --git a/test/dummy/app/models/dummy/atom/three_columns_text.rb b/test/dummy/app/models/dummy/atom/three_columns_text.rb
new file mode 100644
index 000000000..face53fe1
--- /dev/null
+++ b/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)
+#
diff --git a/test/dummy/app/models/dummy/atom/two_columns_text.rb b/test/dummy/app/models/dummy/atom/two_columns_text.rb
new file mode 100644
index 000000000..4706bdd04
--- /dev/null
+++ b/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)
+#
diff --git a/test/dummy/config/locales/atom.cs.yml b/test/dummy/config/locales/atom.cs.yml
index 296e9ede6..dc57a1f85 100644
--- a/test/dummy/config/locales/atom.cs.yml
+++ b/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
diff --git a/test/dummy/config/locales/atom.en.yml b/test/dummy/config/locales/atom.en.yml
index 710b00201..d20220c1c 100644
--- a/test/dummy/config/locales/atom.en.yml
+++ b/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
diff --git a/test/dummy/data/atoms_showcase.yml b/test/dummy/data/atoms_showcase.yml
index a1d9f6df5..2333b37df 100644
--- a/test/dummy/data/atoms_showcase.yml
+++ b/test/dummy/data/atoms_showcase.yml
@@ -58,6 +58,57 @@ atoms:
outline: gray
theme: dark
+ Dummy::Atom::TwoColumnsText:
+ - title: "Title
"
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ - title: "Title
"
+ column_1_title: Title of the first column, which is very long and overflows to the second line
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2_title: Column 2 title
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ - title: "Title
"
+ column_1_title: Column 1 title
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ - column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ - title: "Title
"
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ wrapper: background
+ - title: "Title
"
+ column_1_title: Column 1 title
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2_title: Column 2 title
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ wrapper: background
+ - title: "Title
"
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ wrapper: background
+ color_mode: dark
+ - title: "Title
"
+ column_1: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ column_2: |
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies nulla nisl, nec semper enim varius a. Integer tortor sapien, congue a suscipit quis, ultrices non diam. Aenean bibendum sollicitudin tortor quis hendrerit. Donec vel porttitor
+ mobile_layout: two
+
Dummy::Atom::Title:
- tag: H1
title: H1 Goth squid xoxo sustainable fashion axe
diff --git a/test/dummy/test/components/dummy/atom/three_columns_text_component_test.rb b/test/dummy/test/components/dummy/atom/three_columns_text_component_test.rb
new file mode 100644
index 000000000..069cbea9e
--- /dev/null
+++ b/test/dummy/test/components/dummy/atom/three_columns_text_component_test.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Dummy::Atom::ThreeColumnsTextComponentTest < Folio::ComponentTest
+ def test_render
+ atom = create_atom(Dummy::Atom::ThreeColumnsText, :title, :column_1, :column_2, :column_3)
+
+ render_inline(Dummy::Atom::ThreeColumnsTextComponent.new(atom:))
+
+ assert_selector(".d-atom-three-columns-text")
+ end
+end
diff --git a/test/dummy/test/components/dummy/atom/two_columns_text_component_test.rb b/test/dummy/test/components/dummy/atom/two_columns_text_component_test.rb
new file mode 100644
index 000000000..7adb75fc1
--- /dev/null
+++ b/test/dummy/test/components/dummy/atom/two_columns_text_component_test.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Dummy::Atom::TwoColumnsTextComponentTest < Folio::ComponentTest
+ def test_render
+ atom = create_atom(Dummy::Atom::TwoColumnsText, :title, :column_1, :column_2)
+
+ render_inline(Dummy::Atom::TwoColumnsTextComponent.new(atom:))
+
+ assert_selector(".d-atom-two-columns-text")
+ end
+end