Fix alignment in horizontal-term-line & separate ButtonExpand

Fix alignment in `horizontal-term-line` & separate `ButtonExpand`
- Correct alignment issues for horizontal-term-line
- Remove unused `.horizontal-term-line__list` class
- Extract `button.horizontal-term-line__expand` into separate `ButtonExpand` component for reusability

base.scss

@@ -32,6 +32,7 @@
 @import "./src/stories/Library/Icons/icon-favourite/icon-favourite";
 @import "./src/stories/Library/Buttons/button-favourite/button-favourite";
 @import "./src/stories/Library/Buttons/icon-button/icon-button";
+@import "./src/stories/Library/Buttons/button/button-expand/button-expand";
 @import "./src/stories/Library/warning-status/warning-status";
 @import "./src/stories/Library/availability-label/availability-label";
 @import "./src/stories/Library/avatar/avatar";

src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+export type ButtonExpandProps = {
+  showMore: boolean;
+  setShowMore: (showMore: boolean) => void;
+};
+
+const ButtonExpand: FC<ButtonExpandProps> = ({ showMore, setShowMore }) => {
+  return (
+    <button
+      className="button-expand"
+      type="button"
+      onClick={() => setShowMore(!showMore)}
+      aria-label="Expand More"
+    >
+      <img
+        className={clsx("button-expand__image", {
+          "button-expand__image--expanded": showMore,
+        })}
+        src="icons/collection/ExpandMore.svg"
+        alt=""
+      />
+    </button>
+  );
+};
+
+export default ButtonExpand;

src/stories/Library/Buttons/button/button-expand/button-expand.scss

@@ -0,0 +1,12 @@
+.button-expand {
+  cursor: pointer;
+  align-self: center;
+
+  &__image {
+    transition: transform 0.3s ease-in-out;
+
+    &.button-expand__image--expanded {
+      transform: scaleY(-1);
+    }
+  }
+}

src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx

@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ButtonExpand, { ButtonExpandProps } from "./ButtonExpand";
+
+export default {
+  title: "Library / Buttons / Button Expand",
+  component: ButtonExpand,
+  parameters: {},
+  argTypes: {
+    showMore: {
+      control: {
+        type: "boolean",
+      },
+      title: {
+        control: {
+          type: "text",
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof ButtonExpand>;
+
+const Template: ComponentStory<typeof ButtonExpand> = (
+  args: ButtonExpandProps
+) => <ButtonExpand {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  showMore: false,
+};
+
+export const Expand = Template.bind({});
+Expand.args = {
+  showMore: true,
+};

src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { useState } from "react";
+import ButtonExpand from "../Buttons/button/button-expand/ButtonExpand";
 
 export interface HorizontalTermLineList {
   url: string;
@@ -45,19 +45,7 @@ const HorizontalTermLine: React.FC<HorizontalTermLineProps> = ({
       ))}
 
       {showMoreButton && (
-        <button
-          type="button"
-          onClick={() => setShowMore(!showMore)}
-          aria-label="Expand More"
-        >
-          <img
-            className={clsx("horizontal-term-line__expand", {
-              "horizontal-term-line__expand--expanded": showMore,
-            })}
-            src="icons/collection/ExpandMore.svg"
-            alt=""
-          />
-        </button>
+        <ButtonExpand showMore={showMore} setShowMore={setShowMore} />
       )}
     </div>
   );

src/stories/Library/horizontal-term-line/horizontal-term-line.scss

@@ -1,6 +1,6 @@
 .horizontal-term-line {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   flex-wrap: wrap;
   white-space: nowrap;
   gap: $s-sm;
@@ -9,19 +9,4 @@
   * {
     font-size: 12px;
   }
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $s-sm;
-  }
-
-  &__expand {
-    cursor: pointer;
-    transition: transform 0.3s ease-in-out;
-
-    &--expanded {
-      transform: scaleY(-1);
-    }
-  }
 }