@coders-tokyo/app-wrapper - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/components/header/style.js

@@ -5,3 +5,3 @@ "use strict";
 var constants_1 = require("../../style/constants");
-exports.headerStyle = "\n  .AppWrapper-header {\n    box-sizing: border-box;\n    height: 60px;\n    width: 100%;\n    display: flex;\n    margin: 0 auto;\n    background: " + constants_1.white + ";\n    padding: 10px 15px;\n    position: fixed;\n    top: 0;\n    left: 0;\n    box-shadow: " + constants_1.shadowDepth1 + ";\n  }\n\n  .AppWrapper-left-header, .AppWrapper-right-header {\n    display: flex;\n    align-items: center;\n  }\n\n  .AppWrapper-right-header {\n    margin-left: auto;\n  }\n\n  .AppWrapper-user-avatar-header {\n    width: 40px;\n    height: 40px;\n    border-radius: 100%;\n    margin-right: 5px;\n  }\n\n  .AppWrapper-user-name-header {\n    display: none;\n    color: " + constants_1.gray + ";\n  }\n\n  .AppWrapper-logo-header {\n    height: 30px;\n    position: absolute;\n    left: 55px;\n  }\n\n  .AppWrapper-welcome-header {\n    display: none;\n    flex-direction: column;\n    margin-right: 12px;\n    text-align: right;\n  }\n\n  .AppWrapper-welcome-header small {\n    color: rgba(0, 0, 0, .4);\n    font-size: 12px;\n  }\n\n  .AppWrapper-welcome-header span {\n    color: rgba(50, 50, 50, .8);\n    font-size: 14px;\n  }\n\n  " + breakpoint_1.mediaBreakPointUp('medium', "\n  .AppWrapper-logo-header {\n    position: initial;\n    margin-right: 30px;\n  }\n  ") + "\n\n  " + breakpoint_1.mediaBreakPointUp('medium', "\n  .AppWrapper-user-name-header {\n    display: block;\n  }\n  ") + "\n  \n";
+exports.headerStyle = "\n  .AppWrapper-header {\n    box-sizing: border-box;\n    height: 60px;\n    width: 100%;\n    display: flex;\n    margin: 0 auto;\n    background: " + constants_1.white + ";\n    padding: 10px 15px;\n    position: fixed;\n    top: 0;\n    left: 0;\n    box-shadow: " + constants_1.shadowDepth1 + ";\n    z-index: 3;\n  }\n\n  .AppWrapper-left-header, .AppWrapper-right-header {\n    display: flex;\n    align-items: center;\n  }\n\n  .AppWrapper-right-header {\n    margin-left: auto;\n  }\n\n  .AppWrapper-user-avatar-header {\n    width: 40px;\n    height: 40px;\n    border-radius: 100%;\n    margin-right: 5px;\n  }\n\n  .AppWrapper-user-name-header {\n    display: none;\n    color: " + constants_1.gray + ";\n  }\n\n  .AppWrapper-logo-header {\n    height: 26px;\n    position: absolute;\n    left: 55px;\n  }\n\n  .AppWrapper-welcome-header {\n    display: none;\n    flex-direction: column;\n    margin-right: 12px;\n    text-align: right;\n  }\n\n  .AppWrapper-welcome-header small {\n    color: rgba(0, 0, 0, .4);\n    font-size: 12px;\n  }\n\n  .AppWrapper-welcome-header span {\n    color: rgba(50, 50, 50, .8);\n    font-size: 14px;\n  }\n\n  " + breakpoint_1.mediaBreakPointUp('medium', "\n  .AppWrapper-logo-header {\n    height: 30px;\n    position: initial;\n    margin-right: 30px;\n  }\n  ") + "\n\n  " + breakpoint_1.mediaBreakPointUp('medium', "\n  .AppWrapper-user-name-header {\n    display: block;\n  }\n  ") + "\n  \n";
 //# sourceMappingURL=style.js.map

dist/style/index.js

 
   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
