comand-component-library 3.1.44 → 3.1.47

package/src/documentation/views/components/CmdBankAccountDataHelp.vue

@@ -0,0 +1,88 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import component
+import CmdBankAccountData from "../../../components/CmdBankAccountData"
+import ComponentProperties from "../../components/ComponentProperties"
+import CmdTabs from "../../../components/CmdTabs"
+import ViewCodeData from "../../components/ViewCodeData"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+import * as componentPropertiesFunctions from "../../components/ComponentProperties"
+
+// import example-data
+import CmdCode from "../../data/CmdBankAccountDataHelp"
+import bankAccountData from "../../../assets/data/bank-account-data.json"
+import propertyDescriptions from "../../generated/CmdBankAccountDataPropertyDescriptions.json"
+
+const propertyStructures = {
+    accountData: [
+        {
+            "text": "<string>",
+            "value": "<string>",
+            "allowCopy": "<boolean>"
+        }
+    ],
+    cmdCustomHeadline: "Description for cmdCustomHeadline",
+    iconCopy: {
+        "iconClass": "<string>",
+        "tooltip": "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdBankAccountData" headlineText="Band Account Data">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="bankAccountData[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBankAccountData
+                            :account-data="bankAccountData"
+                            :allow-copy-by-click="true"
+                            :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 5}"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBankAccountData.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+            <a id="accountData"></a>
+            <h4>accountData</h4>
+            <dl>
+                <dt>Type:</dt>
+                <dd>{{ componentPropertiesFunctions.getPropertyTypeName(CmdBankAccountData.props.accountData.type) }}</dd>
+                <dt>Default:</dt>
+                <dd v-if="componentPropertiesFunctions.getPropertyDefault(CmdBankAccountData.props.accountData.default)">
+                    {{ componentPropertiesFunctions.getPropertyDefault(CmdBankAccountData.props.accountData.default) }}
+                </dd>
+                <dd v-else><em>(none)</em></dd>
+                <dt>Required:</dt>
+                <dd>
+                    <span :class="componentPropertiesFunctions.getIcon(CmdBankAccountData.props.accountData.required)"
+                          :title="componentPropertiesFunctions.getTooltip(CmdBankAccountData.props.accountData.required)">
+                    </span>
+                </dd>
+                <dt>Structure:</dt>
+                <dd>
+                    <pre>{{ componentPropertiesFunctions.getPropertyStructure(propertyStructures, "accountData") }}</pre>
+                </dd>
+                <dt>Description:</dt>
+                <dd>{{ componentPropertiesFunctions.getPropertyDescription(propertyDescriptions, "accountData") }}</dd>
+            </dl>
+            <h5>Description for structure</h5>
+            <dl>
+                <dt>text:</dt>
+                <dd>Description for text</dd>
+                <dt>value:</dt>
+                <dd>Description for value</dd>
+                <dt>allowCopy:</dt>
+                <dd>Description for allowCopy</dd>
+            </dl>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdBoxHelp.vue

@@ -0,0 +1,137 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdBox from "../../../components/CmdBox"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdBoxHelp"
+import boxesProduct from "../../../assets/data/box-product.json"
+import boxesUser from "../../../assets/data/box-user.json"
+import propertyDescriptions from "../../generated/CmdBoxPropertyDescriptions.json"
+
+const propertyStructures = {
+    product: {
+        "name": "<string>",
+        "img": {
+            "src": "<string>",
+            "alt": "<string>"
+        },
+        "articleNumber": "<string>",
+        "price": "<number>",
+        "description": "<string>",
+        "new": "<boolean>",
+        "discount": "<number>"
+    },
+    user: {
+        "name": "<string>",
+        "img": {
+            "src": "<string>",
+            "alt": "<string>"
+        },
+        "profession": "<string>",
+        "position": "<string>",
+        "description": "<string>",
+        "links": [
+            {
+                "href": "<string>",
+                "target": "<string>",
+                "iconClass": "<string>",
+                "title": "<string>"
+            }
+        ]
+    }
+}
+
+function clickedOnProduct(event) {
+    console.log("event", event)
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (content given by property)">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBox
+                            :cmdCustomHeadline="{
+                            headlineText: 'Headline given by property',
+                            headlineLevel: 5
+                        }"
+                            textBody="Content given by property"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr/>
+                <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (collapsible)">
+                <ViewCodeData :code="CmdCode[1]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBox
+                            :cmdCustomHeadline="{
+                            headlineText: 'Headline given by property',
+                            headlineLevel: 5
+                        }"
+                            textBody="Content given by property"
+                            :collapsible="true"
+                        />
+                    </teleport>
+                </ViewCodeData>
+                </ExampleSectionWrapper>
+            <hr/>
+            <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (content given by slot)">
+                <ViewCodeData :code="CmdCode[2]">
+                    <CmdBox :useSlots="['header', 'body', 'footer']">
+                        <template v-slot:header>
+                            <h5>
+                                Headline given by slot
+                            </h5>
+                        </template>
+                        <template v-slot:body>
+                            <p class="padding">
+                                Content given by slot
+                            </p>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                Footer given by slot
+                            </p>
+                        </template>
+                    </CmdBox>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr/>
+            <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'product'">
+                <ViewCodeData :code="CmdCode[3]" :data="boxesProduct[0]">
+                    <CmdBox
+                        boxType="product"
+                        :product="boxesProduct[0]"
+                        :cmdCustomHeadline="{ headlineLevel: 5}"
+                        @click="clickedOnProduct"
+                    />
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr/>
+            <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'user'">
+                <ViewCodeData :code="CmdCode[4]" :data="boxesUser[2]">
+                    <CmdBox
+                        boxType="user"
+                        :user="boxesUser[2]"
+                        :cmdCustomHeadline="{ headlineLevel: 5}"
+                    />
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBox.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdBoxSiteSearchHelp.vue

