From bff1cfaa24c5f8ba9431dd2cc0083dd4e2b8bbcf Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Tue, 18 Jun 2024 13:39:15 +0200 Subject: [PATCH 01/13] docs: generate components with complex children for patternhub copy-code --- output/vue/README.md | 2 - .../src/components/popover/docs/React.md | 2 +- .../scripts/generate-example-jsx.js | 4 +- .../patternhub/scripts/get-code-files.js | 11 +- showcases/patternhub/scripts/utils.js | 186 +++++++-- showcases/shared/accordion.json | 110 ++++-- showcases/shared/badge.json | 29 +- showcases/shared/brand.json | 12 +- showcases/shared/button.json | 24 +- showcases/shared/card.json | 15 +- showcases/shared/divider.json | 18 +- showcases/shared/drawer.json | 190 +++------ showcases/shared/header.json | 369 +++++++++++++++--- showcases/shared/icon.json | 9 +- showcases/shared/infotext.json | 15 +- showcases/shared/navigation-item.json | 15 +- showcases/shared/navigation.json | 60 +-- showcases/shared/notification.json | 135 ++++++- showcases/shared/page.json | 9 +- showcases/shared/popover.json | 60 +++ showcases/shared/section.json | 15 +- showcases/shared/switch.json | 18 +- showcases/shared/tabs.json | 242 ++++++++---- showcases/shared/tag.json | 190 +++++---- showcases/shared/tooltip.json | 30 ++ 25 files changed, 1188 insertions(+), 582 deletions(-) diff --git a/output/vue/README.md b/output/vue/README.md index 0ee0c09b70b..4c6d400f6d0 100644 --- a/output/vue/README.md +++ b/output/vue/README.md @@ -36,7 +36,6 @@ Import the styles in scss or css. Based on your technology the file names could ```ts // main.ts import "./style.scss"; -import "@db-ui/v-components/dist/style.css"; ``` @@ -46,7 +45,6 @@ import "@db-ui/v-components/dist/style.css"; ```ts // main.ts import "@db-ui/components/build/styles/db-ui-42-rollup.css"; -import "@db-ui/v-components/dist/style.css"; ``` diff --git a/packages/components/src/components/popover/docs/React.md b/packages/components/src/components/popover/docs/React.md index 1dc89a91485..cc0b49b3a3f 100644 --- a/packages/components/src/components/popover/docs/React.md +++ b/packages/components/src/components/popover/docs/React.md @@ -9,7 +9,7 @@ For general installation and configuration take a look at the [react-components] import { DBPopover, DBButton } from "@db-ui/react-components"; const App = () => ( - Hover on me to open Popover}> + Hover on me to open Popover}> Use any html code here like e.g. a button: diff --git a/showcases/patternhub/scripts/generate-example-jsx.js b/showcases/patternhub/scripts/generate-example-jsx.js index fd5281caee9..df7a506daca 100644 --- a/showcases/patternhub/scripts/generate-example-jsx.js +++ b/showcases/patternhub/scripts/generate-example-jsx.js @@ -23,7 +23,9 @@ const generateExampleJSX = () => { const code = getCodeByFramework( componentName, 'react', - example + example, + true, + variant.children ); examples.push( `"${componentName}${variant.name}${ diff --git a/showcases/patternhub/scripts/get-code-files.js b/showcases/patternhub/scripts/get-code-files.js index d0d993ad185..b6fd3a3addd 100644 --- a/showcases/patternhub/scripts/get-code-files.js +++ b/showcases/patternhub/scripts/get-code-files.js @@ -1,7 +1,6 @@ /* eslint-disable no-await-in-loop */ import FS from 'node:fs'; import prettier from 'prettier'; -import prettier0 from 'prettier/parser-babel.js'; import { allExamples } from './generated/index.jsx'; import { getCodeByFramework } from './utils.js'; @@ -9,7 +8,6 @@ const sharedPath = '../shared'; const reactPath = '../react-showcase/src/components'; const codeFrameworks = ['angular', 'html', 'react', 'vue']; -const plugins = [prettier0]; const getFileTypeByFramework = (framework) => { if (framework === 'react') { @@ -25,6 +23,7 @@ const getFileTypeByFramework = (framework) => { const getExamplesAsMDX = async (componentName, variant) => { const examples = variant.examples; + const children = variant.children; let result = "import { useEffect, useState } from 'react';\n" + @@ -71,17 +70,19 @@ const getExamplesAsMDX = async (componentName, variant) => { exampleCode = getCodeByFramework( componentName, framework, - example + example, + false, + children ); } try { exampleCode = await prettier.format(exampleCode, { - parser: 'babel', - plugins + parser: framework === 'react' ? 'babel' : framework }); } catch { // We do not care about errors here + // console.error(e); } exampleCode = exampleCode?.replace(/;/g, '').trim(); diff --git a/showcases/patternhub/scripts/utils.js b/showcases/patternhub/scripts/utils.js index cac9c369b02..c210ed708ff 100644 --- a/showcases/patternhub/scripts/utils.js +++ b/showcases/patternhub/scripts/utils.js @@ -19,55 +19,62 @@ export const getUnionElements = (options, elements) => { }; /** - * @param componentName {string} + * @param props {object} * @param framework {'angular'|'react'|'vue'} - * @param example {{name:string, props: object}} - * @returns {string} + * @param noEvents {boolean} + * @return {*[]} */ -export const getCodeByFramework = (componentName, framework, example) => { - const properties = example.props; - let tag = `DB${componentName - .split('-') - .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) - .join('')}`; - if (framework === 'angular') { - tag = `db-${componentName}`; - } - +const getAttributes = (props, framework, noEvents) => { const attributes = []; - const propertyKeys = properties - ? Object.keys(properties).filter((key) => key !== 'children') + // Some slots which shouldn't be attributes + const propertyKeys = props + ? Object.keys(props).filter( + (key) => + key !== 'children' && + key !== 'component' && + key !== 'identifier' && + key !== 'img' && + key !== 'link' && + key !== 'noContent' + ) : []; for (const key of propertyKeys) { - let value = properties[key]; + let value = props[key]; + const isEventListener = key.startsWith('on'); - if (value instanceof Object) { - value = JSON.stringify(value); + if (noEvents && (isEventListener || value === key)) { + continue; } if ( - typeof properties[key] === 'boolean' || - typeof properties[key] === 'number' || - properties[key] instanceof Object || - key === 'click' + typeof value === 'boolean' || + typeof value === 'number' || + value instanceof Object || + value === key || + isEventListener ) { - if ( - framework !== 'react' && - (properties[key] instanceof Object || key === 'click') - ) { - value = value.replaceAll('"', "'"); + if (value instanceof Object) { + value = JSON.stringify(value); } if (framework === 'angular') { - attributes.push(`[${key}]="${value}"`); + if (isEventListener) { + attributes.push(`(${key})="${value}"`); + } else { + attributes.push(`[${key}]="${value}"`); + } } else if (framework === 'vue') { - attributes.push(`:${key}="${value}"`); - } else if (framework === 'react' && key === 'click') { - attributes.push(`onClick={${value}}`); - } else if (typeof properties[key] === 'boolean') { + if (isEventListener) { + attributes.push(`@${key}="${value}"`); + } else { + attributes.push(`:${key}="${value}"`); + } + } else if (typeof props[key] === 'boolean') { attributes.push(key); + } else if (isEventListener) { + attributes.push(`${key}={()=>${value}}`); } else { attributes.push(`${key}={${value}}`); } @@ -76,7 +83,120 @@ export const getCodeByFramework = (componentName, framework, example) => { } } - return `<${tag} ${attributes.join(' ')}>${example.name}`; + return attributes; +}; + +const getTag = (componentName) => + componentName + .split('-') + .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) + .join(''); + +/** + * @param componentName {string} + * @param framework {'angular'|'react'|'vue'} + * @param example {{name:string, props: object, className?:string, content?:string,children?:{name:string, props: object}[]}} + * @param noEvents {boolean} + * @param [children] {{name:string, props: object,slot?:string, angularDirective?:boolean, content?:string,children?:{name:string, props: object}[]}[]} + * @returns {string} + */ +export const getCodeByFramework = ( + componentName, + framework, + example, + noEvents, + children +) => { + const { props, name, content } = example; + let className = ''; + let tag = `DB${getTag(componentName)}`; + if (framework === 'angular') { + tag = `db-${componentName}`; + } + + if (componentName === 'img' || componentName === 'a') { + tag = componentName; + } + + if (example.className) { + className = + framework === 'react' + ? ` className="${example.className}"` + : ` class="${example.className}"`; + } + + const attributes = getAttributes(props, framework, noEvents); + const nonSlots = (children ?? example.children)?.filter( + (child) => + !child.slot || + (child.slot.includes('Navigation') && framework !== 'angular') + ); + const innerContent = + nonSlots?.length > 0 + ? nonSlots + .map((child) => + getCodeByFramework( + child.name, + framework, + child, + noEvents, + child.children + ) + ) + .join('\n') + (content ?? '') + : content ?? name; + + const slots = (children ?? example.children)?.filter((child) => + child.slot + ? !(child.slot.includes('Navigation') && framework !== 'angular') + : false + ); + let reactSlots = ''; + let otherSlots = ''; + if (slots) { + if (framework === 'react') { + reactSlots = + ' ' + + slots + .map((child) => { + let slotName = getTag(child.slot); + slotName = + slotName.charAt(0).toLowerCase() + + slotName.slice(1); + return `${slotName}={${getCodeByFramework( + child.name, + framework, + child, + noEvents, + child.children + )}}`; + }) + .join('\n'); + } else { + otherSlots = + ' ' + + slots + .map((child) => { + const resolvedSlot = getCodeByFramework( + child.name, + framework, + child, + noEvents, + child.children + ); + if (framework === 'angular') { + return `${resolvedSlot}`; + } + + return ``; + }) + .join('\n'); + } + } + + return `<${tag}${className} ${attributes.join(' ')}${reactSlots}> +${otherSlots}${innerContent} +`; }; export const getColorVariants = () => [ diff --git a/showcases/shared/accordion.json b/showcases/shared/accordion.json index 7f020cc3e8d..a90c5bd0618 100644 --- a/showcases/shared/accordion.json +++ b/showcases/shared/accordion.json @@ -1,53 +1,84 @@ [ { "name": "Density", + "children": [ + { + "name": "accordion-item", + "content": "Content 1", + "props": { + "headline": "Item 1" + } + }, + { + "name": "accordion-item", + "content": "Content 2", + "props": { + "headline": "Item 2" + } + }, + { + "name": "accordion-item", + "content": "Content 3", + "props": { + "headline": "Item 3" + } + } + ], "examples": [ { "name": "Functional", "className": "db-density-functional", - "props": {}, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } }, { "name": "(Default) Regular", "className": "db-density-regular", - "props": {}, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } }, { "name": "Expressive", "className": "db-density-expressive", - "props": {}, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } } ] }, { "name": "Variant", + + "children": [ + { + "name": "accordion-item", + "content": "Content 1", + "props": { + "headline": "Item 1" + } + }, + { + "name": "accordion-item", + "content": "Content 2", + "props": { + "headline": "Item 2" + } + }, + { + "name": "accordion-item", + "content": "Content 3", + "props": { + "headline": "Item 3" + } + } + ], "examples": [ { "name": "background (default)", - "props": {}, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } }, { @@ -56,16 +87,37 @@ "variant": "card" }, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } } ] }, { "name": "Behaviour", + + "children": [ + { + "name": "accordion-item", + "content": "Content 1", + "props": { + "headline": "Item 1" + } + }, + { + "name": "accordion-item", + "content": "Content 2", + "props": { + "headline": "Item 2" + } + }, + { + "name": "accordion-item", + "content": "Content 3", + "props": { + "headline": "Item 3" + } + } + ], "examples": [ { "name": "(Default) Multiple", @@ -73,10 +125,7 @@ "behaviour": "multiple" }, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } }, { @@ -85,10 +134,7 @@ "behaviour": "single" }, "code": { - "html": "The accordion is a pure JS Component", - "angular": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t", - "react": "\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t", - "vue": "\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t" + "html": "The accordion is a pure JS Component" } } ] diff --git a/showcases/shared/badge.json b/showcases/shared/badge.json index 03b62e95331..747219bcf71 100644 --- a/showcases/shared/badge.json +++ b/showcases/shared/badge.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "Emphasis", "examples": [ { - "name": "(Default) Weak", - "props": {} + "name": "(Default) Weak" }, { "name": "Strong", @@ -38,8 +34,7 @@ "name": "Semantic", "examples": [ { - "name": "(Default) Adaptive", - "props": {} + "name": "(Default) Adaptive" }, { "name": "Neutral", @@ -118,8 +113,7 @@ "name": "Size", "examples": [ { - "name": "(Default) Small", - "props": {} + "name": "(Default) Small" }, { "name": "Medium", @@ -133,8 +127,7 @@ "name": "Content", "examples": [ { - "name": "(Default) Text", - "props": {} + "name": "(Default) Text" }, { "name": "(Default) Text - Medium", @@ -144,12 +137,14 @@ }, { "name": "Dot - Small", + "content": "", "props": { "noContent": true } }, { "name": "Dot - Medium", + "content": "", "props": { "noContent": true, "size": "medium" @@ -181,36 +176,42 @@ }, { "name": "Corner - Top - Left", + "content": "", "props": { "placement": "corner-top-left" } }, { "name": "Corner - Center - Left", + "content": "", "props": { "placement": "corner-center-left" } }, { "name": "Corner - Bottom- Left", + "content": "", "props": { "placement": "corner-bottom-left" } }, { "name": "Corner - Top - Right", + "content": "", "props": { "placement": "corner-top-right" } }, { "name": "Corner - Center - Right", + "content": "", "props": { "placement": "corner-center-right" } }, { "name": "Corner - Bottom- Right", + "content": "", "props": { "placement": "corner-bottom-right" } diff --git a/showcases/shared/brand.json b/showcases/shared/brand.json index d0aa47c43b6..01ddefbf667 100644 --- a/showcases/shared/brand.json +++ b/showcases/shared/brand.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "Variants", "examples": [ { - "name": "(Default) With Logo", - "props": {} + "name": "(Default) With Logo" }, { "name": "No Logo", diff --git a/showcases/shared/button.json b/showcases/shared/button.json index f5d04387156..2fbc8e9ff4e 100644 --- a/showcases/shared/button.json +++ b/showcases/shared/button.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -24,8 +21,7 @@ "name": "Variant", "examples": [ { - "name": "(Default) Outlined - Adaptive", - "props": {} + "name": "(Default) Outlined - Adaptive" }, { "name": "Filled - Adaptive", @@ -51,8 +47,7 @@ "name": "State", "examples": [ { - "name": "(Default) Enabled", - "props": {} + "name": "(Default) Enabled" }, { "name": "Disabled", @@ -66,8 +61,7 @@ "name": "Size", "examples": [ { - "name": "(Default) Medium", - "props": {} + "name": "(Default) Medium" }, { "name": "Small", @@ -81,8 +75,7 @@ "name": "Content", "examples": [ { - "name": "(Default) Text", - "props": {} + "name": "(Default) Text" }, { "name": "Icon & Text", @@ -103,8 +96,7 @@ "name": "Behaviour", "examples": [ { - "name": "(Default) Auto Width", - "props": {} + "name": "(Default) Auto Width" }, { "name": "Width full", diff --git a/showcases/shared/card.json b/showcases/shared/card.json index 5a64bb46e93..ab18f1553a4 100644 --- a/showcases/shared/card.json +++ b/showcases/shared/card.json @@ -4,23 +4,19 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" }, { "name": "functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" } ] }, @@ -74,8 +70,7 @@ "name": "Behaviour", "examples": [ { - "name": "(Default) Non interactive", - "props": {} + "name": "(Default) Non interactive" }, { "name": "Interactive", diff --git a/showcases/shared/divider.json b/showcases/shared/divider.json index 3208f509aa7..b431a5ade21 100644 --- a/showcases/shared/divider.json +++ b/showcases/shared/divider.json @@ -5,20 +5,20 @@ { "name": "Functional", "style": { "width": "200px" }, - "className": "db-density-functional", - "props": {} + "content": "", + "className": "db-density-functional" }, { "name": "(Default) Regular", "style": { "width": "200px" }, - "className": "db-density-regular", - "props": {} + "content": "", + "className": "db-density-regular" }, { "name": "Expressive", "style": { "width": "200px" }, - "className": "db-density-expressive", - "props": {} + "content": "", + "className": "db-density-expressive" } ] }, @@ -28,11 +28,12 @@ { "name": "(Default) Adaptive - Horizontal", "style": { "width": "200px" }, - "props": {} + "content": "" }, { "name": "Adaptive - Vertical", "style": { "height": "100px" }, + "content": "", "props": { "variant": "vertical" } @@ -45,11 +46,12 @@ { "name": "(Default) Weak", "style": { "width": "200px" }, - "props": {} + "content": "" }, { "name": "Strong", "style": { "width": "200px" }, + "content": "", "props": { "emphasis": "strong" } diff --git a/showcases/shared/drawer.json b/showcases/shared/drawer.json index f1dbcb9b68a..5c300abd6c4 100644 --- a/showcases/shared/drawer.json +++ b/showcases/shared/drawer.json @@ -5,34 +5,28 @@ { "name": "Functional", "className": "db-density-functional", - "props": {}, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
functional
\n\t\t
\n\t", - "angular": "\n\tfunctional\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tfunctional\n\t\t\t", - "vue": "\n\t\tfunctional\n\t" + "props": { + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "(Default) Regular", "className": "db-density-regular", - "props": {}, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Regular (Default)
\n\t\t
\n\t", - "angular": "\n\tRegular (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tRegular (Default)\n\t\t\t", - "vue": "\n\t\tRegular (Default)\n\t" + "props": { + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Expressive", "className": "db-density-expressive", - "props": {}, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
expressive
\n\t\t
\n\t", - "angular": "\n\texpressive\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\texpressive\n\t\t\t", - "vue": "\n\t\texpressive\n\t" + "props": { + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } } ] @@ -43,26 +37,18 @@ { "name": "(Default) Medium", "props": { - "withCloseButton": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
With padding (Default)
\n\t\t
\n\t", - "angular": "\n\tWith padding (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tWith padding (Default)\n\t\t\t", - "vue": "With padding (Default)" + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Full", "props": { "withCloseButton": true, - "width": "full" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Full
\n\t\t
\n\t", - "angular": "\n\tFull\n", - "react": "\t\t\t {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tFull\n\t\t\t", - "vue": "\t\n\t\tFull\n\t" + "width": "full", + "open": "open", + "onClose": "toggleDrawer(false)" } } ] @@ -73,26 +59,18 @@ { "name": "(Default) No rounding", "props": { - "withCloseButton": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
No rounding (Default)
\n\t\t
\n\t", - "angular": "\n\tNo rounding (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo rounding (Default)\n\t\t\t", - "vue": "No rounding (Default)" + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Rounded", "props": { "withCloseButton": true, - "rounded": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Rounded
\n\t\t
\n\t", - "angular": "\n\tRounded\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tRounded\n\t\t\t", - "vue": "Rounded" + "rounded": true, + "open": "open", + "onClose": "toggleDrawer(false)" } } ] @@ -103,52 +81,36 @@ { "name": "(Default) Medium", "props": { - "withCloseButton": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Medium (Default)
\n\t\t
\n\t", - "angular": "\n\tMedium (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tMedium (Default)\n\t\t\t", - "vue": "Medium (Default)" + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Small", "props": { "withCloseButton": true, - "spacing": "small" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Small
\n\t\t
\n\t", - "angular": "\n\tSmall\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tSmall\n\t\t\t", - "vue": "Small" + "spacing": "small", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Large", "props": { "withCloseButton": true, - "spacing": "large" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Large
\n\t\t
\n\t", - "angular": "\n\tLarge\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tLarge\n\t\t\t", - "vue": "Large" + "spacing": "large", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "No spacing", "props": { "withCloseButton": true, - "spacing": "none" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
None
\n\t\t
\n\t", - "angular": "\n\tNone\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNone\n\t\t\t", - "vue": "None" + "spacing": "none", + "open": "open", + "onClose": "toggleDrawer(false)" } } ] @@ -159,52 +121,36 @@ { "name": "(Default) With Backdrop", "props": { - "withCloseButton": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
With Backdrop (Default)
\n\t\t
\n\t", - "angular": "\n\tWith Backdrop (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tWith Backdrop (Default)\n\t\t\t", - "vue": "With Backdrop (Default)" + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Backdrop-weak", "props": { "withCloseButton": true, - "backdrop": "weak" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Backdrop-weak
\n\t\t
\n\t", - "angular": "\n\tBackdrop-weak\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tBackdrop-weak\n\t\t\t", - "vue": "Backdrop-weak" + "backdrop": "weak", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Invisible", "props": { "withCloseButton": true, - "backdrop": "invisible" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
No Backdrop
\n\t\t
\n\t", - "angular": "\n\tNo Backdrop\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo Backdrop\n\t\t\t", - "vue": "No Backdrop" + "backdrop": "invisible", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "No Backdrop", "props": { "withCloseButton": true, - "backdrop": "none" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
No Backdrop
\n\t\t
\n\t", - "angular": "\n\tNo Backdrop\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tNo Backdrop\n\t\t\t", - "vue": "No Backdrop" + "backdrop": "none", + "open": "open", + "onClose": "toggleDrawer(false)" } } ] @@ -215,52 +161,36 @@ { "name": "(Default) Right", "props": { - "withCloseButton": true - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Right (Default)
\n\t\t
\n\t", - "angular": "\n\tRight (Default)\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tRight (Default)\n\t\t\t", - "vue": "Right (Default)" + "withCloseButton": true, + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Left", "props": { "withCloseButton": true, - "direction": "left" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Left
\n\t\t
\n\t", - "angular": "\n\tLeft\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tLeft\n\t\t\t", - "vue": "Left" + "direction": "left", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Up", "props": { "withCloseButton": true, - "direction": "up" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Up
\n\t\t
\n\t", - "angular": "\n\tUp\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tUp\n\t\t\t", - "vue": "Up" + "direction": "up", + "open": "open", + "onClose": "toggleDrawer(false)" } }, { "name": "Down", "props": { "withCloseButton": true, - "direction": "down" - }, - "code": { - "html": "\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tClose Button\n\t\t\t\t\n\t\t\t
\n\t\t\t
Down
\n\t\t
\n\t", - "angular": "\n\tDown\n", - "react": " {\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tDown\n\t\t\t", - "vue": "Down" + "direction": "down", + "open": "open", + "onClose": "toggleDrawer(false)" } } ] diff --git a/showcases/shared/header.json b/showcases/shared/header.json index 33a5adb62c0..c7c6151acb7 100644 --- a/showcases/shared/header.json +++ b/showcases/shared/header.json @@ -1,6 +1,85 @@ [ { "name": "Tonality", + "children": [ + { + "name": "brand", + "slot": "brand", + "content": "DBHeader" + }, + { + "name": "link", + "slot": "meta-navigation", + "angularDirective": true, + "content": "Imprint", + "props": { + "href": "#" + } + }, + { + "name": "button", + "slot": "primary-action", + "content": "Search", + "props": { + "icon": "magnifying_glass", + "variant": "ghost", + "noText": true + } + }, + { + "name": "button", + "slot": "secondary-action", + "angularDirective": true, + "content": "Profile", + "props": { + "icon": "user", + "variant": "ghost", + "noText": true + } + }, + { + "name": "navigation", + "slot": "Navigation", + "angularDirective": true, + "children": [ + { + "name": "navigation-item", + "props": { + "icon": "user" + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link", + "props": { + "href": "#" + } + } + ] + }, + { + "name": "navigation-item", + "props": { + "icon": "user", + "disabled": true + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link disabled", + "props": { + "href": "#" + } + } + ] + } + ] + } + ], "examples": [ { "name": "Functional", @@ -8,13 +87,6 @@ "style": { "width": "100%", "display": "block" - }, - "props": {}, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tfunctionalfunctional disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tfunctional\n\t\t\t\n\t\t\t\n\t\t\t\tfunctional disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tfunctional\n\t\t\t\n\t\t\t\n\t\t\t\tfunctional disabled\n\t\t\t\n\t\t\n\t" } }, { @@ -23,13 +95,6 @@ "style": { "width": "100%", "display": "block" - }, - "props": {}, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tRegular (Default)Regular (Default) disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tRegular (Default)\n\t\t\t\n\t\t\t\n\t\t\t\tRegular (Default) disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tRegular (Default)\n\t\t\t\n\t\t\t\n\t\t\t\tRegular (Default) disabled\n\t\t\t\n\t\t\n\t" } }, { @@ -38,32 +103,97 @@ "style": { "width": "100%", "display": "block" - }, - "props": {}, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\texpressiveexpressive disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\texpressive\n\t\t\t\n\t\t\t\n\t\t\t\texpressive disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\texpressive\n\t\t\t\n\t\t\t\n\t\t\t\texpressive disabled\n\t\t\t\n\t\t\n\t" } } ] }, { "name": "Width", + "children": [ + { + "name": "brand", + "slot": "brand", + "content": "DBHeader" + }, + { + "name": "link", + "slot": "meta-navigation", + "angularDirective": true, + "content": "Imprint", + "props": { + "href": "#" + } + }, + { + "name": "button", + "slot": "primary-action", + "content": "Search", + "props": { + "icon": "magnifying_glass", + "variant": "ghost", + "noText": true + } + }, + { + "name": "button", + "slot": "secondary-action", + "angularDirective": true, + "content": "Profile", + "props": { + "icon": "user", + "variant": "ghost", + "noText": true + } + }, + { + "name": "navigation", + "slot": "Navigation", + "angularDirective": true, + "children": [ + { + "name": "navigation-item", + "props": { + "icon": "user" + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link", + "props": { + "href": "#" + } + } + ] + }, + { + "name": "navigation-item", + "props": { + "icon": "user", + "disabled": true + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link disabled", + "props": { + "href": "#" + } + } + ] + } + ] + } + ], "examples": [ { "name": "Full", - "props": {}, "style": { "width": "100%", "display": "block" - }, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tDesktop (full width)Desktop (full width) disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t" } }, { @@ -74,12 +204,6 @@ }, "props": { "width": "medium" - }, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tDesktop (full width)Desktop (full width) disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\tbrand={\n\t\t\t\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t" } }, { @@ -90,31 +214,97 @@ }, "props": { "width": "large" - }, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tDesktop (full width)Desktop (full width) disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\tbrand={\n\t\t\t\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t" } } ] }, { "name": "Behaviour", + "children": [ + { + "name": "brand", + "slot": "brand", + "content": "DBHeader" + }, + { + "name": "link", + "slot": "meta-navigation", + "angularDirective": true, + "content": "Imprint", + "props": { + "href": "#" + } + }, + { + "name": "button", + "slot": "primary-action", + "content": "Search", + "props": { + "icon": "magnifying_glass", + "variant": "ghost", + "noText": true + } + }, + { + "name": "button", + "slot": "secondary-action", + "angularDirective": true, + "content": "Profile", + "props": { + "icon": "user", + "variant": "ghost", + "noText": true + } + }, + { + "name": "navigation", + "slot": "Navigation", + "angularDirective": true, + "children": [ + { + "name": "navigation-item", + "props": { + "icon": "user" + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link", + "props": { + "href": "#" + } + } + ] + }, + { + "name": "navigation-item", + "props": { + "icon": "user", + "disabled": true + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link disabled", + "props": { + "href": "#" + } + } + ] + } + ] + } + ], "examples": [ { "name": "Desktop (full width)", - "props": {}, "style": { "width": "100%", "display": "block" - }, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tDesktop (full width)Desktop (full width) disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tDesktop (full width)\n\t\t\t\n\t\t\t\n\t\t\t\tDesktop (full width) disabled\n\t\t\t\n\t\t\n\t" } }, { @@ -125,18 +315,91 @@ }, "props": { "forceMobile": "true" - }, - "code": { - "html": "
\n\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tClose Button\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tImprintHelp\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tProfile\n\t\t\t\t\t\t\tNotification\n\t\t\t\t\t\t\tHelp\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t
\n\t\t\tImprintHelp\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDBHeader\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default)\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tRegular (Default) disabled\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tBurgerMenu\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tProfile\n\t\t\t\t\t\tNotification\n\t\t\t\t\t\tHelp\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t
", - "angular": "\n\tDBHeader\n\t\n\t\tMobileMobile disabled\n\t\n\t\n\t\tImprint\n\t\tHelp\n\t\n\t\n\t\t\n\t\t\tSearch\n\t\t\n\t\n\t\n\t\t\n\t\t\tProfile\n\t\t\n\t\t\n\t\t\tNotification\n\t\t\n\t\t Help \n\t\n", - "react": "\n\t\t\t\tDBHeader\n\t\t\t\n\t\t}\n\t\tmetaNavigation={\n\t\t\t<>\n\t\t\t\tImprint\n\t\t\t\tHelp\n\t\t\t\n\t\t}\n\t\tprimaryAction={\n\t\t\t\n\t\t\t\tSearch\n\t\t\t\n\t\t}\n\t\tsecondaryAction={\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tProfile\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tNotification\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tHelp\n\t\t\t\t\n\t\t\t\n\t\t}>\n\t\t\n\t\t\t\n\t\t\t\tMobile\n\t\t\t\n\t\t\t\n\t\t\t\tMobile disabled\n\t\t\t\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tMobile\n\t\t\t\n\t\t\t\n\t\t\t\tMobile disabled\n\t\t\t\n\t\t\n\t" } } ] }, { "name": "Examples", + "children": [ + { + "name": "brand", + "slot": "brand", + "content": "DBHeader" + }, + { + "name": "link", + "slot": "meta-navigation", + "angularDirective": true, + "content": "Imprint", + "props": { + "href": "#" + } + }, + { + "name": "button", + "slot": "primary-action", + "content": "Search", + "props": { + "icon": "magnifying_glass", + "variant": "ghost", + "noText": true + } + }, + { + "name": "button", + "slot": "secondary-action", + "angularDirective": true, + "content": "Profile", + "props": { + "icon": "user", + "variant": "ghost", + "noText": true + } + }, + { + "name": "navigation", + "slot": "Navigation", + "angularDirective": true, + "children": [ + { + "name": "navigation-item", + "props": { + "icon": "user" + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link", + "props": { + "href": "#" + } + } + ] + }, + { + "name": "navigation-item", + "props": { + "icon": "user", + "disabled": true + }, + "children": [ + { + "name": "a", + "slot": "NavigationContent", + "angularDirective": true, + "content": "Link disabled", + "props": { + "href": "#" + } + } + ] + } + ] + } + ], "examples": [ { "name": "With Application Name + Navigation", diff --git a/showcases/shared/icon.json b/showcases/shared/icon.json index 150904c9528..6c48d214d16 100644 --- a/showcases/shared/icon.json +++ b/showcases/shared/icon.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] } diff --git a/showcases/shared/infotext.json b/showcases/shared/infotext.json index 71f45aa5f67..34beaf731e3 100644 --- a/showcases/shared/infotext.json +++ b/showcases/shared/infotext.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "Semantic", "examples": [ { - "name": "(Default) Adaptive", - "props": {} + "name": "(Default) Adaptive" }, { "name": "Neutral", @@ -62,8 +58,7 @@ "name": "Size", "examples": [ { - "name": "(Default) Medium", - "props": {} + "name": "(Default) Medium" }, { "name": "Small", diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json index 342decafce4..2a0c7561851 100644 --- a/showcases/shared/navigation-item.json +++ b/showcases/shared/navigation-item.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "Interaction-States", "examples": [ { - "name": "Enabled (Default)/Hover/Pressed", - "props": {} + "name": "Enabled (Default)/Hover/Pressed" }, { "name": "Active", @@ -75,8 +71,7 @@ "examples": [ { "name": "(Default) Auto", - "style": { "width": "400px" }, - "props": {} + "style": { "width": "400px" } }, { "name": "Full", diff --git a/showcases/shared/navigation.json b/showcases/shared/navigation.json index ff8a003d5ab..59601f52b94 100644 --- a/showcases/shared/navigation.json +++ b/showcases/shared/navigation.json @@ -1,39 +1,51 @@ [ { "name": "Density", + "children": [ + { + "name": "navigation-item", + "content": "Navi-Item 1", + "props": { + "active": true + }, + "children": [ + { + "name": "navigation-item", + "content": "Sub-Navi-Item 1", + "slot": "sub-navigation", + "props": { + "active": true + }, + "children": [ + { + "name": "navigation-item", + "content": "Sub-Sub-Navi-Item 1", + "slot": "sub-navigation", + "props": { + "active": true + } + } + ] + } + ] + }, + { + "name": "navigation-item", + "content": "Navi-Item 2" + } + ], "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {}, - "code": { - "html": "", - "angular": "\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t Navi-Item 1 \n\t\n\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\n\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t\n", - "react": "\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\tNavi-Item 1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t" - } + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {}, - "code": { - "html": "", - "angular": "\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t Navi-Item 1 \n\t\n\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\n\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t\n", - "react": "\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\tNavi-Item 1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t" - } + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {}, - "code": { - "html": "", - "angular": "\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t Navi-Item 1 \n\t\n\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\n\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t\n", - "react": "\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 1\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tSub-Sub-Navi-Item 2\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tSub-Navi-Item 2\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t", - "vue": "\n\t\t\n\t\t\tNavi-Item 1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNavi-Item 2\n\t\t\n\t\t\n\t\t\tNavi-Item 3\n\t\t\n\t" - } + "className": "db-density-expressive" } ] } diff --git a/showcases/shared/notification.json b/showcases/shared/notification.json index d3efa9963ac..0e617a924d9 100644 --- a/showcases/shared/notification.json +++ b/showcases/shared/notification.json @@ -177,7 +177,18 @@ "props": { "img": true, "behaviour": "permanent" - } + }, + "children": [ + { + "name": "img", + "slot": "image", + "content": "", + "props": { + "src": "/assets/images/placeholder.jpg", + "alt": "placeholder" + } + } + ] }, { "name": "Text & Headline", @@ -193,7 +204,17 @@ "props": { "link": true, "behaviour": "permanent" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Textlink Inline", @@ -202,7 +223,17 @@ "link": true, "linkVariant": "inline", "behaviour": "permanent" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Headline & Textlink Inline & Cloaseable", @@ -211,7 +242,17 @@ "headline": "Headline", "link": true, "linkVariant": "inline" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Icon & Headline & Textlink Inline & Cloaseable", @@ -221,7 +262,17 @@ "headline": "Headline", "link": true, "linkVariant": "inline" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] } ] }, @@ -252,7 +303,18 @@ "img": true, "variant": "standalone", "behaviour": "permanent" - } + }, + "children": [ + { + "name": "img", + "slot": "image", + "content": "", + "props": { + "src": "/assets/images/placeholder.jpg", + "alt": "placeholder" + } + } + ] }, { "name": "Text & Headline", @@ -270,7 +332,17 @@ "link": true, "variant": "standalone", "behaviour": "permanent" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Textlink Inline", @@ -280,7 +352,17 @@ "linkVariant": "inline", "variant": "standalone", "behaviour": "permanent" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Headline & Textlink Inline & Cloaseable", @@ -290,7 +372,17 @@ "link": true, "linkVariant": "inline", "variant": "standalone" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] }, { "name": "Text & Icon & Headline & Textlink Inline & Cloaseable", @@ -301,7 +393,17 @@ "link": true, "linkVariant": "inline", "variant": "standalone" - } + }, + "children": [ + { + "name": "link", + "slot": "link", + "content": "Textlink", + "props": { + "href": "#" + } + } + ] } ] }, @@ -332,7 +434,18 @@ "img": true, "variant": "overlay", "behaviour": "permanent" - } + }, + "children": [ + { + "name": "img", + "slot": "image", + "content": "", + "props": { + "src": "/assets/images/placeholder.jpg", + "alt": "placeholder" + } + } + ] }, { "name": "Text & Headline", diff --git a/showcases/shared/page.json b/showcases/shared/page.json index 49917885f0b..8cee7bec1a6 100644 --- a/showcases/shared/page.json +++ b/showcases/shared/page.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] } diff --git a/showcases/shared/popover.json b/showcases/shared/popover.json index 5a4e9e48986..f4fc568f1e4 100644 --- a/showcases/shared/popover.json +++ b/showcases/shared/popover.json @@ -1,6 +1,16 @@ [ { "name": "Density", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "Functional", @@ -27,6 +37,16 @@ }, { "name": "Spacing", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "(Default) Small", @@ -53,6 +73,16 @@ }, { "name": "Placement", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "bottom-start", @@ -142,6 +172,16 @@ }, { "name": "Gap", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "(Default) No gap", @@ -160,6 +200,16 @@ }, { "name": "Animations", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "(Default) Animation no delay", @@ -192,6 +242,16 @@ }, { "name": "Width", + "children": [ + { + "name": "button", + "slot": "trigger" + }, + { + "name": "button", + "content": "Inside Popover" + } + ], "examples": [ { "name": "(Default) Auto", diff --git a/showcases/shared/section.json b/showcases/shared/section.json index 36abb8cec10..37ee5d9f068 100644 --- a/showcases/shared/section.json +++ b/showcases/shared/section.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -27,8 +24,7 @@ "style": { "width": "100%", "display": "block" - }, - "props": {} + } }, { "name": "Medium", @@ -50,8 +46,7 @@ "name": "Spacing", "examples": [ { - "name": "(Default) Medium", - "props": {} + "name": "(Default) Medium" }, { "name": "Large", diff --git a/showcases/shared/switch.json b/showcases/shared/switch.json index bbadcea62a5..7c26d3b7f6e 100644 --- a/showcases/shared/switch.json +++ b/showcases/shared/switch.json @@ -4,18 +4,15 @@ "examples": [ { "name": "functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "regular (Default)", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "States", "examples": [ { - "name": "(Def) Enabled", - "props": {} + "name": "(Def) Enabled" }, { "name": "Checked", @@ -106,8 +102,7 @@ "name": "Size", "examples": [ { - "name": "(Def) Medium", - "props": {} + "name": "(Def) Medium" }, { "name": "Small", @@ -121,8 +116,7 @@ "name": "Content", "examples": [ { - "name": "(Def) Label", - "props": {} + "name": "(Def) Label" }, { "name": "No Label", diff --git a/showcases/shared/tabs.json b/showcases/shared/tabs.json index 55113143a5d..4b125ad019a 100644 --- a/showcases/shared/tabs.json +++ b/showcases/shared/tabs.json @@ -1,85 +1,139 @@ [ { "name": "Tonality", + "children": [ + { + "name": "tab-list", + "children": [ + { + "name": "tab-item", + "content": "Tab 1" + }, + { + "name": "tab-item", + "content": "Tab 2" + }, + { + "name": "tab-item", + "content": "Tab 3" + } + ] + }, + { + "name": "tab-panel", + "content": "Tab Panel 1" + }, + { + "name": "tab-panel", + "content": "Tab Panel 2" + }, + { + "name": "tab-panel", + "content": "Tab Panel 3" + } + ], "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {}, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" - } + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {}, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" - } + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {}, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" - } + "className": "db-density-expressive" } ] }, { "name": "Orientation", + "children": [ + { + "name": "tab-list", + "children": [ + { + "name": "tab-item", + "content": "Tab 1" + }, + { + "name": "tab-item", + "content": "Tab 2" + }, + { + "name": "tab-item", + "content": "Tab 3" + } + ] + }, + { + "name": "tab-panel", + "content": "Tab Panel 1" + }, + { + "name": "tab-panel", + "content": "Tab Panel 2" + }, + { + "name": "tab-panel", + "content": "Tab Panel 3" + } + ], "examples": [ { "name": "horizontal", "props": { "orientation": "horizontal" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { "name": "vertical", "props": { "orientation": "vertical" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] }, { "name": "Width", + "children": [ + { + "name": "tab-list", + "children": [ + { + "name": "tab-item", + "content": "Tab 1" + }, + { + "name": "tab-item", + "content": "Tab 2" + }, + { + "name": "tab-item", + "content": "Tab 3" + } + ] + }, + { + "name": "tab-panel", + "content": "Tab Panel 1" + }, + { + "name": "tab-panel", + "content": "Tab Panel 2" + }, + { + "name": "tab-panel", + "content": "Tab Panel 3" + } + ], "examples": [ { "name": "auto", "style": { "width": "100%" }, "props": { "width": "auto" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -87,12 +141,6 @@ "style": { "width": "100%" }, "props": { "width": "full" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -101,30 +149,49 @@ "props": { "width": "full", "alignment": "center" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] }, { "name": "Overflow", + "children": [ + { + "name": "tab-list", + "children": [ + { + "name": "tab-item", + "content": "Tab 1" + }, + { + "name": "tab-item", + "content": "Tab 2" + }, + { + "name": "tab-item", + "content": "Tab 3" + } + ] + }, + { + "name": "tab-panel", + "content": "Tab Panel 1" + }, + { + "name": "tab-panel", + "content": "Tab Panel 2" + }, + { + "name": "tab-panel", + "content": "Tab Panel 3" + } + ], "examples": [ { "name": "no overflow", "style": { "width": "300px" }, "props": { "width": "auto" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -133,12 +200,6 @@ "props": { "overflow": true, "behaviour": "arrows" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { @@ -146,41 +207,54 @@ "style": { "width": "300px" }, "props": { "overflow": true - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] }, { "name": "Examples", + "children": [ + { + "name": "tab-list", + "children": [ + { + "name": "tab-item", + "content": "Tab 1" + }, + { + "name": "tab-item", + "content": "Tab 2" + }, + { + "name": "tab-item", + "content": "Tab 3" + } + ] + }, + { + "name": "tab-panel", + "content": "Tab Panel 1" + }, + { + "name": "tab-panel", + "content": "Tab Panel 2" + }, + { + "name": "tab-panel", + "content": "Tab Panel 3" + } + ], "examples": [ { "name": "2 tab selected", "props": { "initialSelectedIndex": 1 - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } }, { "name": "nothing selected", "props": { "initialSelectedMode": "manually" - }, - "code": { - "html": "
\n\t\t
\n\t\t\t
\n\t\t\t\tTest 1Test 2Test 3\n\t\t\t
\n\t\t
\n\t\t\n\t\t\tTab Panel 1\n\t\t\n\t\t\n\t\t\tTab Panel 2\n\t\t\n\t\t\n\t\t\tTab Panel 3\n\t\t\n\t
", - "angular": "\n\t\n\t\tTab 1\n\t\tTab 2\n\t\tTab 3\n\t\n\tTab Panel 1\n\tTab Panel 2\n\tTab Panel 3\n", - "react": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t", - "vue": "\n\t\t\n\t\t\tTab 1\n\t\t\tTab 2\n\t\t\tTab 3\n\t\t\n\t\tTab Panel 1\n\t\tTab Panel 2\n\t\tTab Panel 3\n\t" } } ] diff --git a/showcases/shared/tag.json b/showcases/shared/tag.json index 9489626f7eb..afc40f7d059 100644 --- a/showcases/shared/tag.json +++ b/showcases/shared/tag.json @@ -4,18 +4,15 @@ "examples": [ { "name": "Functional", - "className": "db-density-functional", - "props": {} + "className": "db-density-functional" }, { "name": "(Default) Regular", - "className": "db-density-regular", - "props": {} + "className": "db-density-regular" }, { "name": "Expressive", - "className": "db-density-expressive", - "props": {} + "className": "db-density-expressive" } ] }, @@ -23,8 +20,7 @@ "name": "Emphasis", "examples": [ { - "name": "(Default) Weak", - "props": {} + "name": "(Default) Weak" }, { "name": "Strong", @@ -38,8 +34,7 @@ "name": "Semantic", "examples": [ { - "name": "(Default) Adaptive", - "props": {} + "name": "(Default) Adaptive" }, { "name": "Neutral", @@ -118,44 +113,40 @@ "name": "Behaviour", "examples": [ { - "name": "(Default) Static", - "props": {} + "name": "(Default) Static" }, { "name": "Interactive Button", "props": { "component": "button" }, - "code": { - "angular": "Interactive Button", - "html": "
", - "react": "Interactive Button", - "vue": "Interactive Button" - } + "children": [ + { + "name": "button" + } + ] }, { "name": "Interactive Link", "props": { "component": "link" }, - "code": { - "angular": "Interactive Link", - "html": "
Interactive Link
", - "react": "Interactive Link", - "vue": "Interactive Link" - } + "children": [ + { + "name": "link" + } + ] }, { "name": "Interactive Checkbox", "props": { "component": "checkbox" }, - "code": { - "angular": "Interactive Checkbox", - "html": "
", - "react": "Interactive Checkbox", - "vue": "Interactive Checkbox" - } + "children": [ + { + "name": "checkbox" + } + ] }, { "name": "Interactive Radio 1", @@ -163,25 +154,29 @@ "component": "radio", "identifier": "radio01" }, - "code": { - "angular": "Interactive Radio 1", - "html": "
", - "react": "Interactive Radio 1", - "vue": "Interactive Radio 1" - } + "children": [ + { + "name": "link", + "props": { + "name": "radio01" + } + } + ] }, { "name": "Interactive Radio 2", "props": { "component": "radio", - "identifier": "radio01", - "code": { - "angular": "Interactive Radio 2", - "html": "
", - "react": "Interactive Radio 2", - "vue": "Interactive Radio 2" + "identifier": "radio01" + }, + "children": [ + { + "name": "link", + "props": { + "name": "radio01" + } } - } + ] }, { "name": "Removeable", @@ -199,12 +194,11 @@ "props": { "component": "checkbox" }, - "code": { - "angular": "Interactive Checkbox", - "html": "
", - "react": "Interactive Checkbox", - "vue": "Interactive Checkbox" - } + "children": [ + { + "name": "checkbox" + } + ] }, { "name": "Checked", @@ -212,12 +206,14 @@ "component": "checkbox", "checked": true }, - "code": { - "angular": "Interactive Checkbox", - "html": "
", - "react": "Interactive Checkbox", - "vue": "Interactive Checkbox" - } + "children": [ + { + "name": "checkbox", + "props": { + "checked": true + } + } + ] }, { "name": "Disabled", @@ -226,12 +222,15 @@ "checked": true, "disabled": true }, - "code": { - "angular": "Interactive Checkbox", - "html": "
", - "react": "Interactive Checkbox", - "vue": "Interactive Checkbox" - } + "children": [ + { + "name": "checkbox", + "props": { + "checked": true, + "disabled": true + } + } + ] } ] }, @@ -239,8 +238,7 @@ "name": "Content", "examples": [ { - "name": "(Default) Text", - "props": {} + "name": "(Default) Text" }, { "name": "Icon", @@ -261,8 +259,7 @@ "name": "Overflow", "examples": [ { - "name": "(Default) No Overflow", - "props": {} + "name": "(Default) No Overflow" }, { "name": "With Overflow (max-width)", @@ -283,12 +280,11 @@ "icon": "user", "behaviour": "removable" }, - "code": { - "angular": "Interactive Button", - "html": "
", - "react": "Interactive Button", - "vue": "Interactive Button" - } + "children": [ + { + "name": "button" + } + ] }, { "name": "Interactive Strong Link with Icon", @@ -297,12 +293,11 @@ "emphasis": "strong", "icon": "user" }, - "code": { - "angular": "Interactive Link", - "html": "
Interactive Link
", - "react": "Interactive Link", - "vue": "Interactive Link" - } + "children": [ + { + "name": "link" + } + ] }, { "name": "Interactive Strong Checkbox with Icon", @@ -311,12 +306,11 @@ "emphasis": "strong", "icon": "user" }, - "code": { - "angular": "Interactive Checkbox", - "html": "
", - "react": "Interactive Checkbox", - "vue": "Interactive Checkbox" - } + "children": [ + { + "name": "checkbox" + } + ] }, { "name": "Interactive Strong Radio 1 with Icon", @@ -326,12 +320,14 @@ "icon": "user", "identifier": "radio02" }, - "code": { - "angular": "Interactive Radio 1", - "html": "
", - "react": "Interactive Radio 1", - "vue": "Interactive Radio 1" - } + "children": [ + { + "name": "radio", + "props": { + "name": "radio02" + } + } + ] }, { "name": "Interactive Strong Radio 2 with Icon", @@ -339,14 +335,16 @@ "component": "radio", "emphasis": "strong", "icon": "user", - "identifier": "radio02", - "code": { - "angular": "Interactive Radio 2", - "html": "
", - "react": "Interactive Radio 2", - "vue": "Interactive Radio 2" + "identifier": "radio02" + }, + "children": [ + { + "name": "radio", + "props": { + "name": "radio02" + } } - } + ] } ] } diff --git a/showcases/shared/tooltip.json b/showcases/shared/tooltip.json index 5714e5295a5..8e395d56842 100644 --- a/showcases/shared/tooltip.json +++ b/showcases/shared/tooltip.json @@ -1,6 +1,11 @@ [ { "name": "Density", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "Functional", @@ -30,6 +35,11 @@ }, { "name": "Variant", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "(Default) With arrow", @@ -50,6 +60,11 @@ }, { "name": "Emphasis", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "(Default) Weak", @@ -70,6 +85,11 @@ }, { "name": "Placement", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "bottom-start", @@ -171,6 +191,11 @@ }, { "name": "Width", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "(Default) Auto", @@ -191,6 +216,11 @@ }, { "name": "Animations", + "children": [ + { + "name": "button" + } + ], "examples": [ { "name": "(Default) Animation no delay", From d67aa6e507767854bc2b27cdd4dc962aabc9c1fe Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Tue, 18 Jun 2024 14:41:20 +0200 Subject: [PATCH 02/13] fix: make exampleProps optional --- .../accordion-item.component.html | 6 +-- .../accordion/accordion.component.html | 4 +- .../app/components/badge/badge.component.html | 28 +++++------ .../app/components/brand/brand.component.html | 4 +- .../components/button/button.component.html | 12 ++--- .../app/components/card/card.component.html | 6 +-- .../checkbox/checkbox.component.html | 16 +++--- .../src/app/components/default.component.html | 2 +- .../components/divider/divider.component.html | 4 +- .../components/drawer/drawer.component.html | 12 ++--- .../components/header/header.component.html | 12 ++--- .../infotext/infotext.component.html | 6 +-- .../app/components/input/input.component.html | 20 ++++---- .../app/components/link/link.component.html | 10 ++-- .../navigation-item.component.html | 14 +++--- .../notification/notification.component.html | 18 +++---- .../components/popover/popover.component.html | 18 +++---- .../app/components/radio/radio.component.html | 16 +++--- .../components/section/section.component.html | 4 +- .../components/select/select.component.html | 16 +++--- .../components/switch/switch.component.html | 18 +++---- .../tab-item/tab-item.component.html | 10 ++-- .../app/components/tabs/tabs.component.html | 16 +++--- .../src/app/components/tag/tag.component.html | 34 ++++++------- .../textarea/textarea.component.html | 20 ++++---- .../components/tooltip/tooltip.component.html | 18 +++---- showcases/shared/default-component-data.ts | 2 + .../src/components/DefaultComponent.vue | 4 +- .../accordion-item/AccordionItem.vue | 6 +-- .../src/components/accordion/Accordion.vue | 4 +- .../src/components/badge/Badge.vue | 28 +++++------ .../src/components/brand/Brand.vue | 4 +- .../src/components/button/Button.vue | 12 ++--- .../vue-showcase/src/components/card/Card.vue | 6 +-- .../src/components/checkbox/Checkbox.vue | 18 +++---- .../src/components/divider/Divider.vue | 4 +- .../src/components/drawer/Drawer.vue | 12 ++--- .../src/components/header/Header.vue | 16 +++--- .../src/components/infotext/Infotext.vue | 6 +-- .../src/components/input/Input.vue | 22 ++++---- .../vue-showcase/src/components/link/Link.vue | 10 ++-- .../navigation-item/NavigationItem.vue | 16 +++--- .../components/notification/Notification.vue | 18 +++---- .../src/components/popover/Popover.vue | 20 ++++---- .../src/components/radio/Radio.vue | 16 +++--- .../src/components/section/Section.vue | 4 +- .../src/components/select/Select.vue | 16 +++--- .../src/components/switch/Switch.vue | 18 +++---- .../src/components/tab-item/TabItem.vue | 10 ++-- .../vue-showcase/src/components/tabs/Tabs.vue | 16 +++--- .../vue-showcase/src/components/tag/Tag.vue | 50 +++++++++---------- .../src/components/textarea/Textarea.vue | 20 ++++---- .../src/components/tooltip/Tooltip.vue | 18 +++---- 53 files changed, 363 insertions(+), 357 deletions(-) diff --git a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html index 326ce90f444..dd4688f9d47 100644 --- a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html +++ b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html @@ -11,9 +11,9 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/accordion/accordion.component.html b/showcases/angular-showcase/src/app/components/accordion/accordion.component.html index 115b4cd2e14..d788efdf0e2 100644 --- a/showcases/angular-showcase/src/app/components/accordion/accordion.component.html +++ b/showcases/angular-showcase/src/app/components/accordion/accordion.component.html @@ -14,8 +14,8 @@ {{ exampleName }} - @if (!exampleProps.placement && !exampleProps.example) { + @if (!exampleProps?.placement && !exampleProps?.example) { {{ exampleProps.noContent ? "" : exampleName }}{{ exampleProps?.noContent ? "" : exampleName }} - @if (exampleProps.noContent) { + @if (exampleProps?.noContent) { {{ exampleName }} @@ -25,16 +25,16 @@ } @if ( - exampleProps.placement && - exampleProps.placement !== "inline" && - !exampleProps.example + exampleProps?.placement && + exampleProps?.placement !== "inline" && + !exampleProps?.example ) { {{ exampleName }} @@ -43,7 +43,7 @@ } - @if (exampleProps.placement === "inline") { + @if (exampleProps?.placement === "inline") {
{{ exampleName }} @@ -54,11 +54,11 @@
} - @if (exampleProps.example === "icon") { + @if (exampleProps?.example === "icon") { {{ exampleName }} @@ -67,7 +67,7 @@ } - @if (exampleProps.example === "number") { + @if (exampleProps?.example === "number") { 9 12 123 diff --git a/showcases/angular-showcase/src/app/components/brand/brand.component.html b/showcases/angular-showcase/src/app/components/brand/brand.component.html index 95178d5210a..0e716d5836d 100644 --- a/showcases/angular-showcase/src/app/components/brand/brand.component.html +++ b/showcases/angular-showcase/src/app/components/brand/brand.component.html @@ -10,8 +10,8 @@ let-exampleIndex="exampleIndex" let-variantIndex="variantIndex" > - - @if (exampleProps.customLogo) { + + @if (exampleProps?.customLogo) { logo } {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/button/button.component.html b/showcases/angular-showcase/src/app/components/button/button.component.html index 5df273b6e39..9a5d3895d3e 100644 --- a/showcases/angular-showcase/src/app/components/button/button.component.html +++ b/showcases/angular-showcase/src/app/components/button/button.component.html @@ -11,12 +11,12 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/card/card.component.html b/showcases/angular-showcase/src/app/components/card/card.component.html index e253841d2fc..6fca4330b91 100644 --- a/showcases/angular-showcase/src/app/components/card/card.component.html +++ b/showcases/angular-showcase/src/app/components/card/card.component.html @@ -11,9 +11,9 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html index c7e262927b7..a7f45f6f72a 100644 --- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html +++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html @@ -11,14 +11,14 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/default.component.html b/showcases/angular-showcase/src/app/components/default.component.html index 2e7cb21df35..38012976565 100644 --- a/showcases/angular-showcase/src/app/components/default.component.html +++ b/showcases/angular-showcase/src/app/components/default.component.html @@ -12,7 +12,7 @@ *ngTemplateOutlet=" exampleTemplate; context: { - exampleProps: example.props, + exampleProps: example.props ?? {}, exampleName: example.name, exampleIndex: exampleIndex, variantIndex: variantRefIndex diff --git a/showcases/angular-showcase/src/app/components/divider/divider.component.html b/showcases/angular-showcase/src/app/components/divider/divider.component.html index f3e8b39949c..cfa96df181d 100644 --- a/showcases/angular-showcase/src/app/components/divider/divider.component.html +++ b/showcases/angular-showcase/src/app/components/divider/divider.component.html @@ -14,8 +14,8 @@ {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/drawer/drawer.component.html b/showcases/angular-showcase/src/app/components/drawer/drawer.component.html index 787cf0c8021..676a091f6bc 100644 --- a/showcases/angular-showcase/src/app/components/drawer/drawer.component.html +++ b/showcases/angular-showcase/src/app/components/drawer/drawer.component.html @@ -11,12 +11,12 @@ let-variantIndex="variantIndex" > diff --git a/showcases/angular-showcase/src/app/components/header/header.component.html b/showcases/angular-showcase/src/app/components/header/header.component.html index 29682f41482..032f9460bca 100644 --- a/showcases/angular-showcase/src/app/components/header/header.component.html +++ b/showcases/angular-showcase/src/app/components/header/header.component.html @@ -12,15 +12,15 @@ > - @if (!exampleProps.example || exampleProps.withName) { + @if (!exampleProps?.example || exampleProps?.withName) { DBHeader } - @if (!exampleProps.example || exampleProps.withNavigation) { + @if (!exampleProps?.example || exampleProps?.withNavigation) { - @if (!exampleProps.example) { + @if (!exampleProps?.example) { Imprint Help } - @if (!exampleProps.example) { + @if (!exampleProps?.example) { - @if (!exampleProps.example) { + @if (!exampleProps?.example) { Profile diff --git a/showcases/angular-showcase/src/app/components/infotext/infotext.component.html b/showcases/angular-showcase/src/app/components/infotext/infotext.component.html index 1b568133707..87d9cca75b5 100644 --- a/showcases/angular-showcase/src/app/components/infotext/infotext.component.html +++ b/showcases/angular-showcase/src/app/components/infotext/infotext.component.html @@ -11,9 +11,9 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/input/input.component.html b/showcases/angular-showcase/src/app/components/input/input.component.html index ca7bccc3997..7983e42a0c0 100644 --- a/showcases/angular-showcase/src/app/components/input/input.component.html +++ b/showcases/angular-showcase/src/app/components/input/input.component.html @@ -11,17 +11,17 @@ let-variantIndex="variantIndex" > diff --git a/showcases/angular-showcase/src/app/components/link/link.component.html b/showcases/angular-showcase/src/app/components/link/link.component.html index 125fc5e365e..e2652fae756 100644 --- a/showcases/angular-showcase/src/app/components/link/link.component.html +++ b/showcases/angular-showcase/src/app/components/link/link.component.html @@ -11,11 +11,11 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html index ba894b70651..3e8195f0a8c 100644 --- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html +++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html @@ -12,22 +12,22 @@ >
    - @if (exampleProps.areaPopup) { + @if (exampleProps?.areaPopup) { {{ exampleName }} } - @if (!exampleProps.areaPopup) { + @if (!exampleProps?.areaPopup) { {{ exampleName }} } - @if (exampleProps.areaPopup) { + @if (exampleProps?.areaPopup) {
      diff --git a/showcases/angular-showcase/src/app/components/notification/notification.component.html b/showcases/angular-showcase/src/app/components/notification/notification.component.html index 85ad9776fa5..bbae815c675 100644 --- a/showcases/angular-showcase/src/app/components/notification/notification.component.html +++ b/showcases/angular-showcase/src/app/components/notification/notification.component.html @@ -11,19 +11,19 @@ let-variantIndex="variantIndex" > - @if (exampleProps.link) { + @if (exampleProps?.link) { Textlink } - @if (exampleProps.img) { + @if (exampleProps?.img) { {{ exampleName }} - @if (exampleProps.content) { - {{ exampleProps.content }} + @if (exampleProps?.content) { + {{ exampleProps?.content }} } @else {
      • Popover Custom Item 1
        • diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.html b/showcases/angular-showcase/src/app/components/radio/radio.component.html index b2153c92a44..c00bf1cda7d 100644 --- a/showcases/angular-showcase/src/app/components/radio/radio.component.html +++ b/showcases/angular-showcase/src/app/components/radio/radio.component.html @@ -11,14 +11,14 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/section/section.component.html b/showcases/angular-showcase/src/app/components/section/section.component.html index 76c945f0509..d631aa4b2a2 100644 --- a/showcases/angular-showcase/src/app/components/section/section.component.html +++ b/showcases/angular-showcase/src/app/components/section/section.component.html @@ -12,8 +12,8 @@ > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/select/select.component.html b/showcases/angular-showcase/src/app/components/select/select.component.html index b4997c5c3ac..3efbe31ad13 100644 --- a/showcases/angular-showcase/src/app/components/select/select.component.html +++ b/showcases/angular-showcase/src/app/components/select/select.component.html @@ -11,15 +11,15 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/switch/switch.component.html b/showcases/angular-showcase/src/app/components/switch/switch.component.html index d1cf6d151b4..d2275b5421e 100644 --- a/showcases/angular-showcase/src/app/components/switch/switch.component.html +++ b/showcases/angular-showcase/src/app/components/switch/switch.component.html @@ -11,18 +11,18 @@ let-variantIndex="variantIndex" > {{ exampleName }} - @if (exampleProps.variant === "hidden") { + @if (exampleProps?.variant === "hidden") { {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/tab-item/tab-item.component.html b/showcases/angular-showcase/src/app/components/tab-item/tab-item.component.html index 88378496235..988c66ab50b 100644 --- a/showcases/angular-showcase/src/app/components/tab-item/tab-item.component.html +++ b/showcases/angular-showcase/src/app/components/tab-item/tab-item.component.html @@ -11,11 +11,11 @@ let-variantIndex="variantIndex" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/tabs/tabs.component.html b/showcases/angular-showcase/src/app/components/tabs/tabs.component.html index b0aac887954..4b92b6b0a32 100644 --- a/showcases/angular-showcase/src/app/components/tabs/tabs.component.html +++ b/showcases/angular-showcase/src/app/components/tabs/tabs.component.html @@ -15,19 +15,19 @@ {{ exampleName }}: Test 1 Test 2 Test 3 - @if (exampleProps.overflow) { + @if (exampleProps?.overflow) { Test 4 Test 5 } @@ -36,7 +36,7 @@ Tab Panel 2 Tab Panel 3 - @if (exampleProps.overflow) { + @if (exampleProps?.overflow) { Tab Panel 4 Tab Panel 5 } diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.html b/showcases/angular-showcase/src/app/components/tag/tag.component.html index a5e83a0f303..dfd71693e1a 100644 --- a/showcases/angular-showcase/src/app/components/tag/tag.component.html +++ b/showcases/angular-showcase/src/app/components/tag/tag.component.html @@ -9,41 +9,41 @@ let-exampleName="exampleName" > - @if (exampleProps.component === "button") { + @if (exampleProps?.component === "button") { {{ exampleName }} } - @if (exampleProps.component === "link") { + @if (exampleProps?.component === "link") { {{ exampleName }} } - @if (exampleProps.component === "checkbox") { - {{ + @if (exampleProps?.component === "checkbox") { + {{ exampleName }} } - @if (exampleProps.component === "radio") { + @if (exampleProps?.component === "radio") { {{ exampleName }} } - @if (!exampleProps.component && !exampleProps.overflow) { + @if (!exampleProps?.component && !exampleProps?.overflow) { {{ exampleName }} } - @if (!exampleProps.component && exampleProps.overflow) { + @if (!exampleProps?.component && exampleProps?.overflow) { {{ exampleName }} } diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html index c6427d941ca..2a02a2e2501 100644 --- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html +++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html @@ -11,16 +11,16 @@ let-variantIndex="variantIndex" > diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html index b929342d532..2425b1a3255 100644 --- a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html +++ b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.html @@ -10,17 +10,17 @@ let-exampleIndex="exampleIndex" let-variantIndex="variantIndex" > - + {{ exampleName }} {{ exampleProps.content }}{{ exampleProps?.content }} diff --git a/showcases/shared/default-component-data.ts b/showcases/shared/default-component-data.ts index ac9e394a069..96a1f29c1b0 100644 --- a/showcases/shared/default-component-data.ts +++ b/showcases/shared/default-component-data.ts @@ -14,10 +14,12 @@ export type DefaultComponentExample = { react?: string; vue?: string; }; + children?: DefaultComponentExample[]; }; export type DefaultComponentVariants = { name: string; + children?: DefaultComponentExample[]; examples: DefaultComponentExample[]; slotCode?: any; color?: string; diff --git a/showcases/vue-showcase/src/components/DefaultComponent.vue b/showcases/vue-showcase/src/components/DefaultComponent.vue index f84a117cb71..20f7c5f3aea 100644 --- a/showcases/vue-showcase/src/components/DefaultComponent.vue +++ b/showcases/vue-showcase/src/components/DefaultComponent.vue @@ -30,9 +30,11 @@ interface DefaultExample extends DefaultComponentExample { react?: string; vue?: string; }; + children?: DefaultExample[]; } interface DefaultVariants extends DefaultComponentVariants { name: string; + children?: DefaultExample[]; examples: DefaultExample[]; } /* Workaround see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-props */ @@ -104,7 +106,7 @@ const getElevation = (): "1" | "2" | "3" => > {{ exampleName }} diff --git a/showcases/vue-showcase/src/components/accordion/Accordion.vue b/showcases/vue-showcase/src/components/accordion/Accordion.vue index e695ce92e25..58cea1e3543 100644 --- a/showcases/vue-showcase/src/components/accordion/Accordion.vue +++ b/showcases/vue-showcase/src/components/accordion/Accordion.vue @@ -17,8 +17,8 @@ import { {{ exampleName }} diff --git a/showcases/vue-showcase/src/components/badge/Badge.vue b/showcases/vue-showcase/src/components/badge/Badge.vue index aa7d706b493..06a1658ac64 100644 --- a/showcases/vue-showcase/src/components/badge/Badge.vue +++ b/showcases/vue-showcase/src/components/badge/Badge.vue @@ -14,16 +14,16 @@ import {