fix(FullscreenModal): fix various comments

src/components/FullscreenModal/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { getColor, pxToRem } from '../../../utils/helpers';
 import { FlexContainer } from '../../FlexContainer';
-import { ScrollToTop } from '../ScrollToTop';
+import { ScrollToTopButton } from '../ScrollToTopButton';
 import { useStickyFooter } from '../hooks/useStickyFooter';
 import { Col, Container, Row } from '../../layout';
 import { FooterProps } from './Footer.types';
@@ -29,6 +29,7 @@ const Footer: React.FC<FooterProps> = ({
   width,
   offset,
   modalRef,
+  scrollToTopButtonLabel,
 }) => {
   const modalFooterRef = useRef(null);
   const { isFixed, shouldShowScrollToTopButton } = useStickyFooter(
@@ -61,7 +62,10 @@ const Footer: React.FC<FooterProps> = ({
             justifyContent="center"
             margin={{ vertical: 1.2 }}
           >
-            <ScrollToTop onClick={scrollToTop} />
+            <ScrollToTopButton
+              label={scrollToTopButtonLabel}
+              onClick={scrollToTop}
+            />
           </FlexContainer>
         )}
       </BaseFooter>
@@ -75,6 +79,7 @@ Footer.propTypes = {
   modalRef: PropTypes.exact({
     current: PropTypes.instanceOf(HTMLElement),
   }).isRequired,
+  scrollToTopButtonLabel: PropTypes.string,
 };
 
 export default Footer;

src/components/FullscreenModal/Footer/Footer.types.ts

@@ -2,4 +2,5 @@ export interface FooterProps {
   width: number;
   offset: number;
   modalRef: React.MutableRefObject<HTMLElement>;
+  scrollToTopButtonLabel: string;
 }

src/components/FullscreenModal/FullscreenModal.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
+import { action } from '@storybook/addon-actions';
 
 import { FlexContainer } from '../FlexContainer';
 import { Button } from '../Button';
@@ -89,6 +90,7 @@ export const SingleColumn6: Story = () => (
     footer={Footer()}
     header={header}
     layout={FullscreenModalLayouts.single6}
+    onClose={action('close modal')}
   />
 );
 SingleColumn6.storyName = 'Single Column (layout: single-6)';
@@ -113,6 +115,15 @@ SingleColumn6.argTypes = {
     description: 'Content of the sidebar wrapper',
     table: { type: { summary: 'React.node' } },
   },
+  scrollToTopButtonLabel: {
+    control: { disable: true },
+    description: 'Label of the scroll to top button',
+    table: { defaultValue: { summary: '"Scroll to top"' } },
+  },
+  onClose: {
+    control: { disable: true },
+    description: 'Modal window close handler',
+  },
 };
 
 export const SingleColumn8: Story = () => (
@@ -121,6 +132,7 @@ export const SingleColumn8: Story = () => (
     footer={Footer()}
     header={header}
     layout={FullscreenModalLayouts.single8}
+    onClose={action('close modal')}
   />
 );
 
@@ -133,6 +145,7 @@ export const Sidebar4Column6: Story = () => (
     header={header}
     layout={FullscreenModalLayouts.sidebar46}
     sidebar={Sidebar()}
+    onClose={action('close modal')}
   />
 );
 Sidebar4Column6.storyName = 'Two Columns with sidebar (layout: sidebar-4-6)';
@@ -143,7 +156,8 @@ export const Sidebar4Column8: Story = () => (
     footer={Footer()}
     header={header}
     layout={FullscreenModalLayouts.sidebar48}
-    // sidebar={Sidebar()}
+    sidebar={Sidebar()}
+    onClose={action('close modal')}
   />
 );
 Sidebar4Column8.storyName = 'Two Columns with sidebar (layout: sidebar-4-8)';
@@ -154,5 +168,6 @@ export const WithLongContent: Story = () => (
     footer={Footer()}
     header={header}
     layout={FullscreenModalLayouts.single6}
+    onClose={action('close modal')}
   />
 );

src/components/FullscreenModal/FullscreenModal.tsx

@@ -11,8 +11,8 @@ import { ColumnConfigMap, FullscreenModalProps } from './FullscreenModal.types';
 import { Col, Container, Row } from '../layout';
 
 const BaseModal = styled.div`
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   position: fixed;
   top: 0;
   left: 0;
@@ -50,22 +50,22 @@ const FullscreenModal: React.FC<FullscreenModalProps> = ({
   content,
   sidebar,
   footer,
+  scrollToTopButtonLabel,
   onClose = noop,
 }) => {
   const modalRef = useRef<HTMLDivElement>(null);
 
   const {
-    header: headerConfig,
-    sidebar: sidebarConfig,
-    content: contentConfig,
+    header: [headerCols, headerOffset],
+    sidebar: [sidebarCols, sidebarOffset],
+    content: [contentCols, contentOffset],
   } = columnConfigMap[layout];
 
-  const hasLayoutSidebar = sidebarConfig[0] > 0;
-  const totalContentWidth = contentConfig[0] + sidebarConfig[0];
+  const hasLayoutSidebar = sidebarCols > 0;
+  const totalContentWidth = contentCols + sidebarCols;
 
   if (hasLayoutSidebar && isUndefined(sidebar)) {
-    // eslint-disable-next-line no-console
-    console.error(
+    throw new Error(
       `You chose to use modal layout with sidebar (current: ${layout}) but you didn't provide sidebar content.
 You should either provide content in "sidebar" property or switch layout to "${FullscreenModalLayouts.single6}" or "${FullscreenModalLayouts.single8}"
 `,
@@ -76,11 +76,11 @@ You should either provide content in "sidebar" property or switch layout to "${F
     <BaseModal ref={modalRef}>
       <Container>
         <Row>
-          <Col cols={headerConfig[0]} offset={headerConfig[1]}>
+          <Col cols={headerCols} offset={headerOffset}>
             <ModalHeader
               handleClose={onClose}
               modalRef={modalRef}
-              offset={headerConfig[1]}
+              offset={headerOffset}
               width={totalContentWidth}
             >
               {header}
@@ -89,15 +89,16 @@ You should either provide content in "sidebar" property or switch layout to "${F
         </Row>
         <Row>
           {hasLayoutSidebar && (
-            <Col cols={sidebarConfig[0]} offset={sidebarConfig[1]}>
+            <Col cols={sidebarCols} offset={sidebarOffset}>
               {sidebar}
             </Col>
           )}
-          <Col cols={contentConfig[0]} offset={contentConfig[1]}>
+          <Col cols={contentCols} offset={contentOffset}>
             {content}
             <ModalFooter
               modalRef={modalRef}
-              offset={headerConfig[1]}
+              offset={headerOffset}
+              scrollToTopButtonLabel={scrollToTopButtonLabel}
               width={totalContentWidth}
             >
               {footer}
@@ -113,9 +114,10 @@ FullscreenModal.propTypes = {
   header: PropTypes.node.isRequired,
   content: PropTypes.node.isRequired,
   footer: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
   sidebar: PropTypes.node,
   layout: PropTypes.oneOf(Object.values(FullscreenModalLayouts)),
-  onClose: PropTypes.func,
+  scrollToTopButtonLabel: PropTypes.string,
 };
 
 export default FullscreenModal;

src/components/FullscreenModal/FullscreenModal.types.ts

@@ -16,5 +16,6 @@ export interface FullscreenModalProps {
   content: React.ReactNode;
   footer: React.ReactNode;
   sidebar?: React.ReactNode;
-  onClose?: () => void;
+  scrollToTopButtonLabel?: string;
+  onClose: () => void;
 }

src/components/FullscreenModal/ScrollToTop/ScrollToTop.tsx → src/components/FullscreenModal/ScrollToTopButton/ScrollToTopButton.tsx

@@ -8,9 +8,9 @@ import { Button } from '../../Button';
 import { ButtonColors, ButtonVariants } from '../../Button/Button.enums';
 import { Icon } from '../../Icon';
 import { SSCIconNames } from '../../Icon/Icon.enums';
-import { ScrollToTopProps } from './ScrollToTop.types';
+import { ScrollToTopButtonProps } from './ScrollToTopButton.types';
 
-const ScrollToTopButton = styled(Button)`
+const StyledButton = styled(Button)`
   flex-direction: column;
   justify-content: center;
   height: ${pxToRem(48)};
@@ -23,7 +23,10 @@ const ButtonText = styled.span`
   margin-top: ${pxToRem(4)};
 `;
 
-const ScrollToTop: React.FC<ScrollToTopProps> = ({ onClick = undefined }) => {
+const ScrollToTopButton: React.FC<ScrollToTopButtonProps> = ({
+  onClick,
+  label = 'Scroll to top',
+}) => {
   const handleClick = () => {
     if (isNotUndefined(onClick)) {
       onClick();
@@ -33,19 +36,20 @@ const ScrollToTop: React.FC<ScrollToTopProps> = ({ onClick = undefined }) => {
   };
 
   return (
-    <ScrollToTopButton
+    <StyledButton
       color={ButtonColors.secondary}
       variant={ButtonVariants.text}
       onClick={handleClick}
     >
       <Icon name={SSCIconNames.arrowUp} />
-      <ButtonText>Scroll to top</ButtonText>
-    </ScrollToTopButton>
+      <ButtonText>{label}</ButtonText>
+    </StyledButton>
   );
 };
 
-ScrollToTop.propTypes = {
+ScrollToTopButton.propTypes = {
+  label: PropTypes.string,
   onClick: PropTypes.func,
 };
 
-export default ScrollToTop;
+export default ScrollToTopButton;

src/components/FullscreenModal/ScrollToTopButton/ScrollToTopButton.types.ts

@@ -0,0 +1,4 @@
+export interface ScrollToTopButtonProps {
+  onClick?: () => void;
+  label?: string;
+}

src/components/FullscreenModal/ScrollToTopButton/index.ts

@@ -0,0 +1 @@
+export { default as ScrollToTopButton } from './ScrollToTopButton';

src/components/FullscreenModal/hooks/useStickyFooter.ts

@@ -40,13 +40,11 @@ export const useStickyFooter = (
       modalRef.current.scrollTop + modalRef.current.offsetHeight;
     const contentHeight =
       modalRef.current.scrollHeight - modalFooterRef.current.scrollHeight;
+    const fixedAtThreshold = contentHeight * 0.001;
 
     if (isFixed && scrollOffset >= contentHeight) {
       setIsFixed(false);
-    } else if (
-      !isFixed &&
-      scrollOffset < contentHeight - contentHeight * 0.001
-    ) {
+    } else if (!isFixed && scrollOffset < contentHeight - fixedAtThreshold) {
       setIsFixed(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps