Update dependency react-styleguidist to v8

source/assets/AvatarBadgeAdmin/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-admin.svg';
+import React from 'react';
+import AvatarBadgeAdmin from 'design-system/dist/svg/wds-avatar-badges-admin.svg';
+
+/** @component */
+export default props => <AvatarBadgeAdmin {...props} />;

source/assets/AvatarBadgeContentModerator/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-content-moderator.svg';
+import React from 'react';
+import AvatarBadgeContentModerator from 'design-system/dist/svg/wds-avatar-badges-content-moderator.svg';
+
+/** @component */
+export default props => <AvatarBadgeContentModerator {...props} />;

source/assets/AvatarBadgeDiscussionModerator/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-discussion-moderator.svg';
+import React from 'react';
+import AvatarBadgeDiscussionModerator from 'design-system/dist/svg/wds-avatar-badges-discussion-moderator.svg';
+
+/** @component */
+export default props => <AvatarBadgeDiscussionModerator {...props} />;

source/assets/AvatarBadgeGlobalDiscussionsModerator/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-global-discussions-moderator.svg';
+import React from 'react';
+import AvatarBadgeGlobalDiscussionsModerator from 'design-system/dist/svg/wds-avatar-badges-global-discussions-moderator.svg';
+
+/** @component */
+export default props => <AvatarBadgeGlobalDiscussionsModerator {...props} />;

source/assets/AvatarBadgeHelper/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-helper.svg';
+import React from 'react';
+import AvatarBadgeHelper from 'design-system/dist/svg/wds-avatar-badges-helper.svg';
+
+/** @component */
+export default props => <AvatarBadgeHelper {...props} />;

source/assets/AvatarBadgeStaff/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-staff.svg';
+import React from 'react';
+import AvatarBadgeStaff from 'design-system/dist/svg/wds-avatar-badges-staff.svg';
+
+/** @component */
+export default props => <AvatarBadgeStaff {...props} />;

source/assets/AvatarBadgeVstf/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-badges-vstf.svg';
+import React from 'react';
+import AvatarBadgeVstf from 'design-system/dist/svg/wds-avatar-badges-vstf.svg';
+
+/** @component */
+export default props => <AvatarBadgeVstf {...props} />;

source/assets/AvatarIcon/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-icon.svg';
+import React from 'react';
+import AvatarIcon from 'design-system/dist/svg/wds-avatar-icon.svg';
+
+/** @component */
+export default props => <AvatarIcon {...props} />;

source/assets/AvatarIconTiny/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-icon-tiny.svg';
+import React from 'react';
+import AvatarIconTiny from 'design-system/dist/svg/wds-avatar-icon-tiny.svg';
+
+/** @component */
+export default props => <AvatarIconTiny {...props} />;

source/assets/AvatarIconUser/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-avatar-icon-user.svg';
+import React from 'react';
+import AvatarIconUser from 'design-system/dist/svg/wds-avatar-icon-user.svg';
+
+/** @component */
+export default props => <AvatarIconUser {...props} />;

source/assets/LogoFandom/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-logo-fandom.svg';
+import React from 'react';
+import LogoFandom from 'design-system/dist/svg/wds-company-logo-fandom.svg';
+
+/** @component */
+export default props => <LogoFandom {...props} />;

source/assets/LogoFandomHeart/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-logo-fandom-heart.svg';
+import React from 'react';
+import LogoFandomHeart from 'design-system/dist/svg/wds-company-logo-fandom-heart.svg';
+
+/** @component */
+export default props => <LogoFandomHeart {...props} />;

source/assets/LogoFandomWhite/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-logo-fandom-white.svg';
+import React from 'react';
+import LogoFandomWhite from 'design-system/dist/svg/wds-company-logo-fandom-white.svg';
+
+/** @component */
+export default props => <LogoFandomWhite {...props} />;

source/assets/LogoWikia/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-logo-wikia.svg';
+import React from 'react';
+import LogoWikia from 'design-system/dist/svg/wds-company-logo-wikia.svg';
+
+/** @component */
+export default props => <LogoWikia {...props} />;

