From 4c6df249d6991f55fad414c29945d5494cc10a01 Mon Sep 17 00:00:00 2001
From: Alex Skrypnyk
Deserunt in ex dolore. Super cupidatat esse. Sub do mollit aute labore.
+Primary button link within text mollit in minim ut non ${CivicThemeButton({ + theme, + kind: 'link', + type: 'primary', + text: 'Primary button text', + url: 'https://example.com', + })} nisi anim.
+Secondary button link within text mollit in minim ut non ${CivicThemeButton({ + theme, + kind: 'link', + type: 'secondary', + text: 'Secondary button text', + url: 'https://example.com', + })} nisi anim.
+Tertiary button link within text mollit in minim ut non ${CivicThemeButton({ + theme, + kind: 'link', + type: 'tertiary', + text: 'Tertiary button text', + url: 'https://example.com', + })} nisi anim.
+Sed aute in sed consequat veniam excepteur minim mollit.
`; // Blockquote. diff --git a/civictheme_library/components/02-molecules/group-filter/group-filter.scss b/civictheme_library/components/02-molecules/group-filter/group-filter.scss index 4c665268..f9381e29 100644 --- a/civictheme_library/components/02-molecules/group-filter/group-filter.scss +++ b/civictheme_library/components/02-molecules/group-filter/group-filter.scss @@ -7,67 +7,34 @@ padding-bottom: ct-spacing(3); margin-top: ct-spacing(4); margin-bottom: ct-spacing(5); - - @include ct-breakpoint(m) { - padding-left: ct-spacing(4); - padding-right: ct-spacing(4); - } + padding-left: ct-spacing(4); + padding-right: ct-spacing(4); #{$root}__title { - margin-bottom: 0; - - @include ct-breakpoint(m) { - white-space: nowrap; - } - } - - #{$root}__submit { white-space: nowrap; + margin-bottom: 0; } - #{$root}__filters { - display: flex; + #{$root}__row { flex-direction: column; gap: ct-spacing(2); - @include ct-breakpoint(l) { - gap: ct-spacing(4); - } - - // No page sidebar. - .ct-layout__inner > .ct-layout__main & { - @include ct-breakpoint(m) { - flex-direction: row; - } - } - - // With page sidebar. - .ct-layout__sidebar + .ct-layout__main & { - @include ct-breakpoint(l) { - flex-direction: row; - } + @include ct-breakpoint(m) { + flex-direction: row; + gap: initial; } } - #{$root}__filter-row { + #{$root}__filters { flex-direction: column; - gap: ct-spacing(2); - // No page sidebar. - .ct-layout__inner > .ct-layout__main & { - @include ct-breakpoint(l) { - flex-direction: row; - gap: initial; - } + @include ct-breakpoint(m) { + flex-direction: row; } + } - // With page sidebar. - .ct-layout__sidebar + .ct-layout__main & { - @include ct-breakpoint(xxl) { - flex-direction: row; - gap: initial; - } - } + #{$root}__submit { + white-space: nowrap; } @include ct-component-theme($root) using($root, $theme) { diff --git a/civictheme_library/components/02-molecules/group-filter/group-filter.stories.js b/civictheme_library/components/02-molecules/group-filter/group-filter.stories.js index cc387c8b..c0805864 100644 --- a/civictheme_library/components/02-molecules/group-filter/group-filter.stories.js +++ b/civictheme_library/components/02-molecules/group-filter/group-filter.stories.js @@ -3,7 +3,9 @@ import { radios, number, text, } from '@storybook/addon-knobs'; -import { randomFormElements } from '../../00-base/base.utils'; +import { + getSlots, randomFormElements, randomInt, randomString, +} from '../../00-base/base.utils'; import CivicThemeGroupFilter from './group-filter.twig'; @@ -50,7 +52,7 @@ export const GroupFilter = () => { for (let i = 0; i < generalKnobs.filter_number; i++) { filters.push({ content: randomFormElements(1, generalKnobs.theme, true)[0], - title: `Filter ${i + 1}`, + title: `Filter ${randomString(randomInt(3, 8))} ${i + 1}`, }); } } @@ -58,5 +60,9 @@ export const GroupFilter = () => { return CivicThemeGroupFilter({ ...generalKnobs, filters, + ...getSlots([ + 'content_top', + 'content_bottom', + ]), }); }; diff --git a/civictheme_library/components/02-molecules/group-filter/group-filter.twig b/civictheme_library/components/02-molecules/group-filter/group-filter.twig index fd16f97c..69d787a7 100644 --- a/civictheme_library/components/02-molecules/group-filter/group-filter.twig +++ b/civictheme_library/components/02-molecules/group-filter/group-filter.twig @@ -20,7 +20,7 @@ #} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} -{% set modifier_class = '%s %s %s'|format(theme_class, with_background_class, modifier_class|default('')) %} +{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %} {% if filters is not empty %} {% set title = title|default('Filter results by:') %} @@ -63,7 +63,7 @@