@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,142 @@
+import Component from './colors.stories.twig';
+import Constants from '../../../dist/constants.json';
+
+const themes = {
+  light: 'Light',
+  dark: 'Dark',
+};
+
+const sectionMap = {
+  'Brand colors': {
+    Standard: [
+      'brand1',
+      'brand2',
+      'brand3',
+    ],
+  },
+  'Palette colors': {
+    Typography: [
+      'heading',
+      'body',
+    ],
+    Backgrounds: [
+      'background-light',
+      'background',
+      'background-dark',
+    ],
+    Borders: [
+      'border-light',
+      'border',
+      'border-dark',
+    ],
+    Interaction: [
+      'interaction-text',
+      'interaction-background',
+      'interaction-hover-text',
+      'interaction-hover-background',
+      'interaction-focus',
+    ],
+    Highlight: [
+      'highlight',
+    ],
+    Status: [
+      'information',
+      'warning',
+      'error',
+      'success',
+    ],
+    Custom: [],
+  },
+};
+
+function getColorMap(name) {
+  const map = {};
+
+  map.default = Constants.SCSS_VARIABLES[`ct-${name}-default`] || {};
+  map.custom = Constants.SCSS_VARIABLES[`ct-${name}`];
+
+  // Normalise colors as they may not be provided.
+  if (!Object.prototype.hasOwnProperty.call(map.default, 'light') || !Object.prototype.hasOwnProperty.call(map.default, 'dark')) {
+    map.default = {
+      light: {},
+      dark: {},
+    };
+  }
+
+  if (!Object.prototype.hasOwnProperty.call(map.custom, 'light') || !Object.prototype.hasOwnProperty.call(map.custom, 'dark')) {
+    map.custom = {
+      light: {},
+      dark: {},
+    };
+  }
+
+  for (const theme in themes) {
+    map.custom[theme] = Object.keys(map.custom[theme]).filter((n) => Object.keys(map.default[theme]).indexOf(n) === -1)
+      .reduce((obj2, key) => {
+        if (key in map.custom[theme]) {
+          obj2[key] = map.custom[theme][key];
+        }
+        return obj2;
+      }, {});
+  }
+
+  return map;
+}
+
+const brandMap = getColorMap('colors-brands');
+const paletteMap = getColorMap('colors');
+
+const colorMap = {
+  'Brand colors': brandMap,
+  'Palette colors': paletteMap,
+};
+
+const sections = {};
+
+for (const theme in themes) {
+  for (const sectionTitle in sectionMap) {
+    for (const sectionName in sectionMap[sectionTitle]) {
+      sections[theme] = sections[theme] || {};
+      sections[theme][sectionTitle] = sections[theme][sectionTitle] || {};
+
+      if (sectionName === 'Custom') {
+        if (Object.keys(colorMap[sectionTitle].custom[theme]).length > 0) {
+          sections[theme][sectionTitle][sectionName] = sections[theme][sectionTitle][sectionName] || {};
+          sections[theme][sectionTitle][sectionName] = colorMap[sectionTitle].custom[theme];
+        }
+      } else {
+        const colorNames = sectionMap[sectionTitle][sectionName];
+        for (let i = 0; i < colorNames.length; i++) {
+          sections[theme][sectionTitle][sectionName] = sections[theme][sectionTitle][sectionName] || {};
+          sections[theme][sectionTitle][sectionName][colorNames[i]] = colorMap[sectionTitle].default[theme][colorNames[i]];
+        }
+      }
+    }
+  }
+}
+
+const meta = {
+  title: 'Base/Colors',
+  component: Component,
+  argTypes: {
+    sections: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Colors = {
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      disable: true,
+    },
+  },
+  args: {
+    sections,
+  },
+};

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

