Tabs Component

[tomealter]

No description provided.

[tomealter]

Tabs are horizontally scrollable on mobile. I'm interested to know what people think about that, and am open to suggestions on how to make it better. There is also two display options for the tabs (horizontal and vertical). Both default to horizontal on mobile.

[coreylafferty]

Also make this work with new tabs recipe, if possible.

[coreylafferty]

@tomealter I've receiving the following error when compiling (using our ddev drupal setup):

[webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
/var/www/html/web/themes/gesso/dist/js/Tabs.es6.js
/var/www/html/web/themes/gesso/dist/js/tabs.es6.js

I suspect the fix is to rename /modules/Tabs.es6.js to something else, but wasn't sure what would be the best name, so pushing back to you.

[tomealter]

@coreylafferty could you try again and let me know if this solves it?

[coreylafferty]

This is compiling now. Thank you!

The only question remaining for me about this one is about class names. There are three base classes being used (c-tabs, c-tab-panel, c-tab-button), and each has its own twig file (tabs.twig, tab-panel.twig, tab-button.twig), but only one CSS file.

This is similar to the accordion component, where we have two base classes (c-accordion and c-accordion-item) and a twig file for each (accordion.twig and accordion-item.twig).

However, the button-group component also has two twig files (button-group.twig and button-group-item.twig) but only ONE base class (c-button-group and c-button-group__item in the item twig file).

I think we should be consistent here, and I lean towards the button-group example (even though that might means having twig files that don't have a base class as their main wrapper since the content of those twig files should always be wrapped by the parent twig file).

@tomealter @dcmouyard @kmonahan Thoughts?