rough sort button

Author: guoda-puidokaite

packages/ui-components/src/components/SortButton/SortButton.component.tsx

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+import { ToggleButton } from "../ToggleButton/ToggleButton.component"
+import { Icon, KnownIcons } from "../Icon/Icon.component"
+
+interface SortButtonProps {
+  order?: string
+  onOrderChange?: (_order: string) => void
+}
+
+export const SortButton: React.FC<SortButtonProps> = ({ order = "asc", onOrderChange, ...props }) => {
+  const options: { value: string; icon: KnownIcons }[] = [
+    { value: "sortShortWideArrowUp", icon: "sortShortWideArrowUp" },
+    { value: "sortShortWideArrowDown", icon: "sortShortWideArrowDown" },
+  ]
+
+  const handleChange = (value: string) => {
+    if (onOrderChange) {
+      onOrderChange(value)
+    }
+  }
+
+  return (
+    <ToggleButton options={options} onChange={handleChange} renderLabel={(value) => <Icon icon={value} />} {...props} />
+  )
+}

packages/ui-components/src/components/SortButton/SortButton.stories.tsx

@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { SortButton } from "./SortButton.component"
+
+const meta: Meta<typeof SortButton> = {
+  title: "Components/SortButton",
+  component: SortButton,
+  argTypes: {
+    order: {
+      control: {
+        type: "radio",
+        options: ["asc", "desc"],
+      },
+      description: "Initial sort order state, either ascending ('asc') or descending ('desc').",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the sort button is disabled.",
+    },
+    onOrderChange: {
+      action: "orderChanged",
+      description: "Callback triggered when the sort order changes.",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    order: "desc",
+    onOrderChange: (order) => console.log("Sort order changed to:", order),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default SortButton toggling between ascending and descending order.",
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    order: "asc",
+    disabled: true,
+    onOrderChange: (order) => console.log("Attempted to change sort order to:", order),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "SortButton in a disabled state, showing the initial sorting direction.",
+      },
+    },
+  },
+}

packages/ui-components/src/components/ToggleButton/ToggleButton.component.tsx

@@ -4,11 +4,11 @@
  */
 
 import React, { useState, useEffect } from "react"
-import { Button, ButtonProps } from "../Button"
+import { Button } from "../Button"
 
-type Option<T> = T | { value: T; label?: React.ReactNode }
+type Option<T> = T | { value: T; label?: React.ReactNode; icon?: KnownIcons }
 
-interface ToggleButtonProps<T extends string | number> extends Omit<ButtonProps, "onClick" | "onChange" | "value"> {
+export interface ToggleButtonProps<T> {
   options: Option<T>[]
   value?: T
   onChange?: (_value: T) => void
@@ -38,25 +38,18 @@ export const ToggleButton = <T extends string | number>({
     const nextValue = getValue(options[nextIndex])
 
     setCurrentValue(nextValue)
-    if (onChange) onChange(nextValue)
+    if (onChange) {
+      onChange(nextValue)
+    }
   }
 
-  const getLabel = (): string | undefined => {
+  const getLabel = (): React.ReactNode => {
     if (renderLabel) {
-      const renderedLabel = renderLabel(currentValue)
-      if (typeof renderedLabel === "string") {
-        return renderedLabel
-      }
+      return renderLabel(currentValue)
     }
-
     const currentOption = options.find((opt) => getValue(opt) === currentValue)
-
-    if (currentOption && typeof currentOption === "object" && typeof currentOption.label === "string") {
-      return currentOption.label
-    }
-
-    return currentValue?.toString()
+    return typeof currentOption === "object" ? currentOption.label : currentOption
   }
 
-  return <Button {...buttonProps} label={getLabel()} onClick={onButtonClick} variant="primary" />
+  return <Button {...buttonProps} label={getLabel()} onClick={onButtonClick} />
 }