@iroco/ui 1.0.0-1 → 1.0.0-10

package/dist/NavBar.svelte

@@ -54,112 +54,58 @@ $:
 	<div class="nav__version">{version == null ? '' : version}</div>
 </nav>
 
-<style>.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
-.container-wide {
+<style>.container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 2560px) {
   .container-wide {
     max-width: 1620px;
   }
 }
-
 @media all and (max-width: 1800px) {
   .container-wide {
     max-width: 1280px;
   }
 }
-
 @media all and (max-width: 1440px) {
   .container-wide {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-wide {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-wide {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-wide {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-wide {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-wide {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-wide {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -167,49 +113,41 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1440px) {
   .container-large {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-large {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-large {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-large {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-large {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-large {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-large {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -217,43 +155,36 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1024px) {
   .container-medium {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-medium {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-medium {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-medium {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-medium {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-medium {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -261,69 +192,21 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 425px) {
   .container-small {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-small {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-small {
     max-width: calc(100% - 20px);
   }
 }
-
-.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -331,61 +214,51 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 2560px) {
   .container-wide {
     max-width: 1620px;
   }
 }
-
 @media all and (max-width: 1800px) {
   .container-wide {
     max-width: 1280px;
   }
 }
-
 @media all and (max-width: 1440px) {
   .container-wide {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-wide {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-wide {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-wide {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-wide {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-wide {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-wide {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -393,49 +266,41 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1440px) {
   .container-large {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-large {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-large {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-large {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-large {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-large {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-large {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -443,43 +308,36 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1024px) {
   .container-medium {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-medium {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-medium {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-medium {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-medium {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-medium {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -487,107 +345,90 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 425px) {
   .container-small {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-small {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-small {
     max-width: calc(100% - 20px);
   }
 }
-
 .iroco-ui-button {
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: none;
   flex-shrink: 0;
-  margin: 1em 0em;
+  margin: 1em 0;
   position: relative;
   text-transform: uppercase;
   border-radius: 0.3em;
 }
-
 .iroco-ui-button--basic {
-  background: #f2ebe3;
-  border: 1px solid #18151e;
+  color: var(--btn-basic-label);
+  background: var(--btn-basic-bg);
+  border: 1px solid var(--btn-basic-border);
 }
-
 .iroco-ui-button--dark {
-  background: #18151e;
-  color: #f2ebe3;
+  background: var(--dark-btn-primary-bg);
+  color: var(--dark-btn-primary-label);
 }
-
 .iroco-ui-button--success {
-  background: #00d692;
-  color: #18151e;
+  background: var(--color-success);
+  color: var(--btn-secondary-label);
 }
-
 .iroco-ui-button--danger {
-  background: #ff504d;
+  background: var(--color-danger);
 }
-
 .iroco-ui-button--regular {
   padding: 1em 2em;
 }
-
 .iroco-ui-button--small {
   padding: 0.5em 1em;
 }
-
 .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
-  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 0 10em var(--color-black-op-20);
 }
-
 .iroco-ui-button--dark:hover {
-  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
+  box-shadow: inset 0 0 0 10em var(--color-white-op-20);
 }
-
 .iroco-ui-button:active {
   box-shadow: none;
 }
-
-.iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+.iroco-ui-button.disabled, .iroco-ui-button:disabled {
+  background-color: var(--btn-disabled-bg);
+  color: var(--btn-disabled-label);
+  border-color: var(--btn-disabled-border);
   cursor: default;
 }
-
-.iroco-ui-button.disabled:hover {
+.iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
   box-shadow: none;
 }
-
 .iroco-ui-link {
   background: none;
   border: none;
   font-family: "Arial";
-  color: #f2ebe3;
+  color: var(--color-text);
   cursor: pointer;
 }
-
 .nav__sidebar__item, .nav__topbar__item {
   text-decoration: none;
   display: block;
   font-size: 1em;
 }
-
 .nav__sidebar__close, .nav__topbar__close {
   display: none;
 }
-
 .nav__sidebar {
   height: 100%;
   width: 300px;
@@ -598,57 +439,47 @@ $:
   display: flex;
   flex-direction: column;
 }
-
 .nav__sidebar__item-container {
   margin: 0;
   padding: 0;
 }
-
 .nav__sidebar__item {
   padding: 2em;
-  border-top: 1px solid #464452;
+  border-top: 1px solid var(--color-border);
 }
-
 .nav__sidebar__item:first-child {
   border-top: none;
 }
-
 .nav__sidebar .active {
-  border-top: 1px solid #00d692;
-  border-bottom: 1px solid #00d692;
+  border-top: 1px solid var(--color-primary);
+  border-bottom: 1px solid var(--color-primary);
 }
-
 .nav__topbar {
   flex-grow: 1;
   display: flex;
   justify-content: flex-end;
 }
-
 .nav__topbar ul,
 .nav__topbar li {
   display: inline;
 }
-
 .nav__topbar ul {
   display: flex;
   flex-grow: 1;
   justify-content: space-around;
 }
-
 .nav__topbar .active {
-  border-bottom: 1px solid #00d692;
+  border-bottom: 1px solid var(--color-primary);
 }
-
 .nav__version {
   margin-top: auto;
   padding-left: 2em;
-  color: #464452;
+  color: var(--color-text-dark);
 }
-
 @media all and (max-width: 768px) {
   .nav__sidebar, .nav__topbar {
     position: fixed;
-    background-color: #211d28;
+    background-color: var(--color-body);
     top: 0;
     right: 0;
     width: 100%;
@@ -673,21 +504,21 @@ $:
     top: 0;
     background-color: transparent;
     border: none;
-    color: #a9a29e;
+    color: var(--color-icon-primary);
   }
   .nav__sidebar {
     top: 0;
     left: 0;
   }
   .nav__sidebar__item:first-child {
-    border-top: 1px solid #464452;
+    border-top: 1px solid var(--color-border);
   }
   .nav__topbar {
     height: 100%;
   }
   .nav__topbar__item {
     padding: 2em;
-    border-top: 1px solid #464452;
+    border-top: 1px solid var(--color-border);
   }
   .nav__version {
     display: none;

package/dist/Navigation.stories.svelte

@@ -0,0 +1,48 @@
+<script context="module">
+	import Navigation from './Navigation.svelte';
+	import { NavigationItem, NavigationItemType } from './definition';
+
+	export const meta = {
+		title: 'Navigation',
+		component: Navigation,
+		argTypes: {
+			type: {
+				control: { type: 'select' },
+				options: ['sidebar', 'topbar']
+			},
+			title: {
+				control: { type: 'text' }
+			},
+			version: {
+				control: { type: 'text' }
+			},
+			color: {
+				control: { type: 'color' }
+			}
+		}
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+	<Navigation
+		{...args}
+		navigationItems={[
+			new NavigationItem('About', `/about`),
+			new NavigationItem('Foo', `/foo`),
+			new NavigationItem('Bar', `/bar`),
+			new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
+			new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
+			new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
+		]}
+	/>
+</Template>
+
+<Story name="Default" />
+<Story name="Sidebar" args={{ type: 'sidebar' }} />
+
+<Story name="Title" args={{ title: 'Alternative title' }} />
+<Story name="Color" args={{ color: '#ABCDEF' }} />