Merge pull request #1094 from sharetribe/styleguide-rawonly-flag

Styleguide: add 'rawOnly' flag for examples.

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [add] `rawOnly` flag for Styleguide examples using fixed positioning or full-page dimensions.
+  [#1094](https://github.com/sharetribe/flex-template-web/pull/1094)
 - [fix] Show error when typing credit card number if e.g. the number is invalid. Fixes bug that was
   introduced in PR #1088. [#1092](https://github.com/sharetribe/flex-template-web/pull/1092)
 - [change] Use Final Form on `StripePaymentForm` for consistency. Note that card form Stripe

src/components/ImageCarousel/ImageCarousel.example.css

@@ -1,12 +0,0 @@
-@import '../../marketplace.css';
-
-.root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-
-  @media (--viewportMedium) {
-    padding: 100px 10vw;
-  }
-}

src/components/ImageCarousel/ImageCarousel.example.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import ImageCarousel from './ImageCarousel';
-import css from './ImageCarousel.example.css';
 
 const { UUID } = sdkTypes;
 
@@ -110,8 +109,6 @@ const imageLandscape = {
 
 const ImageCarouselWrapper = props => {
   const wrapperStyles = {
-    width: '100%',
-    height: 400,
     backgroundColor: '#000',
   };
   return (
@@ -123,15 +120,18 @@ const ImageCarouselWrapper = props => {
 
 export const NoImages = {
   component: ImageCarouselWrapper,
-  props: { images: [], rootClassName: css.root },
+  props: { images: [] },
+  rawOnly: true,
 };
 
 export const SingleImage = {
   component: ImageCarouselWrapper,
-  props: { images: [imageSquare], rootClassName: css.root },
+  props: { images: [imageSquare] },
+  rawOnly: true,
 };
 
 export const MultipleImages = {
   component: ImageCarouselWrapper,
-  props: { images: [imageLandscape, imagePortrait, imageSquare], rootClassName: css.root },
+  props: { images: [imageLandscape, imagePortrait, imageSquare] },
+  rawOnly: true,
 };

src/containers/StyleguidePage/StyleguidePage.js

@@ -17,6 +17,7 @@ const Example = props => {
     description,
     props: exampleProps,
     useDefaultWrapperStyles,
+    rawOnly,
   } = props;
 
   const exampleWrapperClassName = useDefaultWrapperStyles ? css.defaultWrapperStyles : '';
@@ -51,7 +52,20 @@ const Example = props => {
       </span>
       {desc}
       <div className={exampleWrapperClassName}>
-        <ExampleComponent {...exampleProps} />
+        {rawOnly ? (
+          <p>
+            This component is available in{' '}
+            <NamedLink
+              name="StyleguideComponentExampleRaw"
+              params={{ component: componentName, example: exampleName }}
+            >
+              raw mode
+            </NamedLink>{' '}
+            only.
+          </p>
+        ) : (
+          <ExampleComponent {...exampleProps} />
+        )}
       </div>
     </li>
   );