diff --git a/src/components/pager/pager-both-ellipses.component.yml b/src/components/pager/pager-both-ellipses.component.yml new file mode 100644 index 0000000..1113305 --- /dev/null +++ b/src/components/pager/pager-both-ellipses.component.yml @@ -0,0 +1,90 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Pager with Both Ellipses +group: Components +status: stable +props: + type: object + required: + - current + - ellipses + - items + properties: + current: + type: integer + title: Current Page + description: 'Specifies the current active page number' + data: 5 + ellipses: + type: object + title: Ellipses Visibility + description: 'Specifies whether to display ellipses for next and previous page navigation' + properties: + previous: + type: boolean + title: Show Previous Ellipsis + description: 'Determines whether to display an ellipsis for the previous page' + data: true + next: + type: boolean + title: Show Next Ellipsis + description: 'Determines whether to display an ellipsis for the next page' + data: true + items: + type: object + title: Page Items + description: 'Specifies the links for page navigation' + properties: + previous: + type: object + title: Previous Page Link + properties: + href: + type: string + title: Previous Page URL + description: 'URL for the previous page' + data: '#' + next: + type: object + title: Next Page Link + properties: + href: + type: string + title: Next Page URL + description: 'URL for the next page' + data: '#' + pages: + type: object + title: Page Links + description: 'Links for the page numbers' + properties: + 3: + type: object + properties: + href: + type: string + data: '#' + 4: + type: object + properties: + href: + type: string + data: '#' + 5: + type: object + properties: + href: + type: string + data: '#' + 6: + type: object + properties: + href: + type: string + data: '#' + 7: + type: object + properties: + href: + type: string + data: '#' diff --git a/src/components/pager/pager-both-ellipses.yml b/src/components/pager/pager-both-ellipses.yml deleted file mode 100644 index 46bfad8..0000000 --- a/src/components/pager/pager-both-ellipses.yml +++ /dev/null @@ -1,20 +0,0 @@ -current: 5 -ellipses: - previous: true - next: true -items: - previous: - href: '#' - next: - href: '#' - pages: - 3: - href: '#' - 4: - href: '#' - 5: - href: '#' - 6: - href: '#' - 7: - href: '#' diff --git a/src/components/pager/pager-first-last.component.yml b/src/components/pager/pager-first-last.component.yml new file mode 100644 index 0000000..e32a4f8 --- /dev/null +++ b/src/components/pager/pager-first-last.component.yml @@ -0,0 +1,113 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Pager with First and Last +group: Components +status: stable +props: + type: object + required: + - current + - ellipses + - items + properties: + current: + type: integer + title: Current Page + description: 'Specifies the current active page number' + data: 10 + ellipses: + type: object + title: Ellipses Visibility + description: 'Specifies whether to display ellipses for next and previous page navigation' + properties: + previous: + type: boolean + title: Show Previous Ellipsis + description: 'Determines whether to display an ellipsis for the previous page' + data: true + next: + type: boolean + title: Show Next Ellipsis + description: 'Determines whether to display an ellipsis for the next page' + data: true + items: + type: object + title: Page Items + description: 'Specifies the links for page navigation' + properties: + first: + type: object + title: First Page Link + properties: + href: + type: string + title: First Page URL + description: 'URL for the first page' + data: '#' + last: + type: object + title: Last Page Link + properties: + href: + type: string + title: Last Page URL + description: 'URL for the last page' + data: '#' + previous: + type: object + title: Previous Page Link + properties: + href: + type: string + title: Previous Page URL + description: 'URL for the previous page' + data: '#' + next: + type: object + title: Next Page Link + properties: + href: + type: string + title: Next Page URL + description: 'URL for the next page' + data: '#' + pages: + type: object + title: Page Links + description: 'Links for the page numbers' + properties: + 9: + type: object + properties: + href: + type: string + title: Page 9 URL + data: '#' + 10: + type: object + properties: + href: + type: string + title: Page 10 URL + data: '#' + 11: + type: object + properties: + href: + type: string + title: Page 11 URL + data: '#' + 12: + type: object + properties: + href: + type: string + title: Page 12 URL + data: '#' + 13: + type: object + properties: + href: + type: string + title: Page 13 URL + data: '#' diff --git a/src/components/pager/pager-first-last.yml b/src/components/pager/pager-first-last.yml deleted file mode 100644 index 6f7521f..0000000 --- a/src/components/pager/pager-first-last.yml +++ /dev/null @@ -1,24 +0,0 @@ -current: 10 -ellipses: - previous: true - next: true -items: - first: - href: '#' - last: - href: '#' - previous: - href: '#' - next: - href: '#' - pages: - 9: - href: '#' - 10: - href: '#' - 11: - href: '#' - 12: - href: '#' - 13: - href: '#' diff --git a/src/components/pager/pager-next-ellipses.component.yml b/src/components/pager/pager-next-ellipses.component.yml new file mode 100644 index 0000000..dab42be --- /dev/null +++ b/src/components/pager/pager-next-ellipses.component.yml @@ -0,0 +1,81 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Pager with Next Ellipses +group: Components +status: stable +props: + type: object + required: + - current + - ellipses + - items + properties: + current: + type: integer + title: Current Page + description: 'Specifies the current active page number' + data: 5 + ellipses: + type: object + title: Ellipses Visibility + description: 'Specifies whether to display ellipses for the next page navigation' + properties: + next: + type: boolean + title: Show Next Ellipsis + description: 'Determines whether to display an ellipsis for the next page' + data: true + items: + type: object + title: Page Items + description: 'Specifies the links for page navigation' + properties: + next: + type: object + title: Next Page Link + properties: + href: + type: string + title: Next Page URL + description: 'URL for the next page' + data: '#' + pages: + type: object + title: Page Links + description: 'Links for the page numbers' + properties: + 1: + type: object + properties: + href: + type: string + title: Page 1 URL + data: '#' + 2: + type: object + properties: + href: + type: string + title: Page 2 URL + data: '#' + 3: + type: object + properties: + href: + type: string + title: Page 3 URL + data: '#' + 4: + type: object + properties: + href: + type: string + title: Page 4 URL + data: '#' + 5: + type: object + properties: + href: + type: string + title: Page 5 URL + data: '#' diff --git a/src/components/pager/pager-next-ellipses.yml b/src/components/pager/pager-next-ellipses.yml deleted file mode 100644 index e622cdb..0000000 --- a/src/components/pager/pager-next-ellipses.yml +++ /dev/null @@ -1,17 +0,0 @@ -current: 5 -ellipses: - next: true -items: - next: - href: '#' - pages: - 1: - href: '#' - 2: - href: '#' - 3: - href: '#' - 4: - href: '#' - 5: - href: '#' diff --git a/src/components/pager/pager-prev-ellipses.component.yml b/src/components/pager/pager-prev-ellipses.component.yml new file mode 100644 index 0000000..c2594c4 --- /dev/null +++ b/src/components/pager/pager-prev-ellipses.component.yml @@ -0,0 +1,81 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Pager with Previous Ellipses +group: Components +status: stable +props: + type: object + required: + - current + - ellipses + - items + properties: + current: + type: integer + title: Current Page + description: 'Specifies the current active page number' + data: 8 + ellipses: + type: object + title: Ellipses Visibility + description: 'Specifies whether to display ellipses for the previous page navigation' + properties: + previous: + type: boolean + title: Show Previous Ellipsis + description: 'Determines whether to display an ellipsis for the previous page' + data: true + items: + type: object + title: Page Items + description: 'Specifies the links for page navigation' + properties: + previous: + type: object + title: Previous Page Link + properties: + href: + type: string + title: Previous Page URL + description: 'URL for the previous page' + data: '#' + pages: + type: object + title: Page Links + description: 'Links for the page numbers' + properties: + 5: + type: object + properties: + href: + type: string + title: Page 5 URL + data: '#' + 6: + type: object + properties: + href: + type: string + title: Page 6 URL + data: '#' + 7: + type: object + properties: + href: + type: string + title: Page 7 URL + data: '#' + 8: + type: object + properties: + href: + type: string + title: Page 8 URL + data: '#' + 9: + type: object + properties: + href: + type: string + title: Page 9 URL + data: '#' diff --git a/src/components/pager/pager-prev-ellipses.yml b/src/components/pager/pager-prev-ellipses.yml deleted file mode 100644 index d2c8e8f..0000000 --- a/src/components/pager/pager-prev-ellipses.yml +++ /dev/null @@ -1,17 +0,0 @@ -current: 8 -ellipses: - previous: true -items: - previous: - href: '#' - pages: - 5: - href: '#' - 6: - href: '#' - 7: - href: '#' - 8: - href: '#' - 9: - href: '#' diff --git a/src/components/pager/pager.component.yml b/src/components/pager/pager.component.yml new file mode 100644 index 0000000..2c82001 --- /dev/null +++ b/src/components/pager/pager.component.yml @@ -0,0 +1,82 @@ +$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json + +name: Pager +group: Components +status: stable +props: + type: object + required: + - current + - ellipses + - items + properties: + current: + type: integer + title: Current Page + description: 'Specifies the current active page number' + data: 3 + ellipses: + type: object + title: Ellipses Visibility + description: 'Specifies whether to display ellipses for next and previous page navigation' + properties: + next: + type: boolean + title: Show Next Ellipsis + description: 'Determines whether to display an ellipsis for the next page' + data: false + prev: + type: boolean + title: Show Previous Ellipsis + description: 'Determines whether to display an ellipsis for the previous page' + data: false + items: + type: object + title: Pagination Items + description: 'Defines the pagination items with their respective links' + properties: + pages: + type: object + title: Page Links + description: 'Provides the href links for the pagination pages' + properties: + 1: + type: object + properties: + href: + type: string + title: Page 1 Link + description: 'Link for page 1' + data: '#' + 2: + type: object + properties: + href: + type: string + title: Page 2 Link + description: 'Link for page 2' + data: '#' + 3: + type: object + properties: + href: + type: string + title: Page 3 Link + description: 'Link for page 3' + data: '#' + 4: + type: object + properties: + href: + type: string + title: Page 4 Link + description: 'Link for page 4' + data: '#' + 5: + type: object + properties: + href: + type: string + title: Page 5 Link + description: 'Link for page 5' + data: '#' diff --git a/src/components/pager/pager.stories.js b/src/components/pager/pager.stories.js index ffe1c8a..23a978d 100644 --- a/src/components/pager/pager.stories.js +++ b/src/components/pager/pager.stories.js @@ -1,24 +1,25 @@ -import pager from './pager.twig'; +import pagerTwig from './pager.twig'; +import { mapDataToTwig } from '../../util/dataTransformers'; -import pagerData from './pager.yml'; -import pagerNextEllipsesData from './pager-next-ellipses.yml'; -import pagerPrevEllipsesData from './pager-prev-ellipses.yml'; -import pagerBothEllipsesData from './pager-both-ellipses.yml'; -import pagerFirstLastData from './pager-first-last.yml'; +import { props as pagerProps } from './pager.component.yml'; +import { props as pagerNextEllipsesProps } from './pager-next-ellipses.component.yml'; +import { props as pagerPrevEllipsesProps } from './pager-prev-ellipses.component.yml'; +import { props as pagerBothEllipsesProps } from './pager-both-ellipses.component.yml'; +import { props as pagerFirstLastProps } from './pager-first-last.component.yml'; + +const pagerData = mapDataToTwig(pagerProps.properties); +const pagerNextEllipsesData = mapDataToTwig(pagerNextEllipsesProps.properties); +const pagerPrevEllipsesData = mapDataToTwig(pagerPrevEllipsesProps.properties); +const pagerBothEllipsesData = mapDataToTwig(pagerBothEllipsesProps.properties); +const pagerFirstLastData = mapDataToTwig(pagerFirstLastProps.properties); /** * Storybook Definition. */ export default { title: 'Components/Pager' }; -export const basic = () => pager(pagerData); - -export const withNext = () => pager({ ...pagerData, ...pagerNextEllipsesData }); - -export const withBoth = () => pager({ ...pagerData, ...pagerBothEllipsesData }); - -export const withPrevious = () => - pager({ ...pagerData, ...pagerPrevEllipsesData }); - -export const withFirstAndLast = () => - pager({ ...pagerData, ...pagerFirstLastData }); +export const basic = () => pagerTwig(pagerData); +export const withNext = () => pagerTwig(pagerNextEllipsesData); +export const withPrevious = () => pagerTwig(pagerPrevEllipsesData); +export const withBoth = () => pagerTwig(pagerBothEllipsesData); +export const withFirstAndLast = () => pagerTwig(pagerFirstLastData); diff --git a/src/components/pager/pager.yml b/src/components/pager/pager.yml deleted file mode 100644 index 2cf0216..0000000 --- a/src/components/pager/pager.yml +++ /dev/null @@ -1,16 +0,0 @@ -current: 3 -ellipses: - next: false - prev: false -items: - pages: - 1: - href: '#' - 2: - href: '#' - 3: - href: '#' - 4: - href: '#' - 5: - href: '#' diff --git a/src/tokens/tokens.scss b/src/tokens/tokens.scss index 3ab0fd0..250f5dd 100644 --- a/src/tokens/tokens.scss +++ b/src/tokens/tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 21 Aug 2024 18:02:28 GMT + * Generated on Fri, 23 Aug 2024 15:42:09 GMT */ :root {