jamespot-react-components 1.0.3 → 1.0.65

package/src/components/JRCAppLeftColumn/JRCAppLeftColumn.stories.tsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import { JRCAppLeftColumn } from './JRCAppLeftColumn';
-import { Section, JRCAppLeftColumnProps } from './JRCAppLeftColumn.types';
-import { JRCTabPanel } from '../JRCTabs/JRCTabs';
-import { JRCAppContainer } from '../JRCAppContainer/JRCAppContainer';
-
-export default {
-    title: 'JRCAppLeftColumn',
-    component: JRCAppLeftColumn,
-};
-
-const sections: Section<any>[] = [
-    {
-        title: 'Section 1',
-        entries: [
-            {
-                key: '1',
-                icon: 'icon-fs-microsoft',
-                label: 'Menu 1',
-                attribute: 42,
-            },
-            {
-                key: '2',
-                icon: 'icon-fs-survey-date',
-                label: 'Menu 2',
-            },
-        ],
-    },
-    {
-        title: 'Section 2',
-        entries: [
-            {
-                key: '3',
-                label: 'Menu 3',
-                icon: 'icon-fs-favorite',
-            },
-            {
-                key: '4',
-                label: 'Menu 4',
-                icon: 'icon-fs-application',
-            },
-        ],
-    },
-];
-
-export const Simple = (args: JRCAppLeftColumnProps<any>) => {
-    const [activeItem, setActiveItem] = React.useState('1');
-
-    return (
-        <JRCAppContainer>
-            <JRCAppLeftColumn
-                sections={sections}
-                icon="icon-edit"
-                color="green"
-                title="Studio"
-                description="Créez et gérez vos propres applications métiers sans une seule ligne de code !"
-                activeItem={activeItem}
-                callback={(item: any) => setActiveItem(item)}
-            />
-            <JRCTabPanel active={activeItem === '1'}>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus est sed risus interdum, eu
-                accumsan est sagittis. Cras vel sem sit amet diam suscipit interdum nec id neque. Vestibulum non luctus
-                magna. Donec purus eros, maximus vel accumsan non, eleifend id ex. Morbi interdum vestibulum purus. Cras
-                nec dui sed est consequat ultrices. Donec finibus est id rhoncus suscipit. Nullam faucibus lectus quis
-                pretium venenatis. Cras vulputate velit eget ligula luctus, ac lacinia elit efficitur. Praesent non odio
-                ullamcorper, aliquet purus eu, mattis sapien. Curabitur quis nisi ac massa fermentum tristique. Aliquam
-                sit amet eleifend ligula. Phasellus eu elementum est, non pharetra purus. Sed euismod maximus nunc, at
-                pharetra est pharetra nec. Sed quis libero egestas nisi finibus commodo. Ut sagittis condimentum semper.
-                Integer arcu mi, rutrum sed nulla quis, rutrum euismod massa. Vestibulum semper, massa sed interdum
-                auctor, eros nisi dapibus felis, ac maximus nibh augue eu ex. Etiam in suscipit erat. Quisque aliquam
-                placerat sapien ut facilisis. Praesent tristique quam et dictum accumsan. Class aptent taciti sociosqu
-                ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eget arcu porta erat molestie
-                blandit. In hac habitasse platea dictumst. Fusce turpis enim, posuere in semper vel, luctus ac leo. Duis
-                vitae justo a ligula accumsan fringilla sed in odio. Praesent a urna molestie, tempus magna venenatis,
-                tincidunt leo. In sem velit, fringilla nec ipsum sed, interdum dapibus lectus. Duis ac lorem nunc. Fusce
-                in nibh metus. Vestibulum euismod semper blandit. Cras sit amet diam et erat varius luctus vel at quam.
-                Fusce rhoncus, augue vitae eleifend vehicula, ex metus vestibulum leo, in fringilla augue ex sit amet
-                metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis posuere dolor, ut //
-                scelerisque ex. Sed dictum nec dui non dictum. Curabitur viverra risus porttitor sodales tristique. //
-                Donec nunc erat, maximus et scelerisque eu, commodo consequat ligula. In dapibus nunc sit amet lorem //
-                malesuada, eu luctus velit pellentesque. Aliquam fringilla nibh nec accumsan ultricies. Nulla facilisi.
-                // Suspendisse ullamcorper nec libero et ullamcorper. In hac habitasse platea dictumst. Mauris
-                fermentum, // purus at faucibus luctus, diam risus fermentum tortor, sed fringilla tortor erat quis
-                nunc. Praesent id // metus vitae velit dignissim finibus. Fusce ullamcorper diam arcu, vitae volutpat
-                neque porta vitae. Sed // ut tempus dui, id pharetra erat. Fusce laoreet, massa sed efficitur commodo,
-                augue magna semper nisi, ut // dignissim quam dolor sagittis ligula. Nunc ut egestas nulla, nec suscipit
-                enim. Nunc lobortis nisl arcu, // at tincidunt ligula finibus id. Duis venenatis facilisis est. Ut in
-                pellentesque lectus. In hac // habitasse platea dictumst. Mauris ac mauris tempor, placerat erat vel,
-                laoreet nulla. Nullam fermentum // placerat neque. Quisque et pharetra massa. Vestibulum viverra neque
-                odio, non laoreet nulla aliquam eu. // Orci varius natoque penatibus et magnis dis parturient montes,
-                nascetur ridiculus mus. Aliquam venenatis // consectetur nibh at tristique. Maecenas ornare nulla sem,
-                eget laoreet velit imperdiet in. Aliquam erat // volutpat. Sed facilisis nisl ut ullamcorper malesuada.
-                Nullam consequat pharetra odio sit amet sagittis. // Donec ut dictum sapien. Phasellus vel accumsan
-                libero. Suspendisse convallis varius nulla, in porttitor // risus semper vitae. Class aptent taciti
-                sociosqu ad litora torquent per conubia nostra, per inceptos // himenaeos. Duis et eleifend enim.
-                Vestibulum sollicitudin justo ullamcorper nisi luctus hendrerit. // Curabitur sed sem lorem.
-                Pellentesque eu faucibus neque. Nam ut gravida massa. Cras ultricies a ex sed // luctus. Nulla ultrices
-                quis sapien ut dignissim. Ut pharetra ipsum id lectus rutrum, eu cursus sem // egestas. Fusce ut justo
-                tempus, scelerisque dui non, pulvinar risus. Quisque tincidunt ultricies // ultrices. Nam tincidunt orci
-                ut arcu auctor, sed placerat mi laoreet. Sed rhoncus sollicitudin lorem, id // vehicula ligula hendrerit
-                in. Proin condimentum, dolor id commodo blandit, mauris elit sollicitudin // ante, vitae accumsan nulla
-                quam in dolor. Pellentesque molestie sapien id risus rhoncus efficitur. // Nullam at mauris et augue
-                commodo pulvinar. Duis tempus orci vitae magna ultricies, vitae commodo leo // iaculis. Nunc vel turpis
-                malesuada, lacinia quam vel, iaculis neque. Etiam arcu nulla, lacinia ut nibh // eget, ultrices
-                malesuada mauris. Donec ac tristique turpis. Cras egestas arcu lacus, non fermentum ex // vulputate
-                eget. Pellentesque tincidunt suscipit leo, et gravida odio ullamcorper vel. Sed non luctus // arcu.
-                Maecenas dolor enim, porttitor quis molestie a, scelerisque non libero. Mauris sit amet aliquet //
-                tortor. Aliquam erat volutpat. Nam id vulputate nibh. Etiam condimentum sapien sit amet malesuada //
-                congue. Aliquam nec ullamcorper orci. Vivamus fermentum mauris eu eros fermentum scelerisque. Integer //
-                condimentum congue laoreet. Sed venenatis, justo cursus porta iaculis, risus ex facilisis augue, in //
-                placerat tortor purus eget dui. Morbi cursus lectus ut dapibus mollis. Quisque vel nunc non massa //
-                lacinia ultricies. Donec metus dui, varius at leo vel, laoreet viverra lorem. Aliquam blandit in nulla
-                // ut fringilla. Mauris quis volutpat odio. Nulla rhoncus auctor orci, tristique lobortis dolor
-                elementum // nec. In scelerisque tincidunt faucibus. Nam et justo vel mi pellentesque pellentesque eu
-                convallis enim. // In hac habitasse platea dictumst. Aliquam sollicitudin nibh at libero pellentesque
-                egestas. Proin vel // condimentum mi, non rhoncus purus. Fusce non libero metus. Nam tincidunt ultrices
-                imperdiet.
-            </JRCTabPanel>
-            <JRCTabPanel active={activeItem === '2'}>Menu 2</JRCTabPanel>
-            <JRCTabPanel active={activeItem === '3'}>Menu 3</JRCTabPanel>
-            <JRCTabPanel active={activeItem === '4'}>TEST MENU 1</JRCTabPanel>
-            <JRCTabPanel active={activeItem === '5'}>TEST Menu 2</JRCTabPanel>
-        </JRCAppContainer>
-    );
-};

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

