feat: update blue-web to version 1.25.1, add FieldGroup component and usage examples

Author: lgk-bsw

package-lock.json

@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.23.0",
+        "blue-web": "^1.25.1",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },

package.json

@@ -0,0 +1,66 @@
+import clsx from "clsx"
+import { ComponentProps, ReactNode } from "react"
+
+export type FieldGroupProps = ComponentProps<"details"> & {
+    header?: ReactNode
+    isExpanded?: boolean
+    headerClassName?: string
+    id?: string
+    heading?: number
+    pageHeader?: boolean
+}
+
+export default function FieldGroup({
+    className,
+    children,
+    open,
+    header,
+    isExpanded = true,
+    headerClassName,
+    id,
+    heading,
+    pageHeader,
+    ...rest
+}: FieldGroupProps) {
+    return (
+        <details
+            className={clsx("blue-field-group", className)}
+            open={isExpanded}
+            {...rest}
+        >
+            <summary
+                role="heading"
+                aria-level={heading}
+                className={clsx(headerClassName, {
+                    "blue-page-header w-100 mt-0": pageHeader,
+                    h1: heading === 1,
+                    h2: heading === 2,
+                    h3: heading === 3,
+                    h4: heading === 4,
+                    h5: heading === 5,
+                    h6: heading === 6
+                })}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="1em"
+                    height="1em"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    className="blue-field-group-chevron bi bi-chevron-right fs-6 opacity-50"
+                    viewBox="0 0 16 16"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
+                    />
+                </svg>
+                {header}
+                {id !== undefined && id !== null && id !== "" && (
+                    <small className="text-secondary ms-1">{id}</small>
+                )}
+            </summary>
+            {children}
+        </details>
+    )
+}

src/components/FieldGroup.tsx

@@ -17,7 +17,8 @@ import {
     App as AppIcon,
     Search,
     Window,
-    PlayBtn
+    PlayBtn,
+    CardHeading
 } from "react-bootstrap-icons"
 
 import { ComponentPage } from "./pages/ComponentPage"
@@ -235,6 +236,9 @@ function App() {
                                                     case "Button":
                                                         icon = <PlayBtn />
                                                         break
+                                                    case "FieldGroup":
+                                                        icon = <CardHeading />
+                                                        break
                                                     default:
                                                         icon = <FileCode />
                                                 }
@@ -250,8 +254,7 @@ function App() {
                                                         buttonContent={
                                                             comp.displayName &&
                                                             ([
-                                                                "Actions",
-                                                                "MenuItem"
+                                                                "FieldGroup"
                                                             ].includes(
                                                                 comp.displayName
                                                             ) ? (

src/docs/App.tsx

@@ -0,0 +1,7 @@
+import FieldGroup from "../../../components/FieldGroup"
+
+export default function FieldGroupBasicUsage() {
+    return (
+        <FieldGroup header="Field group 1">Content of field group 1</FieldGroup>
+    )
+}

src/docs/examples/FieldGroup/Basic usage.tsx

@@ -0,0 +1,9 @@
+import FieldGroup from "../../../components/FieldGroup"
+
+export default function FieldGroupHeadings() {
+    return (
+        <FieldGroup header="Field group 1" pageHeader heading={2}>
+            Content of field group 1
+        </FieldGroup>
+    )
+}