From 371793fac517e4d37cfb45582ae03323d881b3c5 Mon Sep 17 00:00:00 2001
From: Cordelia <cordeliadillon@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:37:01 -0800
Subject: [PATCH] docs: add design system metadata to component docs (#2257)

---
 CONTRIBUTING.md                               |  28 ++
 ...con-zoom-In-16.svg => icon-zoom-in-16.svg} |   0
 docs/_includes/alert-dialog.html              |   2 +-
 docs/_includes/avatar.html                    |   2 +-
 docs/_includes/badge.html                     |   2 +-
 docs/_includes/breadcrumbs.html               |   2 +-
 docs/_includes/button.html                    |   2 +-
 docs/_includes/calendar.html                  |   2 +-
 docs/_includes/carousel.html                  |   2 +-
 docs/_includes/checkbox.html                  |   2 +-
 docs/_includes/chip.html                      |   2 +-
 docs/_includes/chips-combobox.html            |   2 +-
 docs/_includes/combobox.html                  |   2 +-
 docs/_includes/confirm-dialog.html            |   4 +-
 docs/_includes/cta-button.html                |   2 +-
 docs/_includes/date-textbox.html              |   2 +-
 docs/_includes/details.html                   |   2 +-
 docs/_includes/drawer-dialog.html             |   2 +-
 docs/_includes/eek.html                       |   2 +-
 docs/_includes/filter-button.html             |   2 +-
 docs/_includes/filter-menu-button.html        |   2 +-
 docs/_includes/filter-menu.html               |   2 +-
 docs/_includes/flag.html                      |   2 +-
 docs/_includes/floating-label.html            |   2 +-
 docs/_includes/fullscreen-dialog.html         |   2 +-
 docs/_includes/icon-button.html               |   2 +-
 docs/_includes/icon.html                      |   2 +-
 docs/_includes/infotip.html                   |   2 +-
 docs/_includes/inline-notice.html             |   2 +-
 docs/_includes/less.html                      |   2 +-
 docs/_includes/lightbox-dialog.html           |   3 +-
 docs/_includes/link.html                      |   2 +-
 docs/_includes/listbox-button.html            |   2 +-
 docs/_includes/listbox.html                   |   2 +-
 docs/_includes/menu-button.html               |   2 +-
 docs/_includes/menu.html                      |   2 +-
 docs/_includes/page-grid.html                 |   2 +-
 docs/_includes/page-notice.html               |   2 +-
 docs/_includes/pagination.html                |   2 +-
 docs/_includes/panel-dialog.html              |   2 +-
 docs/_includes/progress-bar.html              |   2 +-
 docs/_includes/progress-spinner.html          |   2 +-
 docs/_includes/progress-stepper.html          |   2 +-
 docs/_includes/radio.html                     |   2 +-
 docs/_includes/section-notice.html            |   2 +-
 docs/_includes/section-title.html             |   2 +-
 docs/_includes/segmented-buttons.html         |   2 +-
 docs/_includes/select.html                    |   2 +-
 docs/_includes/signal.html                    |   2 +-
 docs/_includes/skeleton.html                  |   2 +-
 docs/_includes/snackbar-dialog.html           |   2 +-
 docs/_includes/split-button.html              |   2 +-
 docs/_includes/star-rating-select.html        |   2 +-
 docs/_includes/star-rating.html               |   2 +-
 docs/_includes/switch.html                    |   2 +-
 docs/_includes/tabs.html                      |   2 +-
 docs/_includes/textbox.html                   |   2 +-
 docs/_includes/toast-dialog.html              |   2 +-
 docs/_includes/toggle-button-group.html       |   2 +-
 docs/_includes/toggle-button.html             |   2 +-
 docs/_includes/tooltip.html                   |   2 +-
 docs/_includes/tourtip.html                   |   2 +-
 docs/_includes/typography.html                |   2 +-
 docs/index.html                               | 395 +++++++++++++++---
 .../code-generators/doc-generator.js          |  32 +-
 65 files changed, 443 insertions(+), 137 deletions(-)
 rename dist/svg/icon/{icon-zoom-In-16.svg => icon-zoom-in-16.svg} (100%)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b3e82799f..5bce5f59a 100644
--- a/CONTRIBUTING.md
+++ b/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):
diff --git a/dist/svg/icon/icon-zoom-In-16.svg b/dist/svg/icon/icon-zoom-in-16.svg
similarity index 100%
rename from dist/svg/icon/icon-zoom-In-16.svg
rename to dist/svg/icon/icon-zoom-in-16.svg
diff --git a/docs/_includes/alert-dialog.html b/docs/_includes/alert-dialog.html
index ecd64af4f..e02e99bdc 100644
--- a/docs/_includes/alert-dialog.html
+++ b/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>
diff --git a/docs/_includes/avatar.html b/docs/_includes/avatar.html
index ad2f6a6c7..6a2268781 100644
--- a/docs/_includes/avatar.html
+++ b/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>
diff --git a/docs/_includes/badge.html b/docs/_includes/badge.html
index 0ef2719c2..aa4933a0e 100644
--- a/docs/_includes/badge.html
+++ b/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>
diff --git a/docs/_includes/breadcrumbs.html b/docs/_includes/breadcrumbs.html
index b67fc75b2..583db582f 100644
--- a/docs/_includes/breadcrumbs.html
+++ b/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>
diff --git a/docs/_includes/button.html b/docs/_includes/button.html
index f80535498..0f45a89c9 100644
--- a/docs/_includes/button.html
+++ b/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>
diff --git a/docs/_includes/calendar.html b/docs/_includes/calendar.html
index 0c8bd7e93..122fb5988 100644
--- a/docs/_includes/calendar.html
+++ b/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>
 
