feat(new-hope): add sdds-serv

feat(new-hope): add sdds-serv ашч feat(new-hope): add sdds-serv fix feat(new-hope): add sdds-serv fix 2 feat(new-hope): add sdds-serv fix 3 feat(new-hope): add sdds-serv fix 4 feat(new-hope): add sdds-serv fix 5 feat(new-hope): add sdds-serv fix 6 feat(new-hope): add sdds-serv fix 7 feat(new-hope): add sdds-serv fix 8
salute-developers · Mar 22, 2024 · 3a169bd · 3a169bd
1 parent d6418ee
commit 3a169bd
Show file tree

Hide file tree

Showing 35 changed files with 1,087 additions and 195 deletions.
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.config.ts b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts
@@ -120,7 +120,8 @@ export const config = {
                 ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style);
                 ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
                 ${paginationTokens.buttonHeight}: 3.5rem;
-                ${paginationTokens.buttonWidth}: 3.5rem;
+                ${paginationTokens.buttonWidth}: 3rem;
+                ${paginationTokens.buttonWidthShorter}: 2.25rem;
                 ${paginationTokens.paginationInputWidth}: 4rem;
                 ${paginationTokens.buttonRadius}: 0.875rem;
                 ${paginationTokens.paginationIconSize}: 1.2rem;
@@ -168,6 +169,7 @@ export const config = {
 
                 ${paginationTokens.buttonHeight}: 3rem;
                 ${paginationTokens.buttonWidth}: 3rem;
+                ${paginationTokens.buttonWidthShorter}: 2rem;
                 ${paginationTokens.paginationInputWidth}: 3.5rem;
                 ${paginationTokens.buttonRadius}: 0.75rem;
                 ${paginationTokens.paginationIconSize}: 1.05rem;
@@ -213,6 +215,7 @@ export const config = {
 
                 ${paginationTokens.buttonHeight}: 2.5rem;
                 ${paginationTokens.buttonWidth}: 2.5rem;
+                ${paginationTokens.buttonWidthShorter}: 1.75rem;
                 ${paginationTokens.paginationInputWidth}: 3rem;
                 ${paginationTokens.buttonRadius}: 0.625rem;
                 ${paginationTokens.paginationIconSize}: 0.9rem;
@@ -260,6 +263,7 @@ export const config = {
                 ${paginationTokens.paginationInputWidth}: 2.5rem;
                 ${paginationTokens.buttonRadius}: 0.5rem;
                 ${paginationTokens.buttonWidth}: 2rem;
+                ${paginationTokens.buttonWidthShorter}: 1.5rem;
                 ${paginationTokens.paginationIconSize}: 0.75rem;
                 ${paginationTokens.paginationIconDoubleSize}: 1rem;
 

diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.styles.ts b/packages/plasma-new-hope/src/components/Pagination/Pagination.styles.ts
@@ -120,3 +120,8 @@ export const PaginationButton = styled(Button)`
         ${buttonTokens.buttonBackgroundColorActive}: var(${tokens.paginationCurrentButtonActiveBackgroundColor});
     }
 `;
+
+export const PaginationShorter = styled(PaginationButton)`
+    ${buttonTokens.buttonWidth}: var(${tokens.buttonWidthShorter});
+    ${buttonTokens.buttonPadding}: 0;
+`;
diff --git a/packages/plasma-new-hope/src/components/Pagination/Pagination.tokens.ts b/packages/plasma-new-hope/src/components/Pagination/Pagination.tokens.ts
@@ -11,7 +11,7 @@ export const classes = {
     compactType: 'pagination-type-compact',
 
     withHasQuickJump: 'pagination-has-quick-jump',
-    withHasPerPageSelect: 'pagination-has-per-page-select',
+    withHasPerPageSelect: 'pagination-has-perpage-select',
 
     paginationPageButton: 'pagination-page-button',
     paginationPageButtonActive: 'pagination-page-button-active',
@@ -39,6 +39,7 @@ export const tokens = {
     buttonDisabledOpacity: '--plasma-pagination-button-disabled-opacity',
 
     buttonHeight: '--plasma-pagination-button-height',
+    buttonWidthShorter: '--plasma-pagination-button-width-shorter',
     buttonWidth: '--plasma-pagination-button-width',
     paginationInputWidth: '--plasma-pagination-input-width',
     buttonRadius: '--plasma-pagination-button-radius',