diff --git a/assets/sass/theme.editor.scss b/assets/sass/theme.editor.scss index b2381df8..b9e8a942 100644 --- a/assets/sass/theme.editor.scss +++ b/assets/sass/theme.editor.scss @@ -7,6 +7,7 @@ @import 'components/00-base/variables'; @import 'components/00-base/**/mixins/*.scss'; @import 'components/00-base/**/fonts'; +@import 'components/01-atoms/**/button/*.scss'; .ck-editor__editable { @include ct-content(); diff --git a/civictheme_library/components/00-base/item-grid/item-grid.twig b/civictheme_library/components/00-base/item-grid/item-grid.twig index db8adf1e..4540a0fb 100644 --- a/civictheme_library/components/00-base/item-grid/item-grid.twig +++ b/civictheme_library/components/00-base/item-grid/item-grid.twig @@ -12,7 +12,7 @@ */ #} -{% set column_class = 'col-xxs-12 col-m-%s'|format(12 / column_count|default(1)) %} +{% set column_class = 'col-xxs-12 col-m-%s'|format(12 // column_count|default(1)) %} {% set fill_width_class = fill_width ? 'ct-item-grid--fill-width' : '' %} {% set modifier_class = '%s %s'|format(fill_width_class, modifier_class|default('')) %} diff --git a/civictheme_library/components/00-base/mixins/_content.scss b/civictheme_library/components/00-base/mixins/_content.scss index 588b5913..615b4dd1 100644 --- a/civictheme_library/components/00-base/mixins/_content.scss +++ b/civictheme_library/components/00-base/mixins/_content.scss @@ -91,7 +91,7 @@ } } - a { + a:not(.ct-button) { @include ct-content-link-base(); } diff --git a/civictheme_library/components/00-base/mixins/_grid.scss b/civictheme_library/components/00-base/mixins/_grid.scss index d79f0569..351060b7 100644 --- a/civictheme_library/components/00-base/mixins/_grid.scss +++ b/civictheme_library/components/00-base/mixins/_grid.scss @@ -125,8 +125,8 @@ // // Do not use directly. // -@mixin _ct-col-factory($thisPrefix) { - .col-#{$thisPrefix} { +@mixin _ct-col-factory($bp) { + .col-#{$bp} { flex-grow: 1; flex-basis: 0; max-width: 100%; @@ -135,59 +135,59 @@ } @for $i from 1 through $ct-grid-columns { - .col-#{$thisPrefix}-#{$i} { + .col-#{$bp}-#{$i} { flex-basis: math.div(100%, $ct-grid-columns) * $i; max-width: math.div(100%, $ct-grid-columns) * $i; @include _ct-print-all-gutters(); } - .col-#{$thisPrefix}-offset-#{$i} { + .col-#{$bp}-offset-#{$i} { margin-left: math.div(100%, $ct-grid-columns) * $i; } } - .col-#{$thisPrefix}-offset-0 { + .col-#{$bp}-offset-0 { margin-left: 0; } - .row.start-#{$thisPrefix} { + .row.start-#{$bp} { justify-content: flex-start; } - .row.center-#{$thisPrefix} { + .row.center-#{$bp} { justify-content: center; } - .row.end-#{$thisPrefix} { + .row.end-#{$bp} { justify-content: flex-end; } - .row.top-#{$thisPrefix} { + .row.top-#{$bp} { align-items: flex-start; } - .row.middle-#{$thisPrefix} { + .row.middle-#{$bp} { align-items: center; } - .row.bottom-#{$thisPrefix} { + .row.bottom-#{$bp} { align-items: flex-end; } - .row.around-#{$thisPrefix} { + .row.around-#{$bp} { justify-content: space-around; } - .row.between-#{$thisPrefix} { + .row.between-#{$bp} { justify-content: space-between; } - .first-#{$thisPrefix} { + .first-#{$bp} { order: -1; } - .last-#{$thisPrefix} { + .last-#{$bp} { order: 1; } } diff --git a/civictheme_library/components/02-molecules/basic-content/basic-content.stories.js b/civictheme_library/components/02-molecules/basic-content/basic-content.stories.js index f0864e72..37c6b5d1 100644 --- a/civictheme_library/components/02-molecules/basic-content/basic-content.stories.js +++ b/civictheme_library/components/02-molecules/basic-content/basic-content.stories.js @@ -3,6 +3,7 @@ import { boolean, radios, text } from '@storybook/addon-knobs'; import CivicThemeBasicContent from './basic-content.twig'; import CivicThemeContentLink from '../../01-atoms/content-link/content-link.twig'; +import CivicThemeButton from '../../01-atoms/button/button.twig'; import CivicThemeTable from '../../01-atoms/table/table.twig'; import CivicThemeFigure from '../figure/figure.twig'; import CivicThemeVideoPlayer from '../video-player/video-player.twig'; @@ -58,6 +59,28 @@ export const BasicContent = (knobTab) => { url: 'https://example.com', })} nisi anim.
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 @@