frst-components 0.20.0

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

@@ -0,0 +1,196 @@
+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

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

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

@@ -0,0 +1,304 @@
+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

@@ -0,0 +1,26 @@
+///-----------------------------------------
+
+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

@@ -0,0 +1,26 @@
+///-----------------------------------------
+
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,92 @@
+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;
+  }
+`