Merge remote-tracking branch 'upstream/development' into fix-beam-ref…

…actor

aform/src/components/utilities/Login.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="login-container">
+		<div>
+			<div class="account-container">
+				<div class="account-header">
+					<h1 id="account-title">{{ headerTitle }}</h1>
+					<p id="account-subtitle">{{ headerSubtitle }}</p>
+				</div>
+
+				<form @submit="onSubmit">
+					<div class="login-form-container">
+						<div class="login-form-email login-form-element">
+							<label id="login-email" for="email" class="login-label">Email</label>
+							<input
+								id="email"
+								class="login-field"
+								name="email"
+								placeholder="[email protected]"
+								type="email"
+								auto-capitalize="none"
+								auto-complete="email"
+								auto-correct="off"
+								:disabled="isLoading" />
+						</div>
+
+						<div class="login-form-password login-form-element">
+							<label id="login-password" for="password" class="login-label">Password</label>
+							<input id="password" class="login-field" name="password" type="password" :disabled="isLoading" />
+						</div>
+
+						<button class="btn" :disabled="isLoading">
+							<span v-if="isLoading" class="material-symbols-outlined loading-icon"> progress_activity </span>
+							<span id="login-form-button">Login</span>
+						</button>
+					</div>
+				</form>
+
+				<button class="btn">
+					<span id="forgot-password-button">Forgot password?</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+withDefaults(
+	defineProps<{
+		headerTitle?: string
+		headerSubtitle?: string
+	}>(),
+	{
+		headerTitle: 'Login',
+		headerSubtitle: 'Enter your email and password to login',
+	}
+)
+
+const isLoading = ref(false)
+
+function onSubmit(event: Event) {
+	event.preventDefault()
+	isLoading.value = true
+
+	// TODO: handle submit logic
+}
+</script>
+
+<style>
+@import url('../../theme/login.css');
+</style>

aform/src/theme/login.css

@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+@import url('@stonecrop/themes/default/default.css');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
+
+:root {
+	/* BTNS */
+	--btn-color: white;
+	--btn-border: #cccccc;
+	--btn-hover: #f2f2f2;
+	--btn-label-color: black;
+}
+
+.login-container {
+	width: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-family: var(--font-family);
+}
+
+.account-container {
+	width: 100%;
+	margin-left: auto;
+	margin-top: 0.5rem;
+	margin-right: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.account-header {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	margin-top: 0.5rem;
+}
+
+#account-title {
+	font-size: 1.5rem;
+	line-height: 2rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	margin: 0;
+}
+
+#account-subtitle {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	margin: 1rem;
+}
+
+.login-form-container {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.login-form-email,
+.login-form-password {
+	display: grid;
+	gap: 0.25rem;
+}
+.login-form-element {
+	margin: 0.5rem 0;
+}
+.login-field {
+	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	border-radius: 0.25rem;
+
+	&:focus {
+		border: 1px solid black;
+	}
+}
+.login-label {
+	position: absolute;
+	padding: 0;
+	background: white;
+	white-space: nowrap;
+	border-width: 0;
+	font-size: 0.7rem;
+	margin-left: 0.5rem;
+	margin-top: -0.7rem;
+	padding: 0.3rem;
+}
+
+#login-form-button {
+	margin-right: 0.5rem;
+	height: 1rem;
+	width: 1rem;
+}
+.btn {
+	background-color: var(--btn-color);
+	color: var(--btn-label-color);
+	border: 1px solid var(--btn-border);
+	margin: 0.5rem 0;
+	padding: 0.25rem;
+	position: relative;
+
+	&:hover {
+		background-color: var(--btn-hover);
+	}
+	&:disabled {
+		background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
+		color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
+	}
+}
+.disabled {
+	opacity: 0.5;
+}
+.loading-icon {
+	animation: spin 1s linear infinite forwards;
+	display: inline-block;
+	margin-right: 0.2rem;
+	line-height: 0;
+	font-size: 1rem;
+	position: relative;
+	top: 0.2rem;
+}
+
+/* ANIMATION */
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}

aform/stories/login.story.vue

@@ -0,0 +1,9 @@
+<template>
+	<Story title="login">
+		<Login />
+	</Story>
+</template>
+
+<script setup lang="ts">
+import Login from '@/components/utilities/Login.vue'
+</script>

beam/src/components/ActionFooter.vue

@@ -1,7 +1,7 @@
 <template>
 	<footer class="beam__actionfooter">
 		<span class="footer-action-wrapper">
-			<button class="footer-action" @click="handleFooterAction">
+			<button class="footer-action btn" @click="handleFooterAction">
 				<slot />
 			</button>
 		</span>

beam/src/components/BeamModal.vue

@@ -1,28 +1,16 @@
 <template>
 	<portal to="beam__modal_outlet">
 		<div class="beam__modal" v-show="showModal">
