@integrigo/integrigo-ui 1.1.4 → 1.1.5

package/lib/components/atoms/Nav/Nav.d.ts

@@ -0,0 +1,4 @@
+export interface NavProps {
+    active?: boolean;
+}
+export declare const Nav: import("styled-components").StyledComponent<"nav", any, NavProps, never>;

package/lib/components/atoms/Nav/Nav.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<import("styled-components").StyledComponent<"nav", any, import("./Nav").NavProps, never>>;
+export default _default;
+export declare const Basic: ComponentStory<import("styled-components").StyledComponent<"nav", any, import("./Nav").NavProps, never>>;
+export declare const Active: ComponentStory<import("styled-components").StyledComponent<"nav", any, import("./Nav").NavProps, never>>;

package/lib/components/atoms/Nav/index.d.ts

@@ -0,0 +1 @@
+export { Nav } from './Nav';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/atoms/Nav/Nav.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Nav } from './Nav';
+
+export default {
+  title: 'Atoms/Nav',
+  component: Nav,
+} as ComponentMeta<typeof Nav>;
+
+const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args}>The Nav text</Nav>;
+
+export const Basic = Template.bind({});
+Basic.args = {};
+
+export const Active = Template.bind({});
+Active.args = {
+  active: true
+};

package/src/components/atoms/Nav/Nav.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export interface NavProps {
+  active?: boolean;
+}
+
+export const Nav = styled.nav<NavProps>`
+  font-size: var(--font-size-l);
+  font-weight: ${p => p.active ? 'var(--font-bold)' : 'var(--font-medium)'};
+  cursor: pointer;
+  white-space: nowrap;
+  width: min-content;
+  transition: color var(--transition-speed);
+
+  &:hover {
+    color: ${p => p.active ? 'auto' : 'var(--color-green)' };
+  }
+`
+
+Nav.displayName = 'Nav'

package/src/components/atoms/Nav/index.ts

@@ -0,0 +1 @@
+export { Nav } from './Nav'