diff --git a/docs/_includes/carousel.html b/docs/_includes/carousel.html
index 07f728781..d3ea124f7 100644
--- a/docs/_includes/carousel.html
+++ b/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>
diff --git a/docs/_includes/checkbox.html b/docs/_includes/checkbox.html
index 14fdf0254..eb1ead135 100644
--- a/docs/_includes/checkbox.html
+++ b/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>
diff --git a/docs/_includes/chip.html b/docs/_includes/chip.html
index e6623a5a3..0dab3e1ff 100644
--- a/docs/_includes/chip.html
+++ b/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>
 
diff --git a/docs/_includes/chips-combobox.html b/docs/_includes/chips-combobox.html
index 3b06149c0..6b9d0571a 100644
--- a/docs/_includes/chips-combobox.html
+++ b/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>
 
diff --git a/docs/_includes/combobox.html b/docs/_includes/combobox.html
index 3e7216dde..8247a92e0 100644
--- a/docs/_includes/combobox.html
+++ b/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>
diff --git a/docs/_includes/confirm-dialog.html b/docs/_includes/confirm-dialog.html
index 47421918c..4c9426870 100644
--- a/docs/_includes/confirm-dialog.html
+++ b/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>
diff --git a/docs/_includes/cta-button.html b/docs/_includes/cta-button.html
index f3f4a9e50..3aa92e203 100644
--- a/docs/_includes/cta-button.html
+++ b/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>
 
diff --git a/docs/_includes/date-textbox.html b/docs/_includes/date-textbox.html
index deaf1d0f4..cb286ef57 100644
--- a/docs/_includes/date-textbox.html
+++ b/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>
diff --git a/docs/_includes/details.html b/docs/_includes/details.html
index 3c2530b03..09c651bc4 100644
--- a/docs/_includes/details.html
+++ b/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>
diff --git a/docs/_includes/drawer-dialog.html b/docs/_includes/drawer-dialog.html
index a2a52c93b..bfb241eb2 100644
--- a/docs/_includes/drawer-dialog.html
+++ b/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>
diff --git a/docs/_includes/eek.html b/docs/_includes/eek.html
index 22369e99c..41fd7f2a2 100644
--- a/docs/_includes/eek.html
+++ b/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:
diff --git a/docs/_includes/filter-button.html b/docs/_includes/filter-button.html
index 26d55036b..d7a870bfb 100644
--- a/docs/_includes/filter-button.html
+++ b/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
diff --git a/docs/_includes/filter-menu-button.html b/docs/_includes/filter-menu-button.html
index d225f3dd1..06a752567 100644
--- a/docs/_includes/filter-menu-button.html
+++ b/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>
 
diff --git a/docs/_includes/filter-menu.html b/docs/_includes/filter-menu.html
index 57c74d5d0..eb9096bce 100644
--- a/docs/_includes/filter-menu.html
+++ b/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>
diff --git a/docs/_includes/flag.html b/docs/_includes/flag.html
index 61512ff56..674900433 100644
--- a/docs/_includes/flag.html
+++ b/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>
diff --git a/docs/_includes/floating-label.html b/docs/_includes/floating-label.html
index 9c5838168..ab1937aa8 100644
--- a/docs/_includes/floating-label.html
+++ b/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>
 
diff --git a/docs/_includes/fullscreen-dialog.html b/docs/_includes/fullscreen-dialog.html
index 753307d04..5ada33635 100644
--- a/docs/_includes/fullscreen-dialog.html
+++ b/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>
diff --git a/docs/_includes/icon-button.html b/docs/_includes/icon-button.html
index 4d4219666..34ef178f2 100644
--- a/docs/_includes/icon-button.html
+++ b/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>
 
diff --git a/docs/_includes/icon.html b/docs/_includes/icon.html
index 7c55a5638..5bcb2b9ef 100644
--- a/docs/_includes/icon.html
+++ b/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>
     
diff --git a/docs/_includes/infotip.html b/docs/_includes/infotip.html
index bef0672d2..5ed5899a1 100644
--- a/docs/_includes/infotip.html
+++ b/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>
diff --git a/docs/_includes/inline-notice.html b/docs/_includes/inline-notice.html
index 163ec1572..d2c4a1bc9 100644
--- a/docs/_includes/inline-notice.html
+++ b/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>
diff --git a/docs/_includes/less.html b/docs/_includes/less.html
index b5f4d783e..d6885249d 100644
--- a/docs/_includes/less.html
+++ b/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>
diff --git a/docs/_includes/lightbox-dialog.html b/docs/_includes/lightbox-dialog.html
index 9f114dbb3..3f97b9fa0 100644
--- a/docs/_includes/lightbox-dialog.html
+++ b/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>
diff --git a/docs/_includes/link.html b/docs/_includes/link.html
index b981149ec..89abaf93c 100644
--- a/docs/_includes/link.html
+++ b/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>
 
