@dta-au/civictheme-twig 1.13.1

package/components/00-base/storybook/storybook.layout.utils.stories.scss

@@ -0,0 +1,90 @@
+//
+// Custom layouts for Storybook.
+//
+// Storybook does not provide a simple way to add custom layouts to be
+// used in the story parameters, so we have to use our own decorator that
+// provides a wrapper around story with custom sizes.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+.sb-show-main {
+  overflow-y: scroll;
+
+  // Prevent animation to reduce false positives in diff tool.
+  transition: background-color 0s !important;
+
+  // Remove padding so we can clearly see where the edges of the elements sit.
+  &.sb-main-fullscreen,
+  &.sb-main-centered {
+    #root {
+      padding: 0;
+    }
+  }
+}
+
+#root {
+  font-family: sans-serif;
+  padding: ct-spacing(2);
+
+  > .story-layout {
+    $root: &;
+
+    // Only apply wrappers used directly in preview, but not within other
+    // components.
+    &.story-layout-size--small {
+      // Make the wrapper smaller than the mobile size to make sure any overflow
+      // is visible on the screen.
+      max-width: map.get($ct-breakpoints, 'xs') - ct-particle-px(4);
+
+      @include ct-breakpoint(s) {
+        max-width: map.get($ct-breakpoints, 's') - ct-particle-px(4);
+      }
+    }
+
+    &.story-layout-size--medium {
+      max-width: map.get($ct-breakpoints, 'm');
+    }
+
+    &.story-layout-size--large {
+      max-width: map.get($ct-breakpoints, 'xxl');
+    }
+
+    &.story-layout--resizable {
+      border: solid ct-particle(0.125) yellowgreen;
+      padding: ct-particle(2);
+      width: 85vw;
+      height: 95vh;
+      resize: horizontal;
+      overflow: auto;
+    }
+
+    &.story-layout--container {
+      container-type: inline-size;
+    }
+
+    &.story-layout--resizable,
+    &.story-layout--container {
+      &.story-layout-size--small {
+        max-width: initial;
+        width: rem(map.get($ct-breakpoints, 'xs')) + ct-spacing(8);
+      }
+
+      &.story-layout-size--medium {
+        max-width: initial;
+        width: rem(map.get($ct-breakpoints, 's')) + ct-spacing(8);
+      }
+
+      &.story-layout-size--large {
+        max-width: initial;
+        width: rem(map.get($ct-breakpoints, 'xxl')) + ct-spacing(8);
+      }
+    }
+  }
+}
+
+.sb-main-fullscreen #root .story-layout.story-layout--centered-vertically {
+  margin-top: 30vh;
+}

package/components/00-base/storybook/storybook.placeholder.utils.stories.scss

@@ -0,0 +1,75 @@
+//
+// Placeholders and slots.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// Placeholder is a temporary element that occupies the space of a component
+// to demonstrate its dimensions.
+.story-placeholder,
+.story-placeholder--hugged,
+.story-placeholder--fixed {
+  $_color: #548992;
+
+  display: inline-block;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  text-align: center;
+  font-family: sans-serif;
+  background-color: color.adjust($_color, $alpha: -0.7);
+  border: dashed 1px color.adjust($_color, $alpha: -0.3);
+  color: color.adjust($_color, $lightness: -30%);
+
+  .ct-theme-dark & {
+    background-color: color.adjust(color.adjust($_color, $lightness: 10%), $alpha: -0.3);
+    border: dashed 1px color.adjust(color.adjust($_color, $lightness: 50%), $alpha: -0.1);
+    color: color.adjust($_color, $lightness: 50%);
+  }
+}
+
+.story-placeholder {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.story-placeholder--hugged {
+  width: auto;
+}
+
+.story-placeholder--fixed {
+  width: math.div(ct-breakpoint-next($ct-grid-lowest-breakpoint), 2);
+}
+
+// Slot demonstrates empty "slots" within a component.
+.story-slot {
+  display: grid;
+  align-items: center;
+  background-color: color.adjust(purple, $alpha: -0.7);
+  padding: 1em;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 0.8em;
+  border: dotted ct-particle(0.125) purple;
+  white-space: nowrap;
+  height: 100%;
+
+  .ct-theme-dark & {
+    background-color: color.adjust(white, $alpha: -0.7);
+    border: dotted ct-particle(0.125) purple;
+  }
+
+  code {
+    background-color: transparent;
+    border: none;
+    color: inherit;
+  }
+}
+
+.story-slot--image_over {
+  position: absolute;
+  top: 4em;
+  left: 0;
+  right: 0;
+}

package/components/00-base/storybook/storybook.stories.scss

@@ -0,0 +1,8 @@
+//
+// Additional rules for Storybook stories.
+//
+
+@import 'storybook.container.utils.stories';
+@import 'storybook.docs.utils.stories';
+@import 'storybook.layout.utils.stories';
+@import 'storybook.placeholder.utils.stories';

package/components/00-base/text-icon/text-icon.scss

@@ -0,0 +1,9 @@
+//
+// CivicTheme Text Icon component styles.
+//
+
+.ct-text-icon {
+  &__group {
+    white-space: nowrap;
+  }
+}

package/components/00-base/text-icon/text-icon.stories.js

@@ -0,0 +1,57 @@
+/**
+ * CivicTheme Text Icon component stories.
+ */
+
+import Component from './text-icon.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Base/Text Icon',
+  component: Component,
+  argTypes: {
+    text: {
+      control: { type: 'text' },
+    },
+    is_new_window: {
+      control: { type: 'boolean' },
+    },
+    is_external: {
+      control: { type: 'boolean' },
+    },
+    icon: {
+      control: { type: 'select' },
+      options: Constants.ICONS,
+    },
+    icon_placement: {
+      control: { type: 'radio' },
+      options: ['before', 'after'],
+    },
+    icon_class: {
+      control: { type: 'text' },
+    },
+    icon_group_disabled: {
+      control: { type: 'boolean' },
+    },
+    icon_single_only: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+
+export const TextIcon = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    text: 'Text icon example',
+    is_new_window: false,
+    is_external: false,
+    icon: Constants.ICONS[0],
+    icon_placement: 'before',
+    icon_class: '',
+    icon_group_disabled: false,
+    icon_single_only: false,
+  },
+};

