Added images and examples in Menu and Snackbar also made a Snackbar C…

docs/pages/menus/index.vue

@@ -1,17 +1,12 @@
 <template>
-
   <DocsPageTemplate>
-
+
+    <!-- Overview Section -->
     <DocsPageSection title="Overview" anchor="#overview">
-
       <p>Menus allow users to make a selection from a list of options. We use two types of menus: <em>Dropdown</em> and <em>Filter</em>.</p>
 
-      <h3>
-        Dropdown menu
-      </h3>
-      <p>
-        Allow users to discover and access complex actions. They can be generated from buttons, icons, and in some cases by right-clicking a location.
-      </p>
+      <h3>Dropdown menu</h3>
+      <p>Allows users to discover and access complex actions. They can be generated from buttons, icons, and in some cases by right-clicking a location.</p>
 
       <DocsShow>
         <img class="modal-img" src="./dropdown-menu.png">
@@ -25,7 +20,27 @@
       </DocsShow>
     </DocsPageSection>
 
-    <DocsPageSection title="Menu text" anchor="#menu-text">
+    <!-- Checkbox Menu Section -->
+    <DocsPageSection title="Checkbox Menu" anchor="#checkbox-menu">
+      <h3>Checkbox Menu</h3>
+      <p>Checkbox menus allow users to select multiple options from a list using checkboxes. This is useful when users need to make more than one choice at a time.</p>
+
+      <DocsShow>
+        <img class="modal-img" src="./check_boximg.png">
+      </DocsShow>
+
+      <h4>Behavior</h4>
+      <ul>
+        <li>Multiple options can be selected at once using checkboxes.</li>
+        <li>Checkboxes toggle between checked and unchecked states when clicked.</li>
+        <li>Options may be disabled and cannot be selected.</li>
+      </ul>
+
+
+    </DocsPageSection>
+
+    <!-- Menu Text Section -->
+    <DocsPageSection title="Menu Text" anchor="#menu-text">
       <ul>
         <li>Menu options can be user-generated text</li>
         <li>Menu text is 2-3 words by default</li>
@@ -36,18 +51,15 @@
     <DocsDoNot>
       <template #do>
         <img src="./text-do.png">
-        <p class="do-dont">
-          Minimize text and rely on interface clarity
-        </p>
+        <p class="do-dont">Minimize text and rely on interface clarity</p>
       </template>
       <template #not>
         <img src="./text-dont.png">
-        <p class="do-dont">
-          Write repetitive menu option text
-        </p>
+        <p class="do-dont">Write repetitive menu option text</p>
       </template>
     </DocsDoNot>
 
+    <!-- Layout Section -->
     <DocsPageSection title="Layout" anchor="#layout">
       <ul>
         <li>Menus appear above all other UI elements</li>
@@ -57,6 +69,7 @@
       </ul>
     </DocsPageSection>
 
+    <!-- Guidelines Section -->
     <DocsPageSection title="Guidelines" anchor="#guidelines">
       <ul>
         <li>Menus can contain icons</li>
@@ -69,38 +82,23 @@
     <DocsDoNot>
       <template #do>
         <img src="./icon-do.png">
-        <p class="do-dont">
-          Use iconography as a visual aid for important actions
-        </p>
+        <p class="do-dont">Use iconography as a visual aid for important actions</p>
       </template>
       <template #not>
         <img src="./icon-dont.png">
-        <p class="do-dont">
-          Use repetitive iconography in filter menus
-        </p>
+        <p class="do-dont">Use repetitive iconography in filter menus</p>
       </template>
     </DocsDoNot>
 
+    <!-- Specifications Section -->
     <DocsPageSection title="Specifications" anchor="#specifications">
       <ul>
         <li>Min width: 128px</li>
         <li>Menu elevation: 4dp</li>
-        <li>
-          Background color:
-          <DocsInternalLink code text="tokens.surface" href="/colors#palette.white" />
-        </li>
-        <li>
-          Option text color:
-          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" />
-        </li>
-        <li>
-          Option text hover color:
-          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
-        </li>
-        <li>
-          Iconography color:
-          <DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" />
-        </li>
+        <li>Background color: <DocsInternalLink code text="tokens.surface" href="/colors#palette.white" /></li>
+        <li>Option text color: <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" /></li>
+        <li>Option text hover color: <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" /></li>
+        <li>Iconography color: <DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" /></li>
       </ul>
       <h3>Dropdown menu</h3>
       <ul>
