From 86b42906247efce7e041b88472b85dd4f73cc414 Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Tue, 19 Nov 2024 11:03:23 -0800 Subject: [PATCH 1/7] feat(filter-menu): search header --- src/components/ebay-filter-menu/component.ts | 28 +- .../ebay-filter-menu/examples/data.json | 974 ++++++++++++++++++ .../examples/with-search.marko | 31 + .../ebay-filter-menu/filter-menu.stories.ts | 45 +- src/components/ebay-filter-menu/index.marko | 23 +- 5 files changed, 1088 insertions(+), 13 deletions(-) create mode 100644 src/components/ebay-filter-menu/examples/data.json create mode 100644 src/components/ebay-filter-menu/examples/with-search.marko diff --git a/src/components/ebay-filter-menu/component.ts b/src/components/ebay-filter-menu/component.ts index f1562b95c..8c438ed0f 100644 --- a/src/components/ebay-filter-menu/component.ts +++ b/src/components/ebay-filter-menu/component.ts @@ -34,16 +34,23 @@ interface FilterMenuInput "a11y-footer-text"?: AttrString; } >; + "search-header-placeholder-text"?: string; + "a11y-search-header-clear-text"?: string; "render-body"?: Marko.Body; "on-footer-click"?: (event: FilterMenuEvent) => void; "on-form-submit"?: (event: FilterMenuEvent) => void; "on-change"?: (event: FilterMenuEvent) => void; "on-keydown"?: (event: FilterMenuEvent) => void; + "on-search-change"?: (value: string) => void; } export interface Input extends WithNormalizedProps {} -export default class extends MenuUtils { +export interface State extends MenuState { + searchTerm?: string; +} + +export default class extends MenuUtils { declare _rovingTabIndex: ReturnType; declare lastTabIndexPosition: number; @@ -56,6 +63,16 @@ export default class extends MenuUtils { this.lastTabIndexPosition = 0; } + handleSearch(e: InputEvent) { + this.state.searchTerm = (e.target as HTMLInputElement).value; + this.emit("search-change", this.state.searchTerm); + } + + clearSearch() { + this.state.searchTerm = ""; + this.emit("search-change", this.state.searchTerm); + } + handleRadioClick(index: number, ev: RadioEvent, itemEl: Element) { this._toggleItemChecked(index, ev.originalEvent, itemEl); } @@ -102,7 +119,10 @@ export default class extends MenuUtils { } onInput(input: Input) { - this.state = super.getInputState(input); + this.state = { + ...super.getInputState(input), + searchTerm: this.state ? this.state.searchTerm : "", + }; } onMount() { @@ -158,7 +178,7 @@ export default class extends MenuUtils { autoInit: this.lastTabIndexPosition || "interactive", }); - scrollKeyPreventer.add(this.getEl("container")); + scrollKeyPreventer.add(this.getEl("menu")); } } @@ -167,7 +187,7 @@ export default class extends MenuUtils { this.lastTabIndexPosition = this._rovingTabIndex.index; this._rovingTabIndex.destroy(); this._rovingTabIndex = undefined; - scrollKeyPreventer.remove(this.getEl("container")); + scrollKeyPreventer.remove(this.getEl("menu")); } } } diff --git a/src/components/ebay-filter-menu/examples/data.json b/src/components/ebay-filter-menu/examples/data.json new file mode 100644 index 000000000..6de354b55 --- /dev/null +++ b/src/components/ebay-filter-menu/examples/data.json @@ -0,0 +1,974 @@ +[ + { + "name": "Afghanistan", + "code": "AF" + }, + { + "name": "ÅlandIslands", + "code": "AX" + }, + { + "name": "Albania", + "code": "AL" + }, + { + "name": "Algeria", + "code": "DZ" + }, + { + "name": "AmericanSamoa", + "code": "AS" + }, + { + "name": "AndorrA", + "code": "AD" + }, + { + "name": "Angola", + "code": "AO" + }, + { + "name": "Anguilla", + "code": "AI" + }, + { + "name": "Antarctica", + "code": "AQ" + }, + { + "name": "Antiguaand Barbuda", + "code": "AG" + }, + { + "name": "Argentina", + "code": "AR" + }, + { + "name": "Armenia", + "code": "AM" + }, + { + "name": "Aruba", + "code": "AW" + }, + { + "name": "Australia", + "code": "AU" + }, + { + "name": "Austria", + "code": "AT" + }, + { + "name": "Azerbaijan", + "code": "AZ" + }, + { + "name": "Bahamas", + "code": "BS" + }, + { + "name": "Bahrain", + "code": "BH" + }, + { + "name": "Bangladesh", + "code": "BD" + }, + { + "name": "Barbados", + "code": "BB" + }, + { + "name": "Belarus", + "code": "BY" + }, + { + "name": "Belgium", + "code": "BE" + }, + { + "name": "Belize", + "code": "BZ" + }, + { + "name": "Benin", + "code": "BJ" + }, + { + "name": "Bermuda", + "code": "BM" + }, + { + "name": "Bhutan", + "code": "BT" + }, + { + "name": "Bolivia", + "code": "BO" + }, + { + "name": "Bosniaand Herzegovina", + "code": "BA" + }, + { + "name": "Botswana", + "code": "BW" + }, + { + "name": "BouvetIsland", + "code": "BV" + }, + { + "name": "Brazil", + "code": "BR" + }, + { + "name": "BritishIndian Ocean Territory", + "code": "IO" + }, + { + "name": "BruneiDarussalam", + "code": "BN" + }, + { + "name": "Bulgaria", + "code": "BG" + }, + { + "name": "BurkinaFaso", + "code": "BF" + }, + { + "name": "Burundi", + "code": "BI" + }, + { + "name": "Cambodia", + "code": "KH" + }, + { + "name": "Cameroon", + "code": "CM" + }, + { + "name": "Canada", + "code": "CA" + }, + { + "name": "CapeVerde", + "code": "CV" + }, + { + "name": "CaymanIslands", + "code": "KY" + }, + { + "name": "CentralAfrican Republic", + "code": "CF" + }, + { + "name": "Chad", + "code": "TD" + }, + { + "name": "Chile", + "code": "CL" + }, + { + "name": "China", + "code": "CN" + }, + { + "name": "ChristmasIsland", + "code": "CX" + }, + { + "name": "Cocos(Keeling) Islands", + "code": "CC" + }, + { + "name": "Colombia", + "code": "CO" + }, + { + "name": "Comoros", + "code": "KM" + }, + { + "name": "Congo", + "code": "CG" + }, + { + "name": "Congo The Democratic Republic of the", + "code": "CD" + }, + { + "name": "CookIslands", + "code": "CK" + }, + { + "name": "CostaRica", + "code": "CR" + }, + { + "name": "CoteD'Ivoire", + "code": "CI" + }, + { + "name": "Croatia", + "code": "HR" + }, + { + "name": "Cuba", + "code": "CU" + }, + { + "name": "Cyprus", + "code": "CY" + }, + { + "name": "CzechRepublic", + "code": "CZ" + }, + { + "name": "Denmark", + "code": "DK" + }, + { + "name": "Djibouti", + "code": "DJ" + }, + { + "name": "Dominica", + "code": "DM" + }, + { + "name": "DominicanRepublic", + "code": "DO" + }, + { + "name": "Ecuador", + "code": "EC" + }, + { + "name": "Egypt", + "code": "EG" + }, + { + "name": "ElSalvador", + "code": "SV" + }, + { + "name": "EquatorialGuinea", + "code": "GQ" + }, + { + "name": "Eritrea", + "code": "ER" + }, + { + "name": "Estonia", + "code": "EE" + }, + { + "name": "Ethiopia", + "code": "ET" + }, + { + "name": "FalklandIslands (Malvinas)", + "code": "FK" + }, + { + "name": "FaroeIslands", + "code": "FO" + }, + { + "name": "Fiji", + "code": "FJ" + }, + { + "name": "Finland", + "code": "FI" + }, + { + "name": "France", + "code": "FR" + }, + { + "name": "FrenchGuiana", + "code": "GF" + }, + { + "name": "FrenchPolynesia", + "code": "PF" + }, + { + "name": "FrenchSouthern Territories", + "code": "TF" + }, + { + "name": "Gabon", + "code": "GA" + }, + { + "name": "Gambia", + "code": "GM" + }, + { + "name": "Georgia", + "code": "GE" + }, + { + "name": "Germany", + "code": "DE" + }, + { + "name": "Ghana", + "code": "GH" + }, + { + "name": "Gibraltar", + "code": "GI" + }, + { + "name": "Greece", + "code": "GR" + }, + { + "name": "Greenland", + "code": "GL" + }, + { + "name": "Grenada", + "code": "GD" + }, + { + "name": "Guadeloupe", + "code": "GP" + }, + { + "name": "Guam", + "code": "GU" + }, + { + "name": "Guatemala", + "code": "GT" + }, + { + "name": "Guernsey", + "code": "GG" + }, + { + "name": "Guinea", + "code": "GN" + }, + { + "name": "GuineaBissau", + "code": "GW" + }, + { + "name": "Guyana", + "code": "GY" + }, + { + "name": "Haiti", + "code": "HT" + }, + { + "name": "HeardIsland and Mcdonald Islands", + "code": "HM" + }, + { + "name": "HolySee (Vatican City State)", + "code": "VA" + }, + { + "name": "Honduras", + "code": "HN" + }, + { + "name": "HongKong", + "code": "HK" + }, + { + "name": "Hungary", + "code": "HU" + }, + { + "name": "Iceland", + "code": "IS" + }, + { + "name": "India", + "code": "IN" + }, + { + "name": "Indonesia", + "code": "ID" + }, + { + "name": "Iran Islamic Republic Of", + "code": "IR" + }, + { + "name": "Iraq", + "code": "IQ" + }, + { + "name": "Ireland", + "code": "IE" + }, + { + "name": "Isleof Man", + "code": "IM" + }, + { + "name": "Israel", + "code": "IL" + }, + { + "name": "Italy", + "code": "IT" + }, + { + "name": "Jamaica", + "code": "JM" + }, + { + "name": "Japan", + "code": "JP" + }, + { + "name": "Jersey", + "code": "JE" + }, + { + "name": "Jordan", + "code": "JO" + }, + { + "name": "Kazakhstan", + "code": "KZ" + }, + { + "name": "Kenya", + "code": "KE" + }, + { + "name": "Kiribati", + "code": "KI" + }, + { + "name": "Korea Democratic People'S Republic of", + "code": "KP" + }, + { + "name": "Korea Republic of", + "code": "KR" + }, + { + "name": "Kuwait", + "code": "KW" + }, + { + "name": "Kyrgyzstan", + "code": "KG" + }, + { + "name": "LaoPeopleS Democratic Republic", + "code": "LA" + }, + { + "name": "Latvia", + "code": "LV" + }, + { + "name": "Lebanon", + "code": "LB" + }, + { + "name": "Lesotho", + "code": "LS" + }, + { + "name": "Liberia", + "code": "LR" + }, + { + "name": "LibyanArab Jamahiriya", + "code": "LY" + }, + { + "name": "Liechtenstein", + "code": "LI" + }, + { + "name": "Lithuania", + "code": "LT" + }, + { + "name": "Luxembourg", + "code": "LU" + }, + { + "name": "Macao", + "code": "MO" + }, + { + "name": "Macedonia The Former Yugoslav Republic of", + "code": "MK" + }, + { + "name": "Madagascar", + "code": "MG" + }, + { + "name": "Malawi", + "code": "MW" + }, + { + "name": "Malaysia", + "code": "MY" + }, + { + "name": "Maldives", + "code": "MV" + }, + { + "name": "Mali", + "code": "ML" + }, + { + "name": "Malta", + "code": "MT" + }, + { + "name": "MarshallIslands", + "code": "MH" + }, + { + "name": "Martinique", + "code": "MQ" + }, + { + "name": "Mauritania", + "code": "MR" + }, + { + "name": "Mauritius", + "code": "MU" + }, + { + "name": "Mayotte", + "code": "YT" + }, + { + "name": "Mexico", + "code": "MX" + }, + { + "name": "Micronesia Federated States of", + "code": "FM" + }, + { + "name": "Moldova Republic of", + "code": "MD" + }, + { + "name": "Monaco", + "code": "MC" + }, + { + "name": "Mongolia", + "code": "MN" + }, + { + "name": "Montserrat", + "code": "MS" + }, + { + "name": "Morocco", + "code": "MA" + }, + { + "name": "Mozambique", + "code": "MZ" + }, + { + "name": "Myanmar", + "code": "MM" + }, + { + "name": "Namibia", + "code": "NA" + }, + { + "name": "Nauru", + "code": "NR" + }, + { + "name": "Nepal", + "code": "NP" + }, + { + "name": "Netherlands", + "code": "NL" + }, + { + "name": "NetherlandsAntilles", + "code": "AN" + }, + { + "name": "NewCaledonia", + "code": "NC" + }, + { + "name": "NewZealand", + "code": "NZ" + }, + { + "name": "Nicaragua", + "code": "NI" + }, + { + "name": "Niger", + "code": "NE" + }, + { + "name": "Nigeria", + "code": "NG" + }, + { + "name": "Niue", + "code": "NU" + }, + { + "name": "NorfolkIsland", + "code": "NF" + }, + { + "name": "NorthernMariana Islands", + "code": "MP" + }, + { + "name": "Norway", + "code": "NO" + }, + { + "name": "Oman", + "code": "OM" + }, + { + "name": "Pakistan", + "code": "PK" + }, + { + "name": "Palau", + "code": "PW" + }, + { + "name": "PalestinianTerritory Occupied", + "code": "PS" + }, + { + "name": "Panama", + "code": "PA" + }, + { + "name": "PapuaNew Guinea", + "code": "PG" + }, + { + "name": "Paraguay", + "code": "PY" + }, + { + "name": "Peru", + "code": "PE" + }, + { + "name": "Philippines", + "code": "PH" + }, + { + "name": "Pitcairn", + "code": "PN" + }, + { + "name": "Poland", + "code": "PL" + }, + { + "name": "Portugal", + "code": "PT" + }, + { + "name": "PuertoRico", + "code": "PR" + }, + { + "name": "Qatar", + "code": "QA" + }, + { + "name": "Reunion", + "code": "RE" + }, + { + "name": "Romania", + "code": "RO" + }, + { + "name": "RussianFederation", + "code": "RU" + }, + { + "name": "RWANDA", + "code": "RW" + }, + { + "name": "SaintHelena", + "code": "SH" + }, + { + "name": "SaintKitts and Nevis", + "code": "KN" + }, + { + "name": "SaintLucia", + "code": "LC" + }, + { + "name": "SaintPierre and Miquelon", + "code": "PM" + }, + { + "name": "SaintVincent and the Grenadines", + "code": "VC" + }, + { + "name": "Samoa", + "code": "WS" + }, + { + "name": "SanMarino", + "code": "SM" + }, + { + "name": "SaoTome and Principe", + "code": "ST" + }, + { + "name": "SaudiArabia", + "code": "SA" + }, + { + "name": "Senegal", + "code": "SN" + }, + { + "name": "Serbiaand Montenegro", + "code": "CS" + }, + { + "name": "Seychelles", + "code": "SC" + }, + { + "name": "SierraLeone", + "code": "SL" + }, + { + "name": "Singapore", + "code": "SG" + }, + { + "name": "Slovakia", + "code": "SK" + }, + { + "name": "Slovenia", + "code": "SI" + }, + { + "name": "SolomonIslands", + "code": "SB" + }, + { + "name": "Somalia", + "code": "SO" + }, + { + "name": "SouthAfrica", + "code": "ZA" + }, + { + "name": "SouthGeorgia and the South Sandwich Islands", + "code": "GS" + }, + { + "name": "Spain", + "code": "ES" + }, + { + "name": "SriLanka", + "code": "LK" + }, + { + "name": "Sudan", + "code": "SD" + }, + { + "name": "Suriname", + "code": "SR" + }, + { + "name": "Svalbardand Jan Mayen", + "code": "SJ" + }, + { + "name": "Swaziland", + "code": "SZ" + }, + { + "name": "Sweden", + "code": "SE" + }, + { + "name": "Switzerland", + "code": "CH" + }, + { + "name": "SyrianArab Republic", + "code": "SY" + }, + { + "name": "Taiwan Province of China", + "code": "TW" + }, + { + "name": "Tajikistan", + "code": "TJ" + }, + { + "name": "Tanzania United Republic of", + "code": "TZ" + }, + { + "name": "Thailand", + "code": "TH" + }, + { + "name": "TimorLeste", + "code": "TL" + }, + { + "name": "Togo", + "code": "TG" + }, + { + "name": "Tokelau", + "code": "TK" + }, + { + "name": "Tonga", + "code": "TO" + }, + { + "name": "Trinidadand Tobago", + "code": "TT" + }, + { + "name": "Tunisia", + "code": "TN" + }, + { + "name": "Turkey", + "code": "TR" + }, + { + "name": "Turkmenistan", + "code": "TM" + }, + { + "name": "Turksand Caicos Islands", + "code": "TC" + }, + { + "name": "Tuvalu", + "code": "TV" + }, + { + "name": "Uganda", + "code": "UG" + }, + { + "name": "Ukraine", + "code": "UA" + }, + { + "name": "UnitedArab Emirates", + "code": "AE" + }, + { + "name": "UnitedKingdom", + "code": "GB" + }, + { + "name": "United States", + "code": "US" + }, + { + "name": "United States Minor Outlying Islands", + "code": "UM" + }, + { + "name": "Uruguay", + "code": "UY" + }, + { + "name": "Uzbekistan", + "code": "UZ" + }, + { + "name": "Vanuatu", + "code": "VU" + }, + { + "name": "Venezuela", + "code": "VE" + }, + { + "name": "VietNam", + "code": "VN" + }, + { + "name": "VirginIslands British", + "code": "VG" + }, + { + "name": "VirginIslands U.S.", + "code": "VI" + }, + { + "name": "Wallisand Futuna", + "code": "WF" + }, + { + "name": "WesternSahara", + "code": "EH" + }, + { + "name": "Yemen", + "code": "YE" + }, + { + "name": "Zambia", + "code": "ZM" + }, + { + "name": "Zimbabwe", + "code": "ZW" + } +] diff --git a/src/components/ebay-filter-menu/examples/with-search.marko b/src/components/ebay-filter-menu/examples/with-search.marko new file mode 100644 index 000000000..085131f43 --- /dev/null +++ b/src/components/ebay-filter-menu/examples/with-search.marko @@ -0,0 +1,31 @@ +import countries from "./data.json"; +class { + declare state: { + searchTerm: string; + }; + + onCreate() { + this.state = { + searchTerm: "", + }; + } + + handleSearchChange(value: string) { + this.state.searchTerm = value.toLowerCase(); + } +} + + + + + <@item value=code> + ${name} + + + + diff --git a/src/components/ebay-filter-menu/filter-menu.stories.ts b/src/components/ebay-filter-menu/filter-menu.stories.ts index 3e0f06383..920532123 100644 --- a/src/components/ebay-filter-menu/filter-menu.stories.ts +++ b/src/components/ebay-filter-menu/filter-menu.stories.ts @@ -1,9 +1,14 @@ import { Story } from "@storybook/marko"; import { tagToString } from "../../common/storybook/storybook-code-source"; -import { addRenderBodies } from "../../common/storybook/utils"; +import { + addRenderBodies, + buildExtensionTemplate, +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import type { Input } from "./component"; +import WithSearchTemplate from "./examples/with-search.marko"; +import WithSearchCode from "./examples/with-search.marko?raw"; const Template: Story = (args) => ({ input: addRenderBodies(args), @@ -47,6 +52,15 @@ export default { control: { type: "text" }, description: "forms `method` attribute", }, + searchHeaderPlaceholderText: { + control: { type: "text" }, + description: + "enables the search header and populates placeholder text. `a11y-search-header-clear-text` is required if this is enabled.", + }, + a11ySearchHeaderClearText: { + control: { type: "text" }, + description: "a11y text for the search header clear button", + }, item: { table: { category: "@attribute tags", @@ -74,6 +88,12 @@ export default { control: { type: "boolean" }, description: "whether or not the item is disabled", }, + footer: { + name: "@footer", + table: { + category: "@attribute tags", + }, + }, onChange: { action: "on-change", description: "Triggered on item clicked", @@ -96,8 +116,7 @@ export default { }, }, }, - - footerClick: { + "onFooter-click": { action: "on-footer-click", description: "Triggered on footer clicked", table: { @@ -107,10 +126,10 @@ export default { }, }, }, - formSubmit: { + "onForm-submit": { action: "on-form-submit", description: - 'when using `variant="form"`, and form is submitted (emits current checked state)', + 'Triggered when using `variant="form"`, and form is submitted (emits current checked state)', table: { category: "Events", defaultValue: { @@ -118,10 +137,14 @@ export default { }, }, }, - footer: { - name: "@footer", + "onSearch-change": { + action: "on-search-change", + description: "Triggered when the search input updates", table: { - category: "@attribute tags", + category: "Events", + defaultValue: { + summary: "{ checked, originalEvent }", + }, }, }, }, @@ -158,3 +181,9 @@ Standard.parameters = { }, }, }; + +export const WithSearch = buildExtensionTemplate( + WithSearchTemplate, + WithSearchCode, + {}, +); diff --git a/src/components/ebay-filter-menu/index.marko b/src/components/ebay-filter-menu/index.marko index 287745433..c2b462087 100644 --- a/src/components/ebay-filter-menu/index.marko +++ b/src/components/ebay-filter-menu/index.marko @@ -14,6 +14,8 @@ $ const { type, ariaLabel, ariaLabelledby, + searchHeaderPlaceholderText, + a11ySearchHeaderClearText, ...htmlInput } = input; $ var isRadio = type === "radio"; @@ -22,10 +24,28 @@ $ var baseClass = classPrefix || "filter-menu"; $ var isForm = variant === "form"; + +
+ + + +
+ <${isForm && "form"} name=formName action=formAction @@ -35,6 +55,7 @@ $ var isForm = variant === "form";
Date: Tue, 19 Nov 2024 11:16:12 -0800 Subject: [PATCH 2/7] feat(filter-menu-button): search header --- .../ebay-filter-menu-button/component.ts | 3 + .../examples/data.json | 974 ++++++++++++++++++ .../examples/with-search.marko | 33 + .../filter-menu-button.stories.ts | 42 +- .../ebay-filter-menu-button/index.marko | 7 +- 5 files changed, 1052 insertions(+), 7 deletions(-) create mode 100644 src/components/ebay-filter-menu-button/examples/data.json create mode 100644 src/components/ebay-filter-menu-button/examples/with-search.marko diff --git a/src/components/ebay-filter-menu-button/component.ts b/src/components/ebay-filter-menu-button/component.ts index cabc4713e..405243858 100644 --- a/src/components/ebay-filter-menu-button/component.ts +++ b/src/components/ebay-filter-menu-button/component.ts @@ -34,11 +34,14 @@ interface FilterMenuButtonInput "form-method"?: string; disabled?: boolean; "a11y-text"?: AttrString; + "search-header-placeholder-text"?: string; + "a11y-search-header-clear-text"?: string; "on-expand"?: () => void; "on-change"?: (event: FilterMenuButtonEvent) => void; "on-collapse"?: (event: FilterMenuButtonEvent) => void; "on-footer-click"?: (event: FilterMenuButtonEvent) => void; "on-form-submit"?: (event: FilterMenuButtonEvent) => void; + "on-search-change"?: (value: string) => void; } export interface Input extends WithNormalizedProps {} diff --git a/src/components/ebay-filter-menu-button/examples/data.json b/src/components/ebay-filter-menu-button/examples/data.json new file mode 100644 index 000000000..6de354b55 --- /dev/null +++ b/src/components/ebay-filter-menu-button/examples/data.json @@ -0,0 +1,974 @@ +[ + { + "name": "Afghanistan", + "code": "AF" + }, + { + "name": "ÅlandIslands", + "code": "AX" + }, + { + "name": "Albania", + "code": "AL" + }, + { + "name": "Algeria", + "code": "DZ" + }, + { + "name": "AmericanSamoa", + "code": "AS" + }, + { + "name": "AndorrA", + "code": "AD" + }, + { + "name": "Angola", + "code": "AO" + }, + { + "name": "Anguilla", + "code": "AI" + }, + { + "name": "Antarctica", + "code": "AQ" + }, + { + "name": "Antiguaand Barbuda", + "code": "AG" + }, + { + "name": "Argentina", + "code": "AR" + }, + { + "name": "Armenia", + "code": "AM" + }, + { + "name": "Aruba", + "code": "AW" + }, + { + "name": "Australia", + "code": "AU" + }, + { + "name": "Austria", + "code": "AT" + }, + { + "name": "Azerbaijan", + "code": "AZ" + }, + { + "name": "Bahamas", + "code": "BS" + }, + { + "name": "Bahrain", + "code": "BH" + }, + { + "name": "Bangladesh", + "code": "BD" + }, + { + "name": "Barbados", + "code": "BB" + }, + { + "name": "Belarus", + "code": "BY" + }, + { + "name": "Belgium", + "code": "BE" + }, + { + "name": "Belize", + "code": "BZ" + }, + { + "name": "Benin", + "code": "BJ" + }, + { + "name": "Bermuda", + "code": "BM" + }, + { + "name": "Bhutan", + "code": "BT" + }, + { + "name": "Bolivia", + "code": "BO" + }, + { + "name": "Bosniaand Herzegovina", + "code": "BA" + }, + { + "name": "Botswana", + "code": "BW" + }, + { + "name": "BouvetIsland", + "code": "BV" + }, + { + "name": "Brazil", + "code": "BR" + }, + { + "name": "BritishIndian Ocean Territory", + "code": "IO" + }, + { + "name": "BruneiDarussalam", + "code": "BN" + }, + { + "name": "Bulgaria", + "code": "BG" + }, + { + "name": "BurkinaFaso", + "code": "BF" + }, + { + "name": "Burundi", + "code": "BI" + }, + { + "name": "Cambodia", + "code": "KH" + }, + { + "name": "Cameroon", + "code": "CM" + }, + { + "name": "Canada", + "code": "CA" + }, + { + "name": "CapeVerde", + "code": "CV" + }, + { + "name": "CaymanIslands", + "code": "KY" + }, + { + "name": "CentralAfrican Republic", + "code": "CF" + }, + { + "name": "Chad", + "code": "TD" + }, + { + "name": "Chile", + "code": "CL" + }, + { + "name": "China", + "code": "CN" + }, + { + "name": "ChristmasIsland", + "code": "CX" + }, + { + "name": "Cocos(Keeling) Islands", + "code": "CC" + }, + { + "name": "Colombia", + "code": "CO" + }, + { + "name": "Comoros", + "code": "KM" + }, + { + "name": "Congo", + "code": "CG" + }, + { + "name": "Congo The Democratic Republic of the", + "code": "CD" + }, + { + "name": "CookIslands", + "code": "CK" + }, + { + "name": "CostaRica", + "code": "CR" + }, + { + "name": "CoteD'Ivoire", + "code": "CI" + }, + { + "name": "Croatia", + "code": "HR" + }, + { + "name": "Cuba", + "code": "CU" + }, + { + "name": "Cyprus", + "code": "CY" + }, + { + "name": "CzechRepublic", + "code": "CZ" + }, + { + "name": "Denmark", + "code": "DK" + }, + { + "name": "Djibouti", + "code": "DJ" + }, + { + "name": "Dominica", + "code": "DM" + }, + { + "name": "DominicanRepublic", + "code": "DO" + }, + { + "name": "Ecuador", + "code": "EC" + }, + { + "name": "Egypt", + "code": "EG" + }, + { + "name": "ElSalvador", + "code": "SV" + }, + { + "name": "EquatorialGuinea", + "code": "GQ" + }, + { + "name": "Eritrea", + "code": "ER" + }, + { + "name": "Estonia", + "code": "EE" + }, + { + "name": "Ethiopia", + "code": "ET" + }, + { + "name": "FalklandIslands (Malvinas)", + "code": "FK" + }, + { + "name": "FaroeIslands", + "code": "FO" + }, + { + "name": "Fiji", + "code": "FJ" + }, + { + "name": "Finland", + "code": "FI" + }, + { + "name": "France", + "code": "FR" + }, + { + "name": "FrenchGuiana", + "code": "GF" + }, + { + "name": "FrenchPolynesia", + "code": "PF" + }, + { + "name": "FrenchSouthern Territories", + "code": "TF" + }, + { + "name": "Gabon", + "code": "GA" + }, + { + "name": "Gambia", + "code": "GM" + }, + { + "name": "Georgia", + "code": "GE" + }, + { + "name": "Germany", + "code": "DE" + }, + { + "name": "Ghana", + "code": "GH" + }, + { + "name": "Gibraltar", + "code": "GI" + }, + { + "name": "Greece", + "code": "GR" + }, + { + "name": "Greenland", + "code": "GL" + }, + { + "name": "Grenada", + "code": "GD" + }, + { + "name": "Guadeloupe", + "code": "GP" + }, + { + "name": "Guam", + "code": "GU" + }, + { + "name": "Guatemala", + "code": "GT" + }, + { + "name": "Guernsey", + "code": "GG" + }, + { + "name": "Guinea", + "code": "GN" + }, + { + "name": "GuineaBissau", + "code": "GW" + }, + { + "name": "Guyana", + "code": "GY" + }, + { + "name": "Haiti", + "code": "HT" + }, + { + "name": "HeardIsland and Mcdonald Islands", + "code": "HM" + }, + { + "name": "HolySee (Vatican City State)", + "code": "VA" + }, + { + "name": "Honduras", + "code": "HN" + }, + { + "name": "HongKong", + "code": "HK" + }, + { + "name": "Hungary", + "code": "HU" + }, + { + "name": "Iceland", + "code": "IS" + }, + { + "name": "India", + "code": "IN" + }, + { + "name": "Indonesia", + "code": "ID" + }, + { + "name": "Iran Islamic Republic Of", + "code": "IR" + }, + { + "name": "Iraq", + "code": "IQ" + }, + { + "name": "Ireland", + "code": "IE" + }, + { + "name": "Isleof Man", + "code": "IM" + }, + { + "name": "Israel", + "code": "IL" + }, + { + "name": "Italy", + "code": "IT" + }, + { + "name": "Jamaica", + "code": "JM" + }, + { + "name": "Japan", + "code": "JP" + }, + { + "name": "Jersey", + "code": "JE" + }, + { + "name": "Jordan", + "code": "JO" + }, + { + "name": "Kazakhstan", + "code": "KZ" + }, + { + "name": "Kenya", + "code": "KE" + }, + { + "name": "Kiribati", + "code": "KI" + }, + { + "name": "Korea Democratic People'S Republic of", + "code": "KP" + }, + { + "name": "Korea Republic of", + "code": "KR" + }, + { + "name": "Kuwait", + "code": "KW" + }, + { + "name": "Kyrgyzstan", + "code": "KG" + }, + { + "name": "LaoPeopleS Democratic Republic", + "code": "LA" + }, + { + "name": "Latvia", + "code": "LV" + }, + { + "name": "Lebanon", + "code": "LB" + }, + { + "name": "Lesotho", + "code": "LS" + }, + { + "name": "Liberia", + "code": "LR" + }, + { + "name": "LibyanArab Jamahiriya", + "code": "LY" + }, + { + "name": "Liechtenstein", + "code": "LI" + }, + { + "name": "Lithuania", + "code": "LT" + }, + { + "name": "Luxembourg", + "code": "LU" + }, + { + "name": "Macao", + "code": "MO" + }, + { + "name": "Macedonia The Former Yugoslav Republic of", + "code": "MK" + }, + { + "name": "Madagascar", + "code": "MG" + }, + { + "name": "Malawi", + "code": "MW" + }, + { + "name": "Malaysia", + "code": "MY" + }, + { + "name": "Maldives", + "code": "MV" + }, + { + "name": "Mali", + "code": "ML" + }, + { + "name": "Malta", + "code": "MT" + }, + { + "name": "MarshallIslands", + "code": "MH" + }, + { + "name": "Martinique", + "code": "MQ" + }, + { + "name": "Mauritania", + "code": "MR" + }, + { + "name": "Mauritius", + "code": "MU" + }, + { + "name": "Mayotte", + "code": "YT" + }, + { + "name": "Mexico", + "code": "MX" + }, + { + "name": "Micronesia Federated States of", + "code": "FM" + }, + { + "name": "Moldova Republic of", + "code": "MD" + }, + { + "name": "Monaco", + "code": "MC" + }, + { + "name": "Mongolia", + "code": "MN" + }, + { + "name": "Montserrat", + "code": "MS" + }, + { + "name": "Morocco", + "code": "MA" + }, + { + "name": "Mozambique", + "code": "MZ" + }, + { + "name": "Myanmar", + "code": "MM" + }, + { + "name": "Namibia", + "code": "NA" + }, + { + "name": "Nauru", + "code": "NR" + }, + { + "name": "Nepal", + "code": "NP" + }, + { + "name": "Netherlands", + "code": "NL" + }, + { + "name": "NetherlandsAntilles", + "code": "AN" + }, + { + "name": "NewCaledonia", + "code": "NC" + }, + { + "name": "NewZealand", + "code": "NZ" + }, + { + "name": "Nicaragua", + "code": "NI" + }, + { + "name": "Niger", + "code": "NE" + }, + { + "name": "Nigeria", + "code": "NG" + }, + { + "name": "Niue", + "code": "NU" + }, + { + "name": "NorfolkIsland", + "code": "NF" + }, + { + "name": "NorthernMariana Islands", + "code": "MP" + }, + { + "name": "Norway", + "code": "NO" + }, + { + "name": "Oman", + "code": "OM" + }, + { + "name": "Pakistan", + "code": "PK" + }, + { + "name": "Palau", + "code": "PW" + }, + { + "name": "PalestinianTerritory Occupied", + "code": "PS" + }, + { + "name": "Panama", + "code": "PA" + }, + { + "name": "PapuaNew Guinea", + "code": "PG" + }, + { + "name": "Paraguay", + "code": "PY" + }, + { + "name": "Peru", + "code": "PE" + }, + { + "name": "Philippines", + "code": "PH" + }, + { + "name": "Pitcairn", + "code": "PN" + }, + { + "name": "Poland", + "code": "PL" + }, + { + "name": "Portugal", + "code": "PT" + }, + { + "name": "PuertoRico", + "code": "PR" + }, + { + "name": "Qatar", + "code": "QA" + }, + { + "name": "Reunion", + "code": "RE" + }, + { + "name": "Romania", + "code": "RO" + }, + { + "name": "RussianFederation", + "code": "RU" + }, + { + "name": "RWANDA", + "code": "RW" + }, + { + "name": "SaintHelena", + "code": "SH" + }, + { + "name": "SaintKitts and Nevis", + "code": "KN" + }, + { + "name": "SaintLucia", + "code": "LC" + }, + { + "name": "SaintPierre and Miquelon", + "code": "PM" + }, + { + "name": "SaintVincent and the Grenadines", + "code": "VC" + }, + { + "name": "Samoa", + "code": "WS" + }, + { + "name": "SanMarino", + "code": "SM" + }, + { + "name": "SaoTome and Principe", + "code": "ST" + }, + { + "name": "SaudiArabia", + "code": "SA" + }, + { + "name": "Senegal", + "code": "SN" + }, + { + "name": "Serbiaand Montenegro", + "code": "CS" + }, + { + "name": "Seychelles", + "code": "SC" + }, + { + "name": "SierraLeone", + "code": "SL" + }, + { + "name": "Singapore", + "code": "SG" + }, + { + "name": "Slovakia", + "code": "SK" + }, + { + "name": "Slovenia", + "code": "SI" + }, + { + "name": "SolomonIslands", + "code": "SB" + }, + { + "name": "Somalia", + "code": "SO" + }, + { + "name": "SouthAfrica", + "code": "ZA" + }, + { + "name": "SouthGeorgia and the South Sandwich Islands", + "code": "GS" + }, + { + "name": "Spain", + "code": "ES" + }, + { + "name": "SriLanka", + "code": "LK" + }, + { + "name": "Sudan", + "code": "SD" + }, + { + "name": "Suriname", + "code": "SR" + }, + { + "name": "Svalbardand Jan Mayen", + "code": "SJ" + }, + { + "name": "Swaziland", + "code": "SZ" + }, + { + "name": "Sweden", + "code": "SE" + }, + { + "name": "Switzerland", + "code": "CH" + }, + { + "name": "SyrianArab Republic", + "code": "SY" + }, + { + "name": "Taiwan Province of China", + "code": "TW" + }, + { + "name": "Tajikistan", + "code": "TJ" + }, + { + "name": "Tanzania United Republic of", + "code": "TZ" + }, + { + "name": "Thailand", + "code": "TH" + }, + { + "name": "TimorLeste", + "code": "TL" + }, + { + "name": "Togo", + "code": "TG" + }, + { + "name": "Tokelau", + "code": "TK" + }, + { + "name": "Tonga", + "code": "TO" + }, + { + "name": "Trinidadand Tobago", + "code": "TT" + }, + { + "name": "Tunisia", + "code": "TN" + }, + { + "name": "Turkey", + "code": "TR" + }, + { + "name": "Turkmenistan", + "code": "TM" + }, + { + "name": "Turksand Caicos Islands", + "code": "TC" + }, + { + "name": "Tuvalu", + "code": "TV" + }, + { + "name": "Uganda", + "code": "UG" + }, + { + "name": "Ukraine", + "code": "UA" + }, + { + "name": "UnitedArab Emirates", + "code": "AE" + }, + { + "name": "UnitedKingdom", + "code": "GB" + }, + { + "name": "United States", + "code": "US" + }, + { + "name": "United States Minor Outlying Islands", + "code": "UM" + }, + { + "name": "Uruguay", + "code": "UY" + }, + { + "name": "Uzbekistan", + "code": "UZ" + }, + { + "name": "Vanuatu", + "code": "VU" + }, + { + "name": "Venezuela", + "code": "VE" + }, + { + "name": "VietNam", + "code": "VN" + }, + { + "name": "VirginIslands British", + "code": "VG" + }, + { + "name": "VirginIslands U.S.", + "code": "VI" + }, + { + "name": "Wallisand Futuna", + "code": "WF" + }, + { + "name": "WesternSahara", + "code": "EH" + }, + { + "name": "Yemen", + "code": "YE" + }, + { + "name": "Zambia", + "code": "ZM" + }, + { + "name": "Zimbabwe", + "code": "ZW" + } +] diff --git a/src/components/ebay-filter-menu-button/examples/with-search.marko b/src/components/ebay-filter-menu-button/examples/with-search.marko new file mode 100644 index 000000000..3a8358119 --- /dev/null +++ b/src/components/ebay-filter-menu-button/examples/with-search.marko @@ -0,0 +1,33 @@ +import countries from "./data.json"; + +class { + declare state: { + searchTerm: string; + }; + + onCreate() { + this.state = { + searchTerm: "", + }; + } + + handleSearchChange(value: string) { + this.state.searchTerm = value.toLowerCase(); + } +} + + + + + <@item value=code> + ${name} + + + + diff --git a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts index 0d5e8a5a5..0719bafa7 100644 --- a/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts +++ b/src/components/ebay-filter-menu-button/filter-menu-button.stories.ts @@ -1,9 +1,14 @@ import { Story } from "@storybook/marko"; import { tagToString } from "../../common/storybook/storybook-code-source"; -import { addRenderBodies } from "../../common/storybook/utils"; +import { + addRenderBodies, + buildExtensionTemplate, +} from "../../common/storybook/utils"; import Readme from "./README.md"; import Component from "./index.marko"; import type { Input } from "./component"; +import WithSearchTemplate from "./examples/with-search.marko"; +import WithSearchCode from "./examples/with-search.marko?raw"; const Template: Story = (args) => ({ input: addRenderBodies(args), @@ -63,6 +68,15 @@ export default { category: "@attribute tags", }, }, + searchHeaderPlaceholderText: { + control: { type: "text" }, + description: + "enables the search header and populates placeholder text. `a11y-search-header-clear-text` is required if this is enabled.", + }, + a11ySearchHeaderClearText: { + control: { type: "text" }, + description: "a11y text for the search header clear button", + }, formName: { control: { type: "text" }, description: "forms `name` attribute", @@ -92,6 +106,12 @@ export default { description: "the items value (returned in emitted events when checked)", }, + footer: { + name: "@footer", + table: { + category: "@attribute tags", + }, + }, onCollapse: { action: "on-collapse", description: "Triggered on menu collapse", @@ -122,7 +142,7 @@ export default { }, }, }, - footerClick: { + "onFooter-click": { action: "on-footer-click", description: "Triggered on footer clicked", table: { @@ -132,7 +152,7 @@ export default { }, }, }, - formSubmit: { + "onForm-submit": { action: "on-form-submit", description: 'when using `variant="form"`, and form is submitted (emits current checked state)', @@ -143,10 +163,14 @@ export default { }, }, }, - footer: { - name: "@footer", + "onSearch-change": { + action: "on-search-change", + description: "Triggered when the search input updates", table: { - category: "@attribute tags", + category: "Events", + defaultValue: { + summary: "{ checked, originalEvent }", + }, }, }, }, @@ -209,3 +233,9 @@ WithFooter.parameters = { }, }, }; + +export const WithSearch = buildExtensionTemplate( + WithSearchTemplate, + WithSearchCode, + {}, +); diff --git a/src/components/ebay-filter-menu-button/index.marko b/src/components/ebay-filter-menu-button/index.marko index 668f648cd..901d8b1be 100644 --- a/src/components/ebay-filter-menu-button/index.marko +++ b/src/components/ebay-filter-menu-button/index.marko @@ -13,6 +13,8 @@ $ const { formAction, formMethod, items, + searchHeaderPlaceholderText, + a11ySearchHeaderClearText, type: inputType, ...htmlInput } = input; @@ -46,10 +48,13 @@ $ const { formMethod=formMethod footerText=footerText a11yFooterText=a11yFooterText + searchHeaderPlaceholderText=searchHeaderPlaceholderText + a11ySearchHeaderClearText=a11ySearchHeaderClearText on-keydown("handleMenuKeydown") on-change("handleMenuChange") on-form-submit("handleFormSubmit") - on-footer-click("handleFooterButtonClick")> + on-footer-click("handleFooterButtonClick") + on-search-change("emit", "search-change")> <@item ...item checked=component.isChecked(i)/> From 3ba07a8a7c46ae81abfdf28285377c5956d78534 Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Tue, 19 Nov 2024 11:16:38 -0800 Subject: [PATCH 3/7] chore: add changeset --- .changeset/famous-peas-own.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-peas-own.md diff --git a/.changeset/famous-peas-own.md b/.changeset/famous-peas-own.md new file mode 100644 index 000000000..60e93e4da --- /dev/null +++ b/.changeset/famous-peas-own.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": minor +--- + +Search header for filter menu & filter menu button From 708167350906daf6737d779b41292df705f48aab Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Tue, 19 Nov 2024 11:20:12 -0800 Subject: [PATCH 4/7] chore: update tests --- .../test/__snapshots__/test.server.js.snap | 24 ++++++++++----- .../test/__snapshots__/test.server.js.snap | 30 ++++++++++++------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap b/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap index c99fb3229..c91cb3ecd 100644 --- a/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap +++ b/src/components/ebay-filter-menu-button/test/__snapshots__/test.server.js.snap @@ -49,9 +49,10 @@ exports[`filter-menu > passes through additional html attributes 1`] = ` - +