package/components/00-base/text-icon/text-icon.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * CivicTheme Text Icon component.
+ *
+ * Props:
+ * - text: [string,null] Text content.
+ * - is_new_window: [boolean,null] Whether to open in a new window.
+ * - is_external: [boolean,null] Whether the link is external.
+ * - icon: [string,null] Icon name.
+ * - icon_placement: [string] Icon position (before or after).
+ * - icon_class: [string] Class for custom icon.
+ * - icon_group_disabled: [boolean] Whether to disable icon and last word grouping.
+ * - icon_single_only: [boolean] Whether to show only one icon (if both icon and is_external are present, external takes preference).
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{%- set icon = (is_external and icon_single_only) ? 'upper-right-arrow' : (icon|default('')) -%}
+
+{%- set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' -%}
+
+{%- set content_markup -%}
+  {%- if icon or is_external -%}
+
+    {%- if icon -%}
+      {%- set icon_markup -%}
+        {%- include '@base/icon/icon.twig' with {
+          symbol: icon,
+          modifier_class: icon_class|default(''),
+        } only -%}
+      {%- endset -%}
+    {%- endif -%}
+
+    {%- if text is not empty -%}
+      {# Prepare the text #}
+      {% set rendered_text -%}
+        {{- text -}}
+      {%- endset %}
+      {%- set text_arr = rendered_text|striptags|trim|split(' ') -%}
+      {%- set text_start = text_arr|slice(0, -1)|join(' ') -%}
+      {%- set text_end = text_arr|last -%}
+      {%- set show_full_text = icon_group_disabled or (icon_placement == 'before' and is_external == false) -%}
+      {%- set display_text = show_full_text ? text : text_start ~ ' ' -%}
+      {%- set before_text = icon_placement == 'before' ? icon_markup : '' -%}
+
+      {# Prepare the after elements #}
+      {%- set after_text -%}
+        {%- set after_icons -%}
+          {%- if icon_placement == 'after' -%}
+            {{- icon_markup -}}
+          {%- endif -%}
+          {%- if is_external and not icon_single_only -%}
+            {%- include '@base/icon/icon.twig' with {symbol: 'upper-right-arrow'} only -%}
+          {%- endif -%}
+        {%- endset -%}
+        {%- if show_full_text %} {% endif -%}{# This line adds some space between full text and after icons #}
+        {%- if not show_full_text -%}
+          <span class="ct-text-icon__group"><span class="ct-text-icon__text">{{ text_end }}</span> {{ after_icons -}}</span>
+        {%- else -%}
+          {{- after_icons -}}
+        {%- endif -%}
+      {%- endset -%}
+
+      {{- before_text }}<span class="ct-text-icon__text">{{ display_text }}</span>{{ after_text -}}
+    {%- else -%}
+      {{- icon_markup -}}
+    {%- endif -%}
+
+  {%- else -%}
+    <span class="ct-text-icon__text">{{- text -}}</span>
+  {%- endif -%}
+{%- endset -%}
+
+{%- if is_new_window -%}
+  {%- set is_new_window_content -%}
+    <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
+  {%- endset -%}
+{%- endif -%}
+
+{{- content_markup -}}{{- is_new_window_content -}}

package/components/00-base/typography/typography.scss

@@ -0,0 +1,81 @@
+//
+// Typography component.
+//
+
+@use 'sass:map';
+
+@each $name in map.keys(_ct-typography-all()) {
+  .ct-#{$name} {
+    @include ct-typography($name);
+  }
+}
+
+@for $level from 1 through 6 {
+  h#{$level} {
+    @include ct-typography('heading-#{$level}');
+  }
+}
+
+p {
+  @include ct-typography('text-regular');
+
+  & {
+    margin-top: var(--ct-basic-content-vertical-spacing);
+    margin-bottom: var(--ct-basic-content-vertical-spacing);
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+blockquote {
+  @include ct-typography('quote');
+
+  & {
+    position: relative;
+    margin: 0;
+    margin-top: var(--ct-basic-content-vertical-spacing);
+    margin-bottom: var(--ct-basic-content-vertical-spacing);
+    padding: ct-spacing(2) ct-spacing(3);
+  }
+
+  &::before {
+    content: '';
+    width: ct-particle(0.75);
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--ct-basic-content-blockquote-border-radius);
+  }
+}
+
+ol {
+  list-style-type: decimal;
+
+  ol {
+    list-style-type: lower-alpha;
+
+    ol {
+      list-style-type: lower-roman;
+    }
+  }
+}
+
+.ct-text-align-left {
+  text-align: left;
+}
+
+.ct-text-align-center {
+  text-align: center;
+}
+
+.ct-text-align-right {
+  text-align: right;
+}

package/components/00-base/typography/typography.stories.js

@@ -0,0 +1,17 @@
+import Component from './typography.stories.twig';
+
+const meta = {
+  title: 'Base/Typography',
+  component: Component,
+};
+
+export default meta;
+
+export const Typography = {
+  parameters: {
+    layout: 'centered',
+    html: {
+      disable: true,
+    },
+  },
+};

package/components/00-base/typography/typography.stories.twig

@@ -0,0 +1,228 @@
+{#
+/**
+ * @file
+ * Typography story template.
+ */
+#}
+
+<div class="story-container">
+  <div class="story-container__title">Headings</div>
+  <div class="story-container__content">
+    {% for level in 1..6 %}
+      <h{{ level }}>
+        The quick brown fox jumps over the lazy dog
+      </h{{ level }}>
+    {% endfor %}
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Text</div>
+  {% for type in ['extra-large', 'large', 'regular', 'small'] %}
+    <div class="story-container__content ct-text-{{ type }}">
+      Text - {{ type }}. Pellentesque in ipsum id orci porta dapibus. convallis
+      at tellus Curabitur non nulla sit amet nisl tempus convallis quis ac
+      lectus.
+    </div>
+  {% endfor %}
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Labels</div>
+  {% for type in ['extra-large', 'large', 'regular', 'small', 'extra-small'] %}
+    <div class="story-container__content ct-label-{{ type }}">
+      Label - {{ type }}
+    </div>
+  {% endfor %}
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Text styles</div>
+  <div class="story-container__content">
+    <p>
+      Nulla quis lorem ut <a href="https://example.com">example link in
+        paragraph</a> libero malesuada feugiat.
+    </p>
+    <p><strong>Bold: Nulla quis lorem ut libero malesuada feugiat.</strong></p>
+    <p><em>Italic: Nulla quis lorem ut libero malesuada feugiat.</em></p>
+    <p>
+      <span style="text-decoration: underline;">Underline: Nulla quis lorem ut libero malesuada feugiat.</span>
+    </p>
+    <p>
+      <span style="text-decoration: line-through;">Strikethrouh: Nulla quis lorem ut libero malesuada feugiat.</span>
+    </p>
+    <p>Date: 20<sup>th&nbsp;</sup>August 2022</p>
+    <p>H<sub>2</sub>0</p>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Paragraphs</div>
+  <div class="story-container__content">
+    <p>Pellentesque in ipsum id orci porta dapibus. convallis at tellus
+      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+      Pellentesque in ipsum id orci porta dapibus.
+    </p>
+    <p>Pellentesque in ipsum id orci porta dapibus. convallis at tellus
+      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+      Pellentesque in ipsum id orci porta dapibus.
+    </p>
+    <p>Pellentesque in ipsum id orci porta dapibus. convallis at tellus
+      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+      Pellentesque in ipsum id orci porta dapibus.
+    </p>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Blockquote</div>
+  <div class="story-container__content">
+    <p>
+      Pellentesque in ipsum id orci porta dapibus. convallis at tellus
+      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+      Pellentesque in ipsum id orci porta dapibus.
+    </p>
+    <blockquote>
+      Vivamus suscipit tortor eget felis porttitor volutpat.
+      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+      cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
+      sit amet ligula. Donec rutrum congue leo eget malesuada.
+    </blockquote>
+    <p>
+      Pellentesque in ipsum id orci porta dapibus. convallis at tellus
+      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
+      Pellentesque in ipsum id orci porta dapibus.
+    </p>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Unordered list</div>
+  <div class="story-container__content">
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2</li>
+      <li>List item 3</li>
+      <li>List item 4</li>
+      <li>List item 5</li>
+    </ul>
+  </div>
+
+  <div class="story-container__title">Unordered list with sub unordered list
+  </div>
+  <div class="story-container__content">
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2
+        <ul>
+          <li>List item 2</li>
+          <li>List item 3
+            <ul>
+              <li>List item 2</li>
+              <li>List item 3</li>
+              <li>List item 4</li>
+            </ul>
+          </li>
+          <li>List item 4</li>
+        </ul>
+      </li>
+      <li>List item 3</li>
+      <li>List item 4</li>
+      <li>List item 5</li>
+    </ul>
+  </div>
+
+  <div class="story-container__title">Unordered list with sub ordered list
+  </div>
+  <div class="story-container__content">
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2
+        <ol>
+          <li>Ordered List item 2</li>
+          <li>Ordered List item 3
+            <ol>
+              <li>Ordered List item 2</li>
+              <li>Ordered List item 3</li>
+              <li>Ordered List item 4</li>
+            </ol>
+          </li>
+          <li>List item 4</li>
+        </ol>
+      </li>
+      <li>List item 3</li>
+      <li>List item 4</li>
+      <li>List item 5</li>
+    </ul>
+  </div>
+
+  <div class="story-container__title">Ordered list</div>
+  <div class="story-container__content">
+    <ol>
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+      <li>Ordered list item 4</li>
+      <li>Ordered list item 5</li>
+    </ol>
+  </div>
+
+  <div class="story-container__title">Ordered list with sub ordered list</div>
+  <div class="story-container__content">
+    <ol>
+      <li>
+        Ordered list item 1
+        <ol>
+          <li>Ordered list item 2</li>
+          <li>Ordered list item 3</li>
+        </ol>
+      </li>
+      <li>Ordered list item 2</li>
+      <li>
+        Ordered list item 3
+        <ol>
+          <li>Ordered list item 3</li>
+          <li>Ordered list item 4
+            <ol>
+              <li>Ordered list item 3</li>
+              <li>Ordered list item 4</li>
+              <li>Ordered list item 5</li>
+            </ol>
+          </li>
+          <li>Ordered list item 5</li>
+        </ol>
+      </li>
+      <li>Ordered list item 4</li>
+      <li>Ordered list item 5</li>
+    </ol>
+  </div>
+
+  <div class="story-container__title">Ordered list with sub unordered list
+  </div>
+  <div class="story-container__content">
+    <ol>
+      <li>Ordered list item 1
+        <ul>
+          <li>Unordered list item 1</li>
+          <li>Unordered list item 2</li>
+        </ul>
+      </li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3
+        <ul>
+          <li>Unordered list item 1</li>
+          <li>Unordered list item 2
+            <ul>
+              <li>Unordered list item 1</li>
+              <li>Unordered list item 2</li>
+              <li>Unordered list item 3</li>
+            </ul>
+          </li>
+          <li>Unordered list item 3</li>
+        </ul>
+      </li>
+      <li>Ordered list item 4</li>
+      <li>Ordered list item 5</li>
+    </ol>
+  </div>
+</div>

package/components/00-base/variables.scss

@@ -0,0 +1,41 @@
+//
+// CivicTheme variables.
+//
+// Variables are split into 2 files:
+// - _variables.base.scss - base variables that are used to calculate other
+//   variables' values.
+// - _variables.components.scss - variables that control the look of components.
+//
+// These are split into 2 files to allow changing base variables without the
+// need to provide component variables in custom themes (e.g., to override
+// primary color in child theme and have it propagate to components).
+//
+
+//
+// Assets directory.
+//
+// Placed outside of included variables as a super-global that might be used
+// in base overrides (like paths to locally stored fonts) before defined in
+// base defaults.
+//
+// Note that this variable's value may be overwritten by the webpack
+// configuration (via injecting through sass-loader's 'additionalData' property)
+// depending on the context of SCSS compilation in order to allow storage of
+// assets in a different location (Storybook, for example, requires a relative
+// path to the own statically-generated directory while generating assets for
+// distributions may require a full path to the site root).
+//
+$ct-assets-directory: './assets/' !default;
+
+// stylelint-disable scss/at-import-partial-extension
+// Import overrides for base variables.
+@import '../variables.base';
+
+// import CivicThemeTheme base variables.
+@import 'variables.base';
+
+// Import overrides for component variables.
+@import '../variables.components';
+
+// import CivicThemeTheme component variables.
+@import 'variables.components';