@justeattakeaway/pie-radio 0.0.0 → 0.1.0

package/custom-elements.json

@@ -11,8 +11,26 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    checked: false,\n    defaultChecked: false,\n    disabled: false,\n    required: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,8 +40,105 @@
           "kind": "class",
           "description": "",
           "name": "PieRadio",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "privacy": "public",
+              "attribute": "checked"
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "privacy": "public",
+              "attribute": "defaultChecked"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "RadioProps['name']"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "privacy": "public",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "RadioProps['value']"
+              },
+              "privacy": "public",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "radio",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "fieldName": "checked"
+            },
+            {
+              "name": "defaultChecked",
+              "fieldName": "defaultChecked"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "RadioProps['name']"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "required",
+              "fieldName": "required"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "RadioProps['value']"
+              },
+              "fieldName": "value"
+            }
+          ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,20 +1,64 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 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';
 
+export declare type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<RadioProps, 'name' | 'value'>>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-radio
  */
 export declare class PieRadio extends PieRadio_base implements RadioProps {
+    checked: boolean;
+    defaultChecked: boolean;
+    disabled: boolean;
+    name: RadioProps['name'];
+    required: boolean;
+    value: RadioProps['value'];
+    private radio;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieRadio_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieRadio_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare interface RadioProps {
+    /**
+     * The checked state of the radio.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the radio (not necessarily the same as the current checked state).
+     * Used when the radio is part of a form that is reset.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Same as native required attribute. If any radio button in a same-named group of radio buttons has the required attribute,
+     * a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.
+     */
+    required?: boolean;
+    /**
+     * The value of the radio (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
 }
 
 export { }

package/dist/index.js

@@ -1,14 +1,80 @@
-import { LitElement as t, html as o, unsafeCSS as i } from "lit";
-import { RtlMixin as r, defineCustomElement as n } from "@justeattakeaway/pie-webc-core";
-const s = `*,*:after,*:before{box-sizing:inherit}
-`, l = "pie-radio";
-class e extends r(t) {
+import { LitElement as u, html as f, unsafeCSS as y } from "lit";
+import { property as d, query as m } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { live as b } from "lit/directives/live.js";
+import { FormControlMixin as v, RtlMixin as q, requiredProperty as C, defineCustomElement as P } from "@justeattakeaway/pie-webc-core";
+const _ = `*,*:after,*:before{box-sizing:inherit}
+`, p = {
+  checked: !1,
+  defaultChecked: !1,
+  disabled: !1,
+  required: !1
+};
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, r = (s, o, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? k(o, a) : o, l = s.length - 1, n; l >= 0; l--)
+    (n = s[l]) && (e = (i ? n(o, a, e) : n(e)) || e);
+  return i && e && g(o, a, e), e;
+};
+const c = "pie-radio";
+class t extends v(q(u)) {
+  constructor() {
+    super(...arguments), this.checked = p.checked, this.defaultChecked = p.defaultChecked, this.disabled = p.disabled, this.required = p.required;
+  }
+  /**
+   * (Read-only) returns a ValidityState with the validity states that this element is in.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+   */
+  get validity() {
+    return this.radio.validity;
+  }
   render() {
-    return o`<h1 data-test-id="pie-radio">Hello world!</h1>`;
+    const {
+      checked: o,
+      disabled: a,
+      name: i,
+      required: e,
+      value: l
+    } = this;
+    return f`
+        <input
+            type="radio"
+            id="radioId"
+            data-test-id="pie-radio"
+            .checked="${b(o)}"
+            .value="${l}"
+            name="${h(i)}"
+            ?disabled="${a}"
+            ?required="${e}">
+        <label for="radioId">
+            <slot></slot>
+        </label>`;
   }
 }
-e.styles = i(s);
-n(l, e);
+t.styles = y(_);
+r([
+  d({ type: Boolean })
+], t.prototype, "checked", 2);
+r([
+  d({ type: Boolean })
+], t.prototype, "defaultChecked", 2);
+r([
+  d({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  d({ type: String })
+], t.prototype, "name", 2);
+r([
+  d({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  d({ type: String }),
+  C(c)
+], t.prototype, "value", 2);
+r([
+  m('input[type="radio"]')
+], t.prototype, "radio", 2);
+P(c, t);
 export {
-  e as PieRadio
+  t as PieRadio,
+  p as defaultProps
 };

package/dist/react.d.ts

@@ -1,25 +1,69 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+export declare type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<RadioProps, 'name' | 'value'>>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieRadio: React_2.ForwardRefExoticComponent<RadioProps & React_2.RefAttributes<PieRadio_2> & ReactBaseType>;
 
 /**
  * @tagname pie-radio
  */
 declare class PieRadio_2 extends PieRadio_base implements RadioProps {
+    checked: boolean;
+    defaultChecked: boolean;
+    disabled: boolean;
+    name: RadioProps['name'];
+    required: boolean;
+    value: RadioProps['value'];
+    private radio;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieRadio_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieRadio_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare interface RadioProps {
+    /**
+     * The checked state of the radio.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the radio (not necessarily the same as the current checked state).
+     * Used when the radio is part of a form that is reset.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Same as native required attribute. If any radio button in a same-named group of radio buttons has the required attribute,
+     * a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.
+     */
+    required?: boolean;
+    /**
+     * The value of the radio (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
 }
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
 
 export { }

package/dist/react.js

@@ -1,15 +1,20 @@
-import * as e from "react";
-import { createComponent as o } from "@lit/react";
+import * as o from "react";
+import { createComponent as e } from "@lit/react";
 import { PieRadio as i } from "./index.js";
+import { defaultProps as f } from "./index.js";
 import "lit";
+import "lit/decorators.js";
+import "lit/directives/if-defined.js";
+import "lit/directives/live.js";
 import "@justeattakeaway/pie-webc-core";
-const a = o({
+const t = e({
   displayName: "PieRadio",
   elementClass: i,
-  react: e,
+  react: o,
   tagName: "pie-radio",
   events: {}
-}), s = a;
+}), c = t;
 export {
-  s as PieRadio
+  c as PieRadio,
+  f as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-radio",
   "description": "PIE Design System Radio built using Web Components",
-  "version": "0.0.0",
+  "version": "0.1.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>
+import type React from 'react';
+
+export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>;

package/src/defs.ts

@@ -1,3 +1,44 @@
-// 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 RadioProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export interface RadioProps {
+    /**
+     * The checked state of the radio.
+     */
+    checked?: boolean;
+
+    /**
+     * The default checked state of the radio (not necessarily the same as the current checked state).
+     * Used when the radio is part of a form that is reset.
+     */
+    defaultChecked?: boolean;
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the radio is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+
+    /**
+     * Same as native required attribute. If any radio button in a same-named group of radio buttons has the required attribute,
+     * a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.
+     */
+    required?: boolean;
+
+    /**
+     * The value of the radio (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+}
+
+export type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<RadioProps, 'name' | 'value'>>;
+
+export const defaultProps: DefaultProps = {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    required: false,
+};

package/src/index.ts

@@ -1,8 +1,13 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import {
+    defineCustomElement, FormControlMixin, requiredProperty, RtlMixin,
+} from '@justeattakeaway/pie-webc-core';
 
 import styles from './radio.scss?inline';
-import { RadioProps } from './defs';
+import { type RadioProps, defaultProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -12,9 +17,55 @@ const componentSelector = 'pie-radio';
 /**
  * @tagname pie-radio
  */
-export class PieRadio extends RtlMixin(LitElement) implements RadioProps {
+export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements RadioProps {
+    @property({ type: Boolean })
+    public checked = defaultProps.checked;
+
+    @property({ type: Boolean })
+    public defaultChecked = defaultProps.defaultChecked;
+
+    @property({ type: Boolean })
+    public disabled = defaultProps.disabled;
+
+    @property({ type: String })
+    public name: RadioProps['name'];
+
+    @property({ type: Boolean })
+    public required = defaultProps.required;
+
+    @property({ type: String })
+    @requiredProperty(componentSelector)
+    public value!: RadioProps['value'];
+
+    @query('input[type="radio"]')
+    private radio!: HTMLInputElement;
+
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    public get validity () : ValidityState {
+        return this.radio.validity;
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-radio">Hello world!</h1>`;
+        const {
+            checked, disabled, name, required, value,
+        } = this;
+
+        return html`
+        <input
+            type="radio"
+            id="radioId"
+            data-test-id="pie-radio"
+            .checked="${live(checked)}"
+            .value="${value}"
+            name="${ifDefined(name)}"
+            ?disabled="${disabled}"
+            ?required="${required}">
+        <label for="radioId">
+            <slot></slot>
+        </label>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/react.ts

@@ -13,7 +13,7 @@ const PieRadioReact = createComponent({
     events: {},
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>;
 
 export const PieRadio = PieRadioReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<RadioProps>
     & React.RefAttributes<PieRadioLit> & ReactBaseType>;