jamespot-react-components 1.0.2 → 1.0.16

package/src/components/Form/Input/JRCFormSelect/JRCFormSelectTag.tsx

@@ -49,6 +49,7 @@ const JRCFormSelectTagRenderer = <T,>(
                         onMouseDown={props.removeProps.onMouseDown}
                         onClick={(e) => props.removeProps.onClick(e)}
                         focusable={true}
+                        clickVariant="delete"
                         isFocused={props.isFocused}
                         uri={props.data.uri}
                         label={getOptionLabel(props)}
@@ -60,7 +61,7 @@ const JRCFormSelectTagRenderer = <T,>(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 SingleValue: (props: SingleValueProps<OptionTypeBase>) => (
-                    <JRCTag uri={props.data.uri} label={getOptionLabel(props)} />
+                    <JRCTag uri={props.data.uri} label={getOptionLabel(props)} clickVariant="delete" />
                 ),
                 // FIXME TYPESCRIPT-STRICT
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,6 +89,7 @@ const Option = <isMulti extends boolean>(props: OptionProps<OptionTypeBase, isMu
                 <JRCTag
                     uri={props.data.uri}
                     focusable={true}
+                    clickVariant="select"
                     isFocused={props.isFocused}
                     label={getOptionLabel(props)}
                 />

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.stories.tsx

@@ -13,7 +13,7 @@ export default {
 const Template: Story<JRCInputCheckboxProps<any>> = (args) => {
     const { handleSubmit, control } = useForm({
         defaultValues: {
-            [args.name]: [],
+            checkbox: [],
         },
         criteriaMode: 'all',
     });
@@ -23,9 +23,6 @@ const Template: Story<JRCInputCheckboxProps<any>> = (args) => {
     };
 
     return (
-        // FIXME TYPESCRIPT-STRICT
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         <form onSubmit={handleSubmit(onSubmit)}>
             <JRCInputCheckbox {...args} control={control as any} />
             <input type="submit" />

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.tsx

@@ -12,12 +12,11 @@ import { deepEqual } from '../../../../utils/utils.object';
 import { DataCy } from '../../../../types/dataAttributes';
 import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { CheckboxValue } from './JRCInputCheckbox.types';
-
-type Value<T> = string | number | T;
+import { RefCallBack } from 'react-hook-form';
 
 type CheckboxOption<TFieldValues> = {
     label: string | JSX.Element;
-    value: Value<TFieldValues>;
+    value: string | number | TFieldValues;
     disabled?: boolean;
 };
 
@@ -35,18 +34,19 @@ export type CheckboxProps<TFieldValues> = DataCy & {
 };
 
 export type JRCInputCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> & JRCInputFieldProps<TFieldValues>;
+export type NativeCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> &
+    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] };
 
-function RenderInput<TFieldValues>({
-    variant = 'default',
-    ...props
-}: CheckboxProps<TFieldValues> &
-    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] }) {
+const RenderInput = React.forwardRef(function <TFieldValues>(
+    { variant = 'default', ...props }: NativeCheckboxProps<TFieldValues>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
     const field = {
         onChange: props.onChange,
         onBlur: props.onBlur,
         value: props.value,
         name: props.name,
-        ref: props.ref,
+        ref: ref as RefCallBack,
     };
 
     const [valueTypeIsBoolean, setValueTypeIsBoolean] = React.useState(
@@ -98,6 +98,7 @@ function RenderInput<TFieldValues>({
                         {props.checkboxMode === 'radio' ? (
                             <JRCRadio
                                 name={props.name}
+                                ref={(index === 0 && ref) || undefined}
                                 data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
                                 disabled={props.disabled || option.disabled}
                                 checked={checked}
@@ -109,6 +110,7 @@ function RenderInput<TFieldValues>({
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                 // @ts-ignore
                                 checkboxMode={props.checkboxMode}
+                                ref={(index === 0 && ref) || undefined}
                                 name={props.name}
                                 data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
                                 disabled={props.disabled || option.disabled}
@@ -147,7 +149,7 @@ function RenderInput<TFieldValues>({
             })}
         </DirectionContainer>
     );
-}
+}) as unknown as <T>(props: NativeCheckboxProps<T>) => JSX.Element;
 
 export function JRCInputCheckbox<TFieldValues>({
     name,

package/src/components/Form/Input/JRCInputDate/JRCInputDate.stories.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { JRCInputDate } from './JRCInputDate';
+import { useForm } from 'react-hook-form';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputDate,
+} as Meta;
+
+const Template: Story<JRCInputFieldProps<'date'>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            date: '',
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ date: string }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputDate {...args} name="date" control={control} />
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputDate = Template.bind({});
+InputDate.args = {
+    label: 'Date de création du groupe',
+    description:
+        "La date de création du groupe doit permettre en un clin d'oeil de connaitre la date de création du groupe",
+    helper: { description: "Ajouter une date cohérente ! L'année 218 n'est pas cohérente", title: 'Indication' },
+    rules: {
+        min: {
+            value: '2023-11-11',
+            message: 'La date doit être supérieur au 11/11/2023',
+        },
+        required: true,
+    },
+};

package/src/components/Form/Input/JRCInputDate/JRCInputDate.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyledInput } from '../JRCStyledInput';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { DataCy } from '../../../../types/dataAttributes';
+
+export type JRCInputDateProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+
+const RenderInput = React.forwardRef((props: JRCInputDateProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    return <StyledInput type="date" id={props.name} {...props} ref={ref} />;
+});
+
+/**
+ * Component used as a <input type="date"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export function JRCInputDate<T>(props: JRCInputFieldProps<T>) {
+    return (
+        <JRCFormFieldRenderer
+            {...props}
+            renderFunction={({ value, ...field }) => <RenderInput {...props} {...field} value={value as string} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCInputText/JRCInputText.tsx

@@ -4,9 +4,9 @@ import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
 import { DataCy } from '../../../../types/dataAttributes';
 
-export type InputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+export type JRCInputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
 
-const RenderInput = React.forwardRef((props: InputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+const RenderInput = React.forwardRef((props: JRCInputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
     return <StyledInput type="text" id={props.name} {...props} ref={ref} />;
 });
 

package/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { JRCInputTextarea } from './JRCInputTextarea';
+import { useForm } from 'react-hook-form';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputTextarea,
+} as Meta;
+
+const Template: Story<JRCInputFieldProps<'textarea'>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            textarea: '',
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ textarea: string }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <JRCInputTextarea {...args} name="textarea" control={control} />
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const InputTextarea = Template.bind({});
+InputTextarea.args = {
+    label: 'Nom de groupe',
+    description: "Le nom du groupe doit permettre en un clin d'oeil de connaitre le sujet du groupe",
+    placeholder: 'Présentations',
+    helper: { description: 'Ne faites pas commencer votre groupe par "Groupe de"', title: 'Indication' },
+    rules: {
+        maxLength: {
+            value: 25,
+            message:
+                'This is an example error. For instance, the text should not be written with more than 25 characters. This message is not the default one.',
+        },
+        minLength: 3,
+        required: true,
+    },
+};

package/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cssStyledInput } from '../JRCStyledInput';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { DataCy } from '../../../../types/dataAttributes';
+import styled from 'styled-components';
+
+export type JRCInputTextareaProps = DataCy & React.ComponentPropsWithoutRef<'textarea'>;
+
+export const StyledTextArea = styled.textarea`
+    ${cssStyledInput}
+    &&&& {
+        padding-top: 10px;
+        height: 140px;
+        resize: vertical;
+    }
+`;
+
+const RenderInput = React.forwardRef((props: JRCInputTextareaProps, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+    return <StyledTextArea id={props.name} {...props} ref={ref} />;
+});
+
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export function JRCInputTextarea<T>(props: JRCInputFieldProps<T>) {
+    return (
+        <JRCFormFieldRenderer
+            {...props}
+            renderFunction={({ value, ...field }) => <RenderInput {...props} {...field} value={value as string} />}
+        />
+    );
+}

package/src/components/Form/Input/JRCSelect/JRCInputSelect.tsx

@@ -56,7 +56,7 @@ export const Select = React.forwardRef(function <T>(
         if (menuRef.current && selectedOptionRef) scrollIntoView(menuRef.current, selectedOptionRef);
     }
 
-    // Hack to use .focus() outside of this component while beeing able to access the ref within this component
+    // Hack to use .focus() outside of this component while being able to access the ref within this component
     React.useImperativeHandle(
         ref,
         () =>

package/src/components/JRCAppContainer/JRCAppContainer.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+export const CONTAINER_PADDING = 32;
+
 const Container = styled.div`
     display: flex;
     max-width: 1600px;
     width: 100%;
     margin: auto;
-    gap: 16px;
-    padding: 16px;
+    gap: ${CONTAINER_PADDING}px;
+    padding: ${CONTAINER_PADDING}px;
+    background-color: ${(props) => props.theme.color.white};
+    min-height: calc(var(--body-height) - ${CONTAINER_PADDING * 2}px);
 `;
 
 export interface JRCAppContainerProps {

package/src/components/JRCAppLeftColumn/JRCAppLeftColumn.styles.tsx

@@ -2,6 +2,7 @@ import { ItemButton } from '../JRCTabs/JRCTabs';
 import styled from 'styled-components';
 import { JRCH2 } from '../JRCTypo/JRCTypo';
 import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
+import { CONTAINER_PADDING } from 'components/JRCAppContainer/JRCAppContainer';
 
 export const JRCAppLeftColumnWrapperTop = styled.div`
     display: flex;
@@ -21,7 +22,7 @@ export const ColumnRelativeSticky = styled.div<{ isMinimized: boolean; isClosed:
     display: flex;
     position: sticky;
     bottom: 0;
-    min-height: calc(var(--body-height) - 32px);
+    min-height: calc(var(--body-height) - ${CONTAINER_PADDING * 2}px);
     background: ${(props) => props.theme.color.grey0};
     min-width: ${(props) => (props.isMinimized ? '80px' : '300px')};
     overflow: ${(props) => (props.isClosed ? 'visible' : 'hidden')};

package/src/components/JRCAvatar/JRCAvatar.test.tsx

@@ -4,19 +4,23 @@ import { screen } from '@testing-library/react';
 
 import JRCAvatar from './JRCAvatar';
 
+const SIZE = 3;
+
 describe('JRCAvatar', () => {
     beforeEach(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore FIXME remove that when upgrading to typescript version > 4.2.x
-        renderWithWrapper(<JRCAvatar type="user" recordId="1234" size="3" alt="avatar of user John Doe" />);
+        renderWithWrapper(
+            <JRCAvatar type="user" recordId="1234" size={SIZE} alt="avatar of user John Doe" />,
+        );
     });
 
     test('medium avatar to have a proper size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('width', '24');
-        expect(screen.getByRole('img')).toHaveAttribute('height', '24');
+        const width = (8 * SIZE).toString();
+        expect(screen.getByRole('img')).toHaveAttribute('width', width);
+        expect(screen.getByRole('img')).toHaveAttribute('height', width);
     });
 
     test('medium avatar to download an img twice the container size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('src', '/imagecache/48x48/user/1234.png');
+        const width = (Math.ceil(window.devicePixelRatio) * 8 * SIZE).toString();
+        expect(screen.getByRole('img')).toHaveAttribute('src', `/imagecache/${width}x${width}/user/1234.png`);
     });
 });

package/src/components/JRCAvatar/JRCAvatar.tsx

@@ -71,6 +71,7 @@ const JRCAvatar = (props: JRCAvatarProps) => {
                     ...otherProps,
                     width: imgSize,
                     height: imgSize,
+                    size: `${imgSize * 2}x${imgSize * 2}`,
                     format: format,
                     alt: alt,
                     'aria-hidden': alt ? undefined : true,

package/src/components/JRCButton/JRCButton.stories.tsx

@@ -44,7 +44,7 @@ export const AllButtons = () => {
                 </JRCButton>
                 <JRCButton
                     onClick={action('button-click')}
-                    // icon="icon-check"
+                    icon="icon-check"
                     type="submit"
                     color="primary"
                     variant="contained">

package/src/components/JRCButton/JRCButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import JRCIcon, { JRCIconProps } from '../JRCIcon/JRCIcon';
 import styled from 'styled-components';
 import JRCLoader from 'components/JRCLoader/JRCLoader';
-import config, { ButtonType } from './JRCButtonConfig';
+import { BUTTON_CONFIG, ButtonType } from './JRCButtonConfig';
 import { ForwardedRef } from 'react';
 import { DataCy } from '../../types/dataAttributes';
 
@@ -39,7 +39,10 @@ export const transformColor = (color?: string): JRCIconProps['color'] => {
     }
 };
 
-const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
+/**
+ * Button styling. May be used as a <a> tag
+ */
+export const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps>`
     float: ${(props) => props.float};
     min-width: ${(props) => props.minWidth};
     display: inline-flex;
@@ -58,7 +61,10 @@ const Button = styled.button<{ themeButton: ButtonType; hasChildren: boolean } &
     box-sizing: border-box;
     border: 2px solid ${(props) => props.theme.color[props.themeButton.border]};
     transition: color 0.5s, background-color 0.5s, border 0.5s;
+    text-decoration: none;
     &:hover {
+        text-decoration: none;
+        color: ${(props) => props.theme.color[props.themeButton.color]};
         background-color: ${(props) => props.theme.color[props.themeButton.hover.background]};
         border-color: ${(props) => props.theme.color[props.themeButton.hover.border]};
     }
@@ -93,7 +99,7 @@ const JRCButton = React.forwardRef(
         ref: ForwardedRef<HTMLButtonElement>,
     ) => {
         const disabled = props.disabled || props.loader;
-        const themeButton = config[variant][disabled ? 'disabled' : color];
+        const themeButton = BUTTON_CONFIG[variant][disabled ? 'disabled' : color];
 
         return (
             <Button

package/src/components/JRCButton/JRCButtonConfig.tsx

@@ -1,4 +1,4 @@
-export default {
+export const BUTTON_CONFIG = {
     contained: {
         primary: {
             color: 'white',

package/src/components/JRCButton/JRCValidationButton.tsx

@@ -13,7 +13,7 @@ export type JRCValidationButtonProps = JRCButtonProps & {
     validationMessage?: string;
 };
 
-/** double click prevented by using a temporary state, changed after a timeout */
+/** double click prevented by using a temporary state (PREVENT_DB_CLICK), changed after a timeout */
 const state = {
     NOT_CLICKED: 'NOT_CLICKED',
     PREVENT_DB_CLICK: 'PREVENT_DB_CLICK',
@@ -44,14 +44,20 @@ export const JRCValidationButton = ({
 
     React.useEffect(() => {
         if (validation === state.PREVENT_DB_CLICK) {
-            setTimeoutId(setTimeout(() => setValidation(state.NOT_CLICKED), RESET_CLICK_DELAY) as unknown as number);
+            setTimeoutId(
+                setTimeout(() => {
+                    setValidation(state.NOT_CLICKED);
+                    buttonRef?.current?.removeAttribute('style');
+                }, RESET_CLICK_DELAY) as unknown as number,
+            );
         }
     }, [validation]);
 
     const validationOnClick = React.useCallback(
         (e: React.MouseEvent<HTMLButtonElement>) => {
             if (validationRef.current === state.CLICKED) {
-                setValidation(state.NOT_CLICKED);
+                // Timeout of 0 second to delay the change at the end of the execution pile
+                setTimeout(() => setValidation(state.NOT_CLICKED), 0);
                 buttonRef?.current?.removeAttribute('style');
                 onClick && onClick(e);
                 if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
@@ -69,7 +75,7 @@ export const JRCValidationButton = ({
     return (
         <JRCButton
             {...props}
-            type={validation === state.NOT_CLICKED ? 'button' : props.type}
+            type={validation === state.CLICKED ? props.type : 'button'}
             ref={buttonRef}
             onClick={validationOnClick}
             icon={validation === state.NOT_CLICKED ? icon : 'icon-fs-question'}

package/src/components/JRCButton/__snapshots__/JRCButton.test.tsx.snap

@@ -3,8 +3,7 @@
 exports[`JRCButton match snapshot 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkPtRN kttjSS"
-    color="primary"
+    class="sc-jRQBWg LNyd"
     type="button"
   >
     I'm a text

package/src/components/JRCButtonDropdown/JRCButtonDropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import JRCButton, { transformColor } from '../JRCButton/JRCButton';
-import config, { ButtonType } from '../JRCButton/JRCButtonConfig';
+import { BUTTON_CONFIG, ButtonType } from '../JRCButton/JRCButtonConfig';
 import JRCIcon from '../JRCIcon/JRCIcon';
 import { ClickAwayListener } from '../Form/Common/ClickAwayListener';
 
@@ -120,7 +120,7 @@ export const JRCButtonDropdown = ({
     variant = 'contained',
     ...props
 }: JRCButtonDropdownProps) => {
-    const color = config[variant][props.disabled ? 'disabled' : props.color || 'primary'];
+    const color = BUTTON_CONFIG[variant][props.disabled ? 'disabled' : props.color || 'primary'];
     const [isOpen, setOpenMenu] = React.useState(false);
     const open = isOpen;
     const IconRight = ({ color }: any) => {

package/src/components/JRCEllipsis/JRCEllipsis.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { JRCEllipsis, JRCEllipsisProps } from './JRCEllipsis';
+
+export default {
+    title: 'JRCEllipsis',
+    component: JRCEllipsis,
+} as Meta;
+
+const Template: Story<JRCEllipsisProps> = (args) => {
+    return <JRCEllipsis {...args} />;
+};
+
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+    label: "Je suis un texte trop long ! Ca marche avec un caractère double tel que : 👋 ! C'est génial !",
+    length: 75,
+};

package/src/components/JRCEllipsis/JRCEllipsis.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
+import JRCTooltip from '../JRCTooltip/JRCTooltip';
+
+export type JRCEllipsisProps = {
+    label?: string;
+    length: number;
+};
+
+export const JRCEllipsis = ({ label, length }: JRCEllipsisProps) => {
+    if (!label) return <></>;
+
+    const labelArr = [...label];
+
+    return (
+        <JRCConditionalWrapper
+            condition={labelArr.length > length}
+            wrapper={() => <JRCTooltip description={label}>{labelArr.slice(0, length).join('')}…</JRCTooltip>}>
+            <>{label}</>
+        </JRCConditionalWrapper>
+    );
+};

package/src/components/JRCHref/JRCHref.stories.tsx

@@ -5,6 +5,7 @@ import { Meta, Story } from '@storybook/react';
 
 export default {
     title: 'JRCHref',
+    component: JRCStyledHref,
 } as Meta;
 
 const Template: Story<JRCStyledHrefProps> = (args) => <JRCStyledHref {...args}>{args.children}</JRCStyledHref>;
@@ -14,6 +15,7 @@ Default.args = {
     children: 'Hello',
     href: '#',
     dataCy: 'link-to-the-main-content',
+    as: 'a',
 };
 
 const UserTemplate: Story<JRCLinkToProps> = (args) => <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>;

package/src/components/JRCHref/JRCHref.tsx

@@ -1,40 +1,67 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { DataCy } from '../../types/dataAttributes';
+import { Button } from '../JRCButton/JRCButton';
+import { BUTTON_CONFIG } from '../JRCButton/JRCButtonConfig';
 
 /**
  * Props type for JRCLinkToArticle and JRCLinkToUser
- * @member id number : id of the record
- * @member href string : href for href
- * @member children: enclosed React component
+ * @member idObject number : id of the record
  */
-export interface JRCLinkToProps extends JRCStyledHrefProps {
-    idObject?: number;
-    href?: string;
-    children: React.ReactNode;
-}
+export type JRCLinkToProps = DataCy &
+    React.ComponentPropsWithoutRef<'a'> & {
+        idObject?: number;
+    };
+
+type AnchorProps = {
+    as?: 'a';
+};
+
+type ButtonProps = {
+    variant?: 'contained' | 'outlined';
+    color?: 'primary' | 'valid' | 'danger' | 'secondary';
+    float?: 'left' | 'right';
+    children?: React.ReactNode;
+} & {
+    as: 'button';
+};
 
 /**
  * Props type for JRCStyledHref
- * @see HTML.a default props
+ * @member as render the link styled as a button
  */
-export type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'>;
+export type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'> & (AnchorProps | ButtonProps);
 
-export const JRCStyledHref = styled.a.attrs<JRCStyledHrefProps>(({ dataCy, ...props }) => ({
+const Href = styled.a.attrs<DataCy>(({ dataCy, ...props }) => ({
     'data-cy': dataCy,
     ...props,
 }))`
     color: ${(props) => props.theme.font.hrefColor};
 `;
 
+export const JRCStyledHref = (props: JRCStyledHrefProps) => {
+    if (props.as === 'button') {
+        const { color = 'primary', variant = 'contained', ...restProps } = props;
+        const themeButton = BUTTON_CONFIG[variant][color];
+
+        return (
+            <Button {...(restProps as any)} hasChildren={!!props.children} themeButton={themeButton} as="a">
+                {props.children}
+            </Button>
+        );
+    }
+
+    return <Href {...props} />;
+};
+
 export const JRCLinkToArticle = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
-    <JRCStyledHref href={href ? href : `/article/${idObject}`} {...props}>
+    <Href href={href ? href : `/article/${idObject}`} {...props}>
         {children}
-    </JRCStyledHref>
+    </Href>
 );
 
 export const JRCLinkToUser = ({ idObject, href, children, ...props }: JRCLinkToProps) => (
-    <JRCStyledHref href={href ? href : `/user/${idObject}`} {...props}>
+    <Href href={href ? href : `/user/${idObject}`} {...props}>
         {children}
-    </JRCStyledHref>
+    </Href>
 );