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

Map 178 uof new header and footer #646

Merged
merged 5 commits into from
Sep 28, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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: 3 additions & 1 deletion assets/sass/application.sass
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ $path: "/assets/images/"
@import 'govuk/all'
@import 'moj/all'

@import './local'
@import './components/header-bar'
@import './components/footer'
@import './local'
4 changes: 4 additions & 0 deletions assets/sass/components/_footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.govuk-footer {
min-height: 160px;
}

127 changes: 127 additions & 0 deletions assets/sass/components/_header-bar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
.hmpps-header {
@include govuk-responsive-padding(3, 'top');
@include govuk-responsive-padding(3, 'bottom');
background-color: govuk-colour('black');
color: govuk-colour('white');

&__container {
@include govuk-width-container;
display: flex;
justify-content: space-between;
align-items: center;
}

&__logo {
@include govuk-responsive-margin(2, 'right');
position: relative;
top: -2px;
fill: govuk-colour('white');
}

&__title {
@include govuk-responsive-padding(3, 'right');
display: flex;
align-items: center;

&__organisation-name {
@include govuk-responsive-margin(2, 'right');
@include govuk-font($size: 24, $weight: 'bold');
display: flex;
align-items: center;
}

&__service-name {
@include govuk-responsive-margin(2, 'right');
@include govuk-font(24);
display: none;

@include govuk-media-query($from: desktop) {
display: flex;
align-items: center;
}
}
}

&__link {
@include govuk-link-common;
@include govuk-link-style-default;

text-underline-offset: 0.1em;

&:link,
&:visited,
&:active {
color: govuk-colour('white');
text-decoration: none;
}

&:hover {
text-decoration: underline;
}

&:focus {
color: govuk-colour('black');

svg {
fill: govuk-colour('black');
}
}

&__sub-text {
@include govuk-font(16);
display: none;

@include govuk-media-query($from: tablet) {
display: block;
}
}
}

&__navigation {
display: flex;
flex-direction: column;
align-items: flex-end;
list-style: none;
margin: 0;
padding: 0;

@include govuk-media-query($from: tablet) {
flex-direction: row;
align-items: center;
}

&__item {
@include govuk-font(19);
margin-bottom: govuk-spacing(1);
text-align: right;

@include govuk-media-query($from: tablet) {
@include govuk-responsive-margin(4, 'right');
@include govuk-responsive-padding(4, 'right');
margin-bottom: 0;
border-right: 1px solid govuk-colour('white');
}

a {
display: inline-block;
}

&:last-child {
margin-right: 0;
border-right: 0;
padding-right: 0;
}

}
}

@media print {
display: none;
}
}

.govuk-phase-banner {
@include govuk-width-container;
border: none;
}

107 changes: 4 additions & 103 deletions assets/sass/local.sass
Original file line number Diff line number Diff line change
@@ -1,106 +1,11 @@
@import "palette"

// Header

div.govuk-width-container
Copy link
Contributor Author

@GurnankCheema GurnankCheema Sep 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs wider container width in Use of force incidents page
used 1170px instead of 1150px previously used so it's same as new header width

max-width: 1150px
max-width: 1170px
margin-top: 15px

.header
@include govuk-responsive-padding(3, 'top')
@include govuk-responsive-padding(3, 'bottom')
background-color: govuk-colour('black')

&__container
@include govuk-width-container
display: flex
justify-content: space-between
align-items: center
max-width: 1150px

&__logo
@include govuk-responsive-margin(2, 'right')
position: relative
top: -2px
fill: govuk-colour('white')

&__title
@include govuk-responsive-padding(3, 'right')
display: flex
align-items: center

&__organisation-name
@include govuk-responsive-margin(2, 'right')
@include govuk-font($size: 24, $weight: 'bold')
display: flex
align-items: center

&__service-name
display: none
@include govuk-font(24)

@include govuk-media-query($from: desktop)
display: inline-block

&__link
@include govuk-link-common
@include govuk-link-style-default

&:link,
&:visited,
&:active
color: govuk-colour('white')
text-decoration: none

&:hover
text-decoration: underline

&:focus
color: govuk-colour('black')

svg
fill: govuk-colour('black')

&__sub-text
@include govuk-font(16)
display: none

@include govuk-media-query($from: tablet)
display: block

&__navigation
display: flex
flex-direction: column
align-items: flex-end
list-style: none
margin: 0
padding: 0

@include govuk-media-query($from: tablet)
flex-direction: row
align-items: center

&__item
@include govuk-font(19)
margin-bottom: govuk-spacing(1)
text-align: right

@include govuk-media-query($from: tablet)
@include govuk-responsive-margin(4, 'right')
@include govuk-responsive-padding(4, 'right')
margin-bottom: 0
border-right: 1px solid govuk-colour('white')

a
display: inline-block

&:last-child
margin-right: 0
border-right: 0
padding-right: 0

@media print
display: none
.hmpps-header__container
max-width: 1170px

// Task list pattern

Expand Down Expand Up @@ -384,7 +289,7 @@ dt.summary-list__key__wider
display: none !important

@media print
.no-print, .govuk-header, .govuk-footer
.no-print, .hmpps-header, .govuk-footer
display: none !important

