frst-components 0.20.1 → 0.20.3

package/src/components/LXP/popOverLXP-antigo/popOverLXPStyles.ts

@@ -1,121 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const RectangleUpLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: -7px 0 32px 27px;
-    left: 0;
-    top: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    ${({ variant }) => (variant)}
-`
-export const RectangleUpRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: -7px 32px 0 27px;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);    
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleLowRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 27px 32px -7px 0px;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleLowLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 27px 0 -7px 32px;
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleLeft = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 39px 0px 32px -7px;
-    left: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-right: none;
-    border-bottom: none;
-    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
-    
-    ${({ variant }) => (variant)}
-`
-export const RectangleRight = styled.div<{variant: string}>`
-    width: 13.64px;
-    height: 13.64px;
-    position: absolute;
-    margin: 39px -7px 13px 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    border-left: none;   
-    border-top: none;
-    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
-    
-    ${({ variant }) => (variant)}
-`
-export const PopOver = styled.div`
-    width: 100%;
-    min-height: 31px;
-    border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    box-shadow: 0px 18px 40px -15px #d3d3d3;
-    position: relative;
-    margin: 0% 0% 0% 0%;
-    padding: 8px;
-`
-export const PopOverLeftRight = styled.div`
-    width: 100%;
-    min-height: 67px;
-    border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    box-shadow: 0px 18px 40px -15px #d3d3d3;
-    position: relative;
-    margin: 0% 0% 0% 0%;
-    padding: 8px;    
-`

package/src/components/LXP/progressBar/index.tsx

