Mim 1975-new-table-into-ds-2

package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@babel/runtime": "~7.25.6",
-    "@statisticsnorway/ssb-component-library": "~2.2.10",
+    "@statisticsnorway/ssb-component-library": "~2.2.14",
     "bootstrap": "~5.3.3",
     "core-js": "~3.37.1",
     "gh-pages": "~6.1.1",

src/components/Header/Header.jsx

@@ -19,7 +19,7 @@ const Header = () => {
 	const history = useHistory();
 	const location = useLocation();
 	const [menuIsOpen, toggleMenu] = useState(false);
-	const version = 'v2.2.10';
+	const version = 'v2.2.14';
 
 	return (
 		<div className={`header-component-wrapper${location.pathname === '/get-started' || location.pathname === '/' ? ' front-page' : ''}`}>

src/pages/Components/ComponentPropsInfo.jsx

@@ -1,49 +1,58 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title } from '@statisticsnorway/ssb-component-library';
+import { Divider, Title } from '@statisticsnorway/ssb-component-library';
+import { v4 as uuidv4 } from 'uuid';
 
 const ComponentPropsInfo = ({ propsInfo }) => (
-	<div className="component-props">
-		<Title size={2}>Props</Title>
-		<table className="col-lg-12 mb-4">
-			<thead style={{ textAlign: 'left' }}>
-				<tr>
-					<th>
-						<Title size={3}>Prop name</Title>
-					</th>
-					<th>
-						<Title size={3}>Type</Title>
-					</th>
-					<th>
-						<Title size={3}>Description</Title>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				{propsInfo.map(item => (
-					<tr key={item.name}>
-						<td>
-							<code>{item.name}</code>
-						</td>
-						<td>{item.type}</td>
-						<td>{item.description}</td>
-					</tr>
-				))}
-			</tbody>
-		</table>
+	<div>
+		{propsInfo.map(item => (
+			<div className="component-props" key={uuidv4()}>
+				{item.title ? <Title size={2} className="mb-4">Props {item.title}</Title> : <Title size={2} className="mb-4">Props</Title>}
+				<table className="col-lg-12 mb-4">
+					<thead style={{ textAlign: 'left' }}>
+						<tr>
+							<th>
+								<Title size={3}>Prop name</Title>
+							</th>
+							<th>
+								<Title size={3}>Type</Title>
+							</th>
+							<th>
+								<Title size={3}>Description</Title>
+							</th>
+						</tr>
+					</thead>
+					{item.props.map(prop => (
+						<tr key={prop.name}>
+							<td>
+								<code>{prop.name}</code>
+							</td>
+							<td>{prop.type}</td>
+							<td>{prop.description}</td>
+						</tr>
+					))}
+				</table>
+				<Divider light className="mb-4" />
+			</div>
+
+		))}
 	</div>
-);
 
-const propTypeInfo = PropTypes.arrayOf(
-	PropTypes.shape({
-		name: PropTypes.string.isRequired,
-		type: PropTypes.string.isRequired,
-		description: PropTypes.string.isRequired,
-	}),
 );
 
+const propInfo = PropTypes.shape({
+	name: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+});
+
 ComponentPropsInfo.propTypes = {
-	propsInfo: propTypeInfo.isRequired,
+	propsInfo: PropTypes.arrayOf(
+		PropTypes.shape({
+			title: PropTypes.string,
+			props: PropTypes.arrayOf(propInfo),
+		}),
+	),
 };
 
 export default ComponentPropsInfo;

src/pages/Components/ComponentsInfo/ExpansionBox.jsx

@@ -175,34 +175,38 @@ const codeAIHtml = `
 
 const propsInfo = [
 	{
-		name: 'aiIcon',
-		type: 'bool',
-		description: 'Use if AI-generated content',
-	},
-	{
-		name: 'className',
-		type: 'string',
-		description: 'Optional container class',
-	},
-	{
-		name: 'header',
-		type: 'string',
-		description: 'Header text',
-	},
-	{
-		name: 'sneakPeek',
-		type: 'bool',
-		description: 'Show a sneakpeek of the text. Defaults to false',
-	},
-	{
-		name: 'openByDefault',
-		type: 'bool',
-		description: 'Open when rendered. Defaults to false',
-	},
-	{
-		name: 'text',
-		type: 'string or element',
-		description: 'Content in expansionBox',
+		props: [
+			{
+				name: 'aiIcon',
+				type: 'bool',
+				description: 'Use if AI-generated content',
+			},
+			{
+				name: 'className',
+				type: 'string',
+				description: 'Optional container class',
+			},
+			{
+				name: 'header',
+				type: 'string',
+				description: 'Header text',
+			},
+			{
+				name: 'sneakPeek',
+				type: 'bool',
+				description: 'Show a sneakpeek of the text. Defaults to false',
+			},
+			{
+				name: 'openByDefault',
+				type: 'bool',
+				description: 'Open when rendered. Defaults to false',
+			},
+			{
+				name: 'text',
+				type: 'string or element',
+				description: 'Content in expansionBox',
+			},
+		],
 	},
 ];
 
@@ -248,7 +252,9 @@ const ExpansionBoxInfo = () => {
 				</div>
 			)}
 
-			{activeTab === '/props' && <ComponentPropsInfo propsInfo={propsInfo} />}
+			{activeTab === '/props' && (
+				<ComponentPropsInfo propsInfo={propsInfo} />
+			) }
 		</div>
 	);
 };