@@ -1,122 +0,0 @@
-import { ItemButton } from '../JRCTabs/JRCTabs';
-import styled from 'styled-components';
-import { JRCH2 } from '../JRCTypo/JRCTypo';
-import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
-
-export const JRCAppLeftColumnWrapperTop = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-`;
-
-export const ColumnRelativeWrapper = styled.div<{ isMinimized: boolean }>`
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    min-width: ${(props) => (props.isMinimized ? '80px' : '300px')};
-    max-width: ${(props) => (props.isMinimized ? '80px' : '300px')};
-`;
-
-export const ColumnRelativeSticky = styled.div<{ isMinimized: boolean; isClosed: boolean }>`
-    display: flex;
-    position: sticky;
-    bottom: 0;
-    min-height: calc(var(--body-height) - 32px);
-    background: ${(props) => props.theme.color.grey0};
-    min-width: ${(props) => (props.isMinimized ? '80px' : '300px')};
-    overflow: ${(props) => (props.isClosed ? 'visible' : 'hidden')};
-`;
-
-export const ColumnRelativeTransition = styled.div<{ isMinimized: boolean }>`
-    display: flex;
-    flex-direction: row;
-    width: ${(props) => (props.isMinimized ? '0px' : '380px')};
-    margin-left: ${(props) => (props.isMinimized ? '0px' : '-80px')};
-    transition: all 0.4s;
-`;
-
-export const ColumnAppDefault = styled.div<{ isMinimized: boolean; isClosed: boolean }>`
-    display: ${(props) => (props.isClosed ? 'none' : 'flex')};
-    flex-direction: column;
-    gap: 32px;
-    display: ${(props) => (props.isClosed ? 'hidden' : 'visible')};
-    position: relative;
-    box-sizing: border-box;
-    min-width: 300px;
-    max-width: 300px;
-
-    padding: 35px;
-`;
-
-export const ColumnAppMinimize = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    min-width: 80px;
-    max-width: 80px;
-    box-sizing: border-box;
-
-    padding: 35px 18px;
-`;
-
-export const MenuWrapper = styled.div<{ isMinimized: boolean }>`
-    transition: ${(props) => (props.isMinimized ? 'opacity .6s .3s' : 'opacity .6s .8s')};
-    opacity: ${(props) => (props.isMinimized ? '0' : '1')};
-`;
-
-export const ItemsIcon = styled(ItemButton)`
-    display: flex;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    background-color: ${(props) => props.theme.color.grey0};
-    transition: 0.3s;
-    &:hover,
-    &:focus-within {
-        background-color: ${(props) => props.theme.color.grey0};
-        color: ${(props) => props.theme.color.grey5};
-        margin-top: 10px;
-        margin-bottom: 10px;
-        transform: scale(1.2);
-    }
-`;
-
-export const TitleMenu = styled(JRCH2)`
-    font-weight: ${(props) => props.theme.font.weight.medium};
-    font-size: 12px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-`;
-
-export const JRCIconButtonAppLeftColumn = styled(JRCIconButton)`
-    background-color: ${(props) => props.theme.color.grey0};
-    transition: 0.3s;
-    &:hover,
-    :focus {
-        box-shadow: 2px 2px 4px 0px ${(props) => props.theme.color.grey3};
-        background-color: ${(props) => props.theme.color.white};
-    }
-`;
-
-export const AppLeftColumnIconWrapper = styled.ul<{ isMinimized: boolean }>`
-    list-style-type: none;
-    margin-top: 32px;
-    transition: ${(props) => (props.isMinimized ? 'opacity .6s' : 'opacity .6s .3s')};
-    opacity: ${(props) => (props.isMinimized ? '1' : '0')};
-`;
-
-export const AbsoluteContainer = styled.div`
-    position: absolute;
-    right: 8px;
-    margin: auto;
-`;
-export const AbsoluteContainerMinimized = styled.div<{ isMinimized: boolean }>`
-    position: absolute;
-    top: 43px;
-    right: -8px;
-    transition: all 0.4s;
-    opacity: ${(props) => (props.isMinimized ? '1' : '0')};
-`;
-export const SectionMinimizesWrapper = styled.div`
-    margin-bottom: 20px;
-`;

