Improvement/add controls icons objects

.storybook/preview.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
-
-import { defaultTheme } from '../src/lib/style/theme';
+import { defaultTheme,brand } from '../src/lib/style/theme';
 
 const themes = {
   darkRebrand: defaultTheme.darkRebrand,
@@ -35,6 +34,15 @@ const withThemeProvider = (Story, context) => {
 export const decorators = [withThemeProvider];
 
 export const parameters = {
+  controls:{
+    //All props with color in name will automatically have a control 'color'
+    //with colors presets to theme colors, possible to have the color name from theme in control
+    // presetColors: Object.values(brand),
+    presetColors: Object.entries(brand).map(color => {return {color: color[1],title:color[0] }}),
+    matchers:{
+      color: /color/i
+    }
+  },
   options: {
     storySort: {
       order: [

package.json

@@ -39,25 +39,26 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.3",
-    "@storybook/addon-actions": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-mdx-gfm": "^7.5.1",
-    "@storybook/addon-storyshots": "^7.5.1",
-    "@storybook/addon-storysource": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/addon-storyshots": "^7.5.3",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/manager-api": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^7.5.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^27.5.0",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
@@ -94,7 +95,7 @@
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^7.5.1",
+    "storybook": "^7.5.3",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
     "typescript": "^4.6.4",
@@ -147,7 +148,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
-    "framer-motion": "^4.1.17",
-    "@storybook/preview-api": "^7.5.1"
+    "@storybook/preview-api": "^7.5.3",
+    "framer-motion": "^4.1.17"
   }
 }

src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -16,7 +16,7 @@ export type Props = Omit<
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: React.ReactNode;
   label?: React.ReactNode;
-  tooltip?: TooltipProps;
+  tooltip?: Omit<TooltipProps, 'children'>;
 };
 export const ButtonStyled = styled.button<Props>`
   -webkit-appearance: none;

stories/banner.stories.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Banner } from '../src/lib/components/banner/Banner.component';
-import { Icon, iconTable } from '../src/lib/components/icon/Icon.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
 import { Wrapper } from './common';
-
-const icons = Object.keys(iconTable);
+import { iconOptions } from './controls';
 
 export default {
   title: 'Components/Notification/Banner',
@@ -14,7 +13,7 @@ export default {
   },
   argTypes: {
     icon: {
-      options: icons,
+      options: iconOptions,
     },
   },
 };
@@ -33,7 +32,12 @@ export const Playground = {
   args: {
     variant: 'base',
     children: 'Some text explaining what happened',
-    title: 'Playground',
+  },
+  argTypes: {
+    variant: { control: { disable: false } },
+    title: { control: { disable: false } },
+    children: { control: { disable: false } },
+    icon: { control: { disable: false } },
   },
 };
 

stories/buttonv2.stories.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
-import { Wrapper, Title } from './common';
+import {
+  Button,
+  Props,
+} from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Wrapper } from './common';
 import { CopyButton } from '../src/lib/next';
+import { Icon } from '../src/lib';
+import { tooltipArgTypes, iconArgType } from './controls';
 
 export default {
   title: 'Components/v2/Button',
@@ -13,6 +18,30 @@ export default {
   args: {
     onClick: action('Button clicked'),
   },
+  argTypes: {
+    ...tooltipArgTypes,
+    icon: iconArgType,
+  },
+  render: ({
+    // defines new args to have control over tooltip properties
+    tooltipOverlay,
+    tooltipPlacement,
+    tooltipOverlayStyle,
+    icon,
+    ...args
+  }) => {
+    const props: Props = { ...args };
+    // define tootltip with the new args
+    props.tooltip = {
+      overlay: tooltipOverlay,
+      placement: tooltipPlacement,
+      overlayStyle: tooltipOverlayStyle,
+    };
+
+    return (
+      <Button icon={icon && <Icon name={icon}></Icon>} {...props}></Button>
+    );
+  },
 };
 
 export const Playground = {
@@ -22,13 +51,33 @@ export const Playground = {
 };
 
 export const DefaultButtons = {
-  render: ({ ...args }) => {
+  render: ({ icon, ...args }) => {
     return (
       <>
-        <Button variant="primary" label="primary" {...args} />
-        <Button variant="secondary" label="secondary" {...args} />
-        <Button variant="danger" label="danger" {...args} />
-        <Button variant="outline" label="outline" {...args} />
+        <Button
+          variant="primary"
+          label="primary"
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+        />
+        <Button
+          variant="secondary"
+          label="secondary"
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+        />
+        <Button
+          variant="danger"
+          label="danger"
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+        />
+        <Button
+          variant="outline"
+          label="outline"
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+        />
       </>
     );
   },
@@ -56,10 +105,10 @@ export const ButtonDisabled = {
 };
 
 export const IconButtonWithTooltip = {
-  render: ({ ...args }) => {
+  render: ({ icon, ...args }) => {
     return (
       <>
-        <Button {...args} />
+        <Button icon={icon && <Icon name={icon}></Icon>} {...args} />
         <Button
           variant="secondary"
           icon={<i className="fas fa-link" />}
@@ -71,14 +120,22 @@ export const IconButtonWithTooltip = {
             placement: 'top',
           }}
         />
-        <Button {...args} variant="danger" />
-        <Button {...args} variant="outline" />
+        <Button
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+          variant="danger"
+        />
+        <Button
+          icon={icon && <Icon name={icon}></Icon>}
+          {...args}
+          variant="outline"
+        />
       </>
     );
   },
   args: {
     variant: 'primary',
-    icon: <i className="fas fa-trash" />,
+    icon: 'Delete',
     tooltip: {
       overlayStyle: {
         width: '80px',
@@ -127,12 +184,38 @@ export const GhostButtons = {
     );
   },
 };
-
 export const CopyButtons = {
-  render: (args) => <CopyButton {...args}></CopyButton>,
+  render: ({ ...args }) => <CopyButton {...args}></CopyButton>,
   args: {
     textToCopy: 'test',
   },
+  argTypes: {
+    icon: {
+      table: {
+        disable: true,
+      },
+    },
+    tooltipPlacement: {
+      table: {
+        disable: true,
+      },
+    },
+    tooltip: {
+      table: {
+        disable: true,
+      },
+    },
+    tooltipOverlay: {
+      table: {
+        disable: true,
+      },
+    },
+    tooltipOverlayStyle: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 export const CopyButtonsWithLabel = {
   ...CopyButtons,

stories/chips.stories.tsx

@@ -2,9 +2,8 @@ import { Chips } from '../src/lib/components/chips/Chips.component';
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
-import { Icon, iconTable } from '../src/lib/components/icon/Icon.component';
-
-const icons = Object.keys(iconTable);
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import { iconOptions } from './controls';
 
 export default {
   title: 'Components/Chips',
@@ -21,7 +20,7 @@ export default {
   ],
   argTypes: {
     icon: {
-      options: icons,
+      options: iconOptions,
     },
   },
 };

stories/constrainedtext.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConstrainedText } from '../src/lib/components/constrainedtext/Constrainedtext.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
+import { placementOptions } from './controls';
 export default {
   title: 'Components/Constrained Text',
   component: ConstrainedText,
@@ -20,20 +21,7 @@ export default {
   ],
   argTypes: {
     tooltipPlacement: {
-      options: [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'top-start',
-        'top-end',
-        'right-start',
-        'right-end',
-        'bottom-end',
-        'bottom-start',
-        'left-start',
-        'left-end',
-      ],
+      options: placementOptions,
     },
   },
 };