npm - @nyaruka/temba-components - Versions diffs - 0.123.0 → 0.124.1 - Mend

@nyaruka/temba-components 0.123.0 → 0.124.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/.github/copilot-instructions.md +22 -4
package/CHANGELOG.md +21 -0
package/TEST_OPTIMIZATION.md +158 -0
package/demo/alert/example.html +65 -0
package/demo/button/example.html +71 -0
package/demo/chart/example.html +56 -0
package/demo/checkbox/example.html +72 -0
package/demo/compose/example.html +72 -0
package/demo/data/images/gus.png +0 -0
package/demo/data/images/purrington.jpg +0 -0
package/demo/data/server/opened-tickets.json +40 -0
package/demo/data/server/response-time.json +27 -0
package/demo/datepicker/example.html +69 -0
package/demo/dialog/example.html +107 -0
package/demo/dropdown/example.html +99 -0
package/demo/index.html +152 -430
package/demo/misc/example.html +72 -0
package/demo/progress/example.html +59 -0
package/demo/select/drag-and-drop.html +142 -0
package/demo/select/example.html +82 -0
package/demo/select/multi.html +73 -0
package/demo/slider/example.html +59 -0
package/demo/sortable-list/example.html +99 -0
package/demo/styles.css +183 -0
package/demo/tabs/example.html +91 -0
package/demo/textinput/completion.html +56 -0
package/demo/textinput/example.html +61 -0
package/dist/temba-components.js +323 -191
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/chart/TembaChart.js +19 -16
package/out-tsc/src/chart/TembaChart.js.map +1 -1
package/out-tsc/src/fields/FieldManager.js +27 -34
package/out-tsc/src/fields/FieldManager.js.map +1 -1
package/out-tsc/src/flow/Editor.js +1 -1
package/out-tsc/src/flow/Editor.js.map +1 -1
package/out-tsc/src/list/SortableList.js +257 -60
package/out-tsc/src/list/SortableList.js.map +1 -1
package/out-tsc/src/omnibox/Omnibox.js +1 -1
package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
package/out-tsc/src/select/Select.js +198 -38
package/out-tsc/src/select/Select.js.map +1 -1
package/out-tsc/src/thumbnail/Thumbnail.js +1 -1
package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
package/out-tsc/src/webchat/WebChat.js +5 -2
package/out-tsc/src/webchat/WebChat.js.map +1 -1
package/out-tsc/test/temba-chart.test.js +1 -1
package/out-tsc/test/temba-chart.test.js.map +1 -1
package/out-tsc/test/temba-compose.test.js +6 -30
package/out-tsc/test/temba-compose.test.js.map +1 -1
package/out-tsc/test/temba-contact-chat.test.js +1 -2
package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
package/out-tsc/test/temba-dropdown.test.js +1 -1
package/out-tsc/test/temba-dropdown.test.js.map +1 -1
package/out-tsc/test/temba-flow-editor-node.test.js +273 -0
package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -0
package/out-tsc/test/temba-flow-editor.test.js +244 -0
package/out-tsc/test/temba-flow-editor.test.js.map +1 -0
package/out-tsc/test/temba-flow-plumber.test.js +145 -0
package/out-tsc/test/temba-flow-plumber.test.js.map +1 -0
package/out-tsc/test/temba-flow-render.test.js +171 -0
package/out-tsc/test/temba-flow-render.test.js.map +1 -0
package/out-tsc/test/temba-omnibox.test.js +6 -3
package/out-tsc/test/temba-omnibox.test.js.map +1 -1
package/out-tsc/test/temba-select.test.js +183 -53
package/out-tsc/test/temba-select.test.js.map +1 -1
package/out-tsc/test/temba-sortable-list.test.js +91 -15
package/out-tsc/test/temba-sortable-list.test.js.map +1 -1
package/out-tsc/test/temba-toast.test.js +1 -2
package/out-tsc/test/temba-toast.test.js.map +1 -1
package/out-tsc/test/temba-utils-index.test.js +2 -2
package/out-tsc/test/temba-utils-index.test.js.map +1 -1
package/out-tsc/test/temba-webchat-lightbox-fix.test.js +42 -0
package/out-tsc/test/temba-webchat-lightbox-fix.test.js.map +1 -0
package/out-tsc/test/utils.test.js +58 -0
package/out-tsc/test/utils.test.js.map +1 -1
package/package.json +2 -3
package/screenshots/truth/flow/editor-basic.png +0 -0
package/screenshots/truth/list/fields-dragging.png +0 -0
package/screenshots/truth/list/sortable-dragging.png +0 -0
package/screenshots/truth/list/sortable-dropped.png +0 -0
package/screenshots/truth/list/sortable.png +0 -0
package/screenshots/truth/omnibox/selected.png +0 -0
package/screenshots/truth/select/disabled-multi-selection.png +0 -0
package/screenshots/truth/select/disabled-selection.png +0 -0
package/screenshots/truth/select/disabled.png +0 -0
package/screenshots/truth/select/embedded.png +0 -0
package/screenshots/truth/select/empty-options.png +0 -0
package/screenshots/truth/select/expression-selected.png +0 -0
package/screenshots/truth/select/expressions.png +0 -0
package/screenshots/truth/select/functions.png +0 -0
package/screenshots/truth/select/local-options.png +0 -0
package/screenshots/truth/select/multi-reorder-final.png +0 -0
package/screenshots/truth/select/multi-reorder-initial.png +0 -0
package/screenshots/truth/select/multi-with-endpoint.png +0 -0
package/screenshots/truth/select/multiple-initial-values.png +0 -0
package/screenshots/truth/select/remote-options.png +0 -0
package/screenshots/truth/select/search-enabled.png +0 -0
package/screenshots/truth/select/search-multi-no-matches.png +0 -0
package/screenshots/truth/select/search-selected-focus.png +0 -0
package/screenshots/truth/select/search-selected.png +0 -0
package/screenshots/truth/select/search-with-selected.png +0 -0
package/screenshots/truth/select/searching.png +0 -0
package/screenshots/truth/select/selected-multi-maxitems-reached.png +0 -0
package/screenshots/truth/select/selected-multi.png +0 -0
package/screenshots/truth/select/selected-single.png +0 -0
package/screenshots/truth/select/selection-clearable.png +0 -0
package/screenshots/truth/select/static-initial-value.png +0 -0
package/screenshots/truth/select/static-initial-via-selected.png +0 -0
package/screenshots/truth/select/truncated-selection.png +0 -0
package/screenshots/truth/select/with-placeholder.png +0 -0
package/screenshots/truth/select/without-placeholder.png +0 -0
package/screenshots/truth/templates/default.png +0 -0
package/screenshots/truth/templates/unapproved.png +0 -0
package/screenshots/truth/webchat/connected-state.png +0 -0
package/src/chart/TembaChart.ts +20 -16
package/src/fields/FieldManager.ts +30 -38
package/src/flow/Editor.ts +1 -1
package/src/list/SortableList.ts +291 -67
package/src/omnibox/Omnibox.ts +1 -1
package/src/select/Select.ts +213 -42
package/src/thumbnail/Thumbnail.ts +1 -1
package/src/webchat/WebChat.ts +5 -2
package/test/temba-chart.test.ts +1 -1
package/test/temba-compose.test.ts +11 -38
package/test/temba-contact-chat.test.ts +4 -6
package/test/temba-dropdown.test.ts +1 -1
package/test/temba-flow-editor-node.test.ts +344 -0
package/test/temba-flow-editor.test.ts +301 -0
package/test/temba-flow-plumber.test.ts +189 -0
package/test/temba-flow-render.test.ts +220 -0
package/test/temba-omnibox.test.ts +7 -3
package/test/temba-select.test.ts +247 -79
package/test/temba-sortable-list.test.ts +108 -15
package/test/temba-toast.test.ts +2 -2
package/test/temba-utils-index.test.ts +2 -2
package/test/temba-webchat-lightbox-fix.test.ts +57 -0
package/test/utils.test.ts +88 -0
package/web-test-runner.config.mjs +4 -2
package/.storybook/main.js +0 -14
package/.storybook/preview-head.html +0 -1
package/.storybook/preview.js +0 -17
package/demo/agents.html +0 -147
package/demo/old.html +0 -573
package/demo/remote.html +0 -3
package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
package/stories/temba-checkbox.stories.md +0 -37

