frst-components 0.20.45 → 0.20.48

package/dist/index.js

@@ -8061,17 +8061,24 @@ const ListCounters = styled__default["default"].div `
   right: 50%;
 `;
 const Counters = styled__default["default"].button `
-  width: 16px;
-  height: 16px;
+  width: 11px;
+  height: 11px;
   box-sizing: border-box;
   border-radius: 100%;
   border: none;
   background-color: ${({ selected, theme }) => (selected ? theme.colors.primary1 : theme.colors.neutralsGrey5)};
 `;
-const Title$1 = styled__default["default"].div `
+const Title$1 = styled__default["default"].h2 `
   font-size: 40px;
   font-weight: 700;
-  max-width: 40rem;
+  max-width: 60vw;
+  margin-top: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   @media (max-width: 320px) {
     word-break: break-word;
     font-size: 25px;
@@ -8080,7 +8087,6 @@ const Title$1 = styled__default["default"].div `
 const Description$1 = styled__default["default"].div `
   font-size: 16px;
   font-weight: 400;
-  margin-top: 32px;
   max-width: 44rem;
   height: fit-content;
   ${(props) => !props.zeroHeigthDescription &&
@@ -8115,16 +8121,12 @@ const Description$1 = styled__default["default"].div `
   }
 `;
 const SpaceProgressAndButton = styled__default["default"].div `
-  margin-top: 68px;
   display: flex;
-  height: 50px;
   gap: 28px;
   align-items: center;
-  margin-bottom: 2rem;
   cursor: pointer;
   @media (max-width: 414px) {
     flex-direction: column;
-    margin-top: 40px;
   }
   @media (max-width: 320px) {
     font-size: 14px;
@@ -8145,8 +8147,6 @@ styled__default["default"].div `
   }
 `;
 const SpaceButtonTop = styled__default["default"].div `
-  margin-top: 48px;
-  margin-bottom: 2rem;
   button {
     @media (max-width: 320px) {
       font-size: 14px;
@@ -8154,28 +8154,59 @@ const SpaceButtonTop = styled__default["default"].div `
   }
 `;
 const SpaceButtonTopViewMore = styled__default["default"].section `
-  margin-top: 1rem;
-  margin-bottom: 1rem;
   display: flex;
   cursor: pointer;
-  svg {
-    rotate: 269deg;
-    margin-top: 0.2rem;
-    margin-left: 0.5rem;
-    ${(props) => !props.zeroHeigthDescription
-    ? styled.css `
-            transform: rotate(3.142rad);
-            transition: transform 0.5s;
-          `
-    : styled.css `
-            transform: rotate(360deg);
-            transition: transform 0.5s;
-          `}
+  align-items: center;
+  gap: 10px;
+
+  &.open {
+    margin-top: -20px;
+  }
+  &.closed {
+    margin-top: 0;
+  }
+
+  > span {
+    transform: rotate(90deg);
+
+    &.open {
+      animation: 0.2s open both;
+    }
+    &.closed {
+      animation: 0.2s closed both;
+    }
   }
   a {
     color: #649af3;
     font-weight: 700;
   }
+
+  @keyframes open {
+    to {
+      transform: rotate(450deg);
+    }
+  }
+
+  @keyframes closed {
+    to {
+      transform: rotate(-90deg);
+    }
+  }
+`;
+const StyleHeaderInProgress = styled__default["default"].div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  > section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
 `;
 
 function HeaderContent(props) {
@@ -8201,10 +8232,10 @@ function HeaderContent(props) {
         }
     }
     function RecomendationHeader(item) {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, { children: item.title }), jsxRuntime.jsx(Description$1, { zeroHeigthDescription: zeroHeigthDescription, children: item.description }), jsxRuntime.jsxs(SpaceButtonTopViewMore, { zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsxRuntime.jsx(Button$5, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsxRuntime.jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' })] }), jsxRuntime.jsx(SpaceButtonTop, { onClick: item.onClick, children: jsxRuntime.jsx(Button$5, { label: item.labelButton, variant: "primary" }) })] }));
+        return (jsxRuntime.jsxs(StyleHeaderInProgress, { children: [jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(Title$1, { children: item.title }), jsxRuntime.jsx(Description$1, { zeroHeigthDescription: zeroHeigthDescription, children: item.description }), jsxRuntime.jsxs(SpaceButtonTopViewMore, { className: zeroHeigthDescription ? 'open' : 'closed', zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsxRuntime.jsx(Button$5, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsxRuntime.jsx("span", { className: zeroHeigthDescription ? 'open' : 'closed', children: jsxRuntime.jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' }) })] })] }), jsxRuntime.jsx(SpaceButtonTop, { onClick: item.onClick, children: jsxRuntime.jsx(Button$5, { label: item.labelButton, variant: "primary" }) })] }));
     }
     function InProgressHeader(item) {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, { children: item.title }), jsxRuntime.jsx(Description$1, { zeroHeigthDescription: zeroHeigthDescription, children: item.description }), jsxRuntime.jsxs(SpaceButtonTopViewMore, { zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsxRuntime.jsx(Button$5, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsxRuntime.jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' })] }), jsxRuntime.jsxs(SpaceProgressAndButton, { children: [jsxRuntime.jsx(ProgressBar$1, { value: item.progresso, label: item.channel, style: { width: 200 } }), jsxRuntime.jsx(Button$5, { label: item.labelButton, variant: "primary", handleClick: item.onClick })] })] }));
+        return (jsxRuntime.jsxs(StyleHeaderInProgress, { children: [jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(Title$1, { title: item.title, children: item.title }), jsxRuntime.jsx(Description$1, { zeroHeigthDescription: zeroHeigthDescription, children: item.description }), jsxRuntime.jsxs(SpaceButtonTopViewMore, { className: zeroHeigthDescription ? 'open' : 'closed', zeroHeigthDescription: zeroHeigthDescription, onClick: addHeigthDescription, children: [jsxRuntime.jsx(Button$5, { label: textView, variant: "link", style: { color: '#649AF3', fontWeight: '900' } }), jsxRuntime.jsx("span", { className: zeroHeigthDescription ? 'open' : 'closed', children: jsxRuntime.jsx(ArrowScrollRight, { fill: "#649AF3", width: "13px", height: "13px", strokeWidth: '4' }) })] })] }), jsxRuntime.jsxs(SpaceProgressAndButton, { children: [jsxRuntime.jsx(ProgressBar$1, { value: item.progresso, label: item.channel, style: { width: 200 } }), jsxRuntime.jsx(Button$5, { label: item.labelButton, variant: "primary", handleClick: item.onClick })] })] }));
     }
     return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(Container$9, { style: { ...props.style }, children: [props.listaRecomendacao.map((item, index) => {
                     return (jsxRuntime.jsx(HeaderImage$1, { img: item.bgImg, tmnDescription: item.description.length, onDisplay: index === selectedContent, style: { ...props.style }, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: item.typeOfHeader === 'inProgress' ? (jsxRuntime.jsx(Content, { height: props?.height, onDisplay: index === selectedContent, children: InProgressHeader(item) })) : (jsxRuntime.jsx(Content, { height: props?.height, onDisplay: index === selectedContent, children: RecomendationHeader(item) })) }) }, index));

package/dist/src/components/LXP/headerContent/headerContent.d.ts

@@ -12,11 +12,12 @@ export declare const ListCounters: import("styled-components").StyledComponent<"
 export declare const Counters: import("styled-components").StyledComponent<"button", any, {
     selected: boolean;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, HeaderContentProps, never>;
 export declare const SpaceProgressAndButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SpaceButtonLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SpaceButtonTop: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SpaceButtonTopViewMore: import("styled-components").StyledComponent<"section", any, HeaderContentProps, never>;
+export declare const StyleHeaderInProgress: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};
 //# sourceMappingURL=headerContent.d.ts.map

package/dist/src/components/LXP/headerContent/headerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/headerContent/headerContent.ts"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,eAAO,MAAM,SAAS,oEAGrB,CAAA;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAA;AACD,eAAO,MAAM,OAAO,oFAenB,CAAA;AAED,eAAO,MAAM,YAAY,oEAUxB,CAAA;AAED,eAAO,MAAM,QAAQ;cAA6B,OAAO;SAOxD,CAAA;AAED,eAAO,MAAM,KAAK,oEAQjB,CAAA;AAED,eAAO,MAAM,WAAW,oFAwCvB,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAelC,CAAA;AACD,eAAO,MAAM,eAAe,oEAa3B,CAAA;AACD,eAAO,MAAM,cAAc,oEAQ1B,CAAA;AAED,eAAO,MAAM,sBAAsB,wFAwBlC,CAAA"}
+{"version":3,"file":"headerContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/headerContent/headerContent.ts"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,eAAO,MAAM,SAAS,oEAGrB,CAAA;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAA;AACD,eAAO,MAAM,OAAO,oFAenB,CAAA;AAED,eAAO,MAAM,YAAY,oEAUxB,CAAA;AAED,eAAO,MAAM,QAAQ;cAA6B,OAAO;SAOxD,CAAA;AAED,eAAO,MAAM,KAAK,mEAejB,CAAA;AAED,eAAO,MAAM,WAAW,oFAuCvB,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAWlC,CAAA;AACD,eAAO,MAAM,eAAe,oEAa3B,CAAA;AACD,eAAO,MAAM,cAAc,oEAM1B,CAAA;AAED,eAAO,MAAM,sBAAsB,wFAuClC,CAAA;AACD,eAAO,MAAM,qBAAqB,oEAcjC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/headerContent/index.tsx"],"names":[],"mappings":";AAQA,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AACD,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,mBAAmB,eA4G/D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/headerContent/index.tsx"],"names":[],"mappings":";AAQA,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AACD,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,mBAAmB,eAuH/D"}

package/package.json

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