@qoretechnologies/reqore 0.30.4 → 0.30.6

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>
   );
@@ -245,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,
@@ -272,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',
-};

package/src/stories/Tag/Tag.stories.tsx

@@ -58,7 +58,7 @@ export default {
 
 const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }) => {
   return (
-    <ReqoreTagGroup columns={columns} size={args.size} gapSize={args.gapSize} wrap={args.wrap}>
+    <ReqoreTagGroup columns={columns} size={args.size} gapSize={args.gapSize}>
       <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
       <ReqoreTag
         {...args}
@@ -77,15 +77,9 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         label={2}
       />
       <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
-      <ReqoreTag
-        label='With Icon Colors'
-        icon='AlarmWarningLine'
-        {...args}
-        iconColor='warning:lighten:2'
-      />
       <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
       <ReqoreTag labelKey='Key' label='value' {...args} />
-      <ReqoreTag icon='QuestionAnswerLine' {...args} fixed />
+      <ReqoreTag icon='QuestionAnswerLine' {...args} />
       <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
       <ReqoreTag
         label='300px Tag'
@@ -94,17 +88,6 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         {...args}
         tooltip='I am wiiiiiiide'
         actions={[
-          {
-            icon: 'ErrorWarningLine',
-            onClick: noop,
-            intent: 'info',
-            tooltip: {
-              content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
-              openOnMount: true,
-              intent: 'danger',
-            },
-            show: false,
-          },
           {
             icon: '24HoursFill',
             onClick: noop,
@@ -116,6 +99,7 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
             icon: 'SpyFill',
             onClick: noop,
             intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
           },
         ]}
       />
@@ -185,8 +169,6 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         label='Wrapped tag with some long text and NO width specified, AND wrap specified'
         icon='ShareForward2Fill'
         rightIcon={args.rightIcon}
-        leftIconColor='#00fafd'
-        rightIconColor='#eb0e8c'
         wrap
         onRemoveClick={null}
         actions={[
@@ -214,8 +196,6 @@ export const BigGapSize = Template.bind({});
 BigGapSize.args = { gapSize: 'big' };
 export const Badge = Template.bind({});
 Badge.args = { asBadge: true };
-export const NoWrap = Template.bind({});
-NoWrap.args = { wrap: false };
 
 export const Effect = Template.bind({});
 Effect.args = {

package/src/stories/TextArea/TextArea.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
 import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
-import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, DisabledArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTextareaProps>();
 
@@ -22,7 +22,7 @@ export default {
       name: 'Fluid',
       description: 'Fluid',
       control: 'boolean',
-      defaultValue: undefined,
+      defaultValue: false,
     }),
     ...createArg('placeholder', {
       name: 'Placeholder',
@@ -55,7 +55,7 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
 
   return (
     <>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup fluid>
         <ReqoreTextarea
           {...args}
           onChange={handleValueChange}

package/src/styles.ts

@@ -31,12 +31,6 @@ export const ActiveIconScale = css`
   }
 `;
 
-export const ChildActiveIconScale = css`
-  > ${StyledIconWrapper} {
-    transform: scale(${ACTIVE_ICON_SCALE});
-  }
-`;
-
 export const ScaleIconOnHover = css`
   &:hover,
   &:focus {