frst-components 0.20.0 → 0.20.2

package/src/components/LXP/accordionTrack/accordionTrackStyle.ts

@@ -1,196 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface IImageBackground {
-    active: boolean
-}
-
-export const ContainerHeader = styled.div<IImageBackground>`
-    width: 100%;
-    min-height: 72px;
-    margin-top: 12px;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    padding-left: 27px;
-    padding-right: 8px;
-    background-color: ${( props ) => `${props.active ? '#ffffff' : '#ebebeb'}`};
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    border-radius: 8px;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center; 
-    z-index: 99px;   
-`
-export const LoadingContent = styled.div`
-    background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #D9D9D9;
-    color: transparent;
-    border-radius: 5px;
-    width: 90%;
-    height: 0.45em;
-    border: none;
-    
-    -webkit-animation-duration: 4s;
-    -webkit-animation-fill-mode: forwards;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-name: placeholderShimmer;
-    -webkit-animation-timing-function: linear;
-
-`
-
-export const ContainerHeaderEmpty = styled.div<IImageBackground>`
-    width: 100%;
-    min-height: 72px;
-    margin-top: 12px;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    padding-left: 27px;
-    padding-right: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center; 
-    z-index: 99px;   
-`
-
-export const ContainerTrailsNormal = styled.div`
-    height: 415px; 
-    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
-    padding-top: 16px;
-    margin-top: -5px; 
-    background-color: rgb(235, 235, 235);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    z-index: 0;
-    width: 100%;
-`
-export const ContainerTrailsEmpty = styled.div`
-    height: 415px; 
-    padding-top: 16px;
-    margin-top: -5px; 
-    z-index: 0;
-    width: 100%;    
-    div[visibility="hidden"]{
-        position: absolute;
-    };
-`
-export const ContentTrailName = styled.div<IImageBackground>`
-    display: flex;
-    flex-direction: row;    
-    gap: 20px;    
-`
-export const TypographyTrailName = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 23px;
-    color: ${({ theme }) => theme.colors.primary1};
-`
-export const Select = styled.div`
-    cursor: pointer;    
-`
-export const ContentActiveHeader = styled.div`
-    display: flex;
-    flex-direction: row;    
-    gap: 50px;    
-`
-export const TypographyActiveHeader = styled.span<IImageBackground>`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-size: 16px;
-    line-height: 21px;
-    text-align: right;
-    color: ${({ theme }) => theme.colors.shadeBlack};    
-    display: flex;
-    gap: 10px;        
-`
-export const IconVerticalHeader = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-`
-export const ContainerAccordion = styled.div<IImageBackground>`
-    width: 100%;
-    min-height: 415px;
-    display: flex;
-    justify-content: flex-start;
-    background-color: ${({ theme }) => theme.colors.neutralsGrey7};
-    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-    border-radius: 0px 0px 8px 8px;    
-    padding: 30px 0px 30px 0px;
-    filter: ${( props ) => `grayscale(${props.active ? '0' : '1'})`};
-    margin-top: -5px;
-`
-export const ContainerCard = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    justify-items: center;
-    width: 100%;
-    min-height: 300px;
-    gap: 20px;       
-`
-export const ContainerInputNameTrail = styled.div`
-    input{
-        border: 1px solid #BDBDBD;
-        border-radius: 8px;
-        background: #EBEBEB;
-        width: 220px;
-        height: 45px;
-        padding-left: 10px;
-    }
-`
-export const TypographyMyContents = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;    
-    color: ${({ theme }) => theme.colors.primary1};
-`
-export const TypographyMyTrails = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 20px;    
-    color: ${({ theme }) => theme.colors.primary1};
-`
-
-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;
-    margin-bottom: 16px;
-`
-
-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)}
-`

package/src/components/LXP/accordionTrack/contentCourses.tsx

@@ -1,9 +0,0 @@
-import '../../../shared/global.css'
-
-export default function ContentCourses(data: any) {
-    return (
-      <>
-        {data.children}
-      </>
-    )
-}

package/src/components/LXP/accordionTrack/contentCoursesTrails.tsx

@@ -1,304 +0,0 @@
-import React, { useRef } from 'react'
-import '../../../shared/global.css'
-import VectorDown from './vectorDown'
-import VectorUp from './vectorUp'
-import * as Styles from './accordionTrackStyle'
-import { useState } from 'react'
-import * as Icons from '../../../shared/icons'
-import Button from '@components/buttons'
-import Switch from 'react-switch';
-import PopOver, { PopOverItem } from '../popOver'
-import Loading from '@components/DS/loading'
-
-import {
-  Box,
-  ClickAwayListener,
-  Fade,
-  makeStyles,
-  Paper,
-  Popper,
-} from "@material-ui/core";
-
-const useStyles = makeStyles((theme) => {
-  const color = theme.palette.background.paper; // Feel free to customise this like they do in Tooltip
-  return {
-    popoverRoot: {
-      backgroundColor: color,
-      maxWidth: 200,      
-    },
-    content: {
-      padding: theme.spacing(2),
-      textAlign: 'center'
-    },
-    // Stolen from https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tooltip/Tooltip.js and https://github.com/mui-org/material-ui/blob/4f2a07e140c954b478a6670c009c23a59ec3e2d4/docs/src/pages/components/popper/ScrollPlayground.js
-    popper: {
-      zIndex: 2000,
-      margin: 12,
-      '&[x-placement*="bottom"] $arrow': {
-        top: 0,
-        left: 0,
-        marginTop: "-0.71em",
-        marginLeft: 4,
-        marginRight: 4,
-        "&::before": {
-          transformOrigin: "0 100%"
-        }
-      },
-      '&[x-placement*="top"] $arrow': {
-        bottom: 0,
-        left: 0,
-        marginBottom: "-0.71em",
-        marginLeft: 4,
-        marginRight: 4,
-        "&::before": {
-          transformOrigin: "100% 0"
-        }
-      },
-      '&[x-placement*="right"] $arrow': {
-        left: 0,
-        marginLeft: "-0.71em",
-        height: "1em",
-        width: "0.71em",
-        marginTop: 4,
-        marginBottom: 4,
-        "&::before": {
-          transformOrigin: "100% 100%"
-        }
-      },
-      '&[x-placement*="left"] $arrow': {
-        right: 0,
-        marginRight: "-0.71em",
-        height: "1em",
-        width: "0.71em",
-        marginTop: 4,
-        marginBottom: 4,
-        "&::before": {
-          transformOrigin: "0 0"
-        }
-      }
-    },
-    // Stolen from https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Tooltip/Tooltip.js
-    arrow: {
-      overflow: "hidden",
-      position: "absolute",
-      width: "1em",
-      height: "0.71em" /* = width / sqrt(2) = (length of the hypotenuse) */,
-      boxSizing: "border-box",
-      color,
-      "&::before": {
-        content: '""',
-        margin: "auto",
-        display: "block",
-        width: "100%",
-        height: "100%",
-        boxShadow: theme.shadows[2],
-        backgroundColor: "currentColor",
-        transform: "rotate(45deg)"
-      },
-
-    }
-  };
-});
-
-export default function ContentCoursesTrails(props: any) {
-  
-  const [checked, setChecked] = useState(true)
-  const [up, setUp] = useState(true)
-  const [ElementPopover, setElementPopover] = useState(null);
-  const [ElementPopoverPublish, setElementPopoverPublish] = useState(null);
-  const [active, setActive] = useState(false)
-  const [nameTrail, setNameTrail] = useState('')  
-  const [Publishing, setPublishing] = useState<boolean>(false);
-  const [CanPublishing, setCanPublishing] = useState<boolean>(true);
-  const [arrowRef, setArrowRef] = React.useState<HTMLElement | null>(null);
-  const classes = useStyles();
-  // const refContainer = useRef(null);
-
-  const handleChange = (checkedValue) => {
-    setChecked(checkedValue)
-    props.handleChangeCheck(checkedValue)
-  };
-
-  const changeSelect = () => {
-    {
-      if (up) {
-        setUp(false)
-        props.handleChangeShow(false)
-      }
-      else {
-        setUp(true)
-        props.handleChangeShow(true)
-      }
-    }
-  }
-
-  const handleClickActiveNameTrail = () => { 
-    setNameTrail('')   
-    if(active) {
-      return setActive(false)
-    } else{      
-      setActive(true)
-     }
-  }
-
-  return (
-    <>
-      <Styles.ContainerHeader className={"opened"} active={props.ativo}>
-
-        <Styles.ContentTrailName active={active}>
-          {!active ?
-            <>
-              <Styles.TypographyTrailName>{props.TrailName}</Styles.TypographyTrailName>
-              <Styles.Select onClick={changeSelect}>
-                {props.show ? <VectorUp /> : <VectorDown />}
-              </Styles.Select>
-            </>
-            :
-            <Styles.ContainerInputNameTrail>
-              <input 
-                placeholder={props.txtPlacerolderInputNameTrail ? props.txtPlacerolderInputNameTrail : 'Digite o nome da trilha'}        
-                value={nameTrail}
-                onChange={(e) =>{                  
-                  setNameTrail(e.target.value)                  
-                }} 
-                onKeyPress={(event) => {
-                  if(event.key === 'Enter'){
-                    if (nameTrail) {
-                      setActive(false)
-                      props.handleChangeTrailName(nameTrail)
-                    }
-                  }                  
-                }}
-              />
-            </Styles.ContainerInputNameTrail>
-          }          
-        </Styles.ContentTrailName>
-        
-        {
-          props.showButtonActive &&
-            <Styles.ContentActiveHeader>
-              <Styles.TypographyActiveHeader active={props.ativo} style={{ fontWeight: props.ativo ? 700 : 400 }}>
-                {props.txtAtivarTrilha ? props.txtAtivarTrilha : 'Ativar trilha'}
-                <Switch
-                  onChange={handleChange}
-                  checked={props.ativo}
-                  height={16}
-                  width={40}
-                  checkedIcon={false}
-                  uncheckedIcon={false}
-                  handleDiameter={24}
-                  onHandleColor='#ffffff'
-                  offHandleColor='#ffffff'
-                  onColor='#FF4D0D'
-                  offColor='#757575'
-                  activeBoxShadow={props.ativo ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                  boxShadow={props.ativo ? '0 0 2px 2px #FF4D0D' : '0 0 2px 2px #757575'}
-                />
-              </Styles.TypographyActiveHeader>
-              <Styles.TypographyActiveHeader active={props.ativo} style={{ fontWeight: props.ativo ? 700 : 400 }}>
-                <Button 
-                  id={`btnPublish${props.id}`}
-                  handleMount={(element) => {
-                    let el = document.getElementById(element)
-                    setElementPopoverPublish(el ? el : null)
-                  }}
-                  handleClick={() => {
-                    setCanPublishing(false)
-                    setPublishing(true)     
-                    props.handlePublicarTrilha(props)              
-                  }} 
-                  startIcon={Publishing &&  <Loading sizeLoading='small' loadColor='#bdbdbd' style={{width: 40}}/>}
-                  label={Publishing ? 'Publicando...' : 'Publicar'} 
-                  variant='secondary'
-                  disabled={!CanPublishing}
-                />
-                {/* ToDo: Migrar um novo componente */}
-                <Popper 
-                  id={CanPublishing ? `btnPublishPopper${props.id}` : undefined} 
-                  open={CanPublishing} 
-                  anchorEl={ElementPopoverPublish} 
-                  placement={'top'} 
-                  className={classes.popper}
-                  transition
-                  modifiers={{
-                      preventOverflow: {
-                        enabled: true,
-                        boundariesElement: "window"
-                      },
-                      arrow: {
-                        enabled: true,
-                        element: arrowRef
-                      }
-                  }}
-                >
-                  {({ TransitionProps }) => (                  
-                    <Fade {...TransitionProps} timeout={350}>
-                      <Paper>
-                        <ClickAwayListener onClickAway={() => {}}>
-                          <Paper className={classes.popoverRoot}>
-                              <span className={classes.arrow} ref={setArrowRef} />
-                            <Box className={classes.content}>Após realizar todas as alterações na trilha, é necessário clicar em publicar para que o conteúdo editado esteja disponível</Box>
-                          </Paper>
-                        </ClickAwayListener>
-                      </Paper>
-                    </Fade>
-                  )}
-                </Popper>                
-                                            
-              </Styles.TypographyActiveHeader>              
-              <Styles.IconVerticalHeader
-                onClick={(element: any) => {
-                  setElementPopover(element.currentTarget)
-                }}
-              >
-                <div style={{ marginRight: 8 }}>
-                  <Icons.MoreVertical
-                    fill={props.ativo ? '#000000' : '#bdbdbd'}
-                  />
-                </div>
-              </Styles.IconVerticalHeader>
-            </Styles.ContentActiveHeader>
-        }        
-        <>
-          <PopOver
-            element={ElementPopover}
-            onClosePopover={() => {
-              setElementPopover(null)
-            }}
-            variant={'upRight'}
-          >
-            <div style={{ display: 'flex', flexDirection: 'column', padding: 0 }}>
-              <PopOverItem
-                label={props.txtTrailsPopOverEdit ? props.txtTrailsPopOverEdit : "Editar nome da trilha"}
-                onClick={() => {
-                  //props.handlePopOverTrailEdit(props.id)
-                  handleClickActiveNameTrail()
-                  setElementPopover(null)                  
-                }}
-              />
-              {/* <PopOverItem 
-                  label={props.txtTrailsPopOverDuplicar ? props.txtTrailsPopOverDuplicar : "Duplicar trilha"}
-                  onClick={() => {
-                    props.handlePopOverDuplicate
-                  }}
-                /> */}
-              <PopOverItem
-                label={props.txtTrailsPopOverDelete ? props.txtTrailsPopOverDelete : "Excluir trilha"}
-                onClick={() => {
-                  props.handlePopOverTrailDelete(props.id)
-                  setElementPopover(null)
-                }}
-                icon={<Icons.Trash fill='#C00F00' />}
-                noBorder={true}
-                isFontBold={true}
-                color={'#C00F00'}
-              />
-            </div>
-          </PopOver>      
-        </>        
-      </Styles.ContainerHeader>
-      
-      { up && props.children}
-    </>
-  )
-}

package/src/components/LXP/accordionTrack/vectorDown.tsx

@@ -1,26 +0,0 @@
-///-----------------------------------------
-
-import React from "react";
-
-/// Interface do Componente
-interface VectorIconParam {
-    color?: string;
-}
-
-///-----------------------------------------
-/// Componente
-
-/**
- * 
- * @componente 
- */
-export default function VectorDown(props: VectorIconParam) {
-
-    return (
-
-        <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M17 1L9 9L1 0.999999" stroke="#FF4D0D" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-
-    )
-}

package/src/components/LXP/accordionTrack/vectorUp.tsx

@@ -1,26 +0,0 @@
-///-----------------------------------------
-
-import React from "react";
-
-/// Interface do Componente
-interface VectorIconParam {
-    color?: string;
-}
-
-///-----------------------------------------
-/// Componente
-
-/**
- * 
- * @componente 
- */
-export default function VectorUp(props: VectorIconParam) {
-
-    return (
-
-        <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1 9L9 1L17 9" stroke="#FF4D0D" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-
-    )
-}

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

@@ -1,10 +0,0 @@
-import React from 'react'
-
-export interface IAvatar {
-  channel?: string
-  color?: string
-  sourceImage?: string
-  image?: boolean
-  descriptionChannel?: string
-  nameChannel?: string
-}

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

@@ -1,29 +0,0 @@
-import React from 'react'
-
-import AvatarAssociatedChannel from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/AvatarAssociateChannel',
-  component: AvatarAssociatedChannel
-}
-
-const Template = (args) => <AvatarAssociatedChannel {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  channel: 'XP',
-  color: '#6a3f86',
-  nameChannel: 'Nome do Canal',
-  descriptionChannel:
-    'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quasi, incidunt molestias sapiente dignissimos velit praesentium adipisci ipsa, reprehenderit mollitia optio commodi at iste. Repudiandae repellendus in debitis aliquid distinctio?'
-}
-
-export const sourceImage = Template.bind({})
-sourceImage.args = {
-  image: true,
-  sourceImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzySO8TACxxZVykdof7q6tJYrA8c_XfgGV8w&usqp=CAU',
-  nameChannel: 'Nome do Canal',
-  descriptionChannel:
-    'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quasi, incidunt molestias sapiente dignissimos velit praesentium adipisci ipsa, reprehenderit mollitia optio commodi at iste. Repudiandae repellendus in debitis aliquid distinctio?'
-}

package/src/components/LXP/avatarAssociatedChannel/avatarAssociatedChannelStyles.ts

@@ -1,92 +0,0 @@
-import styled from 'styled-components'
-
-interface AvatarI {
-  color?: string
-}
-
-interface AvatarImage {
-  image: any
-}
-
-export const ContainerGeral = styled.div`
-  width: 7rem;
-  display: flex;
-  align-content: flex-start;
-  top: 0;
-  flex-direction: column;
-  &:hover .cardInformation {
-    display: block;
-  }
-  &:hover .cardInformation {
-    display: block;
-  }
-`
-export const AvatarChannel = styled.div<AvatarI>`
-  height: 80px;
-  width: 80px;
-  border-radius: 50%;
-  background-color: ${(props) => props.color || '#6a3f86'};
-  position: relative;
-  cursor: pointer;
-  margin: 1rem;
-
-  img {
-    border-radius: 50%;
-  }
-`
-
-export const Channel = styled.span`
-  height: 80px;
-  width: 80px;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  letter-spacing: 0.01em;
-  font-size: 24px;
-  color: #ffffff;
-  font-family: 'Work Sans';
-  font-weight: 700;
-`
-
-export const CardInformation = styled.div`
-  width: 20rem;
-  background: #ffff;
-  font-size: 16px;
-  display: none;
-  margin-top: 0.5rem;
-  font-family: 'PT Sans';
-  font-weight: 400;
-  word-break: break-word;
-  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
-  border-radius: 4px;
-  list-style: none;
-  padding: 8px 0px;
-  h2 {
-    margin: 1rem 0.5rem 0.5rem 1rem;
-  }
-  h3 {
-    margin: 1rem;
-  }
-  @media (max-width: 320px) {
-    width: 18rem;
-  }
-`
-
-export const AvatarChannelImage = styled.div<AvatarImage>`
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background-image: ${(props) => `url(${props.image})`};
-  background-repeat: no-repeat;
-  background-size: 80px;
-  position: relative;
-  cursor: pointer;
-  margin: 1rem;
-
-  img {
-    border-radius: 50%;
-    width: 80px;
-    height: 80px;
-  }
-`