Merge recent updates from dev to main

README.md

@@ -17,8 +17,27 @@ yarn add @cosmicds/vue-toolkit
 
 If you're doing development work on these components, it will likely be useful to have an external sample project that imports a development version of this one. The easiest way to do this is probably to use [`npm-link`](https://docs.npmjs.com/cli/v10/commands/npm-link). For example:
 ```
-cd <path-where-you-keep-this-repo>
+cd <path-where-you-keep-the-toolkit-repo>
+
+# build the package
+yarn
+yarn build
+
+# set up link to local development version
 npm link
 cd <path-to-your-sample-repo>
 npm link @cosmicds/vue-toolkit
+
+# To make local changes to the toolkit active, you have to rebuild the package after every change.
+# Tip from @johnarban: This will take you to the previous directory you were in, which makes it easier to toggle between folders
+cd - 
+
+# to unlink when you are done (Note - order is important here)
+
+cd <path-to-your-sample-repo> # if you're not already there
+npm unlink --no-save @cosmicds/vue-toolkit
+
+cd <path-where-you-keep-the-toolkit-repo>
+npm unlink
+
 ```

src/components/CreditLogos.vue

@@ -7,6 +7,7 @@
         :href="logo.href"
         target="_blank"
         rel="noopener noreferrer"
+        class="logo-link"
       >
         <img
           :alt="logo.alt"
@@ -69,6 +70,10 @@ const cssVars = computed(() => {
 
   img {
     height: var(--logo-size);
+    margin-inline: 0.1em;
   }
 }
+.logo-link {
+  display: inline-flex;
+}
 </style>

src/components/IconButton.vue

@@ -53,8 +53,8 @@ import { IconButtonProps } from "../types";
 const props = withDefaults(defineProps<IconButtonProps>(), {
   color: "#ffffff",
   focusColor: "#ffffff",
+  activeColor: "#ffffff",
   backgroundColor: "#040404",
-  boxShadow: true,
   border: true,
   longPressTimeMs: 500,
   tooltipLocation: "start",
@@ -84,8 +84,7 @@ const cssVars = computed(() => {
     "--color": props.color,
     "--background-color": props.backgroundColor,
     "--focus-color": props.focusColor,
-    "--active-shadow": props.boxShadow ? props.color : "transparent",
-    "--focus-shadow": props.boxShadow ? props.focusColor : "transparent",
+    "--active-color": props.activeColor,
   };
 });
 
@@ -142,11 +141,8 @@ function handleTouchEnd() {
   }
 
   &.active {
-    box-shadow: 0px 0px 10px 3px var(--active-shadow);
-
-    &:focus {
-      box-shadow: 0px 0px 10px 3px var(--focus-shadow);
-    }
+    color: var(--active-color);
+    border-color: var(--active-color);
   }
 }
 </style>

src/types.ts

@@ -133,10 +133,10 @@ export interface IconButtonProps {
   color?: string;
   /** The color of the button when focused. Default is white */
   focusColor?: string;
+  /** The color of the button when active. Default is white */
+  activeColor?: string;
   /** The background color of the button. Default is #040404 */
   backgroundColor?: string;
-  /** Whether to use a box shadow when the button is active. Default is true */
-  boxShadow?: boolean;
   /** Whether the button has a border. Default is true */
   border?: boolean;
   /** The time duration, in ms, to recognize a press event as a long press. Default is 500 */