feat: Create weather widget

src/__fixtures__/data/hourlyForecast.ts

@@ -4251,3 +4251,79 @@ export const mockHourlyForecast = {
     ],
   },
 }
+
+export const mockHourlyForecastFunc = (
+  shortForcast: string,
+  temperature: number,
+  isDaytime: boolean,
+  windSpeed: number
+) => {
+  const ids = [0, 1, 2, 3, 4]
+  const periods = ids.map((id) => {
+    return {
+      number: id,
+      name: '',
+      startTime: `2023-08-16T1${id}:00:00-05:00`,
+      endTime: `2023-08-16T1${id + 1}:00:00-05:00`,
+      isDaytime: isDaytime,
+      temperature: temperature + id,
+      temperatureUnit: 'F',
+      temperatureTrend: null,
+      probabilityOfPrecipitation: {
+        unitCode: 'wmoUnit:percent',
+        value: 0,
+      },
+      dewpoint: {
+        unitCode: 'wmoUnit:degC',
+        value: 15.555555555555555,
+      },
+      relativeHumidity: {
+        unitCode: 'wmoUnit:percent',
+        value: 61,
+      },
+      windSpeed: windSpeed,
+      windDirection: 'S',
+      icon: 'https://api.weather.gov/icons/land/day/skc,0?size=small',
+      shortForecast: shortForcast,
+      detailedForecast: '',
+    }
+  })
+  return {
+    '@context': [
+      'https://geojson.org/geojson-ld/geojson-context.jsonld',
+      {
+        '@version': '1.1',
+        wx: 'https://api.weather.gov/ontology#',
+        geo: 'http://www.opengis.net/ont/geosparql#',
+        unit: 'http://codes.wmo.int/common/unit/',
+        '@vocab': 'https://api.weather.gov/ontology#',
+      },
+    ],
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [-97.1089731, 39.766826299999998],
+          [-97.108526900000001, 39.744778799999999],
+          [-97.079846700000004, 39.745119500000001],
+          [-97.08028680000001, 39.767167000000001],
+          [-97.1089731, 39.766826299999998],
+        ],
+      ],
+    },
+    properties: {
+      updated: '2023-08-16T15:25:50+00:00',
+      units: 'us',
+      forecastGenerator: 'HourlyForecastGenerator',
+      generatedAt: '2023-08-16T15:44:41+00:00',
+      updateTime: '2023-08-16T15:25:50+00:00',
+      validTimes: '2023-08-16T09:00:00+00:00/P7DT16H',
+      elevation: {
+        unitCode: 'wmoUnit:m',
+        value: 441.95999999999998,
+      },
+      periods: periods,
+    },
+  }
+}

src/components/AddWidget/AddWidget.stories.tsx

