Load more component misc fixes (#740)

* feat(components): add LoadMore component for dynamic list expansion

Introduce LoadMore component to allow users to load additional items
into a list. This component includes a "Show More" button and an
optional count indicator. It supports a loading state and automatically
hides the button when all items are loaded. This addition enhances user
experience by providing a seamless way to view more content without
navigating away from the current page.

* refactor(stories): update LoadMore stories to use StoryObj for improved type safety and readability
fix(stories): correct story names to follow consistent naming convention

* style(types.ts): add semicolons to type definitions for consistency and readability

* refactor(LoadMore.tsx, LoadMoreList.tsx): convert components from arrow functions to named functions for improved readability and consistency
fix(LoadMoreList.tsx): change key in list items from index to item value to ensure unique keys and prevent potential rendering issues

* style(loadMore): remove redundant comments for cleaner code

Remove unnecessary comments in LoadMoreList.tsx and LoadMore.stories.tsx
to improve code readability and maintainability.

* feat(loadMore): add "Show Less" button functionality to LoadMore component

Add a "Show Less" button to allow users to reduce the number of displayed
items. This enhances user control over the list view, especially when
dealing with large datasets. Update stories to reflect the new feature
and rename "WithoutCount" to "WithCount" for clarity.

* feat(loadMore): add "Show Less" button functionality to allow users to reduce items
docs(loadMore): update documentation to include "Show Less" button usage
style(PaginationAmount): adjust spacing in pagination result display for consistency

* Update src/components/loadMore/LoadMore.stories.tsx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/loadMore/LoadMore.stories.tsx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore(package.json): bump version from 10.4.6 to 10.4.8 to prepare for new release

* test(ExtendedPagination.spec.tsx): remove space in result range display to ensure consistency in text rendering

* style(pagination): add space after dash in pagination display

Ensure consistent spacing in pagination text for better readability.

* chore(package.json): bump version from 10.4.8 to 10.5.0 to reflect new features or improvements

* test(ExtendedPagination.spec.tsx): fix spacing in expected text for consistency in test assertions

* style(vscode): change eslint fixAll setting to "explicit" for clarity

fix(ExtendedPagination.spec.tsx): add space after hyphen in text assertions for consistency

style(LoadMore.tsx): change height to min-height for better layout flexibility

feat(LoadMore.tsx): add inline styles and icons to buttons for improved UI

feat(PaginationAmount.tsx): add optional style prop for custom styling of pagination results

* restore vscode eslint setting

* chore(package.json): bump version from 10.5.0 to 10.5.1 for patch release

* test(extendedPagination.spec.tsx): add assertions to verify elements are in the document to improve test reliability

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: gmacev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "10.5.0",
+  "version": "10.5.1",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/extendedPagination/ExtendedPagination.spec.tsx

@@ -38,23 +38,31 @@ const getParams = (firstPage = 0, from = 0, count = 200) => ({
 test("shows current number of results", async () => {
   const params = getParams();
   getComponent(params);
-  await screen.findByText(`1 -${params.size} of ${params.count}`);
+  const element = await screen.findByText(
+    `1 - ${params.size} of ${params.count}`
+  );
+  expect(element).toBeInTheDocument();
 });
 
 test("shows current number of results for start index 1", async () => {
   const params = getParams(1);
   getComponent(params);
-  await screen.findByText(`1 -${params.size} of ${params.count}`);
+  const element = await screen.findByText(
+    `1 - ${params.size} of ${params.count}`
+  );
+  expect(element).toBeInTheDocument();
 });
 
 test("shows `per page` component", async () => {
   getComponent(getParams());
-  await screen.findByText(/show/i);
+  const element = await screen.findByText(/show/i);
+  expect(element).toBeInTheDocument();
 });
 
 test("shows `per page` component for start index 1", async () => {
   getComponent(getParams(1));
-  await screen.findByText(/show/i);
+  const element = await screen.findByText(/show/i);
+  expect(element).toBeInTheDocument();
 });
 
 test("shows last page button on 1st page", () => {
@@ -182,7 +190,7 @@ test("renders without number of results and `per page` for small screens", () =>
 
   expect(screen.queryByText(/show/i)).not.toBeInTheDocument();
   expect(
-    screen.queryByText(`1 -${params.size} of ${params.count}`)
+    screen.queryByText(`1 - ${params.size} of ${params.count}`)
   ).not.toBeInTheDocument();
 });
 
@@ -202,6 +210,6 @@ test("renders without number of results and `per page` for small screens for sta
 
   expect(screen.queryByText(/show/i)).not.toBeInTheDocument();
   expect(
-    screen.queryByText(`1 -${params.size} of ${params.count}`)
+    screen.queryByText(`1 - ${params.size} of ${params.count}`)
   ).not.toBeInTheDocument();
 });

src/components/loadMore/LoadMore.tsx

@@ -9,7 +9,7 @@ const Container = styled(StyledPaginationBox)<{ hideCount?: boolean }>`
   justify-content: ${({ hideCount }) =>
     hideCount ? "center" : "space-between"};
   padding: ${theme.spacing.spacing02} ${theme.spacing.spacing03};
-  height: 36px;
+  min-height: 36px;
 `;
 
 /**
@@ -31,7 +31,12 @@ export function LoadMore({
   return (
     <Container className={className} small={false} hideCount={hideCount}>
       {!hideCount && (
-        <PaginationAmount from={0} size={currentCount} count={total} />
+        <PaginationAmount
+          from={0}
+          size={currentCount}
+          count={total}
+          style={{ width: "auto" }}
+        />
       )}
 
       {hasMoreItems && (
@@ -41,6 +46,8 @@ export function LoadMore({
           initialState={isLoading ? "loading" : undefined}
           aria-label="Show more items"
           disabled={isLoading}
+          style={{ margin: 0 }}
+          icon="chevronDown"
           onClick={onLoadMore}
         >
           {isLoading ? "Loading..." : "Show more"}
@@ -54,6 +61,8 @@ export function LoadMore({
           aria-label="Show less items"
           initialState={isLoading ? "loading" : undefined}
           disabled={isLoading}
+          style={{ margin: 0 }}
+          icon="chevronUp"
           onClick={onLoadLess}
         >
           {isLoading ? "Loading..." : "Show less"}

src/components/paginationHelpers/PaginationAmount.tsx

@@ -5,9 +5,16 @@ type Props = {
   size: number;
   count: number;
   firstPage?: number;
+  style?: React.CSSProperties;
 };
 
-export function PaginationAmount({ from, size, count, firstPage = 0 }: Props) {
+export function PaginationAmount({
+  from,
+  size,
+  count,
+  firstPage = 0,
+  style,
+}: Props) {
   const isFirstPageZero = firstPage === 0;
 
   const s = Number(size);
@@ -21,8 +28,8 @@ export function PaginationAmount({ from, size, count, firstPage = 0 }: Props) {
   const max = maxCurrentPage < 1 ? size : maxCurrentPage;
 
   return (
-    <div className="pagination-result">
-      {min} -{max > count ? count : max} of {count}
+    <div className="pagination-result" style={style}>
+      {min} - {max > count ? count : max} of {count}
     </div>
   );
 }