From 661ece8f8e11c48e9503a6232a7c5d6a01b670f3 Mon Sep 17 00:00:00 2001 From: Laura Croft Date: Fri, 2 Jun 2023 10:48:25 +0100 Subject: [PATCH 01/28] storage --- .DS_Store | Bin 6148 -> 6148 bytes app/.DS_Store | Bin 6148 -> 6148 bytes app/assets/.DS_Store | Bin 0 -> 6148 bytes app/views/.DS_Store | Bin 6148 -> 10244 bytes app/views/content-design/.DS_Store | Bin 6148 -> 8196 bytes 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 app/assets/.DS_Store diff --git a/.DS_Store b/.DS_Store index fadd49af93a07740151b4698fdea46e28fdbf625..e141f2febdb01a202d2801d176e5fe8a4afe37e3 100644 GIT binary patch delta 248 zcmZoMXfc=|#>B`mF;R?_gMono$PkfX0y02=4Tu>T7z7xSbCUA&b3j7O6BAd|gT$E` z5*Z2@3Q~%Z4w3{`MCuk8z92Yz&eAE$HHU*Dt zK?dAZX$FQ$pf6O-5`8;G!M=H}q$0QzfV;&>;v;834WAH}3!d delta 111 zcmZoMXfc=|#>AjHu~68Ak%57MnIVy(fT19zI5{UNKR*W~1O`k{8YBS30t`_3%^MlR p*ft+v3}W2O&cV+CGzlp3oq009h$1IQZ30N&WD_3c%`qY?m;sr=6_Wq} diff --git a/app/.DS_Store b/app/.DS_Store index bffa4fa7c7bc9cedf5604c55fc0666c87603138d..b8f115053253c005604d66d0058f7d7ce358c057 100644 GIT binary patch delta 566 zcmZoMXfc=|#>B!ku~2NHo+6{j#(>?7i!U%UF^X*FVd7w1bB2nbaf{XHU^7GPx;*3Dd z!jJ;gUBZxX bY(B{Roq009h$9Ch0|OJtZJQ%R)-VGAAg7D; delta 156 zcmZoMXfc=|#>B)qu~2NHo+2a1#(>?7j2xSJSa=zkS`SZ_W|d*j3)V6J_4~+VJ62g2 zDBF>Nfq{)7k)ap}QyEGaiVHFfgOl@f3xMJb3^@WI5=Fi&xF|0tKQA39&N$he{laDi kjv36G**W+*fOc;dJ5FIBg2+#ykfT&z>f!tsT%K=bC4@pP@%CeCnghaJH71R_ds5k&UNQf&? za|BMno3Tl}`AAd= zI;J)a``wvnH7Enhz;9!K_wEXIY(|%KPQm`IHCkCZaMQhgn;(^CNz&|RO?WH4y~ob| z#>?)a$o4lQ2feWJ2*c45ol=T(rAsG#vIPFl^Wn5VoYVWx_2xrK=2RFX%_g&16jPW- z&+Cd%|yLD!9eAim&5tN1Fa)*+F#$U(M;j4HHDgvM7 W4lwqZJA?(IKLSF7Hp;+{GVlo%E`$02 literal 0 HcmV?d00001 diff --git a/app/views/.DS_Store b/app/views/.DS_Store index fd9b8b022d3d651e0eeebbe85623de5fda3811f3..cc555adac24aa16fd5061e76ade593abafd8d484 100644 GIT binary patch literal 10244 zcmeHML1@!Z82+<$Hr^78#J-}~O5m;SE+pyit7 zX#fKNblk~K?8HNlLicHplp()n3ay6z04{D8n7G>!w5m`FCLuj>$!vGxr63ES@Sa#jXxdz3=Rh^>sfVF3Md7l3Q+Do4n-*8 zR*~{|3mULyFHaXrtXkua!?k@A`97Jsv;Wx;=i8&bD(mu$M@sx)iTLf}{2b&}L4FN54rQ*j z1vqyt~i+zSTlw0+Y230eVR(wBh6zY!6oMpsOpGU<3$KhvC16S_r2MW=iII)kL z-|lvTv=6o$rh~9@pZI5UJjBz5HJlPCY^xGm?aWPN8-o@(FId62#Cmj@Z_PvI{~QV7 zPY4TNuo5mlHocxmtReHV7e?ed|1jVhX-kZoIGn@_&J(XBGAg2$40$!eBman|%Me23 z^yOo~DT3;1)*mJF`AK|q&ZLf!*ut|qtjap=e%}ita=P&NekTqiZHYR?;bdM0@fyST zqK=HN2cIH_;~9EW&i(F>6ghtX9B}N@uE=ySTIRb%d`ECJ8E$r%JP0dVUh)sfLkWpm!QN&%(7zbT+4@`Zd3+vqItgqx$ab_4e%+^G<* z?OE=E2ZB&NUyjEMT8=;B*QLo)!TVX?wmr+;v7Wo5^;Yx$|DOTE8iAM-#pU&4h8BmD n^CFf1`-`fPbplx@gW{o2o-VIWsQjO#%F-c}x63*W$p8NUAh)D} delta 133 zcmZn(XfcprU|?W$DortDU=RQ@Ie-{MGqg=C6q~50D9Q+A12Ir6l_8Izgh7`fg&}of zp*kbuWIE+@#413=6$*@j1Y Ra)JswE67@g&G9@lm;r&)77YLZ diff --git a/app/views/content-design/.DS_Store b/app/views/content-design/.DS_Store index 79564c6374e7071937dc2c2f8d20df5d3e762590..59dd54e5f1b38e1ddb531a8597715177f45a4aa9 100644 GIT binary patch literal 8196 zcmeI1zfJ-{5XNVP0%M^_p^1sP7oecCJP8(B*ihNYKY@5~L_lL~?ge}T8*AUf!o>IR zMf_%G19t)eA&QB!$W}poh_Itg|Bm+C>!of7HZ&6 zbVm)!!`@JPqP3n-0!ly$C;=s)1pWd6?Acs0GxmMCs#XaofqzMWpAQ}?tM4=twT})M zn*u=7IBg4#kq1~G&#CV;61A@AQ?du+T#ZXHjJV^v$IYR>(@0d@$%s1{H?naVim{`^ z&$G?R_@Zi+fD)J_z`1*lS`;E{=gfVazYpwjgE~|}HXl$wXco$~u+x)HQcsI}cEVDr z8iZANWKIv?v#+_ge5=)chb$(%a zE!9(;*T>oDmOH>gFEOt;uhn}?^19^vi{Bw4QQ5$C|7RLnl)(B3q-5xQ&i_wl|Ng(e z3F^p7KneUf0h2D3OGOMLTl3_2oNIfim#AF0T_kE-)SU@ QGbs8ZU@@ps0>4V&6G&tC0ssI2 delta 133 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGqg`E6q~50D9Q+A12Ir6lcAU)14!mEq)#kV zXJnkrFJ#4$Qk Date: Mon, 5 Jun 2023 11:29:44 +0100 Subject: [PATCH 02/28] Fixing [SA] comment --- .../reviewing-and-checking-content.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/content-design/types-of-content-we-publish/reviewing-and-checking-content.html b/app/views/content-design/types-of-content-we-publish/reviewing-and-checking-content.html index 19e26be9..4aadfba6 100644 --- a/app/views/content-design/types-of-content-we-publish/reviewing-and-checking-content.html +++ b/app/views/content-design/types-of-content-we-publish/reviewing-and-checking-content.html @@ -81,7 +81,7 @@ You can [download this 2i checklist](/downloads/content-2i-checklist.docx) to adapt for your own team's use. -| Title (or name) checks[SS1] | Checked (Y/N) | +| Title (or name) checks | Checked (Y/N) | |--------------------------------------------------------|---------------| | Clearly identifies the content | | | Fits the character limit (65 for Whitehall) | | @@ -108,12 +108,12 @@ | In plain English with technical terms explained | | | Tenses are consistent | | | Uses short sentences and paragraphs (recommended less than 25 words per sentence and 8 lines per paragraph) | | -| Subheadings (recommended every 3 to 5[SA1] paragraphs) | | +| Subheadings (recommended every 3 to 5 paragraphs) | | | Content length is suitable | | | Headings are nested in an appropriate and accessible order | | | Bullet points do not mix negative and positive points | | | Bullet points and numbered steps used appropriately (as per style guide) | | -| Follows style guidance on bullets[SS2] | | +| Follows style guidance on bullets | | | Correct type of content and appropriate channel | | | Bullet points have a lead in line and start with a lower-case letter | | | No full stops in abbreviations or acronyms | | From df1f08bd0d64f72a747cf15013a92e6ff770e47f Mon Sep 17 00:00:00 2001 From: laura-biscuits <98974880+laura-biscuits@users.noreply.github.com> Date: Fri, 9 Jun 2023 14:34:34 +0100 Subject: [PATCH 03/28] Update index.html Updated the guidance on contributing to the DfE design system to include the table of criteria. --- app/views/design-system/contribute/index.html | 42 ++++++++++++++----- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/app/views/design-system/contribute/index.html b/app/views/design-system/contribute/index.html index 0efc8edf..f82b1fe7 100644 --- a/app/views/design-system/contribute/index.html +++ b/app/views/design-system/contribute/index.html @@ -1,7 +1,7 @@ {% extends "layouts/content-with-sidenav.html" %} {% set pageName = "Contribute" %} -{% set pageDescription = "Guidance for proposing a new patterns or component to the DfE Frontend Design System." %} +{% set pageDescription = "Guidance for proposing a new pattern or component to the DfE Design System." %} {% set selectedNav = "Design system" %} {% set setSelectedSideNav = "" %} {% set lastUpdated = "April 2023 "%} @@ -12,18 +12,38 @@ {% block content %} -