@@ -0,0 +1,60 @@
+<script setup>
+// import function
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdBoxSiteSearch from "../../../components/CmdBoxSiteSearch"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdBoxSiteSearchHelp"
+import listOfFilters from '../../../assets/data/fake-select-filter-options.json'
+import propertyDescriptions from "../../generated/CmdBoxSiteSearchPropertyDescriptions.json"
+
+const propertyStructures = {
+    cmdCustomHeadline: {
+        "address": {
+            "streetNo": "<string>",
+            "zip": "<number>",
+            "city": "<string>"
+        },
+        "telephone": "<string>",
+        "mobilephone": "<string>",
+        "fax": "<string>",
+        "email": "<string>"
+    },
+    results: "-",
+    showLegend: "-",
+    textLegend: "-"
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdBoxSiteSearch" headlineText="Box Site Search">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBoxSiteSearch
+                            text-legend="Legend"
+                            :results="420"
+                            :listOfFilters="listOfFilters"
+                            :cmdCustomHeadline="{
+                                headlineText: 'Search site',
+                                headlineLevel: 5
+                            }"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBoxSiteSearch.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdBoxWrapperHelp.vue

@@ -0,0 +1,111 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdBox from "../../../components/CmdBox"
+import CmdBoxWrapper from "../../../components/CmdBoxWrapper"
+import CmdTabs from "../../../components/CmdTabs"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdAddressDataHelp"
+import boxProduct from '../../../assets/data/box-product.json'
+import boxUser from '../../../assets/data/box-user.json'
+import propertyDescriptions from "../../generated/CmdAddressDataPropertyDescriptions.json"
+
+const propertyStructures = {
+    addressData: {
+        "company": "<string>",
+        "address": {
+            "streetNo": "<string>",
+            "zip": "<number>",
+            "city": "<string>"
+        },
+        "telephone": "<string>",
+        "mobilephone": "<string>",
+        "fax": "<string>",
+        "email": "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content' using Flexbox">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <CmdBoxWrapper :useFlexbox="true">
+                        <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-custom-headline="{headlineText: 'Headline ' + index, headlineLevel: 3}" />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content (collapsible)' using the default grid">
+                <ViewCodeData :code="CmdCode[0]">
+                    <CmdBoxWrapper :allowTogglingCollapsingBoxes="true" v-slot="slotprops">
+                        <CmdBox v-for="index in 7"
+                                :key="index"
+                                textBody="Content"
+                                :collapsible="true"
+                                :collapsingBoxesOpen="slotprops.collapsingBoxesOpen"
+                                :cmd-custom-headline="{
+                                    headlineText: 'Headline ' + index,
+                                    headlineLevel: 3
+                                }"
+                        />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with single box open at once using the default grid">
+                <ViewCodeData :code="CmdCode[0]">
+                    <CmdBoxWrapper v-slot="slotprops">
+                        <CmdBox v-for="index in 7"
+                                :key="index"
+                                textBody="Content"
+                                :collapsible="true"
+                                :collapsingBoxesOpen="slotprops.currentOpenBox === index || (slotprops.currentOpenBox === 0 && index === 1)"
+                                :cmd-custom-headline="{
+                                    headlineText: 'Headline ' + index,
+                                    headlineLevel: 3
+                                }"
+                                @toggle-collapse="slotprops.boxToggled(index, $event)"
+                        />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content' using a custom grid">
+                <ViewCodeData :code="CmdCode[0]">
+                    <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
+                        <CmdBox v-for="index in 7" :key="index" textBody="Content" :cmd-custom-headline="{headlineText: 'Headline ' + index, headlineLevel: 3}" />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'product' using a custom grid">
+                <ViewCodeData :code="CmdCode[0]" :data="boxProduct">
+                    <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
+                        <CmdBox v-for="index in boxProduct.length" :key="index" boxType="product" :product="boxProduct[index - 1]" :cmdCustomHeadline="{headlineLevel: 5}" />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'user' using a custom grid">
+                <ViewCodeData :code="CmdCode[0]" :data="boxUser">
+                    <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
+                        <CmdBox v-for="index in boxUser.length" :key="index" boxType="user" :user="boxUser[index - 1]" :cmdCustomHeadline="{headlineLevel: 5}" />
+                    </CmdBoxWrapper>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBoxWrapper.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdBreadcrumbsHelp.vue

