Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(side navigation): initial build of the side navigation #610

Merged
merged 48 commits into from
Nov 13, 2024
Merged
Changes from 1 commit
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
55c9b9e
docs(side navigation): initial build of the side navigation
chrispymm Aug 5, 2024
e5eebc7
docs(side navigation): update layouts to add side nav to all pages
chrispymm Aug 7, 2024
fffcc87
docs(side navigation): add basic styles
chrispymm Aug 7, 2024
5a3594a
docs(side navigation): main site layout and basic responsiveness
chrispymm Aug 8, 2024
49b992d
docs(side navigation): ensure all side nav links work
chrispymm Aug 8, 2024
747dcf4
docs(side navigation): implement responsive menu toggling behaviour
chrispymm Aug 8, 2024
beb7a6e
docs(side navigation): non-JS menu collapse/hiding functionality
chrispymm Aug 9, 2024
e4312ad
docs(side navigation): add indicators to side nav and enable view tra…
chrispymm Aug 9, 2024
8663765
docs(side navigation): update header menu toggle styles
chrispymm Aug 9, 2024
a8d150d
docs(index pages): styling for index listing pages
chrispymm Aug 12, 2024
d4ec86e
docs(side navigation): adjust site layout to left aligned
chrispymm Aug 12, 2024
0422ac2
docs(side navigation): adjust footer to be left aligned too
chrispymm Aug 12, 2024
a741536
docs(side navigation): extract macros and other small tweaks
chrispymm Aug 13, 2024
72498b4
docs(side navigation): fixes after visual/functional review
chrispymm Aug 15, 2024
929222e
docs(side navigation): wIP - adding accordion behaviour to side nav
chrispymm Sep 23, 2024
36cff9e
docs(side nav): style navigation toggles
chrispymm Sep 23, 2024
bef47ca
docs(side navigation): resolve issues after rebasing
chrispymm Oct 30, 2024
5143252
docs(side navigation): make both menus js toggle navs
chrispymm Oct 31, 2024
f32f6ca
docs(side navigation): fix chevron indicators and adjust hover colours
chrispymm Oct 31, 2024
f2663e6
docs: adding side nav category
robertjmccarthy Oct 31, 2024
b6613df
docs: side navigation updates
robertjmccarthy Oct 31, 2024
06fbda4
docs: updates to url structure
robertjmccarthy Nov 4, 2024
d54779a
docs: removing redundant pages
robertjmccarthy Nov 5, 2024
f9d3f4a
docs: changing typo
robertjmccarthy Nov 5, 2024
0f7390c
docs(side navigation): fix error froim
chrispymm Nov 5, 2024
270d4e5
docs: side nav and content style guide updates
robertjmccarthy Nov 5, 2024
c748eb4
docs: resolving side nav error with duplicate ethics section
robertjmccarthy Nov 5, 2024
71739b0
docs: resolving style sheet issue with incorrect layout file being re…
robertjmccarthy Nov 5, 2024
d6939e9
docs: resolving margin spacing on style guide
robertjmccarthy Nov 5, 2024
79966cf
docs: updating links and removing redundant content and pages
robertjmccarthy Nov 6, 2024
c221cb9
docs: excerpt content added for components
robertjmccarthy Nov 6, 2024
4bd1a7e
docs: updated excerpts as temporary holding text
robertjmccarthy Nov 6, 2024
318898d
docs(side navigation): fix content errors
helennickols Nov 6, 2024
e2fb88d
docs(side navigation): add new content style guide entries
helennickols Nov 6, 2024
50789ab
docs(side navigation): fix section breaks
helennickols Nov 6, 2024
62786e7
docs: adding in excerpts for no-js pages
robertjmccarthy Nov 6, 2024
248df23
docs(redirects): add redirect from old prototyping page
chrispymm Nov 8, 2024
0b7d247
docs: fix link to help page updated in template partial
Nov 8, 2024
fcf488d
docs: updates to docs site for url changes and fixing errors
robertjmccarthy Nov 11, 2024
219aaf2
docs: adding redirects
robertjmccarthy Nov 11, 2024
d7c3ea5
docs: adding redirects for removed pages
robertjmccarthy Nov 11, 2024
5c3221e
docs: adding redirect for IE8 page
robertjmccarthy Nov 11, 2024
d4b8f66
docs: adding in Figma links for messages and timeline component
robertjmccarthy Nov 12, 2024
c3ad511
docs(side navigation): tweaks to chevrons
chrispymm Nov 12, 2024
c0e881a
docs(side navigation): fix collapsible nav js to work better
chrispymm Nov 12, 2024
8bfdc83
docs(side navigation): further tweaks to chevron svg
chrispymm Nov 12, 2024
66c1799
docs(accessibility): fix duplicate id on standards and ethics nav
chrispymm Nov 12, 2024
1a8431c
docs(style guide): remove content style guide from output and navigation
chrispymm Nov 13, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
docs(side navigation): initial build of the side navigation
chrispymm committed Nov 8, 2024
commit 55c9b9ef0e03fb7550aef9f65d3159b199039d5b
8 changes: 7 additions & 1 deletion .eleventy.js
Original file line number Diff line number Diff line change
@@ -10,9 +10,12 @@ const path = require("path");
const { execSync } = require("child_process");
const releasePackage = require("./package/package.json");
const sass = require("sass");
const esbuild = require("esbuild");
const esbuild = require('esbuild');
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");

