Add hscroll (#92)

...creates a horizontal scroller for many items

Author: gordonbrander

typescript/packages/common-ui/src/components/common-hscroll.ts

@@ -0,0 +1,67 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { baseStyles } from "./style.js";
+import { view } from '../hyperscript/render.js';
+import { eventProps } from "../hyperscript/schema-helpers.js";
+
+export const hscroll = view('common-hscroll', {
+  ...eventProps()
+});
+
+@customElement("common-hscroll")
+export class CommonHscrollElement extends LitElement {
+  static override styles = [
+    baseStyles,
+    css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .scroll {
+      overflow-x: auto;
+      overflow-y: hidden;
+      width: 100%;
+    }
+
+    .scroll {
+      scrollbar-width: none;  /* Firefox */
+      -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    }
+
+    .scroll::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    .scroll-body {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      gap: var(--gap)
+    }
+
+    :host([gap="none"]) .scroll-body {
+      gap: 0;
+    }
+
+    :host([gap="md"]) .scroll-body {
+      gap: var(--gap);
+    }
+
+    :host([pad="md"]) .scroll-body {
+      padding: var(--gap);
+    }
+    `
+  ];
+
+  override render() {
+    return html`
+    <div class="scroll">
+      <div class="scroll-body">
+        <slot></slot>
+      </div>
+    </div>
+    `;
+  }
+}

typescript/packages/common-ui/src/components/index.ts

@@ -20,4 +20,5 @@ export * as CommonSystemLayout from './common-system-layout.js';
 export * as CommonNavstack from './common-navstack.js';
 export * as CommonTodo from './common-todo.js';
 export * as CommonPill from './common-pill.js';
+export * as CommonHscroll from './common-hscroll.js';
 export * as style from './style.js';

typescript/packages/lookslike-sagas/index.html

@@ -12,7 +12,34 @@
         <common-system-layout>
             <common-list>
                 <common-button>Bonk</common-button>
-                <common-pill>Bonk</common-pill>
+                <common-hscroll>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                    <common-pill>Bonk</common-pill>
+                </common-hscroll>
                 <common-todo value="Buy milk" placeholder="Todo..."></common-todo>
                 <common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
                     Hello!