Skip to content

Commit d55cea3

Browse files
IgnacioBecerraIgnacioBecerra
authored
feat(search): reintroduce scoped search (#9659)
### Related Ticket(s) #8416 #9633 ### Description This PR reintroduces the previously removed scoped search functionality while Search changes were being made. Now that the changes have been done, we can reintroduce this feature. To test, go to the Scoped search masthead story, change the scope with the dropdown menu, look up a query, and submit the search input query. You should be seeing a different page signaling that the search has been done in a specific part of IBM <img width="400" alt="Screen Shot 2022-11-17 at 4 37 37 PM" src="https://user-images.githubusercontent.com/24970122/202589794-c1cb1b83-2a83-476c-b88f-74a00bf45b40.png"> This is using the following URL that was automatically built through the search with typeahead component. https://www.ibm.com/search/scoped?lang=en&cc=US&lnk=mhsrch&scope-domain=scope&scope-value=["dw,dwaspera"]&scope-type=dw&scope-label=Desarrolladores&q=blockchain ### Changelog **New** - scoped search functionality reintroduced - e2e scoped search tests **Changed** - search component has extra parameters if scoped functionality is present **Removed** - removed feature flag for the scoped functionality as it will now be public <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
1 parent 7f58ec0 commit d55cea3

File tree

10 files changed

+507
-21
lines changed

10 files changed

+507
-21
lines changed

‎packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss

+4
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,10 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
477477
:host(#{$dds-prefix}-search-with-typeahead-item) {
478478
@extend .react-autosuggest__suggestion;
479479

480+
span {
481+
white-space: pre;
482+
}
483+
480484
&[groupTitle] {
481485
@include carbon--type-style('body-long-01', true);
482486

‎packages/utilities/src/utilities/settings/settings.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
* @exports ibmdotcom.settings
1212
* @type {object} Settings object
1313
* @property {string} [prefix=dds]
14-
* Carbon for IBM.com v1.40.0',
14+
* Carbon for IBM.com v1.41.1',
1515
*
1616
*/
1717
const settings = {
18-
version: 'Carbon for IBM.com v1.41.0',
18+
version: 'Carbon for IBM.com v1.41.1',
1919
stablePrefix: 'dds',
2020
};
2121

‎packages/web-components/src/components/masthead/__stories__/README.stories.mdx

+63
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,69 @@ The API results must match the following structure:
220220
```
221221
Note that only the first array element is necessary to render the basic search suggestions, the following JSON objects are optional Grouped sections.
222222

223+
## Scoped search
224+
Scoped searches are also supported, returning results from specifically targeted IBM pages and products.
225+
226+
First, prepare the desired categories to use when scoping the search. In this example, we will be creating an array with
227+
four categories, which must follow the structure below:
228+
229+
230+
```javascript
231+
const scopeParameters = [
232+
{
233+
name: 'All',
234+
appId: 'all',
235+
value: 'all',
236+
},
237+
{
238+
name: 'Analyst',
239+
appId: 'analyst',
240+
value: 'analyst'
241+
},
242+
{
243+
name: 'PartnerWorld',
244+
appId: 'pw',
245+
value: ['pw', 'pwp'],
246+
},
247+
{
248+
name: 'Developer',
249+
appId: 'dw',
250+
value: ['dw', 'dwaspera'],
251+
},
252+
{
253+
name: 'IBM Docs',
254+
appId: 'ibmdocs',
255+
value: ['ibmdocs', 'dw']
256+
label: 'Search Label', // optional
257+
}
258+
];
259+
```
260+
#### Note
261+
A list of the available scoped categories can be found [here](https://github.ibm.com/digital-marketplace/columbus/blob/master/docs/SCOPED.MD).
262+
263+
The `value` property can either be a single string, or an array of strings.
264+
265+
This array will be passed into the `scopeParameters` property. If using `lit-html` to render your page, this can be added
266+
using `.scopeParameters` (note the `.`), in order for the array to be processed properly in the component.
267+
268+
```html
269+
<dds-masthead-composite .scopeParameters="${scopeParameters}"></dds-masthead-composite>
270+
```
271+
272+
Alternatively, JavaScript can be used to insert it into the component.
273+
274+
```javascript
275+
document.querySelector('dds-masthead-composite').scopeParameters = scopeParameters;
276+
```
277+
278+
If a different locale is used, it will be necessary to use a formatter function to localize the placeholder text that
279+
will be rendered depending on the selected scope.
280+
281+
```javascript
282+
const placeholderFormatter = ({scopeValue}) => `Buscar en ${scopeValue}`;
283+
document.querySelector('dds-search-with-typeahead').placeholderFormatter = placeholderFormatter;
284+
```
285+
223286
## Props
224287

225288
### `<dds-masthead-container>`/`<dds-masthead-composite>`

‎packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx

+68
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,74 @@ The API results must match the following structure:
241241
```
242242
Note that only the first array element is necessary to render the basic search suggestions, the following JSON objects are optional Grouped sections.
243243

244+
## Scoped search
245+
Scoped searches are also supported, returning results from specifically targeted IBM pages and products.
246+
247+
First, prepare the desired categories to use when scoping the search. In this example, we will be creating an array with
248+
four categories, which must follow the structure below:
249+
250+
251+
```javascript
252+
const scopeParameters = [
253+
{
254+
name: 'All',
255+
appId: 'all',
256+
value: 'all',
257+
},
258+
{
259+
name: 'Analyst',
260+
appId: 'analyst',
261+
value: 'analyst'
262+
},
263+
{
264+
name: 'PartnerWorld',
265+
appId: 'pw',
266+
value: ['pw', 'pwp'],
267+
},
268+
{
269+
name: 'Developer',
270+
appId: 'dw',
271+
value: ['dw', 'dwaspera'],
272+
},
273+
{
274+
name: 'IBM Docs',
275+
appId: 'ibmdocs',
276+
value: ['ibmdocs', 'dw']
277+
label: 'Search Label', // optional
278+
}
279+
];
280+
```
281+
#### Note
282+
A list of the available scoped categories can be found [here](https://github.ibm.com/digital-marketplace/columbus/blob/master/docs/SCOPED.MD).
283+
284+
The `value` property can either be a single string, or an array of strings.
285+
286+
This array will be passed into the `scopeParameters` property. If using `lit-html` to render your page, this can be added
287+
using `.scopeParameters` (note the `.`), in order for the array to be processed properly in the component.
288+
289+
```javascript
290+
291+
function App() {
292+
return (
293+
<DDSMastheadContainer scopeParameters={scopeParameters}></DDSMastheadContainer>
294+
);
295+
}
296+
```
297+
298+
Alternatively, JavaScript can be used to insert it into the component.
299+
300+
```javascript
301+
document.querySelector('dds-masthead-composite').scopeParameters = scopeParameters;
302+
```
303+
304+
If a different locale is used, it will be necessary to use a formatter function to localize the placeholder text that
305+
will be rendered depending on the selected scope.
306+
307+
```javascript
308+
const placeholderFormatter = ({scopeValue}) => `Buscar en ${scopeValue}`;
309+
document.querySelector('dds-search-with-typeahead').placeholderFormatter = placeholderFormatter;
310+
```
311+
244312

245313

246314
## Props

‎packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,35 @@ const platformData = {
3333
url: 'https://www.ibm.com/cloud',
3434
};
3535

36+
const scopeParameters = [
37+
{
38+
name: 'All',
39+
appId: 'all',
40+
value: 'all',
41+
},
42+
{
43+
name: 'Analyst',
44+
appId: 'analyst',
45+
value: 'analyst',
46+
},
47+
{
48+
name: 'PartnerWorld',
49+
appId: 'pw',
50+
value: ['pw', 'pwp'],
51+
},
52+
{
53+
name: 'Developer',
54+
appId: 'dw',
55+
value: ['dw', 'dwaspera'],
56+
},
57+
{
58+
name: 'IBM Docs',
59+
appId: 'ibmdocs',
60+
label: 'Search Label',
61+
value: ['ibmdocs', 'dw'],
62+
},
63+
];
64+
3665
async function customTypeaheadApiFunction(searchVal) {
3766
return fetch(`https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=undefined&categories=&limit=6`)
3867
.then(response => response.json())
@@ -237,6 +266,35 @@ withAlternateLogoAndTooltip.story = {
237266
},
238267
};
239268

269+
export const WithScopedSearch = args => {
270+
const { customProfileLogin, platform, hasProfile, hasSearch, selectedMenuItem, searchPlaceholder, userStatus, navLinks } =
271+
args?.MastheadComposite ?? {};
272+
273+
if (!hasSearch) {
274+
setTimeout(() => {
275+
document.querySelector('dds-masthead-container')?.removeAttribute('has-search');
276+
}, 1000);
277+
}
278+
279+
return (
280+
<DDSMastheadContainer
281+
platform={platform}
282+
platformUrl={platformData.url}
283+
selected-menu-item={selectedMenuItem}
284+
user-status={userStatus}
285+
searchPlaceholder={searchPlaceholder}
286+
navLinks={navLinks}
287+
has-profile={hasProfile}
288+
has-search={hasSearch}
289+
custom-profile-login={customProfileLogin}
290+
scopeParameters={scopeParameters}></DDSMastheadContainer>
291+
);
292+
};
293+
294+
WithScopedSearch.story = {
295+
name: 'With scoped search',
296+
};
297+
240298
export default {
241299
title: 'Components/Masthead',
242300
decorators: [

‎packages/web-components/src/components/masthead/__stories__/masthead.stories.ts

+86
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,35 @@ const urlObject = {
5050
},
5151
};
5252

53+
const scopeParameters = [
54+
{
55+
name: 'All',
56+
appId: 'all',
57+
value: 'all',
58+
},
59+
{
60+
name: 'Analyst',
61+
appId: 'analyst',
62+
value: 'analyst',
63+
},
64+
{
65+
name: 'PartnerWorld',
66+
appId: 'pw',
67+
value: ['pw', 'pwp'],
68+
},
69+
{
70+
name: 'Developer',
71+
appId: 'dw',
72+
value: ['dw', 'dwaspera'],
73+
},
74+
{
75+
name: 'IBM Docs',
76+
appId: 'ibmdocs',
77+
label: 'Search Label',
78+
value: ['ibmdocs', 'dw'],
79+
},
80+
];
81+
5382
async function customTypeaheadApiFunction(searchVal) {
5483
return fetch(
5584
`https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=undefined&categories=&limit=6`
@@ -507,6 +536,63 @@ withAlternateLogoAndTooltip.story = {
507536
},
508537
};
509538

539+
export const WithScopedSearch = ({ parameters }) => {
540+
const {
541+
customProfileLogin,
542+
platform,
543+
selectedMenuItem,
544+
userStatus,
545+
searchPlaceholder,
546+
hasProfile,
547+
hasSearch,
548+
navLinks,
549+
} = parameters?.props?.MastheadComposite ?? {};
550+
const { useMock } = parameters?.props?.Other ?? {};
551+
552+
return html`
553+
<style>
554+
${styles}
555+
</style>
556+
${useMock
557+
? html`
558+
<dds-masthead-composite
559+
platform="${ifNonNull(platform)}"
560+
.platformUrl="${ifNonNull(platformData.url)}"
561+
selected-menu-item="${ifNonNull(selectedMenuItem)}"
562+
user-status="${ifNonNull(userStatus)}"
563+
searchPlaceholder="${ifNonNull(searchPlaceholder)}"
564+
.authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
565+
?has-profile="${hasProfile}"
566+
?has-search="${hasSearch}"
567+
.navLinks="${navLinks}"
568+
.unauthenticatedProfileItems="${ifNonNull(
569+
unauthenticatedProfileItems
570+
)}"
571+
custom-profile-login="${customProfileLogin}"
572+
.scopeParameters=${scopeParameters}
573+
></dds-masthead-composite>
574+
`
575+
: html`
576+
<dds-masthead-container
577+
platform="${ifNonNull(platform)}"
578+
.platformUrl="${ifNonNull(platformData.url)}"
579+
selected-menu-item="${ifNonNull(selectedMenuItem)}"
580+
user-status="${ifNonNull(userStatus)}"
581+
searchPlaceholder="${ifNonNull(searchPlaceholder)}"
582+
.navLinks="${navLinks}"
583+
?has-profile="${hasProfile}"
584+
?has-search="${hasSearch}"
585+
custom-profile-login="${customProfileLogin}"
586+
.scopeParameters=${scopeParameters}
587+
></dds-masthead-container>
588+
`}
589+
`;
590+
};
591+
592+
WithScopedSearch.story = {
593+
name: 'With scoped search',
594+
};
595+
510596
export default {
511597
title: 'Components/Masthead',
512598
decorators: [

‎packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown-mobile.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
5252
bubbles: true,
5353
composed: true,
5454
detail: {
55-
value,
55+
appId: value,
5656
},
5757
})
5858
);

‎packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class DDSScopedSearchDropdown extends DDSDropdown {
4141
bubbles: true,
4242
composed: true,
4343
detail: {
44-
value: item.value,
44+
appId: item.value,
4545
},
4646
};
4747
const constructor = this.constructor as typeof DDSScopedSearchDropdown;

0 commit comments

Comments
 (0)