feat(back-compat): header and footer backward compatibility components (

#1535) * feat(telekom-header): backward compatible data API * docs(telekom-header): better docs * feat(footer-back-compat): add component * feat(header-back-compat): add link target support * feat(header-back-compat): typo
telekom · Feb 24, 2023 · 2ae1afd · 2ae1afd
1 parent 82d0f14
commit 2ae1afd
Show file tree

Hide file tree

Showing 25 changed files with 1,246 additions and 43 deletions.
diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
@@ -22,6 +22,19 @@
 | `"visually-hidden"` |             |
 
 
+## Dependencies
+
+### Used by
+
+ - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+
+### Graph
+```mermaid
+graph TD;
+  scale-telekom-header-data-back-compat --> scale-badge
+  style scale-badge fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md
@@ -28,6 +28,7 @@
  - [scale-data-grid](../data-grid)
  - [scale-input](../input)
  - [scale-nav-icon](../telekom/nav-icon)
+ - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
 
 ### Graph
 ```mermaid
@@ -37,6 +38,7 @@ graph TD;
   scale-data-grid --> scale-icon
   scale-input --> scale-icon
   scale-nav-icon --> scale-icon
+  scale-telekom-header-data-back-compat --> scale-icon
   style scale-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/...ges/components/src/components/telekom/telekom-footer-data-back-compat/readme.md b/...ges/components/src/components/telekom/telekom-footer-data-back-compat/readme.md
@@ -0,0 +1,36 @@
+# scale-telekom-footer-data-back-compat
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute           | Description | Type                      | Default                   |
+| ------------------ | ------------------- | ----------- | ------------------------- | ------------------------- |
+| `copyright`        | `copyright`         |             | `string`                  | `'© Deutsche Telekom AG'` |
+| `footerNavigation` | `footer-navigation` |             | `any`                     | `[]`                      |
+| `type`             | `type`              |             | `"minimal" \| "standard"` | `'standard'`              |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-telekom-footer](../telekom-footer)
+- [scale-telekom-footer-content](../telekom-footer)
+
+### Graph
+```mermaid
+graph TD;
+  scale-telekom-footer-data-back-compat --> scale-telekom-footer
+  scale-telekom-footer-data-back-compat --> scale-telekom-footer-content
+  scale-telekom-footer-content --> scale-logo
+  scale-logo --> scale-logo-svg
+  style scale-telekom-footer-data-back-compat fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/...rc/components/telekom/telekom-footer-data-back-compat/telekom-footer-data-back-compat.tsx b/...rc/components/telekom/telekom-footer-data-back-compat/telekom-footer-data-back-compat.tsx
@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, h, Prop } from '@stencil/core';
+// import { findRootNode, findSelected } from '../../../utils/menu-utils';
+// import { renderIcon } from '../../../utils/render-icon';
+
+const readData = (data) => {
+  let parsedData;
+
+  try {
+    parsedData = JSON.parse(data);
+  } catch (error) {
+    parsedData = data;
+  }
+
+  return parsedData;
+};
+
+@Component({
+  tag: 'scale-telekom-footer-data-back-compat',
+  shadow: false,
+})
+export class TelekomFooterDataBackCompat {
+  @Prop({ reflect: true }) type: 'standard' | 'minimal' = 'standard';
+  @Prop() footerNavigation?: any = [];
+  @Prop() copyright?: string = '© Deutsche Telekom AG';
+
+  render() {
+    return (
+      <scale-telekom-footer type={this.type}>
+        <scale-telekom-footer-content>
+          <span slot="notice"> {this.copyright} </span>
+          <ul slot="navigation">
+            {readData(this.footerNavigation).map(
+              ({
+                name,
+                id,
+                href = 'javascript:void(0);',
+                target = '_self',
+              }) => {
+                return (
+                  <li>
+                    <a href={href} id={id} target={target}>
+                      {name}
+                    </a>
+                  </li>
+                );
+              }
+            )}
+          </ul>
+        </scale-telekom-footer-content>
+      </scale-telekom-footer>
+    );
+  }
+}
diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -19,6 +19,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [scale-telekom-footer-data-back-compat](../telekom-footer-data-back-compat)
+
 ### Depends on
 
 - [scale-logo](../logo)
@@ -28,6 +32,7 @@
 graph TD;
   scale-telekom-footer-content --> scale-logo
   scale-logo --> scale-logo-svg
+  scale-telekom-footer-data-back-compat --> scale-telekom-footer-content
   style scale-telekom-footer-content fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/...ges/components/src/components/telekom/telekom-header-data-back-compat/readme.md b/...ges/components/src/components/telekom/telekom-header-data-back-compat/readme.md
@@ -0,0 +1,66 @@
+# scale-telekom-header-data-back-compat
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute           | Description | Type     | Default     |
+| ------------------ | ------------------- | ----------- | -------- | ----------- |
+| `activeRouteId`    | `active-route-id`   |             | `string` | `undefined` |
+| `addonNavigation`  | `addon-navigation`  |             | `any`    | `undefined` |
+| `appName`          | `app-name`          |             | `string` | `undefined` |
+| `appNameClick`     | `app-name-click`    |             | `any`    | `undefined` |
+| `appNameLink`      | `app-name-link`     |             | `string` | `undefined` |
+| `iconNavigation`   | `icon-navigation`   |             | `any`    | `undefined` |
+| `mainNavigation`   | `main-navigation`   |             | `any`    | `undefined` |
+| `sectorNavigation` | `sector-navigation` |             | `any`    | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-telekom-header](../telekom-header)
+- [scale-telekom-nav-list](../telekom-nav-list)
+- [scale-telekom-nav-item](../telekom-nav-item)
+- [scale-telekom-nav-flyout](../telekom-nav-flyout)
+- [scale-telekom-mega-menu](../telekom-mega-menu)
+- [scale-telekom-mega-menu-column](../telekom-mega-menu)
+- [scale-badge](../../badge)
+- [scale-icon-action-menu](../../icons/action-menu)
+- [scale-telekom-mobile-flyout-canvas](../telekom-mobile-flyout-canvas)
+- [scale-telekom-mobile-menu](../telekom-mobile-menu)
+- [scale-telekom-mobile-menu-item](../telekom-mobile-menu-item)
+- [scale-icon](../../icon)
+
+### Graph
+```mermaid
+graph TD;
+  scale-telekom-header-data-back-compat --> scale-telekom-header
+  scale-telekom-header-data-back-compat --> scale-telekom-nav-list
+  scale-telekom-header-data-back-compat --> scale-telekom-nav-item
+  scale-telekom-header-data-back-compat --> scale-telekom-nav-flyout
+  scale-telekom-header-data-back-compat --> scale-telekom-mega-menu
+  scale-telekom-header-data-back-compat --> scale-telekom-mega-menu-column
+  scale-telekom-header-data-back-compat --> scale-badge
+  scale-telekom-header-data-back-compat --> scale-icon-action-menu
+  scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
+  scale-telekom-header-data-back-compat --> scale-telekom-mobile-menu
+  scale-telekom-header-data-back-compat --> scale-telekom-mobile-menu-item
+  scale-telekom-header-data-back-compat --> scale-icon
+  scale-telekom-header --> scale-logo
+  scale-logo --> scale-logo-svg
+  scale-telekom-mega-menu-column --> scale-icon-navigation-right
+  scale-telekom-mobile-flyout-canvas --> scale-button
+  scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
+  scale-telekom-mobile-menu --> scale-icon-navigation-left
+  scale-telekom-mobile-menu-item --> scale-icon-navigation-right
+  style scale-telekom-header-data-back-compat fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*