package/src/components/JRCAppLeftColumn/JRCAppLeftColumn.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { JRCAppLeftColumnProps, SectionEntry } from './JRCAppLeftColumn.types';
-import {
-    MenuWrapper,
-    TitleMenu,
-    JRCIconButtonAppLeftColumn,
-    AppLeftColumnIconWrapper,
-    AbsoluteContainer,
-    AbsoluteContainerMinimized,
-    SectionMinimizesWrapper,
-    ColumnAppDefault,
-    ColumnAppMinimize,
-    ColumnRelativeWrapper,
-    ColumnRelativeSticky,
-    ColumnRelativeTransition,
-} from './JRCAppLeftColumn.styles';
-import { JRCAppHeader } from '../JRCAppHeader/JRCAppHeader';
-import { JRCAppLeftColumnWrapperTop } from './JRCAppLeftColumn.styles';
-import { JRCTabs } from '../JRCTabs/JRCTabs';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import { useIntl } from 'react-intl';
-import { JRCDefaultMenu } from './JRCDefaultMenu';
-
-/**
- * /!\ This component should be use into JRCAppContainer
- * @param Component
- * @param {sections, icon, color, title, description, activeItem, callback} props, @see JRCAppLeftColumnProps interface
- * @returns JSX.Element
- */
-
-const JRCAppLeftColumn = <T extends SectionEntry>({
-    Component = JRCDefaultMenu,
-    ...props
-}: JRCAppLeftColumnProps<T>) => {
-    const clickOnItem = (index: string): void => {
-        if (props.callback) props.callback(index);
-    };
-    const [isMinimized, setMinimized] = React.useState(false);
-    const [isClosed, setClosed] = React.useState(false);
-    const intl = useIntl();
-
-    const onClick = () => {
-        if (!isMinimized) {
-            setMinimized(true);
-            setTimeout(() => {
-                setClosed(true);
-            }, 400);
-        } else {
-            setClosed(false);
-            setMinimized(false);
-        }
-    };
-
-    return (
-        <ColumnRelativeWrapper isMinimized={isMinimized}>
-            <ColumnRelativeSticky isMinimized={isMinimized} isClosed={isClosed}>
-                <ColumnRelativeTransition isMinimized={isMinimized}>
-                    <ColumnAppMinimize aria-hidden={!isMinimized}>
-                        <AbsoluteContainerMinimized isMinimized={isMinimized}>
-                            <JRCIconButtonAppLeftColumn
-                                icon="icon-angle-right"
-                                type="button"
-                                size="small"
-                                onClick={onClick}
-                                aria-label={intl.formatMessage({ id: 'AppLeftColumn_Open_Panel' })}
-                                data-cy="open-panel-button"
-                            />
-                        </AbsoluteContainerMinimized>
-                        <JRCIcon name={props.icon} variant="circle" color={props.color} size={40} />
-                        <nav aria-label={intl.formatMessage({ id: 'AppLeftColumn_App_Navigation' })}>
-                            <AppLeftColumnIconWrapper isMinimized={isMinimized}>
-                                {props.sections &&
-                                    props.sections.map((item, i) => (
-                                        <SectionMinimizesWrapper key={i}>
-                                            {item.entries.map((entry, k) => (
-                                                <Component
-                                                    key={k}
-                                                    entry={entry}
-                                                    isMinimized={true}
-                                                    activeItem={props.activeItem}
-                                                    onClick={() => clickOnItem(entry.key)}
-                                                />
-                                            ))}
-                                        </SectionMinimizesWrapper>
-                                    ))}
-                            </AppLeftColumnIconWrapper>
-                        </nav>
-                    </ColumnAppMinimize>
-                    <ColumnAppDefault aria-hidden={isMinimized} isMinimized={isMinimized} isClosed={isClosed}>
-                        <JRCAppLeftColumnWrapperTop>
-                            <JRCAppHeader {...props}></JRCAppHeader>
-                            <AbsoluteContainer>
-                                <JRCIconButtonAppLeftColumn
-                                    icon="icon-angle-left"
-                                    type="button"
-                                    onClick={onClick}
-                                    aria-label={intl.formatMessage({ id: 'AppLeftColumn_Close_Panel' })}
-                                    data-cy="close-panel-button"
-                                />
-                            </AbsoluteContainer>
-                        </JRCAppLeftColumnWrapperTop>
-                        {props.sections &&
-                            props.sections.map((section, index) => (
-                                <MenuWrapper key={index} isMinimized={isMinimized}>
-                                    <TitleMenu>{section.title}</TitleMenu>
-                                    <JRCTabs
-                                        direction="vertical"
-                                        callback={(key: string) => props.callback && props.callback(key)}
-                                        activeItem={props.activeItem}
-                                        entries={section.entries.map((entry) => ({
-                                            ...entry,
-                                            label: Component({
-                                                entry,
-                                                onClick: () => {
-                                                    /**/
-                                                },
-                                            }),
-                                        }))}
-                                    />
-                                </MenuWrapper>
-                            ))}
-                    </ColumnAppDefault>
-                </ColumnRelativeTransition>
-            </ColumnRelativeSticky>
-        </ColumnRelativeWrapper>
-    );
-};
-
-export { JRCAppLeftColumn };

