Card Stack ticks all by default

[MoshiMoshiMochi]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

resolves #2781

Overview of changes:

1. All tags are now ticked by default.
2. Added Select All [ ] feature that can be used to tick/untick all tags in one click
3. Added basic test cases
4. Added show-select-all flag as an optional cardstack (defaults to true) & updated the user guide documentation accordingly.

Anything you'd like to highlight/discuss:

1. Added a watcher on cardStackRef.tagMapping to ensure that once the <card> components register their tags, that the parent automatically adds them to selectedTags. Since selectedTags is now populated on load, all tags appear checked to begin with.
2. Added mandatory tag "Select All"
   2.1 It can be used to toggle all tags to clear/select all tags in
   2.2 It syncs with all the selected tags, meaning that unchecking a single tag automatically unchecks "Select All". This is to better signify that not all tags have been selected.
3. Repurposed showAllTags(showTag) to accept a boolean. It now serves as a master switch to loop through all child cards and set their disableTag state to either true (visible) or false (hidden).
4. Modified updateTag so that unchecking all cards now displays no other cards. Previously doing so would automatically display all cards again.

See Demo Example 1 (On the functionality of Select All)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance" disable=true>
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance" disabled=true>
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

See Demo Example 2 (On showing/hiding the select all tag)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable show-select-all="FaLsE">
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

UserGuide error? (Resolved)

Shouldn't disable be disabled? See demo example above for reference. Kindly let me know if I'm mistaken or if I should go ahead and fix this since its so small.

markbind/docs/userGuide/syntax/cardstacks.md

Lines 138 to 153 in ca4a65b

	****Options****
	`cardstack`:
	Name | Type | Default | Description
	--- | --- | --- | ---
	blocks | `String` | `2` | Number of `card` columns per row.<br> Supports: `1`, `2`, `3`, `4`, `6`
	searchable | `Boolean` | `false` | Whether the card stack is searchable.
	`card`:
	Name | Type | Default | Description
	--- | --- | --- | ---
	tag | `String` | `null` | Tags of each card component.<br>Each unique tag should be seperated by a `,`.<br> Tags are added to the search field.
	header | `String` | `null` | Header of each card component.<br> Supports the use of inline markdown elements.
	keywords | `String` | `null` | Keywords of each card component.<br>Each unique keyword should be seperated by a `,`.<br> Keywords are added to the search field.
	disable | `Boolean` | `false` | Disable card. <br> This removes visibility of the card and makes it unsearchable.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Update Card Stack to tick all tags by default

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[codecov]

Codecov Report

❌ Patch coverage is 7.14286% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 71.66%. Comparing base (cd1d15e) to head (b4adcb1).

Files with missing lines	Patch %	Lines
packages/core/src/html/MdAttributeRenderer.ts	9.09%	9 Missing and 1 partial ⚠️
packages/core/src/html/NodeProcessor.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2793      +/-   ##
==========================================
- Coverage   71.73%   71.66%   -0.08%     
==========================================
  Files         134      134              
  Lines        7303     7323      +20     
  Branches     1588     1618      +30     
==========================================
+ Hits         5239     5248       +9     
+ Misses       2018     1947      -71     
- Partials       46      128      +82     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gerteck]

Perhaps we can make the select-all button not always show up, but make it conditional where there is a flag (e.g. showSelectAll) etc that we can set to true to show this button, otherwise, don't show it.

Otherwise, we can do the opposite, by supporting a way to disable the select all button

[damithc]

@MoshiMoshiMochi If there are non-trivial UX changes, also provide screenshots of those changes.

[MoshiMoshiMochi]

Hi @gerteck & @damithc are these changes something similar to what you had in mind?

1. All tags are now ticked by default.
2. Added Select All [ ] feature that can be used to tick/untick all tags in one click
3. Added basic test cases
4. Added show-select-all flag as an optional cardstack (defaults to true) & updated the user guide documentation accordingly.

See Demo Example 1 (On the functionality of Select All)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance" disable=true>
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance" disabled=true>
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

See Demo Example 2 (On showing/hiding the select all tag)

e.g. serving this example

<frontmatter>
  layout: default.md
  title: Hello World
  pageNav: 1
  pageNavTitle: "Chapters of This Page"
</frontmatter>

<cardstack searchable show-select-all="FaLsE">
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

<cardstack searchable>
  <card header="**Winston Churchil**" tag="Success, Perseverance">
    Success is not final, failure is not fatal: it is the courage to continue that counts
  </card>
  <card header="**Albert Einstein**" tag="Success, Perseverance">
    In the middle of every difficulty lies opportunity
  </card>
  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
    Do what you can, with what you have, where you are
  </card>
  <card header="**Steve Jobs**" tag="Happiness, Mindset">
    Your time is limited, so don’t waste it living someone else’s life
  </card>
</cardstack>

Hello world

[damithc]

@MoshiMoshiMochi I think the Select all toggle should appear quite different from all the other tags. For example, without any background colour and text in bold.

[MoshiMoshiMochi]

@MoshiMoshiMochi I think the Select all toggle should appear quite different from all the other tags. For example, without any background colour and text in bold.

Noted will get to work on that!

[MoshiMoshiMochi]

Hi Prof @damithc! I've set the Select All toggle to be transparent with its text in bold. Additionally, I also decided to transform the text to uppercase fully to perhaps standout further from the others which aren't. Kindly see

I've also experimented using a linear gradient. This could possibly be another way of making it stand out further since all other toggle badges use a single color. I also tried experimenting with radial/conic gradients but I couldn't really come up with something that I felt blended in with the current design.

1. Linear Gradient sweeping across

2. Linear Gradient fading in and out and in

3. Rainbow linear gradient at 45deg (as a joke of course haha)

Do let me know if this is something you had in mind (, which option you prefer), and/or if there are other styling options/ideas you would like me to experiment/proceed with.

[damithc]

Do let me know if this is something you had in mind (, which option you prefer), and/or if there are other styling options/ideas you would like me to experiment/proceed with.

@MoshiMoshiMochi I like the first one but let's go without the border. I think no need for bold either. If possible, experiment putting the tick box on the left of the text for Select all, to see if that works better.