diff --git a/components/content/displays/display-full/display-full.twig b/components/content/displays/display-full/display-full.twig index 17cf2447..e136471a 100644 --- a/components/content/displays/display-full/display-full.twig +++ b/components/content/displays/display-full/display-full.twig @@ -5,14 +5,18 @@ {% if not localgov_base_remove_css %} {{ attach_library('localgov_base/full') }} - {% if content_type == 'localgov_directories_venue' - or content_type == 'localgov_directories_page' - or content_type == 'localgov_directory' %} + {% if content_type in [ + 'localgov_directories_page', + 'localgov_directories_venue', + 'localgov_directory', + ] %} {{ attach_library('localgov_base/directories') }} {% endif %} - {% if content_type == 'localgov_step_by_step_overview' - or content_type == 'localgov_step_by_step_page' %} + {% if content_type in [ + 'localgov_step_by_step_overview', + 'localgov_step_by_step_page', + ] %} {{ attach_library('localgov_base/step-by-step') }} {% endif %} {% endif %} @@ -30,9 +34,18 @@ ] %} - - -
+{% embed 'localgov_base:section' with { + section_outer_attributes: attributes.removeAttribute('role'), + section_outer_classes: classes, + section_outer_element: 'article', + section_types: [ + 'bleed', + content_type not in restricted_width_content_types ? 'uncontained', + content_type in restricted_width_content_types ? 'restricted', + content_type in restricted_width_content_types ? 'uncentered', + ], +} %} + {% block section_content %} {{ title_prefix }} {{ title_suffix }} @@ -46,22 +59,12 @@ {% endif %} - {% if content_type in restricted_width_content_types %} -
- {% endif %} - - - {{ display_full_content }} -
-
- - {% if localgov_subsites_content %} - {{ localgov_subsites_content }} - {% endif %} - - - {% if content_type in restricted_width_content_types %} + + {{ display_full_content }} - {% endif %} - + {% if localgov_subsites_content %} + {{ localgov_subsites_content }} + {% endif %} + {% endblock %} +{% endembed %} 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..03c3f5c7 --- /dev/null +++ b/components/section/section.component.yml @@ -0,0 +1,57 @@ +--- +$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', 'string'] + additionalProperties: true + 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. + section_types: + type: array + title: Section types + description: > + One or more of the following keywords: + + - bleed + - expanded + - restricted + - separated + - separated-block + - separated-inline + - uncontained + - wrapped + - wrapped-block + - wrapped-inline + - demo + + These will be used to apply specific classes to the outer html element. + 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..5603862d --- /dev/null +++ b/components/section/section.css @@ -0,0 +1,85 @@ +.lgd-section { + padding-inline: var(--spacing, 1rem); +} + +.lgd-section__inner { + margin: 0 auto; + max-width: var(--width-container, 73.75rem); +} + +/* BLEED: outer element has no inline padding */ +.lgd-section--bleed { + padding-inline: 0; +} + +/* RESTRICTED: inner element uses narrower max-width. */ +.lgd-section--restricted > .lgd-section__inner { + max-width: var(--width-restricted-width-section, 48rem); +} + +/** + * SEPARATED: margin-top between .lgd-section--separated and any other + * .lgd-section--*, and inner element has inline margin. + */ +.lgd-section--separated { + margin-inline: var(--spacing); + + & + .lgd-section, + .lgd-section + & { + margin-top: var(--vertical-rhythm-spacing); + } +} + +/** + * SEPARATED BLOCK: margin-top between .lgd-section--separated and any other + * .lgd-section--*. + */ +.lgd-section--separated-block + .lgd-section, +.lgd-section + .lgd-section--separated-block { + margin-top: var(--vertical-rhythm-spacing); +} + +/* SEPARATED INLINE: outer element has inline margin. */ +.lgd-section--separated-inline { + margin-inline: var(--spacing); +} + +/* UNCONTAINED: inner element has occupies 100% parent width */ +.lgd-section--uncontained > .lgd-section__inner { + max-width: none; +} + +/* UNCENTERED: inner element has no inline margin. */ +.lgd-section--uncentered > .lgd-section__inner { + margin-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); +} + +/* WRAPPED BLOCK: inner element has block padding */ +.lgd-section--wrapped-block > .lgd-section__inner { + padding-block: var(--spacing, 1rem); +} + +/* WRAPPED INLINE: inner element has inline padding */ +.lgd-section--wrapped-inline > .lgd-section__inner { + 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 { + outline: 1px dotted pink; +} + +.lgd-section--demo > .lgd-section__inner { + outline: 1px dotted azure; +} diff --git a/components/section/section.twig b/components/section/section.twig new file mode 100644 index 00000000..d1187a2b --- /dev/null +++ b/components/section/section.twig @@ -0,0 +1,56 @@ +{# Set up wrapper div attributes #} + +{% set default_section_types = [ + 'bleed', + 'expanded', + 'restricted', + 'separated', + 'separated-block', + 'separated-inline', + 'uncontained', + 'uncentered', + 'wrapped', + 'wrapped-block', + 'wrapped-inline', + 'demo', +] %} + +{# Create section type classes from section_types prop. #} +{% set section_type_classes = section_types|default([])|filter( + section_type => section_type in default_section_types +)|map(section_type => 'lgd-section--' ~ section_type)|merge(['lgd-section']) %} + +{# Set up outer div attributes. #} +{% set section_outer_attributes = section_outer_attributes|default(create_attribute()) %} +{% set section_outer_classes = section_outer_classes|default([])|merge(section_type_classes) %} + +{# 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.
, +