package/src/components/JRCAppLeftColumn/JRCAppLeftColumn.types.tsx

@@ -1,61 +0,0 @@
-/**
- * Interface of each section item
- * @member title title of section
- * @member entries List item of menu
- */
-export interface Section<T> {
-    title: string;
-    entries: T[];
-}
-
-/**
- * Interface of elements for each item menu
- * @member key key of each item
- * @member icon element icon for item
- * @member label label of item
- * @member attribute attribut of item
- */
-export interface SectionEntry {
-    key: string;
-    icon: string;
-    label: string;
-    attribute?: string;
-}
-
-/**
- * Interface of menu props
- * @member entry List of Item props
- * @member isMinimized boolean if column left is minimized
- * @member activeItem optional index [0,items.length-1] of the defaultActive item when mounting
- * @member onClick tab selection handler
- */
-export interface MenuComponentProps<T> {
-    entry: T;
-    isMinimized?: boolean;
-    activeItem?: string;
-    onClick: (key: string) => void;
-}
-
-/**
- * Interface to provide JRCAppLeftColumn props
- * @member icon icon header for column left
- * @member color color of the icon
- * @member title title of the app on column left
- * @member description description of the app on column left
- * @member sections List of sections
- * @member isMinimized boolean if column left is minimized
- * @member activeItem optional index [0,items.length-1] of the defaultActive item when mounting
- * @member callback tab selection handler
- * @member Component element of each items menu.
- */
-export type JRCAppLeftColumnProps<T extends SectionEntry> = {
-    icon: string;
-    color: string;
-    title: string;
-    description: string;
-    sections?: Section<T>[];
-    isMinimized?: boolean;
-    activeItem?: string;
-    callback?: (key: string) => void;
-    Component?: (props: MenuComponentProps<T>) => React.ReactElement;
-};

