Footer using compliance links (#227)

* footer new component

* version change

* import missing

* fix error

* fix pipeline error

* footer updates

* footer fixes

* delete unused import

* yarn fix

* yarn ci fix

* merge between PolicyAndCookieBanner component and footer, also extended functionality inside this new component

* yarn fix

* fix imports

* yarn ci fixed

.yarn/versions/27234325.yml

@@ -0,0 +1,5 @@
+releases:
+  "@essex/components": minor
+
+declined:
+  - essex-toolkit-stories

packages/components/src/PolicyAndCookieBanner/PolicyAndCookieBanner.stories.tsx

@@ -2,9 +2,6 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-
-import type { StoryFn } from '@storybook/react'
-
 import {
 	PolicyAndCookieBanner,
 	defaultBannerLinks,
@@ -88,3 +85,39 @@ export const AdditionalLinks = {
 
 	name: 'Additional links',
 }
+
+export const ExtendedItemsCustomization = {
+	render: (args: PolicyAndCookieBannerProps) => (
+		<PolicyAndCookieBanner {...args} />
+	),
+
+	args: {
+		links: [
+			...defaultBannerLinks,
+			{
+				name: 'Clickable',
+				onClick: () => {
+					alert('Testing props')
+				},
+			},
+		],
+	},
+
+	name: 'Extended Items Customization',
+}
+
+export const HideShowItemsCustomization = {
+	render: (args: PolicyAndCookieBannerProps) => (
+		<PolicyAndCookieBanner {...args} />
+	),
+
+	args: {
+		links: [
+			...defaultBannerLinks,
+			{ name: 'Hide item', href: '', hide: true },
+			{ name: 'Show item', href: '' },
+		],
+	},
+
+	name: 'Hide/Show Items Customization',
+}

packages/components/src/PolicyAndCookieBanner/PolicyAndCookieBanner.styles.ts

@@ -0,0 +1,27 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import styled from 'styled-components'
+
+export const Container = styled.footer`
+	width: 100%;
+	height: 32px;
+	font-size: 12px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 18px;
+	align-items: center;
+	color: ${({ theme }) => theme.palette.neutralSecondary};
+	background: ${({ theme }) => theme.palette.neutralLight};
+	border-top: 1px solid ${({ theme }) => theme.palette.neutralTertiaryAlt};
+`
+
+export const LinkDiv = styled.div`
+	cursor: pointer;
+`
+export const LinkA = styled.a`
+	cursor: pointer;
+	text-decoration: none !important;
+`

packages/components/src/PolicyAndCookieBanner/PolicyAndCookieBanner.tsx

@@ -2,11 +2,12 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Link, Text } from '@fluentui/react'
+import { Link, Text, useTheme } from '@fluentui/react'
 import type { CSSProperties, FC } from 'react'
 import { memo, useMemo } from 'react'
 
 import { useLoadMSFTCookieScript } from './PolicyAndCookieBanner.hooks.js'
+import { Container } from './PolicyAndCookieBanner.styles.js'
 import type {
 	PolicyAndCookieBannerProps,
 	PolicyLinkDetails,
@@ -51,13 +52,13 @@ export const defaultBannerLinks: Array<PolicyLinkDetails> = [
 export const PolicyAndCookieBanner: FC<PolicyAndCookieBannerProps> = memo(
 	function CookieConsentProvider({
 		language = navigator.language ?? 'en-US',
-		theme = 'light',
 		onConsentChange = () => undefined,
 		onError,
 		className,
 		styles,
 		links = defaultBannerLinks,
 	}) {
+		const theme = useTheme()
 		const divStyles: CSSProperties = useMemo(() => {
 			return {
 				...containerStyles,
@@ -66,22 +67,28 @@ export const PolicyAndCookieBanner: FC<PolicyAndCookieBannerProps> = memo(
 		}, [styles])
 
 		const policyLinks = useMemo(() => {
-			return links.map(({ name, href }, i) => {
-				return (
-					<PolicyLink key={name} divider={i !== 0} name={name} href={href} />
-				)
+			return links.map(({ name, href, onClick, hide }, i) => {
+				return hide === false || hide === undefined ? (
+					<PolicyLink
+						key={name}
+						divider={i !== 0}
+						name={name}
+						href={href}
+						onClick={onClick}
+					/>
+				) : null
 			})
 		}, [links])
 
 		const consentManager = useLoadMSFTCookieScript({
 			language,
-			theme,
+			theme: theme.isInverted ? 'dark' : 'light',
 			onConsentChange,
 			onError,
 		})
 
 		return (
-			<div className={className} style={divStyles}>
+			<Container className={className} style={divStyles}>
 				{consentManager?.isConsentRequired && (
 					<>
 						<PolicyLink
@@ -95,7 +102,7 @@ export const PolicyAndCookieBanner: FC<PolicyAndCookieBannerProps> = memo(
 					</>
 				)}
 				{policyLinks}
-			</div>
+			</Container>
 		)
 	},
 )
@@ -108,11 +115,20 @@ const PolicyLink: FC<PolicyLinkProps> = memo(function PolicyLink({
 	divider = false,
 	id,
 }) {
-	return (
+	return href == null || href === '' ? (
 		<>
 			{divider && <Text variant='tiny'>|</Text>}
 			<Text variant='smallPlus'>
-				<Link id={id} href={href} target='_blank' onClick={onClick}>
+				<Link id={id} target='_blank' onClick={onClick}>
+					{name}
+				</Link>
+			</Text>
+		</>
+	) : (
+		<>
+			{divider && <Text variant='tiny'>|</Text>}
+			<Text variant='smallPlus'>
+				<Link id={id} href={href} target='_blank'>
 					{name}
 				</Link>
 			</Text>

packages/components/src/PolicyAndCookieBanner/PolicyAndCookieBanner.types.ts

@@ -86,7 +86,12 @@ export type WcpConsent = {
 /**
  * @public
  */
-export type PolicyLinkDetails = { name: string; href: string }
+export type PolicyLinkDetails = {
+	name: string
+	href?: string
+	onClick?: () => void
+	hide?: boolean
+}
 
 /**
  * Defaults to {