frst-components 0.20.0

package/src/components/item-lateral-menu/itemLateralMenu.stories.tsx

@@ -0,0 +1,159 @@
+import React from 'react'
+
+import ItemLateralMenu from './index'
+import Avatar from '../../components/avatar'
+import * as Icons from '../../shared/icons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Header/Item Lateral Menu',
+    component: ItemLateralMenu,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ItemLateralMenu {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    beginComponent: <Icons.Noun/>,
+    style: {
+        width: '280px' 
+    }
+}
+
+export const normalSelected = Template.bind({})
+normalSelected.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: true,
+    beginComponent: <Icons.Noun/>,
+    style: {
+        width: '280px' 
+    }
+}
+
+export const compound = Template.bind({})
+compound.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    beginComponent: <Icons.Noun/>,
+    subItems: [
+        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
+    ],
+    style: {
+        width: '280px' 
+    }
+}
+
+export const compoundHiddenArrow = Template.bind({})
+compoundHiddenArrow.args = {
+    label: 'Label',
+    hiddenIconDropArrow: true,
+    onClick: () => alert('label'),
+    selected: false,
+    beginComponent: <Icons.Noun/>,
+    subItems: [
+        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
+    ],
+    style: {
+        width: '280px' 
+    }
+}
+
+export const withButton = Template.bind({})
+withButton.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    button: {
+        label: 'Entrar',
+        variant: 'primary',
+        onClick: () => alert('Click')
+    },
+    beginComponent: <Icons.Noun/>,
+    style: {
+        width: '280px' 
+    }
+}
+
+export const buttonCompound = Template.bind({})
+buttonCompound.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    button: {
+        label: 'Entrar',
+        variant: 'primary',
+        onClick: () => alert('Click')
+    },
+    beginComponent: <Icons.Noun/>,
+    subItems: [
+        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
+    ],
+    style: {
+        width: '280px' 
+    }
+}
+
+
+export const withAvatar = Template.bind({})
+withAvatar.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    beginComponent: <Avatar size={'20px'} src={null}/>,
+    style: {
+        width: '280px' 
+    }
+}
+
+export const avatarCompound = Template.bind({})
+avatarCompound.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    beginComponent: <Avatar size={'20px'} src={null}/>,
+    subItems: [
+        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
+    ],
+    style: {
+        width: '280px' 
+    }
+}
+
+export const avatarButtonCompound = Template.bind({})
+avatarButtonCompound.args = {
+    label: 'Label',
+    onClick: () => alert('label'),
+    selected: false,
+    beginComponent: <Avatar size={'20px'} src={null}/>,
+    button: {
+        label: 'Entrar',
+        variant: 'primary',
+        onClick: () => alert('Click')
+    },
+    subItems: [
+        { id: '1', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '2', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '3', label: 'List Entry', onClick: (e) => alert(e) },
+        { id: '4', label: 'List Entry', onClick: (e) => alert(e) }
+    ],
+    style: {
+        width: '280px' 
+    }
+}

package/src/components/item-lateral-menu/itemLateralMenuStyles.ts

