@dta-au/civictheme-twig 1.13.1

package/components/00-base/about-civictheme/about-civictheme.stories.js

@@ -0,0 +1,37 @@
+import Component from './about-civictheme.stories.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'About CivicTheme',
+  component: Component,
+  argTypes: {
+    logos: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const AboutCivicTheme = {
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      disable: true,
+    },
+  },
+  args: {
+    logos: {
+      primary: {
+        mobile: {
+          url: Constants.LOGOS.light.civictheme.mobile,
+        },
+        desktop: {
+          url: Constants.LOGOS.light.civictheme.desktop,
+        },
+      },
+    },
+  },
+};

package/components/00-base/about-civictheme/about-civictheme.stories.scss

@@ -0,0 +1,37 @@
+.story-about-civictheme {
+  // CivicTheme's own brand color.
+  background-color: #003f56;
+
+  .ct-logo {
+    .ct-logo__image--mobile {
+      max-height: ct-particle(6);
+    }
+
+    .ct-logo__image--desktop {
+      max-height: ct-particle(12);
+    }
+  }
+
+  .ct-heading {
+    margin-top: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      margin-top: 0;
+    }
+  }
+
+  .ct-item-list__item {
+    display: flex;
+    padding-left: 0;
+    align-items: center;
+
+    .ct-paragraph {
+      padding-left: ct-spacing(2);
+      margin-bottom: 0;
+    }
+
+    .ct-icon {
+      overflow: visible;
+    }
+  }
+}

package/components/00-base/about-civictheme/about-civictheme.stories.twig

@@ -0,0 +1,219 @@
+{#
+/**
+ * @file
+ * About CivicTheme story template.
+ */
+#}
+
+<div class="story-about-civictheme ct-vertical-spacing-inset--both">
+  <div class="container">
+    <div class="row">
+      <div class="col-xxs-12">
+        {% include '@molecules/logo/logo.twig' with {
+          theme: 'light',
+          logos: logos,
+          url: 'https://civictheme.io/',
+        } only %}
+      </div>
+    </div>
+  </div>
+  {% set content %}
+    {% include '@atoms/paragraph/paragraph.twig' with {
+      theme: 'dark',
+      content: 'CivicTheme is an open-source design system build for modern web development. It offers a comprehensive suite of customisable components and templates designed to streamline the creation of visually appealing and highly functional websites.',
+    } only %}
+
+    {% include '@atoms/paragraph/paragraph.twig' with {
+      theme: 'dark',
+      content: 'With a strong emphasis on accessibility compliance, CivicTheme ensures compliance with WCAG 2.2 standards and the platform\'s responsive design provides a seamless user experience across various devices and screen sizes. The rich library of pre-built components, such as buttons, forms, and navigation menus, allow developers to quickly integrate essential features into their projects, significantly reducing development time and costs.',
+    } only %}
+
+    <div class="row ct-vertical-spacing--top">
+      <div class="col-xxs-12 col-m-6">
+        {% include '@atoms/heading/heading.twig' with {
+          theme: 'dark',
+          content: 'Key benefits',
+          level: 3,
+        } only %}
+
+        {% set list_item1 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'layer',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: list_item_icon_1 ~ ' Atomic design system of 60+ components',
+            allow_html: true,
+          } only %}
+        {% endset %}
+
+        {% set list_item2 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'eye',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Compliant with WCAG 2.2 AA Standards',
+          } only %}
+        {% endset %}
+
+        {% set list_item3 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'water-drop',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Integrates with Drupal theme',
+          } only %}
+        {% endset %}
+
+        {% set list_item4 %}
+          {% include '@base/icon/icon.twig' with {
+            theme: 'dark',
+            symbol: 'open-source',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Open source and community-driven',
+          } only %}
+        {% endset %}
+
+        {% include '@base/item-list/item-list.twig' with {
+          direction: 'vertical',
+          items: [
+            list_item1,
+            list_item2,
+            list_item3,
+            list_item4,
+          ],
+        } only %}
+      </div>
+
+      <div class="col-xxs-12 col-m-6">
+        {% include '@atoms/heading/heading.twig' with {
+          theme: 'dark',
+          content: 'Key features',
+          level: 3,
+        } only %}
+
+        {% set list_item1 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'web',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Enhanced user experience',
+          } only %}
+        {% endset %}
+
+        {% set list_item2 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'mobile',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Responsive design and consistent branding',
+          } only %}
+        {% endset %}
+
+        {% set list_item3 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'layers',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Scalable and flexible for evolving needs',
+          } only %}
+        {% endset %}
+
+        {% set list_item4 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'document',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'Documentation and support',
+          } only %}
+        {% endset %}
+
+        {% include '@base/item-list/item-list.twig' with {
+          direction: 'vertical',
+          items: [
+            list_item1,
+            list_item2,
+            list_item3,
+            list_item4,
+          ],
+        } only %}
+      </div>
+    </div>
+
+    <div class="row ct-vertical-spacing--top">
+      <div class="col-xxs-12">
+        {% include '@atoms/paragraph/paragraph.twig' with {
+          theme: 'dark',
+          content: 'CivicTheme\'s focus on consistent branding and design aims to ensure that organisations can maintain a cohesive online presence, reinforcing their brand identity across all digital touchpoints.',
+        } only %}
+
+        {% include '@atoms/paragraph/paragraph.twig' with {
+          theme: 'dark',
+          content: 'Ultimately, CivicTheme\'s blend of flexibility, scalability, and cost efficiency makes it an ideal choice for organisations seeking to create professional, user-friendly websites without the need for extensive development resources.',
+        } only %}
+      </div>
+    </div>
+
+    <div class="row ct-vertical-spacing--top">
+      <div class="col-xxs-12">
+        {% include '@atoms/heading/heading.twig' with {
+          theme: 'dark',
+          content: 'Under the following conditions:',
+          level: 5,
+        } only %}
+
+        {% set list_item1 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'lock-file',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'This page must remain in Figma.',
+          } only %}
+        {% endset %}
+
+        {% set list_item2 %}
+          {% include '@base/icon/icon.twig' with {
+            symbol: 'lock-gallery',
+            size: 'large',
+          } only %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: 'dark',
+            content: 'The co-branded logo must remain in Storybook and must not be deleted.',
+          } only %}
+        {% endset %}
+
+        {% include '@base/item-list/item-list.twig' with {
+          direction: 'vertical',
+          items: [
+            list_item1,
+            list_item2,
+          ],
+        } only %}
+      </div>
+    </div>
+  {% endset %}
+  {% include '@molecules/basic-content/basic-content.twig' with {
+    theme: 'dark',
+    vertical_spacing: 'both',
+    is_contained: true,
+    content: content,
+  } only %}
+</div>

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

