docs(): update templates and layouts

packages/components/.storybook/preview.js

@@ -88,7 +88,7 @@ export const parameters = {
         'Getting-Started',
         ['Overview', 'How to use Storybook', 'HTML5', 'Angular', 'Vue', 'React'],
         'Design',
-        ['Overview', 'Colors', 'Typography', 'Breakpoints', 'Spacing', 'Icons', 'Grid', 'Page Layout', 'Form'],
+        ['Overview', 'Figma', 'Colors', 'Typography', 'Icons', 'Spacing', 'Breakpoints', 'Grid', 'Page Layout', 'Templates', 'Form'],
         'Components',
         'Templates',
         'Contributing',

packages/components/src/components/form/bal-checkbox/stories/readme.docs.mdx

@@ -50,7 +50,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-datepicker/stories/readme.docs.mdx

@@ -54,7 +54,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-field/stories/readme.docs.mdx

@@ -37,7 +37,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-file-upload/stories/readme.docs.mdx

@@ -26,7 +26,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-input/stories/readme.docs.mdx

@@ -41,7 +41,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-radio/stories/readme.docs.mdx

@@ -45,7 +45,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-select/stories/readme.docs.mdx

@@ -41,7 +41,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-slider/stories/readme.docs.mdx

@@ -26,7 +26,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-textarea/stories/readme.docs.mdx

@@ -33,7 +33,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/components/form/bal-timeinput/stories/readme.docs.mdx

@@ -27,7 +27,7 @@ import IconAccount from '../../../../../../icons/svg/icon-account.svg'
       Documentation how to build forms and how to use the components.
     </span>
   </a>
-  <a className="link-item" href="?path=/docs/templates-contact-form--page">
+  <a className="link-item" href="?path=/story/design-common-templates--contact-form">
     <img src={IconAccount} alt="template" />
     <span>
       <strong>Template Contact Form</strong>A template with to illustrate the structure of a form.

packages/components/src/stories/design/03-spacing.stories.ts → packages/components/src/stories/design/04-spacing.stories.ts

@@ -1,4 +1,4 @@
-import docs from './03-spacing.docs.mdx'
+import docs from './04-spacing.docs.mdx'
 
 export default {
   title: 'Design/Spacing',

packages/components/src/stories/design/04-breakpoints.stories.ts → packages/components/src/stories/design/05-breakpoints.stories.ts

@@ -1,4 +1,4 @@
-import docs from './04-breakpoints.docs.mdx'
+import docs from './05-breakpoints.docs.mdx'
 
 export default {
   title: 'Design/Breakpoints',

packages/components/src/stories/design/06-page-layout.docs.mdx → packages/components/src/stories/design/07-page-layout.stories.mdx

@@ -1,5 +1,14 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
 
+<Meta
+  title="Design/Page Layout"
+  parameters={{
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
 # Page Layout
 
 This is the page layout we recommand to use. The `bal-app` class enables the Baloise Design System styles underneath it.
@@ -30,26 +39,26 @@ Select the template that matches your case the best and start with that.
 import EyeLogo from '../../../../icons/svg/icon-read-only.svg'
 
 <div className="link-list">
-  <a className="link-item" href="?path=/story/design-page-layout--external-calculator">
+  <a className="link-item" href="?path=/story/design-page-templates--external-calculator">
     <img src={EyeLogo} alt="Customize" />
     <span>
       <strong>External Calculator Application</strong>A narrow template created for our calculators. Optimized for mobile usage.
     </span>
   </a>
-  <a className="link-item" href="?path=/story/design-page-layout--external-calculator">
+  <a className="link-item" href="?path=/story/design-page-templates--external-calculator">
     <img src={EyeLogo} alt="Customize" />
     <span>
       <strong>External Portal Application</strong>
       The classical template with a main tab navigation on top.
     </span>
   </a>
-  <a className="link-item" href="?path=/story/design-page-layout--external-calculator">
+  <a className="link-item" href="?path=/story/design-page-templates--external-calculator">
     <img src={EyeLogo} alt="Customize" />
     <span>
       <strong>Internal Form Application</strong>A basic form template for internal applications.
     </span>
   </a>
-  <a className="link-item" href="?path=/story/design-page-layout--external-calculator">
+  <a className="link-item" href="?path=/story/design-page-templates--external-calculator">
     <img src={EyeLogo} alt="Customize" />
     <span>
       <strong>Internal Wide Application</strong>A wide template without the .container element to use the whole width of the screen.

packages/components/src/stories/design/08-form.stories.mdx

@@ -23,7 +23,7 @@ A basic form field has his container element `bal-field` and 3 child elements:
 - `bal-field-message` to show validation message or helper messages.
 
 <Canvas withSource="none">
-  <div-doc-app>
+  <bal-doc-app>
     <form className="columns is-multiline mt-0 has-background-white">
       <bal-field class="column is-full py-0" expanded>
         <bal-field-label>Firstname</bal-field-label>
@@ -33,7 +33,7 @@ A basic form field has his container element `bal-field` and 3 child elements:
         <bal-field-message color="danger">Required Field</bal-field-message>
       </bal-field>
     </form>
-  </div-doc-app>
+  </bal-doc-app>
 </Canvas>
 
 ```html
@@ -58,7 +58,7 @@ With the help of our [CSS Grid](?path=/docs/design-grid--page) we can assemble t
   - `py-0` removes the padding on top and bottom
 
 <Canvas withSource="none">
-  <div-doc-app>
+  <bal-doc-app>
     <form className="columns is-multiline mt-0 has-background-white">
       <bal-field class="column is-full py-0" expanded>
         <bal-field-control>
@@ -85,7 +85,7 @@ With the help of our [CSS Grid](?path=/docs/design-grid--page) we can assemble t
         </bal-field-control>
       </bal-field>
     </form>
-  </div-doc-app>
+  </bal-doc-app>
 </Canvas>
 
 ```html
@@ -115,5 +115,5 @@ With the help of our [CSS Grid](?path=/docs/design-grid--page) we can assemble t
 
 ### More examples
 
-- [Form Template with a contact form](?path=/docs/templates-contact-form--page)
+- [Form Template with a contact form](?path=/story/design-common-templates--contact-form)
 - [Stepper Template with some basic form](?path=/docs/templates-stepper--page)

packages/components/src/stories/design/06-page-layout.stories.ts → packages/components/src/stories/design/09-00-templates-pages.stories.ts

@@ -1,16 +1,15 @@
 import { withSoureCode } from '../utils'
-import docs from './06-page-layout.docs.mdx'
-import { ExternalCaluclatorTemplate } from './layouts/external-caluclator.template'
-import { ExternalPortalTemplate } from './layouts/external-portal.template'
-import { InternalFormAppTemplate } from './layouts/internal-form'
-import { InternalWideAppTemplate } from './layouts/internal-wide'
+import { ExternalCaluclatorTemplate } from './templates/external-caluclator.template'
+import { ExternalPortalTemplate } from './templates/external-portal.template'
+import { InternalFormAppTemplate } from './templates/internal-form.template'
+import { InternalWideAppTemplate } from './templates/internal-wide.template'
 import * as Components from '../../../.storybook/vue/components'
 
 export default {
-  title: 'Design/Page Layout',
+  title: 'Design/Page Templates',
   parameters: {
     docs: {
-      page: docs,
+      page: null,
     },
     layout: 'fullscreen',
   },

packages/components/src/stories/design/09-01-templates-common.stories.ts

@@ -0,0 +1,22 @@
+import { withSoureCode } from '../utils'
+import { ContactFormTemplate } from './templates/contact-form.template'
+import * as Components from '../../../.storybook/vue/components'
+
+export default {
+  title: 'Design/Common Templates',
+  parameters: {
+    docs: {
+      page: null,
+    },
+    layout: 'fullscreen',
+  },
+}
+
+export const ContactForm = args => ({
+  components: { ...Components },
+  setup: () => ({ args }),
+  template: ContactFormTemplate,
+})
+ContactForm.parameters = {
+  ...withSoureCode(ContactFormTemplate),
+}

packages/components/src/stories/templates/contact-form.template.ts → packages/components/src/stories/design/templates/contact-form.template.ts

@@ -1,4 +1,4 @@
-export const contactFormTemplate = `
+export const ContactFormTemplate = `
 <bal-card>
   <bal-card-content>
     <form class="columns is-multiline mt-0">