frst-components 0.20.20 → 0.20.22

package/dist/index.js

@@ -1233,8 +1233,7 @@ const containerTitleDesafio = styled__default["default"].div `
 const TitleDesafiosWhite = styled__default["default"].div `
   width: 240px;
   height: 24px;
-  background: #ffffff;
-  border: 1px solid #d1d5db;
+  background: rgba(255, 255, 255, 0.8);
   border-radius: 30px;
   font-family: 'Work Sans';
   font-style: normal;
@@ -1244,7 +1243,7 @@ const TitleDesafiosWhite = styled__default["default"].div `
   display: flex;
   align-items: center;
   text-align: center;
-  color: #d14211;
+  color: #1b191a;
   display: flex;
   justify-content: center;
   position: relative;
@@ -1256,7 +1255,6 @@ const TitleDesafiosGrey = styled__default["default"].div `
   width: 240px;
   height: 24px;
   background: rgba(255, 255, 255, 0.4);
-  border: 1px solid #d1d5db;
   border-radius: 30px;
   font-family: 'Work Sans';
   font-style: normal;
@@ -1266,7 +1264,7 @@ const TitleDesafiosGrey = styled__default["default"].div `
   display: flex;
   align-items: center;
   text-align: center;
-  color: #d14211;
+  color: #ffffff;
   display: flex;
   justify-content: center;
   position: relative;
@@ -6332,23 +6330,26 @@ const ContainerGeral$1 = styled__default["default"].div `
   height: 8.5rem;
   align-content: flex-end;
   &:hover .popOver {
-    display: block;
+    display: ${(p) => p.isEdit && 'block'};
   }
   &:hover .hide {
-    visibility: visible;
+    visibility: ${(p) => p.isEdit && 'visible'};
   }
 `;
 const AvatarChannel$2 = styled__default["default"].div `
   width: ${(props) => props.size || '80px'};
   height: ${(props) => props.size || '80px'};
   border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  background: ${(props) => props.image ? `url(${props.image})` : '#6a3f86'};
+  background: ${(props) => (props.image ? `url(${props.image})` : '#6a3f86')};
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: center center;  
+  background-position: center center;
   margin-top: 62px;