To be included in the DfE Design System, a pattern or component should:

-
    -
      -
    • either be currently used or potentially useful to multiple DfE services
    • -
    • meet a known user need
    • -
    • not be part of the GOV.UK Design System or on the roadmap for development
    • -
    - -

    You should also check if someone else has already suggested your idea or something similar on the Github backlog.

    +

    Proposing a component or pattern

    +

    The contents of the DfE Design System must be of a high quality and meet user needs. To guarantee this, all components and patterns need to meet certain criteria.

    + + + + + + + + + + + + + + + + + + + + + + +
    New proposals criteria
    CriteriaDescription
    Useful +

    You can demonstrate that this component or pattern would be useful for other DfE teams or services.

    +

    The need for the pattern or component has been validated through user research.

    +

    Evidence could be screenshot or links to versions of it being used in different services.

    +
    UniqueIt does not replicate something already in the GOV.UK or DfE Design System.
    UsersThere are other user groups completing similar tasks who would benefit from this component or pattern.

    Add a ticket

    -

    If your idea is not on the list, and meets our guidance for the DfE Design System, add a ticket. You can add to either the Github backlog or the components and patterns Trello. If you submit a component or pattern to Trello, it will automatically appear on the Github backlog.

    +

    If your idea is not on the DfE Design system backlog, and meets the criteria above, add a ticket. You can add to either the Github backlog or the components and patterns Trello. If you submit a component or pattern to Trello, it will automatically appear on the Github backlog.

    What to include

    At this stage, you just need to present your idea and evidence of the user needs. You can include screenshots or links to versions of the component or pattern in use, but avoid spending time working on a specific design or writing code.

    From c7b8c072deda3905f6e89f10bc9c1f755d1a1d5d Mon Sep 17 00:00:00 2001 From: Stephanie-Krus-DfE <136311091+Stephanie-Krus-DfE@users.noreply.github.com> Date: Mon, 12 Jun 2023 08:58:48 +0100 Subject: [PATCH 04/28] Update index.html fix a typo and in the UK, language used for disability is the social model of accessibility, so we should say 'disabled people' instead of 'people with disabilities' --- app/views/accessibility/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/accessibility/index.html b/app/views/accessibility/index.html index c772c130..3a7a8b62 100644 --- a/app/views/accessibility/index.html +++ b/app/views/accessibility/index.html @@ -34,7 +34,7 @@

    one in five people have a disability and around 15% of people are thought to be neurodiverse .

    From 981a0a005a1d904e4b7667b7d9723285b160d6ab Mon Sep 17 00:00:00 2001 From: Andy Jones Date: Mon, 12 Jun 2023 18:02:45 +0100 Subject: [PATCH 05/28] Updated header issue number --- app/views/design-system/components/header/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/design-system/components/header/index.html b/app/views/design-system/components/header/index.html index d7eb267c..3e239127 100644 --- a/app/views/design-system/components/header/index.html +++ b/app/views/design-system/components/header/index.html @@ -5,7 +5,7 @@ {% set isChildSection = "true"%} {% set isSubNavSection = "true" %} {% set lastUpdated = "" %} -{% set backlog_issue_id = "24" %} +{% set backlog_issue_id = "6" %} {% extends "layouts/content-with-sidenav.html" %} From e9ca5dae193addeec30d270066d324907057eaea Mon Sep 17 00:00:00 2001 From: Andy Jones Date: Mon, 12 Jun 2023 18:48:35 +0100 Subject: [PATCH 06/28] Update issue id --- app/views/design-system/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/design-system/index.html b/app/views/design-system/index.html index 479681ed..a3661f17 100644 --- a/app/views/design-system/index.html +++ b/app/views/design-system/index.html @@ -3,7 +3,7 @@ {% set pageDescription = "Understand how to ensure we design consistent services for Department for Education users." %} {% set selectedNav = "Design system" %} {% set lastUpdated = "April 2023" %} -{% set backlog_issue_id = "24" %} +{% set backlog_issue_id = "44" %} {% extends "layouts/content-with-sidenav.html" %} From 7176bd7ff13db0e28d0980d0e9bf56377d47a1f9 Mon Sep 17 00:00:00 2001 From: Andy Jones Date: Tue, 13 Jun 2023 09:05:10 +0100 Subject: [PATCH 07/28] Fixes #67 added guidance for header and phase banner --- .../components/header/index.html | 1121 +++++++++-------- .../design-system/dfe-frontend/index.html | 3 +- app/views/layouts/content-with-sidenav.html | 50 +- 3 files changed, 614 insertions(+), 560 deletions(-) diff --git a/app/views/design-system/components/header/index.html b/app/views/design-system/components/header/index.html index 3e239127..ea10860c 100644 --- a/app/views/design-system/components/header/index.html +++ b/app/views/design-system/components/header/index.html @@ -7,6 +7,14 @@ {% set lastUpdated = "" %} {% set backlog_issue_id = "6" %} +{# Add changes with newest at the top #} +{% set changeLog = [ + { + change: 'Added guidance for using phase banners with the header. See GitHub issue #67', + changeDate: '13 June 2023' + } +] +%} {% extends "layouts/content-with-sidenav.html" %} @@ -14,147 +22,145 @@ {% block heroExtra %} - {% endblock%} {% block content %} - -
    -

    You must use this header if the service is hosted on education.gov.uk.

    -

    If you beleive your service should have a different header, speak to Andy Jones (Head of Design).

    -
    -

    The blue Department for Education branded header shows users that they are on a DfE website and what service they are using.

    +
    +

    You must use this header if the service is hosted on education.gov.uk.

    +

    If you beleive your service should have a different header, speak to Andy Jones (Head of Design).

    +
    +

    The blue Department for Education branded header shows users that they are on a DfE website and what service they are using.

    -
    -

    All features

    +
    +

    All features

    -

    An example of the header component with all features enabled. See other variants.

    +

    An example of the header component with all features enabled. See other variants.

    -
    +
    -
    -

    +
    +

    Contents

    - +
    +

    + Open example in a new window +

    +
    + - + + + + +

