Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/protoform pages #947

Draft
wants to merge 8 commits into
base: develop
Choose a base branch
from
Draft

Feature/protoform pages #947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c716494
fix: bouncy shadow
HZ991 Dec 2, 2024
84f066e
Merge branch 'develop' into feature/protoform-pages
HZ991 Dec 5, 2024
3815f2e
Add: changeset
HZ991 Dec 5, 2024
d80508c
Update index.ts
HZ991 Dec 6, 2024
772bbc9
Merge branch 'develop' into feature/protoform-pages
HZ991 Dec 19, 2024
dc30482
fix: protoform wrapper minor fix
HZ991 Jan 9, 2025
19813c5
Merge branch 'develop' into feature/protoform-pages
HZ991 Jan 14, 2025
fcc1aa9
fix: prototype shadow and footer position
HZ991 Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dirty-badgers-dance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@westpac/ui': minor
---

removed bottom margin from footer
2 changes: 1 addition & 1 deletion apps/protoform/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
return (
<html lang="en" data-theme="wbc">
<body>
<main className="m-auto max-w-[1923px] border border-border border-y-0 overscroll-y-none">
<main className="flex flex-col m-auto min-h-screen max-w-[1921px] border border-border border-y-0 overscroll-y-none">
<CustomHeader />
<SidebarContextProvider>
<Sidebar />
Expand Down
6 changes: 3 additions & 3 deletions apps/protoform/src/components/content-wrapper/content-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
return (
<section
className={clsx(
'min-h-[90vh] before:pointer-events-none before:sticky before:inset-x-auto before:top-[66px] before:z-10 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
'grow flex-auto before:pointer-events-none before:fixed before:inset-x-auto before:top-[66px] before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
{
'md:mr-[300px] before:right-[300px]': open,
'md:before:opacity-100': scrolled,
'md:before:opacity-0': scrolled,
'before:left-0 ': scrolled && open,
},
)}
id="content-wrapper"
>
<GridContainer>
<Grid>
<Grid className="h-fit min-h-[90vh]">
<GridItem span={{ initial: 12, sm: 8, md: 8, lg: 6 }} start={{ initial: 1, sm: 3, md: 3, lg: 4 }}>
<div className="md:h-10 overscroll-x-none"></div>
{children}
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/cta/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function Cta({
tertiaryOnClick?: () => void;
}) {
return (
<div className="flex gap-2 pt-5 pb-9 max-md:flex-col">
<div className="flex gap-2 pt-5 pb-12 max-md:flex-col">
<Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
{children}
</Button>
Expand Down
4 changes: 2 additions & 2 deletions apps/protoform/src/components/custom-footer/custom-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export function CustomFooter() {
return (
<Footer
brand="wbc"
className={clsx('relative bottom-0 z-10 w-full border-t-border bg-white pb-0', {
'md:w-[calc(100%-301px)]': open,
className={clsx('flex-auto grow-0 bottom-0 z-10 w-full border-t-border bg-white pb-3 max-md:mb-0 md:mb-0', {
'md:w-[calc(100%-300px)]': open,
})}
hideLogo
>
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/custom-header/custom-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function CustomHeader() {
leftIcon={'arrow'}
leftOnClick={() => router.back()}
logoLink="/"
className="z-[100] m-auto max-w-[1921px] md:fixed md:top-0 w-full"
className="z-[100] m-auto max-w-[1920px] md:fixed md:top-0 w-full"
>
<Button look="faint" size={{ initial: 'small', sm: 'medium' }} soft>
Sign Out
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/form-wrapper/form-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function FormWrapper({
<div>
<BackButton>Back to something</BackButton>
<CustomHeading>Quick Contact</CustomHeading>
<Form id={formId} spacing="large" className="p-0" onSubmit={handleSubmit}>
<Form id={formId} spacing="large" className="p-0 z-[10]" onSubmit={handleSubmit}>
{children}
</Form>
<Cta secondary="Back" tertiary="Cancel">
Expand Down
4 changes: 2 additions & 2 deletions apps/protoform/src/components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
<>
<div
className={clsx(
'sticky items-center top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
'sticky items-center top-0 flex h-9 z-[100] justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
{ 'after:opacity-100': scrolled },
)}
>
Expand All @@ -105,7 +105,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
<>
<div
className={clsx(
'fixed inset-y-0 w-[300px] overflow-auto border-l-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11 overscroll-contain',
'fixed inset-y-0 w-[300px] z-[50] overflow-auto border-l-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11 overscroll-contain',
{
'before:opacity-100': sidebarScrolled,
'max-md:translate-x-full': !open,
Expand Down
6 changes: 1 addition & 5 deletions packages/ui/src/components/footer/footer.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const styles = tv(
slots: {
base: 'relative overflow-hidden border-t border-t-border',
wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
topRow: '',
topRow: 'max-md:mb-0 md:mb-0',
link: 'float-right block',
},
variants: {
Expand All @@ -18,10 +18,6 @@ export const styles = tv(
isFocusVisible: {
true: { link: 'focus-outline' },
},
hideLogo: {
true: '',
false: { topRow: 'max-md:mb-7 md:mb-4' },
},
},
},
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
Expand Down
Loading