Merge pull request #10 from Infineon/feature/card-and-button

card with nested button component

.github/workflows/main.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Create Release # releasing as a github npm package
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: |
+        run: | 
           npm install
           npm run bundle
           auto shipit

.storybook/manager.js

@@ -0,0 +1,26 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  showToolbar: true,
+  theme: undefined,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+  toolbar: {
+    title: { hidden: false },
+    zoom: { hidden: false },
+    eject: { hidden: false },
+    copy: { hidden: false },
+    fullscreen: { hidden: false },
+  },
+});

.storybook/preview.js

@@ -1,16 +1,28 @@
 // import '../src/plugins/infineonIcons';
-import '../src/global/global.scss'
+import '../src/global/global-theme.scss'
 import {defineCustomElements} from '../loader';
 
 defineCustomElements();
 
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/,
+      date: /Date$/
     },
   },
+  previewTabs: {
+    // canvas: {
+    //   hidden: true,
+    // },
+    // 'storybook/docs/panel': { index: -1 },
+  },
+  // viewMode: 'docs',
+
+  docs: {
+     source: {
+        state: 'open',
+    },
+  }
 }

README.md

@@ -110,16 +110,16 @@ node_modules -> @infineon -> design-system-bootstrap -> <b>src</b> folder
 <p align="right"><a href="#tableContent">back to top</a></p> -->
 
 <!-- USAGE EXAMPLES -->
-## Usage
+## Usage of components
 
-Explore our current components in Storybook.
+Explore our currently available web components in Storybook. You will also find the code snippets needed to include them in your application.
+
+https://infineon.github.io/infineon-design-system-stencil
 
-<!-- ADD HERE: link to storybook -->
-<!-- https://storybook-bootstrap.icp.infineon.com -->
 
 <p align="right"><a href="#tableContent">back to top</a></p>
 
-## Local Development
+## Local Development of new components for Storybook
 
 ### Installation
 
@@ -139,30 +139,32 @@ npm install
 To deploy Storybook, we first need to export it as a static web app.
 To do so, we can use the inbuild ```build-storybook``` command with ```npm``` or ```yarn```.
 
+For building the application for the first time (to load fonts, assets and stylesheets) run:
+
 ```bash
-yarn run storybook-build-watch
+yarn/npm run storybook-build-prepare
 ```
 
-or
+To build storybook for local preview, run:
 
 ```bash
-npm run storybook-build-watch
+yarn/npm run storybook-build
 ```
 
-This will generate a static Storybook in the ```storybook-static``` directory. We add --watch so that the storybook automatically updates in case of changes.
-
-### Start Storybook
-
-To start storybook, simply open another terminal window and run the inbuilt command ```storybook-start``` with ```npm``` or ```yarn```.
+or (to rebuild on changes)
 
 ```bash
-yarn run storybook-start
+yarn/npm run storybook-build-watch
 ```
 
-or
+This will generate a static Storybook in the ```storybook-static``` directory. We can add --watch so that the storybook automatically updates in case of changes.
+
+### Start Storybook
+
+To start storybook, simply open another terminal window and run the inbuilt command ```storybook-start``` with ```npm``` or ```yarn```.
 
 ```bash
-npm run storybook-start
+yarn/npm run storybook-start
 ```
 
 ```storybook-start``` also executes ```watch-css``` and ```watch-storybook``` which automatically update storybook on code change.