Adding Tab/view switcher from the UiKit

[FFawzy]

After a discussion with Luke and Zoe on what they might need soon as a new interactive element, they decided to go with a view Switcher. https://uikit.commercetools.com/?path=/story/components-viewswitcher--viewswitcher-with-icons

@zbalek please Zoe, take a look at the Ui Kit design and see how it would look like in our docs site.

The functionality is available from the Ui Kit but we need the design from you to be able to start with this ticket.

Thanks

update June, 2024 the view switcher needs to be self aware (inside a module? Learning Path? TBD) meaning if a user chose the JS tab .. the rest of the course should show by default the JS tab

[lukpan]

Thanks for creating these tickets @FFawzy.

I just saw this info in the "when not to use" section on the UIkit page. Probably you already saw this, but thought I'd check just in case. ;)

Seems strange to me to not use it as a tab when it looks very much like a tab component!

[nkuehn]

If the requirement is about multi-language code samples, this is already implemented and available. The team is just not making relevant use of it and it's not yet syncing the chosen language across all code examples in a given user session.

[lukpan]

I was thinking more along the lines of something like this use case in Stripe's docs.

You can see that the user can choose between 'Pay up front', 'Free Trial' and 'Freemium' via the tab feature.

I would have used this in the Shipping Methods module if it were available. See here:

The cards option works, but would be a nicer experience for the user with tabs I believe.

[zbalek]

Notes on ViewSwitcher

• @lukpan There are two options - one with icons and the other w/o icons, I suppose we want to go for the one w/o icons. Can you please confirm?

Re "when not to use":

• I am pretty confident we can use the component as tabs as the guidelines in the UI KIT would be normally aimed at the MC use.
• The gov.uk design system (which is quite well researched with actual users) uses a similar component in a similar way like we intend to in the self-learning space: https://design-system.service.gov.uk/components/tabs/
  • @lukpan I'd perhaps recommend reading the part Decide between using tabs, accordion and details as we'll soon be implementing both components (just to make sure we leverage them the best we can :)

[lukpan]

Hi @zbalek! The one without icons yes, please. :) Thanks for the link to the gov.uk design system page. Very clear. I've bookmarked it and will keep this mind when using the component. Cheers!

[zbalek]

Hi @FFawzy - please see the design ticket here: https://github.com/commercetools/learning-tech/issues/459

[nkuehn]

Note from my conversation with @lukpan right now:

• we looked through the components in articulate rise360 to see what is good or not for what
• Tabs are not an ideal "activation" pattern because they naturally have one tab that is the default content. They are better for alternative paths. They shuold not be nested and should have an outline that makes it possible to see where the tab scope ends if the tabs themselves are not on screen any more.
• Flip cards are an interesting activation pattern if the content is small enough. They are easy on the eye because there is no impact on the page layout or scroll position. But to get started a set of collapsed collapsibles with relatively short content could do the job, too.

Luke will check with Michael and make his mind on priorities.

[lukpan]

Hi @zbalek and @FFawzy, After speaking with Nikolaus I will do a little further exploration work into how these components could be used in our learning pages. I'll use Articulate Rise and their 'blocks' to showcase a collapsible panel, a tab, a flipcard, and a matching panel in some learning use cases, and get back to you when this is done. Thanks! :)

[lukpan]

Hi @zbalek @FFawzy @nkuehn, Here are some prototypes I put together in Articulate Rise of some interactive components that we could consider introducing in self-learning. I explored a flippable cards, a sorting activity, collapsible panels and tabs using content that either already existed in Self-learning or that we might introduce in the developer learning path. I have also sent it to Michael for feedback, which I will include here when I hear back from him. Cheers! Luke

[zbalek]

Hi @lukpan - thank you for these!

From the perspective of reusabilty, we might be using the dynamic lists (Example 2: Explore lists in a more dynamic fashion) on our new self-learning homepage when it comes to browsing courses (carousel style w/o the card flipping).

Re collapsible panels and tabs - I have previously documented this in tickets but in summary, these components already exist in the UI KIT. I'm happy for these to be implemented in self-learning, plus I believe we could implement them relatively quickly as they are live in the ui kit.

[lukpan]

Hello @zbalek and @FFawzy,

Here is Michael's feedback on the interactive components I prototyped:

Ex 1: Flippable Cards:

In the DevEss.Path I would like to see before/after-scenarios for code snippets. Flippable Cards would work. I do not know how they look like when you have code and esp. a bit more code lines on them. But in general, yes, we should use. It is also the typical thing that really everyone expects in a self-learning module. We definitely need it, really it is what people expect.

Ex 2: Lists combined with flippable card

I do not like. You miss the overview and the “cockpit” aspect of the learning. When you are learning (testing yourself) on the second topic, you have already forgotten about the first topic. The example above (regions, proj, projects…) is much better.

Ex 3: Sorting Cards

As a refresher and for showing a different medium … ok. But use it very sparsely. People use this is such a game fashion way, it is really only gaming, no learning takes place.

Ex 4: Collapsable

Yes, to enhance reading, yes. A nice way to make text more digestable. For code, we are generally used to have it next to each other, not below. Do not use it for code examples. Use it to enhance the presentation of the text.

Summary

Use: Collapsable for improving the presentation of text Flippable cards for quick tests in the material, maybe for before/after presentation of code-snippets Use very sparsely sorting cards: a bit to show off that we are technical and to use a different medium from time to time Do not use lists with cards, nobody learns here End feedback

So, I think if we can wrap this up for your development tickets @FFawzy, we can go with flippable cards, tabs, and collapsible panels in that order of priority. Would be nice to have the sorting cards activity at some point too, but we can have that at a later time. Let's not worry about developing the carousel with flippable cards.

@FFawzy can flippable cards contain code snippets?

Thanks all, Luke

[FFawzy]

requirement from Roadmap discussions with examples

Content elements: Different paths or content variants per SDK / MC

the feature must be able to remember the user selection. for example ( if a user picks javascript language, then all code blocks using this component will show the javascript language by default)

[nkuehn]

@FFawzy (& @zbalek ) are you sure this is the right issue - or, should we more cleanly split the issues? The title and original text is not helpful because it starts with the implementation component and only then we start to analyze what we actually want to achieve.

The conversation here initiatally also covered reading path aternatives (e.g. lukes comment with the strip example ) but then centered mostly about "activation" patterns in one flow of content.

Our urgent need is about alternative paths, but it would be good if we're not closing the "activation pattern" request as done when alternative paths are done.

[FFawzy]

Ah .. thanks for pointing it out .. I now read again all the comments and understood it better. I'll create a better ticket for the "alternative paths" and use that one.

Thanks @nkuehn