package/demo/old.html DELETED Viewed

@@ -1,573 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.3.0/bundles/webcomponents-sd-ce.js"></script>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
-    <link
-      href="/sitestatic/css/temba-components.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="/sitestatic/css/tailwind.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <script language="javascript">
-      function handleContactChange(event) {
-        const ticket = event.target.value;
-        const chat = document.querySelector("temba-contact-chat");
-        chat.ticket = ticket;
-      }
-      function handleContactHistoryUpdate(event) {
-        // tell our list to refresh since we know things happened
-        const tickets = document.querySelector("temba-tickets");
-        tickets.refresh();
-      }
-      function handleTicketsRefreshed(event) {
-        // tell our chat to refresh since we know things are new in our list
-        const chat = document.querySelector("temba-contact-chat");
-        chat.refresh();
-      }
-      function handleFilterChanged(event) {
-        const tickets = document.querySelector("temba-tickets");
-        const chat = document.querySelector("temba-contact-chat");
-        // if we have auto selecting, don't clear the chat
-        if (!tickets.nextSelection) {
-          chat.ticket = null;
-        }
-        const filter = event.target.values[0].value;
-        if (filter === "O") {
-          tickets.endpoint = "/contact/tickets/?_format=json&folder=open"
-        } else {
-          tickets.endpoint = "/contact/tickets/?_format=json&folder=closed"
-        }
-      }
-      function handleTicketChanged(event) {
-        const ticket = event.detail.ticket;
-        const focus = event.detail.focus;
-        const filter = document.querySelector('temba-select[name="ticket-filter"]');
-        const tickets = document.querySelector("temba-tickets");
-        if (focus) {
-          tickets.setNextSelection(ticket.uuid);
-          filter.setSelection(ticket.status);
-        } else {
-          // no focus, just refresh
-          tickets.refresh();
-        }
-      }
-    </script>
-</head>
-  <body>
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
-      rel="stylesheet"
-    />
-    <style>
-      temba-select[name='ticket-filter'] {
-        margin-bottom: 0.5em;
-        margin-top: -0.4em;
-      }
-      .example {
-        padding: 20px;
-        border: 1px solid #e6e6e6;
-        margin: 10px;
-        border-radius: 3px;
-      }
-      .example-header {
-        padding-bottom: 10px;
-        font-size: 12px;
-      }
-      html {
-        --color-text-dark: #555;
-      }
-      .ticket-list {
-        flex-basis: 300px;
-        flex-grow: 0;
-        flex-shrink: 0;
-        transition: all 200ms ease-in;
-      }
-      @media only screen and (max-width: 1024px) {
-        .ticket-list {
-          flex-basis: 200px;
-        }
-      }
-      @media only screen and (max-width: 768px) {
-        .ticket-list {
-          flex-basis: 125px;
-        }
-      }
-    </style>
-    <temba-store
-      completions="/mr/docs/en-us/completion.json"
-      functions="/mr/docs/en-us/functions.json"
-      fields="/api/v2/fields.json"
-      globals="/api/v2/globals.json"
-      groups="/api/v2/groups.json"
-    ></temba-store>
-    <div class="flex-col">
-      <div class="flex" style="height:100vh">
-        <div class="ticket-list m-4 mr-2 flex flex-col">
-            <temba-select name="ticket-filter" onchange="handleFilterChanged(event)">
-              <temba-option name="Open" value="O" icon="inbox"></temba-option>
-              <temba-option name="Closed" value="C" icon="check"></temba-option>
-            </temba-select>
-          <div class="flex flex-grow">
-            <temba-tickets endpoint="/contact/tickets/?_format=json&folder=open" @temba-refreshed="handleTicketsRefreshed(event)" onchange="handleContactChange(event)"></temba-tickets>
-          </div>
-        </div>
-        <div class="flex-grow flex-col h-full py-4 pb-4 pr-4">
-          <temba-contact-chat @temba-refreshed="handleContactHistoryUpdate(event)" @temba-content-changed="handleTicketChanged(event)"></temba-contact-chat>
-        </div>
-      </div>
-    </div>
-    <!--
-    <div class="flex-col">
-      <div class="flex" style="height:100vh">
-        <div style="min-width:250px; max-width:450px" class="m-4 mr-2">
-          <temba-ticket-list endpoint="/api/v2/contacts.json" onchange="handleContactChange(event)"></temba-ticket-list>
-        </div>
-        <div class="flex-grow flex-col h-full py-4 pb-4 pr-4">
-          <temba-contact-chat></temba-contact-chat>
-        </div>
-      </div>
-    </div>
-    <div class="example">
-      <temba-completion counter="temba-charcount" value="Some sample text goes here. Let’s go!" gsm textarea></temba-completion>
-      <temba-charcount text='count this text'></temba-charcount>
-    </div>
-    <div class="example">
-      <temba-textinput value="Some sample text goes here. Let’s go!" gsm></temba-textinput>
-    </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-textinput
-        name="start"
-        label="Start Time"
-        help_text="This is something you should think long and hard about"
-        placeholder="Put something down, for real"
-        clearable
-        datetimepicker
-      ></temba-textinput>
-    </div>
-    <div class="example">
-      <temba-checkbox
-        name="schedule"
-        label="Schedule for later delivery"
-        help_text="This is something you should think long and hard about"
-      ></temba-checkbox>
-      <temba-checkbox
-        name="disabled"
-        label="You can't check this one"
-        help_text="It is disabled, don't click it"
-        disabled
-      ></temba-checkbox>
-    </div>
-    <div class="example">
-      <temba-modax
-        header="Save as Group"
-        endpoint='/contactgroup/create/?search=group = "Drivers"'
-        id="create-dynamic"
-      >
-        <div class="button-primary inline-block">Save as Group</div>
-      </temba-modax>
-    </div>
-    <div class="example">
-      <temba-modax
-        header="Edit Contact"
-        endpoint="/contact/update/10001/"
-        id="edit-contact"
-      >
-        <div class="button-primary inline-block">Edit Contact</div>
-      </temba-modax>
-    </div>
-    <div class="example">
-      <temba-modax
-        header="Edit Label"
-        endpoint="/label/update/102/"
-        id="update-label"
-      >
-        <div class="button-primary inline-block">Edit Label</div>
-      </temba-modax>
-    </div>
-    <div class="example">
-      <temba-modax
-        id="edit-group"
-        header="Edit Group"
-        endpoint="/contactgroup/update/139/"
-      >
-        <div class="button-primary inline-block">Edit Group</div>
-      </temba-modax>
-    </div>
-    <div class="example">
-      <temba-modax
-        id="send-message"
-        header="Send Message"
-        endpoint="/broadcast/send/"
-      >
-        <div class="button-primary inline-block">Send Message</div>
-      </temba-modax>
-    </div>
-    <div class="example">
-      <div class="example-header">Contact Search</div>
-      <temba-contact-search
-        name="contact_query"
-        endpoint="/contact/search/?samples=5&search="
-        placeholder="Enter a query"
-        matches-text="Found ${count} for ${query}"
-      >
-      </temba-contact-search>
-    </div>
-    <div class="example">
-      <div class="example-header">Text Inputs</div>
-      <temba-textinput></temba-textinput>
-      <br />
-      <temba-textinput textarea></temba-textinput>
-    </div>
-    <div class="example">
-      <div class="example-header">Side by Side</div>
-      <div style="display: flex; align-items: center">
-        <temba-select name="start-type" placeholder="Pick some colors" multi>
-          <temba-option value="red" name="Red"></temba-option>
-          <temba-option value="gree" name="Green" selected></temba-option>
-          <temba-option value="blue" name="Blue" selected></temba-option>
-        </temba-select>
-        <temba-select name="start-type" placeholder="Choose how to start">
-          <temba-option
-            value="0"
-            name="Choose recipients manually"
-          ></temba-option>
-          <temba-option
-            value="1"
-            name="Search for contacts to start"
-          ></temba-option>
-        </temba-select>
-        <temba-select
-          name="start-type"
-          placeholder="Search how to start but make sure you can read this entire message"
-          searchable
-        >
-          <temba-option
-            value="0"
-            name="Choose recipients manually"
-          ></temba-option>
-          <temba-option
-            value="1"
-            name="Search for contacts to start"
-          ></temba-option>
-        </temba-select>
-        <temba-textinput></temba-textinput>
-        <temba-textinput placeholder="Hello placeholder"></temba-textinput>
-      </div>
-    </div>
-    <div class="example">
-      <div class="example-header">Single</div>
-      <temba-select name="start-type" placeholder="Choose how to start">
-        <temba-option
-          value="0"
-          name="Choose recipients manually"
-        ></temba-option>
-        <temba-option
-          value="1"
-          name="Search for contacts to start"
-        ></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Single Initialized</div>
-      <temba-select name="start-type" placeholder="Choose how to start">
-        <temba-option
-          value="0"
-          name="Choose recipients manually"
-        ></temba-option>
-        <temba-option
-          value="1"
-          name="Search for contacts to start"
-          selected
-        ></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Single Searchable</div>
-      <temba-select
-        name="start-type"
-        placeholder="Search how to start but make sure you can read this entire message"
-        searchable
-      >
-        <temba-option
-          value="0"
-          name="Choose recipients manually"
-        ></temba-option>
-        <temba-option
-          value="1"
-          name="Search for contacts to start"
-        ></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Single Remote</div>
-      <temba-select
-        endpoint="/contact/omnibox/?v=2"
-        queryParam="search"
-        placeholder="Contacts"
-        searchable
-      >
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Single Remote Search Unfiltered</div>
-      <temba-select
-        endpoint="/api/v2/channels.json"
-        placeholder="Channels"
-        valueKey="uuid"
-        searchable
-      >
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Clearable</div>
-      <temba-select name="start-type" placeholder="Select a color" clearable>
-        <temba-option value="red" name="Red"></temba-option>
-        <temba-option value="gree" name="Green"></temba-option>
-        <temba-option value="blue" name="Blue"></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Multi</div>
-      <temba-select name="start-type" placeholder="Pick some colors" multi>
-        <temba-option value="red" name="Red"></temba-option>
-        <temba-option value="gree" name="Green"></temba-option>
-        <temba-option value="blue" name="Blue"></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Multi Initialized</div>
-      <temba-select label="Multi Initialized" name="start-type" placeholder="Pick some colors" multi>
-        <temba-option value="red" name="Red"></temba-option>
-        <temba-option value="gree" name="Green" selected></temba-option>
-        <temba-option value="blue" name="Blue" selected></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Multi Searchable</div>
-      <temba-select
-        name="start-type"
-        placeholder="Pick some colors"
-        multi
-        searchable
-      >
-        <temba-option value="red" name="Red"></temba-option>
-        <temba-option value="green" name="Green"></temba-option>
-        <temba-option value="blue" name="Blue"></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Tags with expressions</div>
-      <temba-select
-        name="tagged"
-        placeholder="Pick some colors"
-        expressions="session"
-        multi
-        searchable
-        tags
-      >
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Tags</div>
-      <temba-select
-        name="tagged"
-        placeholder="Pick some colors"
-        multi
-        searchable
-        tags
-        space_select
-      >
-        <temba-option value="red" name="Red"></temba-option>
-        <temba-option value="green" name="Green"></temba-option>
-        <temba-option value="blue" name="Blue"></temba-option>
-      </temba-select>
-    </div>
-      -->
-    <!--
-    <div class="example">
-      <div class="example-header">Tags Initialized</div>
-      <temba-select
-        name="tagged"
-        placeholder="Pick some colors"
-        multi
-        searchable
-        tags
-        space_select
-      >
-        <temba-option value="red" name="Red" selected></temba-option>
-        <temba-option value="green" name="Green" selected></temba-option>
-        <temba-option value="blue" name="Blue"></temba-option>
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Multi Remote</div>
-      <temba-select
-        id="multi-remote"
-        endpoint="/contact/omnibox/?v=2"
-        queryParam="search"
-        placeholder="Contacts"
-        searchable
-        multi
-      >
-      </temba-select>
-      <script>
-        window.setTimeout(() => {
-          var multiRemote = document.getElementById("multi-remote");
-          multiRemote.createArbitraryOption = function (input, options) {
-            var existing = options.find(function (option) {
-              return (
-                option.name.toLowerCase().trim() === input.toLowerCase().trim()
-              );
-            });
-            if (!existing) {
-              return {
-                prefix: "Create: ",
-                name: input,
-                id: "created",
-              };
-            }
-          };
-        }, 2000);
-      </script>
-    </div>
-    <div class="example">
-      <div class="example-header">Multi Remote with Expressions</div>
-      <temba-select
-        endpoint="/contact/omnibox/?v=2"
-        queryParam="search"
-        placeholder="Contacts"
-        expressions="session"
-        searchable
-        multi
-      >
-      </temba-select>
-    </div>
-    <div class="example">
-      <div class="example-header">Omnibox</div>
-      <temba-omnibox
-        endpoint="/contact/omnibox/?v=2"
-        groups
-        contacts
-      ></temba-omnibox>
-    </div>
-    <div class="example">
-      <div class="example-header">Omnibox Initialized</div>
-      <temba-omnibox
-        endpoint="/contact/omnibox/?v=2"
-        groups
-        contacts
-        value='[{"id": "f916ebaa-630d-450c-b72c-268822b70a42", "name": "a new", "type": "group", "count": 0}]'
-      ></temba-omnibox>
-    </div>
-    <div class="example">
-      <div class="example-header">Completion</div>
-      <temba-completion textarea value="This is just the beginning."></temba-completion>
-    </div>
-    <div class="example">
-      <div class="example-header">Completion</div>
-      <temba-completion></temba-completion>
-    </div>
-  -->
-    <!--
-      Alias Editor - Deprecated
-      div class="example">
-      <div class="example-header">Alias Editor</div>
-      <alias-editor osmid="192787" endpoint="/adminboundary"></alias-editor>
-    </div -->
-    <script type="module" src="../src/temba-components.js"></script>
-  </body>
-</html>

package/demo/remote.html DELETED Viewed

@@ -1,3 +0,0 @@
-<div>
-    This was fetched..
-</div>

package/screenshots/truth/compose/attachments-with-files-focused.png DELETED Viewed

Binary file

package/stories/temba-checkbox.stories.md DELETED Viewed

@@ -1,37 +0,0 @@
-```js script
-import { html } from '@open-wc/demoing-storybook';
-import '../dist/index.js';
-export default {
-  title: 'forms/temba-checkbox',
-  component: 'temba-checkbox',
-  options: { selectedPanel: 'storybookjs/knobs/panel' },
-};
-```
-# temba-checkbox
-A component for...
-## Features:
-- a
-- b
-- ...
-## How to use
-```js preview-story
-export const Default = () =>
-  html`<temba-checkbox label="Click me for good luck"></temba-checkbox> `;
-```
-## Variations
-###### Custom Title
-```js preview-story
-export const Checked = () => html`
-  <temba-checkbox label="I started out checked" checked></temba-checkbox>
-`;
-```