diff --git a/.storybook/main.js b/.storybook/main.js index 21bfbf5b..6cdb43b2 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ const config = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', + '@storybook/addon-docs', '@chromatic-com/storybook', '@storybook/addon-interactions', '@storybook/addon-themes', diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 956f001f..7ac317f0 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -1,3 +1,10 @@ + + + \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 7b83f546..0e770427 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -18,7 +18,21 @@ setup((app) => { export const parameters = { options: { storySort: { - order: ['Blocks', 'Components Group', 'Components', 'Elements'], + method: 'alphabetical', + order: [ + 'Blocks', + [ + 'Hero', + 'Sections', + 'Banner', + 'Pages', + 'List' + ], + 'Components Group', + 'Components', + 'Layout', + 'Elements' + ], }, }, backgrounds: { diff --git a/package.json b/package.json index c6c58f2b..29aff456 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@semantic-release/git": "^10.0.1", "@semantic-release/github": "^9.2.6", "@semantic-release/release-notes-generator": "12.1.0", + "@storybook/addon-docs": "^8.3.2", "@storybook/addon-essentials": "^8.2.9", "@storybook/addon-interactions": "^8.2.9", "@storybook/addon-links": "^8.2.9", diff --git a/src/stories/Rules.js b/src/stories/Rules.js new file mode 100644 index 00000000..48f8444b --- /dev/null +++ b/src/stories/Rules.js @@ -0,0 +1,53 @@ +// rules.js + +const Rules = { + hero: { + title: "- **Title:** Titles should be between 40 and 60 characters, or a maximum of 3 lines in 1440px (width) for better readability.", + description: "- **Description:** Descriptions should be between 80 and 160 characters, ensuring they are concise and informative, without overwhelming the user.", + overline: "- **Overline:** Overlines should not exceed 32 characters to maintain their auxiliary purpose.", + image: '- **Image:** A image need to be included to enrich the content. Ensure that the option enhances the message without distracting from the main purpose of the Hero.', + imageVideo: '- **Image/Video:** A image or video can be included to enrich the content. Ensure that the option enhances the message without distracting from the main purpose of the Hero.', + cards: '- **Cards:** It is recommended to limit the number of cards to a maximum of 4, with each card title limited to 30 characters and the card description to 60 characters.', + cta: '- **Actions (CTA):** Limit the number of CTA buttons to a maximum of 2. The first should be a primary button, and the second a secondary button. Ensure button labels are concise, with a maximum of 20 characters, and all links should be valid.', + form: '- **Forms:** Use clear and descriptive placeholders for fields, and avoid including too many fields. Keep the form as practical as possible to increase the likelihood of user submission.', + logos: '- **Logos:** Try to put multiples of 4 logos in logo-content-block. Ensure the svg logos are balanced and with the currentColor property in fill. The title is optional, when used try to limit to the maximum of 50 characters.', + banner: '- **Banner:** The banner is optional. Use it to inform some important news about the product or company, try to keep the text between 40 and 100 characters for better banner esthetic.', + avatar: '- **Avatar:** The avatar need to have a photo of the person face, the name and role.', + }, + heroProduct: { + overline: '- **Overline:** The overline must always mention the pillar where the product is categorized (e.g., "Build", "Secure", "Deploy", "Observe") or if it is a "Solution".', + title: '- **Title:** The title should clearly state the product’s value proposition, summarizing its key benefits in a concise way. Also, the product name needs to appear above in gray. The title should be between 40 and 60 characters.', + cta: '- **Actions (CTA):** Limit to 2 CTA buttons. The primary button should lead to key product actions, and the secondary button should offer additional options. Labels should not exceed 20 characters.', + image: '- **Image:** The image must clearly reflect a key feature of the product, ensuring visual coherence with the product’s message and benefits.', + list: '- **List:** The list of benefits should contain short and direct items, with a clear focus on the main features and advantages of the product. Each item title should not exceed 30 characters, and each description should not exceed 80 characters.' + }, + section: { + overline: "- **Overline:** Overlines should not exceed 32 characters to maintain their auxiliary purpose.", + title: "- **Title:** Titles should be between 40 and 60 characters, or a maximum of 3 lines in 1440px (width) for better readability.", + description: "- **Description:** Descriptions should be between 80 and 160 characters, ensuring they are concise and informative, without overwhelming the user.", + cta: '- **Actions (CTA):** Limit the number of CTA buttons to a maximum of 2. Ensure button labels are concise, with a maximum of 20 characters, and all links should be valid.', + navigation: "- **Navigation:** Navigations is like a buttons, ensure the labels are concise, with a maximum of 20 characters, and all links should be valid. ", + logos: '- **Logos:** Try to put multiples of 2 logos in logo-content-block. Ensure the svg logos are balanced and with the currentColor property in fill.', + cards: "- **Cards:** Cards highlight important information and can have an overline and a title, both following the same rules outlined above.", + cardsProducts: "- **Product Cards:** The product name should be used as the title, followed by a brief description of up to 240 characters. Ensure that all product and add-ons links are valid.", + cardsRelease: "- **Carousel Cards:** The tag can only be filled with either 'Tech Article' or 'Award'. The card title must not exceed 180 characters. Each card should include a valid link leading to an article with detailed information. Ensure that the logo functions well in both dark and light themes, and the description below the logo is concise yet provides additional details about the source and date. Additionally, ensure the call-to-action (CTA) is clear and follows the established CTA guidelines.", + cardsNavigation: "- **Cards Navigation:** Follow the same rules above for title and description. Cards navigation can have a multiple links, try to not exceed more of 6.", + bigNumbers: "- **Big Numbers:** Each number should include a concise title and a brief description (maximum 60 characters) explaining its significance. The title should highlight key achievements or statistics. Ensure that all icons are clear, visually support the metric, and maintain consistency with the overall visual style.", + cardsCases: "- **Cases Cards:** Each card should include a recognizable logo, a concise description (up to 240 characters) highlighting the key benefits and outcomes, and a valid link to the full success story. Ensure that the description clearly conveys the value of the solution in a brief and engaging manner. The tag should reflect the type of success, and the logo should be visually consistent across dark and light modes. The CTA link should direct users to detailed case study pages.", + image: "- **Image:** A image is required. Ensure that the option enhances the message.", + list: "- **List:** A clear and concise title (up to 50 characters), and a brief description (up to 240 characters) that summarizes the key point. Ensure that the icon used is relevant to the content. Avoid of more of 6 itens.", + avatars: "- **Avatars:** Each avatar should include a clear image (minimum size of 160x160px). Ensure that the name and role of the person are displayed below the avatar. All avatars should link to the individual's LinkedIn profile, and the link should open in a new tab.", + link: "- **Link:** Links buttons can be used to gave more details for the section content that already existis in another. Try to be clear and dont use more than 6 words to compose the label.", + form: '- **Forms:** Use clear and descriptive placeholders for fields, and avoid including too many fields. Keep the form as practical as possible to increase the likelihood of user submission.', + }, + banner: { + overline: "- **Overline:** Overlines should not exceed 32 characters to maintain their auxiliary purpose.", + title: "- **Title:** Titles should be between 40 and 60 characters, or a maximum of 3 lines in 1440px (width) for better readability.", + description: "- **Description:** Descriptions should be between 80 and 160 characters, ensuring they are concise and informative, without overwhelming the user.", + cta: '- **Actions (CTA):** Limit the number of CTA buttons to a maximum of 2. Ensure button labels are concise, with a maximum of 20 characters, and all links should be valid.', + image: "- **Image:** A image is required. Ensure that the option enhances the message.", + list: "- **List:** A clear and concise title (up to 50 characters) that summarizes the key point. Ensure that the icon used is relevant to the content.", + } +}; + +export default Rules; diff --git a/src/stories/templates/sections/section-highlight.stories.js b/src/stories/templates/banner/banner-architecture.stories.js similarity index 72% rename from src/stories/templates/sections/section-highlight.stories.js rename to src/stories/templates/banner/banner-architecture.stories.js index bde52601..87476410 100644 --- a/src/stories/templates/sections/section-highlight.stories.js +++ b/src/stories/templates/banner/banner-architecture.stories.js @@ -1,10 +1,23 @@ -import Container from '../../../templates/container' -import SectionHighlight from '../../../templates/sectionhighlight' +import Container from '../../../templates/container/Container' +import SectionHighlight from '../../../templates/sectionhighlight/SectionHighlight' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/section-highlight', + title: 'Blocks/Banner/banner-architecture', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.image} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionSimpleCTA.stories.js b/src/stories/templates/banner/banner-get-started.stories.js similarity index 80% rename from src/stories/templates/sections/SectionSimpleCTA.stories.js rename to src/stories/templates/banner/banner-get-started.stories.js index 2790b81d..5e1cbc45 100644 --- a/src/stories/templates/sections/SectionSimpleCTA.stories.js +++ b/src/stories/templates/banner/banner-get-started.stories.js @@ -1,11 +1,25 @@ -import Container from '../../../templates/container' -import ContentSection from '../../../templates/contentsection' -import LinkButton from '../../../templates/linkbutton' +import Container from '../../../templates/container/Container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Simple CTA', + title: 'Blocks/Banner/banner-get-started', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.banner.overline} +${Rules.banner.title} +${Rules.banner.cta} +${Rules.banner.list} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionCardBanner.stories.js b/src/stories/templates/banner/banner-live-map.stories.js similarity index 75% rename from src/stories/templates/sections/SectionCardBanner.stories.js rename to src/stories/templates/banner/banner-live-map.stories.js index 40e1c3e0..c872ad3d 100644 --- a/src/stories/templates/sections/SectionCardBanner.stories.js +++ b/src/stories/templates/banner/banner-live-map.stories.js @@ -1,14 +1,28 @@ -import Overline from '../../../templates/overline' -import LinkButton from '../../../templates/linkbutton' -import CardBase from '../../../templates/cardbase' -import CardDescription from '../../../templates/carddescription' -import CardTitle from '../../../templates/cardtitle' -import Container from '../../../templates/container' +import Overline from '../../../templates/overline/Overline' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import CardBase from '../../../templates/cardbase/CardBase' +import CardDescription from '../../../templates/carddescription/CardDescription' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Card Banner', + title: 'Blocks/Banner/banner-live-map', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.banner.overline} +${Rules.banner.title} +${Rules.banner.cta} +${Rules.banner.image} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/Lists/ListWithHero.stories.js b/src/stories/templates/hero/hero-blog-featured.stories.js similarity index 96% rename from src/stories/templates/Lists/ListWithHero.stories.js rename to src/stories/templates/hero/hero-blog-featured.stories.js index c01ebdf3..358c17a0 100644 --- a/src/stories/templates/Lists/ListWithHero.stories.js +++ b/src/stories/templates/hero/hero-blog-featured.stories.js @@ -1,10 +1,24 @@ -import FeaturedPost from '../../../templates/featuredpost' -import CardGridBlock from '../../../templates/cardgridblock' -import Container from '../../../templates/container' +import FeaturedPost from '../../../templates/featuredpost/FeaturedPost' +import CardGridBlock from '../../../templates/cardgridblock/CardGridBlock' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/List/Featured Hero', + title: 'Blocks/Hero/hero-blog-featured', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.image} +${Rules.hero.title} +${Rules.hero.description} +${Rules.hero.avatar} + `, + }, + }, + }, argTypes: { isSearchEnabled: { options: [true, false], diff --git a/src/stories/templates/content/ContentNavigation.stories.js b/src/stories/templates/hero/hero-content-navigation.stories.js similarity index 94% rename from src/stories/templates/content/ContentNavigation.stories.js rename to src/stories/templates/hero/hero-content-navigation.stories.js index 6b23e947..ec3d3de6 100644 --- a/src/stories/templates/content/ContentNavigation.stories.js +++ b/src/stories/templates/hero/hero-content-navigation.stories.js @@ -1,10 +1,10 @@ -import HeroArticle from '../../../templates/heroarticle'; +import HeroArticle from '../../../templates/heroarticle/HeroArticle'; import Breadcrumb from "primevue/breadcrumb"; -import MenuNavigation from '../../../templates/menunavigationblock' +import MenuNavigation from '../../../templates/menunavigationblock/MenuNavigationBlock' import Divider from 'primevue/divider' export default { - title: 'Blocks/Content/Content Navigation', + title: 'Blocks/Hero/hero-content-navigation', component: HeroArticle, tags: ['autodocs'], argTypes: {} diff --git a/src/stories/templates/content/ArticleHero.stories.js b/src/stories/templates/hero/hero-content.stories.js similarity index 77% rename from src/stories/templates/content/ArticleHero.stories.js rename to src/stories/templates/hero/hero-content.stories.js index 8b13a42e..fa4e7f29 100644 --- a/src/stories/templates/content/ArticleHero.stories.js +++ b/src/stories/templates/hero/hero-content.stories.js @@ -1,9 +1,22 @@ -import HeroArticle from '../../../templates/heroarticle'; +import HeroArticle from '../../../templates/heroarticle/HeroArticle'; import Breadcrumb from "primevue/breadcrumb"; -import Container from "../../../templates/container" +import Container from "../../../templates/container/Container" +import Rules from '../../rules' export default { - title: 'Blocks/Content/Article Hero', + title: 'Blocks/Hero/hero-content', + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.title} +${Rules.hero.description} +${Rules.hero.avatar} + `, + }, + }, + }, component: HeroArticle, tags: ['autodocs'], argTypes: {} diff --git a/src/stories/templates/hero/hero-form-horizontal.stories.js b/src/stories/templates/hero/hero-form-right.stories.js similarity index 96% rename from src/stories/templates/hero/hero-form-horizontal.stories.js rename to src/stories/templates/hero/hero-form-right.stories.js index 7d42792c..0e1b867c 100644 --- a/src/stories/templates/hero/hero-form-horizontal.stories.js +++ b/src/stories/templates/hero/hero-form-right.stories.js @@ -3,10 +3,26 @@ import LinkButton from '../../../templates/linkbutton' import ContentLogoBlock from '../../../templates/contentlogo' import FormBePartner from '../../../../dist/formbepartner' import Container from '../../../templates/container' +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-form-horizontal', + title: 'Blocks/Hero/hero-form-right', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.overline} +${Rules.hero.title} +${Rules.hero.description} +${Rules.hero.cta} +${Rules.hero.logos} +${Rules.hero.form} + `, + }, + }, + }, } const logos = Array(3).fill({ diff --git a/src/stories/templates/hero/hero-home-vertical.stories.js b/src/stories/templates/hero/hero-home.stories.js similarity index 90% rename from src/stories/templates/hero/hero-home-vertical.stories.js rename to src/stories/templates/hero/hero-home.stories.js index cf0fa633..5046ae14 100644 --- a/src/stories/templates/hero/hero-home-vertical.stories.js +++ b/src/stories/templates/hero/hero-home.stories.js @@ -1,11 +1,26 @@ -import HeroBlockBase from '../../../templates/herobase' -import LinkButton from '../../../templates/linkbutton' -import ContentLogoBlock from '../../../templates/contentlogo' -import Container from '../../../templates/container' +import HeroBlockBase from '../../../templates/herobase/HeroBase' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import ContentLogoBlock from '../../../templates/contentlogo/ContentLogo' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-home-vertical', + title: 'Blocks/Hero/hero-home', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.banner} +${Rules.hero.title} +${Rules.hero.description} +${Rules.hero.cta} +${Rules.hero.logos} + `, + }, + }, + }, } const logos = Array(4).fill({ @@ -41,7 +56,7 @@ const MOCK = { } ], bannerNews: { - description: "Azion Console for Developerss!", + description: "Azion Console for Developers!", cta: { label: "Access now.", link: "https://console.azion.com/login" diff --git a/src/stories/templates/hero/hero-marketplace-horizontal.stories.js b/src/stories/templates/hero/hero-image-right-logos.stories.js similarity index 90% rename from src/stories/templates/hero/hero-marketplace-horizontal.stories.js rename to src/stories/templates/hero/hero-image-right-logos.stories.js index ff477532..780cef07 100644 --- a/src/stories/templates/hero/hero-marketplace-horizontal.stories.js +++ b/src/stories/templates/hero/hero-image-right-logos.stories.js @@ -1,12 +1,26 @@ -import HeroBlockBase from '../../../templates/herobase' -import LinkButton from '../../../templates/linkbutton' -import ContentLogoBlock from '../../../templates/contentlogo' -import ImageSwitcher from '../../../templates/themeawareimageswitcher' -import Container from '../../../templates/container' +import HeroBlockBase from '../../../templates/herobase/HeroBase' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import ContentLogoBlock from '../../../templates/contentlogo/ContentLogo' +import ImageSwitcher from '../../../templates/themeawareimageswitcher/ImageSwitcher' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-marketplace-horizontal', + title: 'Blocks/Hero/hero-image-right-logos', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.overline} +${Rules.hero.title} +${Rules.hero.cta} +${Rules.hero.imageVideo} + `, + }, + }, + }, } const logos = Array(3).fill({ @@ -90,11 +104,6 @@ Default.parameters = { docs: { description: { story: ` - - * exemplo de description * - - Definições: - - Utilizar apenas 3 logos ` }, source: { code: HeroDisplay } }, diff --git a/src/stories/templates/hero/hero-product-vertical.stories.js b/src/stories/templates/hero/hero-product-bottom.stories.js similarity index 79% rename from src/stories/templates/hero/hero-product-vertical.stories.js rename to src/stories/templates/hero/hero-product-bottom.stories.js index 6aefaa50..0de9079b 100644 --- a/src/stories/templates/hero/hero-product-vertical.stories.js +++ b/src/stories/templates/hero/hero-product-bottom.stories.js @@ -1,11 +1,26 @@ -import HeroBlockBase from '../../../templates/herobase' -import LinkButton from '../../../templates/linkbutton' -import ImageSwitcher from '../../../templates/themeawareimageswitcher' -import Container from '../../../templates/container' +import HeroBlockBase from '../../../templates/herobase/HeroBase' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import ImageSwitcher from '../../../templates/themeawareimageswitcher/ImageSwitcher' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-product-vertical', + title: 'Blocks/Hero/hero-product-bottom', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.heroProduct.overline} +${Rules.heroProduct.title} +${Rules.heroProduct.cta} +${Rules.heroProduct.image} + + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/hero/hero-product-horizontal.stories.js b/src/stories/templates/hero/hero-product-right.stories.js similarity index 83% rename from src/stories/templates/hero/hero-product-horizontal.stories.js rename to src/stories/templates/hero/hero-product-right.stories.js index ebba3d3d..04f8659b 100644 --- a/src/stories/templates/hero/hero-product-horizontal.stories.js +++ b/src/stories/templates/hero/hero-product-right.stories.js @@ -1,10 +1,24 @@ -import HeroProductHorizontal from "../../../templates/heroproductshorizontal" -import Container from "../../../templates/container" - +import HeroProductHorizontal from "../../../templates/heroproductshorizontal/HeroProductsHorizontal" +import Container from "../../../templates/container/Container" +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-products-horizontal', + title: 'Blocks/Hero/hero-products-right', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.heroProduct.overline} +${Rules.heroProduct.title} +${Rules.heroProduct.cta} +${Rules.heroProduct.image} +${Rules.heroProduct.list} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/hero/hero-about-horizontal.stories.js b/src/stories/templates/hero/hero-video-right.stories.js similarity index 93% rename from src/stories/templates/hero/hero-about-horizontal.stories.js rename to src/stories/templates/hero/hero-video-right.stories.js index 89b38997..01a2852d 100644 --- a/src/stories/templates/hero/hero-about-horizontal.stories.js +++ b/src/stories/templates/hero/hero-video-right.stories.js @@ -1,16 +1,30 @@ -import HeroBlockBase from '../../../templates/herobase' -import BaseModal from "../../../templates/basemodal" +import HeroBlockBase from '../../../templates/herobase/HeroBase' +import BaseModal from "../../../templates/basemodal/Modal" import CardBaseClickable from "../../../templates/cardbaseclickable" -import CardTitle from "../../../templates/cardtitle" +import CardTitle from "../../../templates/cardtitle/CardTitle" import CardDescription from "../../../templates/carddescription" -import Tile from "../../../templates/tile" -import Container from '../../../templates/container' +import Tile from "../../../templates/tile/Tile" +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Hero/hero-about-horizontal', + title: 'Blocks/Hero/hero-video-right', tags: ['autodocs'], -} - + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.hero.overline} +${Rules.hero.title} +${Rules.hero.description} +${Rules.hero.imageVideo} +${Rules.hero.cards} + `, + }, + }, + }, +}; const HeroDisplay = ` diff --git a/src/stories/templates/layout/Container.stories.js b/src/stories/templates/layout/Container.stories.js index 42d1b7cf..73cbdb10 100644 --- a/src/stories/templates/layout/Container.stories.js +++ b/src/stories/templates/layout/Container.stories.js @@ -1,7 +1,7 @@ import Container from '../../../templates/container' export default { - title: 'Layout/ Container', + title: 'Layout/Container', component: Container, tags: ['autodocs'], argTypes: {} diff --git a/src/stories/templates/content/ContentView.stories.js b/src/stories/templates/layout/ContentView.stories.js similarity index 99% rename from src/stories/templates/content/ContentView.stories.js rename to src/stories/templates/layout/ContentView.stories.js index 41547137..125cab6e 100644 --- a/src/stories/templates/content/ContentView.stories.js +++ b/src/stories/templates/layout/ContentView.stories.js @@ -1,8 +1,8 @@ -import HeroArticle from '../../../templates/heroarticle'; +import HeroArticle from '../../../templates/heroarticle/HeroArticle'; import Breadcrumb from "primevue/breadcrumb"; -import ReadableContent from "../../../templates/readablecontent"; -import TableOfContents from "../../../templates/tableofcontents"; -import Sharer from "../../../templates/sharerblock"; +import ReadableContent from "../../../templates/readablecontent/ReadableContent"; +import TableOfContents from "../../../templates/tableofcontents/TableOfContents"; +import Sharer from "../../../templates/sharerblock/SharerBlock"; export default { title: 'Layout/Content', diff --git a/src/stories/templates/Lists/RelatedContent.stories.js b/src/stories/templates/list/content-related-blog.stories.js similarity index 98% rename from src/stories/templates/Lists/RelatedContent.stories.js rename to src/stories/templates/list/content-related-blog.stories.js index 711bc7a8..2cdd97a7 100644 --- a/src/stories/templates/Lists/RelatedContent.stories.js +++ b/src/stories/templates/list/content-related-blog.stories.js @@ -1,9 +1,9 @@ import Divider from 'primevue/divider' -import CardGridListWithLoadMore from '../../../templates/cardgridlistwithloadmore' -import Container from '../../../templates/container' +import CardGridListWithLoadMore from '../../../templates/cardgridlistwithloadmore/CardGridListWithLoadMore' +import Container from '../../../templates/container/Container' export default { - title: 'Blocks/List/Related Content', + title: 'Blocks/List/content-related-blog', tags: ['autodocs'], argTypes: { diff --git a/src/stories/templates/extras/404.stories.js b/src/stories/templates/pages/page-404.stories.js similarity index 93% rename from src/stories/templates/extras/404.stories.js rename to src/stories/templates/pages/page-404.stories.js index f46e7b1e..9bcbe2bf 100644 --- a/src/stories/templates/extras/404.stories.js +++ b/src/stories/templates/pages/page-404.stories.js @@ -1,10 +1,10 @@ -import Overline from '../../../templates/overline' -import EmptyState from '../../../templates/emptystateblock' -import Container from '../../../templates/container' +import Overline from '../../../templates/overline/Overline' +import EmptyState from '../../../templates/emptystateblock/EmptyStateBlock' +import Container from '../../../templates/container/Container' export default { - title: 'Blocks/Extras/404', + title: 'Blocks/Pages/page-404', tags: ['autodocs'], } diff --git a/src/stories/templates/sections/SectionCustomersCards.stories.js b/src/stories/templates/sections/SectionCustomersCards.stories.js deleted file mode 100644 index e91cc157..00000000 --- a/src/stories/templates/sections/SectionCustomersCards.stories.js +++ /dev/null @@ -1,65 +0,0 @@ - -import ContentSection from '../../../templates/contentsection' -import CardCases from '../../../templates/cardcases' -import Container from '../../../templates/container' - -export default { - title: 'Blocks/Sections/Customer Cards', - tags: ['autodocs'], -} - -const logo = ` - - - - - -` - -const MOCK = { - title: 'Customers Are Achieving Great Results With Jamstack websites', - "cards": [ - { - "logo": logo, - "tag": "Tech", - "description": "GetNinjas improves data analysis with Azion Data Streaming and obtains incredible performance, security, and availability in its applications.", - "link": "https://www.azion.com/en/success-case/getninjas/" - }, - { - "logo": logo, - "tag": "Tech", - "description": "VTEX builds ultra-low latency serverless applications with Azion and allows thousands of customers to accelerate their sales on the web.", - "link": "https://www.azion.com/en/success-case/vtex/" - } - ] -} - -const template = ` - - - - -` - -const Template = (args) => ({ - components: { ContentSection, CardCases, Container }, - setup() { - return { args } - }, - template: template -}) - -export const Default = Template.bind({}) -Default.args = MOCK - -Default.parameters = { - docs: { - description: { - story: '' - }, - source: { code: template } }, -}; diff --git a/src/stories/templates/sections/SectionGetStarted.stories.js b/src/stories/templates/sections/SectionGetStarted.stories.js deleted file mode 100644 index 4e9a799a..00000000 --- a/src/stories/templates/sections/SectionGetStarted.stories.js +++ /dev/null @@ -1,87 +0,0 @@ - -import ContentSection from '../../../templates/contentsection' -import LinkButton from '../../../templates/linkbutton' -import Tile from '../../../templates/tile' -import Container from '../../../templates/container' - -export default { - title: 'Blocks/Sections/Get Started', - tags: ['autodocs'], -} - -const MOCK = { - overline: 'Get Started', - title: "Sign-up and get $300,00 to use for 12 months. Ready to deploy?", - "buttons": [ - { - "label": "Free Account", - "link": "https://console.azion.com/signup" - }, - { - "label": "Talk to an Expert", - "link": "https://console.azion.com/signup", - "outlined": true - } - ], - items: [ - { - icon: "pi pi-tags", - text: "Access to all products" - }, - { - icon: "pi pi-credit-card", - text: "No credit card required" - }, - { - icon: "pi pi-dollar", - text: "Credit available to use for 12 months" - } - ] -} - -const template = ` - - - - - - -` - -const Template = (args) => ({ - components: { ContentSection, LinkButton, Tile, Container }, - setup() { - return { args } - }, - template: template -}) - -export const Default = Template.bind({}) -Default.args = MOCK - -Default.parameters = { - docs: { - description: { - story: '' - }, - source: { code: template } }, -}; diff --git a/src/stories/templates/sections/SectionTabMenuCarousel.stories.js b/src/stories/templates/sections/SectionTabMenuCarousel.stories.js deleted file mode 100644 index cdb53be8..00000000 --- a/src/stories/templates/sections/SectionTabMenuCarousel.stories.js +++ /dev/null @@ -1,172 +0,0 @@ - -import ContentSection from '../../../templates/contentsection' -import TabView from 'primevue/tabview'; -import TabPanel from 'primevue/tabpanel'; -import Carousel from "primevue/carousel"; -import Tag from "primevue/tag" -import CardBlog from "../../../templates/cardblog" -import CardBaseClickable from "../../../templates/cardbaseclickable" -import CardTitle from "../../../templates/cardtitle" -import CardDescription from "../../../templates/carddescription" -import Container from "../../../templates/container" - -export default { - title: 'Blocks/Sections/Tab Menu Carousel', - tags: ['autodocs'], -} - -const MOCK = { - "overline": "RECURSOS PARA A SOLUÇÃO", - "title": "Saiba mais sobre soluções edge enhanced por meio de exemplos de arquiteturas, guias e templates", - "description": "Aumente a performance dos seus ativos monolíticos e de microsserviços com as soluções da Azion para aplicações edge enhanced", - responsiveOptions: [ - { - breakpoint: '1400px', - numVisible: 3, - numScroll: 1 - }, - { - breakpoint: '1199px', - numVisible: 2, - numScroll: 1 - }, - { - breakpoint: '767px', - numVisible: 1, - numScroll: 1 - }, - ], - "data": [ - { - "panelName": "Arquiteturas", - "cards": [ - { - "imgSrc": "https://www.azion.com/assets/docs/images/uploads/edge-enhanced.png", - "imgAlt": "aplicacoes-edge-enhanced-1", - "title": "Aumente a performance dos seus ativos monolíticos e de microsserviços com as soluções da Azion para aplicações edge enhanced", - "description": "Aprenda como melhorar suas aplicações e APIs com edge computing.", - "link": "https://www.azion.com/pt-br/documentacao/arquiteturas/edge-enhanced/" - } - ] - }, - { - "panelName": "Guias e recursos", - "cards": [ - { - "icon": "pi pi-book", - "docType": "Documentação", - "title": "Novo na Azion? Comece sua jornada sem complicações", - "description": "Esta documentação vai ajudar você nos seus primeiros passos com a Azion.", - "link": "https://www.azion.com/pt-br/documentacao/produtos/ponto-de-partida/" - }, - { - "icon": "pi pi-book", - "docType": "Documentação", - "title": "Construa e execute suas aplicações no edge", - "description": "O Edge Application é um produto que permite construir aplicações no edge da Azion, reduzindo a latência e a taxa de transferência entre servidores de origem e usuários.", - "link": "https://www.azion.com/pt-br/documentacao/produtos/build/edge-application/" - }, - { - "icon": "pi pi-book", - "docType": "Documentação", - "title": "Armazene objetos facilmente no edge com o Azion Edge Storage", - "description": "O Azion Edge Storage é um serviço de armazenamento escalável e seguro, projetado para integrar o armazenamento de objetos com a Plataforma de Edge Computing da Azion usando o padrão S3.", - "link": "https://www.azion.com/pt-br/produtos/edge-storage/" - }, - { - "icon": "pi pi-book", - "docType": "Documentação", - "title": "Vincule suas aplicações atuais ao edge em poucos passos com nossa CLI", - "description": "Vinculação de um projeto existente para execução no edge da Azion.", - "link": "https://www.azion.com/pt-br/documentacao/produtos/azion-cli/link-comando/" - }, - { - "icon": "pi pi-book", - "docType": "Documentação", - "title": "Entregue seu conteúdo dinâmico e estático usando a Azion como CDN", - "description": "Esse template ajuda você a implantar uma aplicação com políticas de cache padronizadas para otimizar a entrega do seu conteúdo.", - "link": "https://www.azion.com/pt-br/documentacao/produtos/guias/dynamic-static-file-optimization-template/" - }, - { - "icon": "pi pi-tag", - "docType": "Conteúdo", - "title": "Descubra por que você deve aprimorar suas aplicações com edge computing", - "description": "A modernização de aplicações no edge permite desenvolver vantagens tecnológicas cruciais para as empresas.", - "link": "https://www.azion.com/pt-br/lp/infografico-cinco-razoes-modernizar-apps-2024/" - }, - { - "icon": "pi pi-bookmark", - "docType": "Blog", - "title": "Controle os acessos à sua plataforma com esta função pronta para uso", - "description": "Aprenda a gerenciar o acesso às suas aplicações usando a Azion Scheduled Blocking Function, uma edge function que controla o acesso com base em janelas de tempo.", - "link": "https://www.azion.com/pt-br/blog/controle-os-acessos-a-sua-plataforma-com-a-funcao-scheduled-blocking/" - } - ] - } - ] -} - -const template = ` - - - - -` - -const Template = (args) => ({ - components: { ContentSection, TabView, TabPanel, Carousel, Tag, CardBlog, CardTitle, CardDescription, CardBaseClickable, Container }, - setup() { - return { args } - }, - template: template -}) - -export const Default = Template.bind({}) -Default.args = MOCK - -Default.parameters = { - docs: { - description: { - story: '' - }, - source: { code: template } - }, -}; diff --git a/src/stories/templates/sections/StepsCards.stories.js b/src/stories/templates/sections/StepsCards.stories.js deleted file mode 100644 index 8b535761..00000000 --- a/src/stories/templates/sections/StepsCards.stories.js +++ /dev/null @@ -1,98 +0,0 @@ - -import ContentSection from '../../../templates/contentsection' -import CardBase from '../../../templates/cardbase' -import Tile from '../../../templates/tile' -import CardTitle from '../../../templates/cardtitle' -import CardDescription from '../../../templates/carddescription' -import LinkButton from '../../../templates/linkbutton' -import Container from '../../../templates/container' - -export default { - title: 'Blocks/Sections/Steps Cards', - tags: ['autodocs'], -} - -const MOCK = { - overline: 'Pricing Model', - title: 'All products and features, no upfront commitment required—cancel anytime.', - description: 'Our pay-as-you-go pricing model gives you the freedom to customize your choice for more efficiency paying only for what you use: Data transferred, requests, compute time, etc.', - "cards": [ - { - "title": "Start for free", - "description": "Get free, hands-on experience with the Azion Edge Computing Platform with $300 in credits valid for 12 months. No upfront commitment—cancel anytime.", - "button": { - "label": "Create a free account", - "link": "https://console.azion.com/signup" - } - }, - { - "title": "Pay as you grow", - "description": "Pay only for the resources you use, and pay less as you grow with our on-demand, tiered pricing model. Ideal for any business stage, with no account maintenance fees.", - "button": { - "label": "Check prices", - "link": "/en/documentation/products/pricing/", - "outlined": true - } - }, - { - "title": "Commit and save", - "description": "Save more by committing to a 1, 2, or 3-year plan, and selecting the most cost-effective payment terms for your needs. Ideal for cost-effective, sustained growth.", - "button": { - "label": "Check prices", - "link": "/en/documentation/products/pricing/", - "outlined": true - } - }, - { - "title": "Add a Service Plan", - "description": "Select a Service Plan that aligns with your service and compliance requirements for successfully running your workloads with Azion. From Developer to Mission-Critical, we've got your back.", - "button": { - "label": "Compare plans", - "link": "/en/professional-services/", - "outlined": true - } - } - ], -} - -const template = ` - - - - -` - -const Template = (args) => ({ - components: { ContentSection, CardBase, CardDescription, CardTitle, LinkButton, Tile, Container }, - setup() { - return { args } - }, - template: template -}) - -export const Default = Template.bind({}) -Default.args = MOCK - -Default.parameters = { - docs: { - description: { - story: '' - }, - source: { code: template } }, -}; diff --git a/src/stories/templates/sections/ZTextImage.stories.js b/src/stories/templates/sections/ZTextImage.stories.js deleted file mode 100644 index df77af92..00000000 --- a/src/stories/templates/sections/ZTextImage.stories.js +++ /dev/null @@ -1,78 +0,0 @@ - -import ContentSection from '../../../templates/contentsection' -import ImageSwitcher from '../../../templates/themeawareimageswitcher' -import Container from '../../../templates/container' - -export default { - title: 'Blocks/Sections/Z Text Image', - tags: ['autodocs'], -} - -const MOCK = { - "overline": "Edge Application", - "title": "How it Works", - "cards": [ - { - "title": "Reverse Proxy Architecture", - "description": "Azion uses a reverse proxy architecture through which your users connect to the Edge Nodes of our highly distributed global network.", - "imageDark": "https://www.azion.com/assets/pages/products/images/dark/edge-application/console-delivery-settings.webp", - "imageLight": "https://www.azion.com/assets/pages/products/images/light/edge-application/asset-11.svg", - "alt": "" - }, - { - "title": "Configure Your Cache", - "description": "Content located on Azion's Edge Nodes can be delivered directly to your users from our nearest node.", - "alt": "", - "imageDark": "https://www.azion.com/assets/pages/products/images/dark/edge-application/asset-2.svg", - "imageLight": "https://www.azion.com/assets/pages/products/images/light/edge-application/asset-21.svg", - "position": "right" - }, - { - "title": "Enable Network, Compute & Security", - "description": "Enable network, compute and security modules for your edge application to ensure high performance, scalability and security.", - "alt": "", - "imageDark": "https://www.azion.com/assets/pages/products/images/dark/edge-application/asset-3.svg", - "imageLight": "https://www.azion.com/assets/pages/products/images/light/edge-application/asset-31.svg" - } - ] -} - - -const template = ` - - - - - - ` - -const Template = (args) => ({ - components: { ContentSection, ImageSwitcher, Container}, - setup() { - return { args } - }, - template: template -}) - -export const Default = Template.bind({}) -Default.args = MOCK - -Default.parameters = { - docs: { - description: { - story: '' - }, - source: { code: template } }, -}; diff --git a/src/stories/templates/sections/section-big-numbers.stories.js b/src/stories/templates/sections/section-bignumbers.stories.js similarity index 77% rename from src/stories/templates/sections/section-big-numbers.stories.js rename to src/stories/templates/sections/section-bignumbers.stories.js index 78651c13..3b86a0e1 100644 --- a/src/stories/templates/sections/section-big-numbers.stories.js +++ b/src/stories/templates/sections/section-bignumbers.stories.js @@ -1,9 +1,22 @@ -import SectionBigNumbers from '../../../templates/sectionbignumbers' -import Container from '../../../templates/container' +import SectionBigNumbers from '../../../templates/sectionbignumbers/SectionBigNumbers' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/section-big-numbers', + title: 'Blocks/Sections/section-bignumbers', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.bigNumbers} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionBulletsRight.stories.js b/src/stories/templates/sections/section-bullets-right.stories.js similarity index 77% rename from src/stories/templates/sections/SectionBulletsRight.stories.js rename to src/stories/templates/sections/section-bullets-right.stories.js index 85b3fe10..0d84af35 100644 --- a/src/stories/templates/sections/SectionBulletsRight.stories.js +++ b/src/stories/templates/sections/section-bullets-right.stories.js @@ -1,12 +1,27 @@ -import ContentSection from '../../../templates/contentsection' -import LinkButton from '../../../templates/linkbutton' -import UnorderedList from '../../../templates/listunordered' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import UnorderedList from '../../../templates/listunordered/ListUnordered' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Bullets Right', + title: 'Blocks/Sections/section-bullets-right', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cta} +${Rules.section.list} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionCardsBackgroundImage.stories.js b/src/stories/templates/sections/section-card-background.stories.js similarity index 81% rename from src/stories/templates/sections/SectionCardsBackgroundImage.stories.js rename to src/stories/templates/sections/section-card-background.stories.js index bc460e63..d4ed3228 100644 --- a/src/stories/templates/sections/SectionCardsBackgroundImage.stories.js +++ b/src/stories/templates/sections/section-card-background.stories.js @@ -1,14 +1,28 @@ -import ContentSection from '../../../templates/contentsection' -import CardBase from '../../../templates/cardbase' -import Overline from '../../../templates/overline' -import CardTitle from '../../../templates/cardtitle' -import CardBgImage from '../../../templates/cardbgimage' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import CardBase from '../../../templates/cardbase/CardBase' +import Overline from '../../../templates/overline/Overline' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import CardBgImage from '../../../templates/cardbgimage/CardBgImage' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Cards Background Image', + title: 'Blocks/Sections/section-card-background', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-card-carousel.stories.js b/src/stories/templates/sections/section-card-carousel.stories.js index cbc2050f..43c0b68f 100644 --- a/src/stories/templates/sections/section-card-carousel.stories.js +++ b/src/stories/templates/sections/section-card-carousel.stories.js @@ -1,15 +1,29 @@ import ContentSection from '../../../templates/contentsection' -import LinkButton from "../../../templates/linkbutton"; -import Carousel from 'primevue/carousel'; +import LinkButton from "../../../templates/linkbutton" +import Carousel from 'primevue/carousel' import CardBase from '../../../templates/cardbase' import CardTitle from '../../../templates/cardtitle' import CardDescription from '../../../templates/carddescription' import Container from '../../../templates/container' +import Rules from '../../rules' + export default { title: 'Blocks/Sections/section-card-carousel', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-card-expandable.stories.js b/src/stories/templates/sections/section-card-expandable.stories.js index 920c0eea..0de86ff8 100644 --- a/src/stories/templates/sections/section-card-expandable.stories.js +++ b/src/stories/templates/sections/section-card-expandable.stories.js @@ -1,13 +1,28 @@ import ContentSection from '../../../templates/contentsection' import CardPanelExpandable from '../../../templates/cardpanelexpandable' -import ImageSwitcher from "../../../templates/themeawareimageswitcher"; -import LinkButton from "../../../templates/linkbutton"; +import ImageSwitcher from "../../../templates/themeawareimageswitcher" +import LinkButton from "../../../templates/linkbutton" import Container from '../../../templates/container' +import Rules from '../../rules' + export default { title: 'Blocks/Sections/section-card-expandable', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/CardsIntercalated.stories.js b/src/stories/templates/sections/section-card-intercalated.stories.js similarity index 82% rename from src/stories/templates/sections/CardsIntercalated.stories.js rename to src/stories/templates/sections/section-card-intercalated.stories.js index a524554a..e7f9ebab 100644 --- a/src/stories/templates/sections/CardsIntercalated.stories.js +++ b/src/stories/templates/sections/section-card-intercalated.stories.js @@ -1,13 +1,27 @@ -import ContentSection from '../../../templates/contentsection' -import CardBase from '../../../templates/cardbase' -import CardTitle from '../../../templates/cardtitle' -import Container from '../../../templates/container' -import CardBgImage from '../../../templates/cardbgimage' -import Overline from '../../../templates/overline' +import ContentSection from '../../../templates/contentsection/ContentSection' +import CardBase from '../../../templates/cardbase/CardBase' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import Container from '../../../templates/container/Container' +import CardBgImage from '../../../templates/cardbgimage/CardBgImage' +import Overline from '../../../templates/overline/Overline' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Card Intercalated', + title: 'Blocks/Sections/section-card-intercalated', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/Lists/ListTitleAndCards.stories.js b/src/stories/templates/sections/section-card-navigation.stories.js similarity index 97% rename from src/stories/templates/Lists/ListTitleAndCards.stories.js rename to src/stories/templates/sections/section-card-navigation.stories.js index f2043a68..eced6944 100644 --- a/src/stories/templates/Lists/ListTitleAndCards.stories.js +++ b/src/stories/templates/sections/section-card-navigation.stories.js @@ -1,12 +1,25 @@ -import CardBase from '../../../templates/cardbase' -import CardTitle from '../../../templates/cardtitle' -import CardDescription from '../../../templates/carddescription' -import LinkButton from '../../../templates/linkbutton' -import Container from '../../../templates/container' +import CardBase from '../../../templates/cardbase/CardBase' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import CardDescription from '../../../templates/carddescription/CardDescription' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/List/Title and Cards', + title: 'Blocks/Sections/section-card-navigation', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.title} +${Rules.section.description} +${Rules.section.cardsNavigation} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-card-success-case.stories.js b/src/stories/templates/sections/section-card-success-case.stories.js index d858d539..4b8d6333 100644 --- a/src/stories/templates/sections/section-card-success-case.stories.js +++ b/src/stories/templates/sections/section-card-success-case.stories.js @@ -1,10 +1,23 @@ import Container from '../../../templates/container' import SectionSuccessCase from '../../../templates/sectionsuccesscases' +import Rules from '../../rules' export default { title: 'Blocks/Sections/section-card-success-case', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cardsCases} + `, + }, + }, + }, } diff --git a/src/stories/templates/sections/ReleaseCarousel.stories.js b/src/stories/templates/sections/section-carousel-release.stories.js similarity index 88% rename from src/stories/templates/sections/ReleaseCarousel.stories.js rename to src/stories/templates/sections/section-carousel-release.stories.js index 737cade0..10a10624 100644 --- a/src/stories/templates/sections/ReleaseCarousel.stories.js +++ b/src/stories/templates/sections/section-carousel-release.stories.js @@ -1,11 +1,24 @@ -import ContentSection from '../../../templates/contentsection' -import ReleaseCarousel from '../../../templates/releasecarousel' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import ReleaseCarousel from '../../../templates/releasecarousel/ReleaseCarousel' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Release Carousel', + title: 'Blocks/Sections/section-carousel-release', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cardsRelease} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-carousel.stories.js b/src/stories/templates/sections/section-carousel.stories.js index 4c160ffa..6148dd9d 100644 --- a/src/stories/templates/sections/section-carousel.stories.js +++ b/src/stories/templates/sections/section-carousel.stories.js @@ -1,10 +1,23 @@ import Container from '../../../templates/container' import SectionCarousel from '../../../templates/sectioncarousel' +import Rules from '../../rules' export default { title: 'Blocks/Sections/section-carousel', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-compliance.stories.js b/src/stories/templates/sections/section-compliance.stories.js index 152c24f7..02ff84a0 100644 --- a/src/stories/templates/sections/section-compliance.stories.js +++ b/src/stories/templates/sections/section-compliance.stories.js @@ -1,10 +1,25 @@ import Container from '../../../templates/container' import SectionCompliance from '../../../templates/sectioncompliance' +import Rules from '../../rules' export default { title: 'Blocks/Sections/section-compliance', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.link} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionForm.stories.js b/src/stories/templates/sections/section-form-left.stories.js similarity index 90% rename from src/stories/templates/sections/SectionForm.stories.js rename to src/stories/templates/sections/section-form-left.stories.js index 8be25359..a79ac576 100644 --- a/src/stories/templates/sections/SectionForm.stories.js +++ b/src/stories/templates/sections/section-form-left.stories.js @@ -1,14 +1,27 @@ -import CardTitle from '../../../templates/cardtitle' -import CardBase from '../../../templates/cardbase' -import FormContactUs from '../../../../dist/formcontactus' -import Overline from '../../../templates/overline' -import LinkButton from '../../../templates/linkbutton' -import Container from '../../../templates/container' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import CardBase from '../../../templates/cardbase/CardBase' +import FormContactUs from '../../../../dist/formcontactus/FormContactUs' +import Overline from '../../../templates/overline/Overline' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Form', + title: 'Blocks/Sections/section-form-left', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.title} +${Rules.section.form} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-grid-bento.stories.js b/src/stories/templates/sections/section-grid-bento.stories.js index 86b85d18..a55eefcf 100644 --- a/src/stories/templates/sections/section-grid-bento.stories.js +++ b/src/stories/templates/sections/section-grid-bento.stories.js @@ -7,10 +7,23 @@ import LinkButton from '../../../templates/linkbutton' import GridBentoBlock from '../../../templates/gridbento' import ImageSwitcher from '../../../templates/themeawareimageswitcher' import Container from '../../../templates/container' +import Rules from '../../rules' export default { title: 'Blocks/Sections/section-grid-bento', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cards} + `, + }, + }, + }, argTypes: { gridType: { options: ['2-columns-3-items', '2-columns-4-items', '2-columns-5-items', '2-columns-6-items', '3-columns-4-items', '3-columns-7-items', '4-columns-5-items'], diff --git a/src/stories/templates/sections/HorizontalWithNavigation.stories.js b/src/stories/templates/sections/section-horizontal-navigation.stories.js similarity index 85% rename from src/stories/templates/sections/HorizontalWithNavigation.stories.js rename to src/stories/templates/sections/section-horizontal-navigation.stories.js index 23917dd6..a1a40956 100644 --- a/src/stories/templates/sections/HorizontalWithNavigation.stories.js +++ b/src/stories/templates/sections/section-horizontal-navigation.stories.js @@ -1,15 +1,31 @@ -import ContentSection from '../../../templates/contentsection' -import CardBase from '../../../templates/cardbase' -import CardTitle from '../../../templates/cardtitle' -import CardDescription from '../../../templates/carddescription' -import Overline from '../../../templates/overline' -import LinkButton from '../../../templates/linkbutton' +import ContentSection from '../../../templates/contentsection/ContentSection' +import CardBase from '../../../templates/cardbase/CardBase' +import CardTitle from '../../../templates/cardtitle/CardTitle' +import CardDescription from '../../../templates/carddescription/CardDescription' +import Overline from '../../../templates/overline/Overline' +import LinkButton from '../../../templates/linkbutton/LinkButton' import Menu from 'primevue/menu' -import Container from '../../../templates/container' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Horizontal With Navigation', + title: 'Blocks/Sections/section-horizontal-navigation', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cta} +${Rules.section.navigation} +${Rules.section.cards} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionImageRight.stories.js b/src/stories/templates/sections/section-image-right.stories.js similarity index 74% rename from src/stories/templates/sections/SectionImageRight.stories.js rename to src/stories/templates/sections/section-image-right.stories.js index 5a76b27b..550155d1 100644 --- a/src/stories/templates/sections/SectionImageRight.stories.js +++ b/src/stories/templates/sections/section-image-right.stories.js @@ -1,12 +1,27 @@ -import ContentSection from '../../../templates/contentsection' -import LinkButton from '../../../templates/linkbutton' -import ImageSwitcher from '../../../templates/themeawareimageswitcher' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import ImageSwitcher from '../../../templates/themeawareimageswitcher/ImageSwitcher' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Image Right', + title: 'Blocks/Sections/section-image-right', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.description} +${Rules.section.cta} +${Rules.section.image} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/section-list-avatars.stories.js b/src/stories/templates/sections/section-list-avatars.stories.js index 126b7e3b..a7d94ad8 100644 --- a/src/stories/templates/sections/section-list-avatars.stories.js +++ b/src/stories/templates/sections/section-list-avatars.stories.js @@ -1,10 +1,23 @@ import ContentSection from '../../../templates/contentsection' import Container from '../../../templates/container' +import Rules from '../../rules' export default { title: 'Blocks/Sections/section-list-avatars', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.avatars} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/ListProducts.stories.js b/src/stories/templates/sections/section-list-products.stories.js similarity index 79% rename from src/stories/templates/sections/ListProducts.stories.js rename to src/stories/templates/sections/section-list-products.stories.js index 8ee2d0a3..0d032ed4 100644 --- a/src/stories/templates/sections/ListProducts.stories.js +++ b/src/stories/templates/sections/section-list-products.stories.js @@ -1,14 +1,27 @@ -import ContentSection from '../../../templates/contentsection' -import LinkButton from '../../../templates/linkbutton' -import CardBase from '../../../templates/cardbase' -import IconTextSegment from '../../../templates/icontextsegment' -import Overline from '../../../templates/overline' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import LinkButton from '../../../templates/linkbutton/LinkButton' +import CardBase from '../../../templates/cardbase/CardBase' +import IconTextSegment from '../../../templates/icontextsegment/IconTextSegment' +import Overline from '../../../templates/overline/Overline' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/List Products', + title: 'Blocks/Sections/section-list-products', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.cardsProducts} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/Logos.stories.js b/src/stories/templates/sections/section-logos.stories.js similarity index 73% rename from src/stories/templates/sections/Logos.stories.js rename to src/stories/templates/sections/section-logos.stories.js index 17d67290..7f3324ad 100644 --- a/src/stories/templates/sections/Logos.stories.js +++ b/src/stories/templates/sections/section-logos.stories.js @@ -1,10 +1,23 @@ -import ContentSection from '../../../templates/contentsection' -import Container from '../../../templates/container' +import ContentSection from '../../../templates/contentsection/ContentSection' +import Container from '../../../templates/container/Container' +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Logos', + title: 'Blocks/Sections/section-logos', tags: ['autodocs'], + parameters: { + docs: { + description: { + component: ` +### Content rules +${Rules.section.overline} +${Rules.section.title} +${Rules.section.logos} + `, + }, + }, + }, } const MOCK = { diff --git a/src/stories/templates/sections/SectionComparableTable.stories.js b/src/stories/templates/sections/section-table-comparable.stories.js similarity index 96% rename from src/stories/templates/sections/SectionComparableTable.stories.js rename to src/stories/templates/sections/section-table-comparable.stories.js index 1b718270..33f491be 100644 --- a/src/stories/templates/sections/SectionComparableTable.stories.js +++ b/src/stories/templates/sections/section-table-comparable.stories.js @@ -2,16 +2,17 @@ import DataTable from "primevue/datatable"; import Column from "primevue/column"; import Tag from "primevue/tag"; -import CardBase from "../../../templates/cardbase"; -import CardTitle from "../../../templates/cardtitle"; -import CardDescription from "../../../templates/carddescription"; -import LinkButton from "../../../templates/linkbutton"; -import Overline from "../../../templates/overline"; -import ContentSection from '../../../templates/contentsection' -import Container from "../../../templates/container" +import CardBase from "../../../templates/cardbase/CardBase"; +import CardTitle from "../../../templates/cardtitle/CardTitle"; +import CardDescription from "../../../templates/carddescription/CardDescription"; +import LinkButton from "../../../templates/linkbutton/LinkButton"; +import Overline from "../../../templates/overline/Overline"; +import ContentSection from '../../../templates/contentsection/ContentSection' +import Container from "../../../templates/container/Container" +import Rules from '../../rules' export default { - title: 'Blocks/Sections/Comparable Table', + title: 'Blocks/Sections/section-table-comparable', tags: ['autodocs'], }