From b58db79c170b81b9b61aa746c8c7bb0076912095 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Wed, 4 Dec 2024 13:34:45 +0100 Subject: [PATCH] Feat(web-react): Add minimalistic footer demo #DS-1574 --- .../src/components/Footer/Footer.tsx | 18 +++- .../web-react/src/components/Footer/README.md | 20 ++++- .../Footer/__tests__/Footer.test.tsx | 17 ++++ .../src/components/Footer/constants.ts | 2 + .../components/Footer/demo/FooterDefault.tsx | 2 +- .../Footer/demo/FooterMinimalistic.tsx | 80 ++++++++++++++++++ .../components/Footer/demo/FooterNested.tsx | 4 +- .../src/components/Footer/demo/index.tsx | 4 + .../src/components/Footer/index.html | 2 +- .../Footer/stories/Footer.stories.tsx | 28 +++++- .../components/Footer/useFooterStyleProps.ts | 24 ++++++ packages/web-react/src/types/footer.ts | 10 ++- .../footer-chromium-linux.png | Bin 56757 -> 70123 bytes 13 files changed, 197 insertions(+), 14 deletions(-) create mode 100644 packages/web-react/src/components/Footer/constants.ts create mode 100644 packages/web-react/src/components/Footer/demo/FooterMinimalistic.tsx create mode 100644 packages/web-react/src/components/Footer/useFooterStyleProps.ts diff --git a/packages/web-react/src/components/Footer/Footer.tsx b/packages/web-react/src/components/Footer/Footer.tsx index 8a2555b560..3cc45a0ff0 100644 --- a/packages/web-react/src/components/Footer/Footer.tsx +++ b/packages/web-react/src/components/Footer/Footer.tsx @@ -2,16 +2,26 @@ import classNames from 'classnames'; import React from 'react'; +import { BackgroundColors } from '../../constants'; import { useStyleProps } from '../../hooks'; import { SpiritFooterProps } from '../../types'; +import { PADDING_BOTTOM, PADDING_TOP } from './constants'; +import { useFooterStyleProps } from './useFooterStyleProps'; -const Footer = (props: SpiritFooterProps): JSX.Element => { - const { children, ...restProps } = props; +const defaultStyleProps: Partial = { + backgroundColor: BackgroundColors.SECONDARY, + paddingBottom: PADDING_BOTTOM, + paddingTop: PADDING_TOP, +}; + +const Footer = (props: SpiritFooterProps) => { + const propsWithDefaults = { ...defaultStyleProps, ...props }; + const { children, backgroundColor, paddingBottom, paddingTop, ...restProps } = propsWithDefaults; + const { classProps } = useFooterStyleProps({ backgroundColor, paddingBottom, paddingTop }); const { styleProps, props: otherProps } = useStyleProps(restProps); - const footerClasses = 'bg-secondary pt-1400 pb-1200'; return ( -