-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
21 changed files
with
1,294 additions
and
249 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
examples/nuxt-app/components/global/TideSearchBarComponentExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
<template> | ||
<div class="tide-search-bar-component-example"> | ||
<RplSearchBar | ||
:id="id" | ||
:variant="variant" | ||
:input-label="inputLabel" | ||
:input-value="inputValue.q" | ||
:placeholder="placeholder" | ||
:suggestions="suggestions" | ||
:global-events="globalEvents" | ||
:show-clear-button="false" | ||
@submit="handleSubmit" | ||
@update:input-value="handleUpdate" | ||
> | ||
<template #afterInput> | ||
<label for="query-type" class="rpl-u-visually-hidden"> | ||
Select a search type | ||
</label> | ||
<RplFormDropdown | ||
id="query-type" | ||
label-id="query-type-label-id" | ||
:multiple="false" | ||
:value="props.inputValue.queryType || 'title_content'" | ||
:options="[ | ||
{ | ||
id: 'title_content', | ||
label: 'Title and content', | ||
value: 'title_content' | ||
}, | ||
{ | ||
id: 'title', | ||
label: 'Title', | ||
value: 'title' | ||
}, | ||
{ | ||
id: 'content', | ||
label: 'Content', | ||
value: 'content' | ||
} | ||
]" | ||
@onChange="handleChange" | ||
/> | ||
</template> | ||
</RplSearchBar> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
interface Props { | ||
id: string | ||
variant?: string | ||
inputLabel: string | ||
inputValue: Record<string, any> | ||
placeholder: string | ||
suggestions: any[] | ||
globalEvents: boolean | ||
handleSubmit: (event: any) => void | ||
handleUpdate: (event: any) => void | ||
} | ||
const props = withDefaults(defineProps<Props>(), { | ||
variant: 'default' | ||
}) | ||
const handleChange = (value: string) => props.handleUpdate({ queryType: value }) | ||
</script> | ||
|
||
<style> | ||
@import '@dpc-sdp/ripple-ui-core/style/breakpoints'; | ||
.tide-search-bar-component-example { | ||
.rpl-search-bar__inner { | ||
display: grid; | ||
grid-template-columns: 1fr auto; | ||
gap: 0 var(--rpl-sp-4); | ||
@media (--rpl-bp-l) { | ||
display: flex; | ||
align-items: center; | ||
} | ||
} | ||
.rpl-form-dropdown { | ||
order: 1; | ||
grid-column: span 2; | ||
@media (--rpl-bp-l) { | ||
width: 210px; | ||
order: initial; | ||
} | ||
.rpl-form-dropdown__chevron { | ||
right: var(--local-search-bar-inline-padding); | ||
} | ||
&-input { | ||
height: auto; | ||
border-radius: 0; | ||
padding-block: var(--local-search-bar-block-padding); | ||
padding-inline: var(--local-search-bar-inline-padding); | ||
&:not(:focus):not(.rpl-u-focusable--force-on) { | ||
border-color: transparent; | ||
border-top-color: var(--rpl-clr-neutral-200); | ||
} | ||
@media (--rpl-bp-l) { | ||
padding: var(--rpl-sp-1) var(--rpl-sp-3); | ||
&:not(:focus):not(.rpl-u-focusable--force-on) { | ||
border-top-color: transparent; | ||
border-left-color: var(--rpl-clr-neutral-300); | ||
border-right-color: var(--rpl-clr-neutral-300); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
examples/nuxt-app/test/features/search-listing/search-query.feature
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
Feature: Search Queries | ||
|
||
Background: | ||
Given the site endpoint returns fixture "/site/reference" with status 200 | ||
And I am using a "macbook-16" device | ||
|
||
@mockserver | ||
Example: The search term query can be extended and a custom query config supplied | ||
Given the page endpoint for path "/" returns fixture "/search-listing/search-query/page" with status 200 | ||
And the search network request is stubbed with fixture "/search-listing/search-query/response" and status 200 | ||
|
||
When I visit the page "/" | ||
And the search network request should be called with the "/search-listing/search-query/request-initial" fixture | ||
Then the search listing page should have 2 results | ||
|
||
When I type "Demo" into the search input | ||
And I click the search button | ||
Then the URL should reflect that the current active filters are as follows: | ||
| id | value | | ||
| q | Demo | | ||
And the search network request should be called with the "/search-listing/search-query/request-title-content" fixture | ||
|
||
When I click the search listing dropdown field labelled "Select a search type" | ||
Then the selected dropdown field should have the items: | ||
| Title and content | | ||
| Title | | ||
| Content | | ||
Then I click the option labelled "Content" in the selected dropdown | ||
And I click the search button | ||
|
||
Then the URL should reflect that the current active filters are as follows: | ||
| id | value | | ||
| q | Demo | | ||
| search[queryType] | content | | ||
And the search network request should be called with the "/search-listing/search-query/request-content" fixture | ||
|
||
When I toggle the search listing filters section | ||
And I clear the search filters | ||
And the search network request should be called with the "/search-listing/search-query/request-initial" fixture |
Oops, something went wrong.