@gapit/click-component

This component turns a given element into a clickable element. Additionally, if you would like some kind of hover effect in the forms of an element changing color or text changes font-weight.

clickableElt

import { querySelector } from "@gapit/query-selector";

const clickElt = querySelector<SVGElement>("#click");
const colorElt = querySelector<SVGElement>("#color");
const textElt = querySelector<SVGElement>("#text");

//  The function requires you to provide a clickElt & link.

//  Default call with no design changes.
clickableElt({ clickElt, link: "url_here" });

//  Calling the function with a colorElt will make the element change colors when the clickElt is hovered.
//  These colors has a default parameter "colors: { default: "#278ACC", hover: "#005790" }".
clickableElt({ clickElt, link: "url_here", colorElt });

//  Calling the function with a textElt will change the font-weight of the given element when the clickElt is hovered.
//  These font-weights has a default parameter "fontWeight = { default: "400", hover: "700" }".
clickableElt({ clickElt, link: "url_here", textElt });

//  If you want multiple elements to be affected by the hover effect you can send the element as a group.
//  Make sure to set the parameter "isGroup: true".

const colorElt = querySelector<SVGElement>("#color-group");
clickableElt({ clickElt, link: "url_here", colorElt });

// The elements will automatically get a transition "all 0.2s". This can be disabled by setting hasTransition to false or changed by chaning the transition value.
clickableElt({ clickElt, link: "url_here", colorElt, hasTransition: false });
clickableElt({ clickElt, link: "url_here", colorElt, transition: "all 0.5s" });