Add transparent variant to section footer with pagination (#300)

* add transparent variant to section footer with pagination

* add section footer types to index

src/components/section/SectionFooter/SectionFooterArea.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  Controls,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+  Description,
+} from '@storybook/addon-docs'
+import { Theme } from '../../../../.storybook/components'
+import { SectionFooterArea } from '../index'
+import { SectionFooterVariant } from './types'
+
+const meta = {
+  component: SectionFooterArea,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="section" items={['footerArea']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof SectionFooterArea>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const VariantTransparent: Story = {
+  args: {
+    variant: SectionFooterVariant.Transparent,
+  },
+}

src/components/section/SectionFooter/SectionFooterArea.tsx

@@ -2,17 +2,31 @@ import classNames from 'classnames'
 import { ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
+import { SectionFooterVariant } from './types'
 
-export type SectionFooterAreaProps = ClassNameProps & { children?: ReactNode }
+export type SectionFooterAreaProps = ClassNameProps & {
+  children?: ReactNode
+  variant?: SectionFooterVariant
+}
 
+/**
+ * The section footer is a component that should be placed at the bottom of a [SectionContainer](../?path=/docs/components-section-sectioncontainer--docs). It is used as a container for the section footer where, for example, the pagination can be placed.
+ */
 export function SectionFooterArea({
   className,
   children,
+  variant = SectionFooterVariant.Solid,
 }: SectionFooterAreaProps) {
   const { section } = useTheme()
 
   return (
-    <div className={classNames(className, section.footerArea.base)}>
+    <div
+      className={classNames(
+        section.footerArea.base,
+        section.footerArea[variant],
+        className,
+      )}
+    >
       {children}
     </div>
   )

src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  Controls,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+  Description,
+} from '@storybook/addon-docs'
+import { IndexType } from '@aboutbits/pagination'
+import { useState } from 'react'
+import { SectionFooterVariant } from './types'
+import {
+  SectionFooterWithPaginationInMemory,
+  SectionFooterWithPaginationInMemoryProps,
+} from './SectionFooterWithPaginationInMemory'
+
+const Template = (args: SectionFooterWithPaginationInMemoryProps) => {
+  const [page, setPage] = useState(args.page)
+  return (
+    <SectionFooterWithPaginationInMemory
+      {...args}
+      page={page}
+      onChangePage={setPage}
+    />
+  )
+}
+
+const meta = {
+  component: SectionFooterWithPaginationInMemory,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+  render: (args) => <Template {...args} />,
+} satisfies Meta<typeof SectionFooterWithPaginationInMemory>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    page: 0,
+    size: 10,
+    total: 60,
+    config: { indexType: IndexType.ZERO_BASED },
+  },
+}
+
+export const VariantTransparent: Story = {
+  args: {
+    ...Default.args,
+    variant: SectionFooterVariant.Transparent,
+  },
+}

src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.tsx

@@ -1,21 +1,30 @@
-import { ReactElement } from 'react'
 import { PaginationInMemory, PaginationInMemoryProps } from '../../pagination'
-import { SectionFooterArea } from '../index'
+import { SectionFooterArea, SectionFooterAreaProps } from '../index'
 
+export type SectionFooterWithPaginationInMemoryProps = Pick<
+  SectionFooterAreaProps,
+  'variant'
+> &
+  PaginationInMemoryProps
+
+/**
+ * This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer--docs) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--docs).
+ */
 export function SectionFooterWithPaginationInMemory({
   page,
   size,
   total,
   onChangePage,
   config,
   className,
-}: PaginationInMemoryProps): ReactElement | null {
+  variant,
+}: SectionFooterWithPaginationInMemoryProps) {
   if (total <= size) {
     return null
   }
 
   return (
-    <SectionFooterArea>
+    <SectionFooterArea variant={variant}>
       <PaginationInMemory
         page={page}
         size={size}

src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  Controls,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+  Description,
+} from '@storybook/addon-docs'
+import { IndexType } from '@aboutbits/pagination'
+import { SectionFooterWithPaginationRouter } from './SectionFooterWithPaginationRouter'
+import { SectionFooterVariant } from './types'
+
+const meta = {
+  component: SectionFooterWithPaginationRouter,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+  render: (args) => {
+    const currentParams = new URLSearchParams(window.parent.location.search)
+    const pageParam = currentParams.get('page')
+    const currentPage = pageParam ? parseInt(pageParam) : 0
+    return <SectionFooterWithPaginationRouter {...args} page={currentPage} />
+  },
+} satisfies Meta<typeof SectionFooterWithPaginationRouter>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    page: 0,
+    size: 10,
+    total: 60,
+    config: { indexType: IndexType.ZERO_BASED },
+  },
+}
+
+export const VariantTransparent: Story = {
+  args: {
+    ...Default.args,
+    variant: SectionFooterVariant.Transparent,
+  },
+}

src/components/section/SectionFooter/SectionFooterWithPaginationRouter.tsx

@@ -1,21 +1,30 @@
-import { ReactElement } from 'react'
 import { PaginationRouter, PaginationRouterProps } from '../../pagination'
-import { SectionFooterArea } from './SectionFooterArea'
+import { SectionFooterArea, SectionFooterAreaProps } from './SectionFooterArea'
 
+export type SectionFooterWithPaginationRouterProps = Pick<
+  SectionFooterAreaProps,
+  'variant'
+> &
+  PaginationRouterProps
+
+/**
+ * This component can conveniently be used to add a pagination with a section footer. This component leverages on [SectionFooter](/docs/components-section-sectionfooter--section-footer--docs) and [PaginationRouter](/docs/components-pagination-paginationrouter--docs).
+ */
 export function SectionFooterWithPaginationRouter({
   page,
   size,
   total,
   config,
   className,
   linkProps,
-}: PaginationRouterProps): ReactElement | null {
+  variant,
+}: SectionFooterWithPaginationRouterProps) {
   if (total <= size) {
     return null
   }
 
   return (
-    <SectionFooterArea>
+    <SectionFooterArea variant={variant}>
       <PaginationRouter
         page={page}
         size={size}

src/components/section/SectionFooter/types.ts

@@ -0,0 +1,4 @@
+export enum SectionFooterVariant {
+  Solid = 'SOLID',
+  Transparent = 'TRANSPARENT',
+}

src/components/section/index.ts

@@ -23,3 +23,4 @@ export * from './SectionFooter/SectionFooterWithActions'
 export * from './SectionFooter/SectionFooterWithPaginationInMemory'
 export * from './SectionFooter/SectionFooterWithPaginationRouter'
 export * from './SectionFooter/SectionFooterWithSubmit'
+export * from './SectionFooter/types'