Merge pull request #65 from strapi/improve-header

Improve header

Author: virginieky

docs/package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
+    "develop": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
   "author": "",

docs/stories/customComponents/Header.stories.js

@@ -3,10 +3,25 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { Header } from '@buffetjs/custom';
+import { InputText } from '@buffetjs/core';
+import styled from 'styled-components';
 
 import Presentation from '../ui/Presentation';
 import Pre from '../ui/Pre';
 
+const Wrapper = styled.div`
+  padding-top: 9px;
+  margin-bottom: 35px;
+
+  .input-wrapper {
+    margin-left: 1.8rem;
+    height: 30px;
+    > input {
+      height: 30px;
+    }
+  }
+`;
+
 function HeaderStory() {
   const cta = {
     icon: 'fa fa-pencil',
@@ -26,6 +41,13 @@ function HeaderStory() {
       color: 'success',
       type: 'submit',
     },
+    // Passing custom component
+    {
+      Component: InputText,
+      className: 'input-wrapper',
+      name: 'example',
+      key: 'example',
+    },
   ];
 
   const props = {
@@ -39,9 +61,9 @@ function HeaderStory() {
 
   return (
     <Presentation title="Header" description="Display data.">
-      <div style={{ paddingTop: 9, marginBottom: 35 }}>
+      <Wrapper>
         <Header {...props} />
-      </div>
+      </Wrapper>
       <Pre>{source}</Pre>
     </Presentation>
   );
@@ -50,6 +72,21 @@ function HeaderStory() {
 const source = `
 import React, { useState } from 'react';
 import { Header } from '@buffetjs/custom';
+import { InputText } from '@buffetjs/core';
+import styled from 'styled-components';
+
+const Wrapper = styled.div\`
+  padding-top: 9px;
+  margin-bottom: 35px;
+
+  .input-wrapper {
+    margin-left: 1.8rem;
+    height: 30px;
+    > input {
+      height: 30px;
+    }
+  }
+\`;
 
 function Example() {
   const cta = {
@@ -70,6 +107,12 @@ function Example() {
       color: 'success',
       type: 'submit',
     },
+    // Passing custom component
+    {
+      Component: InputText,
+      className: 'input-wrapper',
+      name: 'example',
+    },
   ];
 
   const headerProps = {
@@ -82,7 +125,9 @@ function Example() {
   };
 
   return (
-    <Header {...headerProps} />
+    <Wrapper>
+      <Header {...headerProps} />
+    </Wrapper>
   );
 }`;
 

packages/buffetjs-core/src/components/HeaderActions/index.js

@@ -13,8 +13,12 @@ import Button from '../Button';
 function HeaderActions({ actions }) {
   return (
     <Wrapper>
-      {actions.map(action => {
-        const { disabled, title, onClick } = action;
+      {actions.map((action, index) => {
+        const { Component, disabled, title, onClick } = action;
+
+        if (Component) {
+          return <Component {...action} key={action.key || index} />;
+        }
 
         return (
           <Button

packages/buffetjs-styles/src/components/HeaderActions/index.js

@@ -12,7 +12,7 @@ const HeaderActions = styled.div`
   width: fit-content;
   max-width: 100%;
   padding-top: 1rem;
-  button {
+  > button {
     margin-right: 0;
     margin-left: 1.8rem;
     max-width: 100%;

packages/buffetjs-styles/src/components/HeaderActions/tests/__snapshots__/index.test.js.snap

@@ -17,7 +17,7 @@ exports[`<HeaderActions /> snapshot 1`] = `
   padding-top: 1rem;
 }
 
-.c0 button {
+.c0 > button {
   margin-right: 0;
   margin-left: 1.8rem;
   max-width: 100%;