-  exports.appWrapperStyle = ".AppWrapper-header{-webkit-box-sizing:border-box;box-sizing:border-box;height:60px;width:100%;margin:0 auto;background:#fff;padding:10px 15px;position:fixed;top:0;left:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.05)}.AppWrapper-header,.AppWrapper-left-header,.AppWrapper-right-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.AppWrapper-left-header,.AppWrapper-right-header{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.AppWrapper-right-header{margin-left:auto}.AppWrapper-user-avatar-header{width:40px;height:40px;border-radius:100%;margin-right:5px}.AppWrapper-user-name-header{display:none;color:#627182}.AppWrapper-logo-header{height:30px;position:absolute;left:55px}.AppWrapper-welcome-header{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-right:12px;text-align:right}.AppWrapper-welcome-header small{color:rgba(0,0,0,.4);font-size:12px}.AppWrapper-welcome-header span{color:rgba(50,50,50,.8);font-size:14px}@media (min-width:768px){.AppWrapper-logo-header{position:static;margin-right:30px}}@media (min-width:768px){.AppWrapper-user-name-header{display:block}}.AppWrapper-menu-wrapper{background-color:#fff}.bm-burger-button{position:fixed;width:20px;height:15px;left:15px;top:23px}.bm-burger-bars{background-color:#627182}.bm-cross-button{height:24px;width:24px}.bm-cross{background:#bdc3c7}.bm-menu-wrap{position:fixed;height:100%;top:62px;left:0}.bm-menu{background:#fff;font-size:1.15em}.bm-item-list{color:#627182}.bm-item{display:inline-block}.bm-item:focus{outline:none}.bm-overlay{left:0;top:62px}.AppWrapper-mobile-menu-item{display:block;padding:15px;text-decoration:none;color:#627182}.AppWrapper-mobile-menu-item.active{border-left:5px solid #be1313}@media (min-width:768px){.AppWrapper-mobile-menu{display:none}}.AppWrapper-desktop-menu{display:none}.AppWrapper-desktop-menu-item{color:#627182;display:inline-block;height:55px;margin-right:30px;text-decoration:none}.AppWrapper-desktop-menu-item:hover{color:#000}.AppWrapper-desktop-menu-item.active{border-bottom:5px solid #be1313}.AppWrapper-desktop-menu-item-text{line-height:55px}@media (min-width:768px){.AppWrapper-desktop-menu{display:block}}";
+  exports.appWrapperStyle = ".AppWrapper-header{-webkit-box-sizing:border-box;box-sizing:border-box;height:60px;width:100%;margin:0 auto;background:#fff;padding:10px 15px;position:fixed;top:0;left:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.05);box-shadow:0 1px 3px rgba(0,0,0,.05);z-index:3}.AppWrapper-header,.AppWrapper-left-header,.AppWrapper-right-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.AppWrapper-left-header,.AppWrapper-right-header{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.AppWrapper-right-header{margin-left:auto}.AppWrapper-user-avatar-header{width:40px;height:40px;border-radius:100%;margin-right:5px}.AppWrapper-user-name-header{display:none;color:#627182}.AppWrapper-logo-header{height:26px;position:absolute;left:55px}.AppWrapper-welcome-header{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-right:12px;text-align:right}.AppWrapper-welcome-header small{color:rgba(0,0,0,.4);font-size:12px}.AppWrapper-welcome-header span{color:rgba(50,50,50,.8);font-size:14px}@media (min-width:768px){.AppWrapper-logo-header{height:30px;position:static;margin-right:30px}}@media (min-width:768px){.AppWrapper-user-name-header{display:block}}.AppWrapper-menu-wrapper{background-color:#fff}.bm-burger-button{position:fixed;width:20px;height:15px;left:15px;top:23px}.bm-burger-bars{background-color:#627182}.bm-cross-button{height:24px;width:24px}.bm-cross{background:#bdc3c7}.bm-menu-wrap{position:fixed;height:100%;top:62px;left:0}.bm-menu{background:#fff;font-size:1.15em}.bm-item-list{color:#627182}.bm-item{display:inline-block}.bm-item:focus{outline:none}.bm-overlay{left:0;top:62px}.AppWrapper-mobile-menu-item{display:block;padding:15px;text-decoration:none;color:#627182}.AppWrapper-mobile-menu-item.active{border-left:5px solid #be1313}@media (min-width:768px){.AppWrapper-mobile-menu{display:none}}.AppWrapper-desktop-menu{display:none}.AppWrapper-desktop-menu-item{color:#627182;display:inline-block;height:55px;margin-right:30px;text-decoration:none}.AppWrapper-desktop-menu-item:hover{color:#000}.AppWrapper-desktop-menu-item.active{border-bottom:5px solid #be1313}.AppWrapper-desktop-menu-item-text{line-height:55px}@media (min-width:768px){.AppWrapper-desktop-menu{display:block}}";
   

package.json

 {
   "name": "@coders-tokyo/app-wrapper",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "dependencies": {

README.md

@@ -13,2 +13,4 @@ # AppWrapper
 
+**with user model**
+
 ```js
@@ -19,2 +21,19 @@ import { AppWrapper, appWrapperStyle } from './app-wrapper';
 
+const user = {
+  name: 'abc';
+  picture: 'avatar.png';
+};
+
+<AppWrapper user={user}>
+  <main>Hello World</main>
+</AppWrapper>
+```
+
+**without user model**
+
+```js
+import { AppWrapper, appWrapperStyle } from './app-wrapper';
+
+<style dangerouslySetInnerHTML={{ __html: appWrapperStyle }} />
+
 <AppWrapper>
@@ -24,1 +43,9 @@ <main>Hello World</main>
 ```
+
+## Props
+
+### user?
+
+> `User` { name, picture? }
+
+User information

src/app-wrapper/components/header/style.ts

@@ -17,2 +17,3 @@ import { mediaBreakPointUp } from '../../utils/breakpoint';
     box-shadow: ${shadowDepth1};
+    z-index: 3;
   }
@@ -42,3 +43,3 @@
   .AppWrapper-logo-header {
-    height: 30px;
+    height: 26px;
     position: absolute;
@@ -69,2 +70,3 @@ left: 55px;
   .AppWrapper-logo-header {
+    height: 30px;
     position: initial;
@@ -71,0 +73,0 @@ margin-right: 30px;

No alert changes

Improved metrics

Total package byte prevSize

399716

increased by0.12%

Lines of code

981

increased by0.2%

Number of lines in readme file

49

increased by122.73%

No dependency changes