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 @@
- {% 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 %}

An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.

The markup requirements are very strictly: a heading, description and button.

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 @@
- {% include section-header.html name="avatar" version=page.versions.avatar %} + {% include section-header.html name="avatar" version=page.module_metadata.avatar.ds-component.version %}

Avatars are graphical assets that represent users’ identities across products.

Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.

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 @@
- {% include section-header.html name="badge" version=page.versions.badge %} + {% include section-header.html name="badge" version=page.module_metadata.badge.ds-component.version %}

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.

The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the icon button and menu modules.

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 @@