Chore tweak dynamicdatabanner UI

[adriangohjw]

Problem

New UI requirement to reduce screen estate on desktop and mobile

Solution

Breaking Changes

• Yes - this PR contains breaking changes
  • Details ...
• No - this PR is backwards compatible

Improvements:

• replace storybook-addon-mock with msw and msw-storybook-addon (consistent with Studio)
• update UI based on new requirements in Figma
• add loading state
• shifted the position in homepage stories to above the hero since that's the real world use case

Before & After Screenshots

(refer to storybook)

Tests

1. add the dynamic data banner component via raw json mode (since its not supported in studio)

{
      "type": "dynamicdatabanner",
      "apiEndpoint": "https://isomer-user-content.by.gov.sg/muis_prayers_timetable_2025.json",
      "title": "hijri_date",
      "data": [
        {
          "label": "Subuh",
          "key": "subuh"
        },
        {
          "label": "Syuruk",
          "key": "syuruk"
        },
        {
          "label": "Zohor",
          "key": "zohor"
        },
        {
          "label": "Asar",
          "key": "asar"
        },
        {
          "label": "Maghrib",
          "key": "maghrib"
        },
        {
          "label": "Ishak",
          "key": "isyak"
        }
      ],
      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      "label": "View all dates",
      "errorMessage": [
        {
          "text": "Couldn’t load prayer times. Try refreshing the page.",
          "type": "text",
        },
      ],
    },   

2. ensure its rendered to the new UI in Figma
   a. success state (based on the above)
   b. error state - replace URL inapiEndpoint to a random value
   c. loading state - (slightly harder to test since we are fetching it from CF with the same latency but you can try using dev console to throttle network)

New dev dependencies:

• dependency : msw and msw-storybook-addon

[datadog-opengovsg]

Datadog Report

Branch report: chore-tweak-dynamicdatabanner-ui
Commit report: 9d309da
Test service: isomer-studio

✅ 0 Failed, 257 Passed, 36 Skipped, 50.9s Total Time
🔻 Test Sessions change in coverage: 1 decreased (-0.27%)

🔻 Code Coverage Decreases vs Default Branch (1)

• vitest run --coverage 6.1% (-0.27%) - Details

[adriangohjw]

autogenerated from msw setup instructions