Merge branch 'master' into fix/horizontal-scrollbar-size

Author: MarcusNotheis

.storybook/preview.js

@@ -66,13 +66,12 @@ const withQuery = makeDecorator({
 
 addDecorator(withQuery);
 
-export const globalArgTypes = {
+export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Fiori Theme',
     defaultValue: Themes.sap_fiori_3,
     toolbar: {
-      icon: 'paintbrush',
       items: [
         {
           value: Themes.sap_fiori_3,
@@ -102,7 +101,6 @@ export const globalArgTypes = {
     description: 'Content Density',
     defaultValue: ContentDensity.Cozy,
     toolbar: {
-      icon: 'component',
       items: [
         {
           value: ContentDensity.Cozy,
@@ -120,17 +118,14 @@ export const globalArgTypes = {
     description: 'Text Direction',
     defaultValue: 'ltr',
     toolbar: {
-      icon: 'transfer',
       items: [
         {
           value: 'ltr',
-          title: 'LTR',
-          icon: 'arrowrightalt'
+          title: 'LTR'
         },
         {
           value: 'rtl',
-          title: 'RTL',
-          icon: 'arrowleftalt'
+          title: 'RTL'
         }
       ]
     }

.storybook/theme.js

@@ -6,7 +6,7 @@ export const Fiori4ReactTheme = create({
   base: 'light',
 
   colorPrimary: TEXT_COLOR, //'#000000',
-  colorSecondary: '#0a6ed1',
+  colorSecondary: PRIMARY_COLOR,
 
   // UI
   appBg: '#edeff0',
@@ -24,7 +24,7 @@ export const Fiori4ReactTheme = create({
 
   // Toolbar default and active colors
   barTextColor: '#ffffff',
-  barSelectedColor: PRIMARY_COLOR,
+  barSelectedColor: '#ffffff',
   barBg: '#354a5f',
 
   // Form colors
@@ -42,6 +42,6 @@ export const Fiori4ReactTheme = create({
    * URL for name in top left corner to link to
    * @type {String}
    */
-  brandUrl: '#'
-  // // brandImage: 'https://placehold.it/350x150'
+  brandUrl: 'https://sap.github.io/ui5-webcomponents-react',
+  brandImage: 'https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/master/assets/Logo.png'
 });

README.md

@@ -1,5 +1,7 @@
 <a name="top"></a>
-# UI5 Web Components for React
+<p align="center">
+  <img src="https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/master/assets/Logo.png" alt="UI5 Web Components for React Logo" />
+</p>
 <p align="center">
   <a href="https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22" target="_blank">
     <img alt="Build Status" src="https://github.com/SAP/ui5-webcomponents-react/workflows/build/badge.svg">

assets/Logo.png

@@ -20,15 +20,15 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.0.0-rc.0",
-    "@storybook/addon-controls": "6.0.0-rc.0",
-    "@storybook/addon-docs": "6.0.0-rc.0",
-    "@storybook/addon-knobs": "6.0.0-rc.0",
-    "@storybook/addon-toolbars": "6.0.0-rc.0",
-    "@storybook/addons": "6.0.0-rc.0",
-    "@storybook/cli": "6.0.0-rc.0",
-    "@storybook/react": "6.0.0-rc.0",
-    "@storybook/theming": "6.0.0-rc.0",
+    "@storybook/addon-actions": "6.0.0-rc.1",
+    "@storybook/addon-controls": "6.0.0-rc.1",
+    "@storybook/addon-docs": "6.0.0-rc.1",
+    "@storybook/addon-knobs": "6.0.0-rc.1",
+    "@storybook/addon-toolbars": "6.0.0-rc.1",
+    "@storybook/addons": "6.0.0-rc.1",
+    "@storybook/cli": "6.0.0-rc.1",
+    "@storybook/react": "6.0.0-rc.1",
+    "@storybook/theming": "6.0.0-rc.1",
     "@ui5/webcomponents": "1.0.0-rc.7",
     "@ui5/webcomponents-fiori": "1.0.0-rc.7",
     "@ui5/webcomponents-icons": "1.0.0-rc.7",

package.json

@@ -0,0 +1,92 @@
+import { Meta, Title, Description, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
+
+<Meta
+  title="Charts /  MicroBarChart"
+  component={MicroBarChart}
+  argTypes={{
+    dataset: { type: null },
+    dimension: { type: null },
+    measure: { type: null }
+  }}
+  args={{
+    dataset: [
+      {
+        name: 'January',
+        data: 100
+      },
+      {
+        name: 'February',
+        data: 300
+      },
+      {
+        name: 'March',
+        data: 530
+      },
+      {
+        name: 'April',
+        data: 200
+      }
+    ]
+  }}
+/>
+
+<Title />
+<Description />
+
+<Preview>
+  <Story name="Default">
+    {(args) => (
+      <MicroBarChart
+        dataset={args.dataset}
+        loading={args.loading}
+        style={{ width: '100%' }}
+        dimension={{
+          accessor: 'name'
+        }}
+        measure={{
+          accessor: 'data'
+        }}
+      />
+    )}
+  </Story>
+</Preview>
+
+<Props story="Default" of={MicroBarChart} />
+
+<Preview>
+  <Story name="With custom props">
+    {(args) => (
+      <MicroBarChart
+        onDataPointClick={args.onDataPointClick}
+        dataset={args.dataset}
+        style={{ width: '50%' }}
+        loading={args.loading}
+        dimension={{
+          accessor: 'name'
+        }}
+        measure={{
+          accessor: 'data',
+          colors: ['#f0ab00', 'var(--sapHighlightColor)'],
+          formatter: (d) => (d > 200 ? 'over 200' : 'lower'),
+          width: 16
+        }}
+      />
+    )}
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name="Loading Placeholder">
+    <MicroBarChart
+      dataset={[]}
+      dimension={{
+        accessor: 'name'
+      }}
+      measure={{
+        accessor: 'data'
+      }}
+      style={{ width: '20%' }}
+    />
+  </Story>
+</Preview>