Repository: couds/react-bulma-components
Pull request #223 (2019-11-11 01:22:54)

Added mobile prop for <Level> component
I realized `<Level />` was missing `is-mobile` support when making documentation of it.  

**Added prop:**
```
mobile: PropTypes.bool
```
Defaults to `false`.  

[Documentation here.](https://bulma.io/documentation/layout/level/#mobile-level)


Patch:
diff --git a/src/components/level/level.js b/src/components/level/level.js
index d365410..fa8a5fa 100644
--- a/src/components/level/level.js
+++ b/src/components/level/level.js
@@ -14,12 +14,14 @@ const Level = ({
   children,
   className,
   breakpoint,
+  mobile,
   ...props
 }) => (
   <Element
     {...props}
     className={classnames('level', className, {
       [`is-${breakpoint}`]: breakpoint,
+      'is-mobile': mobile,
     })}
   >
     {children}
@@ -34,6 +36,7 @@ Level.propTypes = {
   ...modifiers.propTypes,
   children: PropTypes.node,
   className: PropTypes.string,
+  mobile: PropTypes.bool,
   style: PropTypes.shape({}),
   breakpoint: PropTypes.oneOf(breakpoints),
   renderAs: renderAsShape,
@@ -43,6 +46,7 @@ Level.defaultProps = {
   ...modifiers.defaultProps,
   children: null,
   className: undefined,
+  mobile: false,
   style: undefined,
   breakpoint: undefined,
   renderAs: 'div',
diff --git a/src/components/level/level.story.js b/src/components/level/level.story.js
index 85837e1..4c5f563 100644
--- a/src/components/level/level.story.js
+++ b/src/components/level/level.story.js
@@ -15,15 +15,13 @@ const style = { textAlign: 'center' };
 
 storiesOf('Level', module)
   .addDecorator(story => (
-    <Hero size="fullheight" >
+    <Hero size="fullheight">
       <Hero.Head renderAs="header">
-        <Container>
-          {story()}
-        </Container>
+        <Container>{story()}</Container>
       </Hero.Head>
     </Hero>
   ))
-  .add('Default', (() => (
+  .add('Default', () => (
     <Section>
       <Box>
         <Level renderAs="nav">
@@ -39,74 +37,76 @@ storiesOf('Level', module)
                   <Input placeholder="Find a post" />
                 </Control>
                 <Control>
-                  <Button renderAs="button">
-                  Search
-                  </Button>
+                  <Button renderAs="button">Search</Button>
                 </Control>
               </Field>
             </Level.Item>
           </Level.Side>
 
           <Level.Side align="right">
-            <Level.Item><strong>All</strong></Level.Item>
-            <Level.Item><a>Published</a></Level.Item>
-            <Level.Item><a>Drafts</a></Level.Item>
-            <Level.Item><a>Deleted</a></Level.Item>
-            <Level.Item><Button renderAs="a" color="success">New</Button></Level.Item>
+            <Level.Item>
+              <strong>All</strong>
+            </Level.Item>
+            <Level.Item>
+              <a>Published</a>
+            </Level.Item>
+            <Level.Item>
+              <a>Drafts</a>
+            </Level.Item>
+            <Level.Item>
+              <a>Deleted</a>
+            </Level.Item>
+            <Level.Item>
+              <Button renderAs="a" color="success">
+                New
+              </Button>
+            </Level.Item>
           </Level.Side>
         </Level>
       </Box>
     </Section>
-  )))
-  .add('Items Centered', (() => (
+  ))
+  .add('Items Centered', () => (
     <Section>
       <Box>
         <Level renderAs="nav">
           <Level.Item style={style}>
             <div>
               <Heading renderAs="p" heading>
-              Tweets
-              </Heading>
-              <Heading renderAs="p">
-              3,210
+                Tweets
               </Heading>
+              <Heading renderAs="p">3,210</Heading>
             </div>
           </Level.Item>
           <Level.Item style={style}>
             <div>
               <Heading renderAs="p" heading>
-              Following
-              </Heading>
-              <Heading renderAs="p">
-              210
+                Following
               </Heading>
+              <Heading renderAs="p">210</Heading>
             </div>
           </Level.Item>
           <Level.Item style={style}>
             <div>
               <Heading renderAs="p" heading>
-              Followers
-              </Heading>
-              <Heading renderAs="p">
-              321
+                Followers
               </Heading>
+              <Heading renderAs="p">321</Heading>
             </div>
           </Level.Item>
           <Level.Item style={style}>
             <div>
               <Heading renderAs="p" heading>
-              Likes
-              </Heading>
-              <Heading renderAs="p">
-              321K
+                Likes
               </Heading>
+              <Heading renderAs="p">321K</Heading>
             </div>
           </Level.Item>
         </Level>
       </Box>
     </Section>
-  )))
-  .add('With breakpoint', (() => (
+  ))
+  .add('With breakpoint', () =>
     ['mobile', null].map(breakpoint => (
       <Section>
         <Heading>{breakpoint || 'Without breakpoint'}</Heading>
@@ -115,45 +115,77 @@ storiesOf('Level', module)
             <Level.Item style={style}>
               <div>
                 <Heading renderAs="p" heading>
-                Tweets
-                </Heading>
-                <Heading renderAs="p">
-                3,210
+                  Tweets
                 </Heading>
+                <Heading renderAs="p">3,210</Heading>
               </div>
             </Level.Item>
             <Level.Item style={style}>
               <div>
                 <Heading renderAs="p" heading>
-                Following
-                </Heading>
-                <Heading renderAs="p">
-                210
+                  Following
                 </Heading>
+                <Heading renderAs="p">210</Heading>
               </div>
             </Level.Item>
             <Level.Item style={style}>
               <div>
                 <Heading renderAs="p" heading>
-                Followers
-                </Heading>
-                <Heading renderAs="p">
-                321
+                  Followers
                 </Heading>
+                <Heading renderAs="p">321</Heading>
               </div>
             </Level.Item>
             <Level.Item style={style}>
               <div>
                 <Heading renderAs="p" heading>
-                Likes
-                </Heading>
-                <Heading renderAs="p">
-                321K
+                  Likes
                 </Heading>
+                <Heading renderAs="p">321K</Heading>
               </div>
             </Level.Item>
           </Level>
         </Box>
       </Section>
-    ))
-  )));
+    )),
+  )
+  .add('Horizontal level on mobile', () => (
+    <Section>
+      <Box>
+        <Level mobile renderAs="nav">
+          <Level.Item style={style}>
+            <div>
+              <Heading renderAs="p" heading>
+                Tweets
+              </Heading>
+              <Heading renderAs="p">3,210</Heading>
+            </div>
+          </Level.Item>
+          <Level.Item style={style}>
+            <div>
+              <Heading renderAs="p" heading>
+                Following
+              </Heading>
+              <Heading renderAs="p">210</Heading>
+            </div>
+          </Level.Item>
+          <Level.Item style={style}>
+            <div>
+              <Heading renderAs="p" heading>
+                Followers
+              </Heading>
+              <Heading renderAs="p">321</Heading>
+            </div>
+          </Level.Item>
+          <Level.Item style={style}>
+            <div>
+              <Heading renderAs="p" heading>
+                Likes
+              </Heading>
+              <Heading renderAs="p">321K</Heading>
+            </div>
+          </Level.Item>
+        </Level>
+      </Box>
+    </Section>
+  ));


Test patch:
diff --git a/src/components/level/__test__/__snapshots__/level.test.js.snap b/src/components/level/__test__/__snapshots__/level.test.js.snap
index f7a3140..cc01cc1 100644
--- a/src/components/level/__test__/__snapshots__/level.test.js.snap
+++ b/src/components/level/__test__/__snapshots__/level.test.js.snap
@@ -16,6 +16,36 @@ exports[`Level component Should expose Level Side and Item 1`] = `[Function]`;
 
 exports[`Level component Should expose Level Side and Item 2`] = `[Function]`;
 
+exports[`Level component Should have is-mobile class if mobile prop is true 1`] = `
+<div
+  className="level is-mobile"
+>
+  <div
+    className="level-left"
+  >
+    <div
+      className="level-item"
+    >
+      Item 1
+    </div>
+    <div
+      className="level-item"
+    >
+      Item 2
+    </div>
+  </div>
+  <div
+    className="level-right"
+  >
+    <div
+      className="level-item"
+    >
+      Item 3
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Level component Should have level classname 1`] = `
 <div
   className="level"
diff --git a/src/components/level/__test__/level.test.js b/src/components/level/__test__/level.test.js
index ab51f99..3bd9859 100644
--- a/src/components/level/__test__/level.test.js
+++ b/src/components/level/__test__/level.test.js
@@ -66,4 +66,18 @@ Item 3
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should have is-mobile class if mobile prop is true', () => {
+    const component = renderer.create(
+      <Level mobile>
+        <Level.Side>
+          <Level.Item>Item 1</Level.Item>
+          <Level.Item>Item 2</Level.Item>
+        </Level.Side>
+        <Level.Side align="right">
+          <Level.Item>Item 3</Level.Item>
+        </Level.Side>
+      </Level>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });