jamespot-react-components 1.0.0

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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,129 @@
+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';
+
+/**
+ *
+ * @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

@@ -0,0 +1,61 @@
+/**
+ * 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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,30 @@
+/* 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,91 @@
+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;