Wikia · xkxd · Apr 23, 2019 · Apr 17, 2019 · Apr 18, 2019 · Apr 18, 2019
@@ -12,3 +12,4 @@ models/**
 systems/**
 theme/**
 utils/**
+__mocks__/**
@@ -0,0 +1,51 @@
+const React = require('react');
+const reactI18next = require('react-i18next');
+
+const hasChildren = node => node && (node.children || (node.props && node.props.children));
+
+const getChildren = node =>
+    node && node.children ? node.children : node.props && node.props.children;
+
+const renderNodes = reactNodes => {
+    if (typeof reactNodes === 'string') {
+        return reactNodes;
+    }
+
+    return Object.keys(reactNodes).map((key, i) => {
+        const child = reactNodes[key];
+        const isElement = React.isValidElement(child);
+
+        if (typeof child === 'string') {
+            return child;
+        }
+        if (hasChildren(child)) {
+            const inner = renderNodes(getChildren(child));
+            return React.cloneElement(child, { ...child.props, key: i }, inner);
+        }
+        if (typeof child === 'object' && !isElement) {
+            return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
+        }
+
+        return child;
+    });
+};
+
+const useMock = [k => k, {}];
+useMock.t = k => k;
+useMock.i18n = {};
+
+module.exports = {
+    // this mock makes sure any components using the translate HoC receive the t function as a prop
+    withTranslation: () => Component => props => <Component t={k => k} {...props} />,
+    Trans: ({ children }) => renderNodes(children),
+    Translation: ({ children }) => children(k => k, { i18n: {} }),
+    useTranslation: () => useMock,
+
+    // mock if needed
+    I18nextProvider: reactI18next.I18nextProvider,
+    initReactI18next: reactI18next.initReactI18next,
+    setDefaults: reactI18next.setDefaults,
+    getDefaults: reactI18next.getDefaults,
+    setI18n: reactI18next.setI18n,
+    getI18n: reactI18next.getI18n,
+};
@@ -59,6 +59,7 @@
       "Fieldset",
       "FloatingButton",
       "FloatingButtonGroup",
+      "GlobalFooter",
       "GlobalNavigation",
       "HideComponent",
       "Icon",

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.faf2c36b.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.b255c72a.js"></script></body></html>
@@ -41,7 +41,7 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "date-fns": "^1.29.0",
-    "design-system": "git://github.com/Wikia/design-system.git#21.0.1",
+    "design-system": "git://github.com/Wikia/design-system.git#21.1.1",
     "i18next": "^14.0.1",
     "immutable": "^4.0.0-rc.12",
     "react-i18next": "^10.0.0",

@@ -45,10 +45,10 @@ exports[`Avatar Avatar renders for "content-moderator" badge permission 1`] = `
 </Avatar>
 `;
 
-exports[`Avatar Avatar renders for "global-discussions-moderator" badge permission 1`] = `
+exports[`Avatar Avatar renders for "discussion-moderator" badge permission 1`] = `
 <Avatar
   alt="User avatar"
-  badge="global-discussions-moderator"
+  badge="discussion-moderator"
 >
   <div
     className="wds-avatar"
@@ -72,28 +72,17 @@ exports[`Avatar Avatar renders for "global-discussions-moderator" badge permissi
       </_default>
     </AvatarImage>
     <Badge
-      badge="global-discussions-moderator"
+      badge="discussion-moderator"
       className=""
-    >
-      <span
-        className="wds-avatar__badge "
-        title="Global Discussions Moderator"
-      >
-        <_default>
-          <_default>
-            <div />
-          </_default>
-        </_default>
-      </span>
-    </Badge>
+    />
   </div>
 </Avatar>
 `;
 
-exports[`Avatar Avatar renders for "helper" badge permission 1`] = `
+exports[`Avatar Avatar renders for "global-discussions-moderator" badge permission 1`] = `
 <Avatar
   alt="User avatar"
-  badge="helper"
+  badge="global-discussions-moderator"
 >
   <div
     className="wds-avatar"
@@ -117,12 +106,12 @@ exports[`Avatar Avatar renders for "helper" badge permission 1`] = `
       </_default>
     </AvatarImage>
     <Badge
-      badge="helper"
+      badge="global-discussions-moderator"
       className=""
     >
       <span
         className="wds-avatar__badge "
-        title="FANDOM Helper"
+        title="Global Discussions Moderator"
       >
         <_default>
           <_default>
@@ -135,10 +124,10 @@ exports[`Avatar Avatar renders for "helper" badge permission 1`] = `
 </Avatar>
 `;
 
-exports[`Avatar Avatar renders for "staff" badge permission 1`] = `
+exports[`Avatar Avatar renders for "helper" badge permission 1`] = `
 <Avatar
   alt="User avatar"
-  badge="staff"
+  badge="helper"
 >
   <div
     className="wds-avatar"
@@ -162,12 +151,12 @@ exports[`Avatar Avatar renders for "staff" badge permission 1`] = `
       </_default>
     </AvatarImage>
     <Badge
-      badge="staff"
+      badge="helper"
       className=""
     >
       <span
         className="wds-avatar__badge "
-        title="FANDOM Staff"
+        title="FANDOM Helper"
       >
         <_default>
           <_default>
@@ -180,10 +169,10 @@ exports[`Avatar Avatar renders for "staff" badge permission 1`] = `
 </Avatar>
 `;
 
-exports[`Avatar Avatar renders for "sysop" badge permission 1`] = `
+exports[`Avatar Avatar renders for "staff" badge permission 1`] = `
 <Avatar
   alt="User avatar"
-  badge="sysop"
+  badge="staff"
 >
   <div
     className="wds-avatar"
@@ -207,12 +196,12 @@ exports[`Avatar Avatar renders for "sysop" badge permission 1`] = `
       </_default>
     </AvatarImage>
     <Badge
-      badge="sysop"
+      badge="staff"
       className=""
     >
       <span
         className="wds-avatar__badge "
-        title="Community Admin"
+        title="FANDOM Staff"
       >
         <_default>
           <_default>
@@ -225,10 +214,10 @@ exports[`Avatar Avatar renders for "sysop" badge permission 1`] = `
 </Avatar>
 `;
 
-exports[`Avatar Avatar renders for "threadmoderator" badge permission 1`] = `
+exports[`Avatar Avatar renders for "sysop" badge permission 1`] = `
 <Avatar
   alt="User avatar"
-  badge="threadmoderator"
+  badge="sysop"
 >
   <div
     className="wds-avatar"
@@ -252,12 +241,12 @@ exports[`Avatar Avatar renders for "threadmoderator" badge permission 1`] = `
       </_default>
     </AvatarImage>
     <Badge
-      badge="threadmoderator"
+      badge="sysop"
       className=""
     >
       <span
         className="wds-avatar__badge "
-        title="Discussions Moderator"
+        title="Community Admin"
       >
         <_default>
           <_default>
@@ -413,7 +402,7 @@ exports[`Avatar Avatar renders with link builder 1`] = `
 exports[`Avatar Avatar renders with props 1`] = `
 <Avatar
   alt="alt"
-  badge="admin"
+  badge="sysop"
   className="class-name"
   href="href"
   src="src"
@@ -439,9 +428,20 @@ exports[`Avatar Avatar renders with props 1`] = `
       </AvatarImage>
     </a>
     <Badge
-      badge="admin"
+      badge="sysop"
       className=""
-    />
+    >
+      <span
+        className="wds-avatar__badge "
+        title="Community Admin"
+      >
+        <_default>
+          <_default>
+            <div />
+          </_default>
+        </_default>
+      </span>
+    </Badge>
   </div>
 </Avatar>
 `;
@@ -13,7 +13,7 @@ describe('Avatar', () => {
     test('Avatar renders with props', () => {
         const props = {
             alt: 'alt',
-            badge: 'admin',
+            badge: 'sysop',
             className: 'class-name',
             href: 'href',
             src: 'src',
@@ -29,7 +29,7 @@ describe('Avatar', () => {
     });
 
     const badgePermissionTestCases = [
-        'sysop', 'content-moderator', 'threadmoderator', 'global-discussions-moderator', 'staff', 'vstf', 'helper',
+        'sysop', 'content-moderator', 'discussion-moderator', 'global-discussions-moderator', 'staff', 'vstf', 'helper',
     ];
 
     badgePermissionTestCases.forEach((badge) => {

@@ -6,7 +6,7 @@ exports[`AvatarStack renders when there are less avatars than specified by maxSt
 >
   <Avatar
     alt="User"
-    badge="admin"
+    badge="sysop"
     href="some.link"
     key="0"
     src="some.url"
@@ -28,7 +28,7 @@ exports[`AvatarStack renders when there are more avatars than specified by maxSt
 >
   <Avatar
     alt="User"
-    badge="admin"
+    badge="sysop"
     href="some.link"
     key="0"
     src="some.url"
@@ -47,7 +47,7 @@ exports[`AvatarStack renders with default props 1`] = `
 >
   <Avatar
     alt="User"
-    badge="admin"
+    badge="sysop"
     href="some.link"
     key="0"
     src="some.url"
@@ -69,7 +69,7 @@ exports[`AvatarStack renders with hideOverflow set to true 1`] = `
 >
   <Avatar
     alt="User"
-    badge="admin"
+    badge="sysop"
     href="some.link"
     key="0"
     src="some.url"
@@ -83,7 +83,7 @@ exports[`AvatarStack renders with overrideCount 1`] = `
 >
   <Avatar
     alt="User"
-    badge="admin"
+    badge="sysop"
     href="some.link"
     key="0"
     src="some.url"

@@ -6,7 +6,7 @@ import AvatarStack from './index';
 
 const defaultProps = {
     avatars: [
-        { src: 'some.url', alt: 'User', link: 'some.link', badge: 'admin' },
+        { src: 'some.url', alt: 'User', link: 'some.link', badge: 'sysop' },
         { src: 'some.other.url', alt: 'Other user', link: 'some.other.link' },
     ],
 };
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.faf2c36b.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.b255c72a.js"></script></body></html>