import { useState } from "react";
import {
  HvButton,
  HvSection,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  // only one section allowed to be expanded at a time, so we need to manage the state of the sections
  const [expandedSection, setExpandedSection] = useState<string | null>(
    "section2",
  );

  return (
    <div className="flex flex-col gap-sm w-320px">
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section1"}
        title={<HvTypography variant="title4">My Section</HvTypography>}
        actions={<HvButton variant="primaryGhost">Action</HvButton>}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section1" : null);
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section2"}
        title={<HvTypography variant="title4">My Section</HvTypography>}
        actions={<HvButton variant="primaryGhost">Action</HvButton>}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section2" : null);
        }}
      >
        <HvTypography>
          Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam
          iaculis justo sed urna condimentum ultricies. Integer nec interdum
          tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla
          volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non
          gravida dui pharetra quis.
        </HvTypography>
      </HvSection>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section3"}
        title={<HvTypography variant="title4">My Section</HvTypography>}
        actions={<HvButton variant="primaryGhost">Action</HvButton>}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section3" : null);
        }}
      >
        <HvTypography>
          Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam
          iaculis justo sed urna condimentum ultricies. Integer nec interdum
          tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla
          volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non
          gravida dui pharetra quis.
        </HvTypography>
      </HvSection>
    </div>
  );
}

import { useState } from "react";
import { HvSection, HvTypography } from "@hitachivantara/uikit-react-core";

export default function Demo() {
  // only one section allowed to be expanded at a time, so we need to manage the state of the sections
  const [expandedSection, setExpandedSection] = useState<string | null>(
    "section2",
  );

  return (
    <HvSection classes={{ root: "w-320px", content: "p-0" }}>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section1"}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section1" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: "b-b-1 b-b-border",
          content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section2"}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section2" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: "b-b-1 b-b-border",
          content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section3"}
        onToggle={(event, expanded) => {
          setExpandedSection(expanded ? "section3" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: expandedSection === "section3" ? "b-b-1 b-b-border" : "",
          content: "p-t-xs bg-bgContainerSecondary",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
    </HvSection>
  );
}

import { useState } from "react";
import {
  HvButton,
  HvSection,
  HvStatusIcon,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  // only one section allowed to be expanded at a time, so we need to manage the state of the sections
  const [expandedSection, setExpandedSection] = useState<string | null>(
    "section2",
  );

  return (
    <HvSection
      raisedHeader
      title={
        <>
          <HvStatusIcon
            variant="default"
            customIcon={<div className="i-ph-gear" />}
          />
          <HvTypography variant="title4">My Section</HvTypography>
        </>
      }
      actions={<HvButton variant="primaryGhost">Action</HvButton>}
      classes={{ root: "w-320px", content: "p-0!" }}
    >
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section1"}
        onToggle={(_, expanded) => {
          setExpandedSection(expanded ? "section1" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: "b-b-1 b-b-border",
          content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
      <HvSection
        expandableHeader
        expandable
        expanded={expandedSection === "section2"}
        onToggle={(_, expanded) => {
          setExpandedSection(expanded ? "section2" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: "b-b-1 b-b-border",
          content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
      <HvSection
        expandable
        expandableHeader
        expanded={expandedSection === "section3"}
        onToggle={(_, expanded) => {
          setExpandedSection(expanded ? "section3" : null);
        }}
        title="Section Title"
        classes={{
          root: "border-none rounded-b-none",
          header: expandedSection === "section3" ? "b-b-1 b-b-border" : "",
          content: "p-t-xs bg-bgContainerSecondary",
        }}
      >
        <HvTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
          blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
          nisl, sodales vitae blandit tincidunt, malesuada id sapien.
        </HvTypography>
      </HvSection>
    </HvSection>
  );
}