diff --git a/docs/_includes/listbox-button.html b/docs/_includes/listbox-button.html
index 518bb4323..bb3f738e4 100644
--- a/docs/_includes/listbox-button.html
+++ b/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>
diff --git a/docs/_includes/listbox.html b/docs/_includes/listbox.html
index 0f5be5055..185f11404 100644
--- a/docs/_includes/listbox.html
+++ b/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>
 
diff --git a/docs/_includes/menu-button.html b/docs/_includes/menu-button.html
index aa072e722..c217a0aec 100644
--- a/docs/_includes/menu-button.html
+++ b/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>
diff --git a/docs/_includes/menu.html b/docs/_includes/menu.html
index 5c173616e..ca9245124 100644
--- a/docs/_includes/menu.html
+++ b/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>
diff --git a/docs/_includes/page-grid.html b/docs/_includes/page-grid.html
index 8d0b44e17..e3c9b47fc 100644
--- a/docs/_includes/page-grid.html
+++ b/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>
diff --git a/docs/_includes/page-notice.html b/docs/_includes/page-notice.html
index b9912f50c..de805e10c 100644
--- a/docs/_includes/page-notice.html
+++ b/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>
diff --git a/docs/_includes/pagination.html b/docs/_includes/pagination.html
index 11c4e0edb..e62066703 100644
--- a/docs/_includes/pagination.html
+++ b/docs/_includes/pagination.html
@@ -1,5 +1,5 @@
 <div id="pagination">
-    {% include section-header.html name="pagination" version=page.versions.pagination %}
+    {% include section-header.html name="pagination" version=page.module_metadata.pagination.ds-component.version %}
 
     <p>Pagination allows a user to navigate back and forth through a URL based dataset, or jump directly to any specific URL in that set.</p>
     <p>The pagination set has a maximum of seven items. An item can be a page number or an overflow element (see next section).</p>
diff --git a/docs/_includes/panel-dialog.html b/docs/_includes/panel-dialog.html
index 2a2d4898a..8c1de1507 100644
--- a/docs/_includes/panel-dialog.html
+++ b/docs/_includes/panel-dialog.html
@@ -1,5 +1,5 @@
 <div id="panel-dialog">
-    {% include section-header.html name="panel-dialog" version=page.versions.panel-dialog %}
+    {% include section-header.html name="panel-dialog" version=page.module_metadata.panel-dialog.ds-component.version %}
 
     <p>Panel dialogs are modal and require a close button. They fill the entire y-axis of the screen and a portion of the x-axis.</p>
     <p>The dialog must remain in a <span class="highlight">hidden</span> state for all users and devices until opened.</p>
diff --git a/docs/_includes/progress-bar.html b/docs/_includes/progress-bar.html
index d2b8dde37..0683fe2c5 100644
--- a/docs/_includes/progress-bar.html
+++ b/docs/_includes/progress-bar.html
@@ -1,5 +1,5 @@
 <div id="progress-bar">
-    {% include section-header.html name="progress-bar" version=page.versions.progress-bar %}
+    {% include section-header.html name="progress-bar" version=page.module_metadata.progress-bar.ds-component.version %}
 
     <p>The progress bar gives an immediate, real-time visualisation of the current task completion status.</p>
 
diff --git a/docs/_includes/progress-spinner.html b/docs/_includes/progress-spinner.html
index 52b64d098..1d7cde3c9 100644
--- a/docs/_includes/progress-spinner.html
+++ b/docs/_includes/progress-spinner.html
@@ -1,5 +1,5 @@
 <div id="progress-spinner">
-    {% include section-header.html name="progress-spinner" version=page.versions.progress-spinner %}
+    {% include section-header.html name="progress-spinner" version=page.module_metadata.progress-spinner.ds-component.version %}
 
     <p>A progress-spinner animation is used to convey a busy or loading state.</p>
     <p>A progress-spinner is considered a critical graphic, therefore an <span class="highlight">img</span> role and <span class="highlight">aria-label</span> property are required.</p>
diff --git a/docs/_includes/progress-stepper.html b/docs/_includes/progress-stepper.html
index 4a14fc3b0..cee235c33 100644
--- a/docs/_includes/progress-stepper.html
+++ b/docs/_includes/progress-stepper.html
@@ -1,5 +1,5 @@
 <div id="progress-stepper">
-    {% include section-header.html name="progress-stepper" version=page.versions.progress-stepper %}
+    {% include section-header.html name="progress-stepper" version=page.module_metadata.progress-stepper.ds-component.version %}
 
     <p>Steppers portray progress through a sequence of steps.</p>
 
diff --git a/docs/_includes/radio.html b/docs/_includes/radio.html
index daa1b4b3a..d0d954a76 100644
--- a/docs/_includes/radio.html
+++ b/docs/_includes/radio.html
@@ -1,5 +1,5 @@
 <div id="radio">
-    {% include section-header.html name="radio" version=page.versions.radio %}
+    {% include section-header.html name="radio" version=page.module_metadata.radio.ds-component.version %}
 
     <p>A radio button is a form control that allows a single selection from a group of choices.</p>
     <p>The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.</p>
