frst-components 0.20.1 → 0.20.3

package/src/components/avatar/index.tsx

@@ -1,21 +0,0 @@
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './avatarStyles'
-import { IAvatar } from './avatar'
-
-export default function Avatar({ size, src, alt, className, disabled }: IAvatar) {
-   const defaultImg = 'https://i.gyazo.com/499dda909b1ebfe0375d1efa2d5d00a8.png'
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.AvatarWrapper size={size} className={className}>
-                <Styles.AvatarImg
-                    src={src || defaultImg}
-                    alt={alt}
-                    size={size}
-                    disabled={disabled}                   
-                />
-            </Styles.AvatarWrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/buttons/buttonStyle.ts

@@ -1,339 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const LinkButton = styled.a<{ disabled: boolean }>`
-    border: none;
-    text-decoration: none;
-    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold}
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-    cursor: pointer;
-    outline: none;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    align-items: center;
-
-    &:hover { 
-        color: ${({ theme }) => theme.colors.linkHover};
-    }
-
-    &:active { 
-        color: ${({ theme }) => theme.colors.linkPressed};
-    }
-
-    &:focus { 
-        color: ${({ theme }) => theme.colors.linkOnfocus};
-    }
-
-    & > svg {
-        margin-right: 12px;
-        max-height: 16px;
-        height: 100%;
-        width: auto;
-    }
-
-    ${({ disabled }) => disabled && css`
-        pointer-events: none;
-        color: ${({ theme }) => theme.colors.linkDisabled};
-    `}
-`
-export const LinkButtonStartIcon = styled.a<{ disabled: boolean, sizeIcon: string }>`
-    border: none;
-    text-decoration: none;
-    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-    cursor: pointer;
-    outline: none;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    align-items: center;
-
-    &:hover { 
-        color: ${({ theme }) => theme.colors.linkHover};
-    }
-
-    &:active { 
-        color: ${({ theme }) => theme.colors.linkPressed};
-    }
-
-    &:focus { 
-        color: ${({ theme }) => theme.colors.linkOnfocus};
-    }
-
-    & > svg {
-        margin-right: 8px;
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon: '16px'};
-        height: 100%;
-        width: auto;
-    }
-
-    ${({ disabled }) => disabled && css`
-        pointer-events: none;
-        color: ${({ theme }) => theme.colors.linkDisabled};
-    `}
-`
-export const LinkButtonEndIcon = styled.a<{ disabled: boolean, sizeIcon: string }>`
-    border: none;
-    text-decoration: none;
-    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold}
-    color: ${({ theme }) => theme.colors.linkOnfocus};
-    cursor: pointer;
-    outline: none;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    align-items: center;
-
-    &:hover { 
-        color: ${({ theme }) => theme.colors.linkHover};
-    }
-
-    &:active { 
-        color: ${({ theme }) => theme.colors.linkPressed};
-    }
-
-    &:focus { 
-        color: ${({ theme }) => theme.colors.linkOnfocus};
-    }
-
-    & > svg {
-        margin-left: 12px;
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon: '16px'};
-        height: 100%;
-        width: auto;
-    }
-
-    ${({ disabled }) => disabled && css`
-        pointer-events: none;
-        color: ${({ theme }) => theme.colors.linkDisabled};
-    `}
-`
-
-const variantStyles = (variant = 'contained') =>
-  ({
-    primary: css`
-        background-color: ${({ theme }) => theme.colors.primary1};
-        color: ${({ theme }) => theme.colors.shadeWhite};
-
-        &:hover {
-            background-color: ${({ theme }) => theme.colors.primary2};
-        }
-
-        &:active {
-            background-color: ${({ theme }) => theme.colorsprimary3};
-        }
-
-        &:focus {
-            border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
-            -webkit-background-clip: padding-box;
-            background-clip: padding-box;
-        }
-
-        &:disabled {
-            background-color: ${({ theme }) => theme.colors.neutralsGrey5};
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-    `,
-    secondary: css`
-        background-color: transparent;
-        color: ${({ theme }) => theme.colors.primary1};
-        border: 1px solid ${({ theme }) => theme.colors.primary1};
-
-        &:hover {
-            color: ${({ theme }) => theme.colors.primary2};
-            border: 1px solid ${({ theme }) => theme.colors.primary2};
-        }
-
-        &:active {
-            color: ${({ theme }) => theme.colors.primary3};
-            border: 1px solid ${({ theme }) => theme.colors.primary3};
-        }
-
-        &:focus {
-            border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
-            -webkit-background-clip: padding-box;
-            background-clip: padding-box;
-        }
-
-        &:disabled {
-            color: ${({ theme }) => theme.colors.neutralsGrey5};
-            border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-    `,
-    expandedPrimary: css`
-        background-color: ${({ theme }) => theme.colors.primary1};
-        color: ${({ theme }) => theme.colors.shadeWhite};
-        width: 100%;
-        &:hover {
-            background-color: ${({ theme }) => theme.colors.primary2};
-        }
-
-        &:active {
-            background-color: ${({ theme }) => theme.colorsprimary3};
-        }
-
-        &:focus {
-            border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
-            -webkit-background-clip: padding-box;
-            background-clip: padding-box;
-        }
-
-        &:disabled {
-            background-color: ${({ theme }) => theme.colors.neutralsGrey5};
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-    `,
-    expandedSecondary: css`
-        background-color: transparent;
-        color: ${({ theme }) => theme.colors.primary1};
-        border: 1px solid ${({ theme }) => theme.colors.primary1};
-        width: 100%;
-
-        &:hover {
-            color: ${({ theme }) => theme.colors.primary2};
-            border: 1px solid ${({ theme }) => theme.colors.primary2};
-        }
-
-        &:active {
-            color: ${({ theme }) => theme.colors.primary3};
-            border: 1px solid ${({ theme }) => theme.colors.primary3};
-        }
-
-        &:focus {
-            border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
-            -webkit-background-clip: padding-box;
-            background-clip: padding-box;
-        }
-
-        &:disabled {
-            color: ${({ theme }) => theme.colors.neutralsGrey5};
-            border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-    `,
-    
-
-  }[variant]);
-
-export const Button = styled.button<{ variant: string, active: boolean, length: number }>`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 9px 16px;
-    height: 48px;
-    border: none;
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    box-shadow: none;
-
-    ${({ variant }) => variantStyles(variant)}
-    
-    ${({theme, length}) => theme.type === 'group' && length === 2 && `
-        &:first-child {
-            border-radius: 4px 0px 0px 4px;
-            border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
-            border-left: none !important;
-        }
-
-        &:last-child {
-            border-radius: 0px 4px 4px 0px;
-            border: none !important;
-        }
-    `}
-
-    ${({theme, length}) => theme.type === 'group' && length > 2 && `
-        border-radius: 0px;
-
-        border-right: 1px solid rgba(255, 255, 255, 0.5);
-        border-left: 1px solid rgba(255, 255, 255, 0.5);
-    
-        &:focus,
-        &:active {
-            border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
-            border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
-        }
-        
-        &:first-child {
-            border-radius: 4px 0px 0px 4px;
-            border: none !important;
-        }
-
-        &:last-child {
-            border-radius: 0px 4px 4px 0px;
-            border: none !important;
-        }
-    `}
-
-    ${({active}) => active === true && css`
-        background: #D14211;
-    `}
-`;
-export const ButtonStartIcon = styled.button<{ variant: string, sizeIcon: string }>`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 9px 16px;
-    height: 48px;
-    border: none;
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    box-shadow: none;
-
-    & > svg {
-        margin-right: 12px;
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon: '16px'};
-        height: 100%;
-        width: auto;
-    }
-
-    ${({ variant }) => variantStyles(variant)}
-`;
-export const ButtonEndIcon = styled.button<{ variant: string, sizeIcon: string }>`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 9px 16px;
-    height: 48px;
-    border: none;
-    cursor: pointer;
-    border-radius: 8px;
-    box-sizing: border-box;
-    transition: all 0.2s ease-in-out;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 19px;
-    box-shadow: none;
-
-    & > svg {
-        margin-left: 12px;
-        max-height: ${({sizeIcon}) => sizeIcon ? sizeIcon: '16px'};
-        height: 100%;
-        width: auto;
-    }
-
-    ${({ variant }) => variantStyles(variant)}
-`;

package/src/components/buttons/buttons.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import Button from './index'
-import * as Icons from '../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Buttons/Normal',
-    component: Button,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />
-
-export const primary = Template.bind({})
-primary.args = {
-    variant: 'primary',
-    label: 'Button text',
-    disabled: false,
-    handleClick: () => { alert('Click') },
-}
-
-export const secondary = Template.bind({})
-secondary.args = {
-    variant: 'secondary',
-    label: 'Button text',
-    disabled: false,
-    handleClick: () => { alert('Click') }
-}
-
-export const link = Template.bind({})
-link.args = {
-    variant: 'link',
-    label: 'Button text',
-    disabled: false
-}
-
-export const expandedPrimary = Template.bind({})
-expandedPrimary.args = { 
-    variant: 'expandedPrimary',
-    label: 'Button text',
-    disabled: false,
-    handleClick: () => { alert('Click') },
-}
-
-export const expandedSecondary = Template.bind({})
-expandedSecondary.args = {
-    variant: 'expandedSecondary',
-    label: 'Button text',
-    disabled: false,
-    handleClick: () => { alert('Click') },
-}

package/src/components/buttons/buttonsWithIcons.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-import Button from './index'
-import * as Icons from '../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Buttons/With Icons',
-    component: Button,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />
-
-export const primary = Template.bind({})
-primary.args = {
-    variant: 'primary',
-    label: 'Button text',
-    disabled: false,
-    startIcon: <Icons.ChangeAccount />,
-    handleClick: () => { alert('Click') },
-}
-
-export const secondary = Template.bind({})
-secondary.args = {
-    variant: 'secondary',
-    label: 'Button text',
-    disabled: false,
-    startIcon: <Icons.ChangeAccount />,
-    handleClick: () => { alert('Click') }
-}
-
-export const link = Template.bind({})
-link.args = {
-    variant: 'link',
-    label: 'Button text',
-    disabled: false,
-    startIcon: <Icons.ChangeAccount />
-}
-
-export const expandedPrimary = Template.bind({})
-expandedPrimary.args = { 
-    variant: 'expandedPrimary',
-    label: 'Button text',
-    disabled: false,
-    startIcon: <Icons.ChangeAccount />,
-    handleClick: () => { alert('Click') },
-}
-
-export const expandedSecondary = Template.bind({})
-expandedSecondary.args = {
-    variant: 'expandedSecondary',
-    label: 'Button text',
-    disabled: false,
-    startIcon: <Icons.ChangeAccount />,
-    handleClick: () => { alert('Click') },
-}

package/src/components/buttons/index.tsx

@@ -1,90 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import '../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../theme'
-import * as Styles from './buttonStyle'
-
-type enumVariant = 'primary' | 'secondary' | 'link' | 'expandedPrimary' | 'expandedSecondary' 
-type enumType = 'group' | null
-
-interface buttonProps {
-    variant?: enumVariant;
-    label?: string,
-    disabled?: boolean,
-    startIcon?: any,
-    endIcon?: any,
-    sizeIcon?: string,
-    handleClick?: (e: any) => void,
-    type?: enumType,
-    value?: any,
-    active?: boolean
-    style?: React.CSSProperties,
-    length?: number,
-    id?: string,
-    ref?: any,
-    handleMount?: (e:any) => void
-}
-
-export default function Button({
-    variant,
-    label,
-    sizeIcon,
-    disabled,
-    startIcon,
-    endIcon,
-    handleClick,
-    type,
-    active,
-    style,
-    value,
-    length,
-    id,
-    ref,
-    handleMount
-}: buttonProps) {
-
-    useEffect(() => {
-        if (handleMount && id) {
-            handleMount(id)
-        }
-    }, [id])
-
-    return (
-        <ThemeProvider theme={{...FRSTTheme, type: type }}>
-            { startIcon ?
-                (variant === 'link') ?
-                    <Styles.LinkButtonStartIcon ref={ref} style={{...style}} disabled={disabled} onClick={handleClick} sizeIcon={sizeIcon} id={id}>
-                        {startIcon}
-                        {label}                        
-                    </Styles.LinkButtonStartIcon>
-                :
-                    <Styles.ButtonStartIcon ref={ref} style={{...style}} variant={variant} disabled={disabled} onClick={handleClick} sizeIcon={sizeIcon} id={id}>
-                        {startIcon}
-                        {label}
-                    </Styles.ButtonStartIcon>
-            : endIcon ?
-                (variant === 'link') ?
-                    <Styles.LinkButtonEndIcon ref={ref} style={{...style}} disabled={disabled} onClick={handleClick} sizeIcon={sizeIcon} id={id}>
-                        {label} 
-                        {endIcon}                       
-                    </Styles.LinkButtonEndIcon>
-                :
-                    <Styles.ButtonEndIcon ref={ref} style={{...style}} variant={variant} disabled={disabled} onClick={handleClick} sizeIcon={sizeIcon} id={id}>
-                        {label}
-                        {endIcon}
-                    </Styles.ButtonEndIcon>
-            :
-                (variant === 'link') ?
-                    <Styles.LinkButton ref={ref} style={{...style}} disabled={disabled} onClick={handleClick} id={id}>
-                        {label}                       
-                    </Styles.LinkButton>
-                :
-                    <Styles.Button ref={ref} style={{...style}} length={length} active={active} value={value} variant={variant} disabled={disabled} onClick={handleClick} id={id}>
-                        {label}
-                    </Styles.Button>
-                    
-            }
-
-        </ThemeProvider>
-    );
-}