@@ -14,6 +14,10 @@ const mockMySpaceContext: MySpaceContextType = {
   setDisableDragAndDrop: () => {
     return
   },
+  isAddingWidget: false,
+  setIsAddingWidget: () => {
+    return
+  },
   initializeMySpace: () => {
     return
   },
@@ -34,6 +38,7 @@ const mockMySpaceContext: MySpaceContextType = {
   },
   canAddCollections: true,
   canAddNews: true,
+  canAddWeather: true,
   canAddGuardianIdeal: true,
   canAddFeaturedShortcuts: true,
   addNewsWidget: () => {
@@ -48,15 +53,19 @@ const mockMySpaceContext: MySpaceContextType = {
   addNewCollection: () => {
     return
   },
-  handleOnDragEnd: () => {
-    return
-  },
   addNewWeatherWidget: () => {
     return
   },
   editWeatherWidget: () => {
     return
   },
+  handleOnDragEnd: () => {
+    return
+  },
+  temporaryWidget: '',
+  setTemporaryWidget: () => {
+    return
+  },
 }
 
 const MockContextProvider = ({
@@ -83,10 +92,7 @@ export default {
 } as Meta
 
 export const DefaultAddWidget = (argTypes: StorybookArgTypes) => (
-  <AddWidget
-    handleSelectCollection={argTypes.handleSelectCollection}
-    handleCreateCollection={argTypes.handleCreateCollection}
-  />
+  <AddWidget handleSelectCollection={argTypes.handleSelectCollection} />
 )
 
 export const AddCollectionDisabled = (argTypes: StorybookArgTypes) => (
@@ -95,10 +101,7 @@ export const AddCollectionDisabled = (argTypes: StorybookArgTypes) => (
       ...mockMySpaceContext,
       canAddCollections: false,
     }}>
-    <AddWidget
-      handleSelectCollection={argTypes.handleSelectCollection}
-      handleCreateCollection={argTypes.handleCreateCollection}
-    />
+    <AddWidget handleSelectCollection={argTypes.handleSelectCollection} />
   </MockContextProvider>
 )
 
@@ -108,9 +111,6 @@ export const NewsWidgetDisabled = (argTypes: StorybookArgTypes) => (
       ...mockMySpaceContext,
       canAddNews: false,
     }}>
-    <AddWidget
-      handleSelectCollection={argTypes.handleSelectCollection}
-      handleCreateCollection={argTypes.handleCreateCollection}
-    />
+    <AddWidget handleSelectCollection={argTypes.handleSelectCollection} />
   </MockContextProvider>
 )

src/components/AddWidget/AddWidget.test.tsx

@@ -13,10 +13,6 @@ import AddWidget from './AddWidget'
 describe('AddWidget component', () => {
   const testProps = {
     handleSelectCollection: jest.fn(),
-    handleCreateCollection: jest.fn(),
-    handleAddNews: jest.fn(),
-    handleAddGuardianIdeal: jest.fn(),
-    handleAddFeaturedShortcuts: jest.fn(),
   }
 
   test('renders an add widget menu', () => {
@@ -53,7 +49,7 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('handles the select collection button', async () => {
+  test('Select collection button', async () => {
     const user = userEvent.setup()
     const mockHandleSelect = jest.fn()
 
@@ -81,13 +77,13 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('handles the create collection button', async () => {
+  test('Create collection button', async () => {
     const user = userEvent.setup()
     const mockHandleCreate = jest.fn()
 
-    render(
-      <AddWidget {...testProps} handleCreateCollection={mockHandleCreate} />
-    )
+    renderWithMySpaceAndModalContext(<AddWidget {...testProps} />, {
+      addNewCollection: mockHandleCreate,
+    })
 
     const menuButton = screen.getByRole('button', { name: 'Add widget' })
     expect(menuButton).toBeInTheDocument()
@@ -107,18 +103,14 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('the add collection buttons are disabled if the user cannot add collections', async () => {
+  test('Add collection buttons are disabled if the user cannot add collections', async () => {
     const user = userEvent.setup()
     const mockHandleCreate = jest.fn()
     const mockHandleSelect = jest.fn()
 
     renderWithMySpaceAndModalContext(
-      <AddWidget
-        {...testProps}
-        handleCreateCollection={mockHandleCreate}
-        handleSelectCollection={mockHandleSelect}
-      />,
-      { canAddCollections: false }
+      <AddWidget {...testProps} handleSelectCollection={mockHandleSelect} />,
+      { canAddCollections: false, addNewCollection: mockHandleCreate }
     )
 
     const menuButton = screen.getByRole('button', { name: 'Add widget' })
@@ -146,7 +138,7 @@ describe('AddWidget component', () => {
     expect(mockHandleCreate).not.toHaveBeenCalled()
   })
 
-  test('handles the Add news widget button', async () => {
+  test('Add news widget button', async () => {
     const user = userEvent.setup()
     const mockAddNews = jest.fn()
 
@@ -170,7 +162,7 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('the Add news widget button is disabled if the user cannot add News', async () => {
+  test('Add news widget button is disabled if the user cannot add News', async () => {
     const user = userEvent.setup()
     const mockAddNews = jest.fn()
 
@@ -195,7 +187,72 @@ describe('AddWidget component', () => {
     expect(mockAddNews).not.toHaveBeenCalled()
   })
 
-  test('handles Add Guardian Ideal widget button', async () => {
+  test('Add weather widget', async () => {
+    mockFlags({
+      weatherWidget: true,
+    })
+
+    const user = userEvent.setup()
+    const mockSetTemporaryWidget = jest.fn()
+    const mockIsAddingWidget = jest.fn()
+
+    renderWithMySpaceAndModalContext(<AddWidget {...testProps} />, {
+      setTemporaryWidget: mockSetTemporaryWidget,
+      setIsAddingWidget: mockIsAddingWidget,
+    })
+
+    const menuButton = screen.getByRole('button', { name: 'Add widget' })
+    expect(menuButton).toBeInTheDocument()
+
+    await user.click(menuButton)
+
+    expect(
+      screen.getByRole('button', { name: 'Add weather widget' })
+    ).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Add weather widget' }))
+
+    expect(mockSetTemporaryWidget).toHaveBeenCalledWith('Weather')
+    expect(mockIsAddingWidget).toHaveBeenCalledWith(true)
+
+    expect(
+      screen.queryByRole('button', { name: 'Add weather widget' })
+    ).not.toBeInTheDocument()
+  })
+
+  test('Add weather widget button is disabled if the user cannot add Weather', async () => {
+    mockFlags({
+      weatherWidget: true,
+    })
+
+    const user = userEvent.setup()
+    const mockSetTemporaryWidget = jest.fn()
+    const mockIsAddingWidget = jest.fn()
+
+    renderWithMySpaceAndModalContext(<AddWidget {...testProps} />, {
+      canAddWeather: false,
+      setTemporaryWidget: mockSetTemporaryWidget,
+      setIsAddingWidget: mockIsAddingWidget,
+    })
+
+    const menuButton = screen.getByRole('button', { name: 'Add widget' })
+    expect(menuButton).toBeInTheDocument()
+
+    await user.click(menuButton)
+
+    expect(
+      screen.getByRole('button', { name: 'Add weather widget' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Add weather widget' })
+    ).toBeDisabled()
+
+    await user.click(screen.getByRole('button', { name: 'Add weather widget' }))
+
+    expect(mockSetTemporaryWidget).not.toHaveBeenCalled()
+    expect(mockIsAddingWidget).not.toHaveBeenCalled()
+  })
+
+  test('Add Guardian Ideal widget button', async () => {
     const user = userEvent.setup()
     const mockAddGuardianIdeal = jest.fn()
 
@@ -225,7 +282,7 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('the Add Guardian Ideal widget button is disabled if the user cannot add it', async () => {
+  test('Add Guardian Ideal widget button is disabled if the user cannot add it', async () => {
     const user = userEvent.setup()
     const mockAddGuardianIdeal = jest.fn()
 
@@ -252,7 +309,7 @@ describe('AddWidget component', () => {
     expect(mockAddGuardianIdeal).not.toHaveBeenCalled()
   })
 
-  test('handles Add Featured Shortcuts widget button', async () => {
+  test('Add Featured Shortcuts widget button', async () => {
     const user = userEvent.setup()
     const mockAddFeaturedShortcuts = jest.fn()
 
@@ -282,7 +339,7 @@ describe('AddWidget component', () => {
     ).not.toBeInTheDocument()
   })
 
-  test('the Add Featured Shortcuts widget button is disabled if the user cannot add it', async () => {
+  test('Add Featured Shortcuts widget button is disabled if the user cannot add it', async () => {
     const user = userEvent.setup()
     const mockAddFeaturedShortcuts = jest.fn()
     mockFlags({

src/components/AddWidget/AddWidget.tsx

@@ -9,10 +9,8 @@ import { useCloseWhenClickedOutside } from 'hooks/useCloseWhenClickedOutside'
 
 const AddWidget = ({
   handleSelectCollection,
-  handleCreateCollection,
 }: {
   handleSelectCollection: () => void
-  handleCreateCollection: () => void
 }) => {
   const dropdownEl = useRef<HTMLDivElement>(null)
   const [isDropdownOpen, setIsDropdownOpen] = useCloseWhenClickedOutside(
@@ -23,12 +21,16 @@ const AddWidget = ({
 
   const {
     canAddNews,
+    canAddWeather,
     canAddCollections,
     canAddGuardianIdeal,
     canAddFeaturedShortcuts,
+    addNewCollection,
     addNewsWidget,
     addGuardianIdeal,
     addFeaturedShortcuts,
+    setIsAddingWidget,
+    setTemporaryWidget,
   } = useMySpaceContext()
 
   const menuOnClick = () => {
@@ -64,7 +66,7 @@ const AddWidget = ({
           type="button"
           disabled={!canAddCollections}
           onClick={() => {
-            handleCreateCollection()
+            addNewCollection()
             setIsDropdownOpen(false)
           }}>
           Create new collection
@@ -87,6 +89,18 @@ const AddWidget = ({
           }}>
           Add news widget
         </Button>
+        {flags?.weatherWidget && (
+          <Button
+            disabled={!canAddWeather}
+            type="button"
+            onClick={() => {
+              setTemporaryWidget('Weather')
+              setIsAddingWidget(true)
+              setIsDropdownOpen(false)
+            }}>
+            Add weather widget
+          </Button>
+        )}
         {flags?.guardianIdealCarousel && (
           <Button
             disabled={!canAddGuardianIdeal}