package/src/components/JRCAppLeftColumn/JRCDefaultMenu.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { SectionEntry, MenuComponentProps } from './JRCAppLeftColumn.types';
-import { ItemsIcon } from './JRCAppLeftColumn.styles';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import { JRCMenuItem } from 'components/JRCMenuItem/JRCMenuItem';
-import { JRCTooltip } from '../JRCTooltip/JRCTooltip';
-
-export const JRCDefaultMenu = <T extends SectionEntry>(props: MenuComponentProps<T>) => {
-    return (
-        <>
-            {props.isMinimized ? (
-                <ItemsIcon
-                    key={props.entry.key}
-                    isActive={props.activeItem == props.entry.key}
-                    aria-label={props.entry.label}
-                    onClick={() => props.onClick(props.entry.key)}>
-                    <JRCTooltip description={props.entry.label} position="right">
-                        <JRCIcon
-                            name={props.entry.icon}
-                            size={20}
-                            color={props.activeItem == props.entry.key ? 'overseas' : 'grey4'}
-                        />
-                    </JRCTooltip>
-                </ItemsIcon>
-            ) : (
-                <JRCMenuItem
-                    attr={props.entry.attribute}
-                    icon={props.entry.icon}
-                    label={props.entry.label}
-                    size={16}></JRCMenuItem>
-            )}
-        </>
-    );
-};