+ + + - -
+
+
-
<header class="dfe-header" role="banner">
+            
<header class="dfe-header" role="banner">
   <div class="dfe-width-container dfe-header__container">
     <div class="dfe-header__logo">
       <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -245,10 +251,10 @@ 

</div> </nav> </header>

-
-
- {% raw %} -
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+          
+
+ {% raw %} +
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
 
 {{ header({
     "showNav": "true",
@@ -284,215 +290,241 @@ 

] }) }}

- {% endraw%} + {% endraw%} +
- - - + +

When to use this component

-

When to use this component

+

You must use thie blue DfE header at the top of every page, if your service is being hosted on education.gov.uk.

-

You must use thie blue DfE header at the top of every page, if your service is being hosted on education.gov.uk.

+

When not to use this component

-

When not to use this component

+

You must not use the blue DfE header if your service is hosted on any of these domains:

-

You must not use the blue DfE header if your service is hosted on any of these domains:

- -

    -
  • gov.uk/myservice
  • -
  • myservice.service.gov.uk
  • -
  • blog.gov.uk
  • -
+
    +
  • gov.uk/myservice
  • +
  • myservice.service.gov.uk
  • +
  • blog.gov.uk
  • +
-

You should use the GOV.UK header instead.

+

You should use the GOV.UK header instead.

