bugfix(storybook): remove unnecessary components from storybook (#836)

* remove wizard-page from stories

* simplify tabs

* remove tab from tsconfig

* simplify button toggle

* update demo

angular.json

@@ -1158,32 +1158,6 @@
       },
       "tags": ["web-components"]
     },
-    "tab": {
-      "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-      "root": "libs/web-components/tab",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["libs/web-components/tab/src/**/*.ts"]
-          }
-        }
-      },
-      "tags": ["web-components"]
-    },
-    "tab-bar": {
-      "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-      "root": "libs/web-components/tab-bar",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["libs/web-components/tab-bar/src/**/*.ts"]
-          }
-        }
-      },
-      "tags": ["web-components"]
-    },
     "table": {
       "$schema": "../../../node_modules/nx/schemas/project-schema.json",
       "projectType": "library",
@@ -1681,19 +1655,6 @@
         }
       },
       "tags": []
-    },
-    "wizard-page": {
-      "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-      "root": "libs/web-components/wizard-page",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["libs/web-components/wizard-page/src/**/*.ts"]
-          }
-        }
-      },
-      "tags": ["web-components"]
     }
   }
 }

libs/web-components/README.md

@@ -32,7 +32,6 @@
 | Name                    | Package                                                                                    | Version                                                                                                                              | Links                                                                                         |
 | ----------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
 | **Button**              | [`@finastra/button`](https://npmjs.com/package/@finastra/button)                           | [![latest](https://img.shields.io/npm/v/@finastra/button.svg)](https://npmjs.com/package/@finastra/button)                           | [![README](https://img.shields.io/badge/README--56C271.svg)](./button/README.md)              |
-| **Button Toggle**       | [`@finastra/button-toggle`](https://npmjs.com/package/@finastra/button-toggle)             | [![latest](https://img.shields.io/npm/v/@finastra/button-toggle.svg)](https://npmjs.com/package/@finastra/button-toggle)             | [![README](https://img.shields.io/badge/README--56C271.svg)](./button-toggle/README.md)       |
 | **Button Toggle Group** | [`@finastra/button-toggle-group`](https://npmjs.com/package/@finastra/button-toggle-group) | [![latest](https://img.shields.io/npm/v/@finastra/button-toggle-group.svg)](https://npmjs.com/package/@finastra/button-toggle-group) | [![README](https://img.shields.io/badge/README--56C271.svg)](./button-toggle-group/README.md) |
 | **Icon Button**         | [`@finastra/icon-button`](https://npmjs.com/package/@finastra/icon-button)                 | [![latest](https://img.shields.io/npm/v/@finastra/icon-button.svg)](https://npmjs.com/package/@finastra/icon-button)                 | [![README](https://img.shields.io/badge/README--56C271.svg)](./icon-button/README.md)         |
 | **FAB**                 | [`@finastra/fab`](https://npmjs.com/package/@finastra/fab)                                 | [![latest](https://img.shields.io/npm/v/@finastra/fab.svg)](https://npmjs.com/package/@finastra/fab)                                 | [![README](https://img.shields.io/badge/README--56C271.svg)](./fab/README.md)                 | 
@@ -82,8 +81,7 @@
 | **Global Search**      | [`@finastra/global-search`](https://npmjs.com/package/@finastra/global-search)           | [![latest](https://img.shields.io/npm/v/@finastra/global-search.svg)](https://npmjs.com/package/@finastra/global-search)           | [![README](https://img.shields.io/badge/README--56C271.svg)](./global-search/README.md)      |                                                                               |
 | **Icon Bar**       | [`@finastra/icon-bar`](https://npmjs.com/package/@finastra/icon-bar)             | N/A                                                                                                                    | TBD                                                                                    |
 | **Launchpad**      | [`@finastra/launchpad`](https://npmjs.com/package/@finastra/launchpad)           | [![latest](https://img.shields.io/npm/v/@finastra/launchpad.svg)](https://npmjs.com/package/@finastra/launchpad)       | [![README](https://img.shields.io/badge/README--56C271.svg)](./launchpad/README.md)    |
-| **Sidenav**        | [`@finastra/sidenav`](https://npmjs.com/package/@finastra/sidenav)               | [![latest](https://img.shields.io/npm/v/@finastra/sidenav.svg)](https://npmjs.com/package/@finastra/sidenav)           | [![README](https://img.shields.io/badge/README--56C271.svg)](./sidenav/README.md)      |
-| **Tab**            | [`@finastra/tab`](https://npmjs.com/package/@finastra/tab)                       | [![latest](https://img.shields.io/npm/v/@finastra/tab.svg)](https://npmjs.com/package/@finastra/tab)                   | [![README](https://img.shields.io/badge/README--56C271.svg)](./tab/README.md)          |
+| **Sidenav**        | [`@finastra/sidenav`](https://npmjs.com/package/@finastra/sidenav)               | [![latest](https://img.shields.io/npm/v/@finastra/sidenav.svg)](https://npmjs.com/package/@finastra/sidenav)           | [![README](https://img.shields.io/badge/README--56C271.svg)](./sidenav/README.md)      |     |
 | **Tab bar**        | [`@finastra/tab-bar`](https://npmjs.com/package/@finastra/tab-bar)               | [![latest](https://img.shields.io/npm/v/@finastra/tab-bar.svg)](https://npmjs.com/package/@finastra/tab-bar)           | [![README](https://img.shields.io/badge/README--56C271.svg)](./tab-bar/README.md)      |
 | **User Profile**   | [`@finastra/user-profile`](https://npmjs.com/package/@finastra/user-profile)     | [![latest](https://img.shields.io/npm/v/@finastra/user-profile.svg)](https://npmjs.com/package/@finastra/user-profile) | [![README](https://img.shields.io/badge/README--56C271.svg)](./user-profile/README.md) |
 

libs/web-components/button-toggle-group/README.md

@@ -29,7 +29,6 @@ import '@finastra/button-toggle-group';
 
 ```html
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-<script src="https://cdn.jsdelivr.net/npm/@finastra/button-toggle/dist/fds-button-toggle.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@finastra/button-toggle-group/dist/fds-button-toggle-group.js"></script>
 
 <fds-button-toggle-group style="padding-bottom: 16px">

libs/web-components/button-toggle-group/demo/index.html

@@ -1,43 +1,47 @@
 <script type="module" src="node_modules/@finastra/button-toggle-group/dist/src/button-toggle-group.js"></script>
-<script type="module" src="node_modules/@finastra/button-toggle/dist/src/button-toggle-filter.js"></script>
-<script type="module" src="node_modules/@finastra/button-toggle/dist/src/button-toggle.js"></script>
-
+<script type="module" src="node_modules/@finastra/button-toggle-group/dist/src/button-toggle/button-toggle.js"></script>
+<script type="module" src="node_modules/@finastra/button-toggle-group/dist/src/button-toggle/button-toggle-filter.js"></script>
 
 <div style="display: flex; flex-direction: column;">
-    <fds-button-toggle-group style="padding-bottom: 16px">
+    <fds-button-toggle-group>
         <fds-button-toggle icon="accessibility"></fds-button-toggle>
         <fds-button-toggle icon="exit_to_app"></fds-button-toggle>
         <fds-button-toggle icon="camera"></fds-button-toggle>
     </fds-button-toggle-group>
 
-    <fds-button-toggle-group style="padding-bottom: 16px" dense>
+    <fds-button-toggle-group dense>
         <fds-button-toggle label="Trend" icon="timeline">
         </fds-button-toggle>
         <fds-button-toggle label="List" icon="view_list"></fds-button-toggle>
     </fds-button-toggle-group>
 
-    <fds-button-toggle-group style="padding-bottom: 16px">
+    <fds-button-toggle-group>
         <fds-button-toggle label="Left"></fds-button-toggle>
         <fds-button-toggle label="Middle" disabled></fds-button-toggle>
         <fds-button-toggle label="Right"></fds-button-toggle>
     </fds-button-toggle-group>
 
-    <fds-button-toggle-group style="padding-bottom: 16px" dense>
+    <fds-button-toggle-group dense>
         <fds-button-toggle icon="accessibility"></fds-button-toggle>
         <fds-button-toggle icon="exit_to_app"></fds-button-toggle>
         <fds-button-toggle icon="camera"></fds-button-toggle>
     </fds-button-toggle-group>
 
-    <fds-button-toggle-group style="padding-bottom: 16px">
+    <fds-button-toggle-group>
         <fds-button-toggle icon="accessibility"></fds-button-toggle>
         <fds-button-toggle icon="exit_to_app"></fds-button-toggle>
         <fds-button-toggle icon="camera"></fds-button-toggle>
     </fds-button-toggle-group>
 
-    <fds-button-toggle-group style="padding-bottom: 16px">
+    <fds-button-toggle-group>
         <fds-button-toggle-filter label="Left" icon="accessibility"></fds-button-toggle-filter>
         <fds-button-toggle-filter label="Middle" icon="exit_to_app" disabled></fds-button-toggle-filter>
         <fds-button-toggle-filter label="Right" icon="camera"></fds-button-toggle-filter>
     </fds-button-toggle-group>
 
-</div>
+</div>
+<style>
+    fds-button-toggle-group {
+        padding-bottom: 16px;
+    }
+</style>

libs/web-components/button-toggle-group/package.json

@@ -9,14 +9,15 @@
     "ButtonToggleGroup"
   ],
   "license": "MIT",
-  "main": "dist/src/button-toggle-group.js",
-  "module": "dist/src/button-toggle-group.js",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
   "scripts": {
     "build": "webpack",
-    "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/styles.scss"
+    "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/styles.scss src/button-toggle/styles.scss src/button-toggle/filter-styles.scss"
   },
   "dependencies": {
     "@material/mwc-tab-bar": "^0.26.1",
+    "@material/mwc-tab": "^0.26.1",
     "lit": "^2.0.0",
     "tslib": "^2.0.1"
   },

libs/web-components/button-toggle/src/button-toggle.ts → libs/web-components/button-toggle-group/src/button-toggle/button-toggle.ts

@@ -1,8 +1,8 @@
-import { customElement } from 'lit/decorators.js';
 import { TabBase } from '@material/mwc-tab/mwc-tab-base';
-
+import { customElement } from 'lit/decorators.js';
 import { styles } from './styles.css';
 
+
 /**
  * @attr [label=''] - Text label to display in button toggle.
  * @attr [icon=''] - Material design icon name to display.

libs/web-components/button-toggle-group/src/index.ts

@@ -0,0 +1,4 @@
+export * from './button-toggle-group';
+export * from './button-toggle/button-toggle';
+export * from './button-toggle/button-toggle-filter';
+

libs/web-components/button-toggle-group/stories/button-toggle-group.stories.ts

@@ -1,12 +1,11 @@
 const README = require('../README.md');
-import '@finastra/button-toggle';
 import '@finastra/button-toggle-group';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { argTypes, cssprops } from './sb-generated/fds-button-toggle-group.json';
 
 export default {
-  title: 'ACTIONS/Toggle/Button Toggle Group',
+  title: 'ACTIONS/Toggle',
   component: 'fds-button-toggle-group',
   argTypes,
   parameters: {