I7378-Icon star storybook (#7483)

fixes #7378 

~~So I readded IconStar here so it could be set up in storybook. Although, we will officially turn this on in AMO in #7365 (hopefully).~~ 

I've also added the `Rating` ~~and `RatingsByStar`~~ component~~s here too~~ so you can see the 5 star set up and we'll be able to see the changes with the new PR as these files will be updated in that PR as well.


note: while I do like the props grid, since the props are shown in the Component's variations page, maybe this is enough. Especially since the props (with flow and now with HOCs too it seems) aren't always working :/ For now tho, I just commented this out where it wasn't working properly: on Ratings and the RatingsByStar components. 

also, I would recommend looking into using this plugin again:

https://github.com/evgenykochetkov/react-storybook-addon-props-combinations

It was suggested at 1 point by someone and I think it may be easier to use than manually doing all the use cases/mixes of props as we have to do now.

src/ui/components/Rating/index.js

@@ -18,7 +18,7 @@ type StateType = {|
   hoveringOverStar: number | null,
 |};
 
-type Props = {|
+export type Props = {|
   className?: string,
   onSelectRating?: (rating: number) => void,
   rating?: number | null,

stories/index.js

@@ -4,5 +4,7 @@ import 'core/css/inc/lib.scss';
 
 import './setup/styles.scss';
 
+// Components
 import './ui/Badge';
 import './ui/Button';
+import './ui/Rating';

stories/setup/Provider.js

@@ -14,7 +14,11 @@ const history = addQueryParamsToHistory({
 
 export default function Provider({ story }: Object) {
   return (
-    <Root store={store} history={history} i18n={fakeI18n}>
+    <Root
+      store={store}
+      history={history}
+      i18n={fakeI18n({ includeJedSpy: false })}
+    >
       {story}
     </Root>
   );

stories/setup/styles.scss

@@ -5,6 +5,7 @@ body {
   // This overrides the App background style which makes it hard to see
   // in storybook.
   background: #fff;
+  margin: 0;
   // Giving extra cushion so nothing gets covered.
   padding: 24px 12px 12px;
 }

stories/ui/Rating.js

@@ -0,0 +1,192 @@
+/* @flow */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { fakeI18n } from 'tests/unit/helpers';
+
+import Rating, { RatingBase } from 'ui/components/Rating';
+import type { Props as RatingProps } from 'ui/components/Rating';
+
+import { createChapters } from '../utils';
+import Provider from '../setup/Provider';
+
+export type Props = {|
+  props: RatingProps,
+|};
+
+function createPropsMatrix(): Array<Props> {
+  return [
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'small',
+        rating: undefined,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'small',
+        rating: null,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'small',
+        rating: 4,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: 3.5,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: 4,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'large',
+        rating: undefined,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'large',
+        rating: null,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: false,
+        styleSize: 'large',
+        rating: 3,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: 3.5,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: 4,
+        yellowStars: true,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: undefined,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: null,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: 3.5,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'small',
+        rating: 4,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: undefined,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: null,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: 3.4,
+        yellowStars: false,
+      },
+    },
+    {
+      props: {
+        readOnly: true,
+        styleSize: 'large',
+        rating: 4,
+        yellowStars: false,
+      },
+    },
+  ];
+}
+
+storiesOf('Rating', module)
+  .addDecorator((story) => (
+    <div className="Rating--storybook">
+      <Provider story={story()} />
+    </div>
+  ))
+  .add(
+    'Rating props',
+    withInfo()(() => {
+      return (
+        <RatingBase rating={4} i18n={fakeI18n({ includeJedSpy: false })} />
+      );
+    }),
+  )
+  .addWithChapters('Rating variations', {
+    chapters: createChapters({
+      Component: Rating,
+      chapters: ['Rating'],
+      createPropsMatrix,
+      otherChapterProps: {
+        // Since Rating has a simple props matrix we don't need to display
+        // a title since there is only one item in each group (aka chapter).
+        // TODO: maybe create separate createSections util helper.
+        title: undefined,
+      },
+    }),
+  });

stories/utils.js

@@ -36,7 +36,11 @@ export const createChapters = ({
 
         return {
           subtitle: propsString !== '' ? propsString : 'default',
-          sectionFn: () => <Component {...section.props}>{children}</Component>,
+          sectionFn: () => (
+            <div className="section-component-wrapper">
+              <Component {...section.props}>{children}</Component>
+            </div>
+          ),
           ...otherSectionProps,
         };
       }),

tests/unit/helpers.js

@@ -615,8 +615,11 @@ export function JedSpy(data = {}) {
 /*
  * Creates a stand-in for a jed instance,
  */
-export function fakeI18n({ lang = config.get('defaultLang') } = {}) {
-  return makeI18n({}, lang, JedSpy);
+export function fakeI18n({
+  lang = config.get('defaultLang'),
+  includeJedSpy = true,
+} = {}) {
+  return makeI18n({}, lang, includeJedSpy ? JedSpy : undefined);
 }
 
 export const userAgentsByPlatform = {