@@ -0,0 +1,131 @@
+    import styled from 'styled-components'
+
+interface AvatarI {
+    size?: string,
+    src?: any,
+    disabled?: boolean,
+}
+
+interface IWrapperItem {
+    disabled?: boolean,
+    active?: boolean
+}
+
+interface IWrapperMainLabel {
+    active?: boolean
+}
+
+export const WrapperItem = styled.div<IWrapperItem>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px;
+    background: ${({ theme }) =>  theme.colors.shadeWhite};
+    border-left: 4px solid ${({ active, theme }) => active ? theme.colors.primary1 : 'transparent'};
+
+    &:hover {
+        background: ${({ theme }) =>  theme.colors.neutralsGrey8};
+    }
+`
+
+export const WrapperMainLabel = styled.span<IWrapperMainLabel>`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: ${({ active }) => active ? '700' : '400'};
+    font-size: 18px;
+    line-height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-left: 8px;
+
+    color: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+`
+
+export const WrapperComponent = styled.div<IWrapperMainLabel>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    & > svg {
+        width: 24px;
+        height: 24px;
+    }
+`
+// & > path {
+//     fill: ${({ theme, active }) => active ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+// }
+
+export const WrapperButton = styled.div`
+    margin-right: 8px;
+    
+    & > button {
+        display: flex;
+        height: 24px;
+        flex-direction: row;
+        align-items: flex-start;
+        padding: 6px 8px;
+        gap: 10px;
+        border-radius: 4px;
+        
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 12px;
+        z-index: 2;
+    }
+`
+
+export const WrapperIconDrop = styled.div<{isOpen}>`
+    margin-right: 24px;
+    & > svg {
+        transition: all 0.3s ease-out;
+        transform: rotate(${({isOpen}) => isOpen ? '0' : '0.5turn'});
+        & > path {
+            stroke: ${({ theme, isOpen }) => isOpen ? theme.colors.primary1 : theme.colors.neutralsGrey1};
+        }
+    }
+`
+
+
+export const WrapperCompound = styled.div<{isOpen}>`
+    display: flex;
+    transition: max-height 0.3s ease-in-out;
+    flex-direction: column;
+`
+
+export const WrapperSubItems = styled.div<{isOpen}>`
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    transform-origin:top;
+    transform:scaleY(${({isOpen}) => isOpen ?  '1' : '0'});
+    transition: transform 0.3s ease-in-out;
+    overflow: hidden;
+`
+
+export const SubItem = styled.div<IWrapperItem>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px;
+    padding-left: 16px;
+    background: ${({ theme }) =>  theme.colors.neutralsGrey8};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        background: ${({ theme }) =>  theme.colors.neutralsGrey6};
+    }
+`

package/src/components/item-menu-global/index.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './itemMenuGlobalStyles'
+import { IItemMenuGlobal } from './itemMenuGlobal'
+
+import { FRSTLogo } from '@shared/icons'
+
+export default function ItemGlobalMenu({
+  variant,
+  type,
+  label,
+  handleOnClick,
+  wrapText,
+  pressed,
+  style,
+  icon,
+  customMenu
+}: IItemMenuGlobal) {
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <Styles.Wrapper
+        variant={variant}
+        pressed={pressed}
+        typeItem={type}
+        wrapText={wrapText}
+        style={{ ...style }}
+        onClick={handleOnClick}
+      >
+        <span style={{ marginRight: customMenu ? 10 : 0 }}>{icon}</span>
+        <span style={{ marginTop: customMenu ? -8 : 0 }}>{label}</span>
+      </Styles.Wrapper>
+    </ThemeProvider>
+  )
+}

package/src/components/item-menu-global/itemMenuGlobal.d.ts

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export type enumVariant = 'default' | 'LXP'
+export type enumType = 'menu' | 'submenu'
+
+export interface IItemMenuGlobal {
+  variant?: enumVariant
+  type?: enumType
+  label?: string
+  handleOnClick?: (e) => void
+  style?: React.CSSProperties
+  wrapText?: boolean
+  pressed?: boolean
+  icon?: any
+  customMenu?: any
+}

package/src/components/item-menu-global/itemMenuGlobal.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import ItemGlobalMenu from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Base/Item Global Menu',
+    component: ItemGlobalMenu,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'LXP']
+        },
+        type: {
+            control: 'select',
+            options: ['menu', 'submenu']
+        }
+    }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ItemGlobalMenu {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    variant: 'default',
+    type: 'menu',
+    label: 'Início',
+    onClick: (e) => alert('Click'),
+    style: { height: '40px' }
+}
+
+export const LXP = Template.bind({})
+LXP.args = {
+    variant: 'LXP',
+    type: 'menu',
+    label: 'Início',
+    onClick: (e) => alert('Click'),
+    style: { height: '40px' }
+}

package/src/components/item-menu-global/itemMenuGlobalStyles.ts

@@ -0,0 +1,73 @@
+import styled from "styled-components"
+
+export const Wrapper =  styled.button<{variant, typeItem, wrapText, pressed}>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    cursor: pointer;
+    border: 0;
+    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+    border-top: ${({typeItem}) => typeItem == 'menu'? '10px': '2px'} solid transparent;
+
+    background-color: ${({variant, theme, typeItem}) => typeItem == 'submenu' ? 'transparent' : variant == 'LXP' ? theme.colors.neutralsGrey1 : theme.colors.primary1};
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: #FFFFFF;
+
+    white-space: ${({wrapText}) => wrapText ? 'wrap': 'nowrap'};
+
+    &:hover {
+        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
+        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+    }
+    ${({pressed, variant, typeItem, theme}) => pressed && `
+        font-weight: 700;
+        border-bottom: ${ typeItem == 'menu'? '4px': '2px'} solid 
+        ${variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
+    `}
+    &:focus {
+        font-weight: 700;
+        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
+        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
+    }
+`
+export const WrapperSubItem =  styled.button<{variant, typeItem, wrapText}>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: 0;
+    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+    border-top: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+
+    background-color: transparent;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: #FFFFFF;
+
+    white-space: ${({wrapText}) => wrapText ? 'wrap': 'nowrap'};
+
+    &:hover {
+        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
+        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
+        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
+    }
+
+    &:focus {
+        font-weight: 700;
+    }
+`
+

package/src/components/languages-dropdown/index.tsx

@@ -0,0 +1,102 @@
+
+import React,{ useState, useEffect } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './languagesDropdownStyles'
+import { ILanguagesDropdown } from './languagesDropdown'
+
+import { FRSTLogo } from '@shared/icons'
+
+export default function LanguagesDropdown({ variant, languages, selected, onSelect, style, distanceBtnDrop}: ILanguagesDropdown) {
+    const imgES = 'https://i.gyazo.com/1cfa904ea1d492ace9dc67c2a37a10e4.png'
+    const imgBR = 'https://i.gyazo.com/ee7e65d12345200b8c3dd12670f85881.png'
+    const imgEN = 'https://i.gyazo.com/06a0ea969c48c12589d5d5565cf834df.png'
+    const imgPT = 'https://i.gyazo.com/cb567fc306928d02d31bc876df58be40.png'
+    
+    const [ isOpenDrop, setIsOpenDrop ] = useState(false);
+    const [ activeArea, setActiveArea ] = useState(false);
+    const [ activeImgFlag, setActiveImgFlag ] = useState(imgBR);
+
+    
+    useEffect(() => {
+        switch(selected) {
+            case 'pt-BR': return setActiveImgFlag(imgBR);
+            case 'en-US': return setActiveImgFlag(imgEN);
+            case 'es': return setActiveImgFlag(imgES);
+            case 'pt-PT': return setActiveImgFlag(imgPT);
+        }
+    }, [selected])
+    
+
+    useEffect(() => {
+        const checksAnyClickOnScreen = () => {
+            if(isOpenDrop) {
+                document.body.removeEventListener("click",  checksAnyClickOnScreen, false);
+                setIsOpenDrop(false);
+            }
+        }
+        
+        if(isOpenDrop) {
+            (document.body.addEventListener("click",  checksAnyClickOnScreen, false));
+        }
+    }, [isOpenDrop]);
+
+    const handleChangeSelect = (value) => {
+        onSelect(value)
+        switch(value) {
+            case 'pt-BR': return setActiveImgFlag(imgBR);
+            case 'en-US': return setActiveImgFlag(imgEN);
+            case 'es': return setActiveImgFlag(imgES);
+            case 'pt-PT': return setActiveImgFlag(imgPT);
+        }
+        setIsOpenDrop(false)
+        setActiveArea(false)
+    }
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+            <Styles.Wrapper 
+                onClick={() => setIsOpenDrop(!isOpenDrop)}
+                onBlur={() => setIsOpenDrop(activeArea)}
+                variant={variant} 
+                style={{...style}}
+            >
+                <Styles.Image 
+                    src={activeImgFlag}
+                    style={{padding: '10px'}}
+                />
+
+            <Styles.WrapperDrop variant={variant} isVisible={isOpenDrop}
+                onMouseOver={() => setActiveArea(true)}
+                onMouseOut={() => setActiveArea(false)}
+                style={{marginTop: distanceBtnDrop ? distanceBtnDrop : '45px'}}
+            >
+                {isOpenDrop && languages && languages.length > 0 && languages?.map((item, index) => {
+                    return( <div key={index}>
+                        { item == 'pt-BR' ?
+                            <Styles.Image key={index} onClick={() => handleChangeSelect('pt-BR')} src={imgBR} 
+                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
+                            />
+                        : item == 'en-US' ?
+                            <Styles.Image key={index} onClick={() => handleChangeSelect('en-US')} src={imgEN} 
+                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
+                            />
+                        : item == 'pt-PT' ?
+                            <Styles.Image key={index} onClick={() => handleChangeSelect('pt-PT')} src={imgPT} 
+                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
+                            />
+                        : item == 'es' &&
+                            <Styles.Image key={index} onClick={() => handleChangeSelect('es')} src={imgES} 
+                                style={{padding: '9px', paddingTop: '6px', paddingBottom: '6px'}}
+                            />
+                        }
+                    </div>)
+                    })
+                }
+            </Styles.WrapperDrop> 
+            </Styles.Wrapper>
+            {/* {isOpenDrop && languages && languages.length > 0 && languages.map} */}
+        </ThemeProvider>
+    )
+}

package/src/components/languages-dropdown/languagesDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from "react"
+
+export type enumVariant = 'default' | 'LXP';
+export type enumLanguages = 'pt-BR' | 'es' | 'en-US' | 'pt-PT';
+
+export interface ILanguagesDropdown {
+    variant?: enumVariant,
+    languages?: Array<enumLanguages>,
+    selected: enumLanguages,
+    onSelect: (e) => void,
+    distanceBtnDrop?: string,
+    style?: React.CSSProperties,
+}

package/src/components/languages-dropdown/languagesDropdown.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import ItemGlobalMenu from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Base/Language Select',
+    component: ItemGlobalMenu,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'LXP']
+        },
+        type: {
+            control: 'languages',
+            options: ['pt-BR', 'es', 'en-US', 'pt-PT']
+        }
+    }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ItemGlobalMenu {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    variant: 'default',
+    languages: ['pt-BR', 'es', 'en-US', 'pt-PT'],
+    selected: 'pt-BR',
+    onSelect: (e) => alert(e)
+}
+
+export const LXP = Template.bind({})
+LXP.args = {
+    variant: 'LXP',
+    languages: ['pt-BR', 'es', 'en-US', 'pt-PT'],
+    selected: 'pt-PT',
+    onSelect: (e) => alert(e)
+}

package/src/components/languages-dropdown/languagesDropdownStyles.ts

@@ -0,0 +1,66 @@
+import styled from "styled-components"
+
+export const sdsdsa =  styled.button<{variant, typeItem}>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: 0;
+    border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+    border-top: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid transparent;
+
+    background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey1 : theme.colors.primary1};
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    color: #FFFFFF;
+
+
+    &:hover {
+        background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey3 : '#F5792A'};
+        border-bottom: ${({typeItem}) => typeItem == 'menu'? '4px': '2px'} solid 
+        ${({variant, typeItem, theme}) => variant == 'LXP' && typeItem == 'menu' ? theme.colors.primary1: theme.colors.shadeWhite};
+    }
+
+    &:focus {
+        font-weight: 700;
+    }
+`
+
+export const Wrapper =  styled.div<{variant}>`
+    width: 50px;
+    object-fit: contain;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    border: 0;
+`
+
+export const Image =  styled.img`
+    width: 50px;
+    user-select: none;
+    cursor: pointer;
+    object-fit: contain;
+`
+
+export const WrapperDrop =  styled.div<{variant, isVisible}>`
+    user-select: none;
+    width: 50px;
+
+    position: absolute;
+    margin-top: 45px;
+    z-index: 10000;
+
+    border: 0;
+    display: ${({isVisible}) => isVisible ? 'flex' : 'none'};
+    flex-direction: column;
+    background-color: ${({variant, theme}) => variant == 'LXP' ? theme.colors.neutralsGrey1 : '#F5792A'};
+`