-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* update pagination & replace Ingress * Replace chip.toggle with chip.checkbox and remove chip.group * add story to test receipt-action-bar * Refactor spacing in ActionBar.stories.tsx and remove unnecessary prop * delegation-modal * Refactor spacing in Dialog.stories.tsx and fix modal onClose * update changed ds-props * heading size & overviewPage story update * add manual spacing * remove console.log * Update CSS for users list heading and action bar content headings * Refactor ChooseOrgPage component and CSS - Refactor ChooseOrgPage component to use the Heading component from @digdir/designsystemet-react for consistent heading styles. - Add CSS class ".alertHeading" to apply margin-bottom to alert headings in ChooseOrgPage. * Refactor ChooseOrgPage component and CSS Update CSS for users list heading and action bar content headings Remove console.log Add manual spacing Update heading size and overviewPage story Add ConfirmationPage component and CSS Update ConfirmationPage component to include alert heading Update apiDelegationSlice.ts * fix margins in confirmation-page * fix margins for users list heading and action bar content headings * remove story * Refactor mockServiceWorker.js and ChooseServicePage.module.css
- Loading branch information
Showing
61 changed files
with
1,220 additions
and
426 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -203,6 +203,7 @@ | |
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .title, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { AmPagination } from './AmPaginering'; | ||
|
|
||
| type AmPaginationPropsAndCustomArgs = React.ComponentProps<typeof AmPagination>; | ||
|
|
||
| const paginatedDummyData = Array.from({ length: 105 }, (_, i) => i + 1); | ||
|
|
||
| const TestAmPagination = (props: AmPaginationPropsAndCustomArgs) => { | ||
| const [currentPage, setCurrentPage] = React.useState(1); | ||
| const itemsPerPage = 10; | ||
| const totalPages = Math.ceil(paginatedDummyData.length / itemsPerPage); | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2rem' }}> | ||
| <ul> | ||
| {paginatedDummyData | ||
| .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage) | ||
| .map((item) => ( | ||
| <li key={item}>{`Element: ${item}`}</li> | ||
| ))} | ||
| </ul> | ||
| <AmPagination | ||
| {...props} | ||
| currentPage={currentPage} | ||
| setCurrentPage={setCurrentPage} | ||
| totalPages={totalPages} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default { | ||
| title: 'Components/AmPagination', | ||
| component: AmPagination, | ||
| } as Meta; | ||
|
|
||
| export const Default: StoryObj<AmPaginationPropsAndCustomArgs> = { | ||
| args: { | ||
| totalPages: 10, | ||
| showPages: 5, | ||
| currentPage: 1, | ||
| hideLabels: false, | ||
| size: 'md', | ||
| }, | ||
| argTypes: { | ||
| totalPages: { control: { type: 'number' } }, | ||
| showPages: { control: { type: 'number' } }, | ||
| size: { control: { type: 'inline-radio', options: ['sm', 'md', 'lg'] } }, | ||
| currentPage: { control: { type: 'number' } }, | ||
| hideLabels: { control: { type: 'boolean' } }, | ||
| }, | ||
| render: (args) => <AmPagination {...args} />, | ||
| }; | ||
|
|
||
| export const Test: StoryObj<AmPaginationPropsAndCustomArgs> = { | ||
| render: (args) => <TestAmPagination {...args} />, | ||
| args: { | ||
| showPages: 5, | ||
| }, | ||
| argTypes: { | ||
| showPages: { control: { type: 'number' } }, | ||
| totalPages: { disabled: true }, | ||
| currentPage: { disabled: true }, | ||
| setCurrentPage: { disabled: true }, | ||
| hideLabels: { control: { type: 'boolean' } }, | ||
| size: { control: { type: 'inline-radio', options: ['sm', 'md', 'lg'] } }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import type { PaginationProps } from '@digdir/designsystemet-react'; | ||
| import { Pagination, usePagination } from '@digdir/designsystemet-react'; | ||
| import * as React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| export interface AmPaginationProps extends PaginationProps { | ||
| totalPages: number; | ||
| showPages?: number; | ||
| setCurrentPage?: (page: number) => void; | ||
| currentPage: number; | ||
| hideLabels?: boolean; | ||
| } | ||
|
|
||
| export const AmPagination = ({ | ||
| totalPages, | ||
| showPages = 5, | ||
| currentPage, | ||
| setCurrentPage, | ||
| hideLabels = false, | ||
| size = 'md', | ||
| }: AmPaginationProps) => { | ||
| const { t } = useTranslation(); | ||
| const { pages, prevButtonProps, nextButtonProps } = usePagination({ | ||
| currentPage, | ||
| setCurrentPage, | ||
| onChange: () => {}, | ||
| totalPages, | ||
| showPages: showPages > totalPages ? totalPages : showPages, | ||
| }); | ||
|
|
||
| return ( | ||
| <Pagination size={size}> | ||
| <Pagination.List> | ||
| <Pagination.Item> | ||
| <Pagination.Button {...prevButtonProps}> | ||
| {!hideLabels && t('common.previous')} | ||
| </Pagination.Button> | ||
| </Pagination.Item> | ||
| {pages.map(({ page, itemKey, buttonProps }) => ( | ||
| <Pagination.Item key={itemKey}> | ||
| <Pagination.Button | ||
| {...buttonProps} | ||
| aria-label={`${t('common.page')} ${page}`} | ||
| > | ||
| {page} | ||
| </Pagination.Button> | ||
| </Pagination.Item> | ||
| ))} | ||
| <Pagination.Item> | ||
| <Pagination.Button {...nextButtonProps}> | ||
| {!hideLabels && t('common.next')} | ||
| </Pagination.Button> | ||
| </Pagination.Item> | ||
| </Pagination.List> | ||
| </Pagination> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { AmPagination } from './AmPaginering'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,3 +7,7 @@ | |
| .spacing { | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .title { | ||
| margin-bottom: 10px; | ||
| } | ||
Oops, something went wrong.