IATI · tillywoodfield · Nov 6, 2024 · Oct 1, 2024 · Oct 22, 2024 · Oct 8, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,5 +1,5 @@
 name: CI
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build:

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,23 +1,16 @@
 import type { StorybookConfig } from "@storybook/web-components-vite";
-import { NodePackageImporter } from "sass";
 
 const config: StorybookConfig = {
   framework: "@storybook/web-components-vite",
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: ["@storybook/addon-essentials"],
+  staticDirs: ["../static"],
   docs: {
     autodocs: true,
   },
   async viteFinal(config) {
     const { mergeConfig } = await import("vite");
     return mergeConfig(config, {
-      css: {
-        preprocessorOptions: {
-          scss: {
-            pkgImporter: new NodePackageImporter(),
-          },
-        },
-      },
       optimizeDeps: {
         exclude: [
           "@storybook/blocks",

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,15 +1,31 @@
 import type { Preview } from "@storybook/web-components";
 
-import "../src/scss/iati.scss";
+import "../src/js/main.js";
+import "../src/scss/main.scss";
 import DocsTemplate from "./DocsTemplate.mdx";
 
 const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        order: ["Get Started", "Brand", "Core", "Components", "Layout"],
+        order: [
+          "Get Started",
+          "Installation",
+          "Usage",
+          "Contributing",
+          "Brand",
+          "Core",
+          "Components",
+          "Layout",
+        ],
       },
     },
+    backgrounds: {
+      values: [
+        { name: "light", value: "#fff" },
+        { name: "dark", value: "#155366" },
+      ],
+    },
     docs: {
       page: DocsTemplate,
       source: {

diff --git a/README.md b/README.md
@@ -4,50 +4,11 @@
 
 The IATI Design System is a set of reusable styles and components which should be used in IATI web products, along with guidance on how to use them.
 
-## How do I use the IATI Design System?
+## Using the IATI Design System
 
-### CDN (Recommended)
+Please see the [Storybook site](https://iati.github.io/design-system/) for instructions.
 
-The recommended way to use the design system in an IATI product is by including the CSS from the CDN, using the url below, replacing `<VERSION>` with the version you would like to use:
-
-```code
-https://cdn.jsdelivr.net/npm/iati-design-system@<VERSION>/dist/css/iati.min.css
-```
-
-This project is versioned using [Semantic Versioning](https://semver.org/). Versions can be specified as a major, minor, or patch version e.g. `1`, `1.2`, or `1.2.3`. The latest version is shown on the [GitHub releases page](https://github.com/IATI/design-system/releases). We recommend fixing to a specific patch version so that upgrades can be checked explicitly before deployment, but as a minimum you should fix to a major version to prevent unexpected breaking changes.
-
-To include the CSS in a HTML project, add the following code inside the `<head>` of your HTML pages:
-
-```html
-<link
-  href="https://cdn.jsdelivr.net/npm/iati-design-system@<VERSION>/dist/css/iati.min.css"
-  rel="stylesheet"
-/>
-```
-
-Once this link is included, core styles will be applied, and all component and layout CSS classes will be available to apply to HTML elements, for example the `.iati-button` class:
-
-```html
-<button class="iati-button">Button</button>
-```
-
-### NPM (Optional)
-
-It is also possible to include the design system in a [Sass](https://sass-lang.com/) project.
-
-First install with npm:
-
-```code
-npm install iati-design-system
-```
-
-Then import the package in your `.scss` file. The [Node.js Package Importer](https://sass-lang.com/documentation/at-rules/use/#node-js-package-importer) is required to use this syntax.
-
-```css
-@use "pkg:iati-design-system";
-```
-
-## How do I contribute to the IATI Design System?
+## Contributing to the IATI Design System
 
 ### Prerequisites
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -10,6 +10,7 @@ export default [
     languageOptions: {
       globals: {
         ...globals.node,
+        ...globals.browser,
       },
     },
   },