docs: add screenshots of FAB, Paper, ProgressBar and Switch components (

#227)
callstack · Feb 5, 2018 · b9cdbe4 · b9cdbe4
1 parent 1ddd529
commit b9cdbe4
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 5 deletions.
diff --git a/docs/assets/screenshots/fab.png b/docs/assets/screenshots/fab.png
diff --git a/docs/assets/screenshots/paper.1_2.png b/docs/assets/screenshots/paper.1_2.png
diff --git a/docs/assets/screenshots/paper.4_6.png b/docs/assets/screenshots/paper.4_6.png
diff --git a/docs/assets/screenshots/paper.9_12.png b/docs/assets/screenshots/paper.9_12.png
diff --git a/docs/assets/screenshots/progress-bar.png b/docs/assets/screenshots/progress-bar.png
diff --git a/docs/assets/screenshots/switch.android.disabled.png b/docs/assets/screenshots/switch.android.disabled.png
diff --git a/docs/assets/screenshots/switch.android.enabled.png b/docs/assets/screenshots/switch.android.enabled.png
diff --git a/docs/assets/screenshots/switch.ios.disabled.png b/docs/assets/screenshots/switch.ios.disabled.png
diff --git a/docs/assets/screenshots/switch.ios.enabled.png b/docs/assets/screenshots/switch.ios.enabled.png
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -3,14 +3,28 @@
   margin: 0 -4px;
 }
 
-.screenshots > img {
-  width: 280px;
+.screenshots img {
+  max-width: 280px;
   height: auto;
+}
+
+.screenshots > div {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.screenshots > * {
   margin: 4px;
 }
 
+.screenshots span { 
+  color: #616161;
+  font-size: 13px;
+  line-height: 24px;
+}
+
 @media (min-width: 1100px) {
-  .screenshots > img {
-    width: 240px;
+  .screenshots img {
+    max-width: 240px;
   }
 }
diff --git a/src/components/FAB.js b/src/components/FAB.js
@@ -45,6 +45,10 @@ type Props = {
 /**
  * A floating action button represents the primary action in an application.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/fab.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (

diff --git a/src/components/Paper.js b/src/components/Paper.js
@@ -22,6 +22,12 @@ type Props = {
 /**
  * Paper is a basic container that can give depth to the page.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/paper.1_2.png" />
+ *   <img src="screenshots/paper.4_6.png" />
+ *   <img src="screenshots/paper.9_12.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (
@@ -30,7 +36,6 @@ type Props = {
  *   </Paper>
  * );
  *
- *
  * const styles = StyleSheet.create({
  *   paper: {
  *    padding: 8,

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
@@ -35,6 +35,10 @@ const ProgressBarComponent = Platform.select({
 /**
  * Progress bar is an indicator used to present some activity in the app.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/progress-bar.png" />
+ * </div>
+ *
  * ## Usage
  * ```js
  * const MyComponent = () => (

diff --git a/src/components/Switch.js b/src/components/Switch.js
@@ -34,6 +34,25 @@ type Props = {
 /**
  * Switch is a visual toggle between two mutually exclusive states—on and off.
  *
+ * <div class="screenshots">
+ *   <div>
+ *     <img src="screenshots/switch.android.enabled.png" />
+ *     <span>Android (enabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.android.disabled.png" />
+ *     <span>Android (disabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.ios.enabled.png" />
+ *     <span>iOS (enabled)</span>
+ *   </div>
+ *   <div>
+ *     <img src="screenshots/switch.ios.disabled.png" />
+ *     <span>iOS (disabled)</span>
+ *   </div>
+ * </div>
+ *
  * ## Usage
  * ```js
  * export default class MyComponent extends Component {