@qoretechnologies/reqore 0.28.4 → 0.28.6

package/src/components/Notifications/notification.tsx

@@ -15,7 +15,7 @@ import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
 import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
-import { IWithReqoreEffect, IWithReqoreMinimal } from '../../types/global';
+import { IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
@@ -23,7 +23,10 @@ import ReqoreIcon from '../Icon';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
-export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqoreMinimal {
+export interface IReqoreNotificationProps
+  extends IWithReqoreEffect,
+    IWithReqoreMinimal,
+    IWithReqoreOpaque {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
@@ -38,7 +41,7 @@ export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqore
   size?: TSizes;
 }
 
-export interface IReqoreNotificationStyle {
+export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
   theme: IReqoreTheme;
   type?: IReqoreNotificationType;
   clickable?: boolean;
@@ -73,12 +76,14 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   transition: all 0.2s ease-out;
 
   // Do not fade in the component if it's a message
-  ${({ asMessage }) =>
-    asMessage
-      ? undefined
-      : css`
-          animation: 0.2s ${fadeIn} ease-in;
-        `};
+  ${({ asMessage }) => {
+    if (asMessage) {
+      return undefined;
+    }
+    return css`
+      animation: 0.2s ${fadeIn} ease-in;
+    `;
+  }}
 
   &:not(:first-child) {
     margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
@@ -93,12 +98,15 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
     hasShadow,
     flat,
     minimal,
+    opaque,
   }: IReqoreNotificationStyle) => css`
     background-color: ${minimal
       ? 'transparent'
+      : opaque
+      ? changeLightness(theme.main, 0.1)
       : rgba(getNotificationIntent(theme, intent || type), 0.3)};
     border: ${flat ? 0 : '1px solid'};
-    border-color: ${getNotificationIntent(theme, intent || type)};
+    border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
 
     ${hasShadow &&
     css`
@@ -113,13 +121,13 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
         display: block;
         top: 0;
         height: 3px;
-        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
+        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
         animation-name: ${timeoutAnimation};
         animation-duration: ${timeout}ms;
       }
     `}
 
-    color: ${getReadableColor(theme, null, null, true, theme.originalMain)};
+    color: ${getReadableColor(theme, null, null, true, !opaque ? theme.originalMain : undefined)};
 
     ${clickable &&
     css`
@@ -129,7 +137,7 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
           getNotificationIntent(theme, intent || type),
           minimal ? 0.2 : 0.5
         )};
-        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
+        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.25)};
       }
     `}
   `}
@@ -218,6 +226,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       onFinish,
       flat,
       minimal,
+      opaque,
       size = 'normal',
     },
     ref: any
@@ -273,6 +282,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             ref={ref}
             style={styles}
             size={size}
+            opaque={opaque}
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -8,14 +8,14 @@ import {
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   TEXT_FROM_SIZE,
-  TSizes,
+  TSizes
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
   changeDarkness,
   changeLightness,
   getMainBackgroundColor,
-  getReadableColor,
+  getReadableColor
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -26,7 +26,7 @@ import {
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
   IWithReqoreSize,
-  IWithReqoreTooltip,
+  IWithReqoreTooltip
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
@@ -86,6 +86,7 @@ export interface IReqorePanelProps
   contentSize?: TSizes;
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
+  transparent?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -133,7 +134,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
               : `${rgba(
                   changeLightness(
                     intent ? theme.intents[intent] : getMainBackgroundColor(theme),
-                    0.3
+                    0.25
                   ),
                   opacity
                 )}`};
@@ -417,6 +418,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       return newContentEffect;
     }, [intent, theme, contentEffect, interactive]);
 
