feat(action-list): add <ActionList> (#358)

[kiaking]

• close Add <ActionList> #358

Add <ActionList>. I have made the type simpler than I described on the issue. Well, this is all we need at the moment.

interface Props {
  list?: ActionList
}

type ActionList = ActionListItem[]

interface ActionListItem {
  leadIcon?: IconifyIcon
  text: string
  link?: string
  onClick?(): void
}

Also, I have made few css var adjustment to match the latest color system on Figma. --c-mute is deprecated in favor of new --c-bg-mute-1 series.

---

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	9d5385d
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/6541f9c112228c00083b1536
😎 Deploy Preview	https://deploy-preview-364--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	9d5385d
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/6541f9c1507a9b00085d3ea4
😎 Deploy Preview	https://deploy-preview-364--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: 87 lines in your changes are missing coverage. Please review.

Comparison is base (c536e3d) 82.76% compared to head (9d5385d) 82.15%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #364      +/-   ##
==========================================
- Coverage   82.76%   82.15%   -0.61%     
==========================================
  Files         145      147       +2     
  Lines       11719    11806      +87     
  Branches      655      657       +2     
==========================================
  Hits         9699     9699              
- Misses       2020     2107      +87     

Files	Coverage Δ
lib/components/SActionList.vue	0.00% <0.00%> (ø)
lib/components/SActionListItem.vue	0.00% <0.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[brc-dd]

Probably should use markRaw(IconSomething) -- Doesn't seem to be affecting in this case, but mostly Vue will log warning.

[kiaking]

@brc-dd Ah, yeah. But that only happens when you set icon inside reactive object right...? But that could happen as soon as we pass the object inside template...?

[brc-dd]

Yeah. I'm not sure how reactivity exactly works with arrays passed as props. But if you make them computed or something (like if you want to change that list, add/remove some item), that most likely will throw warnings. I don't think any code change is needed though. Probably can just update the example in docs.

[kiaking]

Make sense 👍