[Meta] Convert 7.x-6.x Twig components to be Drupal 8-compatible

Problem/Motivation

The 8.x-7.x branch contains the .twig templates that came with Zen 7.x-6.x. But these .twig files were built to show example markup when building a KSS style guide. Most of them are not reusable because they have hard-coded example content.

And they were not meant to be run through the Twig PHP library in a Drupal environment as they don't have any variables we can use to add content to them.

Proposed resolution

We need to convert these 7.x-6.x components to be Drupal 8-compatible.

These files are located in the STARTERKIT/components folder.

For each component:

• Add new Twig variables.
• Add new Twig blocks if necessary.
• Find the *.html.twig that needs to use this component and add it to STARTERKIT/templates. The file might be in STARTERKIT/templates/_d7_templates_to_be_ported; otherwise in core/classy/templates.
• Add a library for each component's CSS and JS to the .libraries.yml file
• Determine which Classy library will need a libraries-override so we don't have duplicate CSS.

Note: the only Drupal 8-specific Twig extensions we should use in STARTERKIT/components is {{ library_attach() }}. All of the D8 Twig stuff should go in STARTERKIT/templates and pushed to components via variables or Twig blocks.

Completed tasks

These components are done already:

• base/* [edit: actually there might be a couple of these in D8 core]
• layouts/*
• navigation/skip-link/

Remaining tasks

These components need updating and need their own issues:

At the very least, these components need to be completed before 8.x-7.0-beta1 can be released:

• base/root/root #2732097: Convert base-root component to be Drupal 8-compatible
• base/forms/textarea #2730899: Convert base-textarea, resizable-textarea components to be Drupal 8-compatible
• components/footer/ #2725041: Convert footer component to be Drupal 8-compatible
• components/header/ #2829570: Convert header component to be Drupal 8-compatible
• components/messages/ #2719975: Convert messages component to be Drupal 8-compatible
• components/comment/ #2724973: Convert comment component to be Drupal 8-compatible
• navigation/breadcrumb/ #2724831: Convert breadcrumbs component to be Drupal 8-compatible
• navigation/more-link/ #2724869: Convert more-link component to be Drupal 8-compatible
• navigation/nav-menu/ #2830203: Convert nav-menu component to be Drupal 8-compatible
• navigation/navbar/ #2725007: Convert navbar component to be Drupal 8-compatible
• navigation/pager/ #2829916: Convert pager component to be Drupal 8-compatible
• navigation/tabs/ #2724953: Convert tabs component to be Drupal 8-compatible

These components need to be completed before 8.x-7.0-rc1 can be released:

• components/box/
• components/clearfix/
• components/divider/
• components/hidden/
• components/highlight-mark/ #2737203: Convert highlight-mark component to be Drupal 8-compatible
• components/inline-links/ #2737653: Convert inline-links component to be Drupal 8-compatible
• components/inline-sibling/
• components/print-none/
• components/responsive-video/
• components/visually-hidden/
• components/watermark/ #2737209: Convert watermark component to be Drupal 8-compatible
• components/wireframe/
• forms/autocomplete/
• forms/button/
• forms/collapsible-fieldset/ #2830323: Convert collapsible-fieldset component details component to be Drupal 8-compatible
• forms/form-item/
• forms/form-table/
• forms/progress-bar/
• forms/progress-throbber/
• forms/resizable-textarea/ #2730899: Convert base-textarea, resizable-textarea components to be Drupal 8-compatible
• forms/table-drag/ #2830330: Convert table-drag component to be Drupal 8-compatible

This is the meta issue. For each component, please:

1. create a separate issue using this handy link that auto-sets this issue as the parent of the new issue
2. and then update this issue's summary to add a link of format [#ISSUE-NUMBER].

Here's the issue summary you can use for the new issues:

Title: Convert [component name] component to be Drupal 8-compatible

<h3 id="summary-problem-motivation">Problem/Motivation</h3>
As described in [#2716773], we need to convert the [component name] component from Zen 7.x-6.x to be compatible with Drupal 8.

<h3 id="summary-proposed-resolution">Proposed resolution</h3>
The parent issue describes the <a href="https://www.drupal.org/node/2716773#summary-proposed-resolution">general solution</a> we need to use when converting a component.

Solutions specific to the [component name] component should be added here as we figure them out.

<h3 id="summary-remaining-tasks">Remaining tasks</h3>
(reviews needed, tests to be written or run, documentation to be written, etc.)