@@ -1,18 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { IProgressBar } from './progressBar'
-import * as Style from './progressStyle'
-
-export default function ProgressBar({ value, label, style }: IProgressBar) {
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Style.ProgressContainer style={style}>
-        <span>{label}</span>
-        <Style.ValueAndProgress>
-          <Style.BorderLinearProgress variant="determinate" value={value} /> &nbsp;{value + '%'}
-        </Style.ValueAndProgress>
-      </Style.ProgressContainer>
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/progressBar/progressBar.d.ts

@@ -1,8 +0,0 @@
-import React from "react"
-
-export interface IProgressBar {
-    disabled?: boolean,
-    value?: number,
-    label?: string,
-    style?: React.CSSProperties
-}

package/src/components/LXP/progressBar/progressBar.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import ProgressBar from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/ProgressBar',
-  component: ProgressBar
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ProgressBar {...args} />
-
-export const Normal = Template.bind({})
-Normal.args = {
-  value: 75,
-  label: 'XP Investimentos'
-}

package/src/components/LXP/progressBar/progressStyle.ts

@@ -1,28 +0,0 @@
-import styled, { css } from 'styled-components'
-import LinearProgress from '@material-ui/core/LinearProgress'
-
-export const ProgressContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-  span {
-    margin-bottom: 0.3rem;
-  }
-`
-
-export const ValueAndProgress = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
-
-export const BorderLinearProgress = styled(LinearProgress)`
-  width: 100%;
-  height: 8px !important;
-  border-radius: 8px;
-  background: rgba(255, 77, 13, 0.3) !important;
-
-  .MuiLinearProgress-bar {
-    background: #ff4d0d !important;
-  }
-`

package/src/components/LXP/searchResults/index.tsx

@@ -1,36 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import { ISearchResults } from './searchResults'
-import * as Styles from './searchResultsStyles'
-
-export default function SearchResults({ src, title, description, textSkills, skills, style, onClick }: ISearchResults) {
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.Container onClick={onClick} style={{...style}} >
-        <Styles.Image style={{backgroundImage:`url(${src})`}} />
-        
-        <Styles.TextContainer> 
-          <Styles.Title> {title} </Styles.Title>
-          <Styles.Description> {description} </Styles.Description>
-          {skills ?
-            <Styles.skillSets>
-              {textSkills}:
-              {
-                skills.map( item => {
-                  return(
-                    <Styles.skillTag>
-                      {item}
-                    </Styles.skillTag>
-                  )
-                })
-              }
-            </Styles.skillSets>
-            : null
-          }
-        </Styles.TextContainer>
-      </Styles.Container>
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/searchResults/searchResults.d.ts

@@ -1,11 +0,0 @@
-import React from "react"
-
-export interface ISearchResults {
-   src?: string
-   title?: string
-   description?: string
-   textSkills?: string
-   skills?: string[]
-   style?: React.CSSProperties
-   onClick?:() => void
-}

package/src/components/LXP/searchResults/searchResults.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import SearchResults from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/Search Results',
-    component: SearchResults,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SearchResults {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    src: 'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
-    title: 'Name of the course',
-    onClick: () => {alert('click')},
-    description: 'Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. Chicken tri-tipalcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short loin hamburger tri-tip,chuck flank pork cho',
-    textSkills: 'Competências',
-    skills: ['Liderança', 'Negociação'],
-    style: {background: '#e5e5e5'}
-}
-

package/src/components/LXP/searchResults/searchResultsStyles.ts

@@ -1,63 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-  display: grid;
-  grid-template-columns: 0.11fr 1fr;
-  height: 120px;
-  position: relative;
-  gap: 16px;
-  cursor: pointer;
-  box-sizing: border-box;
-`
-export const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`
-export const Image = styled.div`
-  border-radius: 8px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-`
-export const Title = styled.p`
-  
-  margin-bottom: 12px;
-  color: ${({ theme })=> theme.colors.linkOnfocus};
-  font-size: 16px;
-  font-weight: 700;
-`
-export const Description = styled.p`
-  
-  font-weight: 400;
-  font-size: 16px;
-  color: ${({ theme }) => theme.colors.neutralsGrey3};
-  display: -webkit-box;
-  -webkit-line-clamp: 4; /** número de linhas que você quer exibir */
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`
-
-export const skillSets = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 8px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: -20px;
-  
-  font-family: 'PT Sans';
-  font-weight: 400;
-  font-size: 12px;
-  color: ${({ theme }) => theme.colors.neutralsGrey3};
-`
-
-export const skillTag = styled.div`
-  display: flex;
-  border-radius: 4px;
-  color: ${({ theme }) => theme.colors.shadeWhite};
-  background-color: ${({ theme }) => theme.colors.secondary1};
-  padding: 2px 4px;
-`

package/src/components/LXP/selectLXP/SelectLXP.tsx

@@ -1,170 +0,0 @@
-import React, { useState, useEffect, useRef } from "react"
-import styled, { css } from "styled-components"
-import { SelectLXPContext } from "./SelectLXPContext"
-
-const DropDownContainer = styled("div")`
-    width: 100%;
-    height: 48px;
-    background: #FFFFFF;
-    border: 1px solid #E8E8E8;
-    border-radius: 4px;
-    position: relative;
-`
-const EventOverlay = styled.div`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background: transparent;
-    cursor: pointer;
-    z-index: 2;
-`
-const DropDownHeader = styled("div")`
-  font-weight: 500;
-  font-size: 1.3rem;
-  color: #3faffa;
-  background: #ffffff;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-left: 16px;
-  border-radius: 4px;
-
-  p {
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    color: #A6A6A6;
-  }
-`
-const DropDownListContainer = styled("div")``
-
-const DropDownList = styled("ul")`
-  padding: 0;
-  margin: 0;
-  background: #ffffff;
-  border: 2px solid #e5e5e5;
-  box-sizing: border-box;
-  color: #3faffa;
-  font-size: 1.3rem;
-  font-weight: 500;
-  position: absolute;
-  width: 100%;
-  z-index: 5;
-
-  &:first-child {
-    padding-top: 0.8em;
-  }
-
-`
-const DropDownHeaderIcon = styled('div')<{ open: boolean }>`
-  position: absolute;
-  right: 16.48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.1s ease-in-out;
-
-  ${({ open }) => open === true && css`
-    transform: rotate(180deg);
-  `}
-`
-const SelectedOption = styled('p')`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222 !important;
-`
-
-export function ArrowIcon() {
-  return (
-    <svg width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.1736 6.64904L13.521 0.992188H0.826172L7.1736 6.64904Z" fill="#222222"/>
-    </svg>
-  )
-}
-
-interface SelectProps {
-    placeholder?: string
-    children?: any
-    onChange?: any
-    defaultValue?: any
-    loading?: boolean
-}
-
-export default function SelectLXP({ placeholder, defaultValue, children, onChange, loading }: SelectProps) {
-  const wrapperRef = useRef(null)
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  const [selectedOption, setSelectedOption]= useState(null)
-  const [selectedOptionValue, setSelectedOptionValue] = useState<boolean>()
-
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      // @ts-ignore
-      if(wrapperRef.current && !wrapperRef.current.contains(event.target) && isOpen)
-        setIsOpen(false)
-    }
-    document.addEventListener("mousedown", handleClickOutside)
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    };
-  }, [wrapperRef, isOpen])
-
-
-  useEffect(() => {
-    let param = false;
-    children && children.length && children.forEach((child: any) => {
-      if (child.props.value == defaultValue) {
-        param = true;
-        setSelectedOption(child.props.label)
-        setSelectedOptionValue(child.props.value)
-      }
-    })
-    if(!param) {
-      setSelectedOption(null)
-      setSelectedOptionValue(false)
-    }
-  }, [children, defaultValue])
-
-  const toggle = () => setIsOpen(!isOpen)
-
-  const handleChange = (e: any) => {
-    onChange(e)
-    toggle()
-  }
-
-  return (
-    <div>
-      <DropDownContainer ref={wrapperRef}>
-        <EventOverlay onClick={toggle}></EventOverlay>
-        <DropDownHeader>
-          {loading ?
-            <p>Carregando dados...</p>
-            :
-            selectedOption ? <SelectedOption>{selectedOption}</SelectedOption> : <p>{placeholder}</p>
-          }
-          <DropDownHeaderIcon open={isOpen}>
-            <ArrowIcon />
-          </DropDownHeaderIcon>
-        </DropDownHeader>
-        {isOpen && (
-          <DropDownListContainer>
-            <DropDownList>
-              <div onClick={handleChange}>
-                <SelectLXPContext.Provider value={{ selected: selectedOptionValue }}>
-                  {children}
-                </SelectLXPContext.Provider>
-              </div>
-            </DropDownList>
-          </DropDownListContainer>
-        )}
-      </DropDownContainer>
-    </div>
-  );
-}

