frst-components 0.20.0

package/src/components/LXP/permission/permissionStyle.ts

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+    width: 100%;
+    display: flex;
+    min-height: 400px;
+    flex-direction: column;        
+`
+export const Typography = styled.p`
+   font-family: 'PT Sans' ;
+   font-style: normal;
+   font-weight: 400;
+   font-size: 16px;
+   line-height: 21px;
+   color: ${({ theme }) => theme.colors.shadeBlack};
+   margin: 20px; 
+`
+export const ContainerPermission = styled.div`
+   width: 42%;
+   display: flex;
+   flex-direction: row;
+   flex-wrap: nowrap;
+   justify-content: space-between;
+   align-items: center;
+   margin: 20px;   
+   border-bottom: 1px solid ${({ theme }) => theme.colors.shadeBlack};
+   padding-bottom: 13px;
+`
+export const ContainerTypography = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px; 
+`
+export const TypographyTitle = styled.p`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+    color: ${({ theme }) => theme.colors.shadeBlack};
+`
+export const TypographyPermission = styled.div`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+    color: ${({ theme }) => theme.colors.shadeBlack};
+`
+export const ContainerSwitch = styled.div`
+   
+`

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

@@ -0,0 +1,111 @@
+import '../../../shared/global.css'
+import { useState, useEffect } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './popOverStyle'
+import { IPopOver, IPopOverItems } from './popOver'
+import Popover from '@material-ui/core/Popover';
+
+const ArrowPopover = () => {
+    return (<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.5 1L1 11.5H8.5H16L8.5 1Z" fill="white" stroke="#BDBDBD"/>
+                <path d="M1.21997 12L2.33 10.5H14.67L15.75 12H1.21997Z" fill="white"/>
+            </svg>)
+}
+export function PopOverItem(props: IPopOverItems) {
+
+    return (
+        
+        <div style={{
+                width: '100%',
+                padding: 8,
+                margin: 0,
+                fontSize: 16,
+                borderBottom: props.noBorder ? 'none' : '1px solid #EBEBEB',
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 8,
+                fontFamily: 'PT Sans',
+                cursor: 'pointer',
+                color: props.color ? props.color : '#000000',
+                fontWeight: props.isFontBold ? '700' : 'normal'
+            }}        
+            onClick={props.onClick}
+        >
+            {props.icon}
+            {props.label}                                  
+        </div>
+        
+    )
+}
+
+export default function PopOver({ variant, children, element, onClosePopover, anchorOrigin, transformOrigin }: IPopOver) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [AnchorVertical, setAnchorVertical] = useState('');
+    const [AnchorHorizontal, setAnchorHorizontal] = useState(anchorOrigin ? anchorOrigin : {vertical: 'bottom', horizontal: 'right'});
+    const [TransformVertical, setTransformVertical] = useState(transformOrigin ? transformOrigin : {vertical: 'top', horizontal: 'right'});
+    const [Horizontal, setHorizontal] = useState('');
+
+    useEffect(() => {
+        setAnchorEl(element);
+    }, [element])
+
+    const handleClose = () => {
+        setAnchorEl(null);
+        onClosePopover()
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <ThemeProvider theme={FRSTTheme}>            
+            <Popover                
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={AnchorHorizontal}
+                transformOrigin={TransformVertical}
+                PaperProps={{
+                    style: {
+                      backgroundColor: "transparent",
+                      boxShadow: "none",
+                      borderRadius: 8,
+                    }
+                }}
+                style={{
+                    borderRadius: 8
+                }}
+            >
+                <div style={{marginTop: variant.search('up') === -1? 0 : 12, marginBottom: variant.search('low') === -1? 0 : 20}}>
+                <Styles.PopOver>
+                    {
+                        variant === 'upLeft' ?        
+                            <Styles.RectangleUpLeft variant={variant = 'upLeft'}/>
+                        : variant === 'upRight' ?
+                            <Styles.RectangleUpRight variant={variant = 'upRight'}>
+                               <ArrowPopover/>
+                            </Styles.RectangleUpRight>
+                        : variant === 'lowRight' ?
+                            <Styles.RectangleLowRight variant={variant = 'lowRight'} />
+                        : variant === 'lowLeft' ?
+                            <Styles.RectangleLowLeft variant={variant = 'lowLeft'} />                        
+                            : variant === 'lowCenter' ?
+                            <Styles.RectangleLowCenter variant={variant = 'lowCenter'} />
+                        : variant === 'sideLeft' ?
+                            <Styles.RectangleLeft variant={variant = 'sideLeft'} />
+                        : variant === 'sideRight' ?
+                            <Styles.RectangleRight variant={variant = 'sideRight'} />
+                        : null
+                    }
+                    <div style={{zIndex: 9}}>
+                        {children}
+                    </div>
+                </Styles.PopOver>   
+                </div>
+            </Popover> 
+        </ThemeProvider>
+    );
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+
+type enumVariant = string
+
+export interface IPopOver {
+  /**
+   * @prop {enumVariant} variant: variant do popOver(upLeft, upRight, LowRight, LowLeft, sideLeft, sideRight)
+   */
+
+  variant?: enumVariant
+  /**
+   * @prop {React.ReactNode} children: valor de exibição dentro do componente popOver
+   */
+  children?: React.ReactNode
+  element: any
+  onClosePopover: () => void
+  style?: React.CSSProperties
+  anchorOrigin?: any
+  transformOrigin?: any
+}
+
+export interface IPopOverItems {
+  onClick?: () => void
+  label: string
+  icon?: any
+  style?: React.CSSProperties
+  noBorder?: boolean
+  color?: string
+  isFontBold?: boolean
+}

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

