frst-components 0.20.0

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

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

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

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

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