@@ -0,0 +1,78 @@
+//
+// Color stories.
+//
+
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:color';
+
+//
+// Mixin to create a color box with specific dimensions.
+//
+@mixin ct-stories-color-box($key, $value, $width:  ct-particle(12), $height:  ct-particle(12)) {
+  margin: 0 ct-spacing(2) ct-spacing(2) 0;
+  position: relative;
+  width: $width;
+
+  .story-color-element {
+    // @code
+    // Uncomment below for more prominent borders.
+    // $border-color: desaturate(color.invert($value, 100%), 100%);
+    // @endcode
+    $border-color: color.scale($value, $lightness: -40%);
+
+    display: block;
+    height: $height;
+    box-shadow: inset 0 0 0 ct-particle(0.125) $border-color;
+    position: relative;
+    background-color: $value;
+  }
+
+  .story-color-text {
+    display: block;
+
+    @include ct-typography('label-extra-small');
+
+    & {
+      text-align: center;
+      margin: ct-spacing() 0;
+    }
+
+    &::after {
+      $content: string.to-upper-case(#{$value});
+
+      content: '#{$content}';
+      font-family: 'Courier New', monospace, sans-serif;
+      text-align: center;
+      display: block;
+      position: absolute;
+      line-height: 150%;
+      width: 100%;
+    }
+  }
+}
+
+.story-colors-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+
+  $brand-colors: _ct-colors-brands();
+  $colors: _ct-colors();
+
+  @include ct-generate-class-variations-from-map(map-get($brand-colors, 'light'), 'story-color-light') using($key, $value, $index) {
+    @include ct-stories-color-box($key, $value, ct-particle(12), ct-particle(7.5));
+  }
+
+  @include ct-generate-class-variations-from-map(map-get($brand-colors, 'dark'), 'story-color-dark') using($key, $value, $index) {
+    @include ct-stories-color-box($key, $value, ct-particle(12), ct-particle(7.5));
+  }
+
+  @include ct-generate-class-variations-from-map(map-get($colors, 'light'), 'story-color-light') using($key, $value, $index) {
+    @include ct-stories-color-box($key, $value, ct-particle(12), ct-particle(7.5));
+  }
+
+  @include ct-generate-class-variations-from-map(map-get($colors, 'dark'), 'story-color-dark') using($key, $value, $index) {
+    @include ct-stories-color-box($key, $value, ct-particle(12), ct-particle(7.5));
+  }
+}

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

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Colors story template.
+ */
+#}
+
+<div class="story-container story-container--columns story-container--columns--2">
+  {% for theme, theme_section in sections %}
+    <div class="story-container__column story-container__column--{{ theme }}">
+      {% for section_title, section_colors in theme_section %}
+
+        <div class="story-container__title">{{ section_title }}</div>
+
+        {% for section_name, colors in section_colors %}
+          <div class="story-container">
+            {% if section_name != 'Standard' %}
+              <div class="story-container__subtitle">{{ section_name }}</div>
+            {% endif %}
+
+            <div class="story-container__content story-colors-wrapper">
+              {% for color_name, color in colors %}
+                <div class="story-color-{{ theme }}--{{ color_name }}">
+                  <span class="story-color-element" title="{{ color_name }}"></span><span class="story-color-text" title="{{ color_name }}">{{ color_name|capitalize|replace({'-': ' '}) }}</span>
+                </div>
+              {% endfor %}
+            </div>
+
+          </div>
+        {% endfor %}
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>
+
+{% if color_map_link is not empty %}
+  <div style="text-align: center;">
+    <a href="{{ color_map_link }}" target="_blank" class="ct-theme-light ct-button ct-button--secondary ct-button--small">
+      Download color map CSV
+    </a>
+  </div>
+{% endif %}

