[beam] add toast notification component

beam/src/components/BeamFilter.vue

@@ -45,12 +45,12 @@ const getTotalHeight = (el: HTMLDivElement) => {
 	overflow: hidden;
 	box-sizing: border-box;
 	transition: all 0.2s ease-in-out;
-	border-bottom: 1px solid var(--row-border-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
 	background: white;
 }
 
 .beam_filters-heading {
-	background: var(--primary-color);
+	background: var(--sc-primary-color);
 	cursor: pointer;
 	display: flex;
 	align-items: center;

beam/src/components/BeamFilterOption.vue

@@ -67,11 +67,11 @@ const toggle = () => {
 .beam_filter-option-select {
 	position: relative;
 	appearance: none;
-	border: 1px solid var(--row-border-color);
+	border: 1px solid var(--sc-row-border-color);
 	font-weight: bold;
-	color: var(--primary-text-color);
+	color: var(--sc-primary-text-color);
 	font-size: 0.8rem;
-	font-family: var(--font-family);
+	font-family: var(--sc-font-family);
 	display: flex;
 	align-items: stretch;
 }
@@ -82,8 +82,8 @@ label {
 }
 
 .beam_filter-arrow {
-	background: var(--primary-color);
-	color: var(--primary-text-color);
+	background: var(--sc-primary-color);
+	color: var(--sc-primary-text-color);
 	cursor: pointer;
 	display: flex;
 	align-items: center;
@@ -97,7 +97,7 @@ label {
 }
 
 svg {
-	fill: var(--primary-text-color);
+	fill: var(--sc-primary-text-color);
 	width: 5px;
 	transform: rotate(90deg);
 }
@@ -107,7 +107,7 @@ svg {
 	z-index: 100;
 	border-top: none;
 	left: 0;
-	border: 1px solid var(--row-border-color);
+	border: 1px solid var(--sc-row-border-color);
 	padding: 0rem;
 	list-style: none;
 	width: 100%;
@@ -119,21 +119,21 @@ svg {
 
 .beam_filter-select-option {
 	font-size: 0.8rem;
-	font-family: var(--font-family);
+	font-family: var(--sc-font-family);
 	font-weight: bold;
-	color: var(--primary-text-color);
-	border-bottom: 1px solid var(--row-border-color);
+	color: var(--sc-primary-text-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
 	padding: 0.5rem;
 	&:hover {
-		background: var(--primary-color);
+		background: var(--sc-primary-color);
 	}
 }
 
 .selected {
-	background: var(--row-border-color);
+	background: var(--sc-row-border-color);
 
 	&:hover {
-		background: var(--row-border-color);
+		background: var(--sc-row-border-color);
 	}
 }
 </style>

beam/src/components/ItemCheck.vue

@@ -41,15 +41,15 @@ const value = defineModel<boolean>({ default: false })
 	width: 2rem;
 	background-color: #eee;
 	outline: 2px solid transparent;
-	border: 1px solid var(--highlight);
+	border: 1px solid var(--sc-highlight);
 }
 
 .container:hover input ~ .checkmark {
 	background-color: white;
 }
 
 .container input:checked ~ .checkmark {
-	background-color: var(--brand-secondary);
+	background-color: var(--sc-brand-secondary);
 }
 
 .checkmark:after {
@@ -67,7 +67,7 @@ const value = defineModel<boolean>({ default: false })
 	top: 50%;
 	width: 0.5rem;
 	height: 1rem;
-	border: solid var(--text-color);
+	border: solid var(--sc-text-color);
 	border-width: 0 3px 3px 0;
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);

beam/src/components/ToggleArrow.vue

@@ -14,7 +14,7 @@ const { open } = defineProps<{ open: boolean }>()
 svg {
 	width: 100%;
 	overflow: visible;
-	fill: var(--primary-text-color);
+	fill: var(--sc-primary-text-color);
 }
 
 .arrow-icon {

beam/themes/beam.css

@@ -280,4 +280,28 @@ body {
 	margin: 0.625rem 0;
 }
 
-/* new, revised styles */
+/* Vue Toast Notifictations Overrides */
+
+.v-toast__item {
+	border-radius: 0;
+	color: white;
+	font-family: var(--sc-font-family);
+}
+.v-toast__item--success {
+	background-color: var(--sc-brand-success);
+	color: white;
+}
+.v-toast__item--info {
+	background-color: var(--sc-primary-text-color);
+}
+.v-toast__item--warning {
+	background-color: var(--sc-brand-warning);
+	color: white;
+}
+.v-toast__item--error {
+	background-color: var(--sc-brand-danger);
+	color: white;
+}
+.v-toast__item--default {
+	background-color: var(--sc-primary-text-color);
+}

common/changes/@stonecrop/beam/feat-beam-toast-notify_2024-10-28-18-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "added toast notifications",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}

common/changes/@stonecrop/themes/feat-beam-toast-notify_2024-10-28-18-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "added warning color variable",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}

common/config/rush/browser-approved-packages.json

@@ -270,6 +270,10 @@
       "name": "vue-template-compiler",
       "allowedCategories": [ "prototype" ]
     },
+    {
+      "name": "vue-toast-notification",
+      "allowedCategories": [ "prototype" ]
+    },
     {
       "name": "xstate",
       "allowedCategories": [ "prototype" ]

examples/beam/components.story.vue

@@ -1,6 +1,6 @@
 <template>
-	<Story title="Components">
-		<Variant title="Split Column">
+	<Story title="components">
+		<Variant title="split column">
 			<SplitColumn align-items="flex-start">
 				<template #left>
 					<BeamHeading> WO#2024-01-00001 <span class="beam--normal">Ambrosia Pie</span> </BeamHeading>
@@ -29,7 +29,8 @@
 				</template>
 			</SplitColumn>
 		</Variant>
-		<Variant title="Arrow">
+
+		<Variant title="arrow">
 			<BeamArrow />
 			<hr />
 			<div style="display: flex; flex-direction: row; gap: 1rem; justify-content: space-between">
@@ -45,7 +46,8 @@
 				</p>
 			</div>
 		</Variant>
-		<Variant title="Text Elements">
+
+		<Variant title="text elements">
 			<BeamHeading>
 				This is the Beam Heading. <span class="beam--normal">And this should not be bold.</span></BeamHeading
 			>
@@ -58,10 +60,12 @@
 				aut, facere, minim dignissim conubia blanditiis doloribus ex montes vitae exercitation.
 			</p>
 		</Variant>
-		<Variant title="Btn">
+
+		<Variant title="button">
 			<BeamBtn>Click</BeamBtn>
 		</Variant>
-		<Variant title="Progress Block">
+
+		<Variant title="progress block">
 			<BeamProgress :complete="workOrder.complete" />
 		</Variant>
 	</Story>

examples/beam/default.story.vue

@@ -49,7 +49,44 @@
 				</div>
 			</BeamMetadata>
 		</Variant>
-		<Variant title="Filter ListView">
+
+		<Variant title="toast">
+			<template #controls>
+				<HstText v-model="toastMsg" title="Toast Message" />
+				<HstSelect
+					v-model="toastType"
+					:title="'Type'"
+					:options="{
+						default: 'default',
+						success: 'success',
+						error: 'error',
+						warning: 'warning',
+					}" />
+				<HstSelect
+					v-model="toastPosition"
+					:title="'Position'"
+					:options="{
+						top: 'top',
+						'top-right': 'top-right',
+						'top-left': 'top-left',
+						bottom: 'bottom',
+						'bottom-right': 'bottom-right',
+						'bottom-left': 'bottom-left',
+					}" />
+				<HstSlider v-model="toastTime" :step="0.5" :min="0" :max="20" title="Duration (Seconds)" />
+			</template>
+			<BeamModal @confirmmodal="confirmModal" @closemodal="closeModal" :showModal="showModal">
+				<Confirm @confirmmodal="confirmModal" @closemodal="closeModal" />
+			</BeamModal>
+			<Navbar @click="showNotification">
+				<template #title>
+					<h1 class="nav-title">Items to Receive</h1>
+				</template>
+				<template #navbaraction>Show Notification</template>
+			</Navbar>
+		</Variant>
+
+		<Variant title="list filters">
 			<FixedTop>
 				<Navbar @click="handlePrimaryAction">
 					<template #title>
@@ -85,6 +122,8 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+import { type ToastPosition, useToast } from 'vue-toast-notification'
+import 'vue-toast-notification/dist/theme-default.css'
 
 import items from './data/items.json'
 
@@ -96,6 +135,23 @@ const workOrder = reactive({
 	complete: false,
 })
 
+// Start Toast //
+const toast = useToast()
+const toastType = ref('default')
+const toastTime = ref(3)
+const toastMsg = ref('Toast Message.')
+const toastPosition = ref<ToastPosition>('top')
+
+const showNotification = () => {
+	toast.open({
+		message: toastMsg.value,
+		type: toastType.value,
+		position: toastPosition.value,
+		duration: toastTime.value * 1000,
+	})
+}
+// End Toast //
+
 const showModal = ref(false)
 
 const handlePrimaryAction = () => {

examples/beam/mqtt.story.vue

@@ -1,5 +1,5 @@
 <template>
-	<Story>
+	<Story :layout="{ type: 'grid', width: 400 }">
 		<Variant title="subscribe to all">
 			<pre>{{ allMessages }}</pre>
 		</Variant>
@@ -37,3 +37,9 @@ const { messages: topicMessages } = useMqttStream({
 	topics: mqtt.topics,
 })
 </script>
+
+<style>
+pre {
+	color: var(--histoire-contrast-color);
+}
+</style>

examples/package.json

@@ -35,6 +35,7 @@
 		"miragejs": "^0.1.47",
 		"vite": "^5.4.5",
 		"vue": "^3.5.6",
+		"vue-toast-notification": "^3",
 		"xstate": "^4.38.3"
 	},
 	"devDependencies": {

themes/default/_variables.css

@@ -17,6 +17,7 @@
 	/* Warnings/Alerts/Success */
 	--sc-brand-danger: #e63c28;
 	--sc-brand-success: #155724;
+	--sc-brand-warning: #b99d3e;
 
 	/* Table Colors */
 	--sc-active-cell-background: #ffffff;