source/assets/LogoWikiaOrgWhite/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-logo-wikia-org-white.svg';
+import React from 'react';
+import LogoWikiaOrgWhite from 'design-system/dist/svg/wds-company-logo-wikia-org-white.svg';
+
+/** @component */
+export default props => <LogoWikiaOrgWhite {...props} />;

source/assets/StoreAppstore/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-store-appstore.svg';
+import React from 'react';
+import StoreAppstore from 'design-system/dist/svg/wds-company-store-appstore.svg';
+
+/** @component */
+export default props => <StoreAppstore {...props} />;

source/assets/StoreGoogleplay/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-company-store-googleplay.svg';
+import React from 'react';
+import StoreGoogleplay from 'design-system/dist/svg/wds-company-store-googleplay.svg';
+
+/** @component */
+export default props => <StoreGoogleplay {...props} />;

source/components/Avatar/__snapshots__/index.spec.js.snap

@@ -15,10 +15,15 @@ exports[`Avatar renders when incorrect badgePermission is set 1`] = `
         className="wds-avatar__image"
         title="wds-avatar__image"
       >
-        <div
+        <_default
           className="wds-avatar__image"
           title="wds-avatar__image"
-        />
+        >
+          <div
+            className="wds-avatar__image"
+            title="wds-avatar__image"
+          />
+        </_default>
       </_default>
     </AvatarImage>
     <Badge
@@ -43,10 +48,15 @@ exports[`Avatar renders with badge 1`] = `
         className="wds-avatar__image"
         title="wds-avatar__image"
       >
-        <div
+        <_default
           className="wds-avatar__image"
           title="wds-avatar__image"
-        />
+        >
+          <div
+            className="wds-avatar__image"
+            title="wds-avatar__image"
+          />
+        </_default>
       </_default>
     </AvatarImage>
     <Badge
@@ -57,7 +67,9 @@ exports[`Avatar renders with badge 1`] = `
         title="Community Admin"
       >
         <_default>
-          <div />
+          <_default>
+            <div />
+          </_default>
         </_default>
       </span>
     </Badge>
@@ -79,10 +91,15 @@ exports[`Avatar renders with default props 1`] = `
         className="wds-avatar__image"
         title="wds-avatar__image"
       >
-        <div
+        <_default
           className="wds-avatar__image"
           title="wds-avatar__image"
-        />
+        >
+          <div
+            className="wds-avatar__image"
+            title="wds-avatar__image"
+          />
+        </_default>
       </_default>
     </AvatarImage>
   </div>
