@justeattakeaway/pie-textarea 0.0.0 → 0.2.0

package/README.md

@@ -72,9 +72,9 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
 
 ## Props
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
+| Property | Type | Default | Description                                        |
+|--|--|--|----------------------------------------------------|
+| `disabled` | `boolean` | `false` | Indicates whether or not the textarea is disabled. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
 
@@ -88,4 +88,4 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -22,7 +22,36 @@
           "kind": "class",
           "description": "",
           "name": "PieTextarea",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "TextareaProps['disabled'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "TextareaProps['disabled'] | undefined"
+              },
+              "fieldName": "disabled"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -8,6 +8,12 @@ import type { TemplateResult } from 'lit-html';
  * @tagname pie-textarea
  */
 export declare class PieTextarea extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -15,6 +21,10 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
 declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
 }
 
 export { }

package/dist/index.js

@@ -1,14 +1,32 @@
-import { LitElement as t, html as r, unsafeCSS as n } from "lit";
-import { RtlMixin as o, defineCustomElement as i } from "@justeattakeaway/pie-webc-core";
-const s = `*,*:after,*:before{box-sizing:inherit}
-`, a = "pie-textarea";
-class e extends o(t) {
+import { LitElement as p, html as l, unsafeCSS as f } from "lit";
+import { property as d } from "lit/decorators.js";
+import { RtlMixin as m, defineCustomElement as c } from "@justeattakeaway/pie-webc-core";
+const u = `*,*:after,*:before{box-sizing:inherit}
+`;
+var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (s, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? b(t, a) : t, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (e = (r ? n(t, a, e) : n(e)) || e);
+  return r && e && x(t, a, e), e;
+};
+const v = "pie-textarea";
+class o extends m(p) {
   render() {
-    return r`<h1 data-test-id="pie-textarea">Hello world!</h1>`;
+    const {
+      disabled: t
+    } = this;
+    return l`
+            <textarea
+                data-test-id="pie-textarea"
+                ?disabled=${t}
+            />`;
   }
 }
-e.styles = n(s);
-i(a, e);
+o.shadowRootOptions = { ...p.shadowRootOptions, delegatesFocus: !0 };
+o.styles = f(u);
+h([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+c(v, o);
 export {
-  e as PieTextarea
+  o as PieTextarea
 };

package/dist/react.d.ts

@@ -11,15 +11,25 @@ export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProp
  * @tagname pie-textarea
  */
 declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLTextAreaElement>;
 
 export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
 }
 
 export { }

package/dist/react.js

@@ -1,15 +1,16 @@
 import * as e from "react";
-import { createComponent as a } from "@lit/react";
-import { PieTextarea as t } from "./index.js";
+import { createComponent as t } from "@lit/react";
+import { PieTextarea as a } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const r = a({
+const r = t({
   displayName: "PieTextarea",
-  elementClass: t,
+  elementClass: a,
   react: e,
   tagName: "pie-textarea",
   events: {}
-}), s = r;
+}), x = r;
 export {
-  s as PieTextarea
+  x as PieTextarea
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>

package/src/defs.ts

@@ -1,3 +1,6 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TextareaProps {}
+export interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+}

package/src/index.ts

@@ -1,4 +1,6 @@
 import { LitElement, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+
 import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
 import styles from './textarea.scss?inline';
@@ -13,8 +15,21 @@ const componentSelector = 'pie-textarea';
  * @tagname pie-textarea
  */
 export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
+    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+    @property({ type: Boolean, reflect: true })
+    public disabled?: TextareaProps['disabled'];
+
     render () {
-        return html`<h1 data-test-id="pie-textarea">Hello world!</h1>`;
+        const {
+            disabled,
+        } = this;
+
+        return html`
+            <textarea
+                data-test-id="pie-textarea"
+                ?disabled=${disabled}
+            />`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/react.ts

@@ -13,7 +13,7 @@ const PieTextareaReact = createComponent({
     events: {},
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>
 
 export const PieTextarea = PieTextareaReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TextareaProps>
     & React.RefAttributes<PieTextareaLit> & ReactBaseType>;