Add "Show All" button to load all items at once (#762)

* feat(loadMore): add "Show All" button to load all items at once

Introduce an optional "Show All" button to the LoadMore component,
allowing users to load all remaining items in one action. This feature
enhances user experience by providing more flexibility in how items are
loaded. The button is fully customizable, supporting additional props
and labels. Update documentation and stories to reflect the new
functionality and provide examples of usage.

* bump version

* formatting fix

* misc fixes

* refactor

* better typing

Author: gmacev

package-lock.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": "11.2.3",
+  "version": "11.2.4",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -11,11 +11,13 @@ The `LoadMore` component provides a "Show More" button that allows users to load
 ## Features
 
 - "Show More" button to load additional items when clicked
+- Optional "Show All" button to load all remaining items at once
 - Optional count indicator showing current items and total (e.g., "1-5 of 15")
 - "Show Less" button appears when all items are loaded (if onLoadLess prop is provided)
 - Supports a loading state to disable the button during data fetching
 - Automatically hides the "Show More" button when all items are loaded
 - Option to hide the count indicator with centered button layout
+- Fully customizable buttons (labels, styles, and other props)
 
 ## Basic Usage
 
@@ -36,6 +38,13 @@ const MyList = () => {
     setIsLoading(false);
   };
 
+  const handleShowAll = () => {
+    setIsLoading(true);
+    // Fetch all remaining items, then:
+    setItems([...items, ...remainingItems]);
+    setIsLoading(false);
+  };
+
   const handleLoadLess = () => {
     // Reduce items to initial batch size
     setItems(items.slice(0, batchSize));
@@ -53,8 +62,11 @@ const MyList = () => {
         currentCount={items.length}
         total={totalItems}
         onLoadMore={handleLoadMore}
+        onShowAll={handleShowAll}
         onLoadLess={handleLoadLess}
         isLoading={isLoading}
+        showMoreLabel="Load Next Page"
+        showAllButtonProps={{ status: "accent" }}
       />
     </div>
   );
@@ -79,6 +91,14 @@ Shows both the count indicator and "Show More" button:
   <Story id="components-loadmore--with-count" />
 </Canvas>
 
+### With Show All
+
+Shows the "Show All" button next to the "Show More" button.
+
+<Canvas>
+  <Story id="components-loadmore--with-show-all" />
+</Canvas>
+
 ### Mid-List Example
 
 Shows the state when some items are loaded:
@@ -113,12 +133,22 @@ A complete example showing the component in use with a list:
 
 ### With Show Less
 
-Shows how the "Show Less" button appears when all items are loaded and onLoadLess is provided:
+Shows how the "Show Less" button appears when all items are loaded and
+onLoadLess is provided:
 
 <Canvas>
   <Story id="components-loadmore--with-show-less" />
 </Canvas>
 
+### With List and Show All
+
+A complete example showing the component in use with a list and the "Show All"
+button.
+
+<Canvas>
+  <Story id="components-loadmore--with-list-and-show-all" />
+</Canvas>
+
 ## Props
 
 <ArgsTable of={LoadMore} />
@@ -127,7 +157,8 @@ Shows how the "Show Less" button appears when all items are loaded and onLoadLes
 
 The component follows accessibility best practices:
 
-- The "Show More" button is properly labeled for screen readers
+- The "Show More" and "Show All" buttons are properly labeled for screen
+  readers
 - The button is disabled during loading states to prevent multiple clicks
 - The count indicator (when shown) provides context about the loaded items
 
@@ -145,21 +176,46 @@ The component follows accessibility best practices:
    <LoadMore currentCount={5} total={15} onLoadMore={handleLoadMore} />
    ```
 
-3. **With Show Less**
+3. **With Show All**
+
+   ```jsx
+   <LoadMore currentCount={5} total={15} onLoadMore={handleLoadMore} onShowAll={handleShowAll} />
+   ```
+
+4. **With Custom Buttons and Labels**
+
+   ```jsx
+   <LoadMore
+     currentCount={5}
+     total={15}
+     onLoadMore={handleLoadMore}
+     onShowAll={handleShowAll}
+     showMoreLabel="Gimme more"
+     showMoreButtonProps={{ severity: "low" }}
+     showAllButtonProps={{ disabled: true }}
+   />
+   ```
+
+5. **With Show Less**
 
    ```jsx
    <LoadMore currentCount={15} total={15} onLoadMore={handleLoadMore} onLoadLess={handleLoadLess} />
    ```
 
-4. **With Loading State**
+6. **With Loading State**
    ```jsx
    <LoadMore currentCount={5} total={15} onLoadMore={handleLoadMore} isLoading={true} />
    ```
 
 ## Design Considerations
 
-- The count indicator uses the same styling as other pagination components for consistency
+- The count indicator uses the same styling as other pagination components for
+  consistency
 - When `hideCount` is true, the button is automatically centered
-- The button uses the link color and underline hover effect for a lightweight appearance
+- The button uses the link color and underline hover effect for a lightweight
+  appearance
 - Loading state is visually indicated while maintaining the button's position
-- "Show Less" button appears in place of "Show More" when all items are loaded and onLoadLess is provided
+- "Show Less" button appears in place of "Show More" when all items are loaded
+  and onLoadLess is provided
+- The "Show All" button appears next to the "Show More" button when the
+  `onShowAll` prop is provided.

src/components/loadMore/LoadMore.mdx

@@ -77,11 +77,28 @@ export const Loading: Story = {
   name: "loading",
 };
 
+export const WithShowAll: Story = {
+  render: () => (
+    <LoadMore
+      currentCount={5}
+      total={15}
+      onLoadMore={() => console.log("Load more clicked")}
+      onShowAll={() => console.log("Show all clicked")}
+    />
+  ),
+  name: "with-show-all",
+};
+
 export const WithList: Story = {
   render: () => <LoadMoreList />,
   name: "with-list",
 };
 
+export const WithListAndShowAll: Story = {
+  render: () => <LoadMoreList withShowAll />,
+  name: "with-list-and-show-all",
+};
+
 export const WithShowLess: Story = {
   render: () => (
     <LoadMoreList

src/components/loadMore/LoadMore.stories.tsx

@@ -12,22 +12,60 @@ const Container = styled(StyledPaginationBox)<{ hideCount?: boolean }>`
   min-height: 36px;
 `;
 
-/**
- * LoadMore displays a "Show More" button to load additional items when clicked,
- * optionally with a count of loaded items.
- */
+const ButtonsContainer = styled.div`
+  display: flex;
+  gap: ${theme.spacing.spacing02};
+`;
+
+function extractButtonProps(props?: React.ComponentProps<typeof Button>) {
+  if (!props) {
+    return { disabled: false, rest: {} };
+  }
+
+  const {
+    disabled,
+    children: ignoredChildren,
+    onClick: ignoredOnClick,
+    initialState: ignoredInitialState,
+    ...rest
+  } = props;
+
+  return { disabled: !!disabled, rest };
+}
+
 export function LoadMore({
   currentCount,
   total,
   onLoadMore,
   onLoadLess,
+  onShowAll,
   isLoading = false,
   hideCount = false,
   className,
+  showMoreLabel = "Show more",
+  showAllLabel = "Show all",
+  showLessLabel = "Show less",
+  showMoreButtonProps,
+  showAllButtonProps,
+  showLessButtonProps,
 }: LoadMoreProps) {
   const hasMoreItems = currentCount < total;
   const showLessButton = onLoadLess && currentCount === total && total > 0;
 
+  const { disabled: isMoreDisabled, rest: restShowMoreProps } =
+    extractButtonProps(showMoreButtonProps);
+  const { disabled: isAllDisabled, rest: restShowAllProps } =
+    extractButtonProps(showAllButtonProps);
+  const { disabled: isLessDisabled, rest: restShowLessProps } =
+    extractButtonProps(showLessButtonProps);
+
+  const baseButtonProps = {
+    severity: "medium" as const,
+    size: "sm" as const,
+    style: { margin: 0 },
+    initialState: isLoading ? "loading" : undefined,
+  };
+
   return (
     <Container className={className} small={false} hideCount={hideCount}>
       {!hideCount && (
@@ -39,34 +77,48 @@ export function LoadMore({
         />
       )}
 
-      {hasMoreItems && (
-        <Button
-          severity="medium"
-          size="sm"
-          initialState={isLoading ? "loading" : undefined}
-          aria-label="Show more items"
-          disabled={isLoading}
-          style={{ margin: 0 }}
-          icon="chevronDown"
-          onClick={onLoadMore}
-        >
-          {isLoading ? "Loading..." : "Show more"}
-        </Button>
-      )}
+      {(hasMoreItems || showLessButton) && (
+        <ButtonsContainer>
+          {hasMoreItems && (
+            <Button
+              {...baseButtonProps}
+              status="warning"
+              icon="chevronDown"
+              aria-label="Show more items"
+              disabled={isLoading || isMoreDisabled}
+              onClick={onLoadMore}
+              {...restShowMoreProps}
+            >
+              {showMoreLabel}
+            </Button>
+          )}
+
+          {hasMoreItems && onShowAll && (
+            <Button
+              {...baseButtonProps}
+              icon="chevronDown"
+              aria-label="Show all items"
+              disabled={isLoading || isAllDisabled}
+              onClick={onShowAll}
+              {...restShowAllProps}
+            >
+              {showAllLabel}
+            </Button>
+          )}
 
-      {showLessButton && (
-        <Button
-          severity="medium"
-          size="sm"
-          aria-label="Show less items"
-          initialState={isLoading ? "loading" : undefined}
-          disabled={isLoading}
-          style={{ margin: 0 }}
-          icon="chevronUp"
-          onClick={onLoadLess}
-        >
-          {isLoading ? "Loading..." : "Show less"}
-        </Button>
+          {showLessButton && (
+            <Button
+              {...baseButtonProps}
+              icon="chevronUp"
+              aria-label="Show less items"
+              disabled={isLoading || isLessDisabled}
+              onClick={onLoadLess}
+              {...restShowLessProps}
+            >
+              {showLessLabel}
+            </Button>
+          )}
+        </ButtonsContainer>
       )}
     </Container>
   );

src/components/loadMore/LoadMore.tsx

@@ -38,6 +38,7 @@ export function LoadMoreList({
   totalItems = 15,
   batchSize = 5,
   loadingDelay = 1000,
+  withShowAll = false,
 }: LoadMoreListProps) {
   const [items, setItems] = React.useState<string[]>(initialItems);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -63,6 +64,24 @@ export function LoadMoreList({
     }, loadingDelay);
   };
 
+  const handleShowAll = () => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      const itemsLeft = totalItems - items.length;
+
+      if (itemsLeft > 0) {
+        const allNextItems = Array.from(
+          { length: itemsLeft },
+          (_, index) => `Item ${items.length + index + 1}`
+        );
+        setItems([...items, ...allNextItems]);
+      }
+
+      setIsLoading(false);
+    }, loadingDelay);
+  };
+
   const handleLoadLess = () => {
     setItems(items.slice(0, batchSize));
   };
@@ -80,6 +99,7 @@ export function LoadMoreList({
         total={totalItems}
         isLoading={isLoading}
         onLoadMore={handleLoadMore}
+        onShowAll={withShowAll ? handleShowAll : undefined}
         onLoadLess={items.length > batchSize ? handleLoadLess : undefined}
       />
     </Container>

src/components/loadMore/LoadMoreList.tsx

@@ -1,3 +1,3 @@
 export { LoadMore } from "./LoadMore";
 export { LoadMoreList } from "./LoadMoreList";
-export * from "./types";
+export type * from "./types";