-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[SDPA-3306] add mapping example (#555)
* [SDPA-3306] Added example for mapping with minor fix * Updated search code examples to make them working
- Loading branch information
Showing
17 changed files
with
448 additions
and
206 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
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
15 changes: 15 additions & 0 deletions
15
examples/basic-examples/test/e2e/integration/custom/mapping.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,15 @@ | ||
| Feature: Custom mapping | ||
|
|
||
| Custom mapping should work | ||
|
|
||
| Background: | ||
| Given I visit the page "/" | ||
|
|
||
| Scenario: Example for overriding mapping with custom filter | ||
| And the example filter is applied | ||
|
|
||
| Scenario: Example for adding async filter | ||
| And the example async filter is applied | ||
|
|
||
| Scenario: Example for overriding core filter | ||
| And the core filter is overrode |
15 changes: 15 additions & 0 deletions
15
examples/basic-examples/test/e2e/integration/custom/mapping/step_definition.js
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,15 @@ | ||
| /* global cy */ | ||
|
|
||
| import { Then } from 'cypress-cucumber-preprocessor/steps' | ||
|
|
||
| Then(`the example filter is applied`, () => { | ||
| cy.get('.rpl-hero-banner__title span').should('contain', '[demo]') | ||
| }) | ||
|
|
||
| Then(`the example async filter is applied`, () => { | ||
| cy.get('.rpl-hero-banner__description').should('contain', '[demo]') | ||
| }) | ||
|
|
||
| Then(`the core filter is overrode`, () => { | ||
| cy.get('.rpl-hero-banner__link-list-item .rpl-text-label span span').should('contain', '[demo]') | ||
| }) |
7 changes: 7 additions & 0 deletions
7
examples/basic-examples/tide/modules/example-override-mapping/README.md
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,7 @@ | ||
| # Ripple with custom mapping example | ||
|
|
||
| The mapping config is for mapping Tide data to Frontend Vue component(Not have to be Ripple components). | ||
|
|
||
| This is a example for overriding the Ripple default component mapping. | ||
|
|
||
| In this module, we are override the `heroBanner` mapping with custom filters. |
40 changes: 40 additions & 0 deletions
40
examples/basic-examples/tide/modules/example-override-mapping/mapping-filters.js
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,40 @@ | ||
| // Filters for adding extra process on a mapping value | ||
|
|
||
| // Create more filters if need. | ||
| module.exports = { | ||
|
|
||
| // Add your own filter, must with your own name prefix to avoid name conflict. | ||
| eomPageTitle: (pageTitle) => { | ||
| return `[demo] ${pageTitle}` | ||
| }, | ||
|
|
||
| // An async filter example. | ||
| eomIntroText: async (introText) => { | ||
| const promise = new Promise((resolve, reject) => { | ||
| // Do some process | ||
| setTimeout(function () { | ||
| const processed = `[demo] ${introText}` | ||
| resolve(processed) | ||
| }, 300) | ||
| }) | ||
| return promise | ||
| }, | ||
|
|
||
| // We can override core filter by using same core filter name. | ||
| // Ripple v1.3.x required for this feature. | ||
| // ! Be careful, this way is hard to maintain. | ||
| // Use your own filter like above is the safer way. | ||
| paragraphKeyJourneyLinks: function (fieldParagraphLinks) { | ||
| if (typeof fieldParagraphLinks !== 'undefined' && fieldParagraphLinks !== null) { | ||
| let rtn = [] | ||
| fieldParagraphLinks.forEach(item => { | ||
| rtn.push({ | ||
| url: item.url || item.uri, | ||
| text: `[demo] ${item.title}` | ||
| }) | ||
| }) | ||
| return rtn | ||
| } | ||
| } | ||
|
|
||
| } |
42 changes: 42 additions & 0 deletions
42
examples/basic-examples/tide/modules/example-override-mapping/tide.config.js
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,42 @@ | ||
| // Grid columns setting for cards. | ||
|
|
||
| module.exports = { | ||
|
|
||
| mapping: { | ||
| tideField: { | ||
|
|
||
| // A example for overriding default `heroBanner` mapping in https://github.com/dpc-sdp/ripple/blob/v1.2.1/packages/ripple-nuxt-tide/lib/config/tide.config.js#L33 | ||
| // You can do: | ||
| // - Map to your own component. | ||
| // - Use your own filters to process the Tide field data. | ||
| 'heroBanner': { | ||
| component: 'rpl-hero-banner', | ||
| props: { | ||
| title: { | ||
| field: 'pageTitle', | ||
| // Demo of a custom filter here. | ||
| filters: ['eomPageTitle'] | ||
| }, | ||
| introText: { | ||
| field: 'introText', | ||
| // Demo of another custom filter here. | ||
| filters: ['eomIntroText'] | ||
| }, | ||
| linkHeading: ['keyJourneys', 'field_paragraph_title'], | ||
| links: { | ||
| field: ['keyJourneys', 'field_paragraph_links'], | ||
| filters: ['paragraphKeyJourneyLinks'] | ||
| }, | ||
| moreLink: { | ||
| field: ['keyJourneys', 'field_paragraph_cta'], | ||
| filters: ['paragraphCta'] | ||
| }, | ||
| theme: 'theme', | ||
| showLinks: 'showLinks', | ||
| logo: 'logo', | ||
| backgroundGraphic: 'backgroundGraphic' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
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
Oops, something went wrong.