docs: 1126 build status design #1154

ehtabrizi · 2025-02-10T10:59:15Z

Issue or RFC endorsed by the maintainers

Build tier design
#1126

Description of the change

FrontMatter paramaters:

status: "Archived" | Experimental" | "To be reviewed" | "Official"
statusMessage: "For example (Created: Feb 2025)"

Alternative designs

No alternative designs

Possible drawbacks

None suggested

Verification process

Tested via chrome, Safari & responsive view

Release notes

Added new tier macro to follow design

github-actions · 2025-02-10T11:06:43Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

colinrotherham · 2025-02-10T11:48:40Z

docs/assets/stylesheets/components/_tier.scss

+    position: relative;
+  }
+  p {
+    @include govuk-font($size: 16, $line-height: 20px);


Using govuk-font() will already output the media queries for you

Probably meant to use govuk-font-size() here?

But watch out, scale point 14 is deprecated:
https://design-system.service.gov.uk/get-started/new-type-scale/

github-actions · 2025-02-10T18:53:49Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-11T10:12:39Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-11T10:45:22Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-11T11:21:55Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-11T13:40:29Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-11T13:53:15Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-18T10:31:43Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-21T09:06:19Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-21T10:03:08Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-21T10:13:33Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-21T10:36:20Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-21T13:44:14Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

chrispymm · 2025-02-21T13:57:14Z

docs/_includes/layouts/component.njk

+       {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
+      <h1 class="govuk-heading-xl{% if status %} govuk-!-display-inline-block govuk-!-margin-bottom-2{% endif %}">
          {{ title }}
        </h1>
-
+        {{ macros.statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) }}


Not a blocker for release, but could this be a pageTitle partial/macro? As its repeated several times

Thanks Chris, noted for later iteration.

docs/_includes/layouts/macros/status.njk

chrispymm · 2025-02-21T14:04:59Z

docs/_includes/layouts/component.njk

@@ -1,12 +1,14 @@
 {% extends "./base.njk" %}

-{% block content %}
+{% import "./macros/status.njk" as macros %}


As there's only one macro in the file, would this be better as:

{% from "./macros/status.njk" import statusLabel %}

chrispymm · 2025-02-21T14:05:38Z

docs/_includes/layouts/macros/status.njk

+{% from "govuk/components/details/macro.njk" import govukDetails %}
+
+
+{% macro statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) %}


Is it worth a little bit of inline documentation of these args?

github-actions · 2025-02-21T14:31:53Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

colinrotherham · 2025-02-21T15:03:01Z

docs/design-system-statuses.md

+
+Learn how you can [help develop design system building blocks](/get-involved/suggest-a-change/).
+
+## ‘Experimental’ status (for all community components) <span class="govuk-tag govuk-tag--blue" style="vertical-align:middle;" aria-hidden="true">Experimental</span>


Not a blocker, but shall we set a task to review this HTML?

We can probably extend Markdown to render the tag via the Nunjucks macro:

{{ govukTag({ text: "completed", classes: "govuk-tag--blue", attributes: { style: "vertical-align: middle" } }) }}

Thanks Colin, noted for later iteration.

colinrotherham · 2025-02-21T15:07:27Z

docs/_includes/layouts/macros/status.njk

+      "Archived": "govuk-tag--grey"
+    }[status] or "" %}
+
+  <span class="govuk-tag status-tag {{ statusClass }}">


Do we want to trim the empty spaces off when statusClass isn't set?

Or follow the coding standards and use .app-status or .moj-status for our extended styles?

Suggested change

github-actions · 2025-02-21T15:30:42Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

colinrotherham · 2025-02-21T15:39:29Z

docs/_includes/layouts/macros/status.njk

+  <span class="govuk-tag app-status-tag{%- if statusClass %} {{ statusClass }}{% endif %}">
+   <span class="govuk-visually-hidden">Status:</span> {{ status }}
+  </span>
+
+   {% if status == 'Experimental' or statusDate %}
+<p class="app-status-message govuk-!-margin-bottom-2">
+    {{ statusData.statusMessage }}{% if status == 'Experimental' %} by{%- if creatorName and creatorTeam %} 
+        {{ creatorName }} in {{ creatorTeam }}
+    {%- elif creatorName %} 
+        {{ creatorName }}
+    {%- elif creatorTeam %} 
+        someone in {{ creatorTeam }}
+    {%- else %} 
+        someone in the community
+    {%- endif %}{% if statusDate %} in {{ statusDate }}{% endif %}.{% else %} in {{ statusDate }}.{% endif %}
+</p>
+{% endif %}


What do you think about simplifying the logic here?

I've split out statusHtml and statusAttribution and used govukTag() via the macro:

{% from "govuk/components/tag/macro.njk" import govukTag %}

Suggested change



Status: {{ status }}



{% if status == 'Experimental' or statusDate %}



{{ statusData.statusMessage }}{% if status == 'Experimental' %} by{%- if creatorName and creatorTeam %}

{{ creatorName }} in {{ creatorTeam }}

{%- elif creatorName %}

{{ creatorName }}

{%- elif creatorTeam %}

someone in {{ creatorTeam }}

{%- else %}

someone in the community

{%- endif %}{% if statusDate %} in {{ statusDate }}{% endif %}.{% else %} in {{ statusDate }}.{% endif %}