diff --git a/docs/_includes/section-notice.html b/docs/_includes/section-notice.html
index 7c69b2c8a..c24ca0731 100644
--- a/docs/_includes/section-notice.html
+++ b/docs/_includes/section-notice.html
@@ -1,5 +1,5 @@
 <div id="section-notice">
-    {% include section-header.html name="section-notice" version=page.versions.section-notice %}
+    {% include section-header.html name="section-notice" version=page.module_metadata.section-notice.ds-component.version %}
 
     <p>A section notice conveys either system status and feedback to users about their actions and options or, for <em>educational</em> section notices, contextually educates users about programs, features and opportunities.</p>
     <p>To aid discoverabilty for assistive technology, each section notice is a labelled landmark region.</p>
diff --git a/docs/_includes/section-title.html b/docs/_includes/section-title.html
index 4e1cda84d..4bc936e89 100644
--- a/docs/_includes/section-title.html
+++ b/docs/_includes/section-title.html
@@ -1,5 +1,5 @@
 <div id="section-title">
-    {% include section-header.html name="section-title" version=page.versions.section-title %}
+    {% include section-header.html name="section-title" version=page.module_metadata.section-title.ds-component.version %}
 
     <p>Section titles function as identifiers for groups of elements.</p>
 
diff --git a/docs/_includes/segmented-buttons.html b/docs/_includes/segmented-buttons.html
index 27c6e22f4..6a84faeee 100644
--- a/docs/_includes/segmented-buttons.html
+++ b/docs/_includes/segmented-buttons.html
@@ -1,5 +1,5 @@
 <div id="segmented-buttons">
-    {% include section-header.html name="segmented-buttons" version=page.versions.segmentedButton %}
+    {% include section-header.html name="segmented-buttons" version=page.module_metadata.segmentedButton.ds-component.version %}
 
     <p>Segmented Buttons are non-form toggle buttons used in certain cases. For detailed requirements and when to use these over tabs, please visit the <a href="https://ebay.gitbook.io/mindpatterns/input/segmented-buttons">eBay MIND Pattern for Segmented Buttons</a>. </p>
     <p>The selected toggle button is toggled by <span class="highlight">aria-current="true"</span> attribute.</p>
diff --git a/docs/_includes/select.html b/docs/_includes/select.html
index b36174abc..e6ea67ed8 100644
--- a/docs/_includes/select.html
+++ b/docs/_includes/select.html
@@ -1,5 +1,5 @@
 <div id="select">
-    {% include section-header.html name="select" version=page.versions.select %}
+    {% include section-header.html name="select" version=page.module_metadata.select.ds-component.version %}
 
     <p>A select allows the user to select one item from a list of options. A select is exactly the same as a normal HTML select (because it is one), but Skin's version uses a wrapper to style it.</p>
     <p>The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a <a href="#menu">menu</a> maybe a better choice.</p>
diff --git a/docs/_includes/signal.html b/docs/_includes/signal.html
index ac042ac1b..c366d6433 100644
--- a/docs/_includes/signal.html
+++ b/docs/_includes/signal.html
@@ -1,5 +1,5 @@
 <div id="signal">
-    {% include section-header.html name="signal" version=page.versions.signal %}
+    {% include section-header.html name="signal" version=page.module_metadata.signal.ds-component.version %}
 
     <p>Signals are data-backed recommendations to help customers make more informed decisions.</p>
     <p>There are four signal types, each with its own corresponding modifier class: trustworthy, recent, time-sensitive &amp; neutral.</p>
diff --git a/docs/_includes/skeleton.html b/docs/_includes/skeleton.html
index 4185e131e..9a1dda804 100644
--- a/docs/_includes/skeleton.html
+++ b/docs/_includes/skeleton.html
@@ -1,5 +1,5 @@
 <div id="skeleton">
-  <!-- {% include section-header.html name="skeleton" version=page.versions.skeleton %} -->
+  <!-- {% include section-header.html name="skeleton" version=page.module_metadata.skeleton.ds-component.version %} -->
   <h2>@ebay/skin/skeleton <sup class="beta">BETA</sup></h2>
   <p>A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the <a href="#progress-spinner">progress spinner</a> in many situations.</p>
   <p>A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve.</p>
diff --git a/docs/_includes/snackbar-dialog.html b/docs/_includes/snackbar-dialog.html
index 931402490..9adfe9e9b 100644
--- a/docs/_includes/snackbar-dialog.html
+++ b/docs/_includes/snackbar-dialog.html
@@ -1,5 +1,5 @@
 <div id="snackbar-dialog">
-    {% include section-header.html name="snackbar-dialog" version=page.versions.snackbar-dialog %}
+    {% include section-header.html name="snackbar-dialog" version=page.module_metadata.snackbar-dialog.ds-component.version %}
 
     <p>A snackbar is a non-modal dialog that appears in response to a lightweight user action. It dissapears automatically after a minimum of 6 seconds.</p>
     <p>The display of the snackbar should be toggled using the <span class="highlight">hidden</span> property. Please refer to the <a href="#dialog-transitions">Dialog Transitions</a> section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the <span class="highlight">snackbar-dialog--transition</span> modifier class will opt into a transition that slides in on show, and fades out on hide.</p>
