frst-components 0.20.1 → 0.20.3

package/src/components/EBR/stepper/index.tsx

@@ -1,7 +0,0 @@
-import ProgressStepper from './stepperItem'
-import ProgressStepperItem from './stepper'
-
-export {
-  ProgressStepper,
-  ProgressStepperItem
-}

package/src/components/EBR/stepper/stepper.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import {
-  IStepper
-} from './index.d'
-import {
-  ProgressContainer,
-  Progress
-} from './styles'
-
-
-export default function Stepper({
-  children,
-}: IStepper ) {
-  return (
-    <>
-      <ProgressContainer>
-        <Progress>
-          {children && children}
-        </Progress>
-      </ProgressContainer>
-    </>
-  )
-}

package/src/components/EBR/stepper/stepperItem.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import {
-  IStepperItem
-} from './index.d'
-import {
-  ProgressItem,
-  ProgressItemTitle,
-  ProgressItemSubtitle,
-} from './styles'
-
-import Button from '../../buttons'
-
-export default function StepperItem({
-  title,
-  subtitle,
-  buttonText,
-  active = false,
-  onClick
-}: IStepperItem ) {
-  return (
-    <ProgressItem active={active}>
-      {active
-      ?
-        <>
-          <ProgressItemTitle active={active}>{title}</ProgressItemTitle>
-          <ProgressItemSubtitle active={active}>{subtitle}</ProgressItemSubtitle>
-          <Button
-            handleClick={onClick}
-            label={buttonText || 'Agendar reunião'}
-            variant="primary"
-          />
-        </>
-      :
-        <ProgressItemTitle>{title}</ProgressItemTitle>
-      }
-    </ProgressItem>
-  )
-}

package/src/components/EBR/stepper/styles.ts

