Merge pull request #59 from strapi/new-ui

New ui

Author: soupette

docs/stories/components/Header.stories.js renamed to docs/stories/customComponents/Header.stories.js

@@ -135,7 +135,11 @@ function InputStory() {
           <form onSubmit={() => {}}>
             <div className="row">
               {Object.keys(form).map(input => (
-                <div className={form[input].styleName} key={input}>
+                <div
+                  className={form[input].styleName}
+                  key={input}
+                  style={{ marginBottom: 4 }}
+                >
                   <Inputs
                     customInputs={{ custom: Foo }}
                     name={input}

docs/stories/customComponents/Inputs.stories.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 /* eslint-disable import/no-extraneous-dependencies */
 import { storiesOf } from '@storybook/react';
 import {
+  Arrow,
   Grab,
   GrabLarge,
   Pencil,
@@ -27,6 +28,10 @@ import Pre from '../ui/Pre';
 
 const IconsStory = () => {
   const icons = [
+    {
+      name: 'arrow',
+      Compo: Arrow,
+    },
     {
       name: 'bool',
       Compo: Bool,

docs/stories/icons/icons.stories.js

@@ -16,7 +16,7 @@ body {
   }
   section div {
     &.row {
-      margin-bottom: ${sizes.margin * 1.8}px;
+      margin-bottom: ${sizes.margin * 2}px;
     }
     &.btn-wrapper {
       display: inline-block;

docs/stories/ui/Global.js

@@ -9,10 +9,10 @@ import { colors, sizes } from '@buffetjs/styles';
 
 const Wrapper = styled.div`
   position: relative;
-  padding-bottom: ${sizes.margin * 2.7}px;
+  padding-bottom: ${sizes.margin * 2.3}px;
   label {
     display: block;
-    margin-bottom: 1rem;
+    margin-bottom: 1rem; 
   }
   > p {
     width 100%;

packages/buffetjs-custom/src/components/Inputs/Wrapper.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Arrow = props => (
+  <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M8.70908786,0.724302898 C8.70908786,0.79993292 8.67999939,0.8668364 8.62182245,0.92501334 L4.55525437,4.99158142 C4.49707743,5.04975836 4.43017395,5.07884683 4.35454393,5.07884683 C4.27891391,5.07884683 4.21201043,5.04975836 4.15383349,4.99158142 L0.0872654094,0.92501334 C0.0290884698,0.8668364 1.15463195e-14,0.79993292 1.15463195e-14,0.724302898 C1.15463195e-14,0.648672877 0.0290884698,0.581769396 0.0872654094,0.523592457 L0.523592457,0.0872654094 C0.581769396,0.0290884698 0.648672877,6.17284002e-14 0.724302898,6.17284002e-14 C0.79993292,6.17284002e-14 0.8668364,0.0290884698 0.92501334,0.0872654094 L4.35454393,3.516796 L7.78407452,0.0872654094 C7.84225146,0.0290884698 7.90915494,6.17284002e-14 7.98478496,6.17284002e-14 C8.06041499,6.17284002e-14 8.12731847,0.0290884698 8.18549541,0.0872654094 L8.62182245,0.523592457 C8.67999939,0.581769396 8.70908786,0.648672877 8.70908786,0.724302898 Z"
+      id="Path"
+      fillRule="nonzero"
+      transform="translate(4.354544, 2.539423) scale(-1, -1) translate(-4.354544, -2.539423) "
+    ></path>
+    <rect id="Rectangle" x="3.8" y="1" width="1.2" height="8" rx="0.2"></rect>
+  </svg>
+);
+
+Arrow.defaultProps = {
+  fill: '#fff',
+};
+
+Arrow.propTypes = {
+  fill: PropTypes.string,
+};
+
+export default Arrow;

packages/buffetjs-icons/src/components/Arrow/index.js

@@ -1,3 +1,4 @@
+export { default as Arrow } from './components/Arrow';
 export { default as Bool } from './components/Bool';
 export { default as Calendar } from './components/Calendar';
 export { default as ContentType } from './components/ContentType';

packages/buffetjs-icons/src/components/Remove/Icon.js

@@ -10,6 +10,7 @@ const colors = {
   brightGrey: '#9ea7b8',
   lightGrey: '#E3E9F3',
   lightGreyAlpha: 'rgba(0,0,0,0.1)',
+  orange: '#F64D0A',
   darkOrange: '#F64D0A',
   orangeBorder: 'rgba(255, 0, 0, 0.2)',
   orangeBkgd: 'rgba(255, 0, 0, 0.15)',

packages/buffetjs-icons/src/index.js

@@ -3,7 +3,7 @@ const sizes = {
   desktop: '1024px',
   wide: '1280px',
   margin: '10',
-  radius: '3px',
+  radius: '2px',
   button: {
     height: {
       small: '26px',

packages/buffetjs-styles/src/assets/styles/colors.js

@@ -4,7 +4,7 @@ import sizes from '../../assets/styles/sizes';
 import Icon from '../Icon';
 
 const PrefixIcon = styled(Icon)`
-  margin-right: ${sizes.margin * 0.8}px;
+  margin-right: ${sizes.margin}px;
   font-size: 0.94em;
 `;
 

packages/buffetjs-styles/src/assets/styles/sizes.js

@@ -32,6 +32,9 @@ const Button = styled.button`
   &:active {
     ${mixins(colors.lightGreyAlpha).bshadow};
   }
+  &:focus {
+    outline: 0;
+  }
 
   // Specific style
   ${props =>
@@ -73,9 +76,9 @@ const Button = styled.button`
   ${props =>
     props.color === 'delete' &&
     `
-      border: 1px solid ${colors.orangeBorder};
-      background-color: ${colors.orangeBkgd};
-      color: ${colors.darkOrange};
+      border: 1px solid ${colors.orange};
+      background-color: ${colors.orange};
+      color: ${colors.white};
       padding: 0 ${sizes.button.padding.small};
     `}
 

packages/buffetjs-styles/src/components/Button/PrefixIcon.js

@@ -7,7 +7,7 @@ exports[`<Button /> <Button /> icons should render a custom icon 1`] = `
   font-weight: 500;
   font-size: 1.3rem;
   line-height: normal;
-  border-radius: 3px;
+  border-radius: 2px;
   cursor: pointer;
   outline: 0;
   background-color: #ffffff;
@@ -28,6 +28,10 @@ exports[`<Button /> <Button /> icons should render a custom icon 1`] = `
   box-shadow: inset 0 0 30px [object Object];
 }
 
+.c0:focus {
+  outline: 0;
+}
+
 .c0:disabled {
   background-color: red;
 }
@@ -51,7 +55,7 @@ exports[`<Button /> <Button /> icons should render the add icon 1`] = `
   font-weight: 500;
   font-size: 1.3rem;
   line-height: normal;
-  border-radius: 3px;
+  border-radius: 2px;
   cursor: pointer;
   outline: 0;
   background-color: #ffffff;
@@ -72,6 +76,10 @@ exports[`<Button /> <Button /> icons should render the add icon 1`] = `
   box-shadow: inset 0 0 30px [object Object];
 }
 
+.c0:focus {
+  outline: 0;
+}
+
 .c0:disabled {
   background-color: red;
 }
@@ -95,7 +103,7 @@ exports[`<Button /> <Button /> icons should render the add trash 1`] = `
   font-weight: 500;
   font-size: 1.3rem;
   line-height: normal;
-  border-radius: 3px;
+  border-radius: 2px;
   cursor: pointer;
   outline: 0;
   background-color: #ffffff;
@@ -116,6 +124,10 @@ exports[`<Button /> <Button /> icons should render the add trash 1`] = `
   box-shadow: inset 0 0 30px [object Object];
 }
 
+.c0:focus {
+  outline: 0;
+}
+
 .c0:disabled {
   background-color: red;
 }

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

@@ -85,7 +85,7 @@ describe('<Button />', () => {
 
     it('should render the delete style', () => {
       const tree = renderer.create(<Button color="delete" />).toJSON();
-      expect(tree).toHaveStyleRule('color', colors.darkOrange);
+      expect(tree).toHaveStyleRule('color', colors.white);
     });
   });
 });

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

@@ -10,7 +10,7 @@ const Header = styled.div`
   margin-bottom: 30px;
   position: relative;
   width: 100%;
-  height: 40px;
+  height: 50px;
   .justify-content-end {
     display: flex;
   }

packages/buffetjs-styles/src/components/Button/tests/index.test.js

@@ -5,7 +5,7 @@ exports[`<Header /> snapshot 1`] = `
   margin-bottom: 30px;
   position: relative;
   width: 100%;
-  height: 40px;
+  height: 50px;
 }
 
 .c0 .justify-content-end {

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

@@ -21,7 +21,7 @@ const Toggle = styled.input`
   & + span {
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
-    background-image: ${colors.orangeGradient};
+    background-color: ${colors.darkOrange};
     color: ${colors.white};
     & + span {
       color: ${colors.greyToggle};
@@ -37,7 +37,7 @@ const Toggle = styled.input`
     & + span {
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
-      background-image: ${colors.blueGradient};
+      background-color: ${colors.blue};
       color: ${colors.white};
       font-weight: 800;
     }