Merge pull request #1095 from sharetribe/fix-classname-for-examples

Fix class name for Styleguide examples

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] Renamed Component.example.css files to ComponentExample.css to fix bug introduced in one of
+  the library updates. [#1095](https://github.com/sharetribe/flex-template-web/pull/1095)
 - [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

src/components/AddImages/AddImages.example.js

@@ -4,7 +4,7 @@ import findIndex from 'lodash/findIndex';
 import uniqueId from 'lodash/uniqueId';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import AddImages from './AddImages';
-import css from './AddImages.example.css';
+import css from './AddImagesExample.css';
 
 const { UUID } = sdkTypes;
 

src/components/BookingPanel/BookingPanel.example.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createListing } from '../../util/test-data';
 import { LISTING_STATE_CLOSED } from '../../util/types';
 import BookingPanel from './BookingPanel';
-import css from './BookingPanel.example.css';
+import css from './BookingPanelExample.css';
 
 export const Default = {
   component: BookingPanel,

src/components/Button/Button.example.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { IconCheckmark } from '../../components';
 import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
 
-import css from './Button.example.css';
+import css from './ButtonExample.css';
 
 const preventDefault = e => {
   e.preventDefault();

src/components/FieldTextInput/FieldTextInput.example.js

@@ -5,7 +5,7 @@ import * as validators from '../../util/validators';
 import { Button } from '../../components';
 import FieldTextInput from './FieldTextInput';
 
-import css from './FieldTextInput.example.css';
+import css from './FieldTextInputExample.css';
 
 const FormComponent = props => (
   <FinalForm

src/components/Footer/Footer.example.js

@@ -1,5 +1,5 @@
 import Footer from './Footer';
-import css from './Footer.example.css';
+import css from './FooterExample.css';
 
 export const Default = {
   component: Footer,

src/components/ModalInMobile/ModalInMobile.example.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { Button } from '../../components';
 import ModalInMobile from './ModalInMobile';
-import css from './ModalInMobile.example.css';
+import css from './ModalInMobileExample.css';
 
 const onManageDisableScrolling = (componentId, scrollingDisabled = true) => {
   // We are just checking the value for now
@@ -48,6 +48,7 @@ class ModalInMobileWrapper extends Component {
 export const Empty = {
   component: ModalInMobileWrapper,
   useDefaultWrapperStyles: false,
+  description: 'Modal feature is visible if window’s width is less than 400px.',
   props: {
     id: 'ExampleModalInMobile',
     showAsModalMaxWidth: 400,

src/components/ResponsiveImage/ResponsiveImage.example.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ResponsiveImage from './ResponsiveImage';
 import { types as sdkTypes } from '../../util/sdkLoader';
 
-import css from './ResponsiveImage.example.css';
+import css from './ResponsiveImageExample.css';
 
 const { UUID } = sdkTypes;