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

feat: Let Footer set its own background colour #1797

Merged
merged 3 commits into from
Dec 20, 2024
Merged

feat: Let Footer set its own background colour #1797

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e6d251
Let Footer set its own background colour
VincentSmedinga Dec 19, 2024
6935295
Clarify guidelines for Footer
VincentSmedinga Dec 20, 2024
93f8a28
Merge branch 'develop' into feat/DES-1113-remove-spotlight-from-footer
VincentSmedinga Dec 20, 2024
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
8 changes: 4 additions & 4 deletions packages/css/src/components/footer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ Provides service information at the bottom of every page.

## Guidelines

- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs).
- The Footer consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
It must be used on all websites for the City of Amsterdam.
- For applications, only the Page Menu can be sufficient.
- The Footer is the same on every page of the application.
- For applications, only the Page Menu can be sufficient.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By describing it like this, it's easy to mess up the semantics. We currently do this in the Amopis prototype, the Page Menu isn't wrapped in a footer.

A bit of a side note, but: I made a ticket to incorporate the PageMenu in Footer, that should help with this.

Edit: I see you found the same issue

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line was only moved. Should we clarify the docs now or when we pick up the tickets you mentioned?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should do it now, to hopefully prevent people from making this mistake.


The Spotlight offers space for various practical links:
The top section offers space for various practical links:

- The first column focuses on contact information.
The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
- The second column contains links to relevant (online) sites or sources.
- The third column refers to newsletters, social media, etc.

The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
Contact details should not go here.
8 changes: 8 additions & 0 deletions packages/css/src/components/footer/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/

.ams-footer__top {
background-color: var(--ams-footer-top-background-color);
}
1 change: 1 addition & 0 deletions packages/css/src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

/* Append here */
@use "footer/footer";
@use "file-list/file-list";
@use "action-group/action-group";
@use "breakout/breakout";
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/Footer/FooterTop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,14 @@
import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
import { Spotlight } from '../Spotlight/Spotlight'

export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>

export const FooterTop = forwardRef(
({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
<Spotlight {...restProps} color="blue" ref={ref} className={clsx('ams-footer__top', className)}>
<div {...restProps} ref={ref} className={clsx('ams-footer__top', className)}>
{children}
</Spotlight>
</div>
),
)

Expand Down
9 changes: 9 additions & 0 deletions proprietary/tokens/src/components/ams/footer.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"ams": {
"footer": {
"top": {
"background-color": { "value": "{ams.brand.color.blue.60}" }
}
}
}
}
Loading