fix(collapsible-section): header is set as a property

BREAKING CHANGE: New interface for lime-collapsible-section
Lundalogik · Sep 10, 2019 · f60c1a5 · f60c1a5
1 parent 137462f
commit f60c1a5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/collapsible-section/collapsible-section.tsx b/src/components/collapsible-section/collapsible-section.tsx
@@ -14,6 +14,9 @@ export class CollapsibleSection {
     @Prop({ mutable: true, reflectToAttr: true })
     public isOpen: boolean = false;
 
+    @Prop()
+    public header: string;
+
     /**
      * Emitted when the section is expanded
      */
@@ -44,10 +47,12 @@ export class CollapsibleSection {
                             })()}
                         </svg>
                     </span>
-                    <slot name="header" />
+                    <h5 class="mdc-typography mdc-typography--headline5">
+                        {this.header}
+                    </h5>
                 </header>
                 <div class="body">
-                    <slot name="body" />
+                    <slot />
                 </div>
             </section>
         );

diff --git a/src/examples/collapsible-section/collapsible-section.tsx b/src/examples/collapsible-section/collapsible-section.tsx
@@ -15,9 +15,8 @@ export class CollapsibleSectionExample {
         return [
             <section>
                 <h3>Basic example</h3>
-                <limel-collapsible-section>
-                    <h5 slot="header">This element goes in the header-slot</h5>
-                    <p slot="body">This element goes in the body-slot.</p>
+                <limel-collapsible-section header="This text becomes the header">
+                    <p>This element becomes the body.</p>
                 </limel-collapsible-section>
             </section>,
             <hr />,
@@ -31,12 +30,12 @@ export class CollapsibleSectionExample {
                     />
                 </limel-button-group>
                 <limel-collapsible-section
+                    header="Click me or click the button"
                     isOpen={this.secondExampleIsOpen}
                     onOpen={this.secondExampleOnOpen.bind(this)}
                     onClose={this.secondExampleOnClose.bind(this)}
                 >
-                    <h5 slot="header">Click me or click the button</h5>
-                    <p slot="body">
+                    <p>
                         Either way, the section will toggle!
                         <limel-slider unit="%" value={this.percentage} />
                     </p>