jamespot-react-components 1.0.16 → 1.0.67

package/.history/src/components/JRCIconButton/JRCIconButton_20211102105335.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import {JRCTooltipProps} from "../JRCTooltip/JRCTooltip";
-import {ConditionalWrapper} from "../Common/ConditionalWrapper";
-import {JRCTooltip} from "../../index";
-
-const Button = styled.button.attrs((props: JRCIconButtonProps) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${props => config[props.size].size};
-    height: ${props => config[props.size].size};
-    border-radius: ${props => config[props.size].borderRadius};
-    cursor: ${props => props.disabled ? "default" : "pointer"};
-    :hover, :focus-visible {
-        ${props => !props.disabled && `background-color: ${props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: "24px",
-        borderRadius: "4px",
-        iconSize: "small",
-        focusBorderRadius: "3px"
-    },
-    medium: {
-        size: "40px",
-        borderRadius: "8px",
-        iconSize: "medium",
-        focusBorderRadius: "6px"
-    }
-}
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- */
-export interface JRCIconButtonProps {
-    icon: string;
-    size?: "small" | "medium"
-    onClick?: () => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, "children">;
-}
-
-const defaultProps = {
-    onClick: () => ({}),
-    size: 'medium'
-}
-
-const JRCIconButton = (props: JRCIconButtonProps) => {
-    return (
-        <ConditionalWrapper condition={!!props.tooltip} wrapper={(children) => (
-            <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>
-        )}>
-            <Button {...props}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize as "small" | "medium"}
-                    color={props.color ? props.color : props.disabled ? "grey1" : "grey3"}
-                />
-            </Button>
-        </ConditionalWrapper>
-    )
-}
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/.history/src/components/JRCIconButton/JRCIconButton_20211103141204.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
-import { ConditionalWrapper } from '../Common/ConditionalWrapper';
-import { JRCTooltip } from '../../index';
-
-const Button = styled.button.attrs((props: JRCIconButtonProps) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius,
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => config[props.size].size};
-    height: ${(props) => config[props.size].size};
-    border-radius: ${(props) => config[props.size].borderRadius};
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-    :hover,
-    :focus-visible {
-        ${(props) =>
-            !props.disabled && `background-color: ${props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: '24px',
-        borderRadius: '4px',
-        iconSize: 'small',
-        focusBorderRadius: '3px',
-    },
-    medium: {
-        size: '40px',
-        borderRadius: '8px',
-        iconSize: 'medium',
-        focusBorderRadius: '6px',
-    },
-};
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- */
-export interface JRCIconButtonProps {
-    icon: string;
-    size?: 'small' | 'medium';
-    onClick?: (event?: Event) => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, 'children'>;
-}
-
-const defaultProps = {
-    onClick: () => ({}),
-    size: 'medium',
-};
-
-const JRCIconButton = (props: JRCIconButtonProps) => {
-    return (
-        <ConditionalWrapper
-            condition={!!props.tooltip}
-            wrapper={(children) => (
-                <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>
-            )}
-        >
-            <Button {...props}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize as 'small' | 'medium'}
-                    color={
-                        props.color
-                            ? props.color
-                            : props.disabled
-                            ? 'grey1'
-                            : 'grey3'
-                    }
-                />
-            </Button>
-        </ConditionalWrapper>
-    );
-};
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/.history/src/components/JRCIconButton/JRCIconButton_20211103141514.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
-import { ConditionalWrapper } from '../Common/ConditionalWrapper';
-import { JRCTooltip } from '../../index';
-
-const Button = styled.button.attrs((props: JRCIconButtonProps) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius,
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => config[props.size].size};
-    height: ${(props) => config[props.size].size};
-    border-radius: ${(props) => config[props.size].borderRadius};
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-    :hover,
-    :focus-visible {
-        ${(props) =>
-            !props.disabled && `background-color: ${props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: '24px',
-        borderRadius: '4px',
-        iconSize: 'small',
-        focusBorderRadius: '3px',
-    },
-    medium: {
-        size: '40px',
-        borderRadius: '8px',
-        iconSize: 'medium',
-        focusBorderRadius: '6px',
-    },
-};
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- */
-export interface JRCIconButtonProps {
-    icon: string;
-    size?: 'small' | 'medium';
-    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, 'children'>;
-}
-
-const defaultProps = {
-    onClick: () => ({}),
-    size: 'medium',
-};
-
-const JRCIconButton = (props: JRCIconButtonProps) => {
-    return (
-        <ConditionalWrapper
-            condition={!!props.tooltip}
-            wrapper={(children) => (
-                <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>
-            )}
-        >
-            <Button {...props}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize as 'small' | 'medium'}
-                    color={
-                        props.color
-                            ? props.color
-                            : props.disabled
-                            ? 'grey1'
-                            : 'grey3'
-                    }
-                />
-            </Button>
-        </ConditionalWrapper>
-    );
-};
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/.history/src/components/JRCIconButton/JRCIconButton_20211103141535.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
-import { ConditionalWrapper } from '../Common/ConditionalWrapper';
-import { JRCTooltip } from '../../index';
-
-const Button = styled.button.attrs((props: JRCIconButtonProps) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius,
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => config[props.size].size};
-    height: ${(props) => config[props.size].size};
-    border-radius: ${(props) => config[props.size].borderRadius};
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-    :hover,
-    :focus-visible {
-        ${(props) =>
-            !props.disabled && `background-color: ${props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: '24px',
-        borderRadius: '4px',
-        iconSize: 'small',
-        focusBorderRadius: '3px',
-    },
-    medium: {
-        size: '40px',
-        borderRadius: '8px',
-        iconSize: 'medium',
-        focusBorderRadius: '6px',
-    },
-};
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- */
-export interface JRCIconButtonProps {
-    icon: string;
-    size?: 'small' | 'medium';
-    onClick?: (event?: Event) => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, 'children'>;
-}
-
-const defaultProps = {
-    onClick: () => ({}),
-    size: 'medium',
-};
-
-const JRCIconButton = (props: JRCIconButtonProps) => {
-    return (
-        <ConditionalWrapper
-            condition={!!props.tooltip}
-            wrapper={(children) => (
-                <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>
-            )}
-        >
-            <Button {...props}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize as 'small' | 'medium'}
-                    color={
-                        props.color
-                            ? props.color
-                            : props.disabled
-                            ? 'grey1'
-                            : 'grey3'
-                    }
-                />
-            </Button>
-        </ConditionalWrapper>
-    );
-};
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/.history/src/components/JRCIconButton/JRCIconButton_20211103141607.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import JRCIcon from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import { DashedFocusBorder } from 'components/Common/DashedFocusBorder';
-import { Colors, Shades } from 'styles/theme';
-import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
-import { ConditionalWrapper } from '../Common/ConditionalWrapper';
-import { JRCTooltip } from '../../index';
-
-const Button = styled.button.attrs((props: JRCIconButtonProps) => ({
-    ...props,
-    dashedBorderRadius: config[props.size].focusBorderRadius,
-}))<JRCIconButtonProps>`
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: ${(props) => config[props.size].size};
-    height: ${(props) => config[props.size].size};
-    border-radius: ${(props) => config[props.size].borderRadius};
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-    :hover,
-    :focus-visible {
-        ${(props) =>
-            !props.disabled && `background-color: ${props.theme.color.grey0}`};
-    }
-    ${DashedFocusBorder};
-`;
-
-const config = {
-    small: {
-        size: '24px',
-        borderRadius: '4px',
-        iconSize: 'small',
-        focusBorderRadius: '3px',
-    },
-    medium: {
-        size: '40px',
-        borderRadius: '8px',
-        iconSize: 'medium',
-        focusBorderRadius: '6px',
-    },
-};
-
-/**
- * IconButton props
- * @member icon icon of the button
- * @member onClick on click callback
- * @member name name (for form only)
- * @member value value (for form only)
- * @member disabled disable the button
- * @member size size of the button, default value, set to m
- * @member tooltip tooltip props
- */
-export interface JRCIconButtonProps {
-    icon: string;
-    size?: 'small' | 'medium';
-    onClick?: (event?: React.MouseEvent) => void;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    color?: Colors | Shades | 'inherit';
-    tooltip?: Omit<JRCTooltipProps, 'children'>;
-}
-
-const defaultProps = {
-    onClick: () => ({}),
-    size: 'medium',
-};
-
-const JRCIconButton = (props: JRCIconButtonProps) => {
-    return (
-        <ConditionalWrapper
-            condition={!!props.tooltip}
-            wrapper={(children) => (
-                <JRCTooltip {...props.tooltip}>{children}</JRCTooltip>
-            )}
-        >
-            <Button {...props}>
-                <JRCIcon
-                    name={props.icon}
-                    size={config[props.size].iconSize as 'small' | 'medium'}
-                    color={
-                        props.color
-                            ? props.color
-                            : props.disabled
-                            ? 'grey1'
-                            : 'grey3'
-                    }
-                />
-            </Button>
-        </ConditionalWrapper>
-    );
-};
-
-JRCIconButton.defaultProps = defaultProps;
-export { JRCIconButton };

package/.history/src/components/JRCImg/JRCImg_20211103152807.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import { formatImgUrl, ImgUrlProps } from './url.util';
-
-/**
- * @see ImgUrlProps
- * @property loading - img loading attribute - default is lazy
- * @property alt - img alt attributes
- *
- * @property type - type of the record image (ex: user, fileArticle, spot, diffgroup, etc.)
- * @property recordId - id of the record
- * @property uri - uri of the record
- *
- * @property width - Width of the <img /> tag. Also used to compute the image size downloaded
- * @property height - Height of the <img /> tag. Also used to compute the image size downloaded
- * @property size - if the url is not provided, used to download the image at this size.
- *                  If not provided, the size will be computed from width and height.
- *                  /!\ This property should not be used unless the image should not be displayed
- *                  at retina resolution for any reason.
- *
- * @property format - format of the image (ex: png, jpeg, etc.) - default is png
- *
- * @property url - img url used in place of width, height, size, uri, recordId and type to download an image
- *
- * @property timestamp - date used to force an image to be downloaded from the server instead
- *                       of from the cache. The modified timestamp of the object being displayed
- *                       should be passed
- *
- * @property className - className of the <img /> tag
- */
-export type JRCImgProps = ImgUrlProps & {
-    loading?: 'eager' | 'lazy';
-    alt: string;
-    className?: string;
-};
-
-const Img = styled.img`
-    box-sizing: border-box;
-    border: 0;
-`;
-
-const JRCImg = (props: JRCImgProps) => {
-    const formattedUrl = formatImgUrl(props);
-    return (
-        <Img
-            src={`/imagecache/${formattedUrl}`}
-            loading={props.loading || 'lazy'}
-            alt={props.alt}
-            width={props.width}
-            height={props.height}
-            className={props.className}
-        />
-    );
-};
-
-export default JRCImg;

package/.history/src/components/JRCImg/JRCImg_20211215104339.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import { formatImgUrl, ImgUrlProps } from './url.util';
-
-/**
- * @see ImgUrlProps
- * @property loading - img loading attribute - default is lazy
- * @property alt - img alt attributes
- *
- * @property type - type of the record image (ex: user, fileArticle, spot, diffgroup, etc.)
- * @property recordId - id of the record
- * @property uri - uri of the record
- *
- * @property width - Width of the <img /> tag. Also used to compute the image size downloaded
- * @property height - Height of the <img /> tag. Also used to compute the image size downloaded
- * @property size - if the url is not provided, used to download the image at this size.
- *                  If not provided, the size will be computed from width and height.
- *                  /!\ This property should not be used unless the image should not be displayed
- *                  at retina resolution for any reason.
- *
- * @property format - format of the image (ex: png, jpeg, etc.) - default is png
- *
- * @property url - img url used in place of width, height, size, uri, recordId and type to download an image
- *
- * @property timestamp - date used to force an image to be downloaded from the server instead
- *                       of from the cache. The modified timestamp of the object being displayed
- *                       should be passed
- *
- * @property className - className of the <img /> tag
- */
-export type JRCImgProps = ImgUrlProps & {
-    loading?: 'eager' | 'lazy';
-    alt: string;
-    className?: string;
-    background?: string;
-};
-
-const Img = styled.img`
-    box-sizing: border-box;
-    border: 0;
-`;
-
-const JRCImg = (props: JRCImgProps) => {
-    const formattedUrl = formatImgUrl(props);
-    return (
-        <Img
-            src={`/imagecache/${formattedUrl}`}
-            loading={props.loading || 'lazy'}
-            alt={props.alt}
-            width={props.width}
-            height={props.height}
-            className={props.className}
-        />
-    );
-};
-
-export default JRCImg;

package/.history/src/components/JRCImg/JRCImg_20211215104433.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import { formatImgUrl, ImgUrlProps } from './url.util';
-
-/**
- * @see ImgUrlProps
- * @property loading - img loading attribute - default is lazy
- * @property alt - img alt attributes
- *
- * @property type - type of the record image (ex: user, fileArticle, spot, diffgroup, etc.)
- * @property recordId - id of the record
- * @property uri - uri of the record
- *
- * @property width - Width of the <img /> tag. Also used to compute the image size downloaded
- * @property height - Height of the <img /> tag. Also used to compute the image size downloaded
- * @property size - if the url is not provided, used to download the image at this size.
- *                  If not provided, the size will be computed from width and height.
- *                  /!\ This property should not be used unless the image should not be displayed
- *                  at retina resolution for any reason.
- *
- * @property format - format of the image (ex: png, jpeg, etc.) - default is png
- *
- * @property url - img url used in place of width, height, size, uri, recordId and type to download an image
- *
- * @property timestamp - date used to force an image to be downloaded from the server instead
- *                       of from the cache. The modified timestamp of the object being displayed
- *                       should be passed
- *
- * @property className - className of the <img /> tag
- */
-export type JRCImgProps = ImgUrlProps & {
-    loading?: 'eager' | 'lazy';
-    alt: string;
-    className?: string;
-    cssColor?: string;
-};
-
-const Img = styled.img`
-    box-sizing: border-box;
-    border: 0;
-`;
-
-const JRCImg = (props: JRCImgProps) => {
-    const formattedUrl = formatImgUrl(props);
-    return (
-        <Img
-            src={`/imagecache/${formattedUrl}`}
-            loading={props.loading || 'lazy'}
-            alt={props.alt}
-            width={props.width}
-            height={props.height}
-            className={props.className}
-        />
-    );
-};
-
-export default JRCImg;