@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+
+import PopOver from './index'
+import Button from '../../buttons'
+
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/PopOver',
+    component: PopOver,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+
+const Template = (args) => {
+    const [AnchorEl, setAnchorEl] = useState(null);
+    return (
+        <>
+            <Button
+                handleClick={(event: any) => {
+                    setAnchorEl(event.currentTarget)
+                }}
+                label={"Exemplo Popover"}
+                variant={"primary"}
+
+            />
+            <PopOver 
+                {...args} 
+                element={AnchorEl} 
+                onClosePopover={() => {
+                    setAnchorEl(null)
+                }}
+            />
+        </>
+    )
+}
+
+
+export const upLeft = Template.bind({})
+upLeft.args = {
+    variant: 'upLeft',
+    children: <>
+        <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+        <h2>Indicador:</h2>
+        <h3>Tempo de uso da plataforma</h3>
+
+        <h2>Situação atual do indicador:</h2>
+        <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+        <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+        <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+        <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+        <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+        <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+        <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+    </>,
+}
+
+export const upRight = Template.bind({})
+upRight.args = {
+    variant: 'upRight',    
+    children: <>
+    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+    <h2>Indicador:</h2>
+    <h3>Tempo de uso da plataforma</h3>
+
+    <h2>Situação atual do indicador:</h2>
+    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+</>,
+}
+
+export const lowRight = Template.bind({})
+lowRight.args = {
+    variant: 'lowRight',
+    children: <>Teste de children</>,    
+}
+
+export const lowLeft = Template.bind({})
+lowLeft.args = {
+    variant: 'lowLeft',
+    children: <> <span>Teste de children </span> </>,    
+}
+
+export const sideLeft = Template.bind({})
+sideLeft.args = {
+    variant: 'sideLeft',
+    children: <>
+    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+    <h2>Indicador:</h2>
+    <h3>Tempo de uso da plataforma</h3>
+
+    <h2>Situação atual do indicador:</h2>
+    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+</>,    
+}
+
+export const sideRight = Template.bind({})
+sideRight.args = {
+    variant: 'sideRight',
+    children: <> <span>Teste de children </span> </>,    
+}

package/src/components/LXP/popOver/popOverStyle.ts

