frst-components 0.20.0

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

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

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

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

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

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

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

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