feat(DSW-2774) add select option and option group

.changeset/hip-trees-worry.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-select": minor
+"pie-storybook": minor
+---
+
+[Added] - pie select option

.gitignore

@@ -174,6 +174,7 @@ build/**
 dist/
 custom-elements.json
 **/src/react.ts
+**/src/**/react.ts
 **/stats.html
 
 # Yalc

apps/pie-storybook/stories/pie-select.stories.ts

@@ -96,16 +96,19 @@ const Template = ({
             ?disabled="${disabled}"
             size="${ifDefined(size)}"
             assistiveText="${ifDefined(assistiveText)}"
-            status=${ifDefined(status)}>   
-                ${showLeadingIcon ? html`<icon-placeholder slot="leadingIcon"></icon-placeholder>` : nothing} 
+            status=${ifDefined(status)}>
+                ${showLeadingIcon ? html`<icon-placeholder slot="leadingIcon"></icon-placeholder>` : nothing}
+                <pie-select-option>Option 1</pie-select-option>
+                <pie-select-option>Option 2</pie-select-option>
+                <pie-select-option>Option 3</pie-select-option>
         </pie-select>
-    `;
+`;
 
 const WithLabelTemplate: TemplateFunction<SelectProps> = (props: SelectProps) => html`
-        <p>Please note, the label is a separate component. See <pie-link href="/?path=/story/form-label">pie-form-label</pie-link>.</p>
-        <pie-form-label for="${ifDefined(props.name)}">Label</pie-form-label>
-        ${Template(props)}
-    `;
+    <p>Please note, the label is a separate component. See <pie-link href="/?path=/story/form-label">pie-form-label</pie-link>.</p>
+    <pie-form-label for="${ifDefined(props.name)}">Label</pie-form-label>
+    ${Template(props)}
+`;
 
 export const Default = createStory<SelectProps>(Template, defaultArgs)();
 export const Labelled = createStory<SelectProps>(WithLabelTemplate, defaultArgs)();

packages/components/pie-select/src/index.ts

@@ -65,10 +65,22 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
     @state()
     private _hasLeadingIcon = false;
 
+    private _handleDefaultSlotChange () {
+        this.requestUpdate();
+    }
+
     private _handleLeadingIconSlotchange () {
         this._hasLeadingIcon = Boolean(this._leadingIconSlot.length);
     }
 
+    private renderItems () {
+        return html`
+          ${[...this.children]
+            .filter((el) => el.matches('pie-select-option'))
+            .map(({ textContent }) => html`<option>${textContent}</option>`)}
+        `;
+    }
+
     private renderAssistiveText () {
         if (!this.assistiveText) {
             return nothing;
@@ -113,11 +125,10 @@ export class PieSelect extends RtlMixin(LitElement) implements SelectProps {
                         aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
                         aria-invalid=${status === 'error' ? 'true' : 'false'}
                         aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}">
-                        <option value="dog">Dog</option>
-                        <option value="cat">Cat</option>
-                        <option value="hamster">Hamster</option>
+                        ${this.renderItems()}
                     </select>
                     <icon-chevron-down size='s' class='c-select-trailingIcon'></icon-chevron-down>
+                    <slot @slotchange=${this._handleDefaultSlotChange} style="display: none"></slot>
             </div>
             ${this.renderAssistiveText()}
         `;

packages/components/pie-select/src/pie-select-option/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLOptionElement>

packages/components/pie-select/src/pie-select-option/defs.ts

@@ -0,0 +1,19 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export interface SelectOptionProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the select option (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+}
+
+type SelectOptionDefaultProps = ComponentDefaultProps<SelectOptionProps>;
+
+export const selectOptionDefaultProps: SelectOptionDefaultProps = {
+    disabled: false,
+    value: '',
+};

packages/components/pie-select/src/pie-select-option/index.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { selectOptionDefaultProps, type SelectOptionProps } from './defs';
+
+const componentSelector = 'pie-select-option';
+
+/**
+ * @tagname pie-select-option
+ */
+export class PieSelectOption extends LitElement implements SelectOptionProps {
+    @property({ type: Boolean })
+    public disabled = selectOptionDefaultProps.disabled;
+
+    @property({ type: String })
+    public value = selectOptionDefaultProps.value;
+}
+
+defineCustomElement(componentSelector, PieSelectOption);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieSelectOption;
+    }
+}

packages/components/pie-select/vite.config.js

@@ -1,3 +1,59 @@
-import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+import { deepmerge } from 'deepmerge-ts';
+
+// https://vitejs.dev/config/
+const sharedConfig = ({ build = {}, plugins = [], ...rest }) => defineConfig({
+    build: deepmerge({
+        lib: {
+            entry: {
+                index: 'src/index.ts',
+                react: 'src/react.ts',
+                'pie-select-option/index': 'src/pie-select-option/index.ts',
+                'pie-select-option/react': 'src/pie-select-option/react.ts',
+            },
+            formats: ['es'],
+        },
+        rollupOptions: {
+            external: (id) => {
+                if (['react', '@lit/react'].includes(id) || /^lit/.test(id)) {
+                    return true;
+                }
+
+                if (id.startsWith('@justeattakeaway/pie-')) {
+                    console.info(`Excluding ${id} from the bundle`);
+                    return true;
+                }
+
+                return false;
+            },
+        },
+    }, build),
+    test: {
+        dir: '.',
+        environment: 'jsdom',
+        globals: true,
+        include: [
+            './src/__tests__/**/*.{spec,test}.{js,ts}',
+            './test/unit/**/*.{spec,test}.{js,ts}',
+        ],
+        exclude: ['**/node_modules/**'],
+    },
+    plugins: deepmerge([dts({
+        insertTypesEntry: true,
+        outputDir: 'dist',
+        entryRoot: 'src',
+        rollupTypes: false,
+    }),
+    visualizer({
+        gzipSize: true,
+        brotliSize: true,
+    })], plugins),
+
+    ...rest,
+});
+
+export default sharedConfig;
 
-export default viteConfig;