@qoretechnologies/reqore 0.40.4 → 0.40.5

package/src/components/Tag/group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -11,13 +11,32 @@ export interface IReqoreTagGroup
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   wrap?: boolean;
+  fluid?: boolean;
+  align?: 'left' | 'center' | 'right';
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: ${({ wrap }: IReqoreTagGroup) => (wrap ? 1 : 0)};
+  flex-grow: ${({ fluid }: IReqoreTagGroup) => (fluid ? 1 : undefined)};
   display: flex;
   flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
   gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
+
+  ${({ align }) => {
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+        justify-content: flex-end;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+        justify-content: center;
+      `;
+    }
+  }}
 `;
 
 const ReqoreTagGroup = ({

package/src/components/Tag/index.tsx

@@ -56,6 +56,7 @@ export interface IReqoreTagProps
     IWithReqoreEffect,
     IWithReqoreCustomTheme {
   fixed?: boolean | 'key' | 'label';
+  align?: 'left' | 'right' | 'center';
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -105,6 +106,26 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${({ align }) => {
+    if (align === 'left') {
+      return css`
+        margin-right: auto;
+      `;
+    }
+
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+      `;
+    }
+  }}
+
   ${InactiveIconScale};
 
   ${({ wrap, hasWidth }) =>

package/src/helpers/colors.ts

@@ -6,6 +6,8 @@ import {
   TReqoreEffectGradientColors,
   TReqoreEffectGradientColorsObject,
   TReqoreHexColor,
+  TReqoreMultiTypeColor,
+  TReqoreRgbaColor,
 } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -39,8 +41,9 @@ export const getReadableColorFrom = (
 ): TReqoreHexColor => {
   const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
   const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
+  const fixedColor = hexAToRGBA(from);
 
-  return readableColor(from, returnIfLight, returnIfDark, false) as TReqoreHexColor;
+  return readableColor(fixedColor, returnIfLight, returnIfDark, false) as TReqoreHexColor;
 };
 
 export const percentToHexAlpha = (p: number) => {
@@ -51,6 +54,22 @@ export const percentToHexAlpha = (p: number) => {
   return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
 };
 
+export const hexAToRGBA = (hex: TReqoreMultiTypeColor): TReqoreRgbaColor => {
+  // Check if this color is already in rgba format
+  if (hex.startsWith('rgb')) {
+    return hex as TReqoreRgbaColor;
+  }
+
+  const _hex = hex.length === 4 ? hex + hex.slice(1, 3) : hex;
+
+  const r = parseInt(_hex.slice(1, 3), 16);
+  const g = parseInt(_hex.slice(3, 5), 16);
+  const b = parseInt(_hex.slice(5, 7), 16);
+  const a = parseInt(_hex.slice(7, 9) || 'ff', 16) / 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+};
+
 export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
   if (isValidSixCharHex(rgba)) {
     return rgba as TReqoreHexColor;
@@ -68,8 +87,8 @@ export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
       .join('')) as TReqoreHexColor; // Puts the array to togehter to a string
 };
 
-export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
-  return getLuminance(mainColor) > 0.2;
+export const shouldDarken = (mainColor: TReqoreMultiTypeColor): boolean => {
+  return getLuminance(hexAToRGBA(mainColor)) > 0.2;
 };
 
 export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
@@ -80,19 +99,24 @@ export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHe
 //export const changeBasedOnContrast = (color: string, lightness?: number): string =>
 
 export const changeLightness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
   return lightness
-    ? shouldDarken(color)
-      ? (darken(lightness, color) as TReqoreHexColor)
-      : (lighten(lightness, color) as TReqoreHexColor)
+    ? shouldDarken(fixedColor)
+      ? (darken(lightness, fixedColor) as TReqoreHexColor)
+      : (lighten(lightness, fixedColor) as TReqoreHexColor)
     : color;
 };
 
-export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor =>
-  lightness
-    ? shouldDarken(color)
-      ? (lighten(lightness, color) as TReqoreHexColor)
-      : (darken(lightness, color) as TReqoreHexColor)
+export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
+  return lightness
+    ? shouldDarken(fixedColor)
+      ? (lighten(lightness, fixedColor) as TReqoreHexColor)
+      : (darken(lightness, fixedColor) as TReqoreHexColor)
     : color;
+};
 
 export const getColorByBgColor = (bgColor) => {
   if (!bgColor) {

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

@@ -111,17 +111,34 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid>
-          Fluid button
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[
+            1,
+            { label: 'in da middle', align: 'center' },
+            { label: 'right align', align: 'right' },
+            2,
+          ]}
+        >
+          Positioned badges
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[1, { label: 'right align', align: 'right' }, 2]}
+        >
+          Positioned badges
         </ReqoreButton>
       </ReqoreControlGroup>
+
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid textAlign='center'>
           Fluid button with centered text
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center'>
+        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center' badge='badge'>
           Fluid button with centered text & icons
         </ReqoreButton>
         <ReqoreButton
@@ -130,6 +147,7 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
           fluid
           textAlign='center'
           iconsAlign='center'
+          badge={[{ label: 'test', align: 'right' }, 2]}
         >
           Fluid button with centered text & icons
         </ReqoreButton>

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

@@ -107,6 +107,15 @@ export const Pending: Story = {
   },
 };
 
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    opaque: true,
+    intent: 'muted',
+  },
+};
+
 export const CustomTheme: Story = {
   render: Template,