diff --git a/docs/_includes/split-button.html b/docs/_includes/split-button.html
index 195328b73..86434aefd 100644
--- a/docs/_includes/split-button.html
+++ b/docs/_includes/split-button.html
@@ -1,5 +1,5 @@
 <div id="split-button">
-    {% include section-header.html name="split-button" version=page.versions.split-button %}
+    {% include section-header.html name="split-button" version=page.module_metadata.split-button.ds-component.version %}
 
     <p>A split button is a button broken into two seperately actionable portions: a common action (a <a href="#button">button</a>) at the start, and supplemental actions (a <a href="#menu-button">menu button</a>) at the end.</p>
     <p>Split buttons are for actions only, and should not be used for site navigation.<p>
diff --git a/docs/_includes/star-rating-select.html b/docs/_includes/star-rating-select.html
index 8274d9170..99366b18e 100644
--- a/docs/_includes/star-rating-select.html
+++ b/docs/_includes/star-rating-select.html
@@ -1,5 +1,5 @@
 <div id="star-rating-select">
-    {% include section-header.html name="star-rating-select" version=page.versions.star-rating-select %}
+    {% include section-header.html name="star-rating-select" version=page.module_metadata.star-rating-select.ds-component.version %}
 
     <p>Star rating select allows users to interact with and set a star rating.</p>
 
diff --git a/docs/_includes/star-rating.html b/docs/_includes/star-rating.html
index bd221fe12..9ee77b81d 100644
--- a/docs/_includes/star-rating.html
+++ b/docs/_includes/star-rating.html
@@ -1,5 +1,5 @@
 <div id="star-rating">
-    {% include section-header.html name="star-rating" version=page.versions.star-rating %}
+    {% include section-header.html name="star-rating" version=page.module_metadata.star-rating.ds-component.version %}
 
     <p>This is a non-interactive, display-only star rating pattern. For an interactive user-selectable star rating selection pattern, please refer to <a href="#star-rating-select">Star Rating Select</a>.</p>
 
diff --git a/docs/_includes/switch.html b/docs/_includes/switch.html
index a80149018..1bf63f3d8 100644
--- a/docs/_includes/switch.html
+++ b/docs/_includes/switch.html
@@ -1,5 +1,5 @@
 <div id="switch">
-    {% include section-header.html name="switch" version=page.versions.switch %}
+    {% include section-header.html name="switch" version=page.module_metadata.switch.ds-component.version %}
 
     <p>A switch behaves a bit like a checkbox - it can be on or off (i.e checked or unchecked). The key difference is that a switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload) rather than storing form data to be sent to the server.</p>
     <p>Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options.</p>
diff --git a/docs/_includes/tabs.html b/docs/_includes/tabs.html
index d5277c2df..1b994d325 100644
--- a/docs/_includes/tabs.html
+++ b/docs/_includes/tabs.html
@@ -1,5 +1,5 @@
 <div id="tabs">
-    {% include section-header.html name="tabs" version=page.versions.tabs %}
+    {% include section-header.html name="tabs" version=page.module_metadata.tabs.ds-component.version %}
 
     <p>Tabs allow the user to switch between multiple <em>panels</em> of content. By decluttering the user-interface in
         this way, we say that tabs follow the principal of <a href="https://en.wikipedia.org/wiki/Progressive_disclosure">progressive disclosure</a>.</p>
diff --git a/docs/_includes/textbox.html b/docs/_includes/textbox.html
index 3043bac3a..edd49b082 100644
--- a/docs/_includes/textbox.html
+++ b/docs/_includes/textbox.html
@@ -1,5 +1,5 @@
 <div id="textbox">
-    {% include section-header.html name="textbox" version=page.versions.textbox %}
+    {% include section-header.html name="textbox" version=page.module_metadata.textbox.ds-component.version %}
 
     <p>A textbox (also known as an <em>input</em>) allows the user to enter data.</p>
     <p>The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button.</p>
diff --git a/docs/_includes/toast-dialog.html b/docs/_includes/toast-dialog.html
index 09606e74e..9a4db196a 100644
--- a/docs/_includes/toast-dialog.html
+++ b/docs/_includes/toast-dialog.html
@@ -1,5 +1,5 @@
 <div id="toast-dialog">
-    {% include section-header.html name="toast-dialog" version=page.versions.toast-dialog %}
+    {% include section-header.html name="toast-dialog" version=page.module_metadata.toast-dialog.ds-component.version %}
 
     <p>A toast is a non-modal dialog that appears in response to a system-level action.</p>
     <p>The display of the toast should be toggled using the <span class="highlight">hidden</span> property. Please refer to the <a href="#dialog-transitions">Dialog Transitions</a> section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the <span class="highlight">toast-dialog--transition</span> modifier class will opt into a transition that slides in on show, and fades out on hide.</p>
diff --git a/docs/_includes/toggle-button-group.html b/docs/_includes/toggle-button-group.html
index 531ba5f89..067d7660f 100644
--- a/docs/_includes/toggle-button-group.html
+++ b/docs/_includes/toggle-button-group.html
@@ -1,5 +1,5 @@
 <div id="toggle-button-group">
