diff --git a/src/components/choreographer/CdrChoreographer.vue b/src/components/choreographer/CdrChoreographer.vue index 177954f8d..dde2508a2 100644 --- a/src/components/choreographer/CdrChoreographer.vue +++ b/src/components/choreographer/CdrChoreographer.vue @@ -53,7 +53,7 @@ const style = useCssModule(); @@ -63,6 +63,15 @@ const style = useCssModule(); + diff --git a/src/components/choreographer/examples/Choreographer.vue b/src/components/choreographer/examples/Choreographer.vue index 09c45579a..85f028645 100644 --- a/src/components/choreographer/examples/Choreographer.vue +++ b/src/components/choreographer/examples/Choreographer.vue @@ -2,11 +2,11 @@

choreographer

Standalone card built from schema

-
- -
+ -

Card

+
@@ -26,64 +25,83 @@ export default { name: 'Choreographer', components: { ...Components, -}, + }, data() { return { schemaA: [ + { + type: 'mediaObject', + slots: { + media: { + type: 'image', + props: { + alt: 'A sample image', + src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md', + }, + }, + content: { + content: [ + { type: 'kicker', content: 'Example kicker' }, + { type: 'title', content: 'Example title' }, + ], + }, + }, + }, { type: 'image', props: { - alt: "standard landscape", - src: "https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md", + alt: 'standard landscape', + src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md', responsive: true, - cover: true + cover: true, }, }, { type: 'kicker', - content: 'skills' + content: 'skills', }, { type: 'link', props: { href: '#', - modifier: 'standalone' + modifier: 'standalone', }, content: [ { type: 'title', props: { tag: 'p' }, - content: 'Running nutrition basics' - } - ] + content: 'Running nutrition basics', + }, + ], }, { type: 'rating', props: { - rating: "4.0", - count: "49", - size: "small" - } + rating: '4.0', + count: '49', + size: 'small', + }, }, { type: 'abstract', - content: 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.' - } + content: + 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.', + }, ], schemaB: [ { type: 'card', props: { - as: 'lead' + as: 'lead', }, content: [ { type: 'image', props: { - alt: "standard landscape", - src: "https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md", + alt: 'standard landscape', + src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md', responsive: true, - cover: true + cover: true, }, }, { @@ -91,40 +109,41 @@ export default { props: { tag: 'span', }, - content: 'skills' + content: 'skills', }, { type: 'link', props: { href: '#', modifier: 'standalone', - class: "cdr-card__link" + class: 'cdr-card__link', }, content: [ { type: 'title', props: { tag: 'p' }, - content: 'Running nutrition basics' - } - ] + content: 'Running nutrition basics', + }, + ], }, { type: 'rating', props: { - rating: "4.0", - count: "49", - size: "small" - } + rating: '4.0', + count: '49', + size: 'small', + }, }, { type: 'abstract', - content: 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.' - } - ] - } - ] - } - } + content: + 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.', + }, + ], + }, + ], + }; + }, }; @@ -140,7 +159,5 @@ export default { max-width: 600px; margin-bottom: 5rem; padding-bottom: 2.4rem; - - } diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts index 43648be46..d9afa5441 100644 --- a/src/types/interfaces.ts +++ b/src/types/interfaces.ts @@ -75,8 +75,9 @@ export interface selectOption { } export interface choreographerSchema { - type: string; + type?: string; props?: object; + slots?: { [key: string]: choreographerSchema }; content?: string | choreographerSchema; }