@justeattakeaway/pie-textarea 0.1.0 → 0.3.0

package/README.md

@@ -72,9 +72,10 @@ 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. |
+| `size`     | `small`, `medium`, `large` | `medium` | The size of the textarea field.                    |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
 
@@ -88,4 +89,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

@@ -11,8 +11,43 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "type": {
+            "text": "['small', 'medium', 'large']"
+          },
+          "default": "['small', 'medium', 'large']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    size: 'medium',\n}",
+          "description": "Default values for optional properties that have default fallback values in the component."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +57,52 @@
           "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
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TextareaProps['size'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "TextareaProps['disabled'] | undefined"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "TextareaProps['size'] | undefined"
+              },
+              "fieldName": "size"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -1,20 +1,48 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+declare type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'size'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-textarea
  */
 export declare class PieTextarea extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
+    size?: TextareaProps['size'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
+export declare const sizes: readonly ["small", "medium", "large"];
+
 export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
 }
 
 export { }

package/dist/index.js

@@ -1,14 +1,50 @@
-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 l, html as c, unsafeCSS as m } from "lit";
+import { property as n } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { RtlMixin as u, validPropertyValues as g, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
+const v = `*,*:after,*:before{box-sizing:inherit}.c-textarea{--textarea-height: 72px;height:var(--textarea-height)}.c-textarea[data-pie-size=large]{--textarea-height: 80px}.c-textarea[data-pie-size=small]{--textarea-height: 64px}.c-textarea textarea{width:100%;height:100%}
+`, y = ["small", "medium", "large"], d = {
+  size: "medium"
+};
+var b = Object.defineProperty, P = Object.getOwnPropertyDescriptor, x = (s, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? P(t, a) : t, o = s.length - 1, p; o >= 0; o--)
+    (p = s[o]) && (e = (i ? p(t, a, e) : p(e)) || e);
+  return i && e && b(t, a, e), e;
+};
+const h = "pie-textarea";
+class r extends u(l) {
+  constructor() {
+    super(...arguments), this.size = d.size;
+  }
   render() {
-    return r`<h1 data-test-id="pie-textarea">Hello world!</h1>`;
+    const {
+      disabled: t,
+      size: a
+    } = this;
+    return c`
+            <div
+                class="c-textarea"
+                data-test-id="pie-textarea-shell"
+                data-pie-size=${f(a)}>
+                <textarea
+                    data-test-id="pie-textarea"
+                    ?disabled=${t}
+                ></textarea>
+            </div>`;
   }
 }
-e.styles = n(s);
-i(a, e);
+r.shadowRootOptions = { ...l.shadowRootOptions, delegatesFocus: !0 };
+r.styles = m(v);
+x([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+x([
+  n({ type: String }),
+  g(h, y, d.size)
+], r.prototype, "size", 2);
+z(h, r);
 export {
-  e as PieTextarea
+  r as PieTextarea,
+  d as defaultProps,
+  y as sizes
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -5,21 +6,48 @@ import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+declare type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'size'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export declare const defaultProps: DefaultProps;
+
 export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & ReactBaseType>;
 
 /**
  * @tagname pie-textarea
  */
 declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
+    size?: TextareaProps['size'];
     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 const sizes: readonly ["small", "medium", "large"];
 
 export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
 }
 
 export { }

package/dist/react.js

@@ -1,15 +1,20 @@
 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 { defaultProps as f, sizes as T } from "./index.js";
 import "lit";
+import "lit/decorators.js";
+import "lit/directives/if-defined.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;
+}), c = r;
 export {
-  s as PieTextarea
+  c as PieTextarea,
+  f as defaultProps,
+  T as sizes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.1.0",
+  "version": "0.3.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,27 @@
-// 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 {}
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
+export const sizes = ['small', 'medium', 'large'] as const;
+
+export interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
+     */
+    size?: typeof sizes[number];
+}
+
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'size'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export const defaultProps: DefaultProps = {
+    size: 'medium',
+};

package/src/index.ts

@@ -1,8 +1,11 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
 import styles from './textarea.scss?inline';
-import { TextareaProps } from './defs';
+import { TextareaProps, defaultProps, sizes } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,8 +16,31 @@ 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'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size?: TextareaProps['size'] = defaultProps.size;
+
     render () {
-        return html`<h1 data-test-id="pie-textarea">Hello world!</h1>`;
+        const {
+            disabled,
+            size,
+        } = this;
+
+        return html`
+            <div
+                class="c-textarea"
+                data-test-id="pie-textarea-shell"
+                data-pie-size=${ifDefined(size)}>
+                <textarea
+                    data-test-id="pie-textarea"
+                    ?disabled=${disabled}
+                ></textarea>
+            </div>`;
     }
 
     // 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>;

package/src/textarea.scss

@@ -1 +1,22 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-textarea {
+  --textarea-height: 72px;
+
+  height: var(--textarea-height);
+
+  &[data-pie-size="large"] {
+    --textarea-height: 80px;
+  }
+
+  &[data-pie-size="small"] {
+    --textarea-height: 64px;
+  }
+
+  textarea {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+