Merge pull request #22 from IATI/documentation

Refactor documentation
IATI · Nov 12, 2024 · 1bd9231 · 1bd9231
2 parents 4af2f9e + d5b5f99
commit 1bd9231
Show file tree

Hide file tree

Showing 21 changed files with 76 additions and 135 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,7 +4,6 @@ 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,
   },

diff --git a/src/logos.mdx b/src/logos.mdx
@@ -17,15 +17,15 @@ import favicon32Url from "./assets/favicon/favicon-32x32.png";
 
 ## Logo White
 
-<img src={logoWhiteUrl} style={{ backgroundColor: "#ddd" }} />
+<img src={logoWhiteUrl} style={{ backgroundColor: "#155366" }} />
 
 ## Marque White
 
-<img src={marqueWhiteUrl} style={{ backgroundColor: "#ddd" }} />
+<img src={marqueWhiteUrl} style={{ backgroundColor: "#155366" }} />
 
 ## Marque White Animated
 
-<img src={marqueWhiteAnimatedUrl} style={{ backgroundColor: "#ddd" }} />
+<img src={marqueWhiteAnimatedUrl} style={{ backgroundColor: "#155366" }} />
 
 ## Favicon 16 x 16
 

diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
@@ -8,10 +8,9 @@
 @forward "icon/icon";
 @forward "search-bar/search-bar";
 @forward "table/table";
-@forward "tool-nav/tool-nav";
 @forward "menu-toggle/menu-toggle";
 @forward "message/message";
 @forward "mobile-nav/mobile-nav";
 @forward "newsletter-form/newsletter-form";