@@ -109,29 +107,21 @@
       </ul>
       <h3>Filter menu</h3>
       <ul>
-        <li>Width: width: matches the width of the text field that generates it</li>
+        <li>Width: matches the width of the text field that generates it</li>
         <li>Menu option height: 48px</li>
       </ul>
     </DocsPageSection>
 
-
   </DocsPageTemplate>
-
 </template>
 
-
 <script>
-
   export default {};
-
 </script>
 
-
 <style lang="scss" scoped>
-
   img,
   .do-dont {
     width: 400px;
   }
-
 </style>

docs/pages/snackbars.vue

@@ -24,8 +24,12 @@
 
     <DocsPageSection title="Inline buttons" anchor="#inline-buttons">
       <p>
-        Snackbars may occasionally include a button so the user can take a follow up, non-critical action. Common examples are 'undo' and 'retry'. Note that some users will never have the opportunity to click this button.
+        Snackbars may occasionally include a button so the user can take a follow-up, non-critical action. Common examples are 'undo' and 'retry'. Note that some users will never have the opportunity to click this button.
       </p>
+      <p>
+        Here is an example of a snackbar with an inline button:
+      </p>
+      <img src="path/to/your/snackbar-with-button.png" alt="Snackbar with button" />
     </DocsPageSection>
 
     <DocsPageSection title="Text content" anchor="#text-content">
@@ -38,32 +42,80 @@
         <li>Resource added</li>
       </ul>
       <p>Avoid including user-inputted text such as the name of a resource or lesson because we have less control over the length of this text.</p>
+      <p>
+        Example of a basic snackbar message:
+      </p>
+      <img src="path/to/your/snackbar-message-example.png" alt="Basic Snackbar Example" />
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection title="Snackbar Variations" anchor="#snackbar-variations">
+      <h2>Snackbar Variations</h2>
+      <p>Here are different variations of snackbars you can implement:</p>
+
+      <h3>Basic Snackbar</h3>
+      <p>
+        A simple snackbar with a message only, no action button. The text should not be very long as it is designed to convey brief, non-critical information.
+      </p>
+      <img src="./snackbars/basic.jpg" alt="Basic Snackbar" />
+
+      <h3>Snackbar with Action Button</h3>
+      <p>
+        This variation includes an action button, like 'Undo' or 'Retry'. The action button is not highlighted with a background, and it is styled with a different color (e.g., purple) to distinguish it from the normal text.
+      </p>
+      <img src="./snackbars/withaction.jpg" alt="Snackbar with Action" />
+      <ul>
+        <li>Button Text: Customizable (e.g., "Undo", "Retry")</li>
+        <li>Button color: Green (e.g., #81c784 for focused state)</li>
+        <li>Timeout: 4 seconds</li>
+      </ul>
+
+      <h3>Focused Snackbar</h3>
+      <p>
+        This snackbar variation highlights the focused state, typically used for active tasks or high-priority alerts. The focused state does not change the background color, but emphasizes the snackbar with a subtle visual effect.
+      </p>
+      <img src="./snackbars/focused1.jpg" alt="Focused Snackbar" />
+      <ul>
+        <li>Focused state color: #dc8aff</li>
+        <li>Focused state: Applies a slight visual focus effect, such as a border highlight or text changes</li>
+      </ul>
+
+    </DocsPageSection>
+
+    <DocsPageSection title="General Specifications" anchor="#general-specifications">
+      <h3>General Snackbar Specifications</h3>
       <ul>
         <li>Background color: $k-grey-900</li>
         <li>Text: 14px white and bolded</li>
         <li>Height: 48px</li>
         <li>Min width: 344px</li>
         <li>Max width: 512px</li>
-        <li>Focused state: brand.secondary.v_100</li>
-        <li>Box shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);</li>
-        <li>Corner radius: 4px</li>
         <li>Timeout: 4 seconds</li>
