diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b07bb96..58bb0ec 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -8,6 +8,7 @@ const preview: Preview = { parameters: { options: { storySort: { + method: "alphabetical", order: [ "Get Started", "Installation", diff --git a/src/scss/components/footer/Docs.mdx b/src/scss/components/footer/Docs.mdx new file mode 100644 index 0000000..2ab8136 --- /dev/null +++ b/src/scss/components/footer/Docs.mdx @@ -0,0 +1,31 @@ +import { Meta, Title, Canvas } from "@storybook/blocks"; + +import * as ComponentStories from "./footer.stories"; + + + + + +### 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} /> diff --git a/src/scss/components/footer/footer-block/footer-block.stories.ts b/src/scss/components/footer/footer-block/footer-block.stories.ts deleted file mode 100644 index cab1361..0000000 --- a/src/scss/components/footer/footer-block/footer-block.stories.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/web-components"; - -import { html } from "lit"; - -const meta: Meta = { - title: "Components/Footer/Footer Block", - parameters: { - backgrounds: { - default: "dark", - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const UsefulLinks: Story = { - render: () => - html`<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>`, -}; - -export const AdditionInfo: Story = { - render: () => - html`<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> - <ul> - <li><a href="#">Web v2.8.2</a></li> - <li><a href="#">Services v2.8.0</a></li> - <li><a href="#">API v2.4.0</a></li> - </ul> - </div> - </div> - </div>`, -}; diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts index de8ef77..3242a0e 100644 --- a/src/scss/components/footer/footer.stories.ts +++ b/src/scss/components/footer/footer.stories.ts @@ -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", @@ -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, + ]), }; diff --git a/src/scss/layout/page/page.stories.ts b/src/scss/layout/page/page.stories.ts index a33b937..2467cd0 100644 --- a/src/scss/layout/page/page.stories.ts +++ b/src/scss/layout/page/page.stories.ts @@ -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" })} `, };