frst-components 0.20.0 → 0.20.2

package/src/components/IJ/participantCardOld/participantCardStyle.ts

@@ -1,218 +0,0 @@
-import styled from 'styled-components'
-
-interface ParticipantCardI {
-    size?: string,
-    src?: any,
-    disabled?: boolean,
-}
-
-
-export const WrapperCard = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 282px;
-    height: fit-content;
-
-    padding: 17px;
-    padding-top: 14px;
-
-    background: ${({ theme }) => theme.colors.shadeWhite};
-    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
-    border-radius: 8px;
-`
-
-export const WrapperUserInfo = styled.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`
-
-export const UserInfo = styled.div`
-    display: flex;
-    flex-direction: row;
-`
-    export const DescriptionUser = styled.div`
-        display: flex;
-        flex-direction: column;
-        margin-left: 13px;
-    `
-        export const NameUser = styled.div`
-            font-family: 'PT Sans';
-            font-style: normal;
-            font-weight: 700;
-            font-size: 16px;
-            line-height: 110%;
-
-            display: flex;
-            align-items: center;
-
-            color: #222222;
-            word-break: normal;
-            
-            max-width: 100%;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            word-wrap: break-word;
-
-        `
-        export const EmailUser = styled.div`
-            font-family: 'PT Sans';
-            font-style: normal;
-            font-weight: 700;
-            font-size: 12px;
-            line-height: 16px;
-            display: flex;
-            align-items: center;
-
-            color: #9C9C9C;
-            margin-top: 5px;
-            word-break: normal;
-            
-            max-width: 100%;
-            
-            max-width: 100%;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            word-wrap: break-word;
-        `
-        
-export const UserAdditionalInfo = styled.div`
-    display: flex;
-    flex-direction: column;
-    margin-top: 15px;
-`
-    export const Area = styled.div`
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 110%;
-        /* or 18px */
-
-        display: flex;
-        align-items: center;
-
-        /* neutrals/grey_1 */
-
-        color: #222222;
-        max-width: 100%;
-            
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        word-wrap: break-word;
-    `
-    export const Position = styled.div`
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 110%;
-        /* or 18px */
-        
-        display: flex;
-        align-items: center;
-        
-        /* neutrals/grey_1 */
-        
-        color: #222222;
-            
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        word-wrap: break-word;
-    `
-
-export const FooterButton = styled.div`
-    display: flex;
-    flex-direction: row;
-    margin-top: 15px;
-    justify-content: space-around;
-    align-items: center;
-`
-
-export const ButtonSend = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 0px;
-    padding: 4px 16px;
-    gap: 8px;
-
-    width: 149px;
-    height: 32px;
-
-    /* primary_1 */
-
-    background: ${({ theme }) => theme.colors.primary1};
-    border-radius: 8px;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    cursor: pointer;
-    margin-left: -13px;
-`
-
-export const ButtonRemove = styled.div`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    color: #0645AD;
-    cursor: pointer;
-`
-
-export const ButtonSuccess = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 4px 16px;
-    gap: 8px;
-
-    width: 159px;
-    height: 32px;
-
-    /* message/success_2 */
-
-    background: #D1F6D1;
-    /* message/success_1 */
-
-    border: 1px solid #1BA853;
-    border-radius: 8px;
-
-    width: 163px;
-    height: 32px;
-    cursor: default;
-    white-space: nowrap;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    /* identical to box height */
-
-    display: flex;
-    align-items: center;
-
-    /* neutrals/grey_1 */
-
-    color: #222222;
-`

package/src/components/IJ/thumbListContent/index.tsx

