Merge pull request #623 from shyndman/feat/linked-screenshots

docs: Adds demo links to screenshots.
material-components · May 10, 2017 · 248734e · 248734e
2 parents 773f821 + 43548dd
commit 248734e
Show file tree

Hide file tree

Showing 18 changed files with 54 additions and 18 deletions.
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -10,7 +10,9 @@ path: /catalog/buttons/
 # Buttons
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/buttons.png" width="363" alt="Buttons screenshot">
+  <a href="https://material-components-web.appspot.com/button.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/buttons.png" width="363" alt="Buttons screenshot">
+  </a>
 </div>-->
 
 The MDC Button component is a spec-aligned button component adhering to the

diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md
@@ -10,7 +10,9 @@ path: /catalog/cards/
 # Cards
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/cards.png" width="328" alt="Cards screenshot">
+  <a href="https://material-components-web.appspot.com/card.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/cards.png" width="328" alt="Cards screenshot">
+  </a>
 </div>-->
 
 MDC Card is a component that implements the

diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -9,7 +9,9 @@ path: /catalog/input-controls/checkboxes/
 # Checkboxes
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/checkboxes.png" width="99" alt="Checkboxes screenshot">
+  <a href="https://material-components-web.appspot.com/checkbox.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/checkboxes.png" width="99" alt="Checkboxes screenshot">
+  </a>
 </div>-->
 
 The MDC Checkbox component is a spec-aligned checkbox component adhering to the

diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -10,7 +10,9 @@ path: /catalog/dialogs/
 # Dialogs
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/dialogs.png" width="714" alt="Dialogs screenshot">
+  <a href="https://material-components-web.appspot.com/dialog.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/dialogs.png" width="714" alt="Dialogs screenshot">
+  </a>
 </div>-->
 
 The MDC Dialog component is a spec-aligned dialog component adhering to the

diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md
@@ -10,7 +10,9 @@ path: /catalog/elevation/
 # Elevation
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/elevation.png" width="247" alt="Elevation screenshot">
+  <a href="https://material-components-web.appspot.com/elevation.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/elevation.png" width="247" alt="Elevation screenshot">
+  </a>
 </div>-->
 
 MDC Elevation provides Sass mixins and CSS classes which are used to provide [shadows and

diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
@@ -9,7 +9,9 @@ path: /catalog/buttons/floating-action-buttons/
 # Floating Action Buttons
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png" width="78" alt="Floating action buttons screenshot">
+  <a href="https://material-components-web.appspot.com/fab.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/fabs.png" width="78" alt="Floating action buttons screenshot">
+  </a>
 </div>-->
 
 The MDC FAB component is a spec-aligned button component adhering to the

diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md
@@ -10,7 +10,9 @@ path: /catalog/grid-lists/
 # Grid Lists
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/grids.png" width="320" alt="Grid lists screenshot">
+  <a href="https://material-components-web.appspot.com/grid-list.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/grids.png" width="320" alt="Grid lists screenshot">
+  </a>
 </div>-->
 
 MDC Grid List provides a RTL-aware Material Design Grid list component adhering to the

diff --git a/packages/mdc-icon-toggle/README.md b/packages/mdc-icon-toggle/README.md
@@ -9,7 +9,9 @@ path: /catalog/buttons/icon-toggle-buttons/
 # Icon Toggle Buttons
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/icon-toggles.png" width="20" alt="Icon toggles screenshot">
+  <a href="https://material-components-web.appspot.com/icon-toggle.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/icon-toggles.png" width="20" alt="Icon toggles screenshot">
+  </a>
 </div>-->
 
 MDC Icon Toggle provides a Material Design icon toggle button. It is fully accessible, and is

diff --git a/packages/mdc-layout-grid/README.md b/packages/mdc-layout-grid/README.md
@@ -10,7 +10,9 @@ path: /catalog/layout-grids/
 # Layout Grids
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/layout.png" width="256" alt="Layout grid screenshot">
+  <a href="https://material-components-web.appspot.com/layout-grid.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/layout.png" width="256" alt="Layout grid screenshot">
+  </a>
 </div>-->
 
 MDC Layout Grid is a CSS-only component that implements the

diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
@@ -10,7 +10,9 @@ path: /catalog/lists/
 # Lists
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/lists.png" width="365" alt="Lists screenshot">
+  <a href="https://material-components-web.appspot.com/list.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/lists.png" width="365" alt="Lists screenshot">
+  </a>
 </div>-->
 
 MDC List provides styles which implement [Material Design Lists](https://material.io/guidelines/components/lists.html) - "A single continuous column of tessellated subdivisions of equal width." Both single-line and two-line lists are supported (with

diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md
@@ -10,7 +10,9 @@ path: /catalog/menus/
 # Menus
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/menus.png" width="153" alt="Menus screenshot">
+  <a href="https://material-components-web.appspot.com/simple-menu.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/menus.png" width="153" alt="Menus screenshot">
+  </a>
 </div>-->
 
 The MDC Menu component is a spec-aligned menu component adhering to the

diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md
@@ -9,7 +9,9 @@ path: /catalog/input-controls/radio-buttons/
 # Radio Buttons
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/radios.png" width="60" alt="Radio buttons screenshot">
+  <a href="https://material-components-web.appspot.com/radio.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/radios.png" width="60" alt="Radio buttons screenshot">
+  </a>
 </div>-->
 
 The MDC Radio Button component provides a radio button adhering to the [Material Design Specification](https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button).

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -9,7 +9,9 @@ path: /catalog/input-controls/select-menus/
 # Select Menus
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/selects.png" width="376" alt="Select screenshot">
+  <a href="https://material-components-web.appspot.com/select.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/selects.png" width="376" alt="Select screenshot">
+  </a>
 </div>-->
 
 MDC Select provides Material Design single-option and multi-option select menus. It functions analogously to the

diff --git a/packages/mdc-snackbar/README.md b/packages/mdc-snackbar/README.md
@@ -10,7 +10,9 @@ path: /catalog/snackbars/
 # Snackbars
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/snackbars.png" width="336" alt="Snackbars screenshot">
+  <a href="https://material-components-web.appspot.com/snackbar.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/snackbars.png" width="336" alt="Snackbars screenshot">
+  </a>
 </div>-->
 
 The MDC Snackbar component is a spec-aligned snackbar/toast component adhering to the

diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md
@@ -9,7 +9,9 @@ path: /catalog/input-controls/switches/
 # Switches
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/switches.png" width="37" alt="Switches screenshot">
+  <a href="https://material-components-web.appspot.com/switch.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/switches.png" width="37" alt="Switches screenshot">
+  </a>
 </div>-->
 
 The MDC Switch component is a spec-aligned switch component adhering to the

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -9,7 +9,9 @@ path: /catalog/input-controls/text-fields/
 # Text Fields
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/textfields.png" width="240" alt="Text fields screenshot">
+  <a href="https://material-components-web.appspot.com/textfield.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/textfields.png" width="240" alt="Text fields screenshot">
+  </a>
 </div>-->
 
 The MDC Text Field component provides a textual input field adhering to the [Material Design Specification](https://material.io/guidelines/components/text-fields.html).

diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md
@@ -10,7 +10,9 @@ path: /catalog/theme/
 # Theme
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/themes.png" width="241" alt="Themes screenshot">
+  <a href="https://material-components-web.appspot.com/theme.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/themes.png" width="241" alt="Themes screenshot">
+  </a>
 </div>-->
 
 MDC Theme is a foundational module that provides theming to MDC-Web components, and also makes it available to

diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
@@ -10,7 +10,9 @@ path: /catalog/toolbar/
 # Toolbars
 
 <!--<div class="article__asset">
-<img src="{{ site.rootpath }}/images/mdc_web_screenshots/toolbars.png" width="494" alt="Toolbars screenshot">
+  <a href="https://material-components-web.appspot.com/toolbar.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/toolbars.png" width="494" alt="Toolbars screenshot">
+  </a>
 </div>-->
 
 MDC Toolbar acts as a container for multiple rows containing items such as