+        <li>Box shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25)</li>
+        <li>Corner radius: 4px</li>
+      </ul>
+    </DocsPageSection>
+
+    <DocsPageSection title="Component Properties" anchor="#component-properties">
+      <h3>Snackbar Component Properties</h3>
+      <p>The following properties are passed to the snackbar component:</p>
+      <ul>
+        <li><strong>message</strong>: The content to display in the snackbar (e.g., "Profile updated").</li>
+        <li><strong>actionText</strong>: Optional text for an action button (e.g., "Undo").</li>
+        <li><strong>actionCallback</strong>: Optional callback function for the action button.</li>
+        <li><strong>color</strong>: Background color of the snackbar. Default: `$k-grey-900`.</li>
+        <li><strong>focused</strong>: Boolean flag to indicate whether the snackbar is in focus (e.g., for high-priority or active messages). Default: `false`.</li>
+        <li><strong>timeout</strong>: Duration in milliseconds before the snackbar disappears. Default: `4000` (4 seconds).</li>
       </ul>
     </DocsPageSection>
 
   </DocsPageTemplate>
 
 </template>
 
-
 <script>
-
-  export default {};
-
+export default {};
 </script>
 
-
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/* Add any custom styling if needed */
+</style>

lib/KThemePlugin.js

@@ -43,6 +43,8 @@ import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
 import KFocusTrap from './KFocusTrap.vue';
 import KToolbar from './KToolbar';
+import Snackbar from './Snackbar.vue';  // Adjust the path based on the location of your new component
+
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -167,4 +169,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
   Vue.component('KFocusTrap', KFocusTrap);
   Vue.component('KToolbar', KToolbar);
+  Vue.component('Snackbar', Snackbar);  // Register it globally
 }

lib/Snackbar.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="isVisible" class="snackbar" :class="{ focused: focused }">
+    <span>{{ message }}</span>
+    <button v-if="actionText" @click="handleAction">{{ actionText }}</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Snackbar',
+  props: {
+    message: String,
+    actionText: String,
+    action: Function,
+    focused: Boolean,
+    timeout: {
+      type: Number,
+      default: 4000, // Default timeout of 4 seconds
+    },
+  },
+  data() {
+    return {
+      isVisible: false, // Snackbar is initially not visible
+      snackbarTimeout: null, // Variable to hold timeout
+    };
+  },
+  methods: {
+    hideSnackbar() {
+      this.isVisible = false; // Hide the snackbar
+    },
+    handleAction() {
+      if (this.action) {
+        this.action(); // Trigger the action passed from the parent component
+      }
+    },
+    showSnackbar() {
+      // Show snackbar and set timeout
+      this.isVisible = true;
+      if (this.snackbarTimeout) {
+        clearTimeout(this.snackbarTimeout); // Clear existing timeouts to prevent multiple snackbars
+      }
+      this.snackbarTimeout = setTimeout(() => {
+        this.hideSnackbar(); // Hide Snackbar after timeout
+      }, this.timeout);
+    },
+  },
+  mounted() {
+    // Trigger the snackbar to show on mount
+    this.showSnackbar();
+  },
+  beforeDestroy() {
+    clearTimeout(this.snackbarTimeout); // Cleanup timeout when component is destroyed
+  },
+};
+</script>
+
+<style scoped>
+.snackbar {
+  background-color: #424242; /* Regular Snackbar - dark grey */
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  height: 48px;
+  min-width: 344px;
+  max-width: 512px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  position: fixed;
+  bottom: 24px; /* 24px from the bottom-left corner */
+  left: 24px;  /* 24px from the left */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 12px;
+  transition: background-color 0.3s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+button {
+  background: none;
+  border: none;
+  color: #81c784; /* Regular button color - Green */
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none; /* Underline for button text */
+}
+
+.snackbar.focused {
+  /* Keeping the same background color as normal snackbar, no change */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* Keep the original shadow */
+  transform: scale(1); /* No scaling needed */
+}
+
+.snackbar.focused span {
+  font-size: 14px; /* Regular text size in focused state */
+  font-weight: bold;
+}
+
+.snackbar.focused button {
+  color: #dc8aff; /* Text color for focused state - Purple */
+  text-decoration: none; /* Remove underline in focused state */
+}
+
+.snackbar.focused button:hover {
+  color: #dc8aff; /* Darker purple color on hover */
+  text-decoration: underline; /* Underline button text on hover */
+}
+</style>