feat: add new prop showToggleOption to SteppedListContainer (#4708)

* feat: dd new prop showToggleOption to SteppedListContainer * chore: update story description Co-authored-by: Matthias Prost <[email protected]> * chore: fix changeset Co-authored-by: BABAK0T0 <[email protected]> --------- Co-authored-by: Matthias Prost <[email protected]> Co-authored-by: BABAK0T0 <[email protected]>
scaleway · Jan 28, 2025 · d44d0dc · d44d0dc
1 parent 2529980
commit d44d0dc
Show file tree

Hide file tree

Showing 6 changed files with 523 additions and 26 deletions.
diff --git a/.changeset/quiet-pants-serve.md b/.changeset/quiet-pants-serve.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+feat: add new prop `showToggleOption` to `SteppedListContainer`
diff --git a/packages/plus/src/components/SteppedListCard/SteppedListContainer.tsx b/packages/plus/src/components/SteppedListCard/SteppedListContainer.tsx
@@ -19,22 +19,6 @@ type SteppedListContainerProps = {
    * Title of the section, introduces the feature.
    */
   header: ReactNode
-  /**
-   * Text of the tooltip on the hide button
-   */
-  hideTooltipText?: string
-  /**
-   * Text of the "hide" button
-   */
-  hideText?: string
-  /**
-   * Text of the "show" button
-   */
-  showText?: string
-  /**
-   * Text of tooltip on the "show" button
-   */
-  showTooltipText?: string
   /**
    * List of steps
    */
@@ -47,13 +31,48 @@ type SteppedListContainerProps = {
    * Function called when the component is closed. This function will overload the default behavior.
    */
   onClickHide?: () => void
-}
+} & (
+  | {
+      /**
+       * Show the toggle option
+       */
+      showToggleOption: false
+      hideTooltipText?: never
+      hideText?: never
+      showText?: never
+      showTooltipText?: never
+    }
+  | {
+      /**
+       * Show the toggle option
+       */
+      showToggleOption?: true
+      /**
+       * Text of the tooltip on the hide button
+       */
+      hideTooltipText?: string
+      /**
+       * Text of the "hide" button
+       */
+      hideText?: string
+      /**
+       * Text of the "show" button
+       */
+      showText?: string
+      /**
+       * Text of tooltip on the "show" button
+       */
+      showTooltipText?: string
+    }
+)
+
 /**
  * SteppedListContainer is a component created for guiding users through steps in a structured and linear manner.
  * It can pass prop "nextStep" to its children.
  */
 const SteppedListContainer = ({
   header,
+  showToggleOption = true,
   hideTooltipText,
   hideText = 'Hide',
   showText = 'Show',
@@ -104,15 +123,17 @@ const SteppedListContainer = ({
           ) : (
             header
           )}
-          <Button
-            onClick={onClickHideButton}
-            variant="ghost"
-            sentiment="neutral"
-            size="small"
-            tooltip={hidden ? showTooltipText : hideTooltipText}
-          >
-            {hidden ? showText : hideText}
-          </Button>
+          {showToggleOption ? (
+            <Button
+              onClick={onClickHideButton}
+              variant="ghost"
+              sentiment="neutral"
+              size="small"
+              tooltip={hidden ? showTooltipText : hideTooltipText}
+            >
+              {hidden ? showText : hideText}
+            </Button>
+          ) : null}
         </Row>
         {hidden ? null : (
           <StyledCard>

diff --git a/packages/plus/src/components/SteppedListCard/__stories__/WithoutToggleButton.stories.tsx b/packages/plus/src/components/SteppedListCard/__stories__/WithoutToggleButton.stories.tsx
@@ -0,0 +1,54 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack, Text } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { SteppedListContainer } from '../SteppedListContainer'
+
+export const WithoutToggleButton: StoryFn<
+  ComponentProps<typeof SteppedListContainer>
+> = props => (
+  <SteppedListContainer {...props}>
+    <SteppedListContainer.Step
+      stepNumber={1}
+      subHeader={
+        <Text as="h3" variant="headingSmallStrong" sentiment="primary">
+          First step
+        </Text>
+      }
+    >
+      <Stack gap={2} direction="column">
+        <Text as="div" variant="body">
+          First step description
+        </Text>
+      </Stack>
+    </SteppedListContainer.Step>
+    <SteppedListContainer.Step
+      stepNumber={2}
+      subHeader={
+        <Text as="h3" variant="headingSmallStrong" sentiment="primary">
+          Second step
+        </Text>
+      }
+    >
+      <Stack gap={2} direction="column">
+        <Text as="div" variant="body">
+          Second step description
+        </Text>
+      </Stack>
+    </SteppedListContainer.Step>
+  </SteppedListContainer>
+)
+
+WithoutToggleButton.args = {
+  header: 'Header',
+  showToggleOption: false,
+  steps: ['Start', 'First step'],
+}
+
+WithoutToggleButton.parameters = {
+  docs: {
+    description: {
+      story:
+        'It is possible to hide the toggle button using `showToggleOption={false}`. The default behavior is being visible.',
+    },
+  },
+}
diff --git a/packages/plus/src/components/SteppedListCard/__stories__/index.stories.tsx b/packages/plus/src/components/SteppedListCard/__stories__/index.stories.tsx
@@ -8,3 +8,4 @@ export default {
 
 export { Playground } from './Playground.stories'
 export { OnClickHide } from './OnClickHide.stories'
+export { WithoutToggleButton } from './WithoutToggleButton.stories'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,3 +8,4 @@ export default {

		export { Playground } from './Playground.stories'
		export { OnClickHide } from './OnClickHide.stories'
		export { WithoutToggleButton } from './WithoutToggleButton.stories'