@groupeactual/ui-kit 0.4.13 → 0.4.15

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as react from 'react';
 import { FocusEventHandler, ChangeEventHandler, ReactNode, PropsWithChildren } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 interface Props$7 extends Omit<TypographyProps, 'variant'> {
     variant?: 'bigNumber' | 'body1Regular' | 'body1Medium' | 'body1Bold' | 'body2Regular' | 'body2Medium' | 'body2Bold' | 'caption' | 'buttonNotif' | 'header1' | 'header2' | 'header3' | 'header4';
@@ -58,12 +58,12 @@ interface Props$2 {
 declare const ActAccordion: ({ icon, title, content, summaryHeight }: Props$2) => JSX.Element;
 
 interface Props$1 {
-    variant?: 'roundedIcon' | 'smallRoundedIcon';
-    icon: IconProp;
+    variant?: 'square' | 'none';
+    icon: IconDefinition;
     color?: string;
-    size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
+    fontSize?: number;
 }
-declare const IconProvider: ({ variant, icon, color, size }: Props$1) => JSX.Element;
+declare const Icon: ({ variant, icon, color, fontSize }: Props$1) => JSX.Element;
 
 type Theme = 'Default' | 'Ep';
 interface DesignSystemContextValues {
@@ -77,4 +77,4 @@ interface Props {
 }
 declare const DesignSystemProvider: ({ children, name: themeName }: PropsWithChildren<Props>) => JSX.Element;
 
-export { ActAccordion as Accordion, Button, Checkbox, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, IconProvider, Link, Text, TextField };
+export { ActAccordion as Accordion, Button, Checkbox, DesignSystemContext, DesignSystemContextValues, DesignSystemProvider, Icon as IconProvider, Link, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -49,7 +49,8 @@
     "@emotion/is-prop-valid": "^1.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/fontawesome-common-types": "^6.3.0",
     "@groupeactual/design-tokens": "^0.3.0",
     "@mui/base": "^5.0.0-alpha.108",
     "@mui/material": "^5.10.16",

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -41,7 +41,7 @@ const Checkbox = ({
           <Box>
             <CheckboxMUI
               name={name}
-              sx={{ marginTop: -0.5 }}
+              sx={{ marginTop: '-2px' }}
               checked={internalValue}
               color="primary"
               onChange={(e) => {
@@ -57,6 +57,8 @@ const Checkbox = ({
             component="span"
             sx={{
               fontSize: '14px',
+              marginLeft: '-3px',
+              marginTop: '2px',
               fontWeight: 400,
               color: error ? '#B80025' : '#000'
             }}
@@ -68,7 +70,7 @@ const Checkbox = ({
       {error && (
         <Typography
           sx={{
-            marginTop: -1,
+            marginTop: -0.5,
             color: '#B80025',
             fontWeight: 400,
             fontSize: '10px'

package/src/components/Form/TextField/TextField.tsx

@@ -44,13 +44,14 @@ const TextField = ({
 
   return (
     <MuiTextField
+      id={label === placeholder ? 'text-field-mui' : 'test-field-ds'}
       variant="outlined"
       name={name}
       label={label}
       value={internalValue}
-      placeholder={placeholder}
+      placeholder={label === placeholder ? undefined : placeholder}
       FormHelperTextProps={{ component: 'div' } as any}
-      InputLabelProps={{ shrink: true }}
+      InputLabelProps={{ shrink: label === placeholder ? undefined : true }}
       onClick={(e) => e.stopPropagation()}
       onChange={(e) => {
         setInternalValue(e.currentTarget.value);

package/src/components/Icon/{IconProvider.tsx → Icon.tsx}

@@ -1,18 +1,19 @@
 import SvgIcon from '@mui/material/SvgIcon';
 import { forwardRef } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import Box from '@mui/material/Box';
+import { useTheme } from '@mui/system';
 interface Props {
-  variant?: 'roundedIcon' | 'smallRoundedIcon';
-  icon: IconProp;
+  variant?: 'square' | 'none';
+  icon: IconDefinition;
   color?: string;
-  size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
+  fontSize?: number;
 }
 
 interface FontAwesomeSvgIconProps {
   icon: any;
-  fontSize: string;
+  fontSize: number | undefined;
 }
 
 // eslint-disable-next-line react/display-name
@@ -27,7 +28,7 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
         ref={ref}
         viewBox={`0 0 ${width as string} ${height as string}`}
         sx={{
-          fontSize
+          fontSize: fontSize ?? '14px'
         }}
       >
         {typeof svgPathData === 'string' ? (
@@ -49,64 +50,40 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
   }
 );
 
-const IconProvider = ({ variant, icon, color, size }: Props) => {
-  const getFontSize = (): string => {
-    if (variant === 'roundedIcon') {
-      return '1.5rem';
-    }
-    if (variant === 'smallRoundedIcon') {
-      return '0.9rem';
-    }
-    switch (size) {
-      case 'xxs':
-        return '.8rem';
-      case 'xs':
-        return '1rem';
-      case 'm':
-        return '1.5rem';
-      case 'lg':
-        return '1.8rem';
-      case 'xl':
-        return '2.2rem';
-      case 'xxl':
-        return '4rem';
-      default:
-        return '1.2rem';
-    }
-  };
-
+const Icon = ({
+  variant = 'none',
+  icon,
+  color = '#136cac',
+  fontSize = 16
+}: Props) => {
   const getStyles = (): SxProps<Theme> => {
+    const theme = useTheme();
+    let defaultColor = theme.palette[color]
+      ? theme.palette[color]
+      : !color || color?.length === 0
+      ? '#136cac'
+      : color;
+
     switch (variant) {
-      case 'roundedIcon':
-        return {
-          color: 'actual.main',
-          backgroundColor: 'actual.light',
-          borderRadius: '100px',
-          overflow: 'visible',
-          height: 50,
-          width: 50,
-          display: 'flex',
-          fontSize: '1.5rem',
-          justifyContent: 'center',
-          alignItems: 'center'
-        };
-      case 'smallRoundedIcon':
+      case 'square':
         return {
-          color: 'actual.main',
-          backgroundColor: 'actual.light',
-          borderRadius: '100px',
+          color: defaultColor,
+          backgroundColor: `${defaultColor}14`,
+          borderRadius: '4px',
+          borderColor: '1px solid ' + defaultColor,
           overflow: 'visible',
-          height: 30,
-          width: 30,
+          padding: '10px',
+          width: fontSize,
+          height: fontSize,
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center'
         };
       default:
         return {
-          color: color ?? 'primary.main',
-          width: getFontSize(),
-          height: getFontSize(),
+          color: defaultColor,
+          width: fontSize,
+          height: fontSize,
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center'
@@ -115,9 +92,9 @@ const IconProvider = ({ variant, icon, color, size }: Props) => {
   };
   return (
     <Box component="span" sx={getStyles()}>
-      <FontAwesomeSvgIcon icon={icon} fontSize={getFontSize()} />
+      <FontAwesomeSvgIcon icon={icon} fontSize={fontSize} />
     </Box>
   );
 };
 
-export default IconProvider;
+export default Icon;

package/src/components/Icon/index.ts

@@ -1 +1 @@
-export { default } from './IconProvider';
+export { default } from './Icon';

package/src/components/Text/Text.tsx

@@ -18,6 +18,8 @@ interface Props extends Omit<TypographyProps, 'variant'> {
   component?: any;
 }
 
-const Text = (props: Props) => <Typography {...(props as TypographyProps)} />;
+const Text = (props: Props) => (
+  <Typography color="greyXDark" {...(props as TypographyProps)} />
+);
 
 export default Text;

package/src/components/index.ts

@@ -4,4 +4,4 @@ export { default as Button } from './Button';
 export { default as TextField } from './Form/TextField';
 export { default as Checkbox } from './Form/Checkbox';
 export { default as Accordion } from './Accordion';
-export { default as IconProvider } from './Icon/IconProvider';
+export { default as IconProvider } from './Icon/Icon';

package/dist/cjs/components/Icon/IconProvider.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-interface Props {
-    variant?: 'roundedIcon' | 'smallRoundedIcon';
-    icon: IconProp;
-    color?: string;
-    size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
-}
-declare const IconProvider: ({ variant, icon, color, size }: Props) => JSX.Element;
-export default IconProvider;

package/dist/esm/components/Icon/IconProvider.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-interface Props {
-    variant?: 'roundedIcon' | 'smallRoundedIcon';
-    icon: IconProp;
-    color?: string;
-    size?: 'xxs' | 'xs' | 'sm' | 'm' | 'lg' | 'xl' | 'xxl';
-}
-declare const IconProvider: ({ variant, icon, color, size }: Props) => JSX.Element;
-export default IconProvider;