From da1369ae06335453d67597839e884832cf84bed8 Mon Sep 17 00:00:00 2001
From: Jarek Rencz <jaroslaw@rencz.pl>
Date: Wed, 22 Feb 2023 22:56:42 +0100
Subject: [PATCH] Add button to change own height of StoryHeightRepro

---
 README.md               |  2 ++
 src/StoryHeightRepro.ts | 24 +++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2017ff7..c6aa4a2 100644
--- a/README.md
+++ b/README.md
@@ -54,3 +54,5 @@ attempts to fix.
        ```
        
        - Observe problem is gone: all lines are shown
+       - You may play with both Zoom in/Zoom out controls of Story,
+         and with component's own button to change size to confirm
diff --git a/src/StoryHeightRepro.ts b/src/StoryHeightRepro.ts
index 73676c7..e0b9d7e 100644
--- a/src/StoryHeightRepro.ts
+++ b/src/StoryHeightRepro.ts
@@ -1,8 +1,17 @@
-import { html, css, LitElement } from 'lit';
+import {html, LitElement, nothing} from 'lit';
+import {state} from 'lit/decorators.js';
 
 export class StoryHeightRepro extends LitElement {
+  @state()
+  count = 1;
+
   render() {
     return html`
+      <button @click="${() => {
+        this.count = 1 + (this.count % 2);
+      }}">
+        alter number of elements
+      </button>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus
         purus, bibendum nec iaculis non, hendrerit sit amet nibh. Curabitur
         finibus vitae nisi at fermentum. Donec vehicula dui eu eros ornare
@@ -14,6 +23,19 @@ export class StoryHeightRepro extends LitElement {
         faucibus pulvinar et sed nunc. Aenean non justo eleifend, condimentum
         nibh ut, bibendum odio. Sed feugiat enim vitae neque venenatis, sed
         commodo enim ullamcorper.</p>
+      ${this.count > 1
+        ? html`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+          risus purus, bibendum nec iaculis non, hendrerit sit amet nibh.
+          Curabitur finibus vitae nisi at fermentum. Donec vehicula dui eu eros
+          ornare dictum. Etiam gravida et mauris ac tempor. Phasellus finibus
+          mollis libero. Fusce molestie nisl quis leo porta, a scelerisque dui
+          iaculis. Duis dictum odio a magna commodo accumsan. In hac habitasse
+          platea dictumst. Proin volutpat nec ipsum sit amet blandit. Sed purus
+          tellus, viverra sed sollicitudin ut, pretium non mauris. Aenean et
+          nunc id augue faucibus pulvinar et sed nunc. Aenean non justo
+          eleifend, condimentum nibh ut, bibendum odio. Sed feugiat enim vitae
+          neque venenatis, sed commodo enim ullamcorper.</p>`
+        : nothing}
     `;
   }
 }