@iroco/ui 0.21.0 → 0.50.0

package/Navigation.svelte

@@ -0,0 +1,325 @@
+<script>import IconBurger from "./IconBurger.svelte";
+import IconIrocoLogo from "./IconIrocoLogo.svelte";
+import IrocoLogo from "./IrocoLogo.svelte";
+import NavBar from "./NavBar.svelte";
+export let navigationItems;
+export let type = "topbar";
+export let title = null;
+let showMenu = false;
+</script>
+
+<div class="navigation--mobile">
+	<div class="navigation--mobile__title-container">
+		{#if title == null}
+			<IrocoLogo width="10em" height="10em" />
+		{:else}
+			<IconIrocoLogo width="3em" height="3em" />
+			<h1>{title}</h1>
+		{/if}
+	</div>
+
+	<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
+		<IconBurger width="3em" height="3em" />
+	</button>
+
+	{#if showMenu}
+		<NavBar
+			on:click_link={() => (showMenu = false)}
+			on:click={() => (showMenu = false)}
+			{type}
+			{navigationItems}
+		/>
+	{/if}
+</div>
+
+<div class="navigation">
+	<div class="navigation__title-container">
+		{#if title == null}
+			<IrocoLogo width="10em" height="10em" />
+		{:else}
+			<IconIrocoLogo width="3em" height="3em" />
+			<h1>{title}</h1>
+		{/if}
+	</div>
+	<NavBar {navigationItems} {type} />
+</div>
+
+<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 {
+  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;
+  margin-left: auto;
+  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;
+  margin-left: auto;
+  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;
+  margin-left: auto;
+  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);
+  }
+}
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.navigation--mobile {
+  display: none;
+}
+
+.navigation__title-container {
+  display: flex;
+  align-items: center;
+  padding-left: 1em;
+}
+
+.navigation__title-container h1 {
+  padding-left: 1em;
+}
+
+@media all and (max-width: 768px) {
+  .navigation {
+    display: none;
+    color: #f2ebe3;
+  }
+  .navigation--mobile {
+    display: flex;
+    padding: 0 1em;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    border-bottom: 1px solid #464452;
+  }
+  .navigation--mobile h1 {
+    font-size: 2em;
+  }
+  .navigation--mobile__button {
+    background-color: transparent;
+    border: none;
+    color: #464452;
+  }
+  .navigation--mobile__title-container {
+    display: flex;
+    align-items: center;
+  }
+  .navigation--mobile__title-container h1 {
+    padding-left: 0.5em;
+  }
+}</style>

package/Navigation.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NavigationItem } from './definition';
+declare const __propDef: {
+    props: {
+        navigationItems: Array<NavigationItem>;
+        type?: "sidebar" | "topbar" | undefined;
+        title?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavigationProps = typeof __propDef.props;
+export type NavigationEvents = typeof __propDef.events;
+export type NavigationSlots = typeof __propDef.slots;
+export default class Navigation extends SvelteComponentTyped<NavigationProps, NavigationEvents, NavigationSlots> {
+}
+export {};

package/NumberInput.svelte

@@ -0,0 +1,117 @@
+<script>export let id;
+export let label;
+export let placeholder;
+export let error = null;
+export let value = null;
+export let min;
+export let max;
+</script>
+
+<div class="iroco-ui-input">
+	{#if label}
+		<label class="iroco-ui-label" for={id}>{label}</label>
+	{/if}
+	<input on:change bind:value {id} type="number" {placeholder} {min} {max} {...$$restProps} />
+	{#if error}
+		<p data-testid="error" class="error">{error}</p>
+	{/if}
+</div>
+
+<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;
+}
+
+.iroco-ui-form input,
+.iroco-ui-form textarea {
+  outline: none;
+  text-decoration: none;
+  font-size: 14px;
+}
+.iroco-ui-form input:focus,
+.iroco-ui-form textarea:focus {
+  outline: none;
+  text-decoration: none;
+  font-size: 14px;
+}
+.iroco-ui-form .iroco-ui-input {
+  display: flex;
+  flex-direction: column;
+}
+.iroco-ui-form .iroco-ui-input > input {
+  color: #f2ebe3;
+  background: #211d28;
+  border: 1px solid #211d28;
+  padding: 1em 1.5em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border-radius: 0.5em;
+}
+.iroco-ui-form .iroco-ui-input > input::placeholder {
+  color: rgba(242, 235, 227, 0.5);
+}
+.iroco-ui-form .iroco-ui-input > input.error {
+  border-color: #ff504d;
+}
+.iroco-ui-form .iroco-ui-input > input.readonlyInput {
+  cursor: not-allowed;
+}
+.iroco-ui-form .iroco-ui-label {
+  color: rgba(242, 235, 227, 0.6);
+  font-weight: bold;
+  padding-bottom: 10px;
+  display: inline-block;
+}
+.iroco-ui-form .field {
+  margin-top: 20px;
+}
+.iroco-ui-form .field:first-child {
+  margin: 0;
+}
+.iroco-ui-form > .submit {
+  margin-top: 40px;
+}
+.iroco-ui-form p.error {
+  margin: 0;
+  color: #ff504d;
+}</style>

package/NumberInput.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        label: string | '';
+        placeholder: string | '';
+        error?: string | null | undefined;
+        value?: number | null | undefined;
+        min: number | undefined;
+        max: number | undefined;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberInputProps = typeof __propDef.props;
+export type NumberInputEvents = typeof __propDef.events;
+export type NumberInputSlots = typeof __propDef.slots;
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+}
+export {};

package/NumberInputSized.svelte

@@ -0,0 +1,4 @@
+<script>import NumberInput from "./NumberInput.svelte";
+</script>
+
+<NumberInput id="sized" placeholder="ph" size="3" />

package/NumberInputSized.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberInputSizedProps = typeof __propDef.props;
+export type NumberInputSizedEvents = typeof __propDef.events;
+export type NumberInputSizedSlots = typeof __propDef.slots;
+export default class NumberInputSized extends SvelteComponentTyped<NumberInputSizedProps, NumberInputSizedEvents, NumberInputSizedSlots> {
+}
+export {};

package/README.md

@@ -1,48 +1,38 @@
-# iroco-ui
+# create-svelte
 
-[![Circle CI](https://circleci.com/gh/iroco-co/iroco-ui.png?circle-token=218e3654fb138427bb709b068ed847b58f8d4ac7&style=svg)](https://app.circleci.com/pipelines/github/iroco-co/iroco-ui)
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-Design system for Iroco.
+## Creating a project
 
-See the [Documentation](https://iroco-co.github.io/iroco-ui/)
+If you're seeing this, you've probably already done this step. Congrats!
 
-# develop
+```bash
+# create a new project in the current directory
+npm create svelte@latest
 
-To install dependencies : 
-
-```shell
-~/src/iroco-ui$ npm ci
+# create a new project in my-app
+npm create svelte@latest my-app
 ```
 
-Building : 
-
-```shell
-~/src/iroco-ui$ npm run build
-```
+## Developing
 
-# documentation
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-The docs directory contains the documentation app deployed on github pages. To install dependencies :
+```bash
+npm run dev
 
-```shell
-~/src/iroco-ui/docs$ npm ci
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
 
-You can add/update components documentation into `docs/src/pages/components` and update the left menu in `docs/src/includes/sidebar.md`.
+## Building
 
-When you have to work on the CSS for components, you can have hot reloading. To do so you have to make the iroco-ui build watched with : 
+To create a production version of your app:
 
-```shell
-~/src/iroco-ui$ npx npm-watch build
+```bash
+npm run build
 ```
-And in the same time launch the dev server for docs : 
 
-```shell
-~/src/iroco-ui/docs$ npm run dev
-```
-
-To build the documentation (in docs) :
+You can preview the production build with `npm run preview`.
 
-```shell
-~/src/iroco-ui/docs$ npm run build
-```
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/RadioButton.svelte

@@ -0,0 +1,93 @@
+<script>export const label = "";
+export let value;
+export let group = null;
+export let name;
+export let checked;
+function onChange(event) {
+  group = event.target.value;
+}
+$:
+  checked = group === value;
+</script>
+
+<label class="iroco-ui-radio">
+	<input type="radio" bind:group {value} {name} on:change={onChange} {checked} />
+	<span class="radio-button-color" />
+	<slot />
+</label>
+
+<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;
+}
+
+.iroco-ui-radio {
+  color: #f2ebe3;
+  position: relative;
+  margin-top: 0.5em;
+  padding-left: 1.5em;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.iroco-ui-radio input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.radio-button-color {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1em;
+  width: 1em;
+  background-color: #f2ebe3;
+  border-radius: 50%;
+}
+
+.iroco-ui-radio input:checked ~ .radio-button-color {
+  background-color: #00d692;
+}</style>

package/RadioButton.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: "" | undefined;
+        value: string | null;
+        group?: string | null | undefined;
+        name: string | null;
+        checked: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+    get label(): "";
+}
+export {};

package/RadioButtonTest.svelte

@@ -0,0 +1,10 @@
+<svelte:options accessors={true} />
+
+<script>import RadioButton from "./RadioButton.svelte";
+export let group = "";
+</script>
+
+<form>
+	<RadioButton bind:group value="first" name="name" checked>First</RadioButton>
+	<RadioButton bind:group value="second" name="name">Second</RadioButton>
+</form>