Skip to content

Commit

Permalink
Merge pull request #2894 from alphagov/mh-feedback-component
Browse files Browse the repository at this point in the history 
Feedback component visual updates
  • Loading branch information
@patrickpatrickpatrick
patrickpatrickpatrick authored Oct 20, 2022
2 parents 8a19b07 + eea4790 commit f98dd3d
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 191 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
useful summary for people upgrading their application, not a replication
of the commit log.

## Unreleased

* Feedback component visual updates ([PR #2894](https://github.com/alphagov/govuk_publishing_components/pull/2894))

## 31.1.2

* Move the GTM blocklist code ([PR #3011](https://github.com/alphagov/govuk_publishing_components/pull/3011))
Expand Down
154 changes: 81 additions & 73 deletions app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,104 +2,109 @@
background: govuk-colour("white");
margin-top: govuk-spacing(6);

@include govuk-media-query($from: tablet) {
@include govuk-media-query($from: desktop) {
margin-top: govuk-spacing(9);
border-bottom: 1px solid govuk-colour("white");
}

// New design has the box flush with edges of smaller screens
// We need to compensate for `govuk-width-container` margins:
@include govuk-media-query($until: tablet) {
margin-right: govuk-spacing(-3);
margin-left: govuk-spacing(-3);
}
@include govuk-media-query($from: tablet, $until: desktop) {
margin-right: govuk-spacing(-6);
margin-left: govuk-spacing(-6);
}
// Scoped to the feedback component temporarily
[hidden] {
// stylelint-disable-next-line declaration-no-important
display: none !important;
}
}

.gem-c-feedback__prompt-questions {
text-align: center;
border-bottom: 1px solid govuk-colour("white");
padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
box-sizing: border-box;
.gem-c-feedback__prompt {
background-color: govuk-colour("light-grey");
color: govuk-colour("black");
border-top: 1px solid $govuk-border-colour;
outline: 0;
}

.gem-c-feedback__prompt-content {
display: flex;
flex-direction: column;
padding: 0 govuk-spacing(3);
@include govuk-media-query($from: tablet) {
width: 50%;
display: table-cell;
text-align: left;
border-bottom: 0;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

.gem-c-feedback__prompt-questions--something-is-wrong {
text-align: center;

.gem-c-feedback__prompt-questions {
text-align: left;
padding: govuk-spacing(4) 0;
@include govuk-media-query($from: tablet) {
text-align: right;
vertical-align: bottom;
float: none;
margin: 0 govuk-spacing(3);
}
}

.gem-c-feedback__prompt {
@include govuk-clearfix;
background-color: govuk-colour("blue");
color: govuk-colour("white");
outline: 0;

.gem-c-feedback__prompt-questions--something-is-wrong {
border-top: 1px solid $govuk-border-colour;
@include govuk-media-query($from: tablet) {
@include govuk-font(16, $weight: bold);
display: table;
width: 100%;
border: 0;
}
}

.gem-c-feedback__prompt-question-answer {
display: flex;
align-items: center;
@include govuk-media-query($until: mobile) {
justify-content: center;
flex-wrap: wrap;
}
}

.gem-c-feedback__prompt-question,
.gem-c-feedback__prompt-success {
@include govuk-font(19, $weight: bold);

@include govuk-media-query($from: tablet) {
@include govuk-font(16, $weight: bold);
}
}

.gem-c-feedback__prompt-question {
vertical-align: top;
display: inline-block;
margin: govuk-spacing(2) govuk-spacing(4);
margin: 0;
padding-bottom: govuk-spacing(2);

&:focus {
outline: 0;
}

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

// This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
@include govuk-media-query($from: 950px) {
display: inline-block;
margin-top: govuk-spacing(2);
@include govuk-media-query($from: mobile) {
padding-bottom: 0;
margin-right: govuk-spacing(2);
}
}

.gem-c-feedback__prompt-link {
@include govuk-font(19);
background: transparent;
box-shadow: 0 2px 0 govuk-colour("white");
border: 1px govuk-colour("white") solid;
min-width: 100%;
color: govuk-colour("black");
box-shadow: 0 3px 0 govuk-colour("black");
border: 1px govuk-colour("black") solid;
margin-bottom: 0;
width: 100%;

&:hover {
// backup style for browsers that don't support rgba
background: govuk-colour("black");
background: govuk-colour("mid-grey");
background: rgba(govuk-colour("black"), .2);
color: govuk-colour("black");
}

@include govuk-media-query($from: mobile) {
min-width: 100px;
margin-bottom: 0;
&:active:focus:not(:hover) {
background: govuk-colour("yellow");
}

@include govuk-media-query($from: tablet) {
@include govuk-font(16);
}
Expand All @@ -108,42 +113,44 @@
.gem-c-feedback__email-link,
.gem-c-feedback__prompt-link {
position: relative;

&:focus:not(:active):not(:hover) {
border-color: govuk-colour("black");
}

&:focus,
&:active {
color: $govuk-focus-text-colour;
}
}

.gem-c-feedback__prompt-link:link,
.gem-c-feedback__prompt-link:visited {
color: govuk-colour("white");
color: govuk-colour("black");

&:focus {
&:focus,
&:active {
color: $govuk-focus-text-colour;
}
}

.gem-c-feedback__option-list {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: govuk-spacing(2);

@include govuk-media-query($from: mobile) {
display: inline-block;
margin-right: govuk-spacing(2);
}

@include govuk-media-query($from: tablet) {
margin-top: 0;
}
}

.gem-c-feedback__option-list-item {
@include govuk-media-query($from: mobile) {
display: inline-block;
&:last-child {
margin-left: govuk-spacing(2);
}
}

.gem-c-feedback__option-list-item:last-child {
@include govuk-media-query($from: mobile) {
margin-left: govuk-spacing(4);
.gem-c-feedback__option-list-item .gem-c-feedback__prompt-link {
min-width: 100px;
@include govuk-media-query($until: desktop) {
min-width: 80px;
}
}

Expand All @@ -158,7 +165,7 @@
outline: solid 3px $govuk-focus-colour;
}

@include govuk-media-query($from: tablet) {
@include govuk-media-query($from: desktop) {
border-width: $govuk-border-width;
}

Expand Down Expand Up @@ -190,11 +197,11 @@
}

.gem-c-feedback__form {
padding: govuk-spacing(3) 0;
border-top: govuk-spacing(2) solid govuk-colour("blue");
padding: govuk-spacing(3);
border-top: 1px solid $govuk-border-colour;

@include govuk-media-query($from: tablet) {
padding: govuk-spacing(6) 0;
padding: govuk-spacing(6);
}
}

Expand All @@ -217,8 +224,10 @@
}

.gem-c-feedback__close {
float: right;
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
margin: 0 govuk-spacing(2);
@include govuk-media-query($until: tablet) {
margin: govuk-spacing(4) 0 0;
}
}

.gem-c-feedback__email-link {
Expand All @@ -228,7 +237,6 @@
@include govuk-media-query($from: desktop) {
display: inline-block;
margin-top: govuk-spacing(2);
margin-left: govuk-spacing(3);
}
}

Expand Down
18 changes: 10 additions & 8 deletions app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
data-track-action="GOV.UK Send Form"
method="post"
hidden>
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
data-track-category="Onsite Feedback"
data-track-action="GOV.UK Close Form"
aria-controls="something-is-wrong"
aria-expanded="true">
<%= t("components.feedback.close") %>
</button>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down Expand Up @@ -49,6 +41,16 @@
<%= render "govuk_publishing_components/components/button", {
text: t("components.feedback.send")
} %>

<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
data-track-category="Onsite Feedback"
data-track-action="GOV.UK Close Form"
aria-controls="something-is-wrong"
aria-expanded="true">
<%= t("components.feedback.close") %>
</button>

</div>
</div>
</form>
Expand Down
20 changes: 11 additions & 9 deletions app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,6 @@
data-track-category="yesNoFeedbackForm"
data-track-action="Send Form"
method="post">
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
data-track-category="yesNoFeedbackForm"
data-track-action="ffFormClose"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
<%= t("components.feedback.close") %>
</button>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
Expand All @@ -37,6 +28,17 @@
<%= render "govuk_publishing_components/components/button", {
text: t("components.feedback.send_me_survey"),
} %>

<button
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
data-track-category="yesNoFeedbackForm"
data-track-action="ffFormClose"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
<%= t("components.feedback.close") %>
</button>

</div>
</div>
</form>
Loading

0 comments on commit f98dd3d

Please sign in to comment.