frst-components 0.20.0 → 0.20.2

package/src/components/LXP/avatarAssociatedChannel/index.tsx

@@ -1,47 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './avatarAssociatedChannelStyles'
-import { IAvatar } from './avatarAssociatedChannel'
-
-export default function AvatarAssociatedChannel({
-  descriptionChannel,
-  nameChannel,
-  channel,
-  color,
-  sourceImage,
-  image
-}: IAvatar) {
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.ContainerGeral>
-        <>
-          {image ? (
-            <Styles.AvatarChannelImage image={image}>
-              <img src={sourceImage} />
-            </Styles.AvatarChannelImage>
-          ) : (
-            <Styles.AvatarChannel color={color ? color : '#6a3f86'}>
-              <Styles.Channel>{channel}</Styles.Channel>
-            </Styles.AvatarChannel>
-          )}
-          <Styles.CardInformation className="cardInformation">
-            {image ? (
-              <Styles.AvatarChannelImage image={image}>
-                <img src={sourceImage} />
-              </Styles.AvatarChannelImage>
-            ) : (
-              <Styles.AvatarChannel color={color ? color : '#6a3f86'}>
-                <Styles.Channel>{channel}</Styles.Channel>
-              </Styles.AvatarChannel>
-            )}
-            <div>
-              <h2>{nameChannel}</h2>
-              <h3>{descriptionChannel}</h3>
-            </div>
-          </Styles.CardInformation>
-        </>
-      </Styles.ContainerGeral>
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/avatarChannel/avatarChannel.d.ts

@@ -1,13 +0,0 @@
-import React from 'react'
-
-export interface IAvatar {
-  size?: string
-  channel?: string
-  alt?: string
-  className?: string
-  disabled?: boolean
-  color?: string
-  handleValueAvatar: (file) => void
-  variantPopOver?: string
-  sourceImage?: string
-}

package/src/components/LXP/avatarChannel/avatarChannel.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import AvatarChannel from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/AvatarChannel',
-  component: AvatarChannel
-}
-
-const Template = (args) => <AvatarChannel {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  size: '80px',
-  channel: 'XP',
-  alt: 'Alt example',
-  disabled: false,
-  color: '#6a3f86',
-  handleValueAvatar: (file) => {
-    console.log('avatar:', file)
-  },
-  variantPopOver: 'lowLeft'
-}
-
-export const sourceImage = Template.bind({})
-sourceImage.args = {
-  size: '80px',
-  channel: 'XP',
-  alt: 'Alt example',
-  disabled: false,
-  color: '#6a3f86',
-  handleValueAvatar: (file) => {
-    console.log('avatar:', file)
-  },
-  variantPopOver: 'lowLeft',
-  sourceImage: 'https://lxp-cdn.dev.frstfalconi.cloud/logo-frst.png'
-}

package/src/components/LXP/avatarChannel/avatarChannelStyles.ts

