diff --git a/src/components/section/SectionFooter/SectionFooterArea.stories.mdx b/src/components/section/SectionFooter/SectionFooterArea.stories.mdx deleted file mode 100644 index 3b89a9b4..00000000 --- a/src/components/section/SectionFooter/SectionFooterArea.stories.mdx +++ /dev/null @@ -1,31 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../../.storybook/components' -import { SectionFooterArea } from '../index' - - - -# SectionFooterArea - -The section footer is a component that should be placed at the bottom of a `SectionContainer`. -It is used as a container for the section footer where, for example, the pagination can be placed. - -export const Template = ({ children, ...args }) => ( - {children} -) - - - - {Template.bind({})} - - - -### Props - - - - - - diff --git a/src/components/section/SectionFooter/SectionFooterArea.stories.tsx b/src/components/section/SectionFooter/SectionFooterArea.stories.tsx new file mode 100644 index 00000000..238a5c47 --- /dev/null +++ b/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: () => ( + <> + + <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, + }, +} diff --git a/src/components/section/SectionFooter/SectionFooterArea.tsx b/src/components/section/SectionFooter/SectionFooterArea.tsx index cb7ef2c1..159f4581 100644 --- a/src/components/section/SectionFooter/SectionFooterArea.tsx +++ b/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> ) diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx deleted file mode 100644 index 59b980cf..00000000 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.mdx +++ /dev/null @@ -1,42 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { useState } from 'react' -import { SectionFooterWithPaginationInMemory } from './SectionFooterWithPaginationInMemory' - -<Meta - title="Components/Section/SectionFooterWithPaginationInMemory" - component={SectionFooterWithPaginationInMemory} -/> - -# SectionFooterWithPaginationInMemory - -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) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--docs). - -export const Template = (args) => { - const [page, setPage] = useState(1) - return ( - <SectionFooterWithPaginationInMemory - size={5} - page={page} - total={60} - {...args} - onChangePage={setPage} - /> - ) -} - -<Canvas> - <Story - name="Default" - args={{ nextLabel: 'Next page', previousLabel: 'Previous page' }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationInMemory](/docs/components-pagination-paginationinmemory--docs#theme). diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx new file mode 100644 index 00000000..b4eb39a5 --- /dev/null +++ b/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, + }, +} diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.tsx index 942fd7f5..9668f84c 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.tsx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.tsx @@ -1,7 +1,15 @@ -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, @@ -9,13 +17,14 @@ export function SectionFooterWithPaginationInMemory({ onChangePage, config, className, -}: PaginationInMemoryProps): ReactElement | null { + variant, +}: SectionFooterWithPaginationInMemoryProps) { if (total <= size) { return null } return ( - <SectionFooterArea> + <SectionFooterArea variant={variant}> <PaginationInMemory page={page} size={size} diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx deleted file mode 100644 index ecc1d32c..00000000 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { SectionFooterWithPaginationRouter } from './SectionFooterWithPaginationRouter' - -<Meta - title="Components/Section/SectionFooterWithPaginationRouter" - component={SectionFooterWithPaginationRouter} -/> - -# SectionFooterWithPaginationRouter - -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) and [PaginationRouter](/docs/components-pagination-paginationrouter--docs). - -export const Template = (args) => { - const currentParams = new URLSearchParams(window.parent.location.search) - const currentPage = parseInt(currentParams.get('page'), 10) || 1 - return ( - <SectionFooterWithPaginationRouter - size={10} - page={currentPage} - total={60} - {...args} - /> - ) -} - -<Canvas> - <Story name="Default">{Template.bind({})}</Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -The theme of this component leverages on the components [SectionFooter](/docs/components-section-sectionfooter--section-footer#theme) and [PaginationRouter](/docs/components-pagination-paginationrouter--docs#theme). diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx new file mode 100644 index 00000000..613d01bb --- /dev/null +++ b/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, + }, +} diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.tsx index 35401123..d579c833 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.tsx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.tsx @@ -1,7 +1,15 @@ -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, @@ -9,13 +17,14 @@ export function SectionFooterWithPaginationRouter({ config, className, linkProps, -}: PaginationRouterProps): ReactElement | null { + variant, +}: SectionFooterWithPaginationRouterProps) { if (total <= size) { return null } return ( - <SectionFooterArea> + <SectionFooterArea variant={variant}> <PaginationRouter page={page} size={size} diff --git a/src/components/section/SectionFooter/types.ts b/src/components/section/SectionFooter/types.ts new file mode 100644 index 00000000..28a7b58b --- /dev/null +++ b/src/components/section/SectionFooter/types.ts @@ -0,0 +1,4 @@ +export enum SectionFooterVariant { + Solid = 'SOLID', + Transparent = 'TRANSPARENT', +} diff --git a/src/components/section/index.ts b/src/components/section/index.ts index 42292a51..43937c87 100644 --- a/src/components/section/index.ts +++ b/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' diff --git a/src/components/section/theme.ts b/src/components/section/theme.ts index c7833532..d2752268 100644 --- a/src/components/section/theme.ts +++ b/src/components/section/theme.ts @@ -1,5 +1,6 @@ import { Size } from '../types' import { SectionContentLayout } from './Section/SectionContent/types' +import { SectionFooterVariant } from './SectionFooter/types' import { SectionHeaderRowLayout } from './SectionHeader/SectionHeaderRow/types' import { SectionHeaderSpacerSize } from './SectionHeader/SectionHeaderSpacer/types' @@ -77,7 +78,9 @@ export default { }, }, footerArea: { - base: 'px-4 md:px-6 py-4 bg-neutral-100 border-t border-neutral-200 text-xs', + base: 'px-4 md:px-6 py-4 text-xs', + [SectionFooterVariant.Solid]: 'bg-neutral-100 border-t border-neutral-200', + [SectionFooterVariant.Transparent]: '', }, loading: { listItem: {