-

How it works

+

How it works

-
+
To use this component install DfE Frontend into your project using the NPM package or compiled CSS and Javascript.
- -

Settings for the Nunjucks macro

+

Settings for the Nunjucks macro

The header Nunjucks macro takes the following arguments: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeRequiredDescription
showNavbooleanYesSet to "true" to show the navigation links in the header.
showSearchbooleanYesSet to "true" to show the site search input form.
showHeaderActionLinksbooleanYesSet to "true" to show list if items in the top right of page.
homeHrefstringNoThe href of the link for the logo and mobile home link in the navigation links. Defaults to "/".
ariaLabelstringNoAria label for the logo href. Defaults to "DfE homepage".
logoPathstringYesSet this to the local path for images. In version 13 of the prototype kit, set this is 'public/images'.
selectedNavstringNoPass in a value from the view which matches the primaryLinks.label and it will add the class dfe-header__navigation-item--current to the corresponding nav item.
headerActionLinksarrayNoArray of links for use in the header on the top right.
headerActionLinks[].urlstringNoThe href of a navigation item in the header. If blank, it will just display the label
headerActionLinks[].labelstringNoThe label of the item in the header.
primaryLinksarrayNoArray of navigation links for use in the header.
primaryLinks[].urlstringNoThe href of a navigation item in the header.
primaryLinks[].labelstringNoThe label of a navigation item in the header.
serviceobjectNoObject containing the *name* of the service.
attributesobjectNoAny extra HTML attributes (for example data attributes) to add to the header container.
searchActionstringNoThe search action endpoint. Defaults to "/search".
searchInputNamestringNoThe name for the search field. Defaults to "searchterm".
- - - - - + + + Name + Type + Required + Description + + + + + + showNav + + boolean + Yes + Set to "true" to show the navigation links in the header. + + + + showSearch + + boolean + Yes + Set to "true" to show the site search input form. + + + + showHeaderActionLinks + + boolean + Yes + Set to "true" to show list if items in the top right of page. + + + + homeHref + + string + No + The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". + + + + ariaLabel + + string + No + Aria label for the logo href. Defaults to "DfE homepage". + + + + logoPath + + string + Yes + Set this to the local path for images. In version 13 of the prototype kit, set this is 'public/images'. + + + + selectedNav + + string + No + Pass in a value from the view which matches the primaryLinks.label and it will add the class dfe-header__navigation-item--current to the corresponding nav item. + + + + headerActionLinks + + array + No + Array of links for use in the header on the top right. + + + + headerActionLinks[].url + + string + No + The href of a navigation item in the header. If blank, it will just display the label + + + + headerActionLinks[].label + + string + No + The label of the item in the header. + + + + primaryLinks + + array + No + Array of navigation links for use in the header. + + + + primaryLinks[].url + + string + No + The href of a navigation item in the header. + + + + primaryLinks[].label + + string + No + The label of a navigation item in the header. + + + + service + + object + No + Object containing the *name* of the service. + + + + attributes + + object + No + Any extra HTML attributes (for example data attributes) to add to the header container. + + + + searchAction + + string + No + The search action endpoint. Defaults to "/search". + + + + searchInputName + + string + No + The name for the search field. Defaults to "searchterm". + + + + + +

