Add RoleChangelog Component

[Th1nkK1D]

View Figma

Suggested props

• changes: array of given mock data type below : represent changes data to be rendered as a list (required)
• selectedDate: Date | undefined (default is undefined): date to be highlighted with dark shade

Behavior

• Changes must be grouped by the date (Figma shows the same date, but it should be different and sort the newest at the top)
• The component shows everything in changes props, pagination is out of this component's scope.
• We don't have event name and change reason data yet. No need to do it.
• Click politician name link to /politicians/{politician.id}

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Check other components on the stories page first. Reuse components as much as possible.
• Don't forget to write Histoire's story.
  • Add variances with and without given selectedDate using Hst.Variant(see doc)
  • Add shared control for all the props (except orientation) (see doc)

Mock data

const mockChanges = [
  {
    date: new Date("2024-05-27"),
    type: "in",
    politician: {
      id: "มาริษ-เสงี่ยมพงษ์",
      firstname: "มาริษ",
      lastname: "เสงี่ยมพงษ์",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รัฐมนตรีว่าการกระทรวงต่างประเทศ"
  },
  {
    date: new Date("2024-05-27"),
    type: "out",
    politician: {
      id: "ปานปรีย์-พหิทธานุกร",
      firstname: "ปานปรีย์",
      lastname: "พหิทธานุกร",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รัฐมนตรีว่าการกระทรวงต่างประเทศ"
  },
  {
    date: new Date("2024-05-27"),
    type: "in",
    politician: {
      id: "สุริยะ-จึงรุ่งเรืองกิจ",
      firstname: "สุริยะ",
      lastname: "จึงรุ่งเรืองกิจ",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รองนายกรัฐมนตรี"
  },
  {
    date: new Date("2024-05-20"),
    type: "out",
    politician: {
      id: "ปานปรีย์-พหิทธานุกร",
      firstname: "ปานปรีย์",
      lastname: "พหิทธานุกร",
      avatar: "https://placehold.co/128x128",
      party: {
        name: "เพื่อไทย",
        logo: "https://placehold.co/64x64/white/blue?text=PT",
        color: "blue",
      },
    },
    role: "รองนายกรัฐมนตรี"
  },
];