{% endif %}

{% set statusHtml -%}

Status: {{ status }}

{%- endset %}

{% set statusAttribution -%}

{%- if status == "Experimental" %}

by {{ creatorName | default("someone") }} in {{ creatorTeam | default("the community") }}

{%- endif %}

{%- if statusDate %}

in {{ statusDate }}

{% endif %}.

{%- endset %}

{{ govukTag({

html: statusHtml,

classes: "govuk-!-font-weight-regular app-status-tag" ~ statusClass

}) }}



{{ statusData.statusMessage }} {{ statusAttribution }}

I've added govuk-!-font-weight-regular to fix the bold weight coming from .app-prose

But might be better moving this into app-status-tag to fix it everywhere

Thanks Colin, noted for later iteration.

github-actions · 2025-02-21T17:15:01Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

github-actions · 2025-02-24T08:39:33Z

🚀 Deployed to preview environment! If this is the first deploy, you may have to wait a few minutes for your preview site to be ready on the following URL:

https://moj-frontend-1126-build-tier-design-with-variables.apps.live.cloud-platform.service.justice.gov.uk

Username: preview, Password: moj

gregtyler · 2025-02-24T11:12:53Z

🎉 This PR is included in version 3.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

ehtabrizi added 9 commits February 5, 2025 11:02

inital configuration

b65e7da

updates to use phase tag

61170b7

updates to macro

a638e5b

sticky variation for demo

2d8e8b3

fix font style app over rides

d49a703

work to use included vars

07cef73

remove args not used

a4cd461

removed fullstop from link and added to span

36a2171

format file

82f4ece

ehtabrizi added the preview:active label Feb 10, 2025

ehtabrizi requested a review from a team as a code owner February 10, 2025 10:59

ehtabrizi added 2 commits February 10, 2025 11:04

temp update

7fdb4de

updated file

48130db

colinrotherham reviewed Feb 10, 2025

View reviewed changes

updates following comments

a210ded

scroll padding applied for tier banner

38aaae1

updated to support overide values

0bfcc2a

updates

bf88890

add condition to allow for null property to render no link

8e00b56

updated zindex to follow system

4f84a7c

ehtabrizi changed the title ~~1126 build tier design with variables~~ feat: 1126 build tier design with variables Feb 13, 2025

docs: adding placeholder content

865b2b0

updates

1d1a05e

updated data feed

4a3bb28

further logic updates

52d3716

updates to text

b039d4b

chrispymm reviewed Feb 21, 2025

View reviewed changes

docs/_includes/layouts/macros/status.njk Show resolved Hide resolved

chrispymm reviewed Feb 21, 2025

View reviewed changes

updates following comments

b7d95c0

colinrotherham reviewed Feb 21, 2025

View reviewed changes

update css class

32656b3

colinrotherham reviewed Feb 21, 2025

View reviewed changes

updates following comments

242f6cb

ehtabrizi changed the title ~~feat: 1126 build status design~~ docs: 1126 build status design Feb 21, 2025

removed space

c6dea49

chrispymm approved these changes Feb 24, 2025

View reviewed changes

ehtabrizi merged commit db90007 into main Feb 24, 2025
22 checks passed

ehtabrizi deleted the 1126-build-tier-design-with-variables branch February 24, 2025 09:02

github-actions bot removed the preview:active label Feb 24, 2025

gregtyler added the released label Feb 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: 1126 build status design #1154

docs: 1126 build status design #1154

ehtabrizi commented Feb 10, 2025 •

edited

Loading

github-actions bot commented Feb 10, 2025

colinrotherham Feb 10, 2025

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 18, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

chrispymm Feb 21, 2025

ehtabrizi Feb 21, 2025

chrispymm Feb 21, 2025

chrispymm Feb 21, 2025

github-actions bot commented Feb 21, 2025

colinrotherham Feb 21, 2025

ehtabrizi Feb 21, 2025

colinrotherham Feb 21, 2025

github-actions bot commented Feb 21, 2025

colinrotherham Feb 21, 2025

colinrotherham Feb 21, 2025

ehtabrizi Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 24, 2025

gregtyler commented Feb 24, 2025

		{% from "govuk/components/details/macro.njk" import govukDetails %}


		{% macro statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) %}


		Learn how you can [help develop design system building blocks](/get-involved/suggest-a-change/).

		## ‘Experimental’ status (for all community components) <span class="govuk-tag govuk-tag--blue" style="vertical-align:middle;" aria-hidden="true">Experimental</span>

	<span class="govuk-tag status-tag {{ statusClass }}">
	<span class="govuk-tag app-tag--status{%- if statusClass %} {{ statusClass }}{% endif %}">

docs: 1126 build status design #1154

docs: 1126 build status design #1154

Conversation

ehtabrizi commented Feb 10, 2025 • edited Loading

Issue or RFC endorsed by the maintainers

Description of the change

Alternative designs

Possible drawbacks

Verification process

Release notes

github-actions bot commented Feb 10, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 10, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 11, 2025

github-actions bot commented Feb 18, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 21, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 21, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 24, 2025

gregtyler commented Feb 24, 2025

ehtabrizi commented Feb 10, 2025 •

edited

Loading