docs: add Section documentation (#4435)

apps/docs/src/pages/components/_meta.ts

@@ -13,6 +13,7 @@ export default {
   input: "Input",
   loading: "Loading",
   loadingContainer: "LoadingContainer",
+  section: "Section",
   tag: "Tag",
   textarea: "TextArea",
 };

apps/docs/src/pages/components/section.mdx

@@ -0,0 +1,94 @@
+import {
+  HvActionsGeneric,
+  HvSection,
+  sectionClasses,
+} from "@hitachivantara/uikit-react-core";
+
+import { Description } from "@docs/components/component/Description";
+import { Page } from "@docs/components/component/Page";
+
+import Playground from "./Playground";
+
+import { getComponentData } from "../../utils/utils";
+
+export const getStaticProps = async ({ params }) => {
+  const meta = await getComponentData("Section", "core", sectionClasses);
+  return { props: { ssg: { meta: meta } } };
+};
+
+<Description />
+
+<Page>
+
+<Playground
+  Component={HvSection}
+  componentName="HvSection"
+  controls={{
+    title: {
+      type: "text",
+      defaultValue: "Section title - ",
+    },
+    expandable: {
+      defaultValue: false,
+    },
+    raisedHeader: {
+      defaultValue: false,
+    },
+  }}
+  children={
+    <div>
+      <p>My section example content</p>
+    </div>
+  }
+/>
+
+### Actions
+
+You can add actions to the section header by using the `actions` prop which can accept any component.
+
+```jsx live
+<HvSection
+  actions={<HvButton variant="primarySubtle">Explore Insights</HvButton>}
+  title={
+    <HvTypography variant="title4">Unlock the Power of Your Data</HvTypography>
+  }
+>
+  <HvTypography>
+    Discover actionable insights hidden within your data. With our advanced
+    tools and intuitive dashboards, transform raw numbers into meaningful
+    strategies that drive success.
+  </HvTypography>
+</HvSection>
+```
+
+### Controlled
+
+You can control the state of `HvSection` by using the `expanded / onToggle` props.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="grid gap-2 w-full">
+      <HvButton className="w-1/4" onClick={() => setExpanded((p) => !p)}>
+        Expand
+      </HvButton>
+      <HvSection
+        title="Controlled section"
+        expandable
+        expanded={expanded}
+        onToggle={() => setExpanded((p) => !p)}
+      >
+        <HvTypography>
+          This section is controlled by the state of the parent component.
+        </HvTypography>
+      </HvSection>
+    </div>
+  );
+}
+```
+
+</Page>