-    {% include section-header.html name="toggle-button-group" version=page.versions.toggle-button-group %}
+    {% include section-header.html name="toggle-button-group" version=page.module_metadata.toggle-button-group.ds-component.version %}
 
     <p>The Toggle Button Group is a group of single or multi-select toggle buttons providing a visual emphasis on the available selectable choices.</p>
 
diff --git a/docs/_includes/toggle-button.html b/docs/_includes/toggle-button.html
index 8f0534d77..90a3fe530 100644
--- a/docs/_includes/toggle-button.html
+++ b/docs/_includes/toggle-button.html
@@ -1,5 +1,5 @@
 <div id="toggle-button">
-    {% include section-header.html name="toggle-button" version=page.versions.toggle-button %}
+    {% include section-header.html name="toggle-button" version=page.module_metadata.toggle-button.ds-component.version %}
 
     <p>A toggle button is a special type of button that conveys a pressed or non-pressed state; this state is conveyed programmatically via the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed">aria-pressed</a> attribute. They can be used in single-select or multi-select groups.</p>
     
diff --git a/docs/_includes/tooltip.html b/docs/_includes/tooltip.html
index 7d963682e..c6b203ec2 100644
--- a/docs/_includes/tooltip.html
+++ b/docs/_includes/tooltip.html
@@ -1,5 +1,5 @@
 <div id="tooltip">
-    {% include section-header.html name="tooltip" version=page.versions.tooltip %}
+    {% include section-header.html name="tooltip" version=page.module_metadata.tooltip.ds-component.version %}
 
     <p>A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.</p>
     <p>The tooltip must be programmatically associated with the button by using the <span class="highlight">aria-describedby</span> property and <span class="highlight">tooltip</span> role.</p>
diff --git a/docs/_includes/tourtip.html b/docs/_includes/tourtip.html
index bba1b479f..42c1dd652 100644
--- a/docs/_includes/tourtip.html
+++ b/docs/_includes/tourtip.html
@@ -1,5 +1,5 @@
 <div id="tourtip">
-    {% include section-header.html name="tourtip" version=page.versions.tourtip %}
+    {% include section-header.html name="tourtip" version=page.module_metadata.tourtip.ds-component.version %}
 
     <p>A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.</p>
     <p>Toggle the <span class="highlight">tourtip--expanded</span> modifier to expand or collapse the tourtip.</p>
diff --git a/docs/_includes/typography.html b/docs/_includes/typography.html
index 256c738fc..a9b1f92df 100644
--- a/docs/_includes/typography.html
+++ b/docs/_includes/typography.html
@@ -1,5 +1,5 @@
 <div id="typography">
-    {% include section-header.html name="typography" version=page.versions.typography %}
+    {% include section-header.html name="typography" version=page.module_metadata.typography.ds-component.version %}
 
     <p>Static sites without access to the LESS preprocessor can leverage the Skin type ramp via the typography module.</p>
     <p>Giant text and large text are always bold. Other entries in the type ramp can be set to <span class="highlight">bold-text</span> or <span class="highlight">secondary-text</span> using the relevant class.</p>
diff --git a/docs/index.html b/docs/index.html
index ff8909399..531443850 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,69 +2,340 @@
 layout: default
 title: eBay Skin
 ds: 6