@@ -0,0 +1,51 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdBreadcrumbs from "../../../components/CmdBreadcrumbs"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import breadcrumbs from '../../../assets/data/breadcrumbs.json'
+import CmdCode from "../../data/CmdBreadcrumbsHelp"
+import propertyDescriptions from "../../generated/CmdBreadcrumbsPropertyDescriptions.json"
+
+const propertyStructures = {
+    breadcrumbLinks: {
+        "text": "<string>",
+        "type": "<string>",
+        "path": "<string>",
+        "route": {
+            "params": {
+                "lang": "<string>"
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdBreadcrumbs" headlineText="Breadcrumbs">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="breadcrumbs">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBreadcrumbs
+                            :breadcrumbLinks="breadcrumbs"
+                            breadcrumbLabel="You are here:"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBreadcrumbs.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdCompanyLogoHelp.vue

@@ -0,0 +1,48 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdCompanyLogo from "../../../components/CmdCompanyLogo"
+import ComponentProperties from "../../components/ComponentProperties"
+import CmdTabs from "../../../components/CmdTabs"
+import ViewCodeData from "../../components/ViewCodeData"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import companyLogo from '../../../assets/data/company-logo.json'
+import CmdCode from "../../data/CmdCompanyLogoHelp"
+import propertyDescriptions from "../../generated/CmdCompanyLogoPropertyDescriptions.json"
+
+const propertyStructures = {
+    link: {
+        "type": "<string>",
+        "path": "<string>",
+        "tooltip": "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdCompanyLogo" headlineText="Company Logo">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="companyLogo">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdCompanyLogo
+                            :link="companyLogo.link"
+                            altText="CoManD Logo"
+                            :pathDefaultLogo="require('@/assets/images/logo.svg')"
+                            :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdCompanyLogo.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdCookieDisclaimerHelp.vue

@@ -0,0 +1,105 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdCookieDisclaimer from "../../../components/CmdCookieDisclaimer"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import cookieDisclaimer from '../../../assets/data/cookie-disclaimer.json'
+import CmdCode from "../../data/CmdCookieDisclaimerHelp"
+import propertyDescriptions from "../../generated/CmdCookieDisclaimerPropertyDescriptions.json"
+
+const propertyStructures = {
+    cookieOptions: {
+        "required": {
+            "headline": "<string>",
+            "cookies": [
+                {
+                    "id": "<string>",
+                    "description": "<string>",
+                    "labelText": "<string>",
+                    "checked": "<boolean>",
+                    "status": "<string>",
+                    "linkDataPrivacy": {
+                        "label": "<string>",
+                        "link": "<string>",
+                        "linkText": "<string>"
+                    }
+                },
+                {
+                    "id": "<string>",
+                    "description": "<string>",
+                    "labelText": "<string>",
+                    "checked": "<boolean>",
+                    "status": "<string>",
+                    "linkDataPrivacy": {
+                        "label": "<string>",
+                        "link": "<string>",
+                        "target": "<string>",
+                        "linkText": "<string>"
+                    }
+                }
+            ]
+        },
+        "optional": {
+            "headline": "Optional cookies",
+            "cookies": [
+                {
+                    "id": "<string>",
+                    "description": "<string>",
+                    "labelText": "<string>",
+                    "checked": "<boolean>",
+                    "linkDataPrivacy": {
+                        "label": "<string>",
+                        "link": "<string>",
+                        "target": "<string>",
+                        "linkText": "<string>"
+                    }
+                },
+                {
+                    "id": "<string>",
+                    "description": "<string>",
+                    "labelText": "<string>",
+                    "checked": "<boolean>",
+                    "linkDataPrivacy": {
+                        "label": "<string>",
+                        "link": "<string>",
+                        "target": "<string>",
+                        "linkText": "<string>"
+                    }
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdCookieDisclaimer" headlineText="Cookie Disclaimer">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="cookieDisclaimer">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdCookieDisclaimer
+                            :cmdCustomHeadline="{headlineText: 'Usage of cookies on this web site', headlineLevel: 3}"
+                            :cookieOptions="cookieDisclaimer"
+                            buttonLabelAcceptAllCookies="Accept all cookies"
+                            buttonLabelAcceptCurrentSettings="Accept current settings"
+                            @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdCookieDisclaimer.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdCustomHeadlineHelp.vue

@@ -0,0 +1,53 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdCustomHeadlineHelp"
+import propertyDescriptions from "../../generated/CmdCustomHeadlinePropertyDescriptions.json"
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdCustomHeadline" headlineText="Headline level 1 (with icon and pre-headline)">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1" preHeadlineText="Pre-headline text" iconClass="icon-user-profile"/>
+                        <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1"/>
+                        <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
+                        <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
+                        <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
+                        <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
+                        <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdCustomHeadline" headlineText="Headline level 1-6 (without icons and pre-headline">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1"/>
+                        <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
+                        <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
+                        <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
+                        <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
+                        <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdCustomHeadline.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>