Variants

- -

Service name only

- -

Use this header for small services and sites which have fewer than 5 pages.

- +

Service name only

+

Use this header for small services and sites which have fewer than 5 pages.

-
+
- -
+
+
-
<header class="dfe-header" role="banner">
+              
<header class="dfe-header" role="banner">
    <div class="dfe-width-container dfe-header__container">
       <div class="dfe-header__logo">
          <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -505,10 +537,10 @@ 

</div> </div> </header>

-
-
- {% raw %} -
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+            
+
+ {% raw %} +
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
 
 {{ header({
     "showNav": "false",
@@ -522,90 +554,90 @@ 

} }) }}

- {% endraw%} -
-
- + {% endraw%} + + + -
-

With search

+
+

With search

-

Use this header if your service or website needs a search function.

+

Use this header if your service or website needs a search function.

-

You can specify the URL to post the search form to, by default it's /search.

-
+

You can specify the URL to post the search form to, by default it's /search.

+
-
-

+
+

Contents

- +
+

+ Open example in a new window +

+ - -
-
- -
<header class="dfe-header" role="banner">
+                        
+                      
+
+ +
+
+ + +

+
+ +
<header class="dfe-header" role="banner">
    <div class="dfe-width-container dfe-header__container">
       <div class="dfe-header__logo">
          <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -646,10 +678,10 @@ 

</div> </div> </header>