package/components/00-base/datetime/__snapshots__/datetime.test.js.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datetime Component does not render when start time is empty 1`] = `<div />`;
+
+exports[`Datetime Component renders with custom attributes and classes 1`] = `
+<div>
+    
+  <span
+    class="ct-datetime custom-class"
+    data-test="true"
+  >
+    
+    
+    <time
+      class="ct-timestamp__start"
+      datetime="2023-06-15T08:00:00Z"
+    >
+      2023-06-15T08:00
+    </time>
+    
+      
+  </span>
+  
+
+</div>
+`;
+
+exports[`Datetime Component renders with start and end time 1`] = `
+<div>
+    
+  <span
+    class="ct-datetime "
+  >
+    
+    
+    <time
+      class="ct-timestamp__start"
+      datetime="2023-06-15T08:00:00Z"
+    >
+      2023-06-15T08:00
+    </time>
+    
+          —
+      
+    <time
+      class="ct-timestamp__end"
+      datetime="2023-06-15T17:00:00Z"
+    >
+      2023-06-15T17:00
+    </time>
+    
+      
+  </span>
+  
+
+</div>
+`;
+
+exports[`Datetime Component renders with start time only 1`] = `
+<div>
+    
+  <span
+    class="ct-datetime "
+  >
+    
+    
+    <time
+      class="ct-timestamp__start"
+      datetime="2023-06-15T08:00:00Z"
+    >
+      2023-06-15T08:00
+    </time>
+    
+      
+  </span>
+  
+
+</div>
+`;
+
+exports[`Datetime Component strips HTML tags from attribute values 1`] = `
+<div>
+    
+  <span
+    class="ct-datetime "
+  >
+    
+    
+    <time
+      class="ct-timestamp__start"
+      datetime="2023-06-15T08:00:00Z"
+    >
+      <b>
+        2023-06-15T08:00
+      </b>
+    </time>
+    
+          —
+      
+    <time
+      class="ct-timestamp__end"
+      datetime="2023-06-15T17:00:00Z"
+    >
+      <b>
+        2023-06-15T17:00
+      </b>
+    </time>
+    
+      
+  </span>
+  
+
+</div>
+`;

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

@@ -0,0 +1,47 @@
+/**
+ * CivicTheme DateTime component stories.
+ */
+
+import Component from './datetime.twig';
+
+const meta = {
+  title: 'Base/Utilities/Datetime',
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    start: {
+      control: { type: 'text' },
+    },
+    end: {
+      control: { type: 'text' },
+    },
+    start_iso: {
+      control: { type: 'date' },
+    },
+    end_iso: {
+      control: { type: 'date' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    start: '',
+    end: '',
+    start_iso: '',
+    end_iso: '',
+  },
+};
+
+export default meta;
+
+export const Datetime = {
+  args: {
+    start: '20 Jan 2023 11:00',
+    end: '21 Jan 2023 15:00',
+    start_iso: '2023-01-20T00:00:00.000Z',
+    end_iso: '2023-01-21T04:00:00.000Z',
+  },
+};

package/components/00-base/datetime/datetime.test.js

@@ -0,0 +1,75 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/00-base/datetime/datetime.twig';
+
+describe('Datetime Component', () => {
+  test('does not render when start time is empty', async () => {
+    const c = await dom(template, {
+      start: '',
+    });
+
+    expect(c.querySelectorAll('.ct-datetime')).toHaveLength(0);
+  });
+
+  test('renders with start time only', async () => {
+    const c = await dom(template, {
+      start: '2023-06-15T08:00',
+      start_iso: '2023-06-15T08:00:00Z',
+    });
+
+    expect(c.querySelectorAll('.ct-datetime')).toHaveLength(1);
+    expect(c.querySelector('.ct-timestamp__start').getAttribute('datetime')).toEqual('2023-06-15T08:00:00Z');
+    expect(c.querySelector('.ct-timestamp__start').textContent.trim()).toEqual('2023-06-15T08:00');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with start and end time', async () => {
+    const c = await dom(template, {
+      start: '2023-06-15T08:00',
+      start_iso: '2023-06-15T08:00:00Z',
+      end: '2023-06-15T17:00',
+      end_iso: '2023-06-15T17:00:00Z',
+    });
+
+    expect(c.querySelectorAll('.ct-datetime')).toHaveLength(1);
+    expect(c.querySelector('.ct-timestamp__start').getAttribute('datetime')).toEqual('2023-06-15T08:00:00Z');
+    expect(c.querySelector('.ct-timestamp__start').textContent.trim()).toEqual('2023-06-15T08:00');
+    expect(c.querySelector('.ct-timestamp__end').getAttribute('datetime')).toEqual('2023-06-15T17:00:00Z');
+    expect(c.querySelector('.ct-timestamp__end').textContent.trim()).toEqual('2023-06-15T17:00');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with custom attributes and classes', async () => {
+    const c = await dom(template, {
+      start: '2023-06-15T08:00',
+      start_iso: '2023-06-15T08:00:00Z',
+      modifier_class: 'custom-class',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+    });
+
+    expect(c.querySelectorAll('.ct-datetime.custom-class')).toHaveLength(1);
+    expect(c.querySelector('.ct-datetime').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-timestamp__start').getAttribute('datetime')).toEqual('2023-06-15T08:00:00Z');
+    expect(c.querySelector('.ct-timestamp__start').textContent.trim()).toEqual('2023-06-15T08:00');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('strips HTML tags from attribute values', async () => {
+    const c = await dom(template, {
+      start: '<b>2023-06-15T08:00</b>',
+      start_iso: '<i>2023-06-15T08:00:00Z</i>',
+      end: '<b>2023-06-15T17:00</b>',
+      end_iso: '<i>2023-06-15T17:00:00Z</i>',
+    });
+
+    expect(c.querySelector('.ct-timestamp__start').getAttribute('datetime')).toEqual('2023-06-15T08:00:00Z');
+    expect(c.querySelector('.ct-timestamp__start').innerHTML.trim()).toEqual('<b>2023-06-15T08:00</b>');
+    expect(c.querySelector('.ct-timestamp__end').getAttribute('datetime')).toEqual('2023-06-15T17:00:00Z');
+    expect(c.querySelector('.ct-timestamp__end').innerHTML.trim()).toEqual('<b>2023-06-15T17:00</b>');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/00-base/datetime/datetime.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * CivicTheme DateTime component.
+ *
+ * Props:
+ * - start: [string] Formatted start time.
+ * - start_iso: [string,null] Start time in ISO format.
+ * - end: [string,null] Formatted end time.
+ * - end_iso: [string,null] End time in ISO format.
+ * - modifier_class: [string] Additional classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% if start is not empty %}
+  <span class="ct-datetime {{ modifier_class|default('') }}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    <time class="ct-timestamp__start" datetime="{{ start_iso|default(start)|striptags }}">{{ start }}</time>
+    {% if end is not empty %}
+      &mdash;
+      <time class="ct-timestamp__end" datetime="{{ end_iso|default(end)|striptags }}">{{ end }}</time>
+    {% endif %}
+  </span>
+{% endif %}

package/components/00-base/debug/_index.scss

@@ -0,0 +1,24 @@
+//
+// Debug helpers.
+//
+
+.ct-block-debug {
+  @include ct-block-debug();
+}
+
+.ct-breakpoint-debug {
+  @each $bp, $value in $ct-breakpoints {
+    &::before {
+      @include ct-breakpoint($bp) {
+        content: '#{$bp}: >=#{$value}';
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: rgba(purple, 0.75);
+        display: block;
+        padding: 0.25em 0.5em;
+        z-index: 1000;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import Component from './elevation.stories.twig';
+
+const meta = {
+  title: 'Base/Elevation',
+  component: Component,
+};
+
+export default meta;
+
+export const Elevation = {
+  parameters: {
+    layout: 'centered',
+  },
+};

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

@@ -0,0 +1,21 @@
+//
+// Elevation stories.
+//
+
+@use 'sass:string';
+
+.story-elevation-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+
+  @include ct-generate-class-variations-from-map($ct-elevations, 'story-elevation') using($key, $value, $index) {
+    width: ct-particle(20);
+    height: ct-particle(20);
+    margin: ct-spacing(6) ct-spacing(10) ct-particle(12) 0;
+    border-radius: ct-spacing(0.5);
+    position: relative;
+    background-color: white;
+
+    @include ct-elevation($key);
+  }
+}

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

@@ -0,0 +1,8 @@
+<div class="story-elevation-wrapper">
+  {% for i in 1..4 %}
+    <div class="story-container">
+      <div class="story-container__title">Elevation {{ i }}</div>
+      <div class="story-container__content story-elevation--{{ i }}"></div>
+    </div>
+  {% endfor %}
+</div>

package/components/00-base/flex/_index.scss

@@ -0,0 +1,37 @@
+//
+// Flex utilities.
+//
+
+.ct-flex-justify-content-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.ct-flex-justify-content-center {
+  display: flex;
+  justify-content: center;
+}
+
+.ct-flex-justify-content-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ct-flex-row-align-middle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+}
+
+.ct-flex-align-self-start {
+  align-self: flex-start;
+}
+
+.ct-flex-align-self-center {
+  align-self: center;
+}
+
+.ct-flex-align-self-end {
+  align-self: flex-end;
+}