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.

Sign up for GitHub

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

feat: 1126 build tier design #1139

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat: 1126 build tier design #1139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b65e7da
inital configuration
ehtabrizi Feb 5, 2025
61170b7
updates to use phase tag
ehtabrizi Feb 5, 2025
a638e5b
updates to macro
ehtabrizi Feb 5, 2025
2d8e8b3
sticky variation for demo
ehtabrizi Feb 6, 2025
d49a703
fix font style app over rides
ehtabrizi Feb 6, 2025
3eb2d67
added space
ehtabrizi Feb 7, 2025
d0bd54f
format file
ehtabrizi Feb 7, 2025
f6e96d6
updates key as per spec
ehtabrizi Feb 7, 2025
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
4 changes: 4 additions & 0 deletions docs/_includes/layouts/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
{% extends "./base.njk" %}

{% import "./macros/tier.njk" as macros %}


{% block content %}
{{ macros.tierLabel(tier, tierMessage, tierLink, tierUrl) }}
<div class="app-layout__content">
<h1 class="govuk-heading-xl">
{% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
Expand Down
27 changes: 27 additions & 0 deletions docs/_includes/layouts/macros/tier.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% macro tierLabel(tier, tierMessage, tierLink, tierUrl) %}
{% if tier %}
{% set tierClass = {
"Reviewed": "govuk-tag--green",
"Due for review": "govuk-tag--orange",
"Community component": "govuk-tag--light-blue",
"Archived": "govuk-tag--grey"
}[tier] or "" %}

<div class="app-tier">
<p class="govuk-phase-banner__content govuk-!-margin-bottom-0">
<span class="govuk-tag govuk-phase-banner__content__tag {{ tierClass }}">
{{ tier }}
</span>

{% if tierMessage %}
<span class="govuk-phase-banner__text">
{{ tierMessage }}
{% if tierLink %}
<a class="govuk-link" href="{{ tierUrl | default('#') }}">{{ tierLink }}</a>
{% endif %}
</span>
{% endif %}
</p>
</div>
{% endif %}
{% endmacro %}
1 change: 1 addition & 0 deletions docs/assets/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ $govuk-assets-path: "../" !default;
@import "./components/page";
@import "./components/menu-toggle";
@import "./components/app-card";
@import "./components/tier";
@import "./components/documentation_tabs";

@view-transition {
Expand Down
17 changes: 17 additions & 0 deletions docs/assets/stylesheets/components/_tier.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.app-tier {
background-color: govuk-colour("white");
padding: govuk-spacing(2) govuk-spacing(4);
border-bottom: 1px solid $govuk-border-colour;
position: sticky;
top: 0;
z-index: 1000;
@include govuk-media-query($until: desktop) {
position: relative;
}
p {
@include govuk-font($size: 16, $line-height: 20px);
@include govuk-media-query($until: desktop) {
@include govuk-font($size: 14, $line-height: 16px);
}
}
}
4 changes: 4 additions & 0 deletions docs/components/add-another.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
layout: layouts/component.njk
title: Add another
tier: "Archived"
tierMessage: "Created: Aug 2024"
tierLink: "Learn more about 'reviewed' components."
tierUrl: "#"
type: component
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/686
eleventyNavigation:
Expand Down
4 changes: 4 additions & 0 deletions docs/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
layout: layouts/component.njk
title: Badge
type: component
tier: "Reviewed"
tierMessage: "Created: Aug 2024"
tierLink: "Learn more about 'reviewed' components."
tierUrl: "#"
githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/687
eleventyNavigation:
parent: Components
Expand Down