Merge pull request #33 from nutboltu/docs/update-readme

fix: hide svg and update readme

Author: nutboltu

README.md

@@ -1,6 +1,6 @@
 # Storybook Addon Mock Request
 
-[![dependencies Status](https://david-dm.org/nutboltu/storybook-addon-mock/status.svg)](https://david-dm.org/nutboltu/storybook-addon-mock)  [![Actions Status](https://github.com/nutboltu/storybook-addon-mock/workflows/CI/badge.svg)](https://github.com/nutboltu/storybook-addon-mock/actions)
+[![dependencies Status](https://david-dm.org/nutboltu/storybook-addon-mock/status.svg)](https://david-dm.org/nutboltu/storybook-addon-mock)  [![Actions Status](https://github.com/nutboltu/storybook-addon-mock/workflows/CI/badge.svg)](https://github.com/nutboltu/storybook-addon-mock/actions) ![npm](https://img.shields.io/npm/dm/storybook-addon-mock.svg) [![npm version](https://badge.fury.io/js/storybook-addon-mock.svg)](https://badge.fury.io/js/storybook-addon-mock)
 
 <a href="https://twitter.com/intent/follow?screen_name=nutboltu">
    <img src="https://img.shields.io/twitter/follow/nutboltu.svg?label=Follow%20@nutboltu" alt="Follow @nutboltu" />
@@ -10,6 +10,8 @@
 
 This addon allows you to mock fetch or XMLHttprequest requests in storybook. If your component depends on backend apis, and your backend apis are not ready yet to feed your component, then this addon provides mock response to build your component.
 
+[Live Demo](https://nutboltu.github.io/storybook-addon-mock)
+
 ## Why we need this
 
 There are few packages those help the developers to mock the backend apis while building components. But those packages aren't integrated properly in storybook and also there's no scope to play with those apis in the storybook. `storybook-addon-mock` provides a dedicated panel in the storybook which helps the developer to view and update the apis with multiple scenarios.
@@ -96,4 +98,4 @@ storiesOf('Mock Response Story', module)
 
 ## License
 
-MIT Licensed. Copyright (c) Farhad Yasir.
+This project is licensed under the MIT License - see the LICENSE file in the source code for details.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-mock",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "A storybook addon to mock http request",
   "main": "dist/index.js",
   "scripts": {

src/components/Field/styled.js

@@ -17,9 +17,19 @@ export const FieldContainer = styled.div`
 export const Label = styled.div`
     font-weight: 700;
     flex: 0.3 0 0;
+    min-width: 60px;
+    font-size: 14px;
 `;
 
 export const FieldItem = styled.div`
     display: flex;
     flex: 0.7 0 0;
+    font-size: 14px;
+
+    > div > div > svg > path {
+        opacity: 0;
+    }
+    > div > div > div > span > div > div > svg > path {
+        opacity: 0;
+    }
 `;

src/components/RequestItem/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import JSONInput from 'react-json-editor-ajrm';
-import { Checkbox, Row, Container } from './styled';
+import { Checkbox, Row, Container, Select } from './styled';
 import { Field } from '../Field';
 import statusTextMap from '../../utils/statusMap';
 
@@ -32,7 +32,7 @@ export const RequestItem = ({
             <Row>
                 <Field label="Method"> {method} </Field>
                 <Field label="Status">
-                    <select onChange={onStatusChange}>
+                    <Select onChange={onStatusChange}>
                         {statusCodes.map((option) => (
                             <option
                                 key={option}
@@ -41,7 +41,7 @@ export const RequestItem = ({
                                 {option}
                             </option>
                         ))}
-                    </select>
+                    </Select>
                 </Field>
             </Row>
 
@@ -62,6 +62,10 @@ export const RequestItem = ({
                         warningBox: {
                             background: 'white',
                         },
+                        body: {
+                            fontFamily: 'inherit',
+                            fontSize: '12px',
+                        },
                     }}
                     waitAfterKeyPress={1000}
                     height="120px"

src/components/RequestItem/styled.js

@@ -11,6 +11,14 @@ export const Checkbox = styled.input`
     width: 20px;
 `;
 
+export const Select = styled.select`
+    height: 24px;
+    width: 60px;
+    border-radius: 2px;
+    border: 1px solid;
+    font-size: 14px;
+`;
+
 export const Row = styled.div`
     display: flex;
     flex-direction: row;