feat(docs): some more webcomponents docs (#13550)

* feat(docs): add docs for webcomponents expandable text

* feat(docs): add icons examples

* feat(docs): add some ui5-webcomponents list examples

* feat(docs): add multiple item drag example and wrapping example

* feat(docs): add message-strip examples

* fix: fix build

* fix(docs): don't run unit tests for fiori timeline

* fix(docs): fix prefix and tags

Author: MariaIDineva

libs/docs/ui5-webcomponents-fiori/timeline/jest.config.ts

@@ -3,24 +3,16 @@
     "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
     "projectType": "library",
     "sourceRoot": "libs/docs/ui5-webcomponents-fiori/timeline",
-    "prefix": "ui5",
+    "prefix": "ui5-doc",
+    "tags": ["type:lib", "scope:docs"],
     "targets": {
-        "test": {
-            "executor": "@nx/jest:jest",
-            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+        "e2e": {
+            "executor": "@fundamental-ngx/nx-plugin:e2e-test",
             "options": {
-                "jestConfig": "libs/docs/ui5-webcomponents-fiori/timeline/jest.config.ts",
-                "passWithNoTests": true
-            }
-        },
-        "lint": {
-            "executor": "@nx/eslint:lint",
-            "options": {
-                "lintFilePatterns": [
-                    "libs/docs/ui5-webcomponents-fiori/timeline/**/*.ts",
-                    "libs/docs/ui5-webcomponents-fiori/timeline/**/*.html"
-                ]
-            }
+                "e2eFiles": ["libs/docs/ui5-webcomponents-fiori/timeline/e2e/**/*.e2e-spec.ts"],
+                "devServerTarget": "docs:serve:e2e"
+            },
+            "outputs": ["{workspaceRoot}/allure-results/docs-ui5-webcomponents-fiori-timeline"]
         }
     }
 }

libs/docs/ui5-webcomponents-fiori/timeline/project.json

@@ -1,13 +1,18 @@
 {
     "extends": "../../../../tsconfig.base.json",
     "files": [],
-    "include": [],
-    "references": [
-        {
-            "path": "./tsconfig.lib.json"
-        },
-        {
-            "path": "./tsconfig.spec.json"
-        }
-    ]
+    "include": ["**/*.ts"],
+    "compilerOptions": {
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitReturns": false,
+        "noFallthroughCasesInSwitch": true,
+        "target": "es2020",
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.e2e-spec.ts"]
 }

libs/docs/ui5-webcomponents-fiori/timeline/tsconfig.json

@@ -19,9 +19,13 @@ export const API_FILES = {
     checkBox: ['CheckBox'],
     colorPalette: ['ColorPalette', 'ColorPaletteItem'],
     colorPicker: ['ColorPicker'],
+    expandableText: ['ExpandableText'],
+    icon: ['Icon'],
     input: ['Input'],
     label: ['Label'],
     link: ['Link'],
+    list: ['List', 'ListItemCustom', 'ListItemGroup', 'ListItemStandard'],
+    messageStrip: ['MessageStrip'],
     popover: ['Popover'],
     segmentedButton: ['SegmentedButton', 'SegmentedButtonItem'],
     slider: ['Slider', 'RangeSlider']

libs/docs/ui5-webcomponents-fiori/timeline/tsconfig.lib.json

@@ -7,15 +7,12 @@
         "strict": true,
         "noImplicitReturns": false,
         "noFallthroughCasesInSwitch": true,
-        "target": "es2022",
+        "target": "es2020",
         "outDir": "../../../../dist/out-tsc",
         "declaration": true,
         "declarationMap": true,
         "inlineSources": true,
-        "types": [],
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "useDefineForClassFields": false
+        "types": []
     },
     "exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.e2e-spec.ts"]
 }

libs/docs/ui5-webcomponents-fiori/timeline/tsconfig.spec.json

@@ -54,6 +54,14 @@
             "url": "ui5-webcomponents/color-picker",
             "name": "Color Picker"
         },
+        {
+            "url": "ui5-webcomponents/expandable-text",
+            "name": "Expandable Text"
+        },
+        {
+            "url": "ui5-webcomponents/icon",
+            "name": "Icon"
+        },
         {
             "url": "ui5-webcomponents/input",
             "name": "Input"
@@ -66,6 +74,14 @@
             "url": "ui5-webcomponents/link",
             "name": "Link"
         },
+        {
+            "url": "ui5-webcomponents/list",
+            "name": "List"
+        },
+        {
+            "url": "ui5-webcomponents/message-strip",
+            "name": "Message Strip"
+        },
         {
             "url": "ui5-webcomponents/popover",
             "name": "Popover"

libs/docs/ui5-webcomponents/api-files.ts

@@ -66,6 +66,14 @@ const componentRoutes = [
         path: 'color-picker',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/color-picker').then(configureLibRoutes)
     },
+    {
+        path: 'expandable-text',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/expandable-text').then(configureLibRoutes)
+    },
+    {
+        path: 'icon',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/icon').then(configureLibRoutes)
+    },
     {
         path: 'input',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/input').then(configureLibRoutes)
@@ -78,6 +86,14 @@ const componentRoutes = [
         path: 'link',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/link').then(configureLibRoutes)
     },
+    {
+        path: 'list',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/list').then(configureLibRoutes)
+    },
+    {
+        path: 'message-strip',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/message-strip').then(configureLibRoutes)
+    },
     {
         path: 'popover',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/popover').then(configureLibRoutes)

libs/docs/ui5-webcomponents/color-picker/tsconfig.json

@@ -0,0 +1,32 @@
+<ui5-table>
+    <ui5-table-header-row slot="headerRow">
+        <ui5-table-header-cell>Product</ui5-table-header-cell>
+        <ui5-table-header-cell>Description</ui5-table-header-cell>
+        <ui5-table-header-cell>Dimensions</ui5-table-header-cell>
+        <ui5-table-header-cell>Price</ui5-table-header-cell>
+    </ui5-table-header-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 15</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+    <ui5-table-row>
+        <ui5-table-cell><b>Notebook Basic 17</b></ui5-table-cell>
+        <ui5-table-cell>
+            <ui5-expandable-text
+                text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis accusamus assumenda debitis excepturi distinctio adipisci magnam qui a id, praesentium ullam voluptatem ad, modi quo perspiciatis soluta quasi facere molestiae"
+            ></ui5-expandable-text>
+        </ui5-table-cell>
+        <ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
+        <ui5-table-cell
+            ><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell
+        >
+    </ui5-table-row>
+</ui5-table>