Skip to content

Commit

Permalink
Update to latest design decisions (#132)
Browse files Browse the repository at this point in the history
* Use GOV.UK tag component in place of MoJ badge to label closed non-associations
* Rejig layout of key prisoner details
* Rename "key prisoner details box" to "mini profile header"
  • Loading branch information
ushkarev authored Sep 13, 2023
1 parent 99c4ce2 commit e23413d
Show file tree
Hide file tree
Showing 12 changed files with 41 additions and 29 deletions.
2 changes: 1 addition & 1 deletion assets/scss/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $govuk-page-width: $moj-page-width;
@import './components/field-and-button-group';
@import './components/header';
@import './components/footer';
@import './components/key-prisoner-details';
@import './components/mini-profile-header';
@import './components/prisoner-photo';
@import './components/sortable-table';
@import './page/list';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
.app-key-prisoner-details {
@extend .govuk-\!-padding-4;
.dps-mini-profile-header {
@extend .govuk-\!-padding-3;
display: flex;
flex-direction: row;
align-items: start;
background: govuk-colour('light-grey');

.app-prisoner-photo--small {
margin-right: 50px;
margin-right: govuk-spacing(6);
}

dl {
margin-right: 80px;
margin-right: govuk-spacing(9);

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

.app-key-prisoner-details--align-right {
.dps-mini-profile-header--align-right {
align-self: center;
margin-left: auto;

Expand All @@ -35,6 +35,14 @@

dl {
margin-right: 0;

&:last-child {
margin-bottom: 0;

dd {
margin-bottom: 0;
}
}
}
}
}
2 changes: 1 addition & 1 deletion assets/scss/components/_prisoner-photo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

.app-prisoner-photo--small {
@extend .app-prisoner-photo;
width: 70px;
width: 80px;
}

.app-prisoner-photo--large {
Expand Down
6 changes: 3 additions & 3 deletions integration_tests/e2e/list.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ context('List non-associations page', () => {
})

it('should show key prisoner’s details', () => {
listPage.keyPrisonerBox.should('contain.text', 'Jones, David')
listPage.keyPrisonerBox.should('contain.text', davidJones.prisonerNumber)
listPage.keyPrisonerBox.should('contain.text', davidJones.cellLocation)
listPage.miniProfileHeader.should('contain.text', 'Jones, David')
listPage.miniProfileHeader.should('contain.text', davidJones.prisonerNumber)
listPage.miniProfileHeader.should('contain.text', davidJones.cellLocation)
})

it('should have open tab selected', () => {
Expand Down
8 changes: 4 additions & 4 deletions integration_tests/e2e/view.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ context('View non-association details page', () => {
})

it('should show key prisoner’s details', () => {
viewPage.keyPrisonerBox.should('contain.text', 'Jones, David')
viewPage.keyPrisonerBox.should('contain.text', davidJones.prisonerNumber)
viewPage.keyPrisonerBox.should('contain.text', davidJones.cellLocation)
viewPage.keyPrisonerBox.should('contain.text', 'Perpetrator')
viewPage.miniProfileHeader.should('contain.text', 'Jones, David')
viewPage.miniProfileHeader.should('contain.text', davidJones.prisonerNumber)
viewPage.miniProfileHeader.should('contain.text', davidJones.cellLocation)
viewPage.miniProfileHeader.should('contain.text', 'Perpetrator')
})

it('should show other prisoner’s details', () => {
Expand Down
4 changes: 2 additions & 2 deletions integration_tests/pages/nonAssociations/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export default class ListPage extends Page {
return this.tabs.eq(1)
}

get keyPrisonerBox(): PageElement<HTMLDivElement> {
return cy.get('.app-key-prisoner-details')
get miniProfileHeader(): PageElement<HTMLDivElement> {
return cy.get('.dps-mini-profile-header')
}

get tables(): PageElement<HTMLTableElement> {
Expand Down
4 changes: 2 additions & 2 deletions integration_tests/pages/nonAssociations/view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export default class ViewPage extends Page {
super(`Non-association: ${prisonerName} and ${otherPrisonerName}`)
}

get keyPrisonerBox(): PageElement<HTMLDivElement> {
return cy.get('.app-key-prisoner-details')
get miniProfileHeader(): PageElement<HTMLDivElement> {
return cy.get('.dps-mini-profile-header')
}

get otherPrisonerBox(): PageElement<HTMLDivElement> {
Expand Down
2 changes: 1 addition & 1 deletion server/views/pages/list.njk
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
{{ prisonerName | possessiveName}} non-associations
</h1>

{% include "../partials/keyPrisonerDetailsForList.njk" %}
{% include "../partials/miniProfileHeaderForList.njk" %}

<nav class="govuk-!-margin-top-6 govuk-!-margin-bottom-6">
<ul class="govuk-tabs__list">
Expand Down
8 changes: 4 additions & 4 deletions server/views/pages/view.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/table/macro.njk" import govukTable %}
{% from "moj/components/badge/macro.njk" import mojBadge %}
{% from "govuk/components/tag/macro.njk" import govukTag %}

{% set pageTitle = "Non-association details" %}

Expand All @@ -13,7 +13,7 @@
{{ prisonerName }} and {{ otherPrisonerName }}
</h1>

{% include "../partials/keyPrisonerDetailsForView.njk" %}
{% include "../partials/miniProfileHeaderForView.njk" %}

<div class="govuk-grid-row govuk-!-margin-top-8">
<div class="govuk-grid-column-two-thirds app-view__other-prisoner-details">
Expand Down Expand Up @@ -110,9 +110,9 @@

{% if nonAssociation.isClosed %}
<p>
{{ mojBadge({
{{ govukTag({
text: "Closed",
classes: "moj-badge--red"
classes: "govuk-tag--red"
}) }}
</p>
{% endif %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% set canViewProfile = user.permissions.canViewProfile(prisoner) %}

<div class="app-key-prisoner-details">
<div class="dps-mini-profile-header">
{% if canViewProfile %}
<img src="{{ routeUrls.prisonerPhoto(prisoner.prisonerNumber) }}" alt="Photo of {{ prisoner| nameOfPerson }}" class="app-prisoner-photo--small" />
{% else %}
Expand All @@ -12,10 +12,14 @@
<dd>
{% if canViewProfile %}
<a href="{{ dpsUrl }}/prisoner/{{ prisoner.prisonerNumber }}">
{{ prisoner | reversedNameOfPerson }}
<strong>
{{ prisoner | reversedNameOfPerson }}
</strong>
</a>
{% else %}
{{ prisoner | reversedNameOfPerson }}
<strong>
{{ prisoner | reversedNameOfPerson }}
</strong>
{% endif %}
<br />
{{ prisoner.prisonerNumber }}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% extends "./keyPrisonerDetails.njk" %}
{% extends "./miniProfileHeader.njk" %}

{% block extraDetails %}
{% if canAddNonAssociation %}
<div class="app-key-prisoner-details--align-right">
<div class="dps-mini-profile-header--align-right">
<p class="hmpps-action-button">
<img src="/assets/images/add-non-association.svg" alt="Icon representing a non-association" aria-hidden="true" />
<a href="{{ routeUrls.prisonerSearch(prisonerNumber) }}" class="govuk-link--no-visited-state">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "./keyPrisonerDetails.njk" %}
{% extends "./miniProfileHeader.njk" %}

{% block extraDetails %}
<dl>
Expand Down

0 comments on commit e23413d

Please sign in to comment.