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.

Sign up for GitHub

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

Jump to bottom

feat: add search results and dialog with input (resolves #207) #252

Merged
merged 5 commits into from
Feb 19, 2020
Merged

feat: add search results and dialog with input (resolves #207) #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f527c45
feat: add support for optional text input to dialog component
greatislander Feb 18, 2020
c68ad0f
feat: apply basic styles to search results
greatislander Feb 18, 2020
df70c42
feat: search results layout
greatislander Feb 18, 2020
00373c8
fix: spacing adjustments'
greatislander Feb 19, 2020
9b30444
fix: adjust copy for saved search modal
greatislander Feb 19, 2020
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
28 changes: 25 additions & 3 deletions src/assets/scripts/Pinecone/Dialog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,23 @@ class Dialog {
this.btn = btn;
this.config = {
...{
title: 'Confirm action',
question: 'Do you want to do this?',
dismiss: 'No',
confirm: 'Yes',
inputLabel: false,
inputDescription: false,
input: false,
callback:
/**
* Callback for when one was not provided.
*/
() => {
console.error( 'No callback provided.' ); // eslint-disable-line
( input ) => {
if ( input ) {
console.log( `Responded with "${input}".` ); // eslint-disable-line
} else {
console.error( 'Callback not provided.' ); // eslint-disable-line
}
}
},
...options
Expand Down Expand Up @@ -61,6 +72,15 @@ class Dialog {
if ( this.config.question ) {
innerHtml += `<p id="q-${unique + 1}">${this.config.question}</p>`;
}
if ( this.config.input && this.config.inputLabel ) {
innerHtml += '<div class="input-group">';
innerHtml += `<label for="${this.config.input}">${this.config.inputLabel}</label>`;
innerHtml += `<input id="${this.config.input}" type="text" name="${this.config.input}" />`;
Copy link
Contributor

Choose a reason for hiding this comment

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

Couple questions (more design related):

  • Should there be an explicit close button on the dialog? My expectation is there should be one.
  • If the input field is mandatory, I think the initial focus should be on the input field (or second in the tab order if a close button is added as per comment above).
  • If the input field is optional, the initial focus can be on "No, don't save".

Thoughts?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

* Should there be an explicit close button on the dialog? My expectation is there should be one.

I thought we had discussed this at some point, but my thinking was that we shouldn't. I was thinking this for a few reasons:

  1. The modal is essentially an enhanced version of a native confirm() dialog, which doesn't provide a close button; you either confirm or cancel (hitting the esc key is effectively the same as cancelling the operation).
  2. This guide doesn't mention adding a close button other than the cancel button: https://guide.inclusivedesign.ca/tools/AccessibleDevelopmentTools.html
  3. In this case, where a user may have entered text, closing the dialog with a neutral close button as opposed to a specific cancel button might lead some users to think that if they invoke the dialog again, their input will be preserved.
* If the input field is mandatory, I think the initial focus should be on the input field (or second in the tab order if a close button is added as per comment above).

Agreed! Fixed in c220f9b.

* If the input field is optional, the initial focus can be on "No, don't save".

if ( this.config.inputDescription ) {
innerHtml += `<p class="input-group__description">${this.config.inputDescription}</p>`;
greatislander marked this conversation as resolved.
Show resolved Hide resolved
}
innerHtml += '</div>';
}
innerHtml += `
<div class="buttons">
<button class="button button--secondary dismiss">${this.config.dismiss}</button>
Expand Down Expand Up @@ -95,9 +115,11 @@ class Dialog {

dismiss.focus();


confirm.onclick = () => {
const input = ( document.getElementById( this.config.input ) ) ? document.getElementById( this.config.input ).value : false;
close();
callback();
callback( input );
};
dismiss.onclick = () => close();
dialog.addEventListener( 'keydown', e => {
Expand Down
10 changes: 0 additions & 10 deletions src/assets/scripts/pinecone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,13 +101,3 @@ const searchToggle = document.querySelector( '.search-toggle' );
if ( searchToggle ) {
new Pinecone.SearchToggle( searchToggle, searchToggle.nextElementSibling );
}

const dialogBtn = document.getElementById( 'invoke-dialog' );
if ( dialogBtn ) {
new Pinecone.Dialog( dialogBtn, {
title: 'Remove resource?',
question: 'Are you sure you want to remove this resource from your favorites?',
confirm: 'Yes, remove',
dismiss: 'No, don&rsquo;t remove'
} );
}
8 changes: 8 additions & 0 deletions src/assets/styles/components/_dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@
.buttons button + button {
margin-top: rem(16);
}

p + .input-group {
margin-top: rem(24);
}

input {
max-width: 100%;
}
}

.overlay {
Expand Down
40 changes: 39 additions & 1 deletion src/assets/styles/components/_filter-sort.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
}
}

.save-wrapper {
margin-top: rem(-20);
padding: 0 0 rem(24);
position: relative;
}

.accordion + .input-group {
margin-top: rem(24);
}
Expand Down Expand Up @@ -173,6 +179,10 @@
.sort-wrapper {
@include grid-column-span(4, 8, 5);
}

.save-wrapper {
@include grid-column-span(8, 8);
}
}

#hide-filters {
Expand Down Expand Up @@ -320,6 +330,25 @@
@include grid-column-span(8, 12, 5);
}

.search-results .sort-wrapper {
@include grid-column-span(4, 12, 5);

text-align: left;
}

.save-wrapper {
@include grid-column-span(4, 12, 9);

margin-top: 0;
padding: $gutter 0 0;
text-align: right;

.button--borderless {
display: inline-block;
margin: rem(6) rem(-8) rem(6) rem(24);
}
}

#show-filters,
#hide-filters {
display: none;
Expand Down Expand Up @@ -352,7 +381,6 @@
}
}


@include breakpoint-up(xl) {
.filter-wrapper {
@include grid-margin-right(1, 16);
Expand All @@ -362,4 +390,14 @@
.sort-wrapper {
@include grid-column-span(12, 16, 5);
}

.search-results .sort-wrapper {
@include grid-column-span(6, 16, 5);

text-align: left;
}

.save-wrapper {
@include grid-column-span(6, 16, 11);
}
}
65 changes: 50 additions & 15 deletions src/assets/styles/layouts/_archive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,52 @@
.archive {
.archive,
.search-results {
--parent-background-color: var(--off-white);
background-color: var(--off-white);
}

.archive .page-header {
.archive .page-header,
.search-results .page-header {
@include full-width-background(var(--white));
@include grid-column-span(4, 4);
}

.archive .current-filters {
.archive .current-filters,
.search-results .current-filters {
@include grid-column-span(4, 4);

* + .tag-buttons {
margin-top: $gutter;

.h3 {
margin-top: rem(16);
}

h2 + p {
margin-top: rem(6);
}

.h4 {
margin-top: rem(24);
}

.h3 + .h4 {
margin-top: rem(12);
}

* + .tags {
margin-top: 0;
}
}

.archive main {
.archive main,
.search-results main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

@include breakpoint-up(sm) {
.archive main {
.archive main,
.search-results main {
@supports (display: $grid) {
column-gap: $gutter;
display: grid;
Expand All @@ -32,52 +55,64 @@
}

.archive .page-header,
.archive .current-filters {
.search-results .page-header,
.archive .current-filters,
.search-results .current-filters {
@include grid-column-span(8, 8, 1);
}
}

@include breakpoint-up(md) {
.archive .page-header {
.archive .page-header,
.search-results .page-header {
padding: rem(157) 0 rem(114);
}
}

@include breakpoint-up(lg) {
.archive main {
.archive main,
.search-results main {
@supports (display: $grid) {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto auto 1fr;
}
}

.archive .page-header {
.archive .page-header,
.search-results .page-header {
padding: rem(148) 0 rem(154);

@include grid-column-span(12, 12, 1);
}

.archive .current-filters {
.archive .current-filters,
.search-results .current-filters {
@include grid-column-span(8, 12, 5);

margin-top: 0;
}

.archive:not([class*="taxonomy"]) .filter-wrapper {
.archive:not([class*="taxonomy"]) .filter-wrapper,
.search-results:not([class*="taxonomy"]) .filter-wrapper {
margin-top: rem(24);
}
}

@include breakpoint-up(xl) {
.archive main {
.archive main,
.search-results main {
@supports (display: $grid) {
grid-template-columns: repeat(16, 1fr);
}
}

.archive .page-header {
.archive .page-header,
.search-results .page-header {
@include grid-column-span(16, 16, 1);
}

.archive .current-filters {
.archive .current-filters,
.search-results .current-filters {
@include grid-column-span(12, 16, 5);
}
}
24 changes: 21 additions & 3 deletions src/components/02-molecules/06-dialog/dialog.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,27 @@ module.exports = {
title: 'Dialog',
status: 'wip',
context: {
buttonIcon: 'delete',
buttonLabel: 'Remove favorite',
dialogTitle: 'Remove favorite',
dialogContent: 'Are your sure you want to remove this resource from your favorites?',
dialogQuestion: 'Are your sure you want to remove this resource from your favorites?',
dialogConfirm: 'Yes, remove',
dialogCancel: 'No, don&rsquo;t remove'
}
dialogDismiss: 'No, don&rsquo;t remove'
},
variants: [
{
name: 'Dialog with Input',
context: {
buttonIcon: 'save',
buttonLabel: 'Save search',
dialogTitle: 'Save search',
dialogQuestion: 'Do you want to add these search results to your saved searches?',
dialogInput: 'label',
dialogInputLabel: 'Saved Search Label',
dialogInputDescription: 'Enter a label for these search results so you can identify them later.',
dialogConfirm: 'Yes, save',
dialogDismiss: 'No, don&rsquo;t save'
}
},
]
};
22 changes: 21 additions & 1 deletion src/components/02-molecules/06-dialog/dialog.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,22 @@
{% if not standAlone %}<div class="spacer"></div>{% endif %}
{% render '@button--borderless', {label: 'Remove favorite', id: 'invoke-dialog', icon: 'delete', iconPosition: 'start', standAlone: true}, true %}
{% render '@button--borderless', {label: buttonLabel, id: 'invoke-dialog', icon: buttonIcon, iconPosition: 'start', standAlone: true}, true %}
<script>
const dialogBtn = document.getElementById( 'invoke-dialog' );
if ( dialogBtn ) {
new window.Pinecone.Dialog( dialogBtn, {
title: "{{ dialogTitle | safe }}",
question: "{{ dialogQuestion | safe }}",
{% if dialogInput %}
input: "{{ dialogInput }}",
{% endif %}
{% if dialogInputLabel %}
inputLabel: "{{ dialogInputLabel | safe }}",
{% endif %}
{% if dialogInputDescription %}
inputDescription: "{{ dialogInputDescription | safe }}",
{% endif %}
confirm: "{{ dialogConfirm | safe }}",
dismiss: "{{ dialogDismiss | safe }}"
} );
}
</script>
3 changes: 2 additions & 1 deletion src/components/03-layouts/02-archive/archive.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
</div>
{% if currentTags and foundPosts %}
<div class="current-filters">
<p class="h3">Showing {{ foundPosts }} of 742 resources</p>
<p class="h3">Showing {{ foundPosts }} of 742 resources for:</p>
<h2 class="h4">Applied filters</h2>
<ul class="tags">
{% for tag in currentTags %}
{% render '@button--tag-button', {standAlone: true, label: tag.label}, true %}
Expand Down
Loading