module.exports = function (eleventyConfig) {

eleventyConfig.addPlugin(eleventyNavigationPlugin);
/*
* If the node env is 'dev' then we include the src dir allowing components
* under development to be watched and loaded
@@ -42,6 +45,8 @@ module.exports = function (eleventyConfig) {
nunjucksEnv.addFilter(name, callback);
});

nunjucksEnv.addFilter("eleventyNavigation", eleventyNavigationPlugin.navigation.find);

eleventyConfig.setLibrary("njk", nunjucksEnv);

eleventyConfig.setLibrary(
@@ -166,6 +171,7 @@ module.exports = function (eleventyConfig) {
},
);


eleventyConfig.addFilter("getScriptPath", function (inputPath) {
return inputPath.split("/").slice(1, -1).join("/") + "/script.js";
});
2 changes: 1 addition & 1 deletion docs/_includes/layouts/base.njk
Original file line number Diff line number Diff line change
@@ -50,4 +50,4 @@
{% endblock %}
{% block pageScripts %}{% endblock %}
</body>
</html>
</html>
150 changes: 27 additions & 123 deletions docs/_includes/layouts/component.njk
Original file line number Diff line number Diff line change
@@ -1,136 +1,40 @@
{% extends "./base.njk" %}

{%- from "node_modules/@ministryofjustice/frontend/moj/components/side-navigation/macro.njk" import mojSideNavigation %}

{% macro appSideNavigation(config) %}
{% set config = config|addActiveAttribute(page.filePathStem | url) %}

{{ mojSideNavigation(config) }}
{% endmacro %}
{% macro renderNavListItem(entry, sortChildrenBy="order") -%}
<li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
<a href="{{ entry.url }}">{{ entry.title }}</a>
{%- if entry.children.length -%}
<ul>
{%- for child in entry.children | sort(false, false, sortChildrenBy) %}
{{ renderNavListItem(child) }}
{% endfor -%}
</ul>
{%- endif -%}
</li>
{%- endmacro %}

{% block content %}
<div class="govuk-width-container govuk-grid-row app-flex-container">
<div class="govuk-grid-column-one-third">
{{ appSideNavigation({
classes: 'govuk-!-padding-top-6',
sections: [
{
heading: {
text: "Components"
},
items: [
{
text: 'Add another',
href: ('/components/add-another' | url)
},
{
text: 'Badge',
href: ('/components/badge' | url)
},
{
text: 'Banner',
href: ('/components/banner' | url)
},
{
text: 'Button menu',
href: ('/components/button-menu' | url)
},
{
text: 'Date picker',
href: ('/components/date-picker' | url)
},
{
text: 'Filter',
href: ('/components/filter' | url)
},
{
text: 'Header',
href: ('/components/header' | url)
},
{
text: 'Identity bar',
href: ('/components/identity-bar' | url)
},
{
text: 'Messages',
href: ('/components/messages' | url)
},
{
text: 'Multi file upload',
href: ('/components/multi-file-upload' | url)
},
{
text: 'Multi select',
href: ('/components/multi-select' | url)
},
{
text: 'Notification badge',
href: ('/components/notification-badge' | url)
},
{
text: 'Organisation switcher',
href: ('/components/organisation-switcher' | url)
},
{
text: 'Page header actions',
href: ('/components/page-header-actions' | url)
},
{
text: 'Pagination',
href: ('/components/pagination' | url)
},
{
text: 'Password reveal',
href: ('/components/password-reveal' | url)
},
{
text: 'Primary navigation',
href: ('/components/primary-navigation' | url)
},
{
text: 'Scrollable pane',
href: ('/components/scrollable-pane' | url)
},
{
text: 'Search',
href: ('/components/search' | url)
},
{
text: 'Side navigation',
href: ('/components/side-navigation' | url)
},
{
text: 'Sortable table',
href: ('/components/sortable-table' | url)
},
{
text: 'Sub navigation',
href: ('/components/sub-navigation' | url)
},
{
text: 'Ticket panel',
href: ('/components/ticket-panel' | url)
},
{
text: 'Timeline',
href: ('/components/timeline' | url)
}
]
}
]

}) }}
{% set buildingPages = collections.all | eleventyNavigation("Building blocks") %}

<nav aria-labelledby="building-nav-title">
<h2 id="building-nav-title">Building Blocks</h2>
<ul>
{%- for entry in buildingPages %}{{ renderNavListItem(entry, "key") }}{%- endfor -%}
</ul>
</nav>

<hr class="govuk-section-break govuk-section-break--s govuk-section-break--visible">

{{ appSideNavigation({
items: [
{
text: 'Archived components',
href: ('/components/archived-components' | url)
}
]
}) }}
{% set usingPages = collections.all | eleventyNavigation("Using the design system") %}
<nav aria-labelledby="using-nav-title">
<h2 id="using-nav-title">Building Blocks</h2>
<ul>
{%- for entry in usingPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
</ul>
</nav>

{% include "./partials/back-to-top.njk" %}
</div>
7 changes: 7 additions & 0 deletions docs/archive/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Archive
eleventyNavigation:
key: Archive
parent: Building blocks
order: 15
---
6 changes: 6 additions & 0 deletions docs/building-blocks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
eleventyNavigation:
key: Building blocks
url: '#'
permalink: false
---
3 changes: 3 additions & 0 deletions docs/community/contribute.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
layout: layouts/community.njk
title: Propose a component or pattern
eleventyNavigation:
key: Propose a component or pattern
parent: Contribute
---

Our contribution process supports teams to add components and patterns based on their users needs and service requirements, whilst guaranteeing the quality and usefulness of the MoJ Design System.
3 changes: 3 additions & 0 deletions docs/community/criteria.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
layout: layouts/community.njk
title: Contribution criteria
eleventyNavigation:
key: Contribution criteria
parent: Contribute
---

The MoJ Design System supports the design, build, and delivery of accessible and consistent services. To guarantee the quality of the design system, all styles, components and patterns need to meet certain criteria.
4 changes: 4 additions & 0 deletions docs/community/help-and-feedback.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
layout: layouts/community.njk
title: Get help with the MoJ Design System
eleventyNavigation:
key: Help and feedback
parent: Using the design system
order: 20
---

<span class="govuk-caption-xl">The MoJ Design System team supports users of the MoJ Design System. Contact us to ask for help.</span>
4 changes: 4 additions & 0 deletions docs/community/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
layout: layouts/community.njk
title: Community
eleventyNavigation:
key: Contribute
parent: Using the design system
order: 10
---

The MoJ Design System supports the design, build, and delivery of accessible and consistent services. It does this by helping people, teams, professions, and communities across the Ministry of Justice to learn from the experiences of each other, contribute and share knowledge, and reuse as much as possible.
3 changes: 3 additions & 0 deletions docs/community/suggest-a-change.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
---
title: Suggest a Change
layout: layouts/community.njk
eleventyNavigation:
key: Suggest a change
parent: Contribute
---

To help improve the MoJ Design System, you can suggest changes to components and patterns.
3 changes: 3 additions & 0 deletions docs/components/add-another.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Add another
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/686
eleventyNavigation:
key: Add another
parent: Components
---

{% lastUpdated "add-another" %}
3 changes: 3 additions & 0 deletions docs/components/badge.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Badge
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/687
eleventyNavigation:
key: Badge
parent: Components
---

{% banner "The GOV.UK Design System has a similar component" %}
3 changes: 3 additions & 0 deletions docs/components/banner.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Banner
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/835
eleventyNavigation:
key: Banner
parent: Components
---

{% banner "The GOV.UK Design System has a similar component" %}
3 changes: 3 additions & 0 deletions docs/components/button-menu.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,9 @@ title: Button menu
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/685
contributors: Stephen Robertson, Rich Cooley, Al Laing, Jo Dimbleby, Dave Evans, Jim Bailey, Thomas Geraghty and Andy Keen
eleventyNavigation:
key: Button menu
parent: Components
---

<span class="govuk-caption-xl">The button menu is a versatile component that allows users to view tasks as buttons in a collapsible menu.</span>
3 changes: 3 additions & 0 deletions docs/components/currency-input.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
isArchive: true
title: Currency input
type: component
eleventyNavigation:
key: Currency input
parent: Archive
---

{% banner "This component is archived" %}
3 changes: 3 additions & 0 deletions docs/components/date-picker.md
Original file line number Diff line number Diff line change
@@ -6,6 +6,9 @@ githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/703
contributors: Dom Billington, Eddie Shannon, David Middleton, and the DPS Connect team
basedon: Scottish Government Design System date picker
basedonurl: https://designsystem.gov.scot/components/date-picker
eleventyNavigation:
key: Date picker
parent: Components
---

<span class="govuk-caption-xl">The date picker component enables users to select a date from a calendar. </span>
3 changes: 3 additions & 0 deletions docs/components/filter.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Filter
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/197
eleventyNavigation:
key: Filter
parent: Components
---

{% banner "A similar component exists" %}
3 changes: 3 additions & 0 deletions docs/components/form-validator.md
Original file line number Diff line number Diff line change
@@ -2,6 +2,9 @@
layout: layouts/component.njk
isArchive: true
title: Form validator
eleventyNavigation:
key: Form validator
parent: Archive
---

{% banner "This component is archived" %}
3 changes: 3 additions & 0 deletions docs/components/header.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Header
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/246
eleventyNavigation:
key: Header
parent: Components
---

{% lastUpdated "header" %}
3 changes: 3 additions & 0 deletions docs/components/identity-bar.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Identity bar
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/704
eleventyNavigation:
key: Identity bar
parent: Components
---

{% lastUpdated "identity-bar" %}
4 changes: 4 additions & 0 deletions docs/components/index.md
Original file line number Diff line number Diff line change
@@ -2,6 +2,10 @@
layout: layouts/component.njk
isIndex: true
title: Components
eleventyNavigation:
key: Components
parent: Building blocks
order: 0
---

<span class="govuk-caption-xl">Save time with reusable, accessible components for forms, navigation, panels, tables and more.</span>
3 changes: 3 additions & 0 deletions docs/components/messages.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Messages
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/705
eleventyNavigation:
key: Messages
parent: Components
---

{% lastUpdated "messages" %}
3 changes: 3 additions & 0 deletions docs/components/multi-file-upload.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@ layout: layouts/component.njk
title: Multi file upload
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/264
eleventyNavigation:
key: Multi file upload
parent: Components
---

{% lastUpdated "multi-file-upload" %}
Loading