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();
{{ entry?.content }}
+
+
+
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;
}