Skip to content

Commit

Permalink
chore: sugar code
Browse files Browse the repository at this point in the history
  • Loading branch information
@robsongajunior
robsongajunior committed Oct 3, 2024
1 parent ed4977a commit deb862d
Show file tree
Hide file tree
Showing 16 changed files with 978 additions and 985 deletions.
62 changes: 27 additions & 35 deletions src/stories/templates/sections/section-bullets-right.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,33 @@ ${Rules.section.list}
},
}

const MOCK = {
overline: 'Marketplace',
title: 'What is the Azion Marketplace?',
description: "The Azion Marketplace is a digital catalog that makes it easy to find, test, and deploy edge-enabled software that runs anywhere. The Marketplace brings together a wide range of solutions that you can use to enhance, compose, or customize your applications.",
const config = (args) => {
return {
components: { ContentSection, UnorderedList, LinkButton, Container },
setup() {
return { args }
},
template: `
<Container class="surface-ground">
<ContentSection :title="args.title" :overline="args.overline" :description="args.description" titleTag="h2">
<template #actions>
<LinkButton v-for="({ link, label, outlined }) in args.buttons" :link="link" :label="label" :outlined="outlined" />
</template>
<template #main>
<UnorderedList :data="args.contentListBlock" />
</template>
</ContentSection>
</Container>
`
}
}

const Template = (args) => (config(args))
export const Default = Template.bind({})
Default.args = {
"overline": 'Marketplace',
"title": 'What is the Azion Marketplace?',
"description": "The Azion Marketplace is a digital catalog that makes it easy to find, test, and deploy edge-enabled software that runs anywhere. The Marketplace brings together a wide range of solutions that you can use to enhance, compose, or customize your applications.",
"buttons": [{
"label": "Try it for freet",
"link": "https://console.azion.com/signup"
Expand All @@ -54,34 +77,3 @@ const MOCK = {
}
]
}

const template = `
<Container class="surface-ground">
<ContentSection :title="args.title" :overline="args.overline" :description="args.description" titleTag="h2">
<template #actions>
<LinkButton v-for="({ link, label, outlined }) in args.buttons" :link="link" :label="label" :outlined="outlined" />
</template>
<template #main>
<UnorderedList :data="args.contentListBlock" />
</template>
</ContentSection>
</Container>`

const Template = (args) => ({
components: { ContentSection, UnorderedList, LinkButton, Container },
setup() {
return { args }
},
template: template
})

export const Default = Template.bind({})
Default.args = MOCK

Default.parameters = {
docs: {
description: {
story: ''
},
source: { code: template } },
};
101 changes: 56 additions & 45 deletions src/stories/templates/sections/section-card-background.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,62 @@ ${Rules.section.cards}
},
}

const MOCK = {
const config = (args) => {
return {
components: {
ContentSection,
CardBase,
Overline,
CardTitle,
CardBgImage,
Container
},
setup() {
return { args }
},
template: `
<Container class="surface-ground">
<ContentSection
titleTag="h2"
position="center"
isContentCentralized
textCenter
:title="args.title"
>
<template #actions>
<LinkButton
v-for="({ link, label, outlined }) in args.buttons"
:link="link"
:label="label"
:outlined="outlined"
/>
</template>
<template #main>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<CardBase v-for="({ label, title, image, alt }) in args.cards">
<template #content-raw>
<CardBgImage :alt="alt" :image="image">
<template #content>
<div class="flex flex-col gap-5 z-20">
<Overline :label="label" />
<CardTitle>{{ title }}</CardTitle>
</div>
</template>
</CardBgImage>
</template>
</CardBase>
</div>
</template>
</ContentSection>
</Container>
`
}
}

const Template = (args) => (config(args))
export const Default = Template.bind({})
Default.args = {
title: "Let's build together",
description: "Azion has always focused on the core values of innovation, reliability, and the ability to make transparent, forward-looking decisions, and execute them with precision and agility. We believe that our success depends on the success of our customers.",
"buttons": [{
Expand Down Expand Up @@ -63,47 +118,3 @@ const MOCK = {
}
]
}

const template = `
<Container class="surface-ground">
<ContentSection titleTag="h2" position="center" isContentCentralized textCenter :title="args.title">
<template #actions>
<LinkButton v-for="({ link, label, outlined }) in args.buttons" :link="link" :label="label" :outlined="outlined" />
</template>
<template #main>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<CardBase v-for="({ label, title, image, alt }) in args.cards">
<template #content-raw>
<CardBgImage :alt="alt" :image="image">
<template #content>
<div class="flex flex-col gap-5 z-20">
<Overline :label="label" />
<CardTitle>{{ title }}</CardTitle>
</div>
</template>
</CardBgImage>
</template>
</CardBase>
</div>
</template>
</ContentSection>
</Container>`

const Template = (args) => ({
components: { ContentSection, CardBase, Overline, CardTitle, CardBgImage, Container },
setup() {
return { args }
},
template: template
})

export const Default = Template.bind({})
Default.args = MOCK

Default.parameters = {
docs: {
description: {
story: ''
},
source: { code: template } },
};
76 changes: 38 additions & 38 deletions src/stories/templates/sections/section-card-carousel.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,44 @@ import Container from '../../../templates/container'
import SectionCardCarousel from '../../../templates/sectioncardcarousel'
import Rules from '../../rules'

const MOCK = {
export default {
title: 'Blocks/Sections/section-card-carousel',
component: SectionCardCarousel,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component: `
### Content rules
${Rules.section.overline}
${Rules.section.title}
${Rules.section.cards}
`
}
}
}
}

const config= (args) => {
return {
components: {
Container,
SectionCardCarousel
},
setup() {
return { args }
},
template: `
<Container class="surface-ground">
<SectionCardCarousel v-bind="args" />
</Container>
`
}
}

const Template = (args) => (config(args))
export const Default = Template.bind({})
Default.args = {
"responsiveOptions": [
{
breakpoint: '1400px',
Expand Down Expand Up @@ -79,41 +116,4 @@ const MOCK = {
]
}

const config= (args) => {
return {
components: {
Container,
SectionCardCarousel
},
setup() {
return { args }
},
template: `
<Container class="surface-ground">
<SectionCardCarousel v-bind="args" />
</Container>
`
}
}

const Template = (args) => (config(args))
export const Default = Template.bind({})
Default.args = MOCK

export default {
title: 'Blocks/Sections/section-card-carousel',
component: SectionCardCarousel,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component: `
### Content rules
${Rules.section.overline}
${Rules.section.title}
${Rules.section.cards}
`
}
}
}
}
Loading

0 comments on commit deb862d

Please sign in to comment.