✨ feat: added scrollable option to header and footer components

Author: e1en0r

src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { cx } from '@emotion/css';
 import React from 'react';
 import { SequentialVariant, ThemeProps } from '../../types';
+import { useAccessibility } from '../../context/Accessibility/useAccessibility';
 import { useThemeId } from '../../context/Theme';
 import styles from './styles/Footer.module.css';
 
@@ -11,6 +12,10 @@ export type FooterProps = React.HTMLAttributes<HTMLDivElement> &
     className?: string;
     full?: boolean;
     style?: React.CSSProperties;
+    /** When used with the scrollable flag the footer will overflow horizontally instead of wrapping */
+    nowrap?: boolean;
+    scrollable?: boolean;
+    scrollbar?: 'xsmall' | 'small' | 'medium';
     transparent?: boolean;
     variant?: SequentialVariant;
     volume?: 'quiet';
@@ -27,6 +32,9 @@ export function Footer({
   className,
   contrast = false,
   full = false,
+  nowrap = false,
+  scrollable = false,
+  scrollbar = 'small',
   themeId: initThemeId,
   transparent = false,
   unthemed = false,
@@ -35,22 +43,28 @@ export function Footer({
   ...props
 }: FooterProps): JSX.Element {
   const themeId = useThemeId(initThemeId);
+  const accessible = useAccessibility();
   const variant = contrast ? 'contrast' : initVariant;
 
   const classes = cx(
     styles.footer,
     bordered && styles['footer--bordered'],
     bordered === 'pseudo' && styles['footer--bordered-pseudo'],
     full && styles['footer--full'],
+    nowrap && styles['footer--nowrap'],
+    scrollable && styles['footer--scrollable'],
+    scrollbar && styles[`footer--${scrollbar}-scrollbar`],
     !unthemed && themeId && styles[`footer--${themeId}`],
     !unthemed && variant && styles[`footer--${variant}`],
     transparent && styles['footer--transparent'],
     volume && styles[`footer--${volume}`],
+    accessible && styles['is-accessible'],
     className,
   );
 
   return (
-    <div className={classes} {...props}>
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    <div className={classes} tabIndex={scrollable ? 0 : undefined} {...props}>
       {children}
     </div>
   );

src/components/Footer/StyledFooter.tsx

@@ -2,19 +2,34 @@ import styled from '@emotion/styled';
 import React from 'react';
 import { Footer, FooterProps } from './Footer';
 
-export type StyledFooterProps = Omit<FooterProps, 'contrast' | 'themeId'> & {
+export type StyledFooterProps = Omit<FooterProps, 'contrast'> & {
   backgroundColor?: string;
   borderColor?: string;
+  focusedOutlineColor?: string;
+  scrollbarColor?: string;
   textColor?: string;
   height?: number | string;
+  /** Allow the footer to fall back to the normal theme */
+  themed?: boolean;
 };
 
 const BaseStyledFooter = styled(Footer, {
-  shouldForwardProp: (prop: string) => !['borderColor', 'backgroundColor', 'textColor', 'height'].includes(prop),
+  shouldForwardProp: (prop: string) =>
+    !['borderColor', 'backgroundColor', 'focusedOutlineColor', 'scrollbarThumbColor', 'textColor', 'height'].includes(
+      prop,
+    ),
 })<StyledFooterProps>`
-  ${({ backgroundColor }) => backgroundColor && `--footer-background-color: ${backgroundColor};`}
-  ${({ borderColor }) => borderColor && `--footer-border-color: ${borderColor};`}
-  ${({ textColor }) => textColor && `--footer-text-color: ${textColor};`}
+  ${({ backgroundColor, unthemed }) =>
+    backgroundColor && `--footer-background-color: ${backgroundColor}${unthemed ? '' : ' !important'};`}
+  ${({ borderColor, unthemed }) =>
+    borderColor && `--footer-border-color: ${borderColor}${unthemed ? '' : ' !important'};`}
+
+  ${({ focusedOutlineColor, unthemed }) =>
+    focusedOutlineColor && `--footer-focused-outline-color: ${focusedOutlineColor}${unthemed ? '' : ' !important'};`}
+  ${({ scrollbarColor, unthemed }) =>
+    scrollbarColor && `--footer-scrollbar-thumb-color: ${scrollbarColor}${unthemed ? '' : ' !important'};`}
+
+  ${({ textColor, unthemed }) => textColor && `--footer-text-color: ${textColor}${unthemed ? '' : ' !important'};`}
   ${({ height }) => height !== undefined && `height: ${Number.isNaN(Number(height)) ? height : `${height}px`};`}
 `;
 
@@ -24,6 +39,8 @@ const BaseStyledFooter = styled(Footer, {
  * and background colors, and an optional custom
  * height.
  */
-export const StyledFooter = (props: StyledFooterProps) => <BaseStyledFooter {...props} unthemed />;
+export const StyledFooter = ({ themed, ...props }: StyledFooterProps) => (
+  <BaseStyledFooter {...props} unthemed={!themed} />
+);
 
 StyledFooter.displayName = 'StyledFooter';

src/components/Footer/stories/Footer.stories.tsx

@@ -22,11 +22,26 @@ export default {
         type: 'text',
       },
     },
+    nowrap: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     full: {
       table: {
         category: 'Appearance',
       },
     },
+    scrollable: {
+      table: {
+        category: 'Appearance',
+      },
+    },
+    scrollbar: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     transparent: {
       table: {
         category: 'Appearance',
@@ -162,3 +177,25 @@ TertiaryVariant.args = {
   bordered: true,
   variant: 'tertiary',
 };
+
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  ...defaultArgs,
+  children: (
+    <React.Fragment>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+      <div>Superlongword</div>
+    </React.Fragment>
+  ),
+  nowrap: true,
+  scrollable: true,
+  scrollbar: 'small',
+};

src/components/Footer/stories/StyledFooter.stories.tsx

@@ -30,16 +30,32 @@ export default {
         category: 'Styled',
       },
     },
+    focusedOutlineColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
+    scrollbarColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
     textColor: {
       table: {
         category: 'Styled',
       },
     },
-    footerColor: {
+    themed: {
       table: {
         category: 'Styled',
       },
     },
+
+    themeId: {
+      table: {
+        category: 'Uncommon',
+      },
+    },
     ...argTypes,
   },
   parameters: {
@@ -77,6 +93,7 @@ const defaultArgs = {
   borderColor: '#393a61',
   textColor: '#fff',
   height: 50,
+  themed: false,
   variant: undefined,
 };
 
@@ -85,6 +102,15 @@ Default.args = {
   ...defaultArgs,
 };
 
+export const Themed = Template.bind({});
+Themed.storyName = 'Inherit theme';
+Themed.args = {
+  bordered: true,
+  height: 50,
+  variant: 'primary',
+  themed: true,
+};
+
 /*
 Default.parameters = {
   jest: ['StyledFooter.test.js', 'Footer.test.js'],

src/components/Footer/styles/Footer.module.css

@@ -1,3 +1,5 @@
+@import '../../../styles/common/mixins/addScrollbar.css';
+
 .footer {
   align-items: center;
   background-color: var(--footer-background-color);
@@ -10,6 +12,10 @@
   width: 100%;
 }
 
+.footer--nowrap {
+  flex-wrap: nowrap;
+}
+
 /**
  * 1. Use a pseudo element rather than a border so that
  *    it doesn't add height to the box element.
@@ -35,6 +41,10 @@
 .footer--primary {
   @mixin themed .footer {
     --footer-border-color: $theme-primary-palette-border-color;
+    --footer-focused-outline-color: $theme-primary-palette-text-color;
+    --footer-scrollbar-thumb-color: $theme-primary-scrollbar-thumb-color;
+    --footer-background-color: $theme-primary-palette-background-color;
+    --footer-text-color: $theme-primary-palette-text-color;
 
     &.footer--quiet {
       --footer-border-color: $theme-primary-palette-quiet-border-color;
@@ -43,15 +53,16 @@
     &.footer--transparent {
       background-color: transparent;
     }
-
-    background-color: $theme-primary-palette-background-color;
-    color: $theme-primary-palette-text-color;
   }
 }
 
 .footer--secondary {
   @mixin themed .footer {
     --footer-border-color: $theme-secondary-palette-border-color;
+    --footer-focused-outline-color: $theme-secondary-palette-text-color;
+    --footer-scrollbar-thumb-color: $theme-primary-scrollbar-thumb-color;
+    --footer-background-color: $theme-secondary-palette-background-color;
+    --footer-text-color: $theme-secondary-palette-text-color;
 
     &.footer--quiet {
       --footer-border-color: $theme-secondary-palette-quiet-border-color;
@@ -60,15 +71,16 @@
     &.footer--transparent {
       background-color: transparent;
     }
-
-    background-color: $theme-secondary-palette-background-color;
-    color: $theme-secondary-palette-text-color;
   }
 }
 
 .footer--tertiary {
   @mixin themed .footer {
     --footer-border-color: $theme-tertiary-palette-border-color;
+    --footer-focused-outline-color: $theme-tertiary-palette-text-color;
+    --footer-scrollbar-thumb-color: $theme-primary-scrollbar-thumb-color;
+    --footer-background-color: $theme-tertiary-palette-background-color;
+    --footer-textcolor: $theme-tertiary-palette-text-color;
 
     &.footer--quiet {
       --footer-border-color: $theme-tertiary-palette-quiet-border-color;
@@ -77,15 +89,16 @@
     &.footer--transparent {
       background-color: transparent;
     }
-
-    background-color: $theme-tertiary-palette-background-color;
-    color: $theme-tertiary-palette-text-color;
   }
 }
 
 .footer--contrast {
   @mixin themed .footer {
     --footer-border-color: $theme-contrast-palette-border-color;
+    --footer-focused-outline-color: $theme-contrast-palette-text-color;
+    --footer-scrollbar-thumb-color: $theme-contrast-scrollbar-thumb-color;
+    --footer-background-color: var(--phork-contrast-color, $theme-contrast-palette-background-color);
+    --footer-text-color: $theme-contrast-palette-text-color;
 
     &.footer--quiet {
       --footer-border-color: $theme-contrast-palette-quiet-border-color;
@@ -94,13 +107,35 @@
     &.footer--transparent {
       background-color: transparent;
     }
-
-    background-color: var(--phork-contrast-color, $theme-contrast-palette-background-color);
-    color: $theme-contrast-palette-text-color;
   }
 }
 
 .footer--full {
   height: 100%;
   width: 100%;
 }
+
+.footer--scrollable {
+  &.footer--medium-scrollbar {
+    @mixin addScrollbar var(--footer-scrollbar-thumb-color);
+  }
+
+  &.footer--small-scrollbar {
+    @mixin addSmallScrollbar var(--footer-scrollbar-thumb-color);
+  }
+
+  &.footer--xsmall-scrollbar {
+    @mixin addXSmallScrollbar var(--footer-scrollbar-thumb-color);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.is-accessible:focus {
+    outline: 1px solid var(--footer-focused-outline-color);
+    outline-offset: -1px;
+  }
+
+  overflow: auto;
+}

src/components/Form/index.ts

@@ -1,5 +1,6 @@
 export * from './Checkbox';
 export * from './Fieldset';
+export * from './Formbox';
 export * from './Label';
 export * from './LabelWrapper';
 export * from './Notification';