-
-
- {% raw %} -
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+                
+
+ {% raw %} +
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
 
 {{ header({
     "showNav": "false",
@@ -665,109 +697,106 @@ 

} }) }}

- {% endraw%} -
- -
- - - -

With navigation

+ - + {% endraw%} + + +
- +
+

With account option

-
-

With account option

+

Use this header if you want to have account options for accessing an account page or sign out of a service.

-

Use this header if you want to have account options for accessing an account page or sign out of a service.

- - -
-

+
+

Contents

- +
+

+ Open example in a new window +

+ - -
-
- -
<header class="dfe-header" role="banner">
+                              
  • + Sign out +
  • + +
    +
    + + +

    +
    + +
    <header class="dfe-header" role="banner">
         <div class="dfe-width-container dfe-header__container">
           <div class="dfe-header__logo">
             <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
    @@ -942,10 +967,10 @@ 

    </div> </div> </header>

    -
    -
    - {% raw %} -
    {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
    +                    
    +
    + {% raw %} +
    {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
     
     {{ header({
         "showNav": "false",
    @@ -968,51 +993,55 @@ 

    ] }) }}

    - {% endraw%} -
    - -
    + {% endraw%} + + +
    +

    Using phase banners with the header

    - +

    The GOV.UK phase banner component helps you tell users that the page they are on might be an alpha or beta page, and therefore, being tested.

    - - +

    If you are using the GOV.UK page template, add phase banners in the + beforeContent + layout section in the same way as you would with the GOV.UK header component.

    +

    This will ensure the phase banner is displayed immediately after the header and before any of the main content.

    -

    Things not to do

    -

    If you need to extend or make changes to the header component in your service, contribute and discuss the change with the Design Ops team or the Components and Patterns working group.

    +

    Things not to do

    -

    Do not:

    -
      -
    • put tags or phase banners in the header - use the phase banner in the beforeContent layout section
    • -
    • change the colours - they are the department brand colours and meet accessibility requirements
    • -
    • change the placement or size of the logo - it meets Government Communication guidelines for logos and branding
    • -
    • change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to
    • -
    +

    If you need to extend or make changes to the header component in your service, contribute and discuss the change with the Design Ops team or the Components and Patterns working group.

    -

    Services using this component

    +

    Do not:

    +
      +
    • put tags or phase banners in the header - use the phase banner in the beforeContent layout section
    • +
    • change the colours - they are the department brand colours and meet accessibility requirements
    • +
    • change the placement or size of the logo - it meets Government Communication guidelines for logos and branding
    • +
    • change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to
    • +
    -

    The following services are using this component:

    +

    Services using this component

    - +

    The following services are using this component:

    -

    Help us improve this component

    + -

    To improve this component based on user needs and research, you can contribute in the following ways:

    +

    Help us improve this component

    - - {% endblock %} \ No newline at end of file +

    To improve this component based on user needs and research, you can contribute in the following ways:

    + + + {% endblock %} \ No newline at end of file diff --git a/app/views/design-system/dfe-frontend/index.html b/app/views/design-system/dfe-frontend/index.html index 77d66061..318554a7 100644 --- a/app/views/design-system/dfe-frontend/index.html +++ b/app/views/design-system/dfe-frontend/index.html @@ -1,9 +1,10 @@ {% set pageName = "DfE Frontend" %} {% set pageDescription = "Using the frontend styles, components, and patterns in DfE services." %} {% set selectedNav = "Design system" %} -{% set lastUpdated = "" %} +{% set lastUpdated = "13 June 2023" %} {% set backlog_issue_id = "24" %} + {% extends "layouts/content-with-sidenav.html" %} {% block beforeContent %}{% endblock %} diff --git a/app/views/layouts/content-with-sidenav.html b/app/views/layouts/content-with-sidenav.html index e831ab34..11a6d0d6 100644 --- a/app/views/layouts/content-with-sidenav.html +++ b/app/views/layouts/content-with-sidenav.html @@ -6,7 +6,9 @@ - {% if seoPageName %}{{seoPageName}}{% elseif pageName %}{{pageName}}{%endif%} - Design Manual - Department for Education + + {% if seoPageName %}{{seoPageName}} + {% elseif pageName %}{{pageName}}{%endif%} - Design Manual - Department for Education @@ -31,7 +33,7 @@ - + {% block head %}{% endblock %} @@ -62,18 +64,20 @@
    - {% block breadcrumb %} {% if isbeta === "true" %} -
    -

    -