@qoretechnologies/reqore 0.30.5 → 0.30.6

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -159,21 +159,11 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
 
   return (
     <>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreDropdown label='Default Dropdown' {...args} />
         <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
-        <ReqoreDropdown
-          icon='SunCloudyLine'
-          label='Custom icon'
-          {...args}
-          leftIconColor='warning:lighten:2'
-        />
-        <ReqoreDropdown
-          rightIcon='SunCloudyLine'
-          caretPosition='right'
-          {...args}
-          iconColor='success:lighten:2'
-        >
+        <ReqoreDropdown icon='SunCloudyLine' label='Custom icon' {...args} />
+        <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
           Custom icon with caret on right
         </ReqoreDropdown>
         <ReqoreDropdown

package/src/stories/Icon/Icon.stories.tsx

@@ -21,7 +21,6 @@ export const Icon: Story<IReqoreIconProps> = () => {
           color='#291133'
           effect={{ sepia: true }}
           margin='both'
-          tooltip={{ content: 'I have a tooltip', openOnMount: true }}
         />
         <ReqoreIcon
           icon='SignalTowerFill'

package/src/stories/Input/Input.stories.tsx

@@ -2,14 +2,13 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
-    ...SizeArg,
     ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;
@@ -27,7 +26,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 
   return (
     <>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
         <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
         <ReqoreInput
@@ -39,7 +38,6 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
-          iconColor='pending:lighten:2'
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
@@ -53,7 +51,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreInput
           {...args}
           placeholder='Reqore Input'

package/src/stories/Menu/Menu.stories.tsx

@@ -118,7 +118,6 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           {
             icon: 'EmotionUnhappyLine',
             rightIcon: 'Scissors2Fill',
-            leftIconColor: 'danger:lighten',
             wrap: args.wrapText,
             flat: args.flat,
           } as IReqoreMenuItemProps
@@ -149,7 +148,6 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           </ReqoreMenu>
         }
         isReqoreComponent
-        noWrapper
         handler='click'
         placement='right'
       >

package/src/stories/Message/Message.stories.tsx

@@ -52,13 +52,6 @@ Minimal.args = {
   intent: 'danger',
 };
 
-export const WithIconColor: Story<IReqoreMessageProps> = Template.bind({});
-WithIconColor.args = {
-  minimal: true,
-  intent: 'success',
-  iconColor: '#00fd9f',
-};
-
 export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
 Opaque.args = {
   opaque: true,

package/src/stories/Panel/Panel.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
-import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
-import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
+import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
+import { FlatArg, IconArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -12,7 +11,6 @@ export default {
   argTypes: {
     ...IntentArg,
     ...FlatArg,
-    ...SizeArg,
     ...createArg('padded', {
       type: 'boolean',
       defaultValue: true,
@@ -50,8 +48,8 @@ export default {
       description: 'The opacity of the panel',
     }),
     ...createArg('headerSize', {
-      type: 'string',
-      defaultValue: undefined,
+      type: 'number',
+      defaultValue: 4,
       name: 'Header Size',
       description: 'The size of the header',
     }),
@@ -66,64 +64,9 @@ export default {
 } as Meta<IReqorePanelProps>;
 
 const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
-  if (args.fluid) {
-    const actions: IReqorePanelAction[] = [
-      {
-        icon: 'GiftFill',
-        label: 'Visible',
-        responsive: false,
-      },
-      {
-        label: 'Hidden when small',
-        icon: 'EyeCloseLine',
-      },
-      {
-        label: 'Hidden when small',
-        icon: 'EyeCloseLine',
-      },
-      {
-        label: 'Hidden when small',
-        icon: 'EyeCloseLine',
-      },
-      {
-        label: 'Hidden when small',
-        icon: 'EyeCloseLine',
-      },
-    ];
-
-    return (
-      <>
-        <ReqorePanel
-          {...args}
-          badge='Fluid'
-          actions={actions}
-          bottomActions={[
-            ...actions,
-            ...actions.map((action) => ({ ...action, position: 'right' })),
-          ]}
-        >
-          This is a fluid panel
-        </ReqorePanel>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqorePanel
-          {...args}
-          style={{ width: 400 }}
-          fluid={false}
-          badge='Not Fluid'
-          actions={actions}
-          bottomActions={[
-            ...actions,
-            ...actions.map((action) => ({ ...action, position: 'right' })),
-          ]}
-        >
-          This is not a fluid panel
-        </ReqorePanel>
-      </>
-    );
-  }
-
   return (
     <ReqorePanel
+      {...args}
       badge={[
         10,
         0,
@@ -142,26 +85,11 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       actions={[
-        {
-          responsive: false,
-          group: [
-            {
-              label: 'Non responsive',
-              icon: '24HoursFill',
-              customTheme: { main: '#eb0e8c' },
-            },
-            {
-              icon: 'FullscreenExitLine',
-              customTheme: { main: '#a40a62' },
-            },
-          ],
-        },
-        {
-          group: [
-            { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-            { icon: 'CopperCoinFill', intent: 'danger' },
-          ],
-        },
+        { label: 'Test', icon: '24HoursFill', intent: 'info' },
+        [
+          { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+          { icon: 'CopperCoinFill', intent: 'danger' },
+        ],
         {
           as: ReqoreInput,
           props: {
@@ -180,14 +108,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       bottomActions={[
-        {
-          position: 'left',
-          intent: 'success',
-          group: [
-            { label: 'Test 1', icon: '24HoursFill' },
-            { label: 'Test 2', icon: '24HoursFill' },
-          ],
-        },
+        { label: 'Test', icon: '24HoursFill', position: 'left' },
         {
           label: 'More actions',
           position: 'right',
@@ -197,7 +118,6 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           ],
         },
       ]}
-      {...args}
     >
       Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
       of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
@@ -237,33 +157,9 @@ export const Flat = Template.bind({});
 Flat.args = {
   flat: true,
 };
-export const NoBars: Story<IReqorePanelProps> = Template.bind({});
-NoBars.args = {
+export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
+NoLabel.args = {
   label: undefined,
-  badge: undefined,
-  icon: undefined,
-  actions: [
-    { label: 'test', show: false },
-    {
-      show: false,
-      group: [
-        { label: 'test 2', show: true },
-        { label: 'test 3', show: true },
-      ],
-    },
-  ],
-  bottomActions: [
-    { label: 'test', show: false, position: 'left' },
-    {
-      position: 'right',
-      show: false,
-      group: [
-        { label: 'test 2', show: true },
-        { label: 'test 3', show: true },
-      ],
-    },
-  ],
-  collapsible: false,
 };
 
 export const Transparent: Story<IReqorePanelProps> = Template.bind({});
@@ -271,44 +167,14 @@ Transparent.args = {
   transparent: true,
 };
 
-export const Intent: Story<IReqorePanelProps> = Template.bind({});
-Intent.args = {
-  intent: 'success',
-  iconColor: 'success:lighten:2',
-  transparent: true,
-  flat: true,
-};
-
 export const Minimal: Story<IReqorePanelProps> = Template.bind({});
 Minimal.args = {
   minimal: true,
   flat: true,
 };
 
-export const TransparentFlat: Story<IReqorePanelProps> = Template.bind({});
-TransparentFlat.args = {
-  transparent: true,
-  flat: true,
-};
-
-export const Fluid: Story<IReqorePanelProps> = Template.bind({});
-Fluid.args = {
-  fluid: true,
-};
-
-export const Size: Story<IReqorePanelProps> = Template.bind({});
-Size.args = {
-  size: 'small',
-};
-
-export const ContentSize: Story<IReqorePanelProps> = Template.bind({});
-ContentSize.args = {
-  contentSize: 'big',
-};
-
 export const WithEffect: Story<IReqorePanelProps> = Template.bind({});
 WithEffect.args = {
-  iconColor: 'info:lighten:2',
   minimal: true,
   contentEffect: {
     gradient: {

package/src/stories/Popover/Popover.stories.tsx

@@ -8,9 +8,9 @@ import {
   ReqoreMessage,
   ReqorePanel,
   ReqorePopover,
-  ReqoreSpacer
+  ReqoreSpacer,
 } from '../../index';
-import { argManager, FlatArg } from '../utils/args';
+import { FlatArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
@@ -56,7 +56,7 @@ export default {
 
 const HoverButton = (args: any) => {
   return (
-    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args} fixed>
+    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args}>
       Hover popover
     </ReqorePopover>
   );
@@ -106,105 +106,100 @@ const HoverStayButton = (args: any) => {
 
 const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
   return (
-    <>
-      <ReqoreControlGroup vertical gapSize='huge' horizontalAlign='flex-start'>
-        <HoverButton {...args} />
-        <ClickButton {...args} />
-        <DelayButton {...args} />
-        <HoverStayButton {...args} />
-        {typeof args.content === 'string' && (
-          <>
-            <ReqoreSpacer height={100} />
+    <ReqoreControlGroup vertical gapSize='huge'>
+      <HoverButton {...args} />
+      <ClickButton {...args} />
+      <DelayButton {...args} />
+      <HoverStayButton {...args} />
+      {typeof args.content === 'string' && (
+        <>
+          <ReqoreSpacer height={100} />
+          <ReqorePopover
+            {...args}
+            component={ReqoreButton}
+            isReqoreComponent
+            openOnMount
+            title='I opened on my own'
+            icon='CactusFill'
+            intent='success'
+            placement='top'
+          >
+            Full popover
+          </ReqorePopover>
+          <ReqoreControlGroup>
+            <ReqoreSpacer width={350} />
             <ReqorePopover
               {...args}
               component={ReqoreButton}
               isReqoreComponent
               openOnMount
-              title='I opened on my own'
-              icon='CactusFill'
-              intent='success'
-              placement='top'
+              intent='info'
+              minimal
+              placement='left'
             >
-              Full popover
+              Minimal popover
             </ReqorePopover>
-            <ReqoreControlGroup>
-              <ReqoreSpacer width={190} />
-              <ReqorePopover
-                {...args}
-                component={ReqoreButton}
-                isReqoreComponent
-                openOnMount
-                intent='info'
-                minimal
-                placement='left'
-              >
-                Minimal popover
-              </ReqorePopover>
-            </ReqoreControlGroup>
-            <ReqorePopover
-              {...args}
-              component={ReqoreButton}
-              isReqoreComponent
-              openOnMount
-              icon='CactusFill'
-              effect={{
-                gradient: {
-                  colors: {
-                    0: 'warning',
-                    100: 'warning:darken:2',
-                  },
+          </ReqoreControlGroup>
+          <ReqorePopover
+            {...args}
+            component={ReqoreButton}
+            isReqoreComponent
+            openOnMount
+            icon='CactusFill'
+            effect={{
+              gradient: {
+                colors: {
+                  0: 'warning',
+                  100: 'warning:darken:2',
                 },
-                spaced: 2,
-                uppercase: true,
-                weight: 'thick',
-              }}
-              placement='right'
-            >
-              Effect popover
-            </ReqorePopover>
-            <ReqorePopover
-              {...args}
-              component={ReqoreButton}
-              isReqoreComponent
-              openOnMount
-              transparent
-              placement='right'
-            >
-              Transparent popover
-            </ReqorePopover>
-          </>
-        )}
-        <ReqorePopover
-          {...args}
-          component={ReqoreButton}
-          isReqoreComponent
-          openOnMount
-          placement='right'
-        >
-          Auto open popover
-        </ReqorePopover>
-        <ReqorePanel label='This is a test' flat>
+              },
+              spaced: 2,
+              uppercase: true,
+              weight: 'thick',
+            }}
+            placement='right'
+          >
+            Effect popover
+          </ReqorePopover>
           <ReqorePopover
             {...args}
             component={ReqoreButton}
             isReqoreComponent
             openOnMount
-            placement='bottom'
-            title="I'm a title"
-            content={
-              <ReqorePanel label='This is a test' flat>
-                <ReqoreMessage flat>
-                  In to am attended desirous raptures declared diverted confined at. Collected
-                  instantly remaining up certainly to necessary as. Over walk dull into
-                </ReqoreMessage>
-              </ReqorePanel>
-            }
+            transparent
+            placement='right'
           >
-            With Custom Content inside a panel
+            Transparent popover
           </ReqorePopover>
-        </ReqorePanel>
-      </ReqoreControlGroup>
-    </>
+        </>
+      )}
+      <ReqorePopover
+        {...args}
+        component={ReqoreButton}
+        isReqoreComponent
+        openOnMount
+        placement='right'
+      >
+        Auto open popover
+      </ReqorePopover>
+      <ReqorePopover
+        {...args}
+        component={ReqoreButton}
+        isReqoreComponent
+        openOnMount
+        placement='bottom'
+        content={
+          <ReqorePanel label='This is a test' flat>
+            <ReqoreMessage flat>
+              In to am attended desirous raptures declared diverted confined at. Collected instantly
+              remaining up certainly to necessary as. Over walk dull into
+            </ReqoreMessage>
+          </ReqorePanel>
+        }
+      >
+        With Custom Content
+      </ReqorePopover>
+    </ReqoreControlGroup>
   );
 };
 
@@ -215,7 +210,6 @@ NotFlat.args = {
 };
 export const CustomContent = Template.bind({});
 CustomContent.args = {
-  noWrapper: true,
   content: (
     <ReqorePanel label='This is a test' flat>
       <ReqoreMessage flat>

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreTabsProps } from '../../components/Tabs';
-import { TReqoreTabsContentPadding } from '../../components/Tabs/content';
-import { ReqoreH3, ReqoreTabs, ReqoreTabsContent } from '../../index';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { ReqoreTabs, ReqoreTabsContent } from '../../index';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 const tabs = [
   {
@@ -31,7 +30,6 @@ const tabs = [
     id: 3,
     icon: 'FileSettingsLine',
     tooltip: 'Click to go to page 3!',
-    iconColor: 'info:lighten:3',
   },
   {
     id: 'tab4',
@@ -100,7 +98,7 @@ const tabs = [
   },
 ] as IReqoreTabsProps['tabs'];
 
-const { createArg } = argManager<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>();
+const { createArg } = argManager<IReqoreTabsProps>();
 
 export default {
   title: 'Components/Tabs',
@@ -138,25 +136,25 @@ export default {
       description: 'If the tabs should be vertical',
     }),
   },
-} as Meta<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>;
+} as Meta<IReqoreTabsProps>;
 
-const Template: Story<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }> = (args) => {
+const Template: Story<IReqoreTabsProps> = (args) => {
   return (
     <ReqoreTabs {...args} tabs={tabs}>
       <ReqoreTabsContent tabId='tab1'>
-        <ReqoreH3>Tab 1</ReqoreH3>
+        <h3>Tab 1</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab2'>
-        <ReqoreH3>Tab 2</ReqoreH3>
+        <h3>Tab 2</h3>
       </ReqoreTabsContent>
-      <ReqoreTabsContent tabId={3} padded='vertical'>
-        <ReqoreH3>Tab 3</ReqoreH3>
+      <ReqoreTabsContent tabId={3}>
+        <h3>Tab 3</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab4'>
-        <ReqoreH3>Tab 4</ReqoreH3>
+        <h3>Tab 4</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab5'>
-        <ReqoreH3>Tab 5</ReqoreH3>
+        <h3>Tab 5</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab6'>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae nisi ligula. Proin
@@ -217,13 +215,13 @@ const Template: Story<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding
         Praesent vitae bibendum mauris, eu blandit dui.
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab7'>
-        <ReqoreH3>Tab 7</ReqoreH3>
+        <h3>Tab 7</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab8'>
-        <ReqoreH3>Tab 8</ReqoreH3>
+        <h3>Tab 8</h3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab9'>
-        <ReqoreH3>Tab 9</ReqoreH3>
+        <h3>Tab 9</h3>
       </ReqoreTabsContent>
     </ReqoreTabs>
   );
@@ -238,7 +236,6 @@ Fill.args = {
 export const CustomActiveIntent = Template.bind({});
 CustomActiveIntent.args = {
   activeTabIntent: 'warning',
-  activeTab: 'tab8',
 };
 
 export const NotFlat = Template.bind({});
@@ -246,23 +243,12 @@ NotFlat.args = {
   flat: false,
 };
 
-export const NoTabsPadding = Template.bind({});
-NoTabsPadding.args = {
-  padded: false,
-};
-
 export const Vertical = Template.bind({});
 Vertical.args = {
   vertical: true,
   fillParent: true,
 };
 
-export const VerticalNoTabsPadding = Template.bind({});
-VerticalNoTabsPadding.args = {
-  padded: false,
-  vertical: true,
-};
-
 export const VerticalWithWrapping = Template.bind({});
 VerticalWithWrapping.args = {
   vertical: true,
@@ -273,11 +259,7 @@ VerticalWithWrapping.args = {
 export const VerticalCustomWidth = Template.bind({});
 VerticalCustomWidth.args = {
   vertical: true,
+  fill: true,
   fillParent: true,
   width: '300px',
 };
-
-export const CustomTabsPadding = Template.bind({});
-CustomTabsPadding.args = {
-  tabsPadding: 'none',
-};