@@ -0,0 +1,130 @@
+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-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: -15px 16px 0 27px;}
+`
+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 RectangleLowCenter = styled.div<{variant: string}>`
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 0 -7px calc(50% - 7px);
+    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`
+    z-index: 999;
+    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 20px -15px #222222;
+    position: relative;
+    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/popOverLXP-antigo/index.tsx

@@ -0,0 +1,48 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './popOverLXPStyles'
+import { IPopOverLXP } from './popOverLXP'
+
+export default function PopOverLXP({ variant, children }: IPopOverLXP) {
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+
+            {
+                variant === 'upLeft' ?
+                    <Styles.PopOver>
+                        <Styles.RectangleUpLeft variant={variant = 'upLeft'}/>
+                        {children}
+                    </Styles.PopOver>
+                : variant === 'upRight' ?
+                    <Styles.PopOver>
+                        <Styles.RectangleUpRight variant={variant = 'upRight'} />
+                        {children}
+                    </Styles.PopOver>
+                : variant === 'lowRight' ?
+                    <Styles.PopOver>
+                        <Styles.RectangleLowRight variant={variant = 'lowRight'} />
+                        {children}
+                    </Styles.PopOver>
+                : variant === 'lowLeft' ?
+                    <Styles.PopOver>
+                        <Styles.RectangleLowLeft variant={variant = 'lowLeft'} />
+                        {children}
+                    </Styles.PopOver>
+                : variant === 'sideLeft' ?
+                    <Styles.PopOverLeftRight>
+                        <Styles.RectangleLeft variant={variant = 'sideLeft'} />
+                        {children}
+                    </Styles.PopOverLeftRight>
+                : variant === 'sideRight' ?
+                    <Styles.PopOverLeftRight>
+                        <Styles.RectangleRight variant={variant = 'sideRight'} />
+                        {children}
+                    </Styles.PopOverLeftRight>
+
+                : null
+            }
+
+        </ThemeProvider>
+    );
+}

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

@@ -0,0 +1,9 @@
+import React from "react"
+
+type enumVariant = 'upLeft' | 'upRight' | 'lowRight' | 'lowLeft' | 'sideLeft' | 'sideRight' | any
+
+export interface IPopOverLXP {
+    variant?: enumVariant;
+    children: React.ReactNode,
+    element?: any
+}

package/src/components/LXP/popOverLXP-antigo/popOverLXP.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+
+import PopOverLXP from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/PopOverLXP',
+    component: PopOverLXP,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <PopOverLXP {...args} />
+
+export const upLeft = Template.bind({})
+upLeft.args = {
+    variant: 'upLeft',
+    disabled: false,
+    children: <>
+    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+    <h2>Indicador:</h2>
+    <h3>Tempo de uso da plataforma</h3>
+
+    <h2>Situação atual do indicador:</h2>
+    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+</>,
+}
+
+export const upRight = Template.bind({})
+upRight.args = {
+    variant: 'upRight',    
+    children: <>
+    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+    <h2>Indicador:</h2>
+    <h3>Tempo de uso da plataforma</h3>
+
+    <h2>Situação atual do indicador:</h2>
+    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+</>,
+}
+
+export const lowRight = Template.bind({})
+lowRight.args = {
+    variant: 'lowRight',
+    children: <> <span>Teste de children </span> </>,    
+}
+
+export const lowLeft = Template.bind({})
+lowLeft.args = {
+    variant: 'lowLeft',
+    children: <> <span>Teste de children </span> </>,    
+}
+
+export const sideLeft = Template.bind({})
+sideLeft.args = {
+    variant: 'sideLeft',
+    children: <>
+    <h2 style={{fontSize: 24}}>Missão 1: Marte - Definição do Problema</h2>
+
+    <h2>Indicador:</h2>
+    <h3>Tempo de uso da plataforma</h3>
+
+    <h2>Situação atual do indicador:</h2>
+    <h3>No último quarter (Q1 - 2022) os alunos usaram a plataforma em média 8 horas.</h3>
+
+    <h2>Qual é a sua meta e o prazo final para alcançá-la?</h2>
+    <h3>No próximo quarter (Q2 - 2022) os alunos usarão a plataforma em média 12 horas.</h3>
+
+    <h2>CERTEZAS: O que eu já sei sobre esse problema?</h2>
+    <h3>A presença, comprometimento e engajamento dos alunos na plataforma é algo fundamental para que os mesmos tenham um bom aproveitamento da trilha e assim, incrementando suas skills.</h3>
+
+    <h2>DÚVIDAS: O que eu preciso descobrir sobre esse problema?</h2>
+    <h3>O tempo ideal de engajamento é de 12 horas. É necessário investigar quais fatores influenciaram negativamente essa questão e como podemos reverter e alcançar um melhor resultado.</h3>
+
+</>,    
+}
+
+export const sideRight = Template.bind({})
+sideRight.args = {
+    variant: 'sideRight',
+    children: <> <span>Teste de children </span> </>,    
+}