@@ -1,127 +0,0 @@
-import { FRSTTheme } from '../../../theme'
-import { ThemeProvider } from 'styled-components'
-import * as Styles from './thumbListContentStyles'
-import { useEffect, useState } from 'react'
-import { ThumbPodcast, ThumbTexto, ThumbVideo } from '@shared/icons'
-import Button from '@components/buttons'
-import ProgressBar from '@components/LXP/progressBar'
-
-type typeThumb = 'video' | 'podcast' | 'question' | 'textual'
-
-interface IThumbListContent {
-  imageSrc?: string
-  typeThumbContent?: typeThumb
-  title?: string
-  description?: string
-  isLoading?: boolean
-  textViewMoreButton?: string
-  textViewLessButton?: string
-  onClickThumb?: () => void
-  style?: React.CSSProperties
-  textProgressVisualized?: string
-  textProgressInProgress?: string
-  valueProgress?: number
-  tagValue: 'vizualized' | 'inProgress' | 'notVisualized'
-}
-
-export default function ThumbListContent(props: IThumbListContent) {
-  const [showMore, setShowMore] = useState(false)
-  const [tagVisualized, setTagVisualized] = useState(props.valueProgress)
-
-  useEffect(() => {
-    setTagVisualized(props.valueProgress)
-  }, [props.valueProgress])
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      {props.isLoading ? (
-        <Styles.containerThumbContent style={{ ...props.style }}>
-          <Styles.loadingImageThumb></Styles.loadingImageThumb>
-          <Styles.loadingThumbContent>
-            {props.title && <Styles.loadingContent>a</Styles.loadingContent>}
-            <Styles.loadingContent>a</Styles.loadingContent>
-            <Styles.loadingContent>a</Styles.loadingContent>
-            <Styles.loadingContent>a</Styles.loadingContent>
-            <Styles.loadingContent>a</Styles.loadingContent>
-          </Styles.loadingThumbContent>
-        </Styles.containerThumbContent>
-      ) : (
-        <Styles.containerThumbContent style={{ ...props.style }}>
-          {props.imageSrc ? (
-            tagVisualized > 0 ? (
-              <Styles.shadedThumb>
-                <Styles.imageThumbContent
-                  style={{ backgroundImage: `url(${props.imageSrc})` }}
-                  onClick={props.onClickThumb}
-                >
-                  <Styles.ProgressAndImg>
-                    <ProgressBar label="" value={props.valueProgress} />
-                  </Styles.ProgressAndImg>
-                </Styles.imageThumbContent>
-              </Styles.shadedThumb>
-            ) : (
-              <Styles.imageThumbContent
-                style={{ backgroundImage: `url(${props.imageSrc})` }}
-                onClick={props.onClickThumb}
-              ></Styles.imageThumbContent>
-            )
-          ) : tagVisualized > 0 ? (
-            <Styles.shadedThumb>
-              <Styles.iconsThumbAndProgress onClick={props.onClickThumb}>
-                {props.typeThumbContent === 'video' ? <ThumbVideo width="74" height="74" /> : null}
-                {props.typeThumbContent === 'podcast' ? (
-                  <Styles.IconAndProgress>
-                    <ThumbPodcast width="74" height="74" />
-                  </Styles.IconAndProgress>
-                ) : null}
-                {props.typeThumbContent === 'question' ? <ThumbTexto width="74" height="74" /> : null}
-                {props.typeThumbContent === 'textual' ? <ThumbTexto width="74" height="74" /> : null}
-                <Styles.ProgressIcon>
-                  <ProgressBar label="" value={props.valueProgress} />
-                </Styles.ProgressIcon>
-              </Styles.iconsThumbAndProgress>
-            </Styles.shadedThumb>
-          ) : (
-            <Styles.iconsThumb onClick={props.onClickThumb}>
-              {props.typeThumbContent === 'video' ? <div><ThumbVideo width="74" height="74" /></div> : null}
-              {props.typeThumbContent === 'podcast' ? <div><ThumbPodcast width="74" height="74" /></div> : null}
-              {props.typeThumbContent === 'question' ? <div><ThumbTexto width="74" height="74" /></div> : null}
-              {props.typeThumbContent === 'textual' ? <div><ThumbTexto width="74" height="74" /></div> : null}
-            </Styles.iconsThumb>
-          )}
-          <Styles.infoThumbContent onClick={props.onClickThumb} tagVisualized={props.tagValue}>
-            {props.tagValue !== 'notVisualized' ? (
-              <>
-                {props.tagValue === 'vizualized' ? (
-                  <Styles.tagThumbContentContainer>
-                    <Styles.tagThumbContent tagVisualized={props.tagValue}>
-                      {props.textProgressVisualized}
-                    </Styles.tagThumbContent>
-                  </Styles.tagThumbContentContainer>
-                ) : null}
-                {props.tagValue === 'inProgress' ? (
-                  <Styles.tagThumbContentContainer>
-                    <Styles.tagThumbContent tagVisualized={props.tagValue}>
-                      {props.textProgressInProgress}
-                    </Styles.tagThumbContent>
-                  </Styles.tagThumbContentContainer>
-                ) : null}
-              </>
-            ) : null}
-
-            {props.title ? <span>{props.title}</span> : null}
-            <Styles.descriptionThumbContent showText={showMore}> {props.description} </Styles.descriptionThumbContent>
-          </Styles.infoThumbContent>
-          <Styles.viewMoreContent>
-            <Button
-              variant="link"
-              label={showMore ? props.textViewLessButton : props.textViewMoreButton}
-              handleClick={() => setShowMore(!showMore)}
-              style={{ fontSize: 12 }}
-            />
-          </Styles.viewMoreContent>
-        </Styles.containerThumbContent>
-      )}
-    </ThemeProvider>
-  )
-}

package/src/components/IJ/thumbListContent/thumbListContent.stories.tsx

