docs: add design system metadata to component docs (#2257)

CONTRIBUTING.md

@@ -92,6 +92,34 @@ _Example_
 ./scripts/develop-module -m toast-dialog
 ```
 
+Add applicable metadata about the component to the `module_metadata` map in [docs/index.html](https://github.com/eBay/skin/blob/master/docs/index.html):
+
+```yaml
+your-module-name: # the Skin module name
+    ds-component: # module's relationship with the eBay Design System
+        group: # eBay Design System component group
+        name: # eBay Design System component name
+        version: # version of the eBay Design System component implemented in Skin
+    status: # status, e.g. "beta", "deprecated", "in-progress"
+    submodules: # array of Skin modules used in this module
+```
+
+If the Skin component is used for multiple Design System components, include those as an array in the `ds-component` field. For example:
+
+```yaml
+lightbox-dialog:
+    ds-component:
+        - name: modal
+          version: 2.1
+        - name: bottom-sheet
+          version: 2.1
+    submodules:
+        - button
+        - icon-button
+```
+
+When updating a Skin module to match an updated Design System design, make sure to update its version in its `ds-component` field.
+
 ## Versioning
 
 Skin follows [Semantic Versioning](http://semver.org):

docs/_includes/alert-dialog.html

@@ -1,5 +1,5 @@
 <div id="alert-dialog">
-    {% include section-header.html name="alert-dialog" version=page.versions.alert-dialog %}
+    {% include section-header.html name="alert-dialog" version=page.module_metadata.alert-dialog.ds-component.version %}
 
     <p>An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.</p>
     <p>The markup requirements are very strictly: a heading, description and button.</p>

docs/_includes/avatar.html

@@ -1,5 +1,5 @@
 <div id="avatar">
-    {% include section-header.html name="avatar" version=page.versions.avatar %}
+    {% include section-header.html name="avatar" version=page.module_metadata.avatar.ds-component.version %}
 
     <p>Avatars are graphical assets that represent users’ identities across products.</p>
     <p>Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.</p>

docs/_includes/badge.html

@@ -1,5 +1,5 @@
 <div id="badge">
-    {% include section-header.html name="badge" version=page.versions.badge %}
+    {% include section-header.html name="badge" version=page.module_metadata.badge.ds-component.version %}
 
     <p>A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.</p>
     <p>The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the <a href="#icon-button-badged">icon button</a> and <a href="#menu-badged">menu</a> modules.</p>

docs/_includes/breadcrumbs.html

@@ -1,5 +1,5 @@
 <div id="breadcrumbs">
-    {% include section-header.html name="breadcrumbs" version=page.versions.breadcrumbs %}
+    {% include section-header.html name="breadcrumbs" version=page.module_metadata.breadcrumbs.ds-component.version %}
 
     <p>Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.</p>
     <p>Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.</p>

docs/_includes/button.html

@@ -1,5 +1,5 @@
 <div id="button">
-    {% include section-header.html name="button" version=page.versions.button %}
+    {% include section-header.html name="button" version=page.module_metadata.button.ds-component.version %}
 
     <p>A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <span class="highlight">&lt;button&gt;</span> tag is <strong>required</strong>.</p>
     <p>A button may also be used to submit or reset a form. In this case use the <span class="highlight">&lt;button&gt;</span> tag with <span class="highlight">type=submit</span> or <span class="highlight">type=reset</span> respectively. Use of the <span class="highlight">&lt;input&gt;</span> tag is not currently supported.</p>

docs/_includes/calendar.html

@@ -1,5 +1,5 @@
 <div id="calendar">
-    {% include section-header.html name="calendar" version=page.versions.calendar %}
+    {% include section-header.html name="calendar" version=page.module_metadata.calendar.ds-component.version %}
     <p>The calendar module offers readonly and interactive calendar capabilities.</p>
     <p>Both types of calendar are structured as data tables; each column representing a day of the week.</p>
 

docs/_includes/carousel.html

@@ -1,5 +1,5 @@
 <div id="carousel">
-    {% include section-header.html name="carousel" version=page.versions.carousel %}
+    {% include section-header.html name="carousel" version=page.module_metadata.carousel.ds-component.version %}
 
     <p>Carousels display a list of similar items in a scrolling, horizontal viewport. Items may be entirely static (e.g. an image), entirely interactive (e.g. button) or contain a mix of static and interactive elements (e.g. a heading, image and link).</p>
     <p>Items may be ungrouped and scrolled in a <em>continuous</em> manner, or grouped and scrolled via a discrete number of <em>slides</em>.</p>

docs/_includes/checkbox.html

@@ -1,5 +1,5 @@
 <div id="checkbox">
-    {% include section-header.html name="checkbox" version=page.versions.checkbox %}
+    {% include section-header.html name="checkbox" version=page.module_metadata.checkbox.ds-component.version %}
 
     <p>A checkbox is a form control that allows multiple selections from a group of choices.</p>
     <p>The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.</p>

docs/_includes/chip.html

@@ -1,5 +1,5 @@
 <div id="chip">
-    {% include section-header.html name="chip" version=page.versions.chip %}
+    {% include section-header.html name="chip" version=page.module_metadata.chip.ds-component.version %}
 
     <p>A chip represents a descrete highlighted value.</p>
 

docs/_includes/chips-combobox.html

@@ -1,5 +1,5 @@
 <div id="chips-combobox">
-    {% include section-header.html name="chips-combobox" version=page.versions.chips-combobox %}
+    {% include section-header.html name="chips-combobox" version=page.module_metadata.chips-combobox.ds-component.version %}
 
     <p>Chips Combobox are creators and managers of <span class="highlight">chip</span> components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.</p>
 

docs/_includes/combobox.html

@@ -1,5 +1,5 @@
 <div id="combobox">
-    {% include section-header.html name="combobox" version=page.versions.combobox %}
+    {% include section-header.html name="combobox" version=page.module_metadata.combobox.ds-component.version %}
 
     <p>A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal, <em>or</em> via selection from the listbox options, <em>or</em> a combination of both.</p>
     <p><strong>TIP</strong>: A combobox can be further enhanced with <a href="https://ebay.github.io/mindpatterns/input/combobox/index.html">autocomplete behaviour</a>.</p>

docs/_includes/confirm-dialog.html

@@ -1,5 +1,5 @@
 <div id="confirm-dialog">
-    {% include section-header.html name="confirm-dialog" version=page.versions.confirm-dialog %}
+    {% include section-header.html name="confirm-dialog" version=page.module_metadata.confirm-dialog.ds-component.version %}
 
     <p>A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action.</p>
     <p>The markup requirements are very strictly: a heading, description and two buttons.</p>
@@ -31,7 +31,7 @@ <h2 id="confirm-dialog-title" class="confirm-dialog__title">Delete Address?</h2>
             <h2 id="confirm-dialog-title" class="confirm-dialog__title">Delete Address?</h2>
         </div>
         <div class="confirm-dialog__main">
-            <p id="confirm-dialog__description">You will permanently lose this address.</p>
+        <p id="confirm-dialog__description">You will permanently lose this address.</p>
         </div>
         <div class="confirm-dialog__footer">
             <button class="btn confirm-dialog__reject">Cancel</button>

docs/_includes/cta-button.html

@@ -1,5 +1,5 @@
 <div id="cta-button">
-    {% include section-header.html name="cta-button" version=page.versions.cta-button %}
+    {% include section-header.html name="cta-button" version=page.module_metadata.cta-button.ds-component.version %}
 
     <p>An action button takes users to another URL destination (i.e. it is always a hyperlink).</p>
 

docs/_includes/date-textbox.html

@@ -1,5 +1,5 @@
 <div id="date-textbox">
-  {% include section-header.html name="date-textbox" version=page.versions.date-textbox %}
+  {% include section-header.html name="date-textbox" version=page.module_metadata.date-textbox.ds-component.version %}
   <p>The date textbox offers a calendar based "date picker" as an alternative to manual text entry.</p>
 
   <h3 id="date-textbox-single">Single Select Date Textbox</h3>

docs/_includes/details.html

@@ -1,5 +1,5 @@
 <div id="details">
-    {% include section-header.html name="details" version=page.versions.details %}
+    {% include section-header.html name="details" version=page.module_metadata.details.ds-component.version %}
 
     <p>A details element is an interactive control used to expand and collapse content.</p>
     <p><strong>NOTE:</strong> The <a href="https://github.com/javan/details-element-polyfill">details-element-polyfill</a> is required to polyfill older browsers.</p>

docs/_includes/drawer-dialog.html

@@ -1,5 +1,5 @@
 <div id="drawer-dialog">
-    {% include section-header.html name="drawer-dialog" version=page.versions.drawer-dialog %}
+    {% include section-header.html name="drawer-dialog" version=page.module_metadata.drawer-dialog.ds-component.version %}
 
     <p>** DEPRECATED ** Use <span class="highlight">lightbox-dialog</span> instead </p>
     <p>The drawer is a modal dialog that opens and slides out from the bottom of the screen. It is intended for small, mobile screens.</p>

docs/_includes/eek.html

@@ -1,5 +1,5 @@
 <div id="eek">
-    {% include section-header.html name="eek" version=page.versions.eek %}
+    {% include section-header.html name="eek" version=page.module_metadata.eek.ds-component.version %}
     <p>
         EEKs have two parts, a range, and a rating.
         The following ranges are available:

docs/_includes/filter-button.html

@@ -1,5 +1,5 @@
 <div id="filter-button">
-    {% include section-header.html name="filter-button" version=page.versions.filter-button %}
+    {% include section-header.html name="filter-button" version=page.module_metadata.filter-button.ds-component.version %}
 
     <p>Use the <span class="highlight">filter-button</span> or <span class="highlight">filter-link</span> classes,
     to create a button or link styled as a filter button. Group together multiple filter buttons inside of a

docs/_includes/filter-menu-button.html

@@ -1,5 +1,5 @@
 <div id="filter-menu-button">
-    {% include section-header.html name="filter-menu-button" version=page.versions.filter-menu-button %}
+    {% include section-header.html name="filter-menu-button" version=page.module_metadata.filter-menu-button.ds-component.version %}
 
     <p>A filter menu button opens a menu of options by which to filter a result set.</p>
 

docs/_includes/filter-menu.html

@@ -1,5 +1,5 @@
 <div id="filter-menu">
-    {% include section-header.html name="filter-menu" version=page.versions.filter-menu %}
+    {% include section-header.html name="filter-menu" version=page.module_metadata.filter-menu.ds-component.version %}
 
     <p>A filter menu forms the basis of the <a href="#filter-menu-button">filter-menu-button</a> module; we provide it
         here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).</p>

docs/_includes/flag.html

@@ -1,5 +1,5 @@
 <div id="flag">
-  {% include section-header.html name="flag" version=page.versions.flag %}
+  {% include section-header.html name="flag" version=page.module_metadata.flag.ds-component.version %}
 
   <p>The flag module is a bundle that provides full access to all the country flags via the <span
       class="highlight">&lt;svg&gt;</span> and <span class="highlight">&lt;use&gt;</span> tags.</p>

docs/_includes/floating-label.html

@@ -1,5 +1,5 @@
 <div id="floating-label">
-    {% include section-header.html name="floating-label" version=page.versions.floating-label %}
+    {% include section-header.html name="floating-label" version=page.module_metadata.floating-label.ds-component.version %}
 
     <p>Floating labels appear to sit <em>inside</em> the textbox when it has no value or focus, and sit <em>above</em> the textbox otherwise.</p>
 

docs/_includes/fullscreen-dialog.html

@@ -1,5 +1,5 @@
 <div id="fullscreen-dialog">
-    {% include section-header.html name="fullscreen-dialog" version=page.versions.fullscreen-dialog %}
+    {% include section-header.html name="fullscreen-dialog" version=page.module_metadata.fullscreen-dialog.ds-component.version %}
 
     <p>A fullscreen dialog is a child window that takes up the entire viewport. Typically used on small screens.</p>
     <p>The dialog must remain in a <span class="highlight">hidden</span> state for all users and devices until opened.</p>

docs/_includes/icon-button.html

@@ -1,5 +1,5 @@
 <div id="icon-button">
-    {% include section-header.html name="icon-button" version=page.versions.icon-button %}
+    {% include section-header.html name="icon-button" version=page.module_metadata.icon-button.ds-component.version %}
 
     <p>Use the <span class="highlight">icon-btn</span> class (for buttons) or the <span class="highlight">icon-link</span> class (for links) and any of the available <a href="#icon">icons</a> for a borderless, actionable icon style.</p>
 

docs/_includes/icon.html

@@ -1,5 +1,5 @@
 <div id="icon">
-    {% include section-header.html name="icon" version=page.versions.icon %}
+    {% include section-header.html name="icon" version=page.module_metadata.icon.ds-component.version %}
 
     <p>The icon module is a bundle that provides full access to the entire range of eBay iconography via the <span class="highlight">&lt;svg&gt;</span> and <span class="highlight">&lt;use&gt;</span> tags.</p>
 

docs/_includes/infotip.html

@@ -1,5 +1,5 @@
 <div id="infotip">
-    {% include section-header.html name="infotip" version=page.versions.infotip %}
+    {% include section-header.html name="infotip" version=page.module_metadata.infotip.ds-component.version %}
 
     <p>An infotip is a button which can be clicked to display information about another element or area on the page.</p>
     <p>Toggle the <span class="highlight">aria-expanded</span> state of the button to expand or collapse the infotip.</p>

docs/_includes/inline-notice.html

@@ -1,5 +1,5 @@
 <div id="inline-notice">
-    {% include section-header.html name="inline-notice" version=page.versions.inline-notice %}
+    {% include section-header.html name="inline-notice" version=page.module_metadata.inline-notice.ds-component.version %}
 
     <p>The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.</p>
     <p>An inline-level notice provides tips, guidance and feedback on individual elements and form controls.</p>

docs/_includes/less.html

@@ -1,5 +1,5 @@
 <div id="less">
-    {% include section-header.html name="less" version=page.versions.less %}
+    {% include section-header.html name="less" version=page.module_metadata.less.ds-component.version %}
 
     <p>In comparison to past versions, Skin now offers a very minimal public <a href="https://lesscss.org/">LESS</a> API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system.</p>
     <p>Also, our Less module is <strong>not</strong> intended as a <em>general-purpose</em> library of utility mixins and variables such as <a href="https://lesshat.madebysource.com">LessHat</a>.</p>

docs/_includes/lightbox-dialog.html

@@ -1,5 +1,6 @@
 <div id="lightbox-dialog">
-    {% include section-header.html name="lightbox-dialog" version=page.versions.lightbox-dialog %}
+    {% capture version %}{{page.module_metadata.lightbox-dialog.ds-component[0].version}}{% endcapture %}
+    {% include section-header.html name="lightbox-dialog" version=version %}
 
     <p>A lightbox dialog is a modal window spawned by the main web page or application.</p>
     <p>The lightbox-dialog is fully responsive. On large screens it will be aligned to the center of the screen; on small screens at the bottom. Small screens display an additional "handle" button, used to expand the dialog height.</p>

docs/_includes/link.html

@@ -1,5 +1,5 @@
 <div id="link">
-    {% include section-header.html name="link" version=page.versions.link %}
+    {% include section-header.html name="link" version=page.module_metadata.link.ds-component.version %}
 
     <p>The link module itself does not provide any base styling of anchor tags, that styling instead comes from the <a href="#global">global</a> module.</p>
 

docs/_includes/listbox-button.html

@@ -1,5 +1,5 @@
 <div id="listbox-button">
-    {% include section-header.html name="listbox-button" version=page.versions.listbox-button %}
+    {% include section-header.html name="listbox-button" version=page.module_metadata.listbox-button.ds-component.version %}
 
     <p>A listbox button is intended for use as a custom implementation of the native HTML select element's
         <em>single</em>-select use case.</p>

docs/_includes/listbox.html

@@ -1,5 +1,5 @@
 <div id="listbox">
-    {% include section-header.html name="listbox" version=page.versions.listbox %}
+    {% include section-header.html name="listbox" version=page.module_metadata.listbox.ds-component.version %}
 
     <p>A listbox is intended for use as a custom, non-form based implementation of the native HTML select element.</p>
 

docs/_includes/menu-button.html

@@ -1,5 +1,5 @@
 <div id="menu-button">
-    {% include section-header.html name="menu-button" version=page.versions.menu-button %}
+    {% include section-header.html name="menu-button" version=page.module_metadata.menu-button.ds-component.version %}
 
     <p>A menu button follows the principal of <a href="https://en.wikipedia.org/wiki/Progressive_disclosure">progressive disclosure</a>, it keeps secondary commands hidden from view until needed.</p>
     <p>A menu is <strong>not</strong> a form control. If you wish to submit form data natively, without JavaScript, please consider <a href="#checkbox">checkbox</a>, <a href="#combobox">combobox</a>, <a href="#select">select</a>, or <a href="#radio">radio</a> instead.</p>

docs/_includes/menu.html

@@ -1,5 +1,5 @@
 <div id="menu">
-    {% include section-header.html name="menu" version=page.versions.menu %}
+    {% include section-header.html name="menu" version=page.module_metadata.menu.ds-component.version %}
 
     <p>A menu is <strong>not</strong> a form control. If you wish to submit form data natively, without JavaScript, please consider <a href="#checkbox">checkbox</a>, <a href="#combobox">combobox</a>, <a href="#select">select</a>, or <a href="#radio">radio</a> instead.</p>
     <p>Selecting a menu item command should update the page <strong>without</strong> a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the <a href="#menu-fake">fake menu</a>.</p>

docs/_includes/page-grid.html

@@ -1,5 +1,5 @@
 <div id="page-grid">
-    {% include section-header.html name="page-grid" version=page.versions.page-grid %}
+    {% include section-header.html name="page-grid" version=page.module_metadata.page-grid.ds-component.version %}
     <p>The page grid module establishes the rows, columns and areas onto which child elements can be placed. The page grid is fully responsive.</p>
     <p>Setting up a responsive page grid requires two key elements: a container element, and the grid element itself.</p>
     <p>The container element takes care of positioning the grid in relation to the page (typically center-justified) and adds outer margins.</p>

docs/_includes/page-notice.html

@@ -1,5 +1,5 @@
 <div id="page-notice">
-    {% include section-header.html name="page-notice" version=page.versions.page-notice %}
+    {% include section-header.html name="page-notice" version=page.module_metadata.page-notice.ds-component.version %}
 
     <p>A page notice appears prominently at the top of the page, for high priority use cases, conveying the next course of action for a task or flow.</p>
     <p>To aid discoverabilty for assistive technology, each page notice is a labelled landmark region with a level-2 heading.</p>