.print
Expand Down Expand Up @@ -437,9 +342,5 @@ dt.summary-list__key__wider
button
margin-bottom: 0

.feedback-banner
background: $govuk-brand-colour
padding: govuk-spacing(4) govuk-spacing(6)

.govuk-notification-banner__content > *
max-width: 700px;
6 changes: 6 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { stringToHash } from './server/utils/hash'
import db from './integration-tests/db/db'
import config from './dist/server/config'

import components from './integration-tests/mockApis/components'

export default defineConfig({
chromeWebSecurity: false,
fixturesFolder: 'integration-tests/fixtures',
Expand Down Expand Up @@ -67,6 +69,10 @@ export default defineConfig({
stubVerifyToken: active => auth.stubVerifyToken(active),

stubClientCredentialsToken: auth.stubClientCredentialsToken,

stubComponents: components.stubComponents,

stubComponentsFail: components.stubComponentsFail,
})
},
baseUrl: 'http://localhost:3007',
Expand Down
3 changes: 3 additions & 0 deletions feature.env
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ DB_PORT=5432
NODE_ENV=development

EXIT_LOCATION_URL=/
DPS_URL=/
COMPONENT_API_URL=http://localhost:9091/components
ENVIRONMENT_NAME=DEV

REDIS_HOST=localhost
REDIS_PORT=6379
Expand Down
9 changes: 9 additions & 0 deletions helm_deploy/use-of-force/templates/_envs.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,15 @@ env:
- name: FEATURE_FLAG_OUTAGE_BANNER_ENABLED
value: {{ .Values.env.FEATURE_FLAG_OUTAGE_BANNER_ENABLED | quote }}

- name: DPS_URL
value: {{ .Values.env.DPS_URL | quote }}

- name: COMPONENT_API_URL
value: {{ .Values.env.COMPONENT_API_URL | quote }}

- name: ENVIRONMENT_NAME
value: {{ .Values.env.ENVIRONMENT_NAME | quote }}

- name: REDIS_HOST
valueFrom:
secretKeyRef:
Expand Down
3 changes: 3 additions & 0 deletions helm_deploy/values-dev.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ env:
TOKENVERIFICATION_API_URL: https://token-verification-api-dev.prison.service.justice.gov.uk
TOKENVERIFICATION_API_ENABLED: true
FEATURE_FLAG_OUTAGE_BANNER_ENABLED: false
DPS_URL: https://digital-dev.prison.service.justice.gov.uk/
COMPONENT_API_URL: "https://frontend-components-dev.hmpps.service.justice.gov.uk"
ENVIRONMENT_NAME: 'DEV'
3 changes: 3 additions & 0 deletions helm_deploy/values-preprod.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ env:
TOKENVERIFICATION_API_URL: https://token-verification-api-preprod.prison.service.justice.gov.uk
TOKENVERIFICATION_API_ENABLED: true
FEATURE_FLAG_OUTAGE_BANNER_ENABLED: false
DPS_URL: https://digital-preprod.prison.service.justice.gov.uk/
COMPONENT_API_URL: "https://frontend-components-preprod.hmpps.service.justice.gov.uk"
ENVIRONMENT_NAME: 'PRE-PRODUCTION'

allow_list:
office: "217.33.148.210/32"
Expand Down
3 changes: 3 additions & 0 deletions helm_deploy/values-prod.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ env:
TOKENVERIFICATION_API_URL: https://token-verification-api.prison.service.justice.gov.uk
TOKENVERIFICATION_API_ENABLED: true
FEATURE_FLAG_OUTAGE_BANNER_ENABLED: false
DPS_URL: https://digital.prison.service.justice.gov.uk/
COMPONENT_API_URL: "https://frontend-components.hmpps.service.justice.gov.uk"
ENVIRONMENT_NAME: ''

allow_list:
office: "217.33.148.210/32"
Expand Down
29 changes: 29 additions & 0 deletions integration-tests/integration/commonComponents.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const { offender } = require('../mockApis/data')
const ReportUseOfForcePage = require('../pages/createReport/reportUseOfForcePage')

context('Report use of force page', () => {
beforeEach(() => {
cy.task('reset')
cy.task('stubLogin', { firstName: 'James', lastName: 'Stuart' })
cy.task('stubOffenderDetails', offender)
})

it('New components should exist', () => {
cy.task('stubComponents')
cy.login()

const page = ReportUseOfForcePage.visit(offender.bookingId)
page.commonComponentsHeader().should('exist')
page.commonComponentsFooter().should('exist')
})

it('New components should not exist', () => {
cy.task('stubComponentsFail')
cy.login()

const page = ReportUseOfForcePage.visit(offender.bookingId)
page.commonComponentsHeader().should('not.exist')
page.commonComponentsFooter().should('not.exist')
page.fallbackHeaderUserName().contains('J. Stuart')
})
})
2 changes: 1 addition & 1 deletion integration-tests/integration/login.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ context('Login functionality', () => {
cy.login()
const yourStatements = YourStatements.verifyOnPage()
yourStatements.loggedInName().contains('J. Stuart')
cy.request('/logout/').its('body').should('contain', 'Sign in')
cy.request('/sign-out').its('body').should('contain', 'Sign in')
})

it('New user login should log current user out', () => {
Expand Down
Loading