fix(new-hope): Edit core and storybook (#1157)

salute-developers · Apr 2, 2024 · 05f89c9 · 05f89c9
2 parents cd47ecc + 47c3916
commit 05f89c9
Show file tree

Hide file tree

Showing 36 changed files with 139 additions and 78 deletions.
diff --git a/...omponent-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png b/...omponent-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png
diff --git a/...tion.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png b/...tion.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png
diff --git a/...ion.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png b/...ion.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png
diff --git a/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png b/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png
diff --git a/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png b/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png
diff --git a/...mponent-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png b/...mponent-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png
diff --git a/...agination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png b/...agination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png
diff --git a/...omponent-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png b/...omponent-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png
diff --git a/...tion.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png b/...tion.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png
diff --git a/...ion.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png b/...ion.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png
diff --git a/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png b/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png
diff --git a/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png b/...gination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png
diff --git a/...mponent-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png b/...mponent-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png
diff --git a/...nation.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png b/...nation.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png
diff --git a/...agination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png b/...agination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png
diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx b/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx
@@ -8,7 +8,7 @@ import type { FC } from 'react';
 const id = 'test-pagination';
 const slots = [7, 9, 13];
 const values = [1, 10, 20];
-const count = 20;
+const count = 2000;
 const views = ['clear', 'secondary', 'primary'];
 
 const StandardTypoStyle = createGlobalStyle(standardTypo);
@@ -216,12 +216,18 @@ describe('plasma-new-hope: Pagination Content', () => {
         const [pageValue, setPageValue] = useState(agrs.value);
         const [perPageValue, setPerPageValue] = useState(agrs.perPage);
 
-        const handleChange = useCallback(
-            (page: number, perPage: number) => {
+        const handleChangePerpage = useCallback(
+            (perPage: number) => {
                 setPerPageValue(perPage);
+            },
+            [perPageValue, setPerPageValue],
+        );
+
+        const handleChangePage = useCallback(
+            (page: number) => {
                 setPageValue(page);
             },
-            [pageValue, perPageValue, setPageValue, setPerPageValue],
+            [pageValue, setPageValue],
         );
 
         return (
@@ -230,11 +236,12 @@ describe('plasma-new-hope: Pagination Content', () => {
                     {...agrs}
                     value={pageValue}
                     perPage={perPageValue}
+                    count={count}
                     leftContent={
                         <Button
                             id="pagination-button-prev"
                             onClick={() => {
-                                setPageValue(pageValue - 1);
+                                handleChangePage(pageValue - 1);
                             }}
                         >
                             Prev
@@ -244,13 +251,14 @@ describe('plasma-new-hope: Pagination Content', () => {
                         <Button
                             id="pagination-button-next"
                             onClick={() => {
-                                setPageValue(pageValue + 1);
+                                handleChangePage(pageValue + 1);
                             }}
                         >
                             Next
                         </Button>
                     }
-                    onChangeValue={handleChange}
+                    onChangePageValue={handleChangePage}
+                    onChangePerageValue={handleChangePerpage}
                 />
             </>
         );

diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts
@@ -166,7 +166,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 4rem;
                 ${paginationTokens.inputHeight}: 3.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             m: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
@@ -212,7 +212,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3.5rem;
                 ${paginationTokens.inputHeight}: 3rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             s: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family);
@@ -258,7 +258,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3rem;
                 ${paginationTokens.inputHeight}: 2.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             xs: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family);
@@ -304,7 +304,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 2.5rem;
                 ${paginationTokens.inputHeight}: 2rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
         },
         type: {

diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.stories.tsx b/packages/plasma-b2c/src/components/Pagination/Pagination.stories.tsx
@@ -51,7 +51,7 @@ type Story = StoryObj<typeof Pagination>;
 
 export const Default: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',
@@ -70,12 +70,18 @@ const PaginationContent = (agrs) => {
     const [pageValue, setPageValue] = useState(agrs.value);
     const [perPageValue, setPerPageValue] = useState(agrs.perPage);
 
-    const handleChange = useCallback(
-        (page: number, perPage: number) => {
+    const handleChangePerpage = useCallback(
+        (perPage: number) => {
             setPerPageValue(perPage);
+        },
+        [perPageValue, setPerPageValue],
+    );
+
+    const handleChangePage = useCallback(
+        (page: number) => {
             setPageValue(page);
         },
-        [pageValue, perPageValue, setPageValue, setPerPageValue],
+        [pageValue, setPageValue],
     );
 
     return (
@@ -102,15 +108,16 @@ const PaginationContent = (agrs) => {
                         Next
                     </Button>
                 }
-                onChangeValue={handleChange}
+                onChangePageValue={handleChangePage}
+                onChangePerageValue={handleChangePerpage}
             />
         </>
     );
 };
 
 export const Content: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',

diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.tsx b/packages/plasma-new-hope/src/components/Pagination/Pagination.tsx
@@ -57,7 +57,7 @@ export const paginationRoot = (Root: RootProps<HTMLDivElement, PaginationProps>)
             },
             ref,
         ) => {
-            const [page, setPageValue] = useState<number>(value ?? defaultValues.value);
+            const [page, setPageValue] = useState<number>();
             const [perPageValue, setPerPageValue] = useState(perPage);
             const [pages, setPagesValue] = useState<number>(value);
             const [sections, setSections] = useState<number[][] | null>(null);
@@ -75,22 +75,22 @@ export const paginationRoot = (Root: RootProps<HTMLDivElement, PaginationProps>)
             };
 
             const handlerSetPage = (newPageValue?: number) => {
-                newPageValue = newPageValue ?? defaultValues.value;
-                if (newPageValue > pages) {
-                    newPageValue = pages;
+                let pageValue = newPageValue ?? defaultValues.value;
+                if (pageValue > pages) {
+                    pageValue = pages;
                 }
-                if (newPageValue < 1) {
-                    newPageValue = 1;
+                if (pageValue < 1) {
+                    pageValue = 1;
                 }
-                if (disabled.includes(newPageValue)) {
+                if (disabled.includes(pageValue)) {
                     return;
                 }
-                setPageValue(newPageValue);
-                onChangePageValue?.(newPageValue);
+                setPageValue(pageValue);
+                onChangePageValue?.(pageValue);
             };
 
             const handlerSetPerPage = (newPerPageValue?: number) => {
-                setPageValue(1);
+                handlerSetPage(1);
                 setPerPageValue(newPerPageValue);
                 onChangePageValue?.(1);
                 onChangePerPageValue?.(newPerPageValue);
@@ -104,7 +104,11 @@ export const paginationRoot = (Root: RootProps<HTMLDivElement, PaginationProps>)
 
             useEffect(() => {
                 handlerSetPages(perPage);
-            }, [perPage, handlerSetPages]);
+            }, [perPage, count, handlerSetPages]);
+
+            useEffect(() => {
+                handlerSetPage(value);
+            }, [value]);
 
             useEffect(() => {
                 setSections(getSections(page, pages, slots));

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts
@@ -169,7 +169,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 4rem;
                 ${paginationTokens.inputHeight}: 3.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             m: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
@@ -215,7 +215,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3.5rem;
                 ${paginationTokens.inputHeight}: 3rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             s: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family);
@@ -261,7 +261,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3rem;
                 ${paginationTokens.inputHeight}: 2.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             xs: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family);
@@ -307,7 +307,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 2.5rem;
                 ${paginationTokens.inputHeight}: 2rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
         },
         type: {

diff --git a/...ages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx b/...ages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx
@@ -53,7 +53,7 @@ type Story = StoryObj<typeof Pagination>;
 
 export const Default: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',
@@ -71,12 +71,18 @@ const PaginationContent = (agrs) => {
     const [pageValue, setPageValue] = useState(agrs.value);
     const [perPageValue, setPerPageValue] = useState(agrs.perPage);
 
-    const handleChange = useCallback(
-        (page: number, perPage: number) => {
+    const handleChangePerpage = useCallback(
+        (perPage: number) => {
             setPerPageValue(perPage);
+        },
+        [perPageValue, setPerPageValue],
+    );
+
+    const handleChangePage = useCallback(
+        (page: number) => {
             setPageValue(page);
         },
-        [pageValue, perPageValue, setPageValue, setPerPageValue],
+        [pageValue, setPageValue],
     );
 
     return (
@@ -103,15 +109,16 @@ const PaginationContent = (agrs) => {
                         Next
                     </Button>
                 }
-                onChangeValue={handleChange}
+                onChangePageValue={handleChangePage}
+                onChangePerageValue={handleChangePerpage}
             />
         </>
     );
 };
 
 export const Content: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts
@@ -168,7 +168,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 4rem;
                 ${paginationTokens.inputHeight}: 3.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             m: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
@@ -213,7 +213,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3.5rem;
                 ${paginationTokens.inputHeight}: 3rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             s: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family);
@@ -259,7 +259,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 3rem;
                 ${paginationTokens.inputHeight}: 2.5rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
             xs: css`
                 ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family);
@@ -305,7 +305,7 @@ export const config = {
                 ${paginationTokens.inputWidth}: 2.5rem;
                 ${paginationTokens.inputHeight}: 2rem;
                 ${paginationTokens.inputPadding}: 0 0.625rem;
-                ${paginationTokens.inputBorderWidth}: 0.125rem;
+                ${paginationTokens.inputBorderWidth}: 0.0625rem;
             `,
         },
         type: {

diff --git a/...ages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.stories.tsx b/...ages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.stories.tsx
@@ -53,7 +53,7 @@ type Story = StoryObj<typeof Pagination>;
 
 export const Default: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',
@@ -72,12 +72,18 @@ const PaginationContent = (agrs) => {
     const [pageValue, setPageValue] = useState(agrs.value);
     const [perPageValue, setPerPageValue] = useState(agrs.perPage);
 
-    const handleChange = useCallback(
-        (page: number, perPage: number) => {
+    const handleChangePerpage = useCallback(
+        (perPage: number) => {
             setPerPageValue(perPage);
+        },
+        [perPageValue, setPerPageValue],
+    );
+
+    const handleChangePage = useCallback(
+        (page: number) => {
             setPageValue(page);
         },
-        [pageValue, perPageValue, setPageValue, setPerPageValue],
+        [pageValue, setPageValue],
     );
 
     return (
@@ -104,15 +110,16 @@ const PaginationContent = (agrs) => {
                         Next
                     </Button>
                 }
-                onChangeValue={handleChange}
+                onChangePageValue={handleChangePage}
+                onChangePerageValue={handleChangePerpage}
             />
         </>
     );
 };
 
 export const Content: Story = {
     args: {
-        count: 20,
+        count: 2000,
         value: 1,
         slots: 9,
         type: 'default',