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

Uhf 6666 filter styles #424

Merged
Merged
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion dist/css/styles.min.css

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/scss/06_components/forms/__index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import 'checkbox';
@import 'collapsible';
@import 'form';
@import 'openid-connect-login-form';
@import 'user-login-form';
@import 'react-forms';
@import 'select';
82 changes: 82 additions & 0 deletions src/scss/06_components/forms/_collapsible.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
$collapsible-height: 56px;

.collapsible-wrapper {
position: relative;
}

.collapsible__element {
border: 2px solid #808080;
}

.collapsible-container {
align-items: center;
background: $color-white;
display: flex;
height: $collapsible-height;
margin-bottom: $spacing;
padding: $spacing;
}

.collapsible__title {
width: calc(100% - $spacing-and-half);
}

.collapsible__control {
align-items: center;
background: $color-white;
display: flex;
font-size: 18px;
height: 56px;
padding: 12px 16px;
text-align: start;
width: 100%;

&:hover {
cursor: pointer;
}

&:active,
&:hover,
&:focus {
border-color: $color-black;
}

&:focus {
outline: 3px solid $color-black;
}
}

.collapsible__control[aria-expanded="true"] {
border-bottom: 1px solid $color-black-20;
}

// Match the HDS style of outlining handle when control is focused
.collapsible__control:focus .collapsible__handle {
outline: 3px solid $color-black;
}

// ... and hide the outline when dropdown is opened
.collapsible__control[aria-expanded="true"] .collapsible__handle {
outline: none;
}


.collapsible__handle {
pointer-events: none;
}

.collapsible__children {
background-color: $color-white;
border-top: none;
padding: $spacing;
position: absolute;
width: 100%;

// Show above other components when opened
z-index: 2;
}

.collapsible__helper {
color: $color-black-60;
margin-top: $spacing-half;
}
83 changes: 83 additions & 0 deletions src/scss/06_components/forms/_react-forms.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
// Checkbox styles need specific selectors to override HDS styles
.hdbt-search__filter.hdbt-search__checkbox {
--background-unselected: transparent;
--background-selected: var(--hdbt-color-black);
--background-hover: var(--hdbt-color-black);
--border-color-selected: var(--hdbt-color-black);
--border-color-selected-hover: var(--hdbt-color-black);
--border-color-selected-focus: var(--hdbt-color-black);
--border-color-unselected: var(--hdbt-color-black);
--border-color-unselected-hover: var(--hdbt-color-black);
--border-color-unselected-focus: var(--hdbt-color-black);
--icon-color-unselected: transparent;
--icon-color-selected: var(--hdbt-text-color);
--icon-color-disabled: var(--hdbt-text-color);
--focus-outline-color: var(--hdbt-color-black);
}

.hdbt-search__filter.hdbt-search__checkbox label {
font-weight: $font-weight-regular;
}

.hdbt-search__filter {
margin-bottom: $spacing;
}

// Override HDBTs li+li style {
.hdbt-search__filter li {
margin-top: 0;
}

.hdbt-search__filter label {
color: $color-black;
display: block;
font-weight: $font-weight-medium;
margin-bottom: $spacing-quarter;
}

// Need specific selector here to override HDS styles
.hdbt-search__submit-button:not(:disabled) {
--background-color: var(--hdbt-color-black);
--background-color-hover: var(--hdbt-text-color);
--background-color-focus: var(--hdbt-text-color);
--background-color-hover-focus: var(--hdbt-text-color);
--border-color: var(--hdbt-color-black);
--border-color-hover: var(--hdbt-color-black);
--border-color-focus: var(--hdbt-color-black);
--border-color-hover-focus: var(--hdbt-color-black);
--color: var(--hdbt-text-color);
--color-hover: var(--hdbt-color-black);
--color-focus: var(--hdbt-color-black);
--color-hover-focus: var(--hdbt-color-black);
--focus-outline-color: var(--hdbt-color-black);
}

// Override HDS styles for date input
.hdbt-search__filter.hdbt-search__date-input {
--focus-outline-color: var(--hdbt-color-black);
}

// Override HDBT table styles to fix date picker
.hdbt-search__date-input table {
border: none;
display: table;
margin-top: 0;
}

.hdbt-search__date-input table tbody tr td {
min-width: unset;
}

.hdbt-search__date-input table thead th {
background: $color-white;
color: $color-black;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
}

.hdbt-search__date-input table tbody tr td,
.hdbt-search__date-input table thead th {
min-width: unset;
}
53 changes: 45 additions & 8 deletions src/scss/06_components/paragraphs/_event-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -173,14 +173,6 @@ $tag-vertical-padding: 5px;
margin-bottom: $spacing-and-half;
}

.event-list__load-more {
@include flex-gap($spacing);
}

.event-list__load-more-button {
margin-bottom: $spacing;
}

.event-list-spinner {
position: relative;
}
Expand All @@ -191,3 +183,48 @@ $tag-vertical-padding: 5px;
margin-top: $spacing-triple;
position: relative;
}

.event-form-container {
border-bottom: 1px solid $color-black-20;
margin-bottom: $spacing-double;
}

.event-form__filters-container {
margin-top: $spacing;
}

.event-form__filter-section-container {
display: flex;
flex-direction: column;

@include breakpoint($breakpoint-l) {
flex-direction: row;
flex-wrap: wrap;

@include flex-gap($spacing-and-half);
}
}

// Override HDS style for multiple checkboxes
.event-form__filter-section-container .hdbt-search__checkbox:not(:first-of-type) {
@include breakpoint($breakpoint-l) {
margin-top: 0;
}
}

.event-form__filter--date,
.event-form__filter--location {
@include breakpoint($breakpoint-l) {
flex: 1;
}
}

.event-form__checkboxes-label {
font-weight: $font-weight-medium;
margin-bottom: $spacing;
}

.event-list__submit-button {
margin-bottom: $spacing-triple;
margin-top: $spacing;
}
11 changes: 9 additions & 2 deletions templates/paragraphs/paragraph--event-list.html.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

{% block paragraph %}
{% embed "@hdbt/misc/component.twig" with
{
Expand All @@ -13,7 +12,15 @@
%}
{% block component_content %}
{# Hook React app to this div #}
<div id="helfi-events-search"></div>
<div
id="helfi-events-search"
data-events-url="{{ events_url }}"
data-show-location-filter="{{ field_event_location }}"
data-show-time-filter="{{ field_event_time }}"
data-show-free-events-filter="{{ field_free_events }}"
data-show-remote-events-filter="{{ field_remote_events }}"
>
</div>
{# Indicate JS not enabled #}
<noscript>
<div class="event-list__javascript-disabled">
Expand Down