@@ -1,145 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface AvatarI {
-  size?: string
-  src?: any
-  disabled?: boolean
-  color?: string
-  variant?: string
-}
-
-interface AvatarImage {
-  size?: string
-  src?: any
-  disabled?: boolean
-  image: any
-  variant?: string
-}
-
-interface PropsPopOver {
-  variant: string
-}
-
-export const ContainerGeral = styled.div<PropsPopOver>`
-  display: flex;
-  height: 8.5rem;
-  align-content: flex-end;
-  &:hover .popOver {
-    display: block;
-  }
-  &:hover .hide {
-    display: block;
-  }
-`
-export const AvatarChannel = styled.div<AvatarI>`
-  width: ${(props) => props.size || '80px'};
-  height: ${(props) => props.size || '80px'};
-  border-radius: 50%;
-  background-color: ${(props) => props.color || '#6a3f86'};
-  position: relative;
-  margin-top: ${(props) => (props.variant === 'lowLeft' || props.variant === 'lowRight' ? '62px' : '0px')};
-  cursor: pointer;
-  ${(props) =>
-    props.variant === 'sideRight' &&
-    css`
-      margin-left: 8.5rem;
-    `}
-
-  img {
-    border-radius: 50%;
-  }
-
-  ${({ disabled }) =>
-    disabled === true &&
-    `
-        filter: grayscale(100%);
-    `}
-`
-export const AvatarChannelImage = styled.div<AvatarImage>`
-  width: ${(props) => props.size || '80px'};
-  height: ${(props) => props.size || '80px'};
-  border-radius: 50%;
-  background-image: ${(props) => `url(${props.image})`};
-  background-repeat: no-repeat;
-  background-size: ${(props) => props.size || '80px'};
-  position: relative;
-  margin-top: ${(props) => (props.variant === 'lowLeft' || props.variant === 'lowRight' ? '62px' : '0px')};
-  cursor: pointer;
-  ${(props) =>
-    props.variant === 'sideRight' &&
-    css`
-      margin-left: 8.5rem;
-    `}
-
-  img {
-    border-radius: 50%;
-  }
-
-  ${({ disabled }) =>
-    disabled === true &&
-    `
-        filter: grayscale(100%);
-    `}
-`
-export const Channel = styled.span`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.01em;
-  top: 25px;
-  left: 22.4px;
-  font-size: 24px;
-  color: #ffffff;
-  font-family: 'Work Sans';
-  font-weight: 700;
-  line-height: 130%;
-`
-export const AvatarCircle = styled.div<AvatarI>`
-  width: 40px;
-  height: 40px;
-  border-radius: 50px;
-  background-color: ${({ theme }) => theme.colors.shadeWhite};
-  position: absolute;
-  margin: 26.25% 25% 26.25% 25%;
-  box-shadow: 0px 18px 40px -15px #d3d3d3;
-  display: none;
-`
-export const AvatarCam = styled.div<AvatarI>`
-  width: 33px;
-  height: 31px;
-  position: absolute;
-  margin: 15% 9% 12.5% 18%;
-`
-export const ContainerPopOver = styled.div<PropsPopOver>`
-  white-space: nowrap;
-  font-size: 16px;
-  display: none;
-  width: 120px;
-  position: absolute;
-  margin-top: 0;
-  font-family: 'PT Sans';
-  font-weight: 400;
-  ${(props) =>
-    (props.variant === 'upLeft' || props.variant === 'upRight') &&
-    css`
-      margin-top: 7rem;
-    `}
-
-  ${(props) =>
-    props.variant === 'sideLeft' &&
-    css`
-      margin-top: 1rem;
-      margin-left: 6rem;
-    `}
-
-    ${(props) =>
-    props.variant === 'sideRight' &&
-    css`
-      margin-top: 1rem;
-    `}
-`
-
-export const ContainerSelectedImage = styled.div`
-  margin-top: 60px;
-`

package/src/components/LXP/avatarChannel/index.tsx

