-
Notifications
You must be signed in to change notification settings - Fork 39
refactor(atomic): migrate atomic-insight-result-template to Lit #6871
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
Open
Copilot
wants to merge
8
commits into
main
Choose a base branch
from
copilot/migrate-atomic-insight-template
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+764
−177
Open
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
acea493
Initial plan
Copilot b637e8d
feat(atomic): migrate atomic-insight-result-template to Lit
Copilot a1dc190
test(atomic): add unit tests for atomic-insight-result-template
Copilot 3b77ab9
docs(atomic): add MDX documentation for atomic-insight-result-template
Copilot 579a11c
works
alexprudhomme d25211b
Add generated files
developer-experience-bot[bot] b118d66
done
alexprudhomme fa032e3
Merge branch 'copilot/migrate-atomic-insight-template' of https://git…
alexprudhomme File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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
147 changes: 147 additions & 0 deletions
147
...nents/insight/atomic-insight-result-template/atomic-insight-result-template.mdx
This file contains hidden or 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,147 @@ | ||
| import { Meta } from '@storybook/addon-docs/blocks'; | ||
| import * as AtomicInsightResultTemplateStories from './atomic-insight-result-template.new.stories'; | ||
| import { AtomicDocTemplate } from '@/storybook-utils/documentation/atomic-doc-template'; | ||
|
|
||
| <Meta of={AtomicInsightResultTemplateStories} /> | ||
|
|
||
| <AtomicDocTemplate | ||
| stories={AtomicInsightResultTemplateStories} | ||
| defaultStory="Default" | ||
| githubPath="insight/atomic-insight-result-template/atomic-insight-result-template.ts" | ||
| tagName="atomic-insight-result-template" | ||
| className="AtomicInsightResultTemplate" | ||
| > | ||
|
|
||
| This component defines the UI display of your search results within an Insight interface. | ||
| A `template` element must be the child of an `atomic-insight-result-template`. Furthermore, an `atomic-insight-result-list` or `atomic-insight-folded-result-list` must be the parent of each `atomic-insight-result-template`. | ||
|
|
||
| **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the results are being rendered. | ||
|
|
||
| Example using the `atomic-insight-result-list`: | ||
|
|
||
| ```html | ||
| <atomic-insight-interface> | ||
| <atomic-insight-result-list> | ||
| <atomic-insight-result-template> | ||
| <template> | ||
| <atomic-result-section-visual> | ||
| <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/seed/picsum/350"></atomic-result-image> | ||
| </atomic-result-section-visual> | ||
|
|
||
| <atomic-result-section-badges> | ||
| <atomic-field-condition must-match-sourcetype="YouTube"> | ||
| <atomic-result-badge | ||
| label="YouTube" | ||
| class="youtube-badge" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-badges> | ||
|
|
||
| <atomic-result-section-title> | ||
| <atomic-result-link></atomic-result-link> | ||
| </atomic-result-section-title> | ||
|
|
||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
|
|
||
| <atomic-result-section-bottom-metadata> | ||
| <atomic-result-fields-list> | ||
| <atomic-field-condition class="field" if-defined="source"> | ||
| <span class="field-label"> | ||
| <atomic-text value="source"></atomic-text>: | ||
| </span> | ||
| <atomic-result-text field="source"></atomic-result-text> | ||
| </atomic-field-condition> | ||
|
|
||
| <atomic-field-condition class="field" if-defined="author"> | ||
| <span class="field-label"> | ||
| <atomic-text value="author"></atomic-text>: | ||
| </span> | ||
| <atomic-result-text field="author"></atomic-result-text> | ||
| </atomic-field-condition> | ||
|
|
||
| <atomic-field-condition class="field" if-defined="date"> | ||
| <span class="field-label"> | ||
| <atomic-text value="date"></atomic-text>: | ||
| </span> | ||
| <atomic-result-date></atomic-result-date> | ||
| </atomic-field-condition> | ||
| </atomic-result-fields-list> | ||
| </atomic-result-section-bottom-metadata> | ||
| </template> | ||
| </atomic-insight-result-template> | ||
| </atomic-insight-result-list> | ||
| </atomic-insight-interface> | ||
| ``` | ||
|
|
||
| ## Template Conditions | ||
|
|
||
| You can use conditions to display different templates based on result properties. You can specify as many `must-match-*` and `must-not-match-*` attributes as you want on a template, each targeting a different field. Each attribute can accept multiple comma-separated values. | ||
|
|
||
| **Comma represents OR:** Within a single attribute, comma-separated values represent a logical OR. For example, `must-match-sourcetype="YouTube,Salesforce"` means the sourcetype must be YouTube OR Salesforce. | ||
|
|
||
| **Multiple attributes represent AND:** All conditions from different attributes must be met (logical AND) for the template to apply to a result. | ||
|
|
||
| If you set both `must-match-*` and `must-not-match-*` for the same field and there is any overlap in values, the template will be ignored (it will never match any result). | ||
|
|
||
| **Order of declaration matters:** The first template whose conditions are met will be applied. If a default template (without conditions) is declared first, it will apply to all results, even if other templates with conditions are declared later. | ||
|
|
||
| ### Examples | ||
|
|
||
| ```html | ||
| <!-- Template applies if sourcetype is YouTube or Salesforce, and language is NOT fr --> | ||
| <atomic-insight-result-template | ||
| must-match-sourcetype="YouTube,Salesforce" | ||
| must-not-match-language="fr" | ||
| > | ||
| <template> | ||
| <!-- ... --> | ||
| </template> | ||
| </atomic-insight-result-template> | ||
|
|
||
| <!-- This template will never apply, because the same value is required and forbidden --> | ||
| <atomic-insight-result-template | ||
| must-match-sourcetype="YouTube" | ||
| must-not-match-sourcetype="YouTube" | ||
| > | ||
| <template> | ||
| <!-- ... --> | ||
| </template> | ||
| </atomic-insight-result-template> | ||
| ``` | ||
|
|
||
| ### Multiple Templates Example | ||
|
|
||
| ```html | ||
| <atomic-insight-result-list> | ||
| <!-- Template for YouTube videos --> | ||
| <atomic-insight-result-template must-match-sourcetype="YouTube"> | ||
| <template> | ||
| <atomic-result-section-visual> | ||
| <atomic-result-image field="ytthumbnailurl"></atomic-result-image> | ||
| </atomic-result-section-visual> | ||
| <atomic-result-section-title> | ||
| <atomic-result-link></atomic-result-link> | ||
| </atomic-result-section-title> | ||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
| </template> | ||
| </atomic-insight-result-template> | ||
|
|
||
| <!-- Default template for all other results --> | ||
| <atomic-insight-result-template> | ||
| <template> | ||
| <atomic-result-section-title> | ||
| <atomic-result-link></atomic-result-link> | ||
| </atomic-result-section-title> | ||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
| </template> | ||
| </atomic-insight-result-template> | ||
| </atomic-insight-result-list> | ||
| ``` | ||
|
|
||
| </AtomicDocTemplate> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The documentation uses inconsistent terminology. Throughout this file, "result items" is used (lines 16, 42, 50, 54, etc.), but the search component version uses "results" for consistency. The MDX documentation should use "results" instead of "result items" to maintain consistency with atomic-result-template documentation.