header-react-ui - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/cjs/index.js

@@ -212,6 +212,6 @@ 'use strict';
 
-var css_248z = "body {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.logo {\n  color: black;\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
+var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
 styleInject(css_248z);
 
-var NavbarDefault = function () {
+var NavbarDefault = function (props) {
     var _a = React.useState(false), navbarOpen = _a[0], setNavbarOpen = _a[1];
@@ -237,3 +237,3 @@ var handleLinkClick = function () {
         React__default["default"].createElement("nav", { className: "deskTopNav" },
-            React__default["default"].createElement("h1", null, "Logo"),
+            React__default["default"].createElement("div", { className: "logo" }, props.logo),
             React__default["default"].createElement("ul", { className: "deskTopUl" }, links.map(function (link, id) { return (React__default["default"].createElement("li", { className: "deskTopLi", key: id },
@@ -243,3 +243,3 @@ React__default["default"].createElement("a", { className: "deskTopLi", href: link.link }, link.name))); }))),
             React__default["default"].createElement("div", { className: "mobileNavBlock" },
-                React__default["default"].createElement("h1", { className: "logo" }, "Logo"),
+                React__default["default"].createElement("div", { className: "logo" }, props.logo),
                 React__default["default"].createElement("div", { className: "hamburger" },
@@ -246,0 +246,0 @@ React__default["default"].createElement(Squash, { toggled: navbarOpen, toggle: setNavbarOpen, duration: 0.3, easing: "ease-in", color: "#000000" }))),

dist/cjs/types/components/NavBarDefault/NavBarDefault.d.ts

@@ -1,4 +0,7 @@
-/// <reference types="react" />
-import "./NavBarDefault.scss";
-declare const NavbarDefault: () => JSX.Element;
+import React from "react";
+import "./styles/NavBarDefault.scss";
+export interface Props {
+    logo: React.ReactNode;
+}
+declare const NavbarDefault: (props: Props) => JSX.Element;
 export default NavbarDefault;

dist/cjs/types/components/NavBarDefault/NavBarDefault.stories.d.ts

 import { Story, Meta } from "@storybook/react";
+import { Props } from "./NavBarDefault";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Default: Story<import("@storybook/react").Args>;
+export declare const Default: Story<Props>;

dist/esm/index.js

@@ -204,6 +204,6 @@ import React, { useState, useEffect } from 'react';
 
-var css_248z = "body {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.logo {\n  color: black;\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
+var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
 styleInject(css_248z);
 
-var NavbarDefault = function () {
+var NavbarDefault = function (props) {
     var _a = useState(false), navbarOpen = _a[0], setNavbarOpen = _a[1];
@@ -229,3 +229,3 @@ var handleLinkClick = function () {
         React.createElement("nav", { className: "deskTopNav" },
-            React.createElement("h1", null, "Logo"),
+            React.createElement("div", { className: "logo" }, props.logo),
             React.createElement("ul", { className: "deskTopUl" }, links.map(function (link, id) { return (React.createElement("li", { className: "deskTopLi", key: id },
@@ -235,3 +235,3 @@ React.createElement("a", { className: "deskTopLi", href: link.link }, link.name))); }))),
             React.createElement("div", { className: "mobileNavBlock" },
-                React.createElement("h1", { className: "logo" }, "Logo"),
+                React.createElement("div", { className: "logo" }, props.logo),
                 React.createElement("div", { className: "hamburger" },
@@ -238,0 +238,0 @@ React.createElement(Squash, { toggled: navbarOpen, toggle: setNavbarOpen, duration: 0.3, easing: "ease-in", color: "#000000" }))),

dist/esm/types/components/NavBarDefault/NavBarDefault.d.ts

@@ -1,4 +0,7 @@
-/// <reference types="react" />
-import "./NavBarDefault.scss";
-declare const NavbarDefault: () => JSX.Element;
+import React from "react";
+import "./styles/NavBarDefault.scss";
+export interface Props {
+    logo: React.ReactNode;
+}
+declare const NavbarDefault: (props: Props) => JSX.Element;
 export default NavbarDefault;

dist/esm/types/components/NavBarDefault/NavBarDefault.stories.d.ts

 import { Story, Meta } from "@storybook/react";
+import { Props } from "./NavBarDefault";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Default: Story<import("@storybook/react").Args>;
+export declare const Default: Story<Props>;

dist/index.d.ts

 /// <reference types="react" />
+import React from 'react';
+
 interface ButtonProps {
@@ -7,4 +9,7 @@ label: string;
 
-declare const NavbarDefault: () => JSX.Element;
+interface Props {
+    logo: React.ReactNode;
+}
+declare const NavbarDefault: (props: Props) => JSX.Element;
 
 export { Button, NavbarDefault as NavBarDefault };

package.json

 {
   "name": "header-react-ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "A react ui library with functional headers",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73140

increased by1.37%

Number of package files

37

increased by5.71%

Lines of code

646

increased by2.87%

No dependency changes