`;
-
- html += `
Container
`;
-
- html += `
Contained container ${code('.container')}
`;
- cols = [12];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j], placeholder(code(Math.floor(12 / cols[j])))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- template_column_count: cols[j],
- });
- }
-
- html += `
Fluid container ${code('.container-fluid')}
`;
- cols = [12];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j], placeholder(code(Math.floor(12 / cols[j])))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- template_column_count: cols[j],
- is_fluid: true,
- });
- }
-
- html += `
Columns
`;
-
- html += `
Template column in container ${code('.container > .row > .col-[breakpoint]-[column]')}
`;
- cols = [1, 2, 3, 4, 6, 12];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j], placeholder(code(Math.floor(12 / cols[j])))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- template_column_count: cols[j],
- });
- }
-
- html += `
Template column in fluid container ${code('.container-fluid > .row > .col-[breakpoint]-[column]')}
`;
- cols = [1];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j], placeholder(code(Math.floor(12 / cols[j])))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- template_column_count: cols[j],
- is_fluid: true,
- });
- }
-
- html += `
Auto column in container ${code('.container .row > .col')}
`;
- cols = [1, 2, 3, 4, 6, 12];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j], placeholder(code('auto'))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- });
- }
-
- html += `
Offsets and order
`;
-
- html += `
Template column in container ${code('.container > .row > .col-[breakpoint]-offset-[column]')}
`;
- cols = [1, 2, 3, 4, 6, 12];
- let offsets = [1, 2, 3, 4, 6, 8];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(1, placeholder(`width ${code(Math.floor(12 / cols[j]))}, offset ${code(offsets[j])}`)),
- column_attributes: `data-story-total-columns="1"`,
- column_class: `col-m-offset-${offsets[j]}`,
- template_column_count: cols[j],
- });
- }
-
- html += `
Auto column in container ${code('.container > .row > .col.col-[breakpoint]-offset-[column]')}
`;
- cols = [1, 2, 3, 4, 6, 12];
- offsets = [1, 2, 3, 4, 6, 8];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(1, placeholder(`width ${code('auto')}, offset ${code(offsets[j])}`)),
- column_attributes: `data-story-total-columns="1"`,
- column_class: `col-m-offset-${offsets[j]}`,
- });
- }
-
- html += `
Content width
`;
-
- html += `
Filled ${code('width: 100%')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col',
- });
-
- html += `
Hugged ${code('width: auto')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1], 0, 'story-placeholder--hugged')),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col',
- });
-
- html += `
Fixed ${code('width: 184px')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(`${cols[i - 1]} fixed width`, 0, 'story-placeholder--fixed')),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col',
- });
-
- html += `
Nested Rows (container-less)
`;
-
- html += `
Template column wraps template column ${code('.row > .col-[breakpoint]-[column] > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: false,
- template_column_count: 3,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: false,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- modifier_class: 'row--no-gutters',
- });
-
- html += `
Template column wraps auto column ${code('.row > .col-[breakpoint]-[column] > .row > .col')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: false,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: false,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- modifier_class: 'row--no-gutters',
- });
-
- html += `
Auto column wraps auto-column ${code('.row > .col > .row > .col')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: false,
- }),
- placeholder('Parent'),
- ],
- use_container: false,
- modifier_class: 'row--no-gutters',
- });
-
- html += `
Auto column wraps template column ${code('.row > .col > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: false,
- template_column_count: 3,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: false,
- modifier_class: 'row--no-gutters',
- });
-
- html += `
Nested Containers
`;
-
- html += `
Container with template columns wraps container with template columns ${code('.container .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: true,
- is_fluid: false,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: true,
- is_fluid: false,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- });
-
- html += `
Fluid container with template columns wraps container with template columns ${code('.container-fluid .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: true,
- is_fluid: false,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: true,
- is_fluid: true,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- });
-
- html += `
Fluid container with template columns wraps container with template columns (single column) ${code('.container-fluid .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: true,
- is_fluid: false,
- column_attributes: 'data-story-total-columns="3"',
- }),
- ],
- use_container: true,
- is_fluid: true,
- template_column_count: 1,
- });
-
- html += `
Container with template columns wraps fluid container with template columns ${code('.container .row > .col-[breakpoint]-[column] .container-fluid > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: true,
- is_fluid: true,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: true,
- is_fluid: false,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- });
-
- html += `
Fluid container with template columns wraps fluid container with template columns ${code('.container-fluid .row > .col-[breakpoint]-[column] .container-fluid > .row > .col-[breakpoint]-[column]')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: [
- CivicThemeGrid({
- items: [
- placeholder('Nested'),
- placeholder('Nested'),
- placeholder('Nested'),
- ],
- use_container: true,
- is_fluid: true,
- column_attributes: 'data-story-total-columns="3"',
- }),
- placeholder('Parent'),
- ],
- use_container: true,
- is_fluid: true,
- template_column_count: 2,
- column_attributes: 'data-story-total-columns="2"',
- });
-
- html += `
Row utilities
`;
-
- html += `
No gutters ${code('.row.row--no-gutters')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- use_container: false,
- row_class: 'row row--no-gutters',
- });
-
- html += `
No gutters within container ${code('.container > .row.row--no-gutters')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- use_container: true,
- is_fluid: false,
- row_class: 'row row--no-gutters',
- });
-
- html += `
No gutters within fluid container ${code('.container-fluid > .row.row--no-gutters')}
`;
- cols = ['A', 'B', 'C', 'D', 'E'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- use_container: true,
- is_fluid: true,
- row_class: 'row row--no-gutters',
- });
-
- html += `
Reversed columns ${code('.row.row--reverse')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- row_class: 'row row--reverse',
- });
-
- html += `
Equal column heights by default
`;
- cols = [`
Content should not fill - height is not 100%. ${randomSentence(5, 'A')}`, randomSentence(30, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- });
-
- html += `
Equal column heights propagated to content ${code('.row.row--equal-heights-content > .col-[breakpoint]-[column]')}
`;
- cols = [`
Content should fill - height is propagated to be 100%. ${randomSentence(5, 'A')}`, randomSentence(30, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- row_class: 'row row--equal-heights-content',
- });
-
- html += `
Equal column heights propagated to content ${code('.row.row--equal-heights-content > .col')} - Auto column
`;
- cols = [`
Content should fill - height is propagated to be 100%. ${randomSentence(5, 'A')}`, randomSentence(30, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- row_class: 'row row--equal-heights-content',
- });
-
- html += `
Unequal column heights ${code('.row.row--unequal-heights > .col-[breakpoint]-[column]')}
`;
- cols = [randomSentence(5, 'A'), randomSentence(20, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- row_class: 'row row--unequal-heights',
- });
-
- html += `
Unequal column heights ${code('.row.row--unequal-heights > .col')} - Auto column
`;
- cols = [randomSentence(5, 'A'), randomSentence(20, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- row_class: 'row row--unequal-heights',
- });
-
- html += `
Vertical spacing ${code('.row.row--vertically-spaced > .col-[breakpoint]-[column]')}
`;
- cols = [4, 3, 4];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j] + (j % 2), placeholder(code(Math.floor(12 / cols[j])))),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- template_column_count: cols[j],
- row_class: 'row row--vertically-spaced',
- });
- }
-
- html += `
Vertical spacing ${code('.row.row--vertically-spaced > .col')} - Autocolumn
`;
- cols = [4, 3, 4];
- for (let j = 0; j < cols.length; j++) {
- html += CivicThemeGrid({
- items: generateItems(cols[j] + (j % 2), placeholder(code(Math.floor(12 / cols[j])), 0, 'story-placeholder--fixed')),
- column_attributes: `data-story-total-columns="${cols[j]}"`,
- row_class: 'row row--vertically-spaced',
- });
- }
-
- html += `
Column utilities
`;
-
- html += `
Reversed items ${code('.row > .col-[breakpoint]-[column].col--reverse')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => `${placeholder(`${cols[i - 1]}-1`)} ${placeholder(`${cols[i - 1]}-2`)}`),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- column_class: 'col--reverse',
- });
-
- html += `
Reversed items ${code('.row > .col.col--reverse')} - Auto column
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => `${placeholder(`${cols[i - 1]}-1`)} ${placeholder(`${cols[i - 1]}-2`)}`),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col col--reverse',
- });
-
- html += `
No grow ${code('.row > .col-[breakpoint]-[column].col--no-grow')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- column_class: 'col--no-grow',
- });
-
- html += `
No grow ${code('.row > .col.col--no-grow')} - Auto column
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col col--no-grow',
- });
-
- html += `
No gap ${code('.row > .col-[breakpoint]-[column].col--no-gap')}
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- template_column_count: cols.length,
- column_class: 'col--no-gap',
- });
-
- html += `
No gap ${code('.row > .col.col--no-gap')} - Auto column
`;
- cols = ['A', 'B', 'C', 'D'];
- html += CivicThemeGrid({
- items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
- column_attributes: `data-story-total-columns="${cols.length}"`,
- column_class: 'col col--no-gap',
- });
-
- html += '
- {% endif %}
- <{{ row_element }} class="{{ row_class_string }}" {% if row_attributes is not empty %}{{ row_attributes|raw }}{% endif %}>
- {% for item in items %}
- {% if item is not empty %}
- <{{ column_element }} class="{{ column_class }}" {% if column_attributes is not empty %}{{ column_attributes|raw }}{% endif %}>
- {{ item|raw }}
-
- {% endif %}
- {% endfor %}
-
- {% if use_container %}
-
- {% endif %}
-{% endif %}
diff --git a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.scss b/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.scss
deleted file mode 100644
index 4b34b26a7c..0000000000
--- a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Icon component.
-//
-
-@use 'sass:map';
-
-.ct-icon {
- fill: currentcolor;
-
- // Size-less icons inherit dimensions from container's font-size.
- width: 1em;
- height: 1em;
- vertical-align: middle;
-
- // Generate size classes for all pre-set sizes.
- @each $size, $values in _ct-icon-sizes-all() {
- &--size-#{$size} {
- @include ct-icon-size($size);
- }
- }
-}
diff --git a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.stories.js b/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.stories.js
deleted file mode 100644
index e2166a937d..0000000000
--- a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// phpcs:ignoreFile
-import merge from 'deepmerge';
-import CivicThemeIcon from './icon.twig';
-import { arrayCombine, knobRadios, knobSelect, knobText, shouldRender, toLabels } from '../storybook/storybook.utils';
-
-export default {
- title: 'Base/Icon',
- parameters: {
- layout: 'centered',
- },
-};
-
-export const Icon = (parentKnobs = {}) => {
- const defaultSizes = SCSS_VARIABLES['ct-icon-sizes-default'];
- const customSizes = SCSS_VARIABLES['ct-icon-sizes'];
- let sizes = Object.keys(merge(defaultSizes, customSizes));
-
- sizes = arrayCombine(toLabels(sizes), sizes);
- sizes = merge({ Auto: 'auto' }, sizes);
-
- const knobs = {
- symbol: knobSelect('Symbol', ICONS, ICONS[0], parentKnobs.symbol, parentKnobs.knobTab),
- alt: knobText('Alt', 'Icon alt text', parentKnobs.alt, parentKnobs.knobTab),
- size: knobRadios('Size', sizes, 'auto', parentKnobs.size, parentKnobs.knobTab),
- modifier_class: knobText('Additional classes', '', parentKnobs.modifier_class, parentKnobs.knobTab),
- attributes: knobText('Additional attributes', '', parentKnobs.attributes, parentKnobs.knobTab),
- };
-
- return shouldRender(parentKnobs) ? CivicThemeIcon(knobs) : knobs;
-};
diff --git a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.twig b/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.twig
deleted file mode 100644
index 7af84d0ff7..0000000000
--- a/web/themes/contrib/civictheme/.components-civictheme/00-base/icon/icon.twig
+++ /dev/null
@@ -1,30 +0,0 @@
-{#
-/**
- * @file
- * Icon component.
- *
- * Variables:
- * - symbol: [string] Required icon name.
- * - size: [string] Optional icon size.
- * - alt: [string] Optional alternate text of the image.
- * - attributes: [string] Optional additional attributes.
- * - modifier_class: [string] Optional additional classes.
- * - assets_dir: [string] Optional assets directory to get icons from.
- */
-#}
-
-{% set assets_dir = assets_dir|default('@civictheme/../assets') %}
-
-{% if symbol is not empty %}
- {% set source = source(assets_dir ~ '/icons/' ~ symbol ~ '.svg', true) %}
- {% if source is not empty %}
- {% set size_class = size ? 'ct-icon--size-' ~ size : '' %}
- {% set base_class = 'ct-icon ' ~ size_class %}
- {% set modifier = modifier_class|default('') %}
- {% set aria_attributes = 'aria-hidden="true" role="img"' %}
- {% set alt_attribute = alt is defined ? 'alt="' ~ alt ~ '"' : '' %}
- {% set additional_attributes = attributes|default('') %}
- {% set attributes = 'class="' ~ base_class ~ ' ' ~ modifier ~ '" ' ~ aria_attributes ~ ' ' ~ alt_attribute ~ ' ' ~ additional_attributes %}
- {{ source|replace({'