@justeattakeaway/pie-textarea 0.2.0 → 0.3.1

package/README.md

@@ -72,9 +72,10 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
 
 ## Props
 
-| Property | Type | Default | Description                                        |
-|--|--|--|----------------------------------------------------|
-| `disabled` | `boolean` | `false` | Indicates whether or not the textarea is disabled. |
+| 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:
 

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    disabled: false,\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",
@@ -41,6 +76,15 @@
               "privacy": "public",
               "attribute": "disabled",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TextareaProps['size'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "size"
             }
           ],
           "attributes": [
@@ -50,6 +94,13 @@
                 "text": "TextareaProps['disabled'] | undefined"
               },
               "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "TextareaProps['size'] | undefined"
+              },
+              "fieldName": "size"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -1,9 +1,20 @@
+import { ComponentDefaultProps } 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 = ComponentDefaultProps<TextareaProps>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-textarea
  */
@@ -14,17 +25,24 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
         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,32 +1,51 @@
-import { LitElement as p, html as l, unsafeCSS as f } from "lit";
+import { LitElement as l, html as c, unsafeCSS as m } 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;
+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%}
+`, b = ["small", "medium", "large"], n = {
+  disabled: !1,
+  size: "medium"
 };
-const v = "pie-textarea";
-class o extends m(p) {
+var y = Object.defineProperty, P = Object.getOwnPropertyDescriptor, x = (i, t, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? P(t, a) : t, o = i.length - 1, p; o >= 0; o--)
+    (p = i[o]) && (e = (s ? p(t, a, e) : p(e)) || e);
+  return s && e && y(t, a, e), e;
+};
+const h = "pie-textarea";
+class r extends u(l) {
+  constructor() {
+    super(...arguments), this.size = n.size;
+  }
   render() {
     const {
-      disabled: t
+      disabled: t,
+      size: a
     } = this;
-    return l`
-            <textarea
-                data-test-id="pie-textarea"
-                ?disabled=${t}
-            />`;
+    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>`;
   }
 }
-o.shadowRootOptions = { ...p.shadowRootOptions, delegatesFocus: !0 };
-o.styles = f(u);
-h([
+r.shadowRootOptions = { ...l.shadowRootOptions, delegatesFocus: !0 };
+r.styles = m(v);
+x([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-c(v, o);
+], r.prototype, "disabled", 2);
+x([
+  d({ type: String }),
+  g(h, b, n.size)
+], r.prototype, "size", 2);
+z(h, r);
 export {
-  o as PieTextarea
+  r as PieTextarea,
+  n as defaultProps,
+  b as sizes
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -5,6 +6,16 @@ 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 = ComponentDefaultProps<TextareaProps>;
+
+/**
+ * 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>;
 
 /**
@@ -17,6 +28,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
         slotAssignment?: SlotAssignmentMode | undefined;
     };
     disabled?: TextareaProps['disabled'];
+    size?: TextareaProps['size'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -25,11 +37,17 @@ declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitEle
 
 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,8 +1,10 @@
 import * as e from "react";
 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 = t({
   displayName: "PieTextarea",
@@ -10,7 +12,9 @@ const r = t({
   react: e,
   tagName: "pie-textarea",
   events: {}
-}), x = r;
+}), c = r;
 export {
-  x 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.2.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,6 +1,28 @@
+import { type ComponentDefaultProps } 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 = ComponentDefaultProps<TextareaProps>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export const defaultProps: DefaultProps = {
+    disabled: false,
+    size: 'medium',
+};

package/src/index.ts

@@ -1,10 +1,11 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+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';
@@ -20,16 +21,26 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
     @property({ type: Boolean, reflect: true })
     public disabled?: TextareaProps['disabled'];
 
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size?: TextareaProps['size'] = defaultProps.size;
+
     render () {
         const {
             disabled,
+            size,
         } = this;
 
         return html`
-            <textarea
-                data-test-id="pie-textarea"
-                ?disabled=${disabled}
-            />`;
+            <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/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%;
+  }
+}
+
+