Skip to content

Commit

Permalink
docs: refactor footer docs to be a single page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tillywoodfield
tillywoodfield committed Dec 18, 2024
1 parent 4175571 commit 346d148
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 116 deletions.
1 change: 1 addition & 0 deletions .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const preview: Preview = {
parameters: {
options: {
storySort: {
method: "alphabetical",
order: [
"Get Started",
"Installation",
Expand Down
31 changes: 31 additions & 0 deletions src/scss/components/footer/Docs.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Meta, Title, Canvas } from "@storybook/blocks";

import * as ComponentStories from "./footer.stories";

<Meta of={ComponentStories} />

<Title />

### Full Footer

{/* TODO: Documentation about the footer */}

<Canvas of={ComponentStories.Footer} />

### Useful Links Section

{/* TODO: Documentation for this section */}

<Canvas of={ComponentStories.UsefulLinksSection} />

### Additional Information Section

{/* TODO: Documentation for this section */}

<Canvas of={ComponentStories.AdditionalInformationSection} />

### Legal Section

{/* TODO: Documentation for this section */}

<Canvas of={ComponentStories.LegalSection} />
53 changes: 0 additions & 53 deletions src/scss/components/footer/footer-block/footer-block.stories.ts
View file

This file was deleted.

186 changes: 125 additions & 61 deletions src/scss/components/footer/footer.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,6 @@ import {
X,
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 "./footer-block/footer-block.stories";

const legalNavItems = [
html`<a href="#">Privacy</a>`,
html`<a href="#">Data removal</a>`,
html`<span>© Copyright IATI 2024. All rights reserved</span>`,
];

const meta: Meta = {
title: "Components/Footer",
Expand All @@ -30,61 +19,136 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;

export const Footer: Story = {
render: (args) => html`
<footer class="iati-footer iati-brand-background">
<div class="iati-brand-background__content">
<div class="iati-footer__section iati-footer__section--first">
<div class="iati-footer__container">
${UsefulLinksFooterBlock.render?.call({ ...args })}
<div class="iati-footer-block">
<h2
class="iati-footer-block__title iati-footer-block__title--centered"
>
Sign Up to Our Newsletter
</h2>
<div class="iati-footer-block__content">
${NewsletterForm.render?.call({ ...args })}
const wrapInFooter = (children) =>
html`<footer class="iati-footer iati-brand-background">
<div class="iati-brand-background__content">${children}</div>
</footer>`;

const usefulLinksSectionHtml = html`
<div class="iati-footer__section iati-footer__section--first">
<div class="iati-footer__container">
<div class="iati-footer-block">
<h2 class="iati-footer-block__title">Useful Links</h2>
<div class="iati-footer-block__content">
<ul>
<li><a href="#">Useful link</a></li>
<li><a href="#">Translation FAQs</a></li>
<li><a href="#">Another useful link</a></li>
<li><a href="#">Another even more useful longer link</a></li>
</ul>
</div>
</div>
<div class="iati-footer-block">
<h2 class="iati-footer-block__title iati-footer-block__title--centered">
Sign up to our newsletter
</h2>
<div class="iati-footer-block__content">
<form class="iati-newsletter-form">
<div class="iati-newsletter-form__item">
<label for="newsletter-email" class="iati-newsletter-form__label">Email</label>
<input id="newsletter-email" type="text" class="iati-newsletter-form__input">
</div>
<div class="iati-newsletter-form__item">
<label for="newsletter-firstname" class="iati-newsletter-form__label">First name</label>
<input id="newsletter-firstname" type="text" class="iati-newsletter-form__input">
</div>
<div class="iati-newsletter-form__item">
<label for="newsletter-surname" class="iati-newsletter-form__label">Surname</label>
<input id="newsletter-surname" type="text" class="iati-newsletter-form__input">
</div>
</div>
<div class="iati-newsletter-form__item">
<button class="iati-newsletter-form__submit iati-button iati-button--submit">
Subscribe
</button>
</div>
</form>
</div>
</div>
<div class="iati-footer__section">
<div class="iati-footer__container">
${AdditionalInfoFooterBlock.render?.call({ ...args })}
</div>
</div>
</div>`;

export const UsefulLinksSection: Story = {
render: () => wrapInFooter(usefulLinksSectionHtml),
};

const additionalInformationHtml = html`
<div class="iati-footer__section">
<div class="iati-footer__container">
<div class="iati-footer-block">
<h2 class="iati-footer-block__title">Additional Information</h2>
<div
class="iati-footer-block__content iati-footer-block__content--columns"
>
<div>
<p>Part of the IATI Unified Platform.</p>
<p>Code licensed under <a href="#">GNU AGPL</a>.</p>
<p>Documentation licensed under <a href="#">CC BY 3.0</a>.</p>
</div>
</div>
<div class="iati-footer__section iati-footer__section--last">
<div class="iati-footer__container">
<nav>
<ul class="iati-piped-list iati-footer__legal-nav">
${legalNavItems.map((i) => html`<li>${i}</li>`)}
</ul>
</nav>
${CountrySwitcher.render?.call({ ...args })}
<div class="iati-footer__social">
<a
href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
aria-label="LinkedIn"
>
${LinkedIn.render?.call({ ...args })}
</a>
<a href="https://x.com/IATI_aid" aria-label="X">
${X.render?.call({ ...args })}
</a>
<a
href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ"
aria-label="YouTube"
>
${Youtube.render?.call({ ...args })}
</a>
<a href="https://www.facebook.com/IATIaid/" aria-label="Facebook">
${Facebook.render?.call({ ...args })}
</a>
</div>
<div>
<ul>
<li><a href="#">Web vX.Y.Z</a></li>
<li><a href="#">API vX.Y.Z</a></li>
</ul>
</div>
</div>
</div>
</footer>
`,
</div>
</div>
`;

export const AdditionalInformationSection: Story = {
render: () => wrapInFooter(additionalInformationHtml),
};

const legalNavItems = [
html`<a href="#">Privacy</a>`,
html`<a href="#">Data removal</a>`,
html`<span>© Copyright IATI 2024. All rights reserved</span>`,
];

const legalSectionHtml = html`
<div class="iati-footer__section iati-footer__section--last">
<div class="iati-footer__container">
<nav>
<ul class="iati-piped-list iati-footer__legal-nav">
${legalNavItems.map((i) => html`<li>${i}</li>`)}
</ul>
</nav>
${CountrySwitcher.render?.call({})}
<div class="iati-footer__social">
<a
href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
aria-label="LinkedIn"
>
${LinkedIn.render?.call({})}
</a>
<a href="https://x.com/IATI_aid" aria-label="X">
${X.render?.call({})}
</a>
<a
href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ"
aria-label="YouTube"
>
${Youtube.render?.call({})}
</a>
<a href="https://www.facebook.com/IATIaid/" aria-label="Facebook">
${Facebook.render?.call({})}
</a>
</div>
</div>
</div>
`;

export const LegalSection: Story = {
render: () => wrapInFooter(legalSectionHtml),
};

export const Footer: Story = {
render: () =>
wrapInFooter([
usefulLinksSectionHtml,
additionalInformationHtml,
legalSectionHtml,
]),
};
4 changes: 2 additions & 2 deletions src/scss/layout/page/page.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ type Story = StoryObj;

export const Page: Story = {
render: (args) => html`
${Header.render?.call({ ...args })}
${Header.render?.call({ ...args, ...Header.args })}
<main class="iati-main">
${Breadcrumb.render?.call({ ...args })}
${MessageNotice.render?.call({ ...args })}
<h1>Page heading</h1>
<p>Page contents</p>
</main>
${Footer.render?.call({ ...args })}
${Footer.render.call({ ...args, ...Footer.args, children: "Hello" })}
`,
};

0 comments on commit 346d148

Please sign in to comment.