Show docs showcase on mobile and use carousel for showcase (#1316)

Author: ethanshar

src/components/button/ButtonTypes.tsx

@@ -161,7 +161,8 @@ export const DEFAULT_PROPS = {
  * @extends: TouchableOpacity
  * @extendsLink: docs/TouchableOpacity
  * @modifiers: margin, background
- * @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
+ * @image: https://user-images.githubusercontent.com/1780255/119218638-173e3b00-baea-11eb-8e66-f5a23714871c.png, https://user-images.githubusercontent.com/1780255/119218639-173e3b00-baea-11eb-8b75-b6dde4e922c8.png, https://user-images.githubusercontent.com/1780255/119218636-16a5a480-baea-11eb-8501-33eebfe1f3e2.png, https://user-images.githubusercontent.com/1780255/119218637-16a5a480-baea-11eb-99d0-3620f2160ec5.png, https://user-images.githubusercontent.com/1780255/119218634-160d0e00-baea-11eb-8538-e78005cb3fa5.png, https://user-images.githubusercontent.com/1780255/119221003-d9471400-baf5-11eb-9066-0aabbe8d9022.png
+ * @gif: https://user-images.githubusercontent.com/1780255/119218630-11e0f080-baea-11eb-8e32-4470195cc42f.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx
  */
 // @ts-ignore 

uilib-docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uilib-docs",
   "description": "uilib docs template",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "author": "Ethan Sharabi <[email protected]>",
   "main": "index.js",
   "dependencies": {
@@ -26,7 +26,9 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-helmet": "^6.0.0"
+    "react-helmet": "^6.0.0",
+    "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "prettier": "^1.16.4"

uilib-docs/src/templates/component.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Link from 'gatsby-link';
 import classnames from 'classnames';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 import './components.scss';
 import importantIcon from '../images/important.svg';
@@ -102,7 +105,9 @@ export default class ComponentTemplate extends Component {
 
           <ul>
             {_.map(extendLinks, link => (
-              <li className="link" key={link}>{link}</li>
+              <li className="link" key={link}>
+                {link}
+              </li>
             ))}
           </ul>
 
@@ -147,17 +152,22 @@ export default class ComponentTemplate extends Component {
     }
   }
 
-  renderVisuals(componentInfo) {
+  renderVisuals(componentInfo, forMobile) {
     const gifs = componentInfo.gif ? componentInfo.gif.split(',') : [];
     const imgs = componentInfo.image ? componentInfo.image.split(',') : [];
-    const visuals = [...gifs, ...imgs];
+    const visuals = [...imgs, ...gifs];
 
     if (!_.isEmpty(visuals)) {
       return (
-        <div className="visuals">
-          {_.map(visuals, (image, i) => {
-            return <img key={i} alt={''} src={image} />;
-          })}
+        <div className={classnames('visuals', {mobile: forMobile})}>
+          {forMobile ? <h3>Showcase</h3> : <div className="list-header">Showcase</div>}
+          <div className="carousel">
+            <Slider arrows dots infinite autoplay>
+              {_.map(visuals, (image, i) => {
+                return <img key={i} alt={''} src={image} />;
+              })}
+            </Slider>
+          </div>
         </div>
       );
     }
@@ -166,8 +176,8 @@ export default class ComponentTemplate extends Component {
   renderSidebar(componentInfo, componentProps) {
     return (
       <div className="sidebar">
-        <TableOfContent props={componentProps} />
         {this.renderVisuals(componentInfo)}
+        <TableOfContent props={componentProps} />
       </div>
     );
   }
@@ -215,6 +225,7 @@ export default class ComponentTemplate extends Component {
 
           {this.renderNotes(componentInfo)}
 
+          {this.renderVisuals(componentInfo, true)}
           <ComponentAPI props={componentProps} href={href} />
         </div>
       </div>

uilib-docs/src/templates/components.scss

@@ -87,15 +87,33 @@ $tabletOfContentWidth: 20vw;
   .visuals {
     display: flex;
     flex-direction: column;
-    padding-left: 20px;
-    margin-top: 20px;
+    box-sizing: content-box;
+    margin: 20px;
 
-    img {
-      width: 70%;
+    &.mobile {
+      @include desktop {
+        display: none;
+      }
+    }
+
+    .carousel {
+      margin-top: 40px;
       border-radius: 4px;
-      border: 6px solid $dark60;
+      border: 4px solid $dark60;
       box-shadow: 2px 2px 10px rgba($dark10, 0.3);
-      margin-bottom: 20px;
+
+      .slick-track {
+        display: flex;
+      }
+
+      .slick-slide {
+        align-self: center;
+      }
+
+      .slick-dots {
+        top: -35px;
+        bottom: unset;
+      }
     }
   }
 }
@@ -211,6 +229,7 @@ $tabletOfContentWidth: 20vw;
 .docs-page {
   @include component-api();
   @include notes();
+  @include visuals();
 
   display: flex;
   flex-direction: row;
@@ -244,7 +263,6 @@ $tabletOfContentWidth: 20vw;
     overflow-y: auto;
 
     @include tabletOfContent();
-    @include visuals();
 
     @include desktop {
       display: initial;