Feat/adjusts components lxp

package.json

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

src/components/LXP/headerContent/headerContent.stories.tsx

@@ -7,13 +7,14 @@ export default {
   component: HeaderContent
 }
 
-const Template = (args) => <HeaderContent {...args}/>
+const Template = (args) => <HeaderContent {...args} />
 
 export const InProgress = Template.bind({})
 InProgress.args = {
   autoplayTime: 5000,
   textViewMore: 'Ver mais',
   textViewLess: 'Ver menos',
+  height: '365px',
   listaRecomendacao: [
     {
       title: 'Blockchain e criptomoedas',

src/components/LXP/headerContent/headerContent.ts

@@ -5,6 +5,7 @@ interface HeaderContentProps {
   zeroHeigthDescription?: boolean
   tmnDescription?: number
   onDisplay?: boolean
+  height?: number | string
 }
 
 export const Container = styled.div`
@@ -26,7 +27,7 @@ export const HeaderImage = styled.div<HeaderContentProps>`
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
-  
+
   ${(props) =>
     props.tmnDescription < 164 &&
     css`
@@ -35,7 +36,7 @@ export const HeaderImage = styled.div<HeaderContentProps>`
       }
     `}
   @media (max-width: 834px) {
-    height: 450px;
+    height: ${(props) => props.height ?? '450px'};
     ${(props) =>
       props.tmnDescription >= 134 &&
       css`
@@ -46,29 +47,32 @@ export const HeaderImage = styled.div<HeaderContentProps>`
   }
 
   ${(props) =>
-    props.onDisplay ?
-      css` width: 100%;`
-    :
-      css` width: 0px;`
-  }
+    props.onDisplay
+      ? css`
+          width: 100%;
+        `
+      : css`
+          width: 0px;
+        `}
 
   @media (max-width: 414px) {
-    height: 450px;
+    height: ${(props) => props.height ?? '450px'};
   }
   @media (max-width: 320px) {
-    height: 450px;
+    height: ${(props) => props.height ?? '450px'};
   }
 `
 export const Content = styled.div<HeaderContentProps>`
   width: 100%;
-  height: 450px;
+  height: ${(props) => props.height ?? '450px'};
   padding: 64px;
   background: linear-gradient(52deg, #111111 0%, rgba(17, 17, 17, 0) 100%);
-  
+
   ${(props) =>
     !props.onDisplay &&
-      css` display: none;`
-  }
+    css`
+      display: none;
+    `}
 
   @media (max-width: 414px) {
     padding: 2rem;
@@ -85,16 +89,15 @@ export const ListCounters = styled.div`
   margin-bottom: 36px;
   bottom: 0;
   right: 50%;
-
 `
 
-export const Counters = styled.button<{selected : boolean}>`
+export const Counters = styled.button<{ selected: boolean }>`
   width: 16px;
   height: 16px;
   box-sizing: border-box;
   border-radius: 100%;
   border: none;
-  background-color: ${({selected, theme}) => selected ? theme.colors.primary1 : theme.colors.neutralsGrey5 };
+  background-color: ${({ selected, theme }) => (selected ? theme.colors.primary1 : theme.colors.neutralsGrey5)};
 `
 
 export const Title = styled.div`

src/components/LXP/headerContent/index.tsx

@@ -15,13 +15,15 @@ interface objPropiedades {
   channel?: string
   onClick?: () => void
   labelButton?: string
+  height?: number | string
 }
 interface HeaderContentParams {
   textViewMore?: string
   textViewLess?: string
   autoplayTime?: number
   listaRecomendacao: Array<objPropiedades>
   style?: React.CSSProperties
+  height?: number | string
 }
 
 export default function HeaderContent(props: HeaderContentParams) {
@@ -30,11 +32,14 @@ export default function HeaderContent(props: HeaderContentParams) {
   const [textView, setTextView] = useState(props.textViewMore)
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setSelectedContent(selectedContent < (props.listaRecomendacao.length - 1) ? selectedContent + 1 : 0)
-      setzeroHeigthDescription(false)
-      setTextView(props.textViewMore)
-    }, props.autoplayTime ? props.autoplayTime : 10000)
+    const timer = setTimeout(
+      () => {
+        setSelectedContent(selectedContent < props.listaRecomendacao.length - 1 ? selectedContent + 1 : 0)
+        setzeroHeigthDescription(false)
+        setTextView(props.textViewMore)
+      },
+      props.autoplayTime ? props.autoplayTime : 10000
+    )
     return () => clearTimeout(timer)
   }, [selectedContent])
 
@@ -84,36 +89,47 @@ export default function HeaderContent(props: HeaderContentParams) {
           <ArrowScrollRight fill="#649AF3" width="13px" height="13px" strokeWidth={'4'} />
         </styledHeaderContent.SpaceButtonTopViewMore>
         <styledHeaderContent.SpaceProgressAndButton>
-          <ProgressBar value={item.progresso} label={item.channel} style={{width: 200}}/>
-          <Button label={item.labelButton} variant="primary" handleClick={item.onClick}/>
+          <ProgressBar value={item.progresso} label={item.channel} style={{ width: 200 }} />
+          <Button label={item.labelButton} variant="primary" handleClick={item.onClick} />
         </styledHeaderContent.SpaceProgressAndButton>
       </>
     )
   }
 
   return (
     <ThemeProvider theme={FRSTTheme}>
-      <styledHeaderContent.Container style={{...props.style}}>
+      <styledHeaderContent.Container style={{ ...props.style }}>
         {props.listaRecomendacao.map((item, index) => {
           return (
-            <styledHeaderContent.HeaderImage key={index} img={item.bgImg} tmnDescription={item.description.length} onDisplay={index === selectedContent} style={{...props.style}}>
+            <styledHeaderContent.HeaderImage
+              key={index}
+              img={item.bgImg}
+              tmnDescription={item.description.length}
+              onDisplay={index === selectedContent}
+              style={{ ...props.style }}
+            >
               <>
                 {item.typeOfHeader === 'inProgress' ? (
-                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{InProgressHeader(item)}</styledHeaderContent.Content>
+                  <styledHeaderContent.Content height={props?.height} onDisplay={index === selectedContent}>
+                    {InProgressHeader(item)}
+                  </styledHeaderContent.Content>
                 ) : (
-                  <styledHeaderContent.Content onDisplay={index === selectedContent}>{RecomendationHeader(item)}</styledHeaderContent.Content>
+                  <styledHeaderContent.Content height={props?.height} onDisplay={index === selectedContent}>
+                    {RecomendationHeader(item)}
+                  </styledHeaderContent.Content>
                 )}
               </>
             </styledHeaderContent.HeaderImage>
           )
         })}
         <styledHeaderContent.ListCounters>
-          {Array.from({ length : props.listaRecomendacao.length}).map((_,index) =>
-            <styledHeaderContent.Counters key={index} 
+          {Array.from({ length: props.listaRecomendacao.length }).map((_, index) => (
+            <styledHeaderContent.Counters
+              key={index}
               selected={index === selectedContent}
-              onClick={() => setSelectedContent(index)}   
+              onClick={() => setSelectedContent(index)}
             />
-          )}
+          ))}
         </styledHeaderContent.ListCounters>
       </styledHeaderContent.Container>
     </ThemeProvider>

src/components/global-menu/globalMenuStyles.ts

@@ -81,7 +81,7 @@ export const WrapperIconNotificationMobile = styled.div`
 
 export const SubMenuContainer = styled.div<IMenuContainer>`
   width: 100%;
-  height: 32px;
+  height: 50px;
   ${(props) =>
     props.marginTop &&
     css`

src/components/scroll-container/index.tsx

@@ -23,7 +23,8 @@ export default function ScrollContainer({
   marginsArrowButton,
   horizontalMarginInternScroll,
   refreshResize,
-  widthProtectClick
+  widthProtectClick,
+  hiddenHorizontalScrollBar
 }: IScrollContainer) {
   const [actionAreaButtonLeft, setActionAreaButtonLeft] = useState(false)
   const [actionAreaButtonRight, setActionAreaButtonRight] = useState(false)
@@ -84,7 +85,7 @@ export default function ScrollContainer({
 
   return (
     <ThemeProvider theme={FRSTTheme}>
-      <div style={{ ...styles, position: 'relative'}} className={className}>
+      <div style={{ ...styles, position: 'relative' }} className={className}>
         <WrapperHorizontal>
           {isVisibleControlsButtons && positionArrowButton != 'bottom' && (
             <ButtonArrow
@@ -103,6 +104,7 @@ export default function ScrollContainer({
           <WrapperContent
             id={iDScroll}
             paddingIntern={horizontalMarginInternScroll ? horizontalMarginInternScroll : '150px'}
+            hiddenHorizontalScrollBar={hiddenHorizontalScrollBar}
           >
             {children}
           </WrapperContent>

src/components/scroll-container/scrollContainer.d.ts

@@ -1,18 +1,19 @@
-import React from "react"
+import React from 'react'
 
 export interface IScrollContainer {
-    children?: any,
-    type?: string,
-    stepMove?: number,
-    isVisibleControlsButtons?: boolean,
-    handleClick?:() => void, 
-    className?: string,
-    styles?: any,
-    sizeArrowButton?: number,
-    marginsArrowButton?: number,
-    horizontalMarginInternScroll?: string,
-    positionArrowButton?: string,
-    marginTopArrrowButton?: string,
-    refreshResize?: number
-    widthProtectClick?: number
+  children?: any
+  type?: string
+  stepMove?: number
+  isVisibleControlsButtons?: boolean
+  handleClick?: () => void
+  className?: string
+  styles?: any
+  sizeArrowButton?: number
+  marginsArrowButton?: number
+  horizontalMarginInternScroll?: string
+  positionArrowButton?: string
+  marginTopArrrowButton?: string
+  refreshResize?: number
+  widthProtectClick?: number
+  hiddenHorizontalScrollBar?: boolean
 }

src/components/scroll-container/scrollContainer.stories.tsx

@@ -4,42 +4,69 @@ import ScrollContainer from './index'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-    title: 'Learning Tech/Scroll Container',
-    component: ScrollContainer,
+  title: 'Learning Tech/Scroll Container',
+  component: ScrollContainer
 }
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template = (args) => <ScrollContainer {...args} />
 
 export const normal = Template.bind({})
 normal.args = {
-    type: "horizontal",
-    stepMove: 100,
-    isVisibleControlsButtons: true,
-    handleClick: (e : any) => { alert(e) }, 
-    className: null,
-    styles: {marginLeft:'0'},
-    sizeArrowButton: 80,
-    marginsArrowButton: 50,
-    children: 
+  type: 'horizontal',
+  stepMove: 100,
+  isVisibleControlsButtons: true,
+  handleClick: (e: any) => {
+    alert(e)
+  },
+  className: null,
+  styles: { marginLeft: '0' },
+  sizeArrowButton: 80,
+  marginsArrowButton: 50,
+  children: (
     <>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     </>
+  )
 }
 
 export const bottom = Template.bind({})
 bottom.args = {
-    type: "horizontal",
-    stepMove: 100,
-    isVisibleControlsButtons: true,
-    handleClick: (e : any) => { alert(e) }, 
-    className: null,
-    styles: {marginLeft:'0'},
-    sizeArrowButton: 80,
-    marginsArrowButton: 50,
-    positionArrowButton: 'bottom',
-    children: 
+  type: 'horizontal',
+  stepMove: 100,
+  isVisibleControlsButtons: true,
+  handleClick: (e: any) => {
+    alert(e)
+  },
+  className: null,
+  styles: { marginLeft: '0' },
+  sizeArrowButton: 80,
+  marginsArrowButton: 50,
+  positionArrowButton: 'bottom',
+  children: (
     <>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     </>
+  )
+}
+
+export const HiddenHorizontalScrool = Template.bind({})
+HiddenHorizontalScrool.args = {
+  type: 'horizontal',
+  stepMove: 100,
+  isVisibleControlsButtons: true,
+  handleClick: (e: any) => {
+    alert(e)
+  },
+  className: null,
+  styles: { marginLeft: '0' },
+  sizeArrowButton: 80,
+  marginsArrowButton: 50,
+  positionArrowButton: 'bottom',
+  hiddenHorizontalScrollBar: true,
+  children: (
+    <>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    </>
+  )
 }

src/components/scroll-container/scrollContainerStyles.ts

@@ -17,11 +17,11 @@ export const WrapperHorizontal = styled.div`
   height: auto;
 `
 
-export const WrapperContent = styled.div<{ paddingIntern?: string }>`
+export const WrapperContent = styled.div<{ paddingIntern?: string; hiddenHorizontalScrollBar: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
-  overflow-x: scroll;
+  overflow-x: ${({ hiddenHorizontalScrollBar }) => (hiddenHorizontalScrollBar ? 'hidden' : 'scroll')};
   overflow-y: hidden;
   white-space: nowrap;