@nyaruka/temba-components 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.28.0](https://github.com/nyaruka/temba-components/compare/v0.27.2...v0.28.0)
+
+> 6 July 2022
+
+- Add collapsible tab names [`#178`](https://github.com/nyaruka/temba-components/pull/178)
+- Make contact tickets a list [`#179`](https://github.com/nyaruka/temba-components/pull/179)
+- Update demo index, add slider test placeholder [`023606d`](https://github.com/nyaruka/temba-components/commit/023606d053f35c23919f868e7b53279f5af56b96)
+- Update README.md [`66285a3`](https://github.com/nyaruka/temba-components/commit/66285a3f0cf2620add4261acf3a8e85480f24647)
+
+#### [v0.27.2](https://github.com/nyaruka/temba-components/compare/v0.27.1...v0.27.2)
+
+> 2 July 2022
+
+- Update contact search to work with start preview [`#177`](https://github.com/nyaruka/temba-components/pull/177)
+- temba-slider component [`#176`](https://github.com/nyaruka/temba-components/pull/176)
+- Add slider [`1db8884`](https://github.com/nyaruka/temba-components/commit/1db8884cbbe5fb0362a9f757b3570bb82c7926b6)
+- Add slider to modules [`031116e`](https://github.com/nyaruka/temba-components/commit/031116edf4310c1a8629a8079c18144246fd4a1f)
+
+#### [v0.27.1](https://github.com/nyaruka/temba-components/compare/v0.27.0...v0.27.1)
+
+> 21 June 2022
+
+- Add ContactTickets component [`#174`](https://github.com/nyaruka/temba-components/pull/174)
+
 #### [v0.27.0](https://github.com/nyaruka/temba-components/compare/v0.26.11...v0.27.0)
 
 > 17 June 2022

package/README.md

@@ -33,7 +33,8 @@ To view the interactive demo, use start.
 ## Testing
 
 All tests live under [/test](test). When running tests, some tests capture screenshots for pixel
-comparision under [/screenshots](screenshots/truth).
+comparision under [/screenshots](screenshots/truth). Running tests requires that you have Chromium
+installed.
 
 ```bash
 % yarn test

package/demo/index.html

@@ -26,7 +26,6 @@
         padding: 10px;
         max-width: 500px;
         --temba-select-selected-font-size: 1em;
-        display:none;
       }
 
       temba-dropdown.open {
@@ -43,6 +42,13 @@
         background: rgba(0,0,0,.3);
       }
 
+      body {
+        background: #f3f3f3;
+      }
+      temba-tabs {
+        margin: 2em;
+      }
+
       temba-tabs *, temba-tab * {
         opacity: 0;
       }
@@ -51,6 +57,42 @@
         opacity: 1;
       }
 
+      temba-tab {
+        padding: 1em;
+      }
+
+      .dropdown {
+        padding: 2em;
+      }
+
+      .dropdown .title {
+        font-weight: 400;
+        margin-bottom: 0.5em;
+      }
+
+      .dropdown .item {
+        padding: 0.5em;
+      }
+
+      .header {
+        margin-bottom:1em;
+        font-size: 2em;
+        font-weight: 400;
+        color: #777;
+        display: inline;
+      }
+
+      temba-dropdown {
+        position: relative;
+        display:inline-block;
+        margin:0em 0.5em;
+      }
+
+      temba-slider{ 
+        margin-top: 1em;
+      }
+
+
     </style>
     <script type="module">
       import '../out-tsc/temba-modules.js';
@@ -83,141 +125,148 @@
       groups="/static/api/groups.json"
     ></temba-store>
 
-    <temba-tabs>
+    <temba-dropdown>
+      <div style="display:inline-block; margin-bottom:1em;" slot="toggle">
+        <temba-icon name="menu" size="1.3" clickable></temba-icon>
+      </div>        
+      <div slot="dropdown" class="dropdown" style="width:250px; padding:0.5em 1em;">
+        <div class="item">
+          <div class="title">Check this out!</div>
+          <div class="details">temba-menu lets you do little popup menus like this.</div>
+        </div>
+      </div>
+    </temba-dropdown>
 
-      <temba-tab name="Chats" icon="message-square">
-        <div onclick="storeTest();">Click me!</div>
-      </temba-tab>
+    <div class="header">temba-components</div>
 
-      <temba-tab name="Details" icon="list">
-        Details content
-      </temba-tab>
+    <temba-tabs>
+      <temba-tab name="temba-slider" icon="sliders">
 
-      <temba-tab name="Log" icon="log">
-       Log content
-      </temba-tab>
 
-    </temba-tabs>
+        <div class="example">
+          With Range
+          <temba-slider value="50" min="0" max="100" range></temba-slider>
+        </div>
 
+        <div class="example">
+          Without Range
+          <temba-slider value="50" min="0" max="100"></temba-slider>
+        </div>
 
+      </temba-tab>
+      <temba-tab name="temba-select" icon="chevron-down">
+
+        <div class="example">
+          <temba-select
+            placeholder="Select a color"
+            info_text="Some colors are very dangerous, choose wisely"
+            onchange="handleColorChange(event)"
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <temba-select placeholder="Select a color" clearable>
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <temba-select
+            placeholder="Select a color"
+            expressions="message"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
     
-    <div class="example" style="margin: 10px; background: #ccc; border-radius:6px;">
-      <temba-dropdown>
-        <div style="display:inline-block" slot="toggle">
-          <temba-icon name="chevron-down" size="1.3" clickable></temba-icon>
+        <div class="example">
+          <temba-select
+            name="Color"
+            label="Color"
+            help_text="I'm not really enabled at the moment"
+            placeholder="Select a color"
+            expressions="message"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+            disabled
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <script>
+            function toggleSelect(evt) {
+              document.getElementById('select-toggle').disabled = !evt.currentTarget
+                .checked;
+            }
+          </script>
+          <div style="display: flex; align-items: center">
+            <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
+            <temba-select
+              style="margin-left: 10px"
+              id="select-toggle"
+              placeholder="Select a color"
+              expressions="message"
+            >
+              <temba-option name="Red" value="0"></temba-option>
+              <temba-option name="Green" value="1"></temba-option>
+              <temba-option name="Blue" value="2"></temba-option>
+            </temba-select>
+          </div>
         </div>
         
-        <div slot="dropdown" style="width:250px; padding:0.5em 1em">
-          <a href="http://google.com">Google</a>
+      </temba-tab>
+
+      <temba-tab name="temba-textinput" icon="edit">
+    
+        <div class="example">
+          <temba-textinput value="plain text"></temba-textinput>
         </div>
-      </temba-dropdown>
-    </div>
-    <div class="example">
-      <temba-omnibox
-        placeholder="Contacts or Groups"
-        label="Recipients"
-        help_text="This is the helpful friendly book"
-        endpoint="/contact/omnibox/?v=2"
-        groups
-        contacts
-      ></temba-omnibox>
-    </div>
-    <div class="example">
-      <temba-checkbox label="you betcha" checked></temba-checkbox>
-    </div>
-
-    <div class="example">
-      <temba-textinput value="plain text"></temba-textinput>
-    </div>
-
-    <div class="example">
-      <temba-completion value="you complete me @cont"></temba-completion>
-    </div>
-
-    <div class="example">
-      <temba-select
-        placeholder="Select a color"
-        info_text="Some colors are very dangerous, choose wisely"
-        onchange="handleColorChange(event)"
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select placeholder="Select a color" clearable>
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select
-        placeholder="Select a color"
-        expressions="message"
-        values='[{"name":"Red","value":"0"}]'
-        searchable
-        multi
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select
-        name="Color"
-        label="Color"
-        help_text="I'm not really enabled at the moment"
-        placeholder="Select a color"
-        expressions="message"
-        values='[{"name":"Red","value":"0"}]'
-        searchable
-        multi
-        disabled
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <script>
-        function toggleSelect(evt) {
-          document.getElementById('select-toggle').disabled = !evt.currentTarget
-            .checked;
-        }
-      </script>
-      <div style="display: flex; align-items: center">
-        <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
-        <temba-select
-          style="margin-left: 10px"
-          id="select-toggle"
-          placeholder="Select a color"
-          expressions="message"
-        >
-          <temba-option name="Red" value="0"></temba-option>
-          <temba-option name="Green" value="1"></temba-option>
-          <temba-option name="Blue" value="2"></temba-option>
-        </temba-select>
-      </div>
-    </div>
-
-    <div class="example">
-      <temba-textinput
-        name="start"
-        label="Start Time"
-        help_text="This is something you should think long and hard about"
-        placeholder="Put something down, for real"
-        value="2020-11-28 15:03"
-        clearable
-        datetimepicker
-      ></temba-textinput>
-    </div>
+    
+        <div class="example">
+          <temba-completion value="you complete me @cont"></temba-completion>
+        </div>
+    
+        <div class="example">
+          <temba-textinput
+            name="start"
+            label="Start Time"
+            help_text="This is something you should think long and hard about"
+            placeholder="Put something down, for real"
+            value="2020-11-28 15:03"
+            clearable
+            datetimepicker
+          ></temba-textinput>
+        </div>
+
+        <div class="example">
+          <temba-completion counter="temba-charcount" value="This is a GSM charcounter in a textarea" gsm textarea></temba-completion>
+          <temba-charcount text='count this text'></temba-charcount>
+        </div>
+      </temba-tab>
+
+      <temba-tab name="other" icon="list">
+        <div class="example">
+          <temba-checkbox label="Check this out" checked></temba-checkbox>
+        </div>
+
+      </temba-tab>
+
+    </temba-tabs>
   </body>
 </html>