@@ -0,0 +1,12 @@
+//
+// Background component.
+//
+
+.ct-background {
+  @include ct-background();
+}
+
+// Generate .ct-background--[blend-mode] classes that can be added to elements.
+@include ct-generate-class-variations-from-map($ct-background-blend-modes, 'ct-background', true) using($key, $value, $index) {
+  background-blend-mode: $value;
+}

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

@@ -0,0 +1,33 @@
+import Component from './background.stories.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Base/Background',
+  component: Component,
+  argTypes: {
+    blend_mode: {
+      control: { type: 'select' },
+      options: Constants.SCSS_VARIABLES['ct-background-blend-modes'],
+    },
+    color: {
+      control: { type: 'color' },
+    },
+    url: {
+      control: { type: 'select' },
+      options: Constants.BACKGROUNDS,
+    },
+  },
+};
+
+export default meta;
+
+export const Background = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    url: Constants.BACKGROUNDS[Object.keys(Constants.BACKGROUNDS)[0]],
+    color: '#003a4f',
+    blend_mode: Constants.SCSS_VARIABLES['ct-background-blend-modes'][0],
+  },
+};

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

@@ -0,0 +1,16 @@
+//
+// Background component stories.
+//
+.story-background-wrapper {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .ct-background {
+    height: 100%;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,6 @@
+<div class="story-background-wrapper">
+  <div
+    class="ct-background ct-background--{{ blend_mode }}"
+    style="background-image: url('{{ url }}'); background-color: {{ color }}"
+  ></div>
+</div>

package/components/00-base/background/background.utils.js

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Background component utilities.
+ */
+
+import fs from 'fs';
+import pathUtil from 'path';
+
+const dir = '../../../assets/backgrounds';
+const basePath = pathUtil.resolve(import.meta.dirname, dir);
+const paths = fs.readdirSync(basePath);
+
+function getBackgrounds() {
+  const urls = {};
+  paths.forEach((path) => {
+    urls[path] = `${dir.replace('../../../', '')}/${path}`;
+  });
+  return urls;
+}
+
+export default {
+  getBackgrounds,
+};