Feat: Add pinwheel-group Component (#96)

* feat: add pinwheel-group component

* Create README.md

* Update README.md

* fix: update css var names

* fix: remove README

* doc: add JSDoc

* doc: update JSDoc

Author: mrp-78

src/pinwheel-group/index.ts

@@ -0,0 +1,37 @@
+import { customElement } from "lit/decorators.js";
+import { PinwheelGroup } from "./pinwheel-group";
+import styles from "./pinwheel-group.style";
+
+/**
+ * ### Example
+ *
+ * ```html
+ * <tap-pinwheel-group>
+ *  <tap-pinwheel .items=${["item1", "item2"]}></tap-avatar>
+ *  <tap-pinwheel .items=${["item1", "item2"]}></tap-avatar>
+ *  <tap-pinwheel .items=${["item1", "item2"]}></tap-avatar>
+ * </tap-pinwheel-group>
+ * ```
+ *
+ * @summary Grouping pinwheel components and attach selector indicator to them.
+ *
+ * @slot - The default slot to get pinwheels.
+ *
+ * @csspart `pinwheel-group` - The container that wraps the pinwheels.
+ * @csspart `pinwheel-selector-indicator` - The selector indicator that wraps selected row.
+ *
+ * @cssprop [`--tap-pinwheel-group-selector-radius`=`--tap-sys-spacing-4`]
+ *
+ * @cssprop [`--tap-pinwheel-group-selector-background-color`=`--tap-sys-color-surface-tertiary`]
+ *
+ */
+@customElement("tap-pinwheel-group")
+export class TapPinwheelGroup extends PinwheelGroup {
+  static readonly styles = [styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "tap-pinwheel-group": TapPinwheelGroup;
+  }
+}

src/pinwheel-group/pinwheel-group.stories.ts

@@ -0,0 +1,31 @@
+import { html, TemplateResult } from "lit";
+import "./index.js";
+import "../pinwheel"
+
+export default {
+  title: "Pinwheel",
+  component: "tap-pinwheel-group",
+  argTypes: {},
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {}
+
+const items = ['عنوان ۱', 'عنوان ۲', 'عنوان ۳', 'عنوان ۴', 'عنوان ۵', 'عنوان ۶', 'عنوان ۷', 'عنوان ۸', 'عنوان ۹']
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <tap-pinwheel-group>
+    <tap-pinwheel .items=${items}></tap-pinwheel>
+    <tap-pinwheel .items=${items}></tap-pinwheel>
+    <tap-pinwheel .items=${items}></tap-pinwheel>
+  </tap-pinwheel-group>
+`;
+
+export const PinwheelGroup = Template.bind({});
+
+PinwheelGroup.args = {};

src/pinwheel-group/pinwheel-group.style.ts

@@ -0,0 +1,23 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: inline-flex;
+  }
+
+  .pinwheel-group {
+    position: relative;
+  }
+
+  .selector-indicator {
+    /* FIXME: we dont have sizing tokens yet */
+    height: var(--tap-pinwheel-item-height, 48px);
+    background-color: var(--tap-pinwheel-group-selector-background-color, var(--tap-sys-color-surface-tertiary));
+    border-radius: var(--tap-pinwheel-group-selector-radius, var(--tap-sys-spacing-4));
+    position: absolute;
+    top: calc(50% - 24px);
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+`;

src/pinwheel-group/pinwheel-group.ts

@@ -0,0 +1,17 @@
+import { html, LitElement, nothing } from 'lit';
+
+export class PinwheelGroup extends LitElement {
+  render() {
+    return html`
+      <div
+        role="group"
+        class="pinwheel-group"
+        part="pinwheel-group"
+        aria-label=${nothing}
+      >
+        <slot></slot>
+        <div class="selector-indicator" part="pinwheel-selector-indicator"></div>
+      </div>
+    `
+  }
+}

src/pinwheel/index.ts

@@ -16,20 +16,21 @@ import styles from './pinwheel.style';
  * @csspart `pinwheel` - The container that wraps the pinwheel component.
  * @csspart `pinwheel-item` - The item that rendered in pinwheel.
  *
- * @cssprop [`--tap-pinwheel-spacing-0`=`--tap-sys-spacing-0`]
- * @cssprop [`--tap-pinwheel-spacing-6`=`--tap-sys-spacing-6`]
- * @cssprop [`--tap-pinwheel-spacing-11`=`--tap-sys-spacing-11`]
+ * @cssprop [`--tap-pinwheel-vertical-padding`=`--tap-sys-spacing-0`]
+ * @cssprop [`--tap-pinwheel-horizontal-padding`=`--tap-sys-spacing-6`]
+ *
+ * @cssprop [`--tap-pinwheel-item-height`=`--tap-sys-spacing-11`]
  *
  * @cssprop [`--tap-font-family`=`--tap-sys-font-family`]
  * @cssprop [`--tap-pinwheel-typography-body-md-height`=`--tap-sys-typography-body-md-height`]
  * @cssprop [`--tap-pinwheel-typography-body-md-size`=`--tap-sys-typography-body-md-size`]
  * @cssprop [`--tap-pinwheel-typography-body-md-weight`=`--tap-sys-typography-body-md-weight`]
- * @cssprop [`--tap-pinwheel-color-content-tertiary`=`--tap-sys-color-content-tertiary`]
+ * @cssprop [`--tap-pinwheel-item-color`=`--tap-sys-color-content-tertiary`]
  *
  * @cssprop [`--tap-pinwheel-typography-label-md-height`=`--tap-sys-typography-label-md-height`]
  * @cssprop [`--tap-pinwheel-typography-label-md-size`=`--tap-sys-typography-label-md-size`]
  * @cssprop [`--tap-pinwheel-typography-label-md-weight`=`--tap-sys-typography-label-md-weight`]
- * @cssprop [`--tap-pinwheel-color-content-primary`=`--tap-sys-color-content-primary`]
+ * @cssprop [`--tap-pinwheel-active-item-color`=`--tap-sys-color-content-primary`]
  *
  */
 @customElement('tap-pinwheel')

src/pinwheel/pinwheel.style.ts

@@ -17,10 +17,13 @@ export default css`
   }
 
   .pinwheel > div {
-    padding: var(--tap-pinwheel-spacing-0, var(--tap-sys-spacing-0))
-      var(--tap-pinwheel-spacing-6, var(--tap-sys-spacing-6));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--tap-pinwheel-vertical-padding, var(--tap-sys-spacing-0))
+      var(--tap-pinwheel-horizontal-padding, var(--tap-sys-spacing-6));
     /* FIXME: we dont have sizing tokens yet  */
-    height: 48px;
+    height: var(--tap-pinwheel-item-height, 48px);
     font: inherit;
     font-family: var(--tap-font-family, var(--tap-sys-font-family));
     line-height: var(
@@ -36,17 +39,17 @@ export default css`
       var(--tap-sys-typography-body-md-weight)
     );
     color: var(
-      --tap-pinwheel-color-content-tertiary,
+      --tap-pinwheel-item-color,
       var(--tap-sys-color-content-tertiary)
     );
   }
 
   .pinwheel div:first-child {
-    padding-top: var(--tap-pinwheel-spacing-11, var(--tap-sys-spacing-11));
+    padding-top: var(--tap-pinwheel-item-height, var(--tap-sys-spacing-11));
   }
 
   .pinwheel div:last-child {
-    padding-bottom: var(--tap-pinwheel-spacing-11, var(--tap-sys-spacing-11));
+    padding-bottom: var(--tap-pinwheel-item-height, var(--tap-sys-spacing-11));
   }
 
   .pinwheel .active {
@@ -63,7 +66,7 @@ export default css`
       var(--tap-sys-typography-label-md-weight)
     );
     color: var(
-      --tap-pinwheel-color-content-primary,
+      --tap-pinwheel-active-item-color,
       var(--tap-sys-color-content-primary)
     );
   }