@qoretechnologies/reqore 0.29.2 → 0.29.4

package/src/components/ControlGroup/index.tsx

@@ -18,6 +18,7 @@ export interface IReqoreControlGroupProps
    * Whether the contents of the control group should be stacked vertically
    */
   vertical?: boolean;
+  wrap?: boolean;
 }
 
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
@@ -30,6 +31,8 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   width: ${({ fluid }) => (fluid ? '100%' : undefined)};
   align-items: ${({ fluid }) => (fluid ? 'stretch' : 'flex-start')};
   flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
+  gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
+  flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
   > .reqore-control-wrapper .reqore-control {
     border-radius: ${({ stack }) => (!stack ? undefined : 0)};
@@ -43,31 +46,28 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
           > .reqore-tag,
           > * {
             &:not(:last-child) {
-              margin-bottom: ${({ stack, gapSize }) =>
-                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
               border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
             }
 
             border-radius: ${({ stack }) => (!stack ? undefined : 0)};
 
-            ${({ rounded, size }) =>
-              rounded &&
-              css`
-                &:first-child {
-                  border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
+            ${({ rounded, size, stack }) =>
+              rounded && stack
+                ? css`
+                    &:first-child {
+                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
 
-                &:last-child {
-                  border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
-              `}
+                    &:last-child {
+                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
+                  `
+                : undefined}
           }
 
           > .reqore-control-wrapper:not(:last-child) .reqore-control {
-            margin-bottom: ${({ stack, gapSize }) =>
-              !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
             border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
           }
         `
@@ -77,26 +77,25 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
           > .reqore-tag,
           > * {
             &:not(:last-child) {
-              margin-right: ${({ stack, gapSize }) =>
-                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
               border-right: ${({ stack }) => (!stack ? undefined : 0)};
             }
 
             border-radius: ${({ stack }) => (!stack ? undefined : 0)};
 
-            ${({ rounded, size }) =>
-              rounded &&
-              css`
-                &:first-child {
-                  border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
+            ${({ rounded, size, stack }) =>
+              rounded && stack
+                ? css`
+                    &:first-child {
+                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
 
-                &:last-child {
-                  border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
-              `}
+                    &:last-child {
+                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
+                  `
+                : undefined}
           }
         `}
 `;
@@ -112,6 +111,7 @@ const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
       fluid,
       flat,
       rounded = true,
+      wrap,
       ...rest
     }: IReqoreControlGroupProps,
     ref
@@ -123,6 +123,7 @@ const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
       ref={ref}
       rounded={rounded}
       fluid={fluid}
+      wrap={wrap}
       className={`${className || ''} reqore-control-group`}
     >
       {React.Children.map(children, (child) =>
@@ -134,7 +135,7 @@ const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
                   : minimal,
               size: child.props?.size || size,
               flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
-              fluid,
+              fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
             })
           : null
       )}

package/src/components/Dropdown/index.tsx

@@ -98,6 +98,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
       componentProps={componentProps}
+      isReqoreComponent
       noWrapper
       placement={placement || 'bottom-start'}
       handler={handler || 'click'}

package/src/components/Effect/index.tsx

@@ -59,6 +59,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     direction?: string;
     borderColor?: TReqoreEffectColor;
     animate?: TReqoreEffectGradientAnimationTrigger;
+    animationSpeed?: 1 | 2 | 3 | 4 | 5;
   };
   noWrap?: boolean;
   color?: TReqoreEffectColor;
@@ -180,7 +181,8 @@ export const StyledEffect = styled.span`
       ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
         ? css`
             background-size: 200% 200%;
-            animation: ${StyledGradientKeyframes} 1.5s linear infinite;
+            animation: ${StyledGradientKeyframes} ${effect.gradient.animationSpeed || 2}s linear
+              infinite;
           `
         : undefined}
 
@@ -199,7 +201,8 @@ export const StyledEffect = styled.span`
           effect.gradient.animate === 'always'
             ? css`
                 background-size: 200% 200%;
-                animation: ${StyledGradientKeyframes} 2s linear infinite;
+                animation: ${StyledGradientKeyframes} ${effect.gradient.animationSpeed || 2}s linear
+                  infinite;
               `
             : undefined}
         }

package/src/components/InternalPopover/index.tsx

@@ -62,8 +62,8 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
-  border: ${({ flat, isString, ...rest }: any) =>
-    !flat && !isString ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
+  border: ${({ flat, noWrapper, ...rest }: any) =>
+    !flat && noWrapper ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
 
   ${({ transparent }) =>
     !transparent &&
@@ -129,7 +129,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const StyledPopoverContent = styled.div<{ isString?: boolean }>`
+const StyledPopoverContent = styled.div`
   width: 100%;
   height: 100%;
   z-index: 20;
@@ -145,6 +145,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
   id,
   placement,
   noArrow,
+  noWrapper,
   useTargetWidth,
   transparent,
   maxWidth,
@@ -219,7 +220,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         isOpaque={!transparent && !minimal}
         intent={intent}
         flat={flat}
-        isString={isString(content)}
+        noWrapper={noWrapper}
         dim={flat && !transparent && !effect && minimal}
         className='reqore-popover-content'
         ref={(el) => {
@@ -236,8 +237,8 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         {!noArrow && !transparent ? (
           <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
         ) : null}
-        <StyledPopoverContent isString={isString(content)}>
-          {isString(content) ? (
+        <StyledPopoverContent>
+          {!noWrapper || isString(content) ? (
             <ReqoreMessage
               opaque={!transparent && !minimal}
               className='reqore-popover-text'

package/src/components/MultiSelect/index.tsx

@@ -1,6 +1,5 @@
 import { omit, size } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
 import { ReqoreDropdown, ReqoreInput } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { IPopoverControls } from '../../hooks/usePopover';
@@ -18,7 +17,7 @@ export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
 export interface IReqoreMultiSelectProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
   value?: string[];
-  onValueChange?: (value: string[]) => void;
+  onValueChange: (value: string[]) => void;
   items?: TReqoreMultiSelectItem[];
   onItemClick?: (item: IReqoreDropdownItem) => void;
   onItemClickIcon?: IReqoreTagProps['rightIcon'];
@@ -61,7 +60,15 @@ export const ReqoreMultiSelectItem = memo(
         effect={!item.intent ? item.effect || selectedItemEffect : undefined}
         size={selectedItemSize}
         onClick={onClick}
-        rightIcon={item.rightIcon || item.disabled ? undefined : onItemClickIcon}
+        rightIcon={
+          item.disabled
+            ? undefined
+            : item.rightIcon
+            ? item.rightIcon
+            : onClick
+            ? onItemClickIcon
+            : undefined
+        }
       />
     );
   }
@@ -70,7 +77,7 @@ export const ReqoreMultiSelectItem = memo(
 export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectProps>(
   (
     {
-      value,
+      value = [],
       onValueChange,
       onItemClick,
       canRemoveItems,
@@ -86,20 +93,11 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     }: IReqoreMultiSelectProps,
     ref
   ) => {
-    const [_value, setValue] = useState<string[]>(value || []);
     const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
     const [query, setQuery] = useState<string>('');
     const popoverData = useRef<IPopoverControls>(undefined);
     const [focused, setFocused] = useState<boolean>(false);
 
-    useUpdateEffect(() => {
-      onValueChange?.(_value);
-    }, [_value]);
-
-    useEffect(() => {
-      setValue(value || []);
-    }, [value]);
-
     useEffect(() => {
       if (query && !popoverData.current?.isOpen()) {
         popoverData.current?.open();
@@ -118,13 +116,13 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
     const addRemoveItem = useCallback(
       (item: TReqoreMultiSelectItem): void => {
-        if (_value.includes(item.value)) {
-          setValue(_value.filter((v) => v !== item.value));
+        if (value.includes(item.value)) {
+          onValueChange(value.filter((v) => v !== item.value));
         } else {
-          setValue([..._value, item.value]);
+          onValueChange([...value, item.value]);
         }
       },
-      [_value, value]
+      [value]
     );
 
     const handleItemSelect = useCallback(
@@ -142,7 +140,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
         setQuery('');
       },
-      [createdItems, _value]
+      [createdItems, value]
     );
 
     /*
@@ -168,7 +166,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       // Mark selected items as selected
       filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
         ...omit(item, ['actions', 'asBadge', 'rightIcon']),
-        selected: _value.includes(item.value),
+        selected: value.includes(item.value),
       }));
 
       if (query && !size(filteredItems)) {
@@ -207,7 +205,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       }
 
       return filteredItems;
-    }, [items, createdItems, query, _value]);
+    }, [items, createdItems, query, value]);
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent) => {
@@ -231,14 +229,14 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       (value: string): TReqoreMultiSelectItem => {
         return [...items, ...createdItems].find((item) => item.value === value);
       },
-      [items, createdItems, _value]
+      [items, createdItems, value]
     );
 
     return (
       <ReqoreControlGroup vertical fluid {...rest} ref={ref}>
         <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
-          {size(_value) ? (
-            _value.map((v) => (
+          {size(value) ? (
+            value.map((v) => (
               <ReqoreMultiSelectItem
                 key={v}
                 item={getItemByValue(v)}

package/src/components/Popover/index.tsx

@@ -8,7 +8,6 @@ export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
   componentProps?: any;
   children?: any;
   isReqoreComponent?: boolean;
-  noWrapper?: boolean;
   wrapperTag?: string;
   wrapperStyle?: React.CSSProperties;
 }
@@ -23,7 +22,6 @@ const Popover = memo(
     componentProps,
     children,
     isReqoreComponent,
-    noWrapper,
     wrapperTag = 'span',
     wrapperStyle = {},
     passPopoverData,
@@ -39,7 +37,7 @@ const Popover = memo(
       passPopoverData?.(popoverData);
     }, [popoverData]);
 
-    if (isReqoreComponent || noWrapper) {
+    if (isReqoreComponent) {
       return (
         <Component
           {...componentProps}

package/src/components/Spacer/index.tsx

@@ -1,8 +1,93 @@
-import styled from 'styled-components';
+import { memo } from 'react';
+import styled, { css } from 'styled-components';
+import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { changeLightness } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
+import { StyledEffect } from '../Effect';
 
-export const ReqoreSpacer = styled.div`
-  visibility: hidden;
-  height: ${({ height }) => height || 1}px;
-  width: ${({ width }) => width || 1}px;
+export const StyledSpacer = styled(StyledEffect)`
+  ${({ horizontal, vertical, width, height, lineSize }) => {
+    if (horizontal) {
+      return css`
+        margin-left: ${width / 2}px;
+        margin-right: ${width / 2}px;
+        width: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
+        vertical-align: middle;
+        display: inline-block;
+      `;
+    }
+
+    if (vertical) {
+      return css`
+        margin-top: ${height / 2}px;
+        margin-bottom: ${height / 2}px;
+        height: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        width: ${width ? `${width}px` : '100%'};
+      `;
+    }
+  }}
+
+  background-color: ${({ theme, lineSize }) =>
+    lineSize === 'none' ? 'transparent' : changeLightness(theme.main, 0.2)};
   flex-shrink: 0;
 `;
+
+export interface IReqoreSpacerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreEffect,
+    IWithReqoreCustomTheme,
+    IReqoreIntent {
+  width?: number;
+  height?: number;
+  lineSize?: TSizes | 'none';
+}
+
+export const ReqoreSpacer = memo(
+  ({
+    customTheme,
+    intent,
+    lineSize = 'none',
+    ...rest
+  }: IReqoreSpacerProps & { horizontal?: boolean; vertical?: boolean }) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+    let { horizontal, vertical } = rest;
+
+    // The user is using old version of the component
+    // We will assume that the user wants a spacer based on the width or height
+    if (!horizontal && !vertical) {
+      if (rest.width) {
+        horizontal = true;
+      }
+
+      if (rest.height) {
+        vertical = true;
+      }
+    }
+
+    return (
+      <StyledSpacer
+        as='div'
+        {...rest}
+        theme={theme}
+        lineSize={lineSize}
+        horizontal={horizontal}
+        vertical={vertical}
+        className='reqore-spacer'
+      />
+    );
+  }
+);
+
+export const ReqoreHorizontalSpacer = memo(
+  ({ width = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
+    return <ReqoreSpacer width={width} lineSize={lineSize} horizontal {...rest} />;
+  }
+);
+
+export const ReqoreVerticalSpacer = memo(
+  ({ height = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
+    return <ReqoreSpacer height={height} lineSize={lineSize} vertical {...rest} />;
+  }
+);

package/src/components/Tag/group.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { StyledTag } from '.';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -11,19 +10,14 @@ export interface IReqoreTagGroup
   children: any;
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-  hasBottomMargin?: boolean;
+  wrap?: boolean;
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: 0;
-
-  ${StyledTag} {
-    &:not(:last-child) {
-      margin-right: ${({ gapSize }: IReqoreTagGroup) => `${GAP_FROM_SIZE[gapSize]}px`};
-    }
-
-    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
-  }
+  display: flex;
+  flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
+  gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
 `;
 
 const ReqoreTagGroup = ({
@@ -33,13 +27,13 @@ const ReqoreTagGroup = ({
   minimal,
   className,
   columns,
-  hasBottomMargin = true,
+  wrap = true,
   ...rest
 }: IReqoreTagGroup) => (
   <StyledTagGroup
     {...rest}
     gapSize={gapSize}
-    hasBottomMargin={hasBottomMargin}
+    wrap={wrap}
     className={`${className || ''} reqore-tag-group`}
   >
     {React.Children.map(children, (child) =>

package/src/components/Tag/index.tsx

@@ -324,7 +324,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                       ? { tooltip: action.tooltip }
                       : action.tooltip
                     : {})}
-                  noWrapper
+                  isReqoreComponent
                 >
                   <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
@@ -341,7 +341,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               onClick: onRemoveClick,
               effect: rest.effect,
             }}
-            noWrapper
+            isReqoreComponent
             content='Remove'
           >
             <ReqoreIcon icon='CloseLine' size={size} />

package/src/components/Textarea/index.tsx

@@ -143,6 +143,8 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
 
     useTooltip(targetRef?.current, tooltip);
 
+    console.log(fluid);
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}

package/src/constants/sizes.ts

@@ -12,6 +12,7 @@ export const ReqoreSizes = {
 export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
 
 export const SIZE_TO_NUMBER = {
+  none: 0,
   tiny: 1,
   small: 2,
   normal: 3,

package/src/hooks/usePopover.tsx

@@ -44,6 +44,7 @@ export interface IPopover
   show?: boolean;
   openOnMount?: boolean;
   noArrow?: boolean;
+  noWrapper?: boolean;
   useTargetWidth?: boolean;
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;

package/src/index.tsx

@@ -42,7 +42,7 @@ export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
 export { default as ReqoreSidebar } from './components/Sidebar';
-export { ReqoreSpacer } from './components/Spacer';
+export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { default as ReqoreTable } from './components/Table';
 export { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';

package/src/mock/collectionData.tsx

@@ -58,6 +58,13 @@ export default [
     minimal: false,
     badge: 0,
   },
+  {
+    icon: 'ZcoolLine',
+    label: 'Item without fade',
+    content:
+      'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
+    showContentFade: false,
+  },
   {
     icon: 'FolderWarningFill',
     label: 'Expandable item',

package/src/mock/multiSelect.ts

@@ -16,7 +16,7 @@ export const MultiSelectItems: TReqoreMultiSelectItem[] = [
     value: 'Existing item 3',
     icon: 'DropboxFill',
     intent: 'info',
-    rightIcon: 'SunLine',
+    rightIcon: 'ArrowRightLine',
   },
   {
     label: 'Existing item 4',

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -19,7 +19,7 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
       <ReqoreControlGroup>
-        <ReqoreCheckbox {...args} intent='info' />
+        <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

package/src/stories/Collection/Collection.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -72,6 +72,7 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
+      badge={10}
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreControlGroup, ReqoreTag } from '../../index';
-import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
+import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
+import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -36,8 +36,9 @@ export default {
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
   return (
     <ReqoreControlGroup {...args}>
-      <ReqoreButton>Button</ReqoreButton>
+      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
       <ReqoreButton
+        icon='PictureInPictureLine'
         flat={false}
         effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
       >
@@ -45,11 +46,25 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
       </ReqoreButton>
       <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
       <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+      <ReqoreCheckbox
+        asSwitch
+        label='Switchy switch'
+        margin='both'
+        intent='warning'
+        checkedIcon='CheckFill'
+        checked
+        uncheckedIcon='CheckboxBlankLine'
+      />
       <ReqoreInput icon='4KFill' value='Hello' />
       <ReqoreButton disabled fixed>
         Disabled & Fixed
       </ReqoreButton>
+      <ReqoreCheckbox checked margin='both'>
+        Checkbox
+      </ReqoreCheckbox>
+
       <ReqoreButton minimal>Minimal</ReqoreButton>
+      <ReqoreTag label='smol tag' size='small' />
     </ReqoreControlGroup>
   );
 };
@@ -79,3 +94,8 @@ export const BigGapSize = Template.bind({});
 BigGapSize.args = {
   gapSize: 'big',
 };
+
+export const Wrap = Template.bind({});
+Wrap.args = {
+  wrap: true,
+};