From 23de7a203e648f1b1013a5ca7f0bbb1cf486b5df Mon Sep 17 00:00:00 2001 From: Noreen Sulehry Date: Fri, 26 Jul 2024 12:39:09 -0500 Subject: [PATCH 1/8] CHAL-16: Fixed page height --- .storybook/main.ts | 1 - .../utils/page-container/page-container.snapshot.tsx | 9 +++++++++ src/components/utils/page-container/page-container.tsx | 2 +- src/components/utils/page-container/styles.module.scss | 4 +++- src/styles/partials/variables/_navigation.scss | 3 ++- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index b259b2ef..3c8ebb23 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -27,6 +27,5 @@ const config: StorybookConfig = { babel: { presets: ['next/babel'], }, - }; export default config; diff --git a/src/__tests__/unit/components/utils/page-container/page-container.snapshot.tsx b/src/__tests__/unit/components/utils/page-container/page-container.snapshot.tsx index 09f14767..0d6d4312 100644 --- a/src/__tests__/unit/components/utils/page-container/page-container.snapshot.tsx +++ b/src/__tests__/unit/components/utils/page-container/page-container.snapshot.tsx @@ -8,4 +8,13 @@ describe('PageContainer', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + it('applies the correct min-height style.', () => { + const { getByTestId } = render(); + const pageContainer = getByTestId('page-container'); + const navbarHeight = '57px'; + const footerHeight = '60px'; //footer padding 30x top and bottom + const expectedMinHeight = `calc(100vh - ${navbarHeight} - ${footerHeight})`; + + expect(pageContainer).toHaveStyle(`min-height: ${expectedMinHeight}`); + }); }); diff --git a/src/components/utils/page-container/page-container.tsx b/src/components/utils/page-container/page-container.tsx index c0a95afd..c84ba671 100644 --- a/src/components/utils/page-container/page-container.tsx +++ b/src/components/utils/page-container/page-container.tsx @@ -7,7 +7,7 @@ import styles from './styles.module.scss'; */ export function PageContainer({ children }: PropsWithChildren) { return ( -
+
{children}
); diff --git a/src/components/utils/page-container/styles.module.scss b/src/components/utils/page-container/styles.module.scss index d8fedb51..defcdbc8 100644 --- a/src/components/utils/page-container/styles.module.scss +++ b/src/components/utils/page-container/styles.module.scss @@ -4,7 +4,9 @@ display: flex; justify-content: center; width: 100%; - height: 100%; + //height: 100%; + //Calculate minimum height of the page + min-height: calc(100vh - #{partials.$navigation-height} - 60px); margin-top: partials.$navigation-height; min-width: partials.$page-width-min; z-index: 0; diff --git a/src/styles/partials/variables/_navigation.scss b/src/styles/partials/variables/_navigation.scss index edb305b9..0a5bee18 100644 --- a/src/styles/partials/variables/_navigation.scss +++ b/src/styles/partials/variables/_navigation.scss @@ -1 +1,2 @@ -$height: 57px; \ No newline at end of file +$height: 57px; +//@forward 'navigation' \ No newline at end of file From 337f2c581d8772d77c27c55672be83a354273703 Mon Sep 17 00:00:00 2001 From: Noreen Sulehry Date: Fri, 26 Jul 2024 13:20:42 -0500 Subject: [PATCH 2/8] CHAL-16: Fixed page height --- .../unit/app/__snapshots__/page.snapshot.tsx.snap | 1 + .../__snapshots__/challengerwelcome.snapshot.tsx.snap | 1 + .../app/progress/__snapshots__/page.snapshot.tsx.snap | 1 + .../unit/app/why8by8/__snapshots__/page.snapshot.tsx.snap | 1 + .../__snapshots__/page-container.snapshot.tsx.snap | 1 + .../utils/page-container/page-container.snapshot.tsx | 8 ++++++-- src/components/utils/page-container/styles.module.scss | 4 +--- 7 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/__tests__/unit/app/__snapshots__/page.snapshot.tsx.snap b/src/__tests__/unit/app/__snapshots__/page.snapshot.tsx.snap index 7aae6001..1908eacb 100644 --- a/src/__tests__/unit/app/__snapshots__/page.snapshot.tsx.snap +++ b/src/__tests__/unit/app/__snapshots__/page.snapshot.tsx.snap @@ -4,6 +4,7 @@ exports[`Home renders homepage unchanged 1`] = `
{ afterEach(cleanup); + it('renders the PageContainer unchanged.', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + it('applies the correct min-height style.', () => { const { getByTestId } = render(); const pageContainer = getByTestId('page-container'); - const navbarHeight = '57px'; - const footerHeight = '60px'; //footer padding 30x top and bottom + const navbarHeight = '57px'; // Adjust this + const footerHeight = '40px'; // Adjust const expectedMinHeight = `calc(100vh - ${navbarHeight} - ${footerHeight})`; + console.log('Rendered min-height:', pageContainer.style.minHeight); + expect(pageContainer).toHaveStyle(`min-height: ${expectedMinHeight}`); }); }); diff --git a/src/components/utils/page-container/styles.module.scss b/src/components/utils/page-container/styles.module.scss index defcdbc8..e4fab661 100644 --- a/src/components/utils/page-container/styles.module.scss +++ b/src/components/utils/page-container/styles.module.scss @@ -4,9 +4,7 @@ display: flex; justify-content: center; width: 100%; - //height: 100%; - //Calculate minimum height of the page - min-height: calc(100vh - #{partials.$navigation-height} - 60px); + min-height: calc(100vh - partials.$navigation-height - 40px); // Adjust margin-top: partials.$navigation-height; min-width: partials.$page-width-min; z-index: 0; From 65844e347c448ae3645e1ae5a690e04dad5f9cbe Mon Sep 17 00:00:00 2001 From: Noreen Sulehry Date: Fri, 2 Aug 2024 11:55:49 -0500 Subject: [PATCH 3/8] final update --- .../utils/page-container/styles.module.scss | 3 +- .../utils/page-container.stories.tsx | 41 +++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 src/stories/components/utils/page-container.stories.tsx diff --git a/src/components/utils/page-container/styles.module.scss b/src/components/utils/page-container/styles.module.scss index e4fab661..6e2ac7bf 100644 --- a/src/components/utils/page-container/styles.module.scss +++ b/src/components/utils/page-container/styles.module.scss @@ -4,7 +4,8 @@ display: flex; justify-content: center; width: 100%; - min-height: calc(100vh - partials.$navigation-height - 40px); // Adjust + $footerheight : 220px; + min-height: calc(100vh - partials.$navigation-height - $footerheight); // Adjust margin-top: partials.$navigation-height; min-width: partials.$page-width-min; z-index: 0; diff --git a/src/stories/components/utils/page-container.stories.tsx b/src/stories/components/utils/page-container.stories.tsx new file mode 100644 index 00000000..8d6bc0e4 --- /dev/null +++ b/src/stories/components/utils/page-container.stories.tsx @@ -0,0 +1,41 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { PageContainer } from '@/components/utils/page-container'; +import { GlobalStylesProvider } from '@/stories/global-styles-provider'; +import { UserContext } from '@/contexts/user-context'; +import { AlertsContextProvider} from '@/contexts/alerts-context'; +import { UserContextType } from '@/contexts/user-context/user-context'; +import { Header } from '@/components/header'; +import { Footer } from '@/components/footer'; + +const meta: Meta = { + component : PageContainer, + parameters: { + layout : 'fullscreen' + + } +}; + +export default meta; + +type Story = StoryObj; + +export const empty : Story = { + render : () => { + return ( + + + +
+ +