feat(docs): add new landing page

packages/core/src/components/tabs/readme.md

@@ -11,13 +11,13 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property    | Attribute   | Description                       | Type                    | Default     |
-| ----------- | ----------- | --------------------------------- | ----------------------- | ----------- |
-| `layout`    | `layout`    | Set layout width style            | `"auto" \| "stretched"` | `'auto'`    |
-| `placement` | `placement` | Set placement style               | `"bottom" \| "top"`     | `'bottom'`  |
-| `rounded`   | `rounded`   | Set rounded tabs                  | `any`                   | `undefined` |
-| `selected`  | `selected`  | Set default selected tab by index | `number`                | `0`         |
-| `small`     | `small`     | Set tab items to small size       | `boolean`               | `false`     |
+| Property    | Attribute   | Description                       | Type                    | Default    |
+| ----------- | ----------- | --------------------------------- | ----------------------- | ---------- |
+| `layout`    | `layout`    | Set layout width style            | `"auto" \| "stretched"` | `'auto'`   |
+| `placement` | `placement` | Set placement style               | `"bottom" \| "top"`     | `'bottom'` |
+| `rounded`   | `rounded`   | Set rounded tabs                  | `boolean`               | `false`    |
+| `selected`  | `selected`  | Set default selected tab by index | `number`                | `0`        |
+| `small`     | `small`     | Set tab items to small size       | `boolean`               | `false`    |
 
 
 ----------------------------------------------

packages/core/src/components/toast/styles/toast-container.scss

@@ -10,7 +10,6 @@
 @import 'common-variables';
 
 #toast-container {
-  @debug 'Toast container';
   > :not(:last-child) {
     margin-block-end: $default-space;
   }

packages/documentation/docs/auto-generated/ix-tab-item/props.md

@@ -1,8 +1,10 @@
 | Name       | Description                   | Attribute        | Type                                      | Default             |
 |------------|-------------------------------|------------------|-------------------------------------------|---------------------|
+|counter| Set counter value | `counter` | `number` | `undefined` |
 |disabled| Set disabled tab | `disabled` | `boolean` | `false` |
 |icon| Set icon only tab | `icon` | `boolean` | `false` |
 |layout| Set layout width style | `layout` | `"auto" ｜ "stretched"` | `'auto'` |
 |placement| Set selected placement | `placement` | `"bottom" ｜ "top"` | `'bottom'` |
+|rounded| Set rounded tab | `rounded` | `boolean` | `false` |
 |selected| Set selected tab | `selected` | `boolean` | `false` |
 |small| Set small size tab | `small` | `boolean` | `false` |

packages/documentation/docs/auto-generated/ix-tabs/props.md

@@ -2,5 +2,6 @@
 |------------|-------------------------------|------------------|-------------------------------------------|---------------------|
 |layout| Set layout width style | `layout` | `"auto" ｜ "stretched"` | `'auto'` |
 |placement| Set placement style | `placement` | `"bottom" ｜ "top"` | `'bottom'` |
+|rounded| Set rounded tabs | `rounded` | `boolean` | `false` |
 |selected| Set default selected tab by index | `selected` | `number` | `0` |
 |small| Set tab items to small size | `small` | `boolean` | `false` |

packages/documentation/docs/auto-generated/previews/angular/tabs-rounded.md

@@ -0,0 +1,34 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!-- Auto generated! Please edit here: siemens-ix/packages/angular-test-app/src/preview-examples/tabs.ts -->
+```typescript
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs',
+  template: `
+    <ix-tabs rounded>
+      <ix-tab-item><ix-icon name='success'></ix-icon></ix-tab-item>
+      <ix-tab-item counter='200'><ix-icon name='tree'></ix-icon></ix-tab-item>
+      <ix-tab-item><ix-icon name='maintenance'></ix-icon></ix-tab-item>
+      <ix-tab-item disabled counter='24'><ix-icon name='sound-loud'></ix-icon></ix-tab-item>
+      <ix-tab-item ><ix-icon name='hierarchy'></ix-icon></ix-tab-item>
+      <ix-tab-item disabled><ix-icon name='calendar-settings'></ix-icon></ix-tab-item>
+    </ix-tabs>
+  `,
+})
+export class Tabs {}
+```

