Adds common components

src/components/atoms/blockquote/blockquote.config.yml

@@ -0,0 +1,11 @@
+title: "Blockquote"
+status: "ready"
+context:
+  quote: "So how do we go about creating a digital product that works both for an organisation and for its users?"
+
+variants:
+  - name: Attributed
+    context:
+      name: "Leigh Dodds"
+      quote: "“I thoroughly enjoyed working with the team from Kind on the open standards for data guidebook. They quickly understood both our needs and the broader goals of the project.”"
+      role: "Director of Advisory at The ODI"

src/components/atoms/blockquote/blockquote.twig

@@ -0,0 +1,31 @@
+{#
+ # Blockquote Molecule
+ #
+ # @param name {string} Optional name of the quote author.
+ # @param quote {string} Required quote content.
+ # @param role {string} Optional authors job title.
+ #}
+
+{# Params #}
+{% set name = name | default(null) %}
+{% set quote = quote | default() %}
+{% set role = role | default(null) %}
+
+{# Internal vars #}
+{% set el = (name | default(false)) ? 'figure' : 'div' %}
+
+{# Output #}
+<{{el}} class="my-double">
+
+  {% if name %}
+    <figcaption class="mt-4">
+      <span class="font-bold">{{ name }}</span>{% if role %},&nbsp;{{ role }}{% endif %}
+    </figcaption>
+  {% endif %}
+
+  <blockquote>
+    <p class="text-lg md:text-xl lg:text-2xl">
+      &ldquo;{{ quote }}&rdquo;
+    </p>
+  </blockquote>
+</{{el}}>

src/components/atoms/checkbox/_checkbox.postcss

@@ -0,0 +1,65 @@
+/* ==========================================================================
+    CHECKBOXES
+   ========================================================================== */
+
+.checkbox {
+
+  @apply flex flex-wrap items-center -ml-4;
+
+  /* Hide the real checkbox */
+  & input {
+    @apply absolute opacity-0;
+  }
+
+  /* Create a faux checkbox */
+  & .checkbox__label {
+    @apply
+      inline-flex
+      items-center
+      p-4
+    ;
+
+    &::before {
+      @apply
+        border
+        bg-white
+        flex
+        items-center
+        justify-center
+        mr-4
+        h-12 w-12
+      ;
+
+      content: '';
+    }
+  }
+
+  /* Make disabled controls look like they are disabled. */
+  & input:disabled + .checkbox__label::before {
+    @apply bg-grey-light;
+  }
+
+  /* Update the faux checkbox styles on checked or focussed states */
+  & input:checked + .checkbox__label::before,
+  & input:focus + .checkbox__label::before {
+    @apply bg-blue border-black;
+  }
+
+  & input:checked + .checkbox__label::before {
+    content: '✓';
+  }
+
+  /* Apply disabled checkbox styles to the checkbox label */
+  & input:disabled + .checkbox__label {
+    @apply cursor-not-allowed text-grey;
+  }
+
+  /* Update faux checkbox styles on user action */
+  & input:not(:disabled) + .checkbox__label:hover,
+  & input:not(:disabled) + .checkbox__label:focus,
+  & input:not(:disabled) + .checkbox__label:focus:active {
+    &::before {
+      @apply border-blue;
+    }
+  }
+}

src/components/atoms/checkbox/checkbox.config.yml

@@ -0,0 +1,23 @@
+title: "Checkbox"
+status: prototype
+context:
+  label: Checkbox
+
+variants:
+  -
+    name: checked
+    context:
+      checked: true
+      fieldname: checkbox-checked
+      label: Checked checkbox
+  -
+    name: disabled
+    context:
+      label: Disabled checkbox
+      disabled: true
+  -
+    name: disabled-checked
+    context:
+      label: Checked and disabled checkbox
+      disabled: true
+      checked: true

src/components/atoms/checkbox/checkbox.twig

@@ -0,0 +1,10 @@
+
+<label class="checkbox">
+  <input type="checkbox"
+    {% if name %} name="{{ name }}"{% endif %}
+    {% if checked %} checked{% endif %}
+    {% if disabled %} disabled{% endif %}
+    {% if required %} required{% endif %}
+  >
+  <div class="checkbox__label">{{ label }}</div>
+</label>

src/components/atoms/fonts/_fonts.postcss

@@ -0,0 +1,35 @@
+/* ==========================================================================
+    WEBFONTS
+   ========================================================================== */
+
+/*
+@font-face {
+  font-display: swap;
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  src:
+    url("../fonts/Inter-Italic.woff2?v=3.11") format("woff2"),
+    url("../fonts/Inter-Italic.woff?v=3.11") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("../fonts/Inter-Regular.woff2?v=3.11") format("woff2"),
+    url("../fonts/Inter-Regular.woff?v=3.11") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url("../fonts/Inter-Bold.woff2?v=3.11") format("woff2"),
+    url("../fonts/Inter-Bold.woff?v=3.11") format("woff");
+}
+*/

src/components/atoms/fonts/fonts.config.yml

@@ -0,0 +1,12 @@
+title: Fonts
+status: wip
+
+context:
+  text: '<p>Body copy is set in [some font], a humanist sans-serif with great readability at typical sizes.
+        At purto convenire imperdiet mei, nobis omittantur duo ei. Eu platonem electram pri. Integre aliquando te qui, pro te liber referrentur, nostro malorum denique cu duo. Cu pri copiosae referrentur, vis in dico quidam melius. Utinam putant aeterno eam ad. Cu purto unum impetus eam, assum utinam aliquam ut his.</p>'
+
+variants:
+  -
+    name: Level 1 heading
+    context:
+      text: '<h1>Headings use something bolder</h1>'

src/components/atoms/fonts/fonts.twig

@@ -0,0 +1,15 @@
+{#
+ # Fonts atom
+ #
+ # @param {string} text - text
+ #}
+
+{%- set class = class | default('') -%}
+
+{% if class %}
+<div {{ attr({ class: class }) }}>
+  {{ text | raw }}
+</div>
+{% else %}
+  {{ text | raw }}
+{% endif %}

src/components/atoms/heading/README.md

@@ -0,0 +1,7 @@
+## Heading - Data API
+```
+@optional class - string - Additional classes
+@optional el - string - The element you want this heading item to be rendered as, defaults to h2
+@optional href - string - The href for this heading item
+@required text - string - The text for this heading item
+```

src/components/atoms/heading/_heading.postcss

@@ -0,0 +1,35 @@
+/* ==========================================================================
+    HEADINGS
+   ========================================================================== */
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  & > a {
+    @apply font-normal;
+
+    color: inherit;
+  }
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  /* Turn on kerning, common ligatures, contextual alternates,
+  titling caps and swashes for larger headings. Because sexy type. */
+  font-feature-settings: "calt", "clig", "kern", "liga", "swsh", "titl";
+}

src/components/atoms/heading/heading.config.yml

@@ -0,0 +1,53 @@
+title: Headings
+status: ready
+
+context:
+  el: h1
+  text: heading ipsum dolor sit amet
+
+variants:
+  -
+    name: Level 2 heading
+    context:
+      el: h2
+  -
+    name: Linked level 2 heading
+    context:
+      el: h2
+      href: '#'
+  -
+    name: Level 3 heading
+    context:
+      el: h3
+  -
+    name: Linked level 3 heading
+    context:
+      el: h3
+      href: '#'
+  -
+    name: Level 4 heading
+    context:
+      el: h4
+  -
+    name: Linked level 4 heading
+    context:
+      el: h4
+      href: '#'
+  -
+    name: Level 5 heading
+    context:
+      el: h5
+  -
+    name: Linked level 5 heading
+    context:
+      el: h5
+      href: '#'
+  -
+    name: Level 6 heading
+    context:
+      el: h6
+  -
+    name: Linked level 6 heading
+    context:
+      el: h6
+      href: '#'

src/components/atoms/heading/heading.twig

@@ -0,0 +1,22 @@
+{#
+ # Heading atom
+ #
+ # @param text {string} - Required heading text.
+ #}
+
+{%- set el = el | default('h2') -%}
+{%- set class = class | default('') -%}
+{%- set text = text | default('') -%}
+{%- set attrs = attrs | default({}) -%}
+{%- set href = href | default() -%}
+{%- if href -%}
+  {%- set attrs = attrs | merge({ href: href }) -%}
+{%- endif -%}
+
+<{{ el }}{% if class %} class="{{ class }}"{% endif %}>
+{% if href %}
+  <a {{ attr(attrs) }} >{{ text }}</a>
+{% else %}
+  {{ text }}
+{% endif %}
+</{{ el }}>

src/components/atoms/input/_input.postcss

@@ -0,0 +1,28 @@
+/* Set / reset some base form styles at the highest level */
+input {
+  color: currentColor;
+  font: inherit;
+
+  &:disabled {
+    @apply
+      cursor-not-allowed;
+  }
+
+  &::placeholder {
+    @apply text-text-grey;
+
+    opacity: 0.75;
+  }
+}
+
+/* Make texty-type inputs look like text inputs */
+.input {
+  @apply
+    p-2
+    transition;
+
+  &:focus {
+    /* Match Webkit's default styles in Firefox */
+    outline: 2px solid rgb(0, 94, 205);
+  }
+}