package/src/components/JRCAvatar/JRCAvatar.stories.tsx

@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as React from 'react';
-import JRCAvatar, { JRCAvatarProps } from './JRCAvatar';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'JRCAvatar',
-    component: JRCAvatar,
-} as Meta;
-
-const Template: Story<JRCAvatarProps> = (args) => (
-    <>
-        <JRCAvatar {...args} />
-        {/*
-  // @ts-ignore FIXME remove that when upgrading to typescript version > 4.2.x */}
-        <JRCAvatar {...args} subAvatar={{ alt: args.alt, type: args.type, recordId: args.recordId }} />
-    </>
-);
-
-export const Primary = Template.bind({});
-const args: JRCAvatarProps = {
-    size: 3,
-    variant: 'circle',
-    alt: 'Texte alternatif',
-    /*
-  // @ts-ignore FIXME remove that when upgrading to typescript version > 4.2.x */
-    type: 'user',
-    recordId: '1234',
-};
-Primary.args = args;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { renderWithWrapper } from 'utils/test-utils';
-import { screen } from '@testing-library/react';
-
-import JRCAvatar from './JRCAvatar';
-
-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" />);
-    });
-
-    test('medium avatar to have a proper size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('width', '24');
-        expect(screen.getByRole('img')).toHaveAttribute('height', '24');
-    });
-
-    test('medium avatar to download an img twice the container size', () => {
-        expect(screen.getByRole('img')).toHaveAttribute('src', '/imagecache/48x48/user/1234.png');
-    });
-});

package/src/components/JRCAvatar/JRCAvatar.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-import { JRCConditionalWrapper } from '../Common/JRCConditionalWrapper';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- * @property from - image base url (imagestatic | imagecache)
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size' | 'width' | 'height' | 'alt'> & {
-    uri?: string;
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size' | 'width' | 'height'>;
-    className?: string;
-    cssColor?: string;
-    alt?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-type ExtendedImgProps = {
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    width: number;
-    cssColor: string;
-};
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<ExtendedImgProps>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<ExtendedImgProps & { border: number }>`
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-    background-color: ${(props) => props.cssColor || 'transparent'};
-    vertical-align: middle;
-    & + img {
-        border: ${(props) => props.border}px solid white;
-        box-sizing: content-box;
-        margin-left: -${(props) => props.width / 2 + props.border}px;
-        margin-bottom: -${(props) => props.border}px;
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, from, format, alt, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <JRCConditionalWrapper
-            condition={!!props.subAvatar}
-            wrapper={(children) => <div className={className}>{children}</div>}>
-            <>
-                {React.createElement(Avatar, {
-                    ...otherProps,
-                    width: imgSize,
-                    height: imgSize,
-                    format: format,
-                    alt: alt,
-                    'aria-hidden': alt ? undefined : true,
-                    from: from ?? 'imagecache/',
-                } as any)}
-                {props.subAvatar &&
-                    React.createElement(Avatar, {
-                        ...subAvatar,
-                        from: subAvatar?.from || 'imagecache/',
-                        width: imgSize / 2,
-                        height: imgSize / 2,
-                    } as any)}
-            </>
-        </JRCConditionalWrapper>
-    );
-};
-
-export default JRCAvatar;