packages/documentation/docs/auto-generated/previews/react/tabs-rounded.md

@@ -0,0 +1,34 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!-- Auto generated! Please edit here: siemens-ix/packages/react-test-app/src/preview-examples/tabs-rounded.tsx -->
+```tsx
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { IxTabItem, IxTabs, IxIcon } from '@siemens/ix-react';
+import React from 'react';
+
+export const Tabs: React.FC = () => {
+  return (
+
+    <IxTabs rounded>
+      <IxTabItem><IxIcon name='success'></IxIcon></IxTabItem>
+      <IxTabItem counter={200}><IxIcon name='tree'></IxIcon></IxTabItem>
+      <IxTabItem><IxIcon name='maintenance'></IxIcon></IxTabItem>
+      <IxTabItem disabled counter={24}><IxIcon name='sound-loud'></IxIcon></IxTabItem>
+      <IxTabItem ><IxIcon name='hierarchy'></IxIcon></IxTabItem>
+      <IxTabItem disabled><IxIcon name='calendar-settings'></IxIcon></IxTabItem>
+    </IxTabs>
+  );
+};
+```

packages/documentation/docs/auto-generated/previews/web-component/tabs-rounded.md

@@ -0,0 +1,17 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/tabs-rounded.html -->
+```html
+<ix-tabs rounded>
+  <ix-tab-item><ix-icon name='success'></ix-icon></ix-tab-item>
+  <ix-tab-item counter={200}><ix-icon name='tree'></ix-icon></ix-tab-item>
+  <ix-tab-item><ix-icon name='maintenance'></ix-icon></ix-tab-item>
+  <ix-tab-item disabled counter={24}><ix-icon name='sound-loud'></ix-icon></ix-tab-item>
+  <ix-tab-item ><ix-icon name='hierarchy'></ix-icon></ix-tab-item>
+  <ix-tab-item disabled><ix-icon name='calendar-settings'></ix-icon></ix-tab-item>
+</ix-tabs>
+```

packages/documentation/docs/controls/tabs.md

@@ -11,6 +11,11 @@ import SourceTabs from './../auto-generated/previews/web-component/tabs.md';
 import SourceReactTabs from './../auto-generated/previews/react/tabs.md';
 import SourceAngularTabs from './../auto-generated/previews/angular/tabs.md';
 
+import SourceTabsRounded from './../auto-generated/previews/web-component/tabs-rounded.md';
+import SourceReactTabsRounded from './../auto-generated/previews/react/tabs-rounded.md';
+import SourceAngularTabsRounded from './../auto-generated/previews/angular/tabs-rounded.md';
+
+
 # Tabs
 
 ## Usage
@@ -27,6 +32,20 @@ import SourceAngularTabs from './../auto-generated/previews/angular/tabs.md';
   </TabItem>
 </Preview>
 
+### Tabs Rounded
+
+<Preview name="tabs-rounded">
+  <TabItem value="javascript"> 
+    <SourceTabsRounded />
+  </TabItem>
+  <TabItem value="react"> 
+    <SourceReactTabsRounded />
+  </TabItem>
+  <TabItem value="angular"> 
+    <SourceAngularTabsRounded />
+  </TabItem>
+</Preview>
+
 ## Properties (ix-tabs)
 
 ### Props

packages/documentation/docs/theming/animation.md

@@ -1,9 +1,11 @@
 # Animation
 
-Core UI uses meaningful animations to make applications appear physically tangible.  
+Siemens iX uses meaningful animations to make applications appear physically tangible.
 This way UIs become predictable and interactions easier to follow along with for users.  
 Abrupt state changes are prevented in oder to make UIs feel smooth and anchored in reality.
 
+<hr/>
+
 ### Standard timings
 
 If an animation is too slow it can feel sluggish and disturb efficient workflows.  