-  cursor: pointer;
+  cursor: ${(p) => (p.isEdit ? 'pointer' : 'text')};
   ${(props) => props.variant === 'sideRight' &&
     styled.css `
       margin-left: 8.5rem;
@@ -6364,7 +6365,6 @@ const AvatarChannel$2 = styled__default["default"].div `
     `}
 `;
 const Channel$2 = styled__default["default"].span `
-  position: absolute;
   display: flex;
   align-items: center;
   text-align: center;
@@ -6376,14 +6376,15 @@ const Channel$2 = styled__default["default"].span `
   font-family: 'Work Sans';
   font-weight: 700;
   line-height: 130%;
+  text-transform: uppercase;
 `;
 const AvatarCircle = styled__default["default"].div `
   display: flex;
   width: 100%;
   height: 100%;
-  position: absolute;  
+  position: absolute;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
   visibility: hidden;
 `;
 const AvatarCam = styled__default["default"].div `
@@ -6393,9 +6394,9 @@ const AvatarCam = styled__default["default"].div `
   margin: 0;
   background-color: ${({ theme }) => theme.colors.shadeWhite};
   box-shadow: 0px 18px 40px -15px #d3d3d3;
-  display: flex;  
+  display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
   z-index: 999;
 `;
 const ContainerPopOver = styled__default["default"].div `
@@ -6563,7 +6564,7 @@ function PopOverLXP({ variant, children }) {
                                 : null }));
 }
 
-function AvatarChannel$1({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage }) {
+function AvatarChannel$1({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage, isEdit = false }) {
     const onChange = () => {
         document.getElementById('fileSelector').click();
     };
@@ -6576,9 +6577,13 @@ function AvatarChannel$1({ size, channel, className, disabled, color, handleValu
         handleValueAvatar(file);
         return file;
     };
+    const nameChannel = channel
+        .split(' ')
+        .filter((name, i) => i == 0 || i == channel.split(' ').length - 1)
+        .map((name, i) => name[0])
+        .join('');
     const [image, setImage] = React.useState(sourceImage);
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(ContainerGeral$1, { className: "geral", variant: variantPopOver, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerPopOver, { className: "popOver", variant: variantPopOver, children: jsxRuntime.jsx(PopOverLXP, { children: 'Alterar avatar', variant: variantPopOver, element: undefined }) }), jsxRuntime.jsx("div", { style: { display: 'none' }, children: jsxRuntime.jsx("input", { type: "file", id: "fileSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) }) }), jsxRuntime.jsxs(AvatarChannel$2, { size: size, onClick: onChange, className: className, disabled: disabled, variant: variantPopOver, color: color ? color : '#6a3f86', image: image, children: [!image &&
-                                jsxRuntime.jsx(Channel$2, { children: channel }), jsxRuntime.jsx(AvatarCircle, { className: "hide", children: jsxRuntime.jsx(AvatarCam, { children: jsxRuntime.jsx(Cam, {}) }) })] })] }) }) }));
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(ContainerGeral$1, { className: "geral", isEdit: isEdit, variant: variantPopOver, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerPopOver, { className: "popOver", variant: variantPopOver, children: jsxRuntime.jsx(PopOverLXP, { children: 'Alterar avatar', variant: variantPopOver, element: undefined }) }), jsxRuntime.jsx("div", { style: { display: 'none' }, children: isEdit && (jsxRuntime.jsx("input", { type: "file", id: "fileSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) })) }), jsxRuntime.jsxs(AvatarChannel$2, { size: size, onClick: onChange, className: className, disabled: disabled, variant: variantPopOver, color: color ? color : '#6a3f86', image: image, isEdit: isEdit, children: [!image && jsxRuntime.jsx(Channel$2, { size: size, children: nameChannel }), isEdit && (jsxRuntime.jsx(AvatarCircle, { className: "hide", children: jsxRuntime.jsx(AvatarCam, { children: jsxRuntime.jsx(Cam, {}) }) }))] })] }) }) }));
 }
 
 const ContainerGeral = styled__default["default"].div `

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

@@ -3,15 +3,17 @@ interface AvatarI {
     src?: any;
     disabled?: boolean;
     color?: string;
-    image: any;
+    image?: any;
     variant?: string;
+    isEdit?: boolean;
 }
 interface PropsPopOver {
     variant: string;
+    isEdit?: boolean;
 }
 export declare const ContainerGeral: import("styled-components").StyledComponent<"div", any, PropsPopOver, never>;
 export declare const AvatarChannel: import("styled-components").StyledComponent<"div", any, AvatarI, never>;
-export declare const Channel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Channel: import("styled-components").StyledComponent<"span", any, AvatarI, never>;
 export declare const AvatarCircle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AvatarCam: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerPopOver: import("styled-components").StyledComponent<"div", any, PropsPopOver, never>;

package/dist/src/components/LXP/avatarChannel/avatarChannelStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatarChannelStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/avatarChannelStyles.ts"],"names":[],"mappings":"AAEA,UAAU,OAAO;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,cAAc,8EAU1B,CAAA;AACD,eAAO,MAAM,aAAa,yEA0BzB,CAAA;AAED,eAAO,MAAM,OAAO,qEAanB,CAAA;AACD,eAAO,MAAM,YAAY,oEAQxB,CAAA;AACD,eAAO,MAAM,SAAS,oEAWrB,CAAA;AACD,eAAO,MAAM,gBAAgB,8EA2B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAElC,CAAA"}
+{"version":3,"file":"avatarChannelStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/avatarChannelStyles.ts"],"names":[],"mappings":"AAEA,UAAU,OAAO;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,cAAc,8EAU1B,CAAA;AACD,eAAO,MAAM,aAAa,yEA6BzB,CAAA;AAED,eAAO,MAAM,OAAO,0EAanB,CAAA;AACD,eAAO,MAAM,YAAY,oEAQxB,CAAA;AACD,eAAO,MAAM,SAAS,oEAWrB,CAAA;AACD,eAAO,MAAM,gBAAgB,8EA2B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAElC,CAAA"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import '../../../shared/global.css';
 import { IAvatar } from './avatarChannel';
-export default function AvatarChannel({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage }: IAvatar): JSX.Element;
+export default function AvatarChannel({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage, isEdit }: IAvatar): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/LXP/avatarChannel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAInC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAKzC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,WAAW,EACZ,EAAE,OAAO,eAwDT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAInC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAKzC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,MAAc,EACf,EAAE,OAAO,eAgET"}

package/dist/src/components/quantidadeDesafios/quantidadeDesafios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quantidadeDesafios.d.ts","sourceRoot":"","sources":["../../../../src/components/quantidadeDesafios/quantidadeDesafios.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,oEAI7B,CAAA;AACD,eAAO,MAAM,oBAAoB,oEAWhC,CAAA;AAED,eAAO,MAAM,WAAW,oEAQvB,CAAA;AAED,eAAO,MAAM,iBAAiB,oEAuC7B,CAAA;AAED,eAAO,MAAM,qBAAqB,oEAMjC,CAAA;AAED,eAAO,MAAM,kBAAkB,oEAqB9B,CAAA;AACD,eAAO,MAAM,iBAAiB,oEAkB7B,CAAA"}
+{"version":3,"file":"quantidadeDesafios.d.ts","sourceRoot":"","sources":["../../../../src/components/quantidadeDesafios/quantidadeDesafios.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,oEAI7B,CAAA;AACD,eAAO,MAAM,oBAAoB,oEAWhC,CAAA;AAED,eAAO,MAAM,WAAW,oEAQvB,CAAA;AAED,eAAO,MAAM,iBAAiB,oEAuC7B,CAAA;AAED,eAAO,MAAM,qBAAqB,oEAMjC,CAAA;AAED,eAAO,MAAM,kBAAkB,oEAoB9B,CAAA;AACD,eAAO,MAAM,iBAAiB,oEAiB7B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frst-components",
   "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-  "version": "0.20.20",
+  "version": "0.20.22",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",