VotingOptionTag Component

[Th1nkK1D]

View Figma file

We have an old version of the component which was designed specifically for the politician's page. We want to refactor it and make it a shared component.

Starting point

• Create a new component with yarn gen:component
• Copy code from the old component src/components/politicians/VotingOptionTag.svelte.svelte
• Can develop the component in Histoire with yarn story:dev
• Some code can be improved
  • I feel like label assignment in every case of the switch is a bit redundant.
  • Does if (typeof voteOption === 'string') appropriated? or do we need that if else at all?
  • This is not a strong opinion, feel free to give your own idea, but don't change the component props or behavior.
• Remove the old component, and make sure that the new one is used instead.
• Don't forget to include all variations in the Histoire's story.

[Icyscools]

Hi, Can I work on this?

[Icyscools]

Thank you for assigning me to this task. I already reviewed the task and have a question.

Do we have to consider a string value which didn't include in the DefaultVoteOption enum? Currently, it'll not be showing any text if we put a string that wasn't included in it. For example,

<VotingOptionTag voteOption={'ชื่อแคนดิเดต'} />

I'm aware that we can put a string into CustomVoteOption as a label in order to work and this question may affect the props type, but this question is directly from my curiosity since I'm not sure if we have any use cases to let this tag accept just a string.

[Th1nkK1D]

Do we have to consider a string value which didn't include in the DefaultVoteOption enum? Currently, it'll not be showing any text if we put a string that wasn't included in it. For example,

<VotingOptionTag voteOption={'ชื่อแคนดิเดต'} />

I'm aware that we can put a string into CustomVoteOption as a label in order to work and this question may affect the props type, but this question is directly from my curiosity since I'm not sure if we have any use cases to let this tag accept just a string.

@Icyscools the current voteOption in the component is like this

export let voteOption: DefaultVoteOption | CustomVoteOption;

So it means that voteOption can be either DefaultVoteOption or CustomVoteOption.

There is no use case of giving only a string because then the comment won't know what color they need to show. That's why colorIntensity is required following the CustomVoteOption definition in models/voting like this

export interface CustomVoteOption { 
         label: string; 
         colorIntensity: number; // 0-1 
 } 

[Th1nkK1D]

Merged #16