@@ -1,112 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './avatarChannelStyles'
-import { IAvatar } from './avatarChannel'
-import * as Icons from '../../../shared/icons'
-import { useState } from 'react'
-import PopOverLXP from '../popOverLXP-antigo'
-
-export default function AvatarChannel({
-  size,
-  channel,
-  className,
-  disabled,
-  color,
-  handleValueAvatar,
-  variantPopOver,
-  sourceImage
-}: IAvatar) {
-  const onChange = () => {
-    document.getElementById('fileSelector').click()
-  }
-
-  const handleFileSelected = (file) => {
-    const reader = new FileReader()
-    reader.onload = function (e) {
-      setImage(e.target.result)
-    }
-    reader.readAsDataURL(file)
-    handleValueAvatar(file)
-    return file
-  }
-
-  const [image, setImage] = useState(null)
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      <Styles.ContainerGeral className="geral" variant={variantPopOver}>
-        {sourceImage ? (
-          <>
-            <Styles.ContainerPopOver className="popOver" variant={variantPopOver}>
-              <PopOverLXP children={'Alterar avatar'} variant={variantPopOver} element={undefined} />
-            </Styles.ContainerPopOver>
-            <Styles.ContainerSelectedImage onClick={onChange}>
-              <div style={{ display: 'none' }}>
-                <input
-                  type="file"
-                  id="fileSelector"
-                  accept=".jpg, .jpeg, .png"
-                  onChange={(e) => handleFileSelected(e.target.files[0])}
-                />
-              </div>
-              <img src={sourceImage} style={{ borderRadius: '150px', width: '80px', height: '80px' }} />
-            </Styles.ContainerSelectedImage>
-          </>
-        ) : (
-          <>
-            {variantPopOver === 'lowLeft' || variantPopOver === 'lowRight' || variantPopOver === 'sideRight' ? (
-              <>
-                <Styles.ContainerPopOver className="popOver" variant={variantPopOver}>
-                  <PopOverLXP children={'Alterar avatar'} variant={variantPopOver} element={undefined} />
-                </Styles.ContainerPopOver>
-                <div style={{ display: 'none' }}>
-                  <input
-                    type="file"
-                    id="fileSelector"
-                    accept=".jpg, .jpeg, .png"
-                    onChange={(e) => handleFileSelected(e.target.files[0])}
-                  />
-                </div>
-                {image ? (
-                  <Styles.AvatarChannelImage
-                    size={size}
-                    onClick={onChange}
-                    className={className}
-                    disabled={disabled}
-                    variant={variantPopOver}
-                    image={image}
-                  >
-                    <img src={sourceImage} style={{ borderRadius: '150px', width: '80px', height: '80px' }} />
-                    {/* <Styles.AvatarCircle className="hide">
-                      <Styles.AvatarCam>
-                        <Icons.Cam />
-                      </Styles.AvatarCam>
-                    </Styles.AvatarCircle> */}
-                  </Styles.AvatarChannelImage>
-                ) : (
-                  <Styles.AvatarChannel
-                    size={size}
-                    onClick={onChange}
-                    className={className}
-                    disabled={disabled}
-                    variant={variantPopOver}
-                    color={color ? color : '#6a3f86'}
-                  >
-                    <Styles.Channel>{channel}</Styles.Channel>
-
-                    <Styles.AvatarCircle className="hide">
-                      <Styles.AvatarCam>
-                        <Icons.Cam />
-                      </Styles.AvatarCam>
-                    </Styles.AvatarCircle>
-                  </Styles.AvatarChannel>
-                )}
-              </>
-            ) : null}
-          </>
-        )}
-      </Styles.ContainerGeral>
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/bannerLxp/bannerLxp.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import BannerLxp from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'LXP/BannerLxp',
-  component: BannerLxp
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BannerLxp {...args} />
-
-export const Normal = Template.bind({})
-Normal.args = {
-  title: 'Nome do seu KnowHub',
-  titleColor: '#FFF',
-  isDisabledTitle: false,
-  bgSrc:
-    'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
-  handleChangeBanner: (file) => console.log('imgBannerResp:', file),
-  onSaveInfo: (nome) => alert(nome),
-  bgColor: ''
-}
-
-export const bannerConfigs = Template.bind({})
-bannerConfigs.args = {
-  title: 'Nome do seu KnowHub',
-  titleColor: '#FFF',
-  isDisabledTitle: false,
-  bgSrc:
-    'https://media.itpro.co.uk/image/upload/s--X-WVjvBW--/f_auto,t_content-image-full-desktop@1/v1570815813/itpro/2018/01/shutterstock_712558591.jpg',
-  handleChangeBanner: (file) => console.log('imgBannerResp:', file),
-  onSaveInfo: (nome) => alert(nome),
-  bgColor: '',
-  showBannerConfigs: true
-}

package/src/components/LXP/bannerLxp/bannerLxp.tsx

@@ -1,141 +0,0 @@
-import styled, { css } from 'styled-components'
-
-interface BannerLxp {
-  backgroundBanner?: any
-}
-
-export const BannerContainer = styled.div<BannerLxp>`
-  background: ${(props) => props.backgroundBanner};
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-  font-family: 'Work Sans';
-  width: 100%;
-  height: 214px;
-  cursor: default;
-  padding: 60px 80px 60px 120px;
-  border-radius: 0px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-`
-export const ConfigButton = styled.div`
-  position: absolute;
-  right: 0;
-  margin-right: 83px;
-`
-export const ConfigContainer = styled.div`
-  width: 350px;
-  height: 490px;
-  border-radius: 8px;
-  border: 1px solid #bdbdbd;
-  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.15);
-  background-color: #fff;
-  font-family: 'PT Sans', 'PTSans-Regular';
-  padding: 16px;
-  position: absolute;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  flex-direction: column;
-  right: 0;
-  margin-right: 83px;
-  top: 72px;
-`
-
-export const EnableText = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const InputTextColor = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  padding: 8px 0;
-  margin-top: 8px;
-  border-top: 1px solid #ebebeb;
-  border-bottom: 1px solid #ebebeb;
-`
-export const InputBgColor = styled.div`
-  width: 100%;
-  display: flex;
-  position: relative;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-`
-
-export const BgInput = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  margin-top: 8px;
-  border-top: 1px solid #ebebeb;
-  border-bottom: 1px solid #ebebeb;
-
-  input[type='file'] {
-    display: none;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    color: #0645ad;
-    font-size: 16;
-    font-weight: 700;
-    cursor: pointer;
-  }
-`
-export const FixImage = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-`
-
-export const ActionButtons = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 65%;
-  margin: 0 auto;
-  margin-top: 16px;
-  align-items: center;
-
-  button {
-    color: #0b0080;
-    font-family: 'PT Sans', 'PTSans-Bold';
-    font-size: 16px;
-    font-weight: 700;
-    background: none;
-    border: none;
-
-    :last-child {
-      justify-content: center;
-      padding: 9px 16px;
-      height: 48px;
-      border: none;
-      cursor: pointer;
-      border-radius: 8px;
-      font-family: 'Work Sans';
-      font-style: normal;
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 19px;
-      box-shadow: none;
-      background-color: #ff4d0d;
-      color: #ffffff;
-    }
-
-    :hover {
-      cursor: pointer;
-    }
-  }
-`