Overview

Problem Statement

With Juno UI components seeing wider use, there is a growing need to be able to add links to legal and other contextual information in the footer of the page. Our current PageFooter component does not provide that option. With the hardcoded cloud shape it is also not prepared for flexible theming.

Goal

Have our PageFooter component available with the option to pass additional information/content and render it consistently. Allow for flexibility with little or plenty content, and allow for flexible theming.

Context

Ongoing development and enhancement of our Design System, ongoing application support.

Details

Implementation

Copyright Notice

Users should be able to pass a string as a copyright notice that will be rendered in the rightmost container. If no string is passed, the prop should default to an empty string, in this case the container should collapse.

<PageFooter copyright="Custom copyright goes here" />

Render Children

Users should be able to pass children to the PageFooter. Children should be rendered into a grid container on the left of the footer or full-width (minus padding, see Figma), depending on whether a copyright string was passed.

If no child is passed, it will be assigned the full width of the container:

If only one child is passed, it will be assigned the full width of the container:

When multiple children are being passed, they will distribute according to the grid container, with a gap as specified in Figma:

Remove Hardcoded Illustration

In order to allow for full flexibility with regards to branding and theming, the hardcoded cloud illustration should be removed. Users may use CSS to render and position a background image in the PageFooter moving forward. This is a breaking change.

Implement PageFooter Background Token / Variable

Currently, we use the global bg color for the pagefooter. While this works in our current theme/modes, this represents a specific design decision that may not be applicable to future themes, hence we should define a background color token and variable explicitly.

Props

Design

Figma

LINK

Design Tokens

CSS

For the "child items" of PageFooter such as title and item, we will NOT create React components, mainly because of their trivial nature and we merely supply them as an option/recommendation. However we will supply corresponding CSS classes with all the necessary styles that users can use in order to apply complaint styles.

For these, a pagefooter.css file should be created, and contain the following classes:

• .juno-pagefooter-title (for a title element of a clumn)
• .juno-pagefooter-items (for a list of items)
• .juno-pagefooter-items-inline (for a list of items to be rendered as a single line with pipe characters (|) as separators)
• .juno-pagefooter-item (for individual items, we may discuss whether we only want to supply the …-items class and define child selectors instead of a class, such as .pagefooter-item > li

Storybook

In storybook, we will need to create stories illustrating the possibilites and their proper usage. This is especially important since we have decided against implementing additional subcomponents for PageFooter, we merely give recommendations:

Default / Empty PageFooter

<PageFooter />

PageFooter with Custom Copyright Notice

<PageFooter copyright="Custom copyright goes here" />

PageFooter with single line links, full width, using CSS classes as outlined above, no copyright:

<PageFooter>
	<ul className="juno-pagefooter-items-inline">
		<li><a href="#">About</a></li>
		<li><a href="#">Imprint</a></li>
		<li><a href="#">Terms of Use</a></li>
	</ul>
</PageFooter>

PageFooter with copyright info and multiple columns with titles, using CSS classes as outlined above:

<PageFooter copyright="Custom copyright goes here">
	<div role="group" aria-labelledby="footer-col1-title">
		<p className="juno-pagefooter-title" id="footer-col1-title">Column 1 Title</p>
		<ul className="juno-pagefooter-items">
			<li><a href="#">About</a></li>
			<li><a href="#">Imprint</a></li>
			<li><a href="#">Terms of Use</a></li>
		</ul>
	</div>
	<div  role="group" aria-labelledby="footer-col2-title">
		<p className="juno-pagefooter-title" id="footer-col2-title">Column 2 Title</p>
		<ul className="juno-pagefooter-items">
			<li><a href="#">About</a></li>
			<li><a href="#">Imprint</a></li>
			<li><a href="#">Terms of Use</a></li>
		</ul>
	</div>
	<div role="group" aria-labelledby="footer-col3-title">
		<p className="juno-pagefooter-title" id="footer-col3-title">Column 3 Title</p>
		<ul className="juno-pagefooter-items">
			<li><a href="#">About</a></li>
			<li><a href="#">Imprint</a></li>
			<li><a href="#">Terms of Use</a></li>
		</ul>
	</div>
	
</PageFooter>

Note: Use role=“group” and elements with an according id to semantically group headings and columns, or section elements with h1 inside, and apply styling as outlines (TODO for storybook) .

Estimation

• Priority: High
• Effort: Medium
• Status: Backlog

Acceptance Criteria

• PageFooter behaves as described in the ticket
• Stories exist as described
• There are passing tests for the individual options

QA