@@ -1,130 +0,0 @@
-import React from 'react'
-
-import ThumbListContent from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'IJ/ThumbListContent',
-  component: ThumbListContent
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ThumbListContent {...args} />
-
-export const loading = Template.bind({})
-loading.args = {
-  imageSrc: 'https://i.gyazo.com/9024cb0195e65b9f4fc269d29b0a38f4.png',
-  typeThumbContent: 'video',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: true,
-  style: { width: 375 }
-}
-export const video = Template.bind({})
-video.args = {
-  imageSrc: 'img/thumbFoto.png',
-  typeThumbContent: 'video',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  valueProgress: 82,
-  tagValue: 'vizualized'
-}
-
-export const videoSemProgresso = Template.bind({})
-videoSemProgresso.args = {
-  imageSrc: 'img/thumbFoto.png',
-  typeThumbContent: 'video',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  tagValue: 'notVisualized'
-}
-
-export const videoSemFoto = Template.bind({})
-videoSemFoto.args = {
-  imageSrc: '',
-  typeThumbContent: 'video',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  tagValue: 'notVisualized'
-}
-
-export const podcastComProgresso = Template.bind({})
-podcastComProgresso.args = {
-  imageSrc: '',
-  typeThumbContent: 'podcast',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  valueProgress: 84,
-  tagValue: 'inProgress'
-}
-
-export const questionario = Template.bind({})
-questionario.args = {
-  imageSrc: '',
-  typeThumbContent: 'question',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  tagValue: 'notVisualized'
-}
-
-export const questionarioVizualizado = Template.bind({})
-questionarioVizualizado.args = {
-  imageSrc: '',
-  typeThumbContent: 'video',
-  title: 'Label',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
-  textViewMoreButton: 'Ver mais',
-  textViewLessButton: 'Ver menos',
-  onClickThumb: () => alert('clicado'),
-  isLoading: false,
-  style: { width: 375 },
-  textProgressVisualized: 'Visualizado',
-  textProgressInProgress: 'Em andamento',
-  tagValue: 'vizualized',
-  valueProgress: 84,
-}

package/src/components/IJ/thumbListContent/thumbListContentStyles.ts

@@ -1,196 +0,0 @@
-import styled from 'styled-components'
-
-interface content {
-  showText?: boolean
-  tagVisualized?: string
-}
-
-export const containerThumbContent = styled.div`
-  display: grid;
-  grid-template-columns: 0.75fr 1fr;
-  position: relative;
-  min-width: 250px;
-  height: auto;
-  cursor: pointer;
-  background-color: ${({ theme }) => theme.colors.shadeWhite};
-`
-
-export const loadingImageThumb = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #d9d9d9;
-  -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 iconsThumbAndProgress = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  background-color: #ee8736;
-  flex-direction: column;
-`
-
-export const iconsThumb = styled.div`
-  display: flex;
-  height: 100%;
-  min-height: 144px;
-  background-color: #ee8736;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
-
-export const imageThumbContent = styled.div`
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-`
-
-export const loadingThumbContent = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
-  padding: 16px 16px 16px 16px;
-  gap: 4px;
-`
-
-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: 16px;
-  width: 100%;
-  height: 0.45em;
-
-  -webkit-animation-duration: 4s;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeholderShimmer;
-  -webkit-animation-timing-function: linear;
-
-  &:first-child {
-    width: 50%;
-    margin-bottom: 8px;
-  }
-  &:last-child {
-    width: 30%;
-  }
-`
-
-export const infoThumbContent = styled.div<content>`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
-  font-size: 16px;
-  padding: 0px 0px 32px 0px;
-  gap: 4px;
-  font-family: 'PT Sans';
-  word-wrap: break-word;
-  span {
-    color: ${({ theme }) => theme.colors.primary1};
-    font-size: 16px;
-    font-weight: 700;
-    padding-top: ${(props) => (props.tagVisualized === 'notVisualized' ? '16px' : '0px')};
-    padding-right: 16px;
-    padding-bottom: 0px;
-    padding-left: 16px;
-  }
-`
-
-export const tagThumbContentContainer = styled.div`
-  height: 30px;
-  width: 100%;
-  display: flex;
-  justify-content: end;
-`
-export const tagThumbContent = styled.div<content>`
-  height: 24px;
-  background: ${(props) => (props.tagVisualized === 'vizualized' ? '#2ca92a' : '#851F41')};
-  width: 91px;
-  border-radius: 0px 0px 0px 8px;
-  color: #ffff;
-  text-align: center;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-export const descriptionThumbContent = styled.div<content>`
-  font-size: 14px;
-  font-weight: 400;
-  color: ${({ theme }) => theme.colors.shadeBlack};
-  padding: 0px 16px 0px 16px;
-
-  overflow: hidden;
-  text-overflow: ${(props) => (props.showText ? 'none' : 'ellipsis')};
-  display: ${(props) => (props.showText ? 'flex' : '-webkit-box')};
-  -webkit-line-clamp: ${(props) => (props.showText ? 'none' : 3)};
-  -webkit-box-orient: ${(props) => (props.showText ? 'none' : 'vertical')};
-`
-
-export const viewMoreContent = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  margin: 0px 16px 12px 0px;
-  user-select: none;
-`
-
-export const shadedThumb = styled.div`
-  position: relative;  
-  height: 100%;
-  :after {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: '';
-    background: linear-gradient(360deg, #2d2c2c 7.86%, rgba(117, 117, 117, 0) 61.43%);
-    z-index: 1;
-  }
-`
-
-export const ProgressAndImg = styled.div`
-  padding: 0.3rem 0.5rem;
-  z-index: 9999;
-  position: absolute;
-  width: 100%;
-`
-
-export const ProgressIcon = styled.div`
-  position: absolute;
-  bottom: 2px;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  z-index: 999;
-  padding-bottom: 0.3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-`
-
-export const IconAndProgress = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-`