+module_metadata:
+  alert-dialog:
+    ds-component:
+      name: alert-dialog
+      version: 2.1
+    submodules:
+      - button
+  avatar:
+    ds-component:
+      name: avatar
+      version: 1.0
+  badge:
+    ds-component:
+      name: badge
+      version: 1.2
+  breadcrumbs:
+    ds-component:
+      name: breadcrumb
+      version: 1.2
+    submodules:
+      - icon
+  button:
+    ds-component:
+      group: button
+      name: button
+      version: 1.6
+  carousel:
+    ds-component:
+      name: carousel
+      version: 1.1
+    submodules:
+      - icon
+  calendar:
+    ds-component:
+      name: calendar
+      version: 1.0
+    submodules:
+      - icon-button
+  checkbox:
+    ds-component:
+      name: checkbox
+      version: 2.0
+  chip:
+    ds-component:
+      name: input-chip
+      version: 1.0.0
+  chips-combobox:
+    ds-component:
+      name: chip-combobox
+      version: 1.0.0
+    submodules:
+      - chip
+      - combobox
+  combobox:
+    ds-component:
+      name: dropdown
+      version: 2.2
+    submodules:
+      - icon
+      - listbox
+      - textbox
+  confirm-dialog:
+    ds-component:
+      name: alert-dialog
+      version: 2.1
+    submodules:
+      - button
+  cta-button:
+    ds-component:
+      group: button
+      name: button
+      version: 1.2
+  date-textbox:
+    ds-component:
+      name: date-picker
+      version: 1.0
+    submodules:
+      - calendar
+      - icon-button
+      - textbox
+  details:
+    ds-component:
+      name: expansion
+      version: 1.2
+    submodules:
+      - icon
+  drawer-dialog:
+    ds-component:
+      name: bottom-sheet
+      version: 2.0
+    status: deprecated
+    submodules:
+      - icon-button
+  eek:
+    ds-component:
+      name: eek
+      version: 1.1
+    submodules:
+      - icon
+  filter-button:
+    ds-component:
+      name: quick-filter
+      version: 2.0
+  filter-menu:
+    ds-component:
+      version: 2.0
+    submodules:
+      - icon
+  filter-menu-button:
+    ds-component:
+      name: quick-filter
+      version: 2.0
+    submodules:
+      - filter-menu
+      - icon
+  flag:
+    ds-component:
+      version: 1.0
+  floating-label:
+    ds-component:
+      name: form-field
+      version: 2.2
+  fullscreen-dialog:
+    ds-component:
+      name: modal
+      version: 2.1
+    submodules:
+      - button
+      - icon-button
+  icon:
+    ds-component:
+      name: icon
+      version: 1.3
+  icon-button:
+    ds-component:
+      group: button
+      name: icon-button
+      version: 1.6
+    submodules:
+      - icon
+  infotip:
+    ds-component:
+      name: infotip
+      version: 2.0
+    submodules:
+      - icon-button
+  inline-notice:
+    ds-component:
+      name: alert-notice
+      version: 2.2
+    submodules:
+      - icon
+  lightbox-dialog:
+    ds-component:
+      - name: modal
+        version: 2.1
+      - name: bottom-sheet
+        version: 2.1
+    submodules:
+      - button
+      - icon-button
+  less:
+    ds-component:
+      version: 1.0
+  link:
+    ds-component:
+      name: text-link
+      version: 2.0
+  listbox:
+    ds-component:
+      name: dropdown
+      version: 2.2
+    submodules:
+    - icon
+  listbox-button:
+    ds-component:
+      name: dropdown
+      version: 2.2
+    submodules:
+    - button
+    - icon
+  menu:
+    ds-component:
+      name: dropdown
+      version: 2.3
+    submodules:
+    - icon
+  menu-button:
+    ds-component:
+      name: dropdown
+      version: 2.3
+    submodules:
+    - button
+    - icon
+    - menu
+  page-grid:
+    ds-component:
+      version: 1.0.0
+  page-notice:
+    ds-component:
+      name: alert-notice
+      version: 3.0
+    submodules:
+      - icon
+  pagination:
+    ds-component:
+      name: pagination
+      version: 2.0
+    submodules:
+      - icon-link
+  panel-dialog:
+    ds-component:
+      name: panel
+      version: 2.0
+    submodules:
+      - button
+      - icon-button
+  progress-bar:
+    ds-component:
+      name: progress-bar
+      version: 3.1
+  progress-spinner:
+    ds-component:
+      name: progress-spinner
+      version: 3.1
+    submodules:
+      - icon
+  progress-stepper:
+    ds-component:
+      name: progress-stepper
+      version: 4.0
+    submodules:
+      - icon
+  radio:
+    ds-component:
+      name: radio-button
+      version: 2.0
+  section-notice:
+    ds-component:
+      name: alert-notice
+      version: 3.0
+    submodules:
+      - icon
+  section-title:
+    ds-component:
+      version: 4.0
+  segmented-buttons:
+    ds-component:
+      name: segmented-button
+      version: 1.0
+  select:
+    ds-component:
+      name: dropdown
+      version: 2.2
+    submodules:
+      - icon
+  signal:
+    ds-component:
+      name: signal
+      version: 1.0
+  skeleton:
+    ds-component:
+      name: skeleton
+      status: beta
+      version: 1.0
+  snackbar-dialog:
+    ds-component:
+      name: snackbar
+      version: 2.0
+    submodules:
+      - button
+  split-button:
+    ds-component:
+      group: button
+      name: split-button
+      version: 1.6
+    submodules:
+      - button
+      - menu-button
+  star-rating:
+    ds-component:
+      name: review-rating
+      version: 1.0
+  star-rating-select:
+    ds-component:
+      name: review-input
+      version: 1.0
+  switch:
+    ds-component:
+      name: switch
+      version: 2.1
+  tabs:
+    ds-component:
+      name: tabs
+      version: 2.1
+  textbox:
+    ds-component:
+      name: form-field
+      version: 2.2
+    submodules:
+      - icon-button
+  toast-dialog:
+    ds-component:
+      version: 2.2
+    submodules:
+      - button
+      - icon-button
+  toggle-button:
+    ds-component:
+      name: toggle-button
+      version: 1.0
+    submodules:
+      - icon
+  toggle-button-group:
+    ds-component:
+      name: toggle-button-group
+      version: 1.0
+    submodules:
+      - toggle-button
+  tooltip:
+    ds-component:
+      name: tooltip
+      version: 2.0
+    submodules:
+      - icon-button
+  tourtip:
+    ds-component:
+      name: tourtip
+      version: 2.0
+    submodules:
+      - icon-button
+  typography:
+      version: 1.1
 static_dir: static
