replace hours component

package.json

@@ -20,6 +20,7 @@
     "@types/prompts": "^2.4.4",
     "@types/semver": "^7.5.0",
     "@yext/eslint-config": "^1.0.0",
+    "@yext/sites-react-components": "0.1.19-beta.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-require-extensions": "^0.1.3",

packages/pages-components/src/components/hours/hours.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 import { Hours } from "./index.js";
 import {
@@ -23,13 +22,13 @@ export const NormalHours: StoryFn<typeof Hours> = Template.bind({});
 NormalHours.args = {
   hours: HOURS,
   dayOfWeekNames: {
-    sunday: "Sun",
-    monday: "Mon",
-    tuesday: "Tues",
-    wednesday: "Wed",
-    thursday: "Thur",
-    friday: "Fri",
-    saturday: "Sat",
+    Sunday: "Sun",
+    Monday: "Mon",
+    Tuesday: "Tues",
+    Wednesday: "Wed",
+    Thursday: "Thur",
+    Friday: "Fri",
+    Saturday: "Sat",
   },
 };
 

packages/pages-components/src/components/hours/hours.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeAll } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { Hours } from "./index.js";
-import { HOURS, HOURS_WITH_REOPEN_DATE } from "./sampleData.js";
+import { HOURS } from "./sampleData.js";
 
 describe("Hours", () => {
   beforeAll(() => {
@@ -13,26 +13,20 @@ describe("Hours", () => {
   it("properly renders a full week", () => {
     render(<Hours hours={HOURS} />);
 
-    expect(screen.getByText("sunday")).toBeTruthy();
-    expect(screen.getByText("monday")).toBeTruthy();
-    expect(screen.getByText("tuesday")).toBeTruthy();
-    expect(screen.getByText("wednesday")).toBeTruthy();
-    expect(screen.getByText("thursday")).toBeTruthy();
-    expect(screen.getByText("friday")).toBeTruthy();
-    expect(screen.getByText("saturday")).toBeTruthy();
+    expect(screen.getByText("Sunday")).toBeTruthy();
+    expect(screen.getByText("Monday")).toBeTruthy();
+    expect(screen.getByText("Tuesday")).toBeTruthy();
+    expect(screen.getByText("Wednesday")).toBeTruthy();
+    expect(screen.getByText("Thursday")).toBeTruthy();
+    expect(screen.getByText("Friday")).toBeTruthy();
+    expect(screen.getByText("Saturday")).toBeTruthy();
   });
 
   it("properly renders with a custom day label", () => {
     const label = "ice cream sundae";
-    render(<Hours hours={HOURS} dayOfWeekNames={{ sunday: label }} />);
+    render(<Hours hours={HOURS} dayOfWeekNames={{ Sunday: label }} />);
 
     expect(screen.getByText(label)).toBeTruthy();
-    expect(screen.queryByText("sunday")).toBeFalsy();
-  });
-
-  it("properly renders with collapsed days", () => {
-    render(<Hours hours={HOURS_WITH_REOPEN_DATE} collapseDays={true} />);
-
-    expect(screen.getByText("sunday - saturday")).toBeTruthy();
+    expect(screen.queryByText("Sunday")).toBeFalsy();
   });
 });

packages/pages-components/src/components/hours/index.ts

@@ -1,3 +1,3 @@
-export { Hours } from "./hours.js";
+export { HoursTable as Hours } from "@yext/sites-react-components";
 export { HoursManipulator } from "./hoursManipulator.js";
 export * from "./types.js";

packages/pages-components/src/components/hours/types.ts

@@ -32,8 +32,6 @@ export interface HoursType extends WeekType {
   reopenDate?: string;
 }
 
-// HoursTable
-
 export type DayOfWeekNames = {
   [Property in keyof WeekType]?: string;
 };