@qoretechnologies/reqore 0.30.6 → 0.30.7

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

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

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

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

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

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

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

@@ -52,6 +52,13 @@ 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,8 +1,9 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
-import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
-import { FlatArg, IconArg, IntentArg, argManager } from '../utils/args';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
+import { ReqoreVerticalSpacer } from '../../components/Spacer';
+import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -11,6 +12,7 @@ export default {
   argTypes: {
     ...IntentArg,
     ...FlatArg,
+    ...SizeArg,
     ...createArg('padded', {
       type: 'boolean',
       defaultValue: true,
@@ -48,8 +50,8 @@ export default {
       description: 'The opacity of the panel',
     }),
     ...createArg('headerSize', {
-      type: 'number',
-      defaultValue: 4,
+      type: 'string',
+      defaultValue: undefined,
       name: 'Header Size',
       description: 'The size of the header',
     }),
@@ -64,9 +66,64 @@ 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,
@@ -85,11 +142,26 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       actions={[
-        { label: 'Test', icon: '24HoursFill', intent: 'info' },
-        [
-          { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-          { icon: 'CopperCoinFill', intent: 'danger' },
-        ],
+        {
+          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' },
+          ],
+        },
         {
           as: ReqoreInput,
           props: {
@@ -108,7 +180,14 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       bottomActions={[
-        { label: 'Test', icon: '24HoursFill', position: 'left' },
+        {
+          position: 'left',
+          intent: 'success',
+          group: [
+            { label: 'Test 1', icon: '24HoursFill' },
+            { label: 'Test 2', icon: '24HoursFill' },
+          ],
+        },
         {
           label: 'More actions',
           position: 'right',
@@ -118,6 +197,7 @@ 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.
@@ -157,9 +237,33 @@ export const Flat = Template.bind({});
 Flat.args = {
   flat: true,
 };
-export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
-NoLabel.args = {
+export const NoBars: Story<IReqorePanelProps> = Template.bind({});
+NoBars.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({});
@@ -167,14 +271,44 @@ 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 { FlatArg, argManager } from '../utils/args';
+import { argManager, FlatArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
@@ -56,7 +56,7 @@ export default {
 
 const HoverButton = (args: any) => {
   return (
-    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args}>
+    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args} fixed>
       Hover popover
     </ReqorePopover>
   );
@@ -106,100 +106,105 @@ const HoverStayButton = (args: any) => {
 
 const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
   return (
-    <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} />
+    <>
+      <ReqoreControlGroup vertical gapSize='huge' horizontalAlign='flex-start'>
+        <HoverButton {...args} />
+        <ClickButton {...args} />
+        <DelayButton {...args} />
+        <HoverStayButton {...args} />
+        {typeof args.content === 'string' && (
+          <>
+            <ReqoreSpacer height={100} />
             <ReqorePopover
               {...args}
               component={ReqoreButton}
               isReqoreComponent
               openOnMount
-              intent='info'
-              minimal
-              placement='left'
+              title='I opened on my own'
+              icon='CactusFill'
+              intent='success'
+              placement='top'
             >
-              Minimal popover
+              Full popover
             </ReqorePopover>
-          </ReqoreControlGroup>
-          <ReqorePopover
-            {...args}
-            component={ReqoreButton}
-            isReqoreComponent
-            openOnMount
-            icon='CactusFill'
-            effect={{
-              gradient: {
-                colors: {
-                  0: 'warning',
-                  100: 'warning:darken:2',
+            <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',
+                  },
                 },
-              },
-              spaced: 2,
-              uppercase: true,
-              weight: 'thick',
-            }}
-            placement='right'
-          >
-            Effect popover
-          </ReqorePopover>
+                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>
           <ReqorePopover
             {...args}
             component={ReqoreButton}
             isReqoreComponent
             openOnMount
-            transparent
-            placement='right'
+            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 popover
+            With Custom Content inside a panel
           </ReqorePopover>
-        </>
-      )}
-      <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>
+        </ReqorePanel>
+      </ReqoreControlGroup>
+    </>
   );
 };
 
@@ -210,6 +215,7 @@ 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,7 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreTabsProps } from '../../components/Tabs';
-import { ReqoreTabs, ReqoreTabsContent } from '../../index';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { TReqoreTabsContentPadding } from '../../components/Tabs/content';
+import { ReqoreH3, ReqoreTabs, ReqoreTabsContent } from '../../index';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 const tabs = [
   {
@@ -30,6 +31,7 @@ const tabs = [
     id: 3,
     icon: 'FileSettingsLine',
     tooltip: 'Click to go to page 3!',
+    iconColor: 'info:lighten:3',
   },
   {
     id: 'tab4',
@@ -98,7 +100,7 @@ const tabs = [
   },
 ] as IReqoreTabsProps['tabs'];
 
-const { createArg } = argManager<IReqoreTabsProps>();
+const { createArg } = argManager<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>();
 
 export default {
   title: 'Components/Tabs',
@@ -136,25 +138,25 @@ export default {
       description: 'If the tabs should be vertical',
     }),
   },
-} as Meta<IReqoreTabsProps>;
+} as Meta<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>;
 
-const Template: Story<IReqoreTabsProps> = (args) => {
+const Template: Story<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }> = (args) => {
   return (
     <ReqoreTabs {...args} tabs={tabs}>
       <ReqoreTabsContent tabId='tab1'>
-        <h3>Tab 1</h3>
+        <ReqoreH3>Tab 1</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab2'>
-        <h3>Tab 2</h3>
+        <ReqoreH3>Tab 2</ReqoreH3>
       </ReqoreTabsContent>
-      <ReqoreTabsContent tabId={3}>
-        <h3>Tab 3</h3>
+      <ReqoreTabsContent tabId={3} padded='vertical'>
+        <ReqoreH3>Tab 3</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab4'>
-        <h3>Tab 4</h3>
+        <ReqoreH3>Tab 4</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab5'>
-        <h3>Tab 5</h3>
+        <ReqoreH3>Tab 5</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab6'>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae nisi ligula. Proin
@@ -215,13 +217,13 @@ const Template: Story<IReqoreTabsProps> = (args) => {
         Praesent vitae bibendum mauris, eu blandit dui.
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab7'>
-        <h3>Tab 7</h3>
+        <ReqoreH3>Tab 7</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab8'>
-        <h3>Tab 8</h3>
+        <ReqoreH3>Tab 8</ReqoreH3>
       </ReqoreTabsContent>
       <ReqoreTabsContent tabId='tab9'>
-        <h3>Tab 9</h3>
+        <ReqoreH3>Tab 9</ReqoreH3>
       </ReqoreTabsContent>
     </ReqoreTabs>
   );
@@ -236,6 +238,7 @@ Fill.args = {
 export const CustomActiveIntent = Template.bind({});
 CustomActiveIntent.args = {
   activeTabIntent: 'warning',
+  activeTab: 'tab8',
 };
 
 export const NotFlat = Template.bind({});
@@ -243,12 +246,23 @@ 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,
@@ -259,7 +273,11 @@ 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',
+};