@@ -35,3 +37,25 @@ Therefore it is important to choose the correct timing for the respective situat
 - Slide-out movements (to off screen) should use `ease-in` only
 - transformations or translations within the screen (object is visisble the whole time) should use `ease-in-out`
 - hiding or appearing objects (opacity) use linear transitions as there is no mass to accelerate/decelerate
+
+<hr/>
+
+### Animation timing variables
+
+All animation timing values are also available through SASS variables:
+
+```
+$x-slow-time: 1s;
+$slow-time: 500ms;
+$medium-time: 300ms;
+$default-time: 150ms;
+$short-time: 0ms;
+```
+
+Usage example:
+
+```
+@import '@siemens/ix/scss/common-variables';
+
+transition: $default-time;
+```

packages/documentation/docs/theming/theming-and-styling.md

@@ -6,6 +6,12 @@ import {Card, CardList} from '@site/src/components/Card';
 
 # Theming and Styling
 
+<hr/>
+
+<div style={{ marginTop: '3rem', marginBottom: '5.5rem' }}>
+Working with Siemens iX is really simple – just follow the steps below and you will be ready to build great Apps!
+</div>
+
 <CardList>
   <Card label="Theme overview" isPrimary={true} link="theme"/>
   <Card label="Animation" link="animation"/>

packages/documentation/docusaurus.config.js

@@ -96,6 +96,7 @@ const config = {
         theme2: require('prism-react-renderer/themes/dracula'),
       },
     }),
+  plugins: ['docusaurus-plugin-sass']
   // plugins: [require.resolve('@cmfcmf/docusaurus-search-local')],
 };
 

packages/documentation/package.json

@@ -19,29 +19,32 @@
     "generate-version": "npm run generate-api && npm run copy-lib && node ./scripts/generate-version.mjs"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.1",
-    "@docusaurus/preset-classic": "^2.0.1",
-    "@docusaurus/theme-live-codeblock": "^2.0.1",
+    "@docusaurus/core": "^2.1.0",
+    "@docusaurus/preset-classic": "^2.1.0",
+    "@docusaurus/theme-live-codeblock": "^2.1.0",
     "@mdx-js/react": "^1.6.22",
     "@siemens/ix-icons": "1.0.0-beta.1",
     "@siemens/ix": "~1.0.0-beta.0",
     "@siemens/ix-react": "~1.0.0-beta.0",
     "@siemens/ix-echarts": "~1.0.0-beta.1",
     "@stencil/postcss": "^2.1.0",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "^0.2.2",
     "execa": "^5.1.1",
     "prism-react-renderer": "^1.3.5",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
+    "react-anime": "^4.1.1",
     "react-dom": "^17.0.2",
-    "react-toastify": "^9.0.7"
+    "react-toastify": "^9.0.7",
+    "sass": "^1.54.8"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.1",
-    "@tsconfig/docusaurus": "^1.0.5",
+    "@docusaurus/module-type-aliases": "^2.1.0",
+    "@tsconfig/docusaurus": "^1.0.6",
     "@types/fs-extra": "^9.0.13",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.2"
   },
   "optionalDependencies": {
     "@siemens/ix-brand-theme": "~1.0.0-beta.0"

packages/documentation/src/components/pages/HomepageFeatures.module.css

@@ -12,8 +12,6 @@
   align-items: center;
   flex-wrap: nowrap;
   width: 40rem;
-  margin-left: auto;
-  margin-right: 0px;
 }
 
 .featureSvg {

packages/documentation/src/css/custom.css

@@ -37,6 +37,8 @@ body {
   --ifm-h1-vertical-rhythm-bottom: 2.5;
   --ifm-leading-desktop: 1.25;
   --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem);
+  --ifm-hr-background-color: var(--theme-color-contrast-text);
+  --ifm-hr-height: 0.125rem;
 
   --bs-alert-bg: var(--theme-color-alarm) !important;
 }
@@ -196,3 +198,27 @@ a.menu__link {
 .breadcrumbs__link {
   background-color: var(--theme-color-2);
 }
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.flex-align-right {
+  justify-content: flex-end;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.bold {
+  font-weight: bold;
+}