-			<button @click="$emit('closemodal')">Close Modal</button>
+			<button class="btn" @click="$emit('closemodal')">Close Modal</button>
 			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
 		</div>
 	</portal>
 </template>
 
 <script setup lang="ts">
-defineProps({
-	showModal: Boolean,
-})
+defineProps<{
+	showModal: boolean
+}>()
 
 defineEmits(['closemodal', 'confirmmodal'])
 </script>
-
-<style scoped>
-.beam__modal {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background-color: white;
-	z-index: 1000;
-}
-</style>

beam/src/components/Confirm.vue

@@ -1,9 +1,8 @@
 <template>
-	<div>
-		Would you like to continue?<br />
-		<button @click="confirmModal">Yes</button>
-		<br />
-		<button @click="closeModal">No</button>
+	<div class="beam__modal-confirm">
+		<h2>Would you like to continue?</h2>
+		<button class="btn" @click="confirmModal">Yes</button>
+		<button class="btn" @click="closeModal">No</button>
 	</div>
 </template>
 

beam/src/components/ItemCheck.vue

@@ -1,7 +1,7 @@
 <template>
 	<label class="container">
 		<input type="checkbox" :checked="value" @input="handleInput" tabindex="-1" />
-		<span class="checkmark" tabindex="0"></span>
+		<div class="checkmark" tabindex="0"></div>
 	</label>
 </template>
 
@@ -22,13 +22,12 @@ const handleInput = (e: InputEvent) => {
 }
 </script>
 
-<style scoped lang="scss">
-@import '../themes/_variables.scss';
-
+<style scoped>
 .container {
 	display: block;
 	position: relative;
 	padding-left: 2.5ch;
+	margin: 0;
 	margin-top: 0.5rem;
 	cursor: pointer;
 	font-size: 2rem;
@@ -55,18 +54,15 @@ const handleInput = (e: InputEvent) => {
 	width: 2rem;
 	background-color: #eee;
 	outline: 2px solid transparent;
-}
-
-.checkmark:focus {
-	outline: 2px solid $brand-primary;
+	border: 1px solid var(--highlight);
 }
 
 .container:hover input ~ .checkmark {
-	background-color: #ccc;
+	background-color: white;
 }
 
 .container input:checked ~ .checkmark {
-	background-color: $brand-dark;
+	background-color: var(--brand-secondary);
 }
 
 .checkmark:after {
@@ -80,14 +76,14 @@ const handleInput = (e: InputEvent) => {
 }
 
 .container .checkmark:after {
-	left: 0.75rem;
-	top: 0.25rem;
+	left: 25%;
+	top: 50%;
 	width: 0.5rem;
 	height: 1rem;
-	border: 2px solid $brand-primary;
+	border: solid var(--text-color);
 	border-width: 0 3px 3px 0;
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	transform: rotate(45deg) translate(-50%, -50%);
 }
 </style>

beam/src/components/ItemCount.vue

@@ -2,13 +2,13 @@
 	<div class="beam__itemcount">
 		<span
 			:contenteditable="editable"
-			:style="{ color: countColor === true ? '#3c5014' : '#e63c28' }"
+			:class="{ alert: countColor === false }"
 			@input="handleInput"
-			@click="handleInput">
-			{{ count }}
-		</span>
-		<span>/{{ denominator }} </span>
-		<span v-if="uom">&nbsp; {{ uom }}</span>
+			@click="handleInput"
+			>{{ count }}</span
+		>
+		<span>/{{ denominator }}</span
+		><span v-if="uom">&nbsp; {{ uom }}</span>
 	</div>
 </template>
 

beam/src/components/ListItem.vue

@@ -1,9 +1,9 @@
 <template>
 	<li tabindex="0" class="beam__listitem">
-		<span>
+		<div class="beam__listtext">
 			<label>{{ item.label }}</label>
 			<p>{{ item.description }}</p>
-		</span>
+		</div>
 
 		<ItemCount
 			v-if="item.count"

beam/src/components/Navbar.vue

@@ -7,7 +7,7 @@
 			<h1 class="nav-title">TITLE</h1>
 		</slot>
 		<div class="navbar-action-wrapper">
-			<button class="navbar-action" @click="handlePrimaryAction">
+			<button class="navbar-action btn" @click="handlePrimaryAction">
 				<slot name="navbaraction">Action</slot>
 			</button>
 		</div>

beam/src/components/ScanInput.vue

@@ -8,7 +8,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 const emit = defineEmits(['scaninput'])
 const barcode = ref('')
 
-const handleScanInput = (event: InputEvent) => {
+const handleScanInput = (event: InputEvent | KeyboardEvent) => {
 	if (event.target.tagName !== 'INPUT') {
 		if (event.key !== 'Enter') {
 			barcode.value += `${event.key}`