frst-components 0.20.0

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

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

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

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

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

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

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