storybook: add multiple component examples

Author: AdamJ

README.md

@@ -1,5 +1,7 @@
 # CASWOW
 
+![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
+
 [Demo](https://componentassemblysystems.github.io/casWOW/) | [Storybook](https://www.chromatic.com/library?appId=68dffe7bbaf9cb288a3faf2f)
 
 ## Prerequisites

docs/css/site.css

@@ -16,3 +16,139 @@
   fill: currentColor;
   transition: .2s ease-in-out transform;
 }
+
+/* Chatbot styles -- TEMP -- */
+
+.chat-article {
+  height: 90dvh;
+}
+.chat-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: 100%;
+  background: var(--cas-body-bg, #fff);
+}
+.chat-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--global-spacer-sm, 0.5rem);
+  align-self: stretch;
+  border-radius: var(--global-border-radius-medium, 1rem)
+    var(--global-border-radius-medium, 1rem) 0 0;
+}
+.chat-header__items {
+  display: flex;
+  height: var(--cas-spacer-xxl, 5rem);
+  padding: var(--global-spacer-md, 1rem);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+.chatbot-start-screen {
+  display: flex;
+  padding: var(--global-spacer-lg, 1.5rem) 10rem;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 3rem;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.welcome-message {
+  display: flex;
+  padding: var(--cas-spacer-xxl) var(--cas-spacer-xxxl);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--global-spacer-md, 1rem);
+  align-self: stretch;
+  background: var(--cas-body-bg-rgba, #ffffff);
+}
+.text-block {
+  display: flex;
+  padding: var(--cas-spacer-xs, 0.5rem) var(--cas-spacer-md, 1rem);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: cas-space-2xs;
+  align-self: stretch;
+}
+.shortcut-cards {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  align-self: stretch;
+}
+.chatbot-chat-input {
+  display: flex;
+  padding: var(--cas-space-l, 20px) var(--cas-spacer-xxxl, 3rem);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cas-spacer-xs, 0.25rem);
+  align-self: stretch;
+  border-radius: var(--border-radius-none, 0);
+  background: var(--cas-secondary-bg, #f4f6f7);
+}
+.message-bar {
+  border-radius: var(--cas-border-radius-pill, 999px);
+  background: var(--cas-body-bg, #fff);
+}
+
+/* Threads */
+.chatbot-chat-threads {
+  display: flex;
+  padding: var(--global-spacer-lg, 1.5rem) 14.125rem;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--cas-spacer-sm);
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: var(--cas-border-radius-lg);
+  background: var(--Background-primary, #FFF);
+}
+.chatbot-message-group {
+  display: flex;
+  padding: var(--cas-spacer-lg) var(--cas-spacer-md);
+  align-items: flex-start;
+  gap: var(--cas-spacer-xl);
+  align-self: stretch;
+  border-radius: var(--cas-border-radius-md);
+}
+.chatbot-message-group.message-bot {
+  background: var(--cas-body-bg-rgba, rgba(226, 231, 235, 0.20));
+}
+.chat-avatar {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  align-items: center;
+}
+.chat-message-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--cas-spacer-xs);
+  flex: 1 0 0;
+}
+.chat-message-metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--cas-spacer-xs);
+}
+.chat-message {
+  display: flex;
+  padding: var(--cas-spacer-xs);
+  align-items: center;
+  align-content: center;
+  gap: var(--cas-spacer-xs);
+  align-self: stretch;
+  flex-wrap: wrap;
+  border-radius: var(--cas-border-radius-sm);
+  background: rgba(255, 255, 255, 0.00);
+}

docs/css/site.css.map

@@ -55,3 +55,9 @@
   /* Set the Unicode value for the "fa-trash" icon */
   content: '\f56e';
 }
+
+.card:hover {
+  border: 1px solid var(--cas-primary-border-subtle, #b9e4fe);
+  background: var(--cas-primary-border-subtle);
+  cursor: pointer;
+}