From b12e138bf257af5e87f45c7210d4b7e17414891d Mon Sep 17 00:00:00 2001 From: Christopher Torgalson Date: Tue, 10 Jun 2025 11:12:17 -0400 Subject: [PATCH 01/14] feat: adds new localgov_base:section component to theme --- components/section/README.md | 92 ++++++++++++++++++++++++ components/section/section.component.yml | 37 ++++++++++ components/section/section.css | 38 ++++++++++ components/section/section.twig | 39 ++++++++++ 4 files changed, 206 insertions(+) create mode 100644 components/section/README.md create mode 100644 components/section/section.component.yml create mode 100644 components/section/section.css create mode 100644 components/section/section.twig diff --git a/components/section/README.md b/components/section/README.md new file mode 100644 index 00000000..be6f2b7c --- /dev/null +++ b/components/section/README.md @@ -0,0 +1,92 @@ +## Section classes + +These classes are combinable, and should answer all common layout needs. + +### `.section` + +
+ Contained content and inline padding + 
+
++------------------------------------------------------------------------------+
+|P                  A+------------------------------------+A                  P|
+|P                  A|                                    |A                  P|
+|P                  A|              CONTENT               |A                  P|
+|P                  A|                                    |A                  P|
+|P                  A+------------------------------------+A                  P|
++------------------------------------------------------------------------------+
+
+
+
+ +### `.section.section--uncontained` + +
+ Inner element has occupies 100% parent width + 
+
++------------------------------------------------------------------------------+
+|P+--------------------------------------------------------------------------+P|
+|P|                                                                          |P|
+|P|                                 CONTENT                                  |P|
+|P|                                                                          |P|
+|P+--------------------------------------------------------------------------+P|
++------------------------------------------------------------------------------+
+
+
+
+ +### `.section.section--bleed` + +
+ Outer element has no inline padding + 
+
++------------------------------------------------------------------------------+
+|                   A+------------------------------------+A                   |
+|                   A|                                    |A                   |
+|                   A|              CONTENT               |A                   |
+|                   A|                                    |A                   |
+|                   A+------------------------------------+A                   |
++------------------------------------------------------------------------------+
+
+
+
+ +### `.section.section--expanded` + +
+ Outer element has block padding + 
+
++------------------------------------------------------------------------------+
+|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|
+|P                  A+------------------------------------+A                  P|
+|P                  A|                                    |A                  P|
+|P                  A|              CONTENT               |A                  P|
+|P                  A|                                    |A                  P|
+|P                  A+------------------------------------+A                  P|
+|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|
++------------------------------------------------------------------------------+
+
+
+
+ +### `.section.section--wrapped` + +
+ .section .section--wrapped + 
+
++------------------------------------------------------------------------------+
+|                   A+------------------------------------+A                   |
+|                   A|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|A                   |
+|                   A|P                                  P|A                   |
+|                   A|P             CONTENT              P|A                   |
+|                   A|P                                  P|A                   |
+|                   A|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|A                   |
+|                   A+------------------------------------+A                   |
++------------------------------------------------------------------------------+
+
+
+
diff --git a/components/section/section.component.yml b/components/section/section.component.yml new file mode 100644 index 00000000..118e2862 --- /dev/null +++ b/components/section/section.component.yml @@ -0,0 +1,37 @@ +--- +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json +name: LGD Section +description: Provides common section markup and classes to localgov_base. +status: stable +props: + type: object + properties: + section_inner_attributes: + type: object + title: Section inner attributes + description: A ready-for render Drupal attributes object for the INNER element of the section markup. + section_inner_classes: + type: array + title: Section inner classes + description: An array of html classes to be added to the INNER element of the section markup. Classes may also be provided directly to section_inner_attributes. + section_outer_attributes: + type: object + title: Section outer attributes + description: A ready-for render Drupal attributes object for the OUTER element of the section markup. + section_outer_classes: + type: array + title: Section outer classes + description: An array of html classes to be added to the OUTER element of the section markup. Classes may also be provided directly to section_outer_attributes. + section_outer_element: + type: string + title: Section outer element + description: Name of HTML tag to use for the section's outermost element. Seldom needs changing. + section_library: + type: string + title: Section library + description: Library, if any, to attach to the section. + slots: + section_content: + type: object + title: Section content + description: Content for the section! diff --git a/components/section/section.css b/components/section/section.css new file mode 100644 index 00000000..383f3584 --- /dev/null +++ b/components/section/section.css @@ -0,0 +1,38 @@ +.lgd-section { + padding-inline: var(--spacing, 1rem); +} + +.lgd-section__inner { + margin: 0 auto; + max-width: var(--width-container, 73.75rem); +} + +/* UNCONTAINED: inner element has occupies 100% parent width */ +.lgd-section--uncontained .lgd-section__inner { + max-width: none; +} + +/* BLEED: outer element has no inline padding */ +.lgd-section--bleed { + padding-inline: 0; +} + +/* WRAPPED: inner element has block and inner padding */ +.lgd-section--wrapped .lgd-section__inner { + padding-block: var(--vertical-rhythm-spacing, 1.5rem); + padding-inline: var(--spacing, 1rem); +} + +/* EXPANDED: outer element has block padding */ +.lgd-section--expanded { + padding-block: var(--vertical-rhythm-spacing, 1.5rem); +} + +/* DEMO: visualise inner and outer elements with background colours */ +.lgd-section--demo { + background: pink; +} + +.lgd-section--demo .lgd-section__inner { + background: azure; +} diff --git a/components/section/section.twig b/components/section/section.twig new file mode 100644 index 00000000..778505d0 --- /dev/null +++ b/components/section/section.twig @@ -0,0 +1,39 @@ +{# Set up wrapper div attributes #} +{% set section_outer_attributes = section_outer_attributes|default(create_attribute()) %} +{% set section_outer_classes = section_outer_classes|default([])|merge([ + 'lgd-section', + 'lgd-section--' ~ section|clean_class, + 'section', + 'section-' ~ section|clean_class, +]) %} + +{# Set up inner div attributes #} +{% set section_inner_attributes = section_inner_attributes|default(create_attribute()) %} +{% set section_inner_classes = section_inner_classes|default([])|merge([ + 'lgd-section__inner', +]) %} + +{# + Set the outer section's element. + + Some implementations may want to use other elements like e.g.
, +