-@forward "title-bar/title-bar";
-@forward "footer-block/footer-block";
+@forward "header/header";
+@forward "footer/footer";
diff --git a/src/scss/components/brand-background/_brand-background.scss b/src/scss/components/brand-background/_brand-background.scss
@@ -3,7 +3,7 @@
 
 .iati-brand-background {
   $var-background-image: --background-image;
-  #{$var-background-image}: url("/images/marque-white.svg");
+  #{$var-background-image}: url("/src/assets/svg/marque-white.svg");
 
   background-color: $color-teal-90;
   display: grid;

diff --git a/src/scss/components/brand-background/brand-background.mdx b/src/scss/components/brand-background/brand-background.mdx
diff --git a/src/scss/layout/footer/_footer.scss → src/scss/components/footer/_footer.scss b/src/scss/layout/footer/_footer.scss → src/scss/components/footer/_footer.scss
@@ -1,3 +1,5 @@
+@forward "footer-block/footer-block";
+
 @use "../../tokens/color" as *;
 @use "../../tokens/font" as *;
 @use "../../tokens/spacing" as *;

diff --git a/...omponents/footer-block/_footer-block.scss → ...ts/footer/footer-block/_footer-block.scss b/...omponents/footer-block/_footer-block.scss → ...ts/footer/footer-block/_footer-block.scss
@@ -1,7 +1,7 @@
-@use "../../tokens/screens" as *;
-@use "../../tokens/font" as *;
-@use "../../tokens/color" as *;
-@use "../../base/mixins";
+@use "../../../tokens/screens" as *;
+@use "../../../tokens/font" as *;
+@use "../../../tokens/color" as *;
+@use "../../../base/mixins";
 
 .iati-footer-block {
   color: #fff;

diff --git a/...ents/footer-block/footer-block.stories.ts → ...oter/footer-block/footer-block.stories.ts b/...ents/footer-block/footer-block.stories.ts → ...oter/footer-block/footer-block.stories.ts
diff --git a/src/scss/layout/footer/footer.stories.ts → src/scss/components/footer/footer.stories.ts b/src/scss/layout/footer/footer.stories.ts → src/scss/components/footer/footer.stories.ts
@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
+import { Linkedin, Twitter, Youtube } from "../../components/icon/icon.stories";
+import { Default as NewsletterForm } from "../../components/newsletter-form/newsletter-form.stories";
 import {
   AdditionInfo as AdditionalInfoFooterBlock,
   UsefulLinks as UsefulLinksFooterBlock,
-} from "../../components/footer-block/footer-block.stories";
-import { Linkedin, Twitter, Youtube } from "../../components/icon/icon.stories";
-import { Default as NewsletterForm } from "../../components/newsletter-form/newsletter-form.stories";
+} from "./footer-block/footer-block.stories";
 
 const legalNavItems = [
   html`<a href="#">Privacy</a>`,
@@ -16,7 +16,7 @@ const legalNavItems = [
 ];
 
 const meta: Meta = {
-  title: "Layout/Footer",
+  title: "Components/Footer",
   parameters: {
     layout: "fullscreen",
   },

diff --git a/src/scss/layout/header/_header.scss → src/scss/components/header/_header.scss b/src/scss/layout/header/_header.scss → src/scss/components/header/_header.scss
@@ -1,3 +1,6 @@
+@forward "title-bar/title-bar";
+@forward "tool-nav/tool-nav";
+
 @use "../../tokens/color" as *;
 @use "../../tokens/screens" as *;
 @use "../../tokens/spacing" as *;

diff --git a/src/scss/layout/header/header.stories.ts → src/scss/components/header/header.stories.ts b/src/scss/layout/header/header.stories.ts → src/scss/components/header/header.stories.ts
@@ -6,11 +6,11 @@ import logoColourUrl from "../../../assets/svg/logo-colour.svg";
 import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
 import { Open as MenuToggle } from "../../components/menu-toggle/menu-toggle.stories";
 import { MobileNav } from "../../components/mobile-nav/mobile-nav.stories";
-import { Default as TitleBar } from "../../components/title-bar/title-bar.stories";
-import { ToolNav } from "../../components/tool-nav/tool-nav.stories";
+import { Default as TitleBar } from "./title-bar/title-bar.stories";
+import { ToolNav } from "./tool-nav/tool-nav.stories";
 
 const meta: Meta = {
-  title: "Layout/Header",
+  title: "Components/Header",
   parameters: {
     layout: "fullscreen",
   },

diff --git a/...scss/components/title-bar/_title-bar.scss → ...mponents/header/title-bar/_title-bar.scss b/...scss/components/title-bar/_title-bar.scss → ...mponents/header/title-bar/_title-bar.scss
@@ -1,7 +1,7 @@
-@use "../../tokens/color" as *;
-@use "../../tokens/font" as *;
-@use "../../tokens/spacing" as *;
-@use "../../tokens/screens" as *;
+@use "../../../tokens/color" as *;
+@use "../../../tokens/font" as *;
+@use "../../../tokens/spacing" as *;
+@use "../../../tokens/screens" as *;
 
 .iati-header-title {
   display: flex;

diff --git a/...components/title-bar/title-bar.stories.ts → ...nts/header/title-bar/title-bar.stories.ts b/...components/title-bar/title-bar.stories.ts → ...nts/header/title-bar/title-bar.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 const meta: Meta = {
-  title: "Components/Title Bar",
+  title: "Components/Header/Title Bar",
   parameters: {
     backgrounds: {
       default: "dark",
@@ -17,7 +17,7 @@ export const Default: Story = {
   render: () => html`
     <div class="iati-header-title">
       <p class="iati-header-title__eyebrow">IATI Tools</p>
-      <p class="iati-header-title__heading">Country Development Finance Data</p>
+      <p class="iati-header-title__heading">Tool Name</p>
     </div>
   `,
 };
diff --git a/src/scss/components/tool-nav/_tool-nav.scss → ...components/header/tool-nav/_tool-nav.scss b/src/scss/components/tool-nav/_tool-nav.scss → ...components/header/tool-nav/_tool-nav.scss
@@ -1,6 +1,6 @@
-@use "../../tokens/color" as *;
-@use "../../tokens/font" as *;
-@use "../../tokens/spacing" as *;
+@use "../../../tokens/color" as *;
+@use "../../../tokens/font" as *;
+@use "../../../tokens/spacing" as *;
 
 .iati-tool-nav {
   list-style-type: none;

diff --git a/...s/components/tool-nav/tool-nav.stories.ts → ...nents/header/tool-nav/tool-nav.stories.ts b/...s/components/tool-nav/tool-nav.stories.ts → ...nents/header/tool-nav/tool-nav.stories.ts
@@ -2,7 +2,7 @@ import { html } from "lit";
 
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-const items = ["Tool Home", "About", "Data Dashboards", "Custom Data Download"];
+const items = ["Tool Name", "About"];
 
 const meta: Meta = {
   title: "Components/Header/Tool Nav",

diff --git a/src/scss/components/icon/icon.stories.ts b/src/scss/components/icon/icon.stories.ts
@@ -3,6 +3,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Icon",
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
 };
 
 export default meta;

diff --git a/src/scss/components/mobile-nav/mobile-nav.stories.ts b/src/scss/components/mobile-nav/mobile-nav.stories.ts
@@ -3,13 +3,7 @@ import { html } from "lit";
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { Close as MenuToggle } from "../menu-toggle/menu-toggle.stories";
 
-const toolItems = [
-  "Tool Home",
-  "About",
-  "Data Dashboards",
-  "Custom Data Download",
-];
-const generalItems = ["IATI Home", "News", "Events", "Contact", "Help Docs"];
+const toolItems = ["Tool Home", "About"];
 
 const meta: Meta = {
   title: "Components/Mobile Nav",
@@ -55,12 +49,39 @@ export const MobileNav: Story = {
           )}
         </ul>
         <ul class="">
-          ${generalItems.map(
-            (i) =>
-              html`<li class="iati-mobile-nav__item">
-                <a href="#" class="iati-mobile-nav__link">${i}</a>
-              </li>`,
-          )}
+          <li class="iati-mobile-nav__item">
+            <a
+              href="https://iatistandard.org/en/about/"
+              class="iati-mobile-nav__link"
+              >About IATI</a
+            >
+          </li>
+          <li class="iati-mobile-nav__item">
+            <a
+              href="https://iatistandard.org/en/using-data/"
+              class="iati-mobile-nav__link"
+              >Use Data</a
+            >
+          </li>
+          <li class="iati-mobile-nav__item">
+            <a
+              href="https://iatistandard.org/en/guidance/publishing-data/"
+              class="iati-mobile-nav__link"
+            >
+              Publish Data
+            </a>
+          </li>
+          <li class="iati-mobile-nav__item">
+            <a
+              href="https://iatistandard.org/guidance/get-support/"
+              class="iati-mobile-nav__link"
+            >
+              Contact
+            </a>
+          </li>
+          <li class="iati-mobile-nav__item">
+            <a href="#" class="iati-mobile-nav__link">Help Docs</a>
+          </li>
         </ul>
       </nav>
     </div>

diff --git a/src/scss/components/piped-list/piped-list.stories.ts b/src/scss/components/piped-list/piped-list.stories.ts
@@ -2,8 +2,6 @@ import { html } from "lit";
 
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-const items = ["IATI Home", "News", "Events", "Contacts"];
-
 const meta: Meta = {
   title: "Components/Piped List",
 };
@@ -14,7 +12,9 @@ type Story = StoryObj;
 export const PipedList: Story = {
   render: () => html`
     <ul class="iati-piped-list">
-      ${items.map((i) => html`<li>${i}</li>`)}
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
     </ul>
   `,
 };
diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
@@ -1,3 +1 @@
-@forward "footer/footer";
-@forward "header/header";
 @forward "page/page";
diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts
@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories";
+import { Footer } from "../../components/footer/footer.stories";
+import { Header } from "../../components/header/header.stories";
 import { Notice as MessageNotice } from "../../components/message/message.stories";
-import { Footer } from "../footer/footer.stories";
-import { Header } from "../header/header.stories";
 
 const meta: Meta = {
   title: "Layout/Page",

diff --git a/static/images/marque-white.svg b/static/images/marque-white.svg