Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)
feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Carousel next/previous arrows * chore(LOY-422): add new material icon * refactor(LOY-422): restructure new and old upcoming stays * fix(LOY-422): handle less than 1 case * chore(LOY-422): remove uneeded id * chore(LOY-422): remove intl label for date edge case Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
@@ -19,327 +19,329 @@ const FONT_BASE_URL = `https://fonts.googleapis.com/css2?family=Material+Symbols
|
||||
|
||||
// Defines the subset of icons for the font
|
||||
const icons = [
|
||||
"accessibility",
|
||||
"accessible",
|
||||
"add_circle",
|
||||
"add",
|
||||
"air_purifier_gen",
|
||||
"air",
|
||||
"airline_seat_recline_normal",
|
||||
"airplane_ticket",
|
||||
"apartment",
|
||||
"apparel",
|
||||
"arrow_back_ios",
|
||||
"arrow_back",
|
||||
"arrow_forward_ios",
|
||||
"arrow_forward",
|
||||
"arrow_right",
|
||||
"arrow_upward",
|
||||
"assistant_navigation",
|
||||
"asterisk",
|
||||
"attractions",
|
||||
"award_star",
|
||||
"bakery_dining",
|
||||
"balcony",
|
||||
"bathroom",
|
||||
"bathtub",
|
||||
"beach_access",
|
||||
"bed",
|
||||
"bedroom_parent",
|
||||
"box",
|
||||
"brunch_dining",
|
||||
"business_center",
|
||||
"calendar_add_on",
|
||||
"calendar_clock",
|
||||
"calendar_month",
|
||||
"calendar_today",
|
||||
"call_quality",
|
||||
"call",
|
||||
"camera",
|
||||
"cancel",
|
||||
"chair",
|
||||
"charging_station",
|
||||
"check_box",
|
||||
"check_circle",
|
||||
"check",
|
||||
"checked_bag",
|
||||
"checkroom",
|
||||
"chevron_left",
|
||||
"chevron_right",
|
||||
"close",
|
||||
"coffee_maker",
|
||||
"coffee",
|
||||
"compare_arrows",
|
||||
"computer",
|
||||
"concierge",
|
||||
"confirmation_number",
|
||||
"connected_tv",
|
||||
"content_copy",
|
||||
"contract",
|
||||
"cool_to_dry",
|
||||
"countertops",
|
||||
"credit_card_heart",
|
||||
"credit_card",
|
||||
"curtains_closed",
|
||||
"curtains",
|
||||
"deck",
|
||||
"delete",
|
||||
"desk",
|
||||
"device_thermostat",
|
||||
"diamond",
|
||||
"dining",
|
||||
"directions_run",
|
||||
"directions_subway",
|
||||
"directions",
|
||||
"downhill_skiing",
|
||||
"download",
|
||||
"dresser",
|
||||
"edit_calendar",
|
||||
"edit_square",
|
||||
"edit",
|
||||
"electric_bike",
|
||||
"electric_car",
|
||||
"elevator",
|
||||
"emoji_transportation",
|
||||
"error_circle_rounded",
|
||||
"error",
|
||||
"exercise",
|
||||
"family_restroom",
|
||||
"fastfood",
|
||||
"favorite",
|
||||
"fax",
|
||||
"featured_seasonal_and_gifts",
|
||||
"festival",
|
||||
"filter_alt",
|
||||
"filter",
|
||||
"format_list_bulleted",
|
||||
"floor_lamp",
|
||||
"forest",
|
||||
"garage",
|
||||
"globe",
|
||||
"golf_course",
|
||||
"groups",
|
||||
"health_and_beauty",
|
||||
"heat",
|
||||
"hiking",
|
||||
"home",
|
||||
"hot_tub",
|
||||
"houseboat",
|
||||
"hvac",
|
||||
"id_card",
|
||||
"imagesmode",
|
||||
"info",
|
||||
"iron",
|
||||
"kayaking",
|
||||
"kettle",
|
||||
"keyboard_arrow_down",
|
||||
"keyboard_arrow_up",
|
||||
"king_bed",
|
||||
"kitchen",
|
||||
"landscape",
|
||||
"laundry",
|
||||
"link",
|
||||
"liquor",
|
||||
"live_tv",
|
||||
"local_bar",
|
||||
"local_cafe",
|
||||
"local_convenience_store",
|
||||
"local_drink",
|
||||
"local_laundry_service",
|
||||
"local_parking",
|
||||
"location_city",
|
||||
"location_on",
|
||||
"lock",
|
||||
"loyalty",
|
||||
"luggage",
|
||||
"mail",
|
||||
"map",
|
||||
"meeting_room",
|
||||
"microwave",
|
||||
"mode_fan",
|
||||
"museum",
|
||||
"music_cast",
|
||||
"music_note",
|
||||
"nature",
|
||||
"night_shelter",
|
||||
"nightlife",
|
||||
"open_in_new",
|
||||
"pan_zoom",
|
||||
"panorama",
|
||||
"pedal_bike",
|
||||
"person",
|
||||
"pets",
|
||||
"phone",
|
||||
"photo_camera",
|
||||
"pool",
|
||||
"print",
|
||||
"radio",
|
||||
"recommend",
|
||||
"redeem",
|
||||
"refresh",
|
||||
"remove",
|
||||
"restaurant",
|
||||
"room_service",
|
||||
"router",
|
||||
"sailing",
|
||||
"sauna",
|
||||
"scene",
|
||||
"search",
|
||||
"sell",
|
||||
"shopping_bag",
|
||||
"shower",
|
||||
"single_bed",
|
||||
"skateboarding",
|
||||
"smoke_free",
|
||||
"smoking_rooms",
|
||||
"spa",
|
||||
"sports_esports",
|
||||
"sports_golf",
|
||||
"sports_handball",
|
||||
"sports_tennis",
|
||||
"stairs",
|
||||
"star",
|
||||
"straighten",
|
||||
"styler",
|
||||
"support_agent",
|
||||
"swipe",
|
||||
"sync_saved_locally",
|
||||
"table_bar",
|
||||
"theater_comedy",
|
||||
"things_to_do",
|
||||
"train",
|
||||
"tram",
|
||||
"transit_ticket",
|
||||
"travel_luggage_and_bags",
|
||||
"travel",
|
||||
"trophy",
|
||||
"tv_guide",
|
||||
"tv_remote",
|
||||
"upload",
|
||||
"visibility_off",
|
||||
"visibility",
|
||||
"ward",
|
||||
"warning",
|
||||
"water_full",
|
||||
"wifi",
|
||||
"yard",
|
||||
"accessibility",
|
||||
"accessible",
|
||||
"add_circle",
|
||||
"add",
|
||||
"air_purifier_gen",
|
||||
"air",
|
||||
"airline_seat_recline_normal",
|
||||
"airplane_ticket",
|
||||
"apartment",
|
||||
"apparel",
|
||||
"arrow_back_ios",
|
||||
"arrow_back",
|
||||
"arrow_forward_ios",
|
||||
"arrow_forward",
|
||||
"arrow_right",
|
||||
"arrow_upward",
|
||||
"assistant_navigation",
|
||||
"asterisk",
|
||||
"attractions",
|
||||
"award_star",
|
||||
"bakery_dining",
|
||||
"balcony",
|
||||
"bathroom",
|
||||
"bathtub",
|
||||
"beach_access",
|
||||
"bed",
|
||||
"bedroom_parent",
|
||||
"box",
|
||||
"brunch_dining",
|
||||
"business_center",
|
||||
"calendar_add_on",
|
||||
"calendar_clock",
|
||||
"calendar_month",
|
||||
"calendar_today",
|
||||
"call_quality",
|
||||
"call",
|
||||
"camera",
|
||||
"cancel",
|
||||
"chair",
|
||||
"charging_station",
|
||||
"check_box",
|
||||
"check_circle",
|
||||
"check",
|
||||
"checked_bag",
|
||||
"checkroom",
|
||||
"chevron_left",
|
||||
"chevron_right",
|
||||
"close",
|
||||
"coffee_maker",
|
||||
"coffee",
|
||||
"compare_arrows",
|
||||
"computer",
|
||||
"concierge",
|
||||
"confirmation_number",
|
||||
"connected_tv",
|
||||
"content_copy",
|
||||
"contract",
|
||||
"cool_to_dry",
|
||||
"countertops",
|
||||
"credit_card_heart",
|
||||
"credit_card",
|
||||
"curtains_closed",
|
||||
"curtains",
|
||||
"deck",
|
||||
"delete",
|
||||
"desk",
|
||||
"device_thermostat",
|
||||
"diamond",
|
||||
"dining",
|
||||
"directions_run",
|
||||
"directions_subway",
|
||||
"directions",
|
||||
"downhill_skiing",
|
||||
"download",
|
||||
"dresser",
|
||||
"edit_calendar",
|
||||
"edit_square",
|
||||
"edit",
|
||||
"electric_bike",
|
||||
"electric_car",
|
||||
"elevator",
|
||||
"emoji_transportation",
|
||||
"error_circle_rounded",
|
||||
"error",
|
||||
"exercise",
|
||||
"family_restroom",
|
||||
"fastfood",
|
||||
"favorite",
|
||||
"fax",
|
||||
"featured_seasonal_and_gifts",
|
||||
"festival",
|
||||
"filter_alt",
|
||||
"filter",
|
||||
"format_list_bulleted",
|
||||
"floor_lamp",
|
||||
"forest",
|
||||
"garage",
|
||||
"globe",
|
||||
"golf_course",
|
||||
"groups",
|
||||
"health_and_beauty",
|
||||
"heat",
|
||||
"hiking",
|
||||
"home",
|
||||
"hot_tub",
|
||||
"houseboat",
|
||||
"hvac",
|
||||
"id_card",
|
||||
"imagesmode",
|
||||
"info",
|
||||
"iron",
|
||||
"kayaking",
|
||||
"kettle",
|
||||
"keyboard_arrow_down",
|
||||
"keyboard_arrow_right",
|
||||
"keyboard_arrow_up",
|
||||
"king_bed",
|
||||
"kitchen",
|
||||
"landscape",
|
||||
"laundry",
|
||||
"link",
|
||||
"liquor",
|
||||
"live_tv",
|
||||
"local_bar",
|
||||
"local_cafe",
|
||||
"local_convenience_store",
|
||||
"local_drink",
|
||||
"local_laundry_service",
|
||||
"local_parking",
|
||||
"location_city",
|
||||
"location_on",
|
||||
"lock",
|
||||
"loyalty",
|
||||
"luggage",
|
||||
"mail",
|
||||
"map",
|
||||
"meeting_room",
|
||||
"microwave",
|
||||
"mode_fan",
|
||||
"museum",
|
||||
"music_cast",
|
||||
"music_note",
|
||||
"nature",
|
||||
"night_shelter",
|
||||
"nightlife",
|
||||
"open_in_new",
|
||||
"pan_zoom",
|
||||
"panorama",
|
||||
"pedal_bike",
|
||||
"person",
|
||||
"pets",
|
||||
"phone",
|
||||
"photo_camera",
|
||||
"pool",
|
||||
"print",
|
||||
"radio",
|
||||
"recommend",
|
||||
"redeem",
|
||||
"refresh",
|
||||
"remove",
|
||||
"restaurant",
|
||||
"room_service",
|
||||
"router",
|
||||
"sailing",
|
||||
"sauna",
|
||||
"scene",
|
||||
"search",
|
||||
"sell",
|
||||
"shopping_bag",
|
||||
"shower",
|
||||
"single_bed",
|
||||
"skateboarding",
|
||||
"smoke_free",
|
||||
"smoking_rooms",
|
||||
"spa",
|
||||
"sports_esports",
|
||||
"sports_golf",
|
||||
"sports_handball",
|
||||
"sports_tennis",
|
||||
"stairs",
|
||||
"star",
|
||||
"straighten",
|
||||
"styler",
|
||||
"support_agent",
|
||||
"swipe",
|
||||
"sync_saved_locally",
|
||||
"table_bar",
|
||||
"theater_comedy",
|
||||
"things_to_do",
|
||||
"train",
|
||||
"tram",
|
||||
"transit_ticket",
|
||||
"travel_luggage_and_bags",
|
||||
"travel",
|
||||
"trophy",
|
||||
"tv_guide",
|
||||
"tv_remote",
|
||||
"upload",
|
||||
"visibility_off",
|
||||
"visibility",
|
||||
"ward",
|
||||
"warning",
|
||||
"water_full",
|
||||
"wifi",
|
||||
"yard",
|
||||
].sort();
|
||||
|
||||
function createHash(value: unknown) {
|
||||
const stringified = stringify(value);
|
||||
const hash = crypto.createHash("sha256");
|
||||
hash.update(stringified);
|
||||
return hash.digest("hex");
|
||||
const stringified = stringify(value);
|
||||
const hash = crypto.createHash("sha256");
|
||||
hash.update(stringified);
|
||||
return hash.digest("hex");
|
||||
}
|
||||
|
||||
const hash = createHash(icons).substring(0, 8);
|
||||
|
||||
async function fetchIconUrl(url: string) {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
|
||||
},
|
||||
});
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
Accept:
|
||||
"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
|
||||
"User-Agent":
|
||||
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch woff2 for ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch woff2 for ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
const text = await response.text();
|
||||
|
||||
const isWoff2 = /format\('woff2'\)/.test(text);
|
||||
if (!isWoff2) {
|
||||
console.error(`Unable to identify woff2 font in response`);
|
||||
process.exit(1);
|
||||
}
|
||||
const isWoff2 = /format\('woff2'\)/.test(text);
|
||||
if (!isWoff2) {
|
||||
console.error(`Unable to identify woff2 font in response`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const srcUrl = text.match(/src: url\(([^)]+)\)/);
|
||||
const srcUrl = text.match(/src: url\(([^)]+)\)/);
|
||||
|
||||
if (srcUrl && srcUrl[1]) {
|
||||
return srcUrl[1];
|
||||
}
|
||||
if (srcUrl && srcUrl[1]) {
|
||||
return srcUrl[1];
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
|
||||
async function download(url: string, destFolder: string) {
|
||||
const dest = resolve(join(destFolder, `/rounded-${hash}.woff2`));
|
||||
const dest = resolve(join(destFolder, `/rounded-${hash}.woff2`));
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
console.error(`Bad response from ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const fileStream = createWriteStream(dest);
|
||||
|
||||
// @ts-expect-error: type mismatch
|
||||
const readableNodeStream = Readable.fromWeb(response.body);
|
||||
|
||||
await pipeline(readableNodeStream, fileStream);
|
||||
} catch (error) {
|
||||
console.error(`Error downloading file from ${url}:`, error);
|
||||
process.exit(1);
|
||||
if (!response.ok) {
|
||||
console.error(`Unable to fetch ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
console.error(`Bad response from ${url}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const fileStream = createWriteStream(dest);
|
||||
|
||||
// @ts-expect-error: type mismatch
|
||||
const readableNodeStream = Readable.fromWeb(response.body);
|
||||
|
||||
await pipeline(readableNodeStream, fileStream);
|
||||
} catch (error) {
|
||||
console.error(`Error downloading file from ${url}:`, error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
async function cleanFontDirs() {
|
||||
await rm(FONT_DIR, { recursive: true, force: true });
|
||||
await mkdir(FONT_DIR, { recursive: true });
|
||||
await writeFile(
|
||||
join(FONT_DIR, ".auto-generated"),
|
||||
`Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.\nhash=${hash}\ncreated=${new Date().toISOString()}\n`,
|
||||
{ encoding: "utf-8" }
|
||||
);
|
||||
await rm(FONT_DIR, { recursive: true, force: true });
|
||||
await mkdir(FONT_DIR, { recursive: true });
|
||||
await writeFile(
|
||||
join(FONT_DIR, ".auto-generated"),
|
||||
`Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.\nhash=${hash}\ncreated=${new Date().toISOString()}\n`,
|
||||
{ encoding: "utf-8" },
|
||||
);
|
||||
}
|
||||
|
||||
async function updateFontCSS() {
|
||||
const file = resolve(__dirname, "../packages/design-system/lib/fonts.css");
|
||||
const file = resolve(__dirname, "../packages/design-system/lib/fonts.css");
|
||||
|
||||
const css = await readFile(file, {
|
||||
encoding: "utf-8",
|
||||
});
|
||||
const css = await readFile(file, {
|
||||
encoding: "utf-8",
|
||||
});
|
||||
|
||||
await writeFile(
|
||||
file,
|
||||
css.replace(
|
||||
/url\(\/_static\/shared\/fonts\/material-symbols\/rounded[^)]+\)/,
|
||||
`url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`
|
||||
),
|
||||
{
|
||||
encoding: "utf-8",
|
||||
}
|
||||
);
|
||||
await writeFile(
|
||||
file,
|
||||
css.replace(
|
||||
/url\(\/_static\/shared\/fonts\/material-symbols\/rounded[^)]+\)/,
|
||||
`url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`,
|
||||
),
|
||||
{
|
||||
encoding: "utf-8",
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const fontUrl = `${FONT_BASE_URL}&icon_names=${icons.join(",")}&display=block`;
|
||||
const fontUrl = `${FONT_BASE_URL}&icon_names=${icons.join(",")}&display=block`;
|
||||
|
||||
const iconUrl = await fetchIconUrl(fontUrl);
|
||||
const iconUrl = await fetchIconUrl(fontUrl);
|
||||
|
||||
if (iconUrl) {
|
||||
await cleanFontDirs();
|
||||
if (iconUrl) {
|
||||
await cleanFontDirs();
|
||||
|
||||
await download(iconUrl, FONT_DIR);
|
||||
await download(iconUrl, FONT_DIR);
|
||||
|
||||
await updateFontCSS();
|
||||
await updateFontCSS();
|
||||
|
||||
console.log("Successfully updated icons!");
|
||||
process.exit(0);
|
||||
} else {
|
||||
console.error(
|
||||
`Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`
|
||||
);
|
||||
}
|
||||
console.log("Successfully updated icons!");
|
||||
process.exit(0);
|
||||
} else {
|
||||
console.error(
|
||||
`Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
Reference in New Issue
Block a user