@@ -1,140 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-  width: 100%;
-  width: 1280px;
-  height: 587px;
-  background: #F2F2F2;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-export const ProgressContainer = styled.div`
-  position: relative;
-  padding-left: 75px;
-`
-
-export const Progress = styled.ul`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  list-style: none;
-  align-items: flex-start;
-`
-
-export const ProgressItem = styled.li<{ active: boolean }>`
-  width: 100%;
-  min-height: 78px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-  counter-increment: list;
-
-  ${({ active }) => active === true && `
-    padding-bottom: 50px;
-
-    @media (max-width: 768px) {
-      padding-bottom: 50px;
-    }
-  `}
-
-  &:first-child {
-    &::before {
-      top: 10px;
-    }
-  }
-
-  &:last-child {
-    min-height: 46px;
-
-    &::before {
-      top: -30px;
-      display: none;
-    }
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    left: -79px;
-    top: 2px;
-    height: 100%;
-    background-color: #6A3F86;
-    width: 14px;
-    z-index: 0;
-  }
-
-  &:after {
-    content: counter(list);
-    position: absolute;
-    z-index: 1;
-    left: -95px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: transparent;
-    color: ${({ active }) => active === true ? '#FFFFFF' : '#757575'};;
-    text-align: center;
-    border: 3.5px solid #9C9C9C;
-    background-color: #fff;
-    top: 0;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 28px;
-
-    ${({ active }) => active === true && `
-      background-color: #FF4D0D;
-      border-color: #FF4D0D;
-      -webkit-box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5); 
-      box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5);
-    `}
-  }
-`
-
-export const ProgressItemTitle = styled.p<{ active?: boolean }>`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 23px;
-  color: #757575;
-
-  height: 46px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  ${({ active }) => active === true && `
-    color: #222222;
-    height: auto;
-    margin: 11px 0 8px 0;
-    font-weight: 600;
-  `}
-`
-
-export const ProgressItemSubtitle = styled.p<{ active: boolean }>`
-  font-family: 'Work Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  color: #222222;
-
-  ${({ active }) => active === true && `
-    margin-bottom: 24px;
-  `}
-`

package/src/components/EBR/trail-list/index.tsx

@@ -1,82 +0,0 @@
-import React,{useState, useEffect} from 'react'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './trailListStyles'
-import { ITrailList } from './trailList'
-
-import { MessageCheckLine } from '@shared/icons'
-
-export default function TrailList({ title, trails, style }: ITrailList) {
-    const [ trailsList, setTrailsList ] = useState(trails);
-    const [ windowSize, setWindowSize ] = useState([0,0 ])
-    useEffect(() => {
-      function updateSize() {
-        setWindowSize([window.innerWidth, window.innerHeight]);
-      }
-      window.addEventListener('resize', updateSize);
-      updateSize();
-      return () => window.removeEventListener('resize', updateSize);
-     }, []);
-
-     const renderTrails = () => {
-        return (trailsList.map((item, index) => {
-            return <Styles.ItemList key={index} isMobile={windowSize[0] < 400}> 
-                    <Styles.IconList> <MessageCheckLine/> </Styles.IconList> 
-                    <Styles.TextList> {item} </Styles.TextList>
-                </Styles.ItemList>
-            
-        }))
-     }
-
-     useEffect(() => {
-        setTrailsList(trails)
-     }, [trails])
-
-    return (
-        <ThemeProvider theme={FRSTTheme}>
-            <Styles.Wrapper style={{...style}}>
-                <Styles.Title>{title}</Styles.Title>
-                <Styles.WrapperList>
-                {( trailsList && trailsList.length > 0 && trailsList.length <= 2) ? 
-                    <div style={{
-                            display: 'flex', 
-                            flexDirection: 'column'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length <= 3) ? 
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns: windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length <= 5) ?
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns:windowSize[0] > 1400 ? '1fr 1fr 1fr' : 
-                            windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>                    
-                    :
-                    (trailsList && trailsList.length > 0 && trailsList.length > 5) && 
-                    <div style={{
-                            display: 'grid', 
-                            columnGap: '80px', 
-                            gridTemplateColumns:windowSize[0] > 1400 ? '1fr 1fr 1fr' : 
-                            windowSize[0] > 900 ? '1fr 1fr' : '1fr'
-                        }}>
-                        { renderTrails() }
-                    </div>
-                    
-                }
-                </Styles.WrapperList>
-            </Styles.Wrapper>
-        </ThemeProvider>
-    )
-}

package/src/components/EBR/trail-list/trailList.d.ts

@@ -1,6 +0,0 @@
-import React from "react"
-export interface ITrailList{
-    title?: string,
-    trails?: any,
-    style?: React.CSSProperties;
-}

package/src/components/EBR/trail-list/trailList.stories.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-
-import TrailList from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'EBR/Trail List',
-    component: TrailList,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <TrailList {...args} />
-
-export const sixItems = Template.bind({})
-sixItems.args = {
-    title: 'Trilhas de desenvolvimento aplicadas',
-    trails: [
-        'Atingindo resultados excepcionais', 
-        'Liderança que inspira', 
-        'Inovação Customer Centric', 
-        'Colaboração: método e prática',
-        'ECHOS - Novos Olhares sobre comunicação e liderança', 
-        'Vendas para resultados',
-        'Visão sistêmica',
-        'Digital Business Mindset',
-    ]
-}
-
-export const fiveItems = Template.bind({})
-fiveItems.args = {
-    title: 'Trilhas de desenvolvimento aplicadas',
-    trails: [
-        'Atingindo resultados excepcionais', 
-        'Liderança que inspira', 
-        'Inovação Customer Centric', 
-        'ECHOS - Novos Olhares sobre comunicação e liderança', 
-        'Vendas para resultados',
-    ]
-}
-
-export const threeItems = Template.bind({})
-threeItems.args = {
-    title: 'Trilhas de desenvolvimento aplicadas',
-    trails: [
-        'Atingindo resultados excepcionais', 
-        'ECHOS - Novos Olhares sobre comunicação e liderança', 
-        'Vendas para resultados',
-    ]
-}
-
-
-export const twoItems = Template.bind({})
-twoItems.args = {
-    title: 'Trilhas de desenvolvimento aplicadas',
-    trails: [
-        'Atingindo resultados excepcionais', 
-        'Liderança que inspira', 
-    ]
-}

package/src/components/EBR/trail-list/trailListStyles.ts

@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-
-export const Wrapper = styled.div`
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-`
-
-export const Title = styled.p` 
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 130%;
-
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.01em;
-
-    color: ${({theme}) => theme.colors.neutralsGrey1};
-
-    margin-bottom: 30px;
-`
-
-export const WrapperList = styled.div`
-    display: flex;
-    flex-direction: column;
-`
-
-export const ItemList = styled.div<({isMobile})>`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    
-    min-width: ${({isMobile}) => isMobile ? '0x' : '374px'};
-    margin-bottom: 16px;
-`
-
-export const TextList = styled.span`
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 130%;
-
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.01em;
-    margin-left: 12px;
-`
-
-export const IconList = styled.span`
-    margin-top: 2px;
-`