@qoretechnologies/reqore 0.37.7 → 0.37.8

package/src/components/Effect/index.tsx

@@ -74,6 +74,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
+    opacity?: number;
   };
   interactive?: boolean;
 }
@@ -233,12 +234,15 @@ export const StyledEffect = styled.span`
       effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
     );
     const blur = effect.glow.blur || 0;
+    const opacity = effect.glow.opacity || 1;
 
     return css`
       color: ${Colors.LIGHT};
-      text-shadow: 0 0 ${blur}px ${color}, 0 0 ${blur + 5}px ${color}, 0 0 ${blur + 10}px ${color},
-        0 0 1px ${getReadableColorFrom(color)}, 0 0 2px ${getReadableColorFrom(color)},
-        0 0 3px ${getReadableColorFrom(color)};
+      text-shadow: 0 0 ${blur}px ${rgba(color, opacity)}, 0 0 ${blur + 5}px ${rgba(color, opacity)},
+        0 0 ${blur + 10}px ${rgba(color, opacity)},
+        0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
+        0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
+        0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
     `;
   }}
 

package/src/components/Icon/index.tsx

@@ -27,15 +27,16 @@ export interface IReqoreIconProps
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
+  rotation?: number;
   animation?: 'spin' | 'heartbeat';
 }
 
 const SpinKeyframes = keyframes`
   0% {
-    transform: rotate(0deg);
+    rotate: 0deg;
   }
   100% {
-    transform: rotate(360deg);
+    rotate: 360deg;
   }
 `;
 
@@ -49,6 +50,7 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
   overflow: hidden;
 
   border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
+  rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
 
   ${({ margin, size }) =>
     margin &&

package/src/components/Message/index.tsx

@@ -21,7 +21,7 @@ import {
 import { IReqoreIconName } from '../../types/icons';
 import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 import {
   StyledIconWrapper,
   StyledNotificationContent,
@@ -46,6 +46,7 @@ export interface IReqoreMessageProps
   children: any;
   icon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
+  iconProps?: IReqoreIconProps;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -81,6 +82,7 @@ const ReqoreMessage = memo(
         tooltip,
         fixed,
         fluid,
+        iconProps,
         ...rest
       },
       ref
@@ -159,6 +161,7 @@ const ReqoreMessage = memo(
                     iconColor={iconColor}
                     type={5}
                     iconMargin={flat && minimal ? 'right' : 'both'}
+                    iconProps={iconProps}
                   />
                 ) : (
                   <ReqoreIcon
@@ -166,6 +169,7 @@ const ReqoreMessage = memo(
                     margin={flat && minimal ? 'right' : 'both'}
                     size={size}
                     color={iconColor}
+                    {...iconProps}
                   />
                 )}
               </StyledIconWrapper>

package/src/components/Spinner/index.tsx

@@ -5,6 +5,7 @@ import { TReqoreIntent } from '../../constants/theme';
 import { IWithReqoreEffect } from '../../types/global';
 import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
+import { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreSpinnerProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
@@ -17,6 +18,7 @@ export interface IReqoreSpinnerProps
   labelEffect?: IReqoreEffect;
   iconMargin?: 'right' | 'left' | 'both';
   centered?: boolean;
+  iconProps?: IReqoreIconProps;
 }
 
 export const ReqoreSpinner = ({
@@ -29,6 +31,7 @@ export const ReqoreSpinner = ({
   effect,
   iconMargin,
   centered,
+  iconProps,
   ...rest
 }: IReqoreSpinnerProps) => {
   const renderContent = useCallback(() => {
@@ -41,6 +44,7 @@ export const ReqoreSpinner = ({
         animation='spin'
         className='reqore-spinner'
         margin={iconMargin || (children ? 'right' : undefined)}
+        {...iconProps}
       />
     );
   }, [size, intent, type, children, iconColor]);

package/src/components/Tag/index.tsx

@@ -38,7 +38,7 @@ import {
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
@@ -61,10 +61,12 @@ export interface IReqoreTagProps
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
+  leftIconProps?: IReqoreIconProps;
   rightIcon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
+  rightIconProps?: IReqoreIconProps;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -261,6 +263,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       iconColor,
       labelEffect,
       labelKeyEffect,
+      leftIconProps,
+      rightIconProps,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -323,6 +327,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || labelKey ? 'left' : 'both'}
                 color={leftIconColor || iconColor}
+                {...leftIconProps}
               />
             )}
             {labelKey && (
@@ -370,6 +375,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || (icon && !labelKey) ? 'right' : 'both'}
                 color={rightIconColor || iconColor}
+                {...rightIconProps}
               />
             )}
           </StyledTagContentWrapper>

package/src/stories/Button/Button.stories.tsx

@@ -139,6 +139,8 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
+          leftIconProps={{ rotation: 180 }}
+          rightIconProps={{ rotation: 270 }}
           description='This is a very interesting description for a button, I like it very much'
           iconColor='#38fdb2'
         >

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

@@ -63,6 +63,13 @@ export const Basic: Story = {
             effect={{ opacity: 0.5 }}
             margin='both'
           />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#8d2a5c'
+            rotation={90}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Image' flat minimal>
@@ -119,6 +126,12 @@ export const Basic: Story = {
             effect={{ saturate: 150 }}
             margin='both'
           />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            rotation={180}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Margined' flat minimal>