package/src/components/LXP/selectLXP/SelectLXPContext.tsx

@@ -1,9 +0,0 @@
-// Create react context to share data between components
-
-import React from 'react'
-
-interface ContextProps {
-    selected?: boolean
-}
-
-export const SelectLXPContext = React.createContext<ContextProps | null>(null)

package/src/components/LXP/selectLXP/SelectLXPItem.tsx

@@ -1,63 +0,0 @@
-import React, { useState } from "react"
-import styled, { css } from "styled-components"
-import { SelectLXPContext } from "./SelectLXPContext"
-
-interface props {
-    selected: boolean
-    value: any
-    disabled?: boolean
-}
-
-const ListItem = styled("li")<props>`
-    list-style: none;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-    color: #000;
-    height: 38px;
-    margin: 0;
-    padding-left: 16px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    ${props => props.disabled === true && css`
-        cursor: not-allowed;
-        background-color: #e5e5e5;
-        opacity: 0.3;
-    `}
-
-    ${props => props.selected === true && css`
-        background-color: #e5e5e5;
-        cursor: pointer;
-        opacity: 1;
-    `}
-
-    &:hover {
-        background-color: #e5e5e5;
-    }
-`;
-
-type valueEnum = string | number | boolean | null;
-
-interface SelectProps {
-    value?: valueEnum
-    label?: string
-    selected?: boolean
-    handleSelect?: (value: any) => void
-    disabled?: boolean
-}
-
-export default function SelectLXPItem({ value, label, selected, handleSelect, disabled }: SelectProps) {
-    return (
-        <SelectLXPContext.Consumer>
-            {({ selected }) => (
-                <ListItem disabled={disabled} selected={selected === value} value={value} onClick={handleSelect}>
-                    {label}
-                </ListItem>
-            )}
-        </SelectLXPContext.Consumer>
-    );
-}

package/src/components/LXP/selectLXP/index.tsx

@@ -1,16 +0,0 @@
-import Select from "./SelectLXP"
-import SelectLXPItem from  './SelectLXPItem'
-
-export default function SelectLXP({placeholder, valueSelect, handleValueSelect, listItems}) {
-    return (
-        <Select placeholder={placeholder} defaultValue={valueSelect} onChange={(e) => handleValueSelect(e.target?.attributes?.value?.value)}>
-            {listItems.map((item, index) => (
-                <SelectLXPItem
-                  label={item.label}
-                  value={item.id}
-                  key={index}
-                />
-              ))}
-        </Select>
-    )
-  }

package/src/components/LXP/selectLXP/selectLXP.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import SelectLXP from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/SelectLXP',
-    component: SelectLXP,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <SelectLXP {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    placeholder: 'placeholder', 
-    valueSelect: 'primeiro', 
-    handleValueSelect: (e) => alert(e), 
-    listItems: [{ id:1, label: 'primeiro' }, { id:2, label: 'segundo' }]
-}

package/src/components/LXP/star-metric/index.tsx

@@ -1,28 +0,0 @@
-import Box from '@mui/material/Box';
-import Rating from '@mui/material/Rating';
-import Typography from '@mui/material/Typography';
-
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './starMetricStyles'
-import { IStarMetric } from './starMetric'
-
-
-export default function StarMetric({ disabled, onChange}: IStarMetric) {
-    
-    return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.WrapperCard>  
-    <Box>
-      <Typography component="legend"></Typography>
-      <Rating 
-        disabled={disabled ? disabled : false}
-        onChange={(e)=> {onChange()}}
-      />
-    </Box>
-    </Styles.WrapperCard>
-
-    </ThemeProvider>     
-    )
-}
-

package/src/components/LXP/star-metric/starMetric.d.ts

@@ -1,6 +0,0 @@
-import React from "react"
-
-export interface IStarMetric {
-    disabled?: boolean
-    onChange?: () => void
-}

package/src/components/LXP/star-metric/starMetric.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import StarMetric from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/StarMetric',
-    component: StarMetric,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <StarMetric {...args} />
-
-export const Normal = Template.bind({})
-Normal.args = {    
-    disabled: false,
-    onChange: ()=> {alert('selecionado')}
-}

package/src/components/LXP/star-metric/starMetricStyles.ts

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-export const WrapperCard = styled.div`
-    width: 244px;
-    min-height: 31px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    
-`