@coveo/atomic-react 3.11.33 → 3.11.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -43
- package/dist/cjs/atomic-react.cjs +1830 -1986
- package/dist/cjs/atomic-react.cjs.map +1 -1
- package/dist/cjs/commerce/atomic-react.cjs +172 -331
- package/dist/cjs/commerce/atomic-react.cjs.map +1 -1
- package/dist/cjs/recommendation/atomic-react.cjs +1830 -1987
- package/dist/cjs/recommendation/atomic-react.cjs.map +1 -1
- package/dist/esm/atomic-react.mjs +1 -1
- package/dist/esm/atomic-react.mjs.map +1 -1
- package/dist/esm/commerce/atomic-react.mjs +2 -3
- package/dist/esm/commerce/atomic-react.mjs.map +1 -1
- package/dist/esm/recommendation/atomic-react.mjs +1 -2
- package/dist/esm/recommendation/atomic-react.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -90,9 +90,7 @@ import {
|
|
|
90
90
|
} from '@coveo/atomic-react';
|
|
91
91
|
import {useMemo} from 'react';
|
|
92
92
|
|
|
93
|
-
const MyResultTemplateForYouTubeVideos: React.FC<{result: Result}> = ({
|
|
94
|
-
result,
|
|
95
|
-
}) => {
|
|
93
|
+
const MyResultTemplateForYouTubeVideos: React.FC<{result: Result}> = ({result}) => {
|
|
96
94
|
return (
|
|
97
95
|
<>
|
|
98
96
|
<AtomicResultSectionVisual>
|
|
@@ -113,9 +111,7 @@ const MyResultTemplateForYouTubeVideos: React.FC<{result: Result}> = ({
|
|
|
113
111
|
);
|
|
114
112
|
};
|
|
115
113
|
|
|
116
|
-
const MyResultTemplateForSalesforceCases: React.FC<{result: Result}> = ({
|
|
117
|
-
result,
|
|
118
|
-
}) => {
|
|
114
|
+
const MyResultTemplateForSalesforceCases: React.FC<{result: Result}> = ({result}) => {
|
|
119
115
|
return (
|
|
120
116
|
<>
|
|
121
117
|
<AtomicResultSectionTitle>
|
|
@@ -197,20 +193,11 @@ This option works well if you do not need to create any CSS rule that would need
|
|
|
197
193
|
For example, if you want to modify the color of all result links in a template to `pink`, you could do so like this:
|
|
198
194
|
|
|
199
195
|
```tsx
|
|
200
|
-
import {
|
|
201
|
-
|
|
202
|
-
AtomicSearchInterface,
|
|
203
|
-
AtomicResultList,
|
|
204
|
-
} from '@coveo/atomic-react';
|
|
205
|
-
import {
|
|
206
|
-
buildSearchEngine,
|
|
207
|
-
getSampleSearchEngineConfiguration,
|
|
208
|
-
} from '@coveo/headless';
|
|
196
|
+
import {AtomicResultLink, AtomicSearchInterface, AtomicResultList} from '@coveo/atomic-react';
|
|
197
|
+
import {buildSearchEngine, getSampleSearchEngineConfiguration} from '@coveo/headless';
|
|
209
198
|
import {useMemo} from 'react';
|
|
210
199
|
|
|
211
|
-
const MyStyledResultLink: React.FC<
|
|
212
|
-
React.ComponentProps<typeof AtomicResultLink>
|
|
213
|
-
> = (props) => {
|
|
200
|
+
const MyStyledResultLink: React.FC<React.ComponentProps<typeof AtomicResultLink>> = (props) => {
|
|
214
201
|
return (
|
|
215
202
|
<AtomicResultLink {...props} style={{color: 'pink'}}>
|
|
216
203
|
{props.children}
|
|
@@ -251,15 +238,8 @@ This option works in all scenarios, and allows you to target any Shadow parts th
|
|
|
251
238
|
The following is an example that makes the text of an `AtomicResultBadge` pink:
|
|
252
239
|
|
|
253
240
|
```tsx
|
|
254
|
-
import {
|
|
255
|
-
|
|
256
|
-
AtomicResultList,
|
|
257
|
-
AtomicResultBadge,
|
|
258
|
-
} from '@coveo/atomic-react';
|
|
259
|
-
import {
|
|
260
|
-
buildSearchEngine,
|
|
261
|
-
getSampleSearchEngineConfiguration,
|
|
262
|
-
} from '@coveo/headless';
|
|
241
|
+
import {AtomicSearchInterface, AtomicResultList, AtomicResultBadge} from '@coveo/atomic-react';
|
|
242
|
+
import {buildSearchEngine, getSampleSearchEngineConfiguration} from '@coveo/headless';
|
|
263
243
|
import {useMemo} from 'react';
|
|
264
244
|
|
|
265
245
|
const myStyles = `
|
|
@@ -356,31 +336,19 @@ Then, we need to add the required dependencies in our page. You can do that like
|
|
|
356
336
|
```html
|
|
357
337
|
<head>
|
|
358
338
|
<!-- React, ReactDOM and ReactDOMServer need to be included -->
|
|
359
|
-
<script
|
|
360
|
-
|
|
361
|
-
src="https://unpkg.com/react@18/umd/react.production.min.js"
|
|
362
|
-
></script>
|
|
363
|
-
<script
|
|
364
|
-
crossorigin
|
|
365
|
-
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
|
|
366
|
-
></script>
|
|
339
|
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
340
|
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
367
341
|
<script
|
|
368
342
|
crossorigin
|
|
369
343
|
src="https://unpkg.com/react-dom@18/umd/react-dom-server-legacy.browser.production.min.js"
|
|
370
344
|
></script>
|
|
371
345
|
|
|
372
346
|
<!-- Optional script, which allows to use JSX directly in an inline script in the page -->
|
|
373
|
-
<script
|
|
374
|
-
crossorigin
|
|
375
|
-
src="https://unpkg.com/@babel/standalone@7/babel.min.js"
|
|
376
|
-
></script>
|
|
347
|
+
<script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
|
|
377
348
|
|
|
378
349
|
<!-- @coveo/headless need to be included as a dependency -->
|
|
379
350
|
<!-- Note the matching major and minor version as explained above -->
|
|
380
|
-
<script
|
|
381
|
-
crossorigin
|
|
382
|
-
src="https://static.cloud.coveo.com/headless/v2.8/headless.js"
|
|
383
|
-
></script>
|
|
351
|
+
<script crossorigin src="https://static.cloud.coveo.com/headless/v2.8/headless.js"></script>
|
|
384
352
|
|
|
385
353
|
<!-- @coveo/atomic need to be included as a dependency -->
|
|
386
354
|
<!-- Note the matching major and minor version as explained above -->
|