+    const opacity = rest.transparent ? 0 : rest.opacity;
+
     return (
       <StyledPanel
         {...rest}
@@ -430,6 +433,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         interactive={interactive}
         theme={theme}
         effect={transformedContentEffect}
+        opacity={opacity}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -440,8 +444,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             onClick={handleCollapseClick}
             theme={theme}
             contentSize={contentSize}
-            opacity={rest.opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={rest.opacity === 0}
+            opacity={opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={opacity === 0}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -509,7 +513,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
-            noHorizontalPadding={rest.opacity === 0}
+            noHorizontalPadding={opacity === 0}
           >
             {children}
           </StyledPanelContent>
@@ -519,8 +523,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             flat={flat}
             className='reqore-panel-bottom-actions'
             theme={theme}
-            opacity={rest.opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={rest.opacity === 0}
+            opacity={opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={opacity === 0}
           >
             <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
             <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>

package/src/components/RadioGroup/index.tsx

@@ -1,15 +1,18 @@
-import React from "react";
-import styled from "styled-components";
-import { ReqoreCheckbox } from "../..";
-import { TSizes } from "../../constants/sizes";
-import { IReqoreCheckboxProps } from "../Checkbox";
+import React from 'react';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../..';
+import { TSizes } from '../../constants/sizes';
+import { IReqoreCheckboxProps } from '../Checkbox';
+import { IReqoreControlGroupProps } from '../ControlGroup';
+import ReqoreMenuDivider from '../Menu/divider';
 
 export interface IReqoreRadioGroupItem extends IReqoreCheckboxProps {
-  value: string;
+  value?: string;
+  divider?: boolean;
 }
 
 export interface IReqoreRadioGroupProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends Omit<IReqoreControlGroupProps, 'children'>,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   items: IReqoreRadioGroupItem[];
   selected?: string;
   onSelectClick?: (value: string) => void;
@@ -18,11 +21,6 @@ export interface IReqoreRadioGroupProps
   asSwitch?: boolean;
 }
 
-const StyledRadioGroup = styled.div`
-  display: flex;
-  flex-flow: column;
-`;
-
 const ReqoreRadioGroup = ({
   items = [],
   selected,
@@ -30,23 +28,34 @@ const ReqoreRadioGroup = ({
   size,
   disabled,
   asSwitch,
+  vertical = true,
   ...rest
 }: IReqoreRadioGroupProps) => (
-  <StyledRadioGroup {...rest}>
-    {items.map(({ value, ...itemRest }) => (
-      <ReqoreCheckbox
-        asSwitch={asSwitch}
-        {...itemRest}
-        key={value}
-        checked={value === selected}
-        size={size || itemRest.size}
-        disabled={disabled || itemRest.disabled}
-        onClick={() => {
-          onSelectClick(value);
-        }}
-      />
-    ))}
-  </StyledRadioGroup>
+  <ReqoreControlGroup {...rest} vertical={vertical}>
+    {items.map(({ value, divider, ...itemRest }) =>
+      divider ? (
+        <ReqoreMenuDivider
+          {...itemRest}
+          size={size || itemRest.size}
+          effect={{ ...itemRest.effect, textAlign: 'left' }}
+          margin='left'
+          label={vertical ? itemRest.label : undefined}
+        />
+      ) : (
+        <ReqoreCheckbox
+          asSwitch={asSwitch}
+          {...itemRest}
+          key={value}
+          checked={value === selected}
+          size={size || itemRest.size}
+          disabled={disabled || itemRest.disabled}
+          onClick={() => {
+            onSelectClick(value);
+          }}
+        />
+      )
+    )}
+  </ReqoreControlGroup>
 );
 
 export default ReqoreRadioGroup;

package/src/components/Tag/group.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { StyledTag } from '.';
-import { TSizes } from '../../constants/sizes';
+import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 
 export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
   children: any;
   size?: TSizes;
+  gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   hasBottomMargin?: boolean;
 }
@@ -15,7 +16,7 @@ const StyledTagGroup = styled.div`
 
   ${StyledTag} {
     &:not(:last-child) {
-      margin-right: 5px;
+      margin-right: ${({ gapSize }: IReqoreTagGroup) => `${GAP_FROM_SIZE[gapSize]}px`};
     }
 
     margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
@@ -25,6 +26,7 @@ const StyledTagGroup = styled.div`
 const ReqoreTagGroup = ({
   children,
   size,
+  gapSize = 'normal',
   className,
   columns,
   hasBottomMargin = true,
@@ -32,6 +34,7 @@ const ReqoreTagGroup = ({
 }: IReqoreTagGroup) => (
   <StyledTagGroup
     {...rest}
+    gapSize={gapSize}
     hasBottomMargin={hasBottomMargin}
     className={`${className || ''} reqore-tag-group`}
   >

package/src/constants/sizes.ts

@@ -107,6 +107,14 @@ export const RADIUS_FROM_SIZE = {
   huge: 9,
 };
 
+export const GAP_FROM_SIZE = {
+  tiny: 1,
+  small: 3,
+  normal: 5,
+  big: 18,
+  huge: 30,
+};
+
 export const ICON_FROM_HEADER_SIZE = {
   1: 23,
   2: 20,

package/src/helpers/colors.ts

@@ -1,5 +1,5 @@
 import { cloneDeep, merge } from 'lodash';
-import { darken, lighten, readableColor } from 'polished';
+import { darken, getLuminance, lighten, readableColor } from 'polished';
 import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -46,9 +46,7 @@ export const percentToHexAlpha = (p: number) => {
 };
 
 export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
-  const contrast = getColorByBgColor(mainColor);
-
-  return contrast === '#000000';
+  return getLuminance(mainColor) > 0.2;
 };
 
 export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (

package/src/hooks/usePopover.tsx

@@ -3,6 +3,13 @@ import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react'
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
 import PopoverContext from '../context/PopoverContext';
+import {
+  IReqoreIntent,
+  IWithReqoreEffect,
+  IWithReqoreFlat,
+  IWithReqoreMinimal,
+} from '../types/global';
+import { IReqoreIconName } from '../types/icons';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -18,7 +25,11 @@ const endEvents = {
   focus: null,
 };
 
-export interface IPopover {
+export interface IPopover
+  extends IReqoreIntent,
+    IWithReqoreMinimal,
+    IWithReqoreEffect,
+    IWithReqoreFlat {
   content?: JSX.Element | string | undefined;
   handler?: 'hover' | 'click' | 'focus' | 'hoverStay';
   placement?: Placement;
@@ -30,9 +41,11 @@ export interface IPopover {
   closeOnAnyClick?: boolean;
   delay?: number;
   blur?: number;
-  opaque?: boolean;
+  transparent?: boolean;
   maxWidth?: string;
   maxHeight?: string;
+  icon?: IReqoreIconName;
+  title?: string;
 }
 
 export interface IPopoverOptions extends IPopover {

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

@@ -2,7 +2,7 @@ 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 { MinimalArg, SizeArg, argManager } from '../utils/args';
+import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -10,6 +10,7 @@ export default {
   title: 'Components/Control Group',
   argTypes: {
     ...SizeArg,
+    ...GapSizeArg,
     ...MinimalArg(),
     ...createArg('stack', {
       name: 'Stack',
@@ -68,3 +69,8 @@ export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,
 };
+
+export const BigGapSize = Template.bind({});
+BigGapSize.args = {
+  gapSize: 'big',
+};

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreIconProps } from '../../components/Icon';
-import { ReqoreIcon } from '../../index';
+import { ReqoreIcon, ReqorePanel } from '../../index';
 
 export default {
   title: 'Components/Icon',
@@ -9,27 +9,104 @@ export default {
 export const Icon: Story<IReqoreIconProps> = () => {
   return (
     <>
-      <ReqoreIcon icon='AccountCircleLine' size='12px' />
-      <ReqoreIcon icon='4KFill' size='14px' />
-      <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' />
-      <ReqoreIcon icon='HotelFill' size='18px' />
-      <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' />
-      <h4> Margined </h4>
-      <ReqoreIcon icon='AccountCircleLine' />
-      No Margin
-      <div>
-        <ReqoreIcon icon='4KFill' margin='right' />
-        Right Margin
-      </div>
-      <div>
-        Left Margin
-        <ReqoreIcon icon='ArrowLeftCircleFill' margin='left' />
-      </div>
-      <div>
-        Both
-        <ReqoreIcon icon='HotelFill' margin='both' />
-        Sides
-      </div>
+      <ReqorePanel label='Basic' flat minimal>
+        <ReqoreIcon icon='AccountCircleLine' size='12px' margin='both' />
+        <ReqoreIcon icon='4KFill' size='14px' margin='both' />
+        <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
+        <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
+        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
+        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#291133' sepia margin='both' />
+        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0c7052' blur={1} margin='both' />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#700c57'
+          contrast={150}
+          margin='both'
+        />
+        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#d5be0f' grayscale margin='both' />
+        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0f5bd5' invert margin='both' />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#ffffff'
+          opacity={0.5}
+          margin='both'
+        />
+      </ReqorePanel>
+      <br />
+      <ReqorePanel label='Image' flat minimal>
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='20px'
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          rounded
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='30px'
+          sepia
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          blur={3}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='70px'
+          contrast={150}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          brightness={150}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          opacity={0.5}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          invert
+          margin='both'
+        />
+      </ReqorePanel>
+      <br />
+      <ReqorePanel label='Margined' flat minimal>
+        <ReqoreIcon icon='AccountCircleLine' />
+        No Margin
+        <div>
+          <ReqoreIcon icon='4KFill' margin='right' />
+          Right Margin
+        </div>
+        <div>
+          Left Margin
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='20px'
+            rounded
+            margin='left'
+          />
+        </div>
+        <div>
+          Both
+          <ReqoreIcon icon='HotelFill' margin='both' />
+          Sides
+        </div>
+      </ReqorePanel>
     </>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import ReqoreMessage, { IReqoreMessageProps } from '../../components/Message';
-import { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMessageProps>();
 
@@ -52,6 +52,12 @@ Minimal.args = {
   intent: 'danger',
 };
 
+export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
+Opaque.args = {
+  opaque: true,
+  intent: 'info',
+};
+
 export const CustomTheme: Story<IReqoreMessageProps> = Template.bind({});
 CustomTheme.args = {
   customTheme: {

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

@@ -162,9 +162,9 @@ NoLabel.args = {
   label: undefined,
 };
 
-export const Opaque: Story<IReqorePanelProps> = Template.bind({});
-Opaque.args = {
-  opacity: 0,
+export const Transparent: Story<IReqorePanelProps> = Template.bind({});
+Transparent.args = {
+  transparent: true,
 };
 
 export const Minimal: Story<IReqorePanelProps> = Template.bind({});