feat: add AccordionHeading and DetailsSummary entrypoints (#164)

vaadin · Dec 8, 2023 · 82b10ef · 82b10ef
1 parent fdc0d55
commit 82b10ef
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -164,6 +164,10 @@
       "types": "./Accordion.d.ts",
       "default": "./Accordion.js"
     },
+    "./AccordionHeading.js": {
+      "types": "./AccordionHeading.d.ts",
+      "default": "./AccordionHeading.js"
+    },
     "./AccordionPanel.js": {
       "types": "./AccordionPanel.d.ts",
       "default": "./AccordionPanel.js"
@@ -260,6 +264,10 @@
       "types": "./Details.d.ts",
       "default": "./Details.js"
     },
+    "./DetailsSummary.js": {
+      "types": "./DetailsSummary.d.ts",
+      "default": "./DetailsSummary.js"
+    },
     "./Dialog.js": {
       "types": "./Dialog.d.ts",
       "default": "./Dialog.js"
@@ -473,6 +481,7 @@
       "default": "./VirtualList.js"
     },
     "./Accordion": "./Accordion.js",
+    "./AccordionHeading": "./AccordionHeading.js",
     "./AccordionPanel": "./AccordionPanel.js",
     "./AppLayout": "./AppLayout.js",
     "./Avatar": "./Avatar.js",
@@ -497,6 +506,7 @@
     "./DatePickerLight": "./DatePickerLight.js",
     "./DateTimePicker": "./DateTimePicker.js",
     "./Details": "./Details.js",
+    "./DetailsSummary": "./DetailsSummary.js",
     "./Dialog": "./Dialog.js",
     "./DrawerToggle": "./DrawerToggle.js",
     "./EmailField": "./EmailField.js",

diff --git a/src/AccordionHeading.ts b/src/AccordionHeading.ts
@@ -0,0 +1 @@
+export * from './generated/AccordionHeading.js';
diff --git a/src/DetailsSummary.ts b/src/DetailsSummary.ts
@@ -0,0 +1 @@
+export * from './generated/DetailsSummary.js';
diff --git a/test/kitchen-sink/Row1.tsx b/test/kitchen-sink/Row1.tsx
@@ -1,6 +1,7 @@
 import { SideNav } from '../../src/SideNav.js';
 import { SideNavItem } from '../../src/SideNavItem.js';
 import { Accordion } from '../../src/Accordion.js';
+import { AccordionHeading } from '../../src/AccordionHeading.js';
 import { AccordionPanel } from '../../src/AccordionPanel.js';
 import { AvatarGroup } from '../../src/AvatarGroup.js';
 import { BoardRow } from '../../src/BoardRow.js';
@@ -16,10 +17,13 @@ export default function Row1() {
         <SideNavItem>Side Navigation Item 3</SideNavItem>
       </SideNav>
       <Accordion theme="primary">
-        <AccordionPanel>
-          <div slot="summary">AccordeonPanel</div>
+        <AccordionPanel summary="Panel 1">
           <div>Accordion content 1</div>
         </AccordionPanel>
+        <AccordionPanel>
+          <AccordionHeading slot="summary">Panel 2</AccordionHeading>
+          <div>Accordion content 2</div>
+        </AccordionPanel>
       </Accordion>
       <AvatarGroup prefix="Users: " items={[{ name: 'Jane Roe', abbr: 'JD' }]}></AvatarGroup>
       <Chart title="Chart" style={{ height: '300px' }}>

diff --git a/test/kitchen-sink/Row4.tsx b/test/kitchen-sink/Row4.tsx
@@ -3,6 +3,7 @@ import { CustomField } from '../../src/CustomField.js';
 import { DatePicker } from '../../src/DatePicker.js';
 import { DateTimePicker } from '../../src/DateTimePicker.js';
 import { Details } from '../../src/Details.js';
+import { DetailsSummary } from '../../src/DetailsSummary.js';
 import { FormItem } from '../../src/FormItem.js';
 import { FormLayout } from '../../src/FormLayout.js';
 import { IntegerField } from '../../src/IntegerField.js';
@@ -21,7 +22,7 @@ export default function Row4() {
         <PasswordField placeholder="Password"></PasswordField>
       </CustomField>
       <Details opened>
-        <label slot="summary">Details</label>
+        <DetailsSummary slot="summary">Details</DetailsSummary>
         <p>Details content</p>
       </Details>
       <FormLayout>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './generated/AccordionHeading.js';