Merge tag '1.6.2' into develop

1.6.2

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();

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('')) %}
 

civictheme_library/components/00-base/mixins/_content.scss

@@ -91,7 +91,7 @@
     }
   }
 
-  a {
+  a:not(.ct-button) {
     @include ct-content-link-base();
   }
 

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;
   }
 }

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.</p>
     <p>Deserunt in ex dolore. <sup>Super cupidatat esse.</sup> <sub>Sub do mollit aute labore.</sub></p>
+    <p>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.</p>
+    <p>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.</p>
+    <p>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.</p>
+    <p>Sed aute in sed consequat veniam excepteur minim mollit.</p>
   `;
 
   // Blockquote.

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) {

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,13 +52,17 @@ 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}`,
       });
     }
   }
 
   return CivicThemeGroupFilter({
     ...generalKnobs,
     filters,
+    ...getSlots([
+      'content_top',
+      'content_bottom',
+    ]),
   });
 };

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 @@
               <form {{ form_attributes }}>
             {% endif %}
 
-            <div class="row row--no-wrap ct-group-filter__filter-row">
+            <div class="row row--no-wrap ct-group-filter__row">
               <div class="col col--no-grow">
                 <div class="ct-align-middle">
                   {% if title %}

civictheme_library/components/03-organisms/list/list.stories.js

@@ -134,7 +134,7 @@ export const List = (knobTab) => {
         for (let j = 0; j < filtersCount; j++) {
           filters.push({
             content: randomFormElements(1, generalKnobs.theme, true)[0],
-            title: `Filter ${j + 1}`,
+            title: `Filter ${randomString(randomInt(3, 8))} ${j + 1}`,
           });
         }
       }

civictheme_library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "civictheme",
-  "version": "1.5.1",
+  "version": "1.6.2",
   "private": true,
   "description": "CivicTheme UI kit with Storybook integration.",
   "keywords": [

civictheme_starter_kit/assets/sass/theme.editor.scss

@@ -7,6 +7,7 @@
 @import 'components_combined/00-base/variables';
 @import 'components_combined/00-base/**/mixins/*.scss';
 @import 'components_combined/00-base/**/fonts';
+@import 'components_combined/01-atoms/**/button/*.scss';
 
 .ck-editor__editable {
   @include ct-content();

civictheme_starter_kit/components/02-molecules/navigation-card/navigation-card.stories.js

@@ -20,7 +20,7 @@ import {
 } from '../../00-base/base.utils';
 
 export default {
-  title: 'Molecules/Card/Navigation Card',
+  title: 'Molecules/Navigation Card',
   parameters: {
     layout: 'centered',
   },
@@ -39,23 +39,18 @@ export const NavigationCard = (knobTab) => {
       'light',
       generalKnobTab,
     ),
-    size: radios(
-      'Size',
-      {
-        Large: 'large',
-        Small: 'small',
-      },
-      'large',
-      generalKnobTab,
-    ),
     title: text('Title', 'Navigation card heading which runs across two or three lines', generalKnobTab),
-    summary: text('Summary', '', generalKnobTab),
-    url: text('URL', randomUrl(), generalKnobTab),
-    is_external: boolean('Is external', false, generalKnobTab),
+    summary: text('Summary', 'Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.', generalKnobTab),
+    link: {
+      url: text('Link URL', randomUrl(), generalKnobTab),
+      is_external: boolean('Link is external', false, generalKnobTab),
+      is_new_window: boolean('Open in a new window', false, generalKnobTab),
+    },
     image: boolean('With image', true, generalKnobTab) ? {
       url: demoImage(),
       alt: 'Image alt text',
     } : false,
+    image_as_icon: boolean('Image as icon', false, generalKnobTab),
     // This is a new property added for this extended component.
     tags: randomTags(number(
       'Number of tags',
@@ -68,16 +63,17 @@ export const NavigationCard = (knobTab) => {
       },
       generalKnobTab,
     ), true),
-    modifier_class: text('Additional class', '', generalKnobTab),
+    modifier_class: `story-wrapper-size--medium ${text('Additional class', '', generalKnobTab)}`,
+    attributes: text('Additional attributes', '', generalKnobTab),
   };
 
   const iconKnobTab = 'Icon';
-  const withIcon = boolean('With icon', false, iconKnobTab);
+  const withIcon = boolean('With icon', false, generalKnobTab);
   const iconKnobs = {
     icon: withIcon ? select('Icon', Object.values(ICONS), Object.values(ICONS)[0], iconKnobTab) : null,
   };
 
-  const html = CivicThemeNavigationCard({
+  return CivicThemeNavigationCard({
     ...generalKnobs,
     ...iconKnobs,
     ...getSlots([
@@ -87,6 +83,4 @@ export const NavigationCard = (knobTab) => {
       'content_bottom',
     ]),
   });
-
-  return `<div class="story-wrapper-size--medium">${html}</div>`;
 };

civictheme_starter_kit/components/02-molecules/navigation-card/navigation-card.twig

@@ -65,13 +65,12 @@
   #}
   {% if tags %}
     <div class="ct-navigation-card__tags">
-      {% for tag in tags %}
-        {% include '@atoms/tag/tag.twig' with {
+      {% if tags %}
+        {% include '@molecules/tag-list/tag-list.twig' with {
           theme: theme,
-          text: tag,
-          is_alt: true,
+          tags: tags,
         } only %}
-      {% endfor %}
+      {% endif %}
     </div>
   {% endif %}
 {% endblock %}

civictheme_starter_kit/webpack/assets.js

@@ -2,4 +2,4 @@
 function requireAll(r) {
   r.keys().forEach(r);
 }
-requireAll(require.context('../assets/', true, /.*/));
+requireAll(require.context('../assets/', true, /\/(?!.*theme\.editor).*\..*/));