@@ -125,7 +142,9 @@ exports[`Avatar renders with props 1`] = `
         title="Community Admin"
       >
         <_default>
-          <div />
+          <_default>
+            <div />
+          </_default>
         </_default>
       </span>
     </Badge>

source/config/styleguide.config.js

@@ -95,14 +95,14 @@ module.exports = {
 
         return `import ${name} from '${pkg.name}/${subPath}';`;
     },
-    propsParser(filePath, source, resolver, handlers) {
-        /**
-         * `react-docgen` cannot parse this fine syntax, so let's ignore it
-         */
-        if (source.indexOf('export default from') > -1) {
-            return {};
-        }
-        return docgen.parse(source, resolver, handlers);
-    },
+    // propsParser(filePath, source, resolver, handlers) {
+    //     /**
+    //      * `react-docgen` cannot parse this fine syntax, so let's ignore it
+    //      */
+    //     if (source.indexOf('export default from') > -1) {
+    //         return {};
+    //     }
+    //     return docgen.parse(source, resolver, handlers);
+    // },
     webpackConfig,
 };

source/icons/IconActivity/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-activity.svg';
+import React from 'react';
+import IconActivity from 'design-system/dist/svg/wds-icons-activity.svg';
+
+/** @component */
+export default props => <IconActivity {...props} />;

source/icons/IconActivitySmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-activity-small.svg';
+import React from 'react';
+import IconActivitySmall from 'design-system/dist/svg/wds-icons-activity-small.svg';
+
+/** @component */
+export default props => <IconActivitySmall {...props} />;

source/icons/IconAlert/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-alert.svg';
+import React from 'react';
+import IconAlert from 'design-system/dist/svg/wds-icons-alert.svg';
+
+/** @component */
+export default props => <IconAlert {...props} />;

source/icons/IconAlertSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-alert-small.svg';
+import React from 'react';
+import IconAlertSmall from 'design-system/dist/svg/wds-icons-alert-small.svg';
+
+/** @component */
+export default props => <IconAlertSmall {...props} />;

source/icons/IconArrow/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-arrow.svg';
+import React from 'react';
+import IconArrow from 'design-system/dist/svg/wds-icons-arrow.svg';
+
+/** @component */
+export default props => <IconArrow {...props} />;

source/icons/IconArrowSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-arrow-small.svg';
+import React from 'react';
+import IconArrowSmall from 'design-system/dist/svg/wds-icons-arrow-small.svg';
+
+/** @component */
+export default props => <IconArrowSmall {...props} />;

source/icons/IconArrowTiny/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-arrow-tiny.svg';
+import React from 'react';
+import IconArrowTiny from 'design-system/dist/svg/wds-icons-arrow-tiny.svg';
+
+/** @component */
+export default props => <IconArrowTiny {...props} />;

source/icons/IconArticle/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-article.svg';
+import React from 'react';
+import IconArticle from 'design-system/dist/svg/wds-icons-article.svg';
+
+/** @component */
+export default props => <IconArticle {...props} />;

source/icons/IconArticleSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-article-small.svg';
+import React from 'react';
+import IconArticleSmall from 'design-system/dist/svg/wds-icons-article-small.svg';
+
+/** @component */
+export default props => <IconArticleSmall {...props} />;

source/icons/IconArticleTiny/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-article-tiny.svg';
+import React from 'react';
+import IconArticleTiny from 'design-system/dist/svg/wds-icons-article-tiny.svg';
+
+/** @component */
+export default props => <IconArticleTiny {...props} />;

source/icons/IconArticlesSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-articles-small.svg';
+import React from 'react';
+import IconArticlesSmall from 'design-system/dist/svg/wds-icons-articles-small.svg';
+
+/** @component */
+export default props => <IconArticlesSmall {...props} />;

source/icons/IconBell/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bell.svg';
+import React from 'react';
+import IconBell from 'design-system/dist/svg/wds-icons-bell.svg';
+
+/** @component */
+export default props => <IconBell {...props} />;

source/icons/IconBold/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bold.svg';
+import React from 'react';
+import IconBold from 'design-system/dist/svg/wds-icons-bold.svg';
+
+/** @component */
+export default props => <IconBold {...props} />;

source/icons/IconBoldSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bold-small.svg';
+import React from 'react';
+import IconBoldSmall from 'design-system/dist/svg/wds-icons-bold-small.svg';
+
+/** @component */
+export default props => <IconBoldSmall {...props} />;

source/icons/IconBookmark/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bookmark.svg';
+import React from 'react';
+import IconBookmark from 'design-system/dist/svg/wds-icons-bookmark.svg';
+
+/** @component */
+export default props => <IconBookmark {...props} />;

source/icons/IconBookmarkSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bookmark-small.svg';
+import React from 'react';
+import IconBookmarkSmall from 'design-system/dist/svg/wds-icons-bookmark-small.svg';
+
+/** @component */
+export default props => <IconBookmarkSmall {...props} />;

source/icons/IconBulletList/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bullet-list.svg';
+import React from 'react';
+import IconBulletList from 'design-system/dist/svg/wds-icons-bullet-list.svg';
+
+/** @component */
+export default props => <IconBulletList {...props} />;

source/icons/IconBulletListSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-bullet-list-small.svg';
+import React from 'react';
+import IconBulletListSmall from 'design-system/dist/svg/wds-icons-bullet-list-small.svg';
+
+/** @component */
+export default props => <IconBulletListSmall {...props} />;

source/icons/IconCamera/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-camera.svg';
+import React from 'react';
+import IconCamera from 'design-system/dist/svg/wds-icons-camera.svg';
+
+/** @component */
+export default props => <IconCamera {...props} />;

source/icons/IconChartSmall/index.js

@@ -1,2 +1,6 @@
 // This file is generated automatically via extract-assets-from-ds.js
-export default from 'design-system/dist/svg/wds-icons-chart-small.svg';
+import React from 'react';
+import IconChartSmall from 'design-system/dist/svg/wds-icons-chart-small.svg';
+
+/** @component */
+export default props => <IconChartSmall {...props} />;