-versions:
-    alert-dialog: 2.1
-    avatar: 1.0
-    badge: 1.2
-    breadcrumbs: 1.2
-    button: 1.6
-    carousel: 1.1
-    calendar: 1.0
-    checkbox: 2.0
-    chip: 1.0.0
-    chips-combobox: 1.0.0
-    combobox: 2.2
-    confirm-dialog: 2.1
-    cta-button: 1.2
-    date-textbox: 1.0
-    details: 1.2
-    drawer-dialog: 2.0
-    eek: 1.1
-    filter-button: 2.0
-    filter-menu: 2.0
-    filter-menu-button: 2.0
-    flag: 1.0
-    floating-label: 2.2
-    fullscreen-dialog: 2.1
-    icon: 1.3
-    icon-button: 1.6
-    infotip: 2.0
-    inline-notice: 2.2
-    lightbox-dialog: 2.1
-    less: 1.0
-    link: 2.0
-    listbox: 2.2
-    listbox-button: 2.2
-    menu: 2.3
-    menu-button: 2.3
-    page-grid: 1.0.0
-    page-notice: 3.0
-    pagination: 2.0
-    panel-dialog: 2.0
-    progress-bar: 3.1
-    progress-spinner: 3.1
-    progress-stepper: 4.0
-    radio: 2.0
-    section-notice: 3.0
-    section-title: 4.0
-    segmented-buttons: 1.0
-    select: 2.2
-    signal: 1.0
-    skeleton: 1.0
-    snackbar-dialog: 2.0
-    split-button: 1.6
-    star-rating: 1.0
-    star-rating-select: 1.0
-    switch: 2.1
-    tabs: 2.1
-    textbox: 2.2
-    toast-dialog: 2.2
-    toggle-button: 1.0
-    toggle-button-group: 1.0
-    tooltip: 2.0
-    tourtip: 2.0
-    typography: 1.1
 ---
 
 {% include main.html %}
\ No newline at end of file
diff --git a/scripts/develop-module_proper/code-generators/doc-generator.js b/scripts/develop-module_proper/code-generators/doc-generator.js
index 57e79e20a..406a6d269 100644
--- a/scripts/develop-module_proper/code-generators/doc-generator.js
+++ b/scripts/develop-module_proper/code-generators/doc-generator.js
@@ -4,14 +4,12 @@ const log = require("../../log");
 const writeLine = require("../util/line-writer");
 const BaseGenerator = require("./base-generator");
 
-const DS_VERSION = "DS6.5.v1.01";
-
 const getModuleDocContent = (
     moduleName,
-    moduleId
+    moduleId,
 ) => `<!-- Auto generated code -->
 <div id="${moduleId}">
-    {% include section-header.html name="${moduleId}" version=page.versions.${moduleId} %}
+    {% include section-header.html name="${moduleId}" version=page.module_metadata.${moduleId}.ds-component.version %}
 
     <p>This is generated documentation for ${moduleName}. Update it!</p>
 
@@ -36,6 +34,14 @@ const getMainContent = (moduleId) => `
 <img class="skin-graphic" src="{{ page.static_dir }}/skin-graphic.png" alt="" />
 `;
 
+const getMetadataContent = (moduleId) => `  ${moduleId}:
+    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`;
+
 /**
  * Code generation for docs
  */
@@ -59,14 +65,14 @@ class DocumentationGenerator extends BaseGenerator {
 
         log.info(
             "Docs added! Make changes in %s file.",
-            path.join(this.moduleDocFilePath)
+            path.join(this.moduleDocFilePath),
         );
     }
 
     _addDocsModuleDoc() {
         const moduleDocFilePath = path.join(
             this.docsCommonFolder,
-            `${this.moduleId}.html`
+            `${this.moduleId}.html`,
         );
         if (fs.existsSync(moduleDocFilePath)) {
             log.warn("[DOC][%s] Module doc already exists!", moduleDocFilePath);
@@ -74,7 +80,7 @@ class DocumentationGenerator extends BaseGenerator {
         }
         fs.writeFileSync(
             moduleDocFilePath,
-            getModuleDocContent(this.moduleName, this.moduleId)
+            getModuleDocContent(this.moduleName, this.moduleId),
         );
 
         this.moduleDocFilePath = moduleDocFilePath;
@@ -84,7 +90,7 @@ class DocumentationGenerator extends BaseGenerator {
         const filePathFromRoot = path.join(
             "docs",
             "_includes",
-            "module-list.html"
+            "module-list.html",
         );
         const newLineContent = `<li><a href="#${this.moduleId}">${this.moduleName}</a></li>`;
         writeLine({
@@ -111,14 +117,14 @@ class DocumentationGenerator extends BaseGenerator {
 
     _addDocsIndex() {
         const filePathFromRoot = path.join("docs", "index.html");
-        const newLineContent = `    ${this.moduleId}: ${DS_VERSION}`;
+        const newMetadataContent = getMetadataContent(this.moduleId);
         writeLine({
             filePathFromRoot,
-            sectionPredicate: (line) => line.match(/versions\s*:/),
-            newLineContent,
+            sectionPredicate: (line) => line.match(/module_metadata\s*:/),
+            newLineContent: newMetadataContent,
             duplicateCheckText: `\s*\t*${this.moduleId}:\s*\t*.+`,
-            getLineMeta: (prevLine, currentLine, nextLine) => ({
-                shouldAppend: !nextLine || currentLine > newLineContent,
+            getLineMeta: (_prevLine, currentLine, nextLine) => ({
+                shouldAppend: !nextLine || currentLine > newMetadataContent,
             }),
         });
     }