feat(link): add link component

commitlint.config.cjs

@@ -37,6 +37,7 @@ module.exports = {
         "table",
         "split-button",
         "datepicker",
+        "link",
       ],
     ],
   },

custom-elements-manifest.config.mjs

@@ -2,7 +2,12 @@ import { parse } from "comment-parser";
 
 export default {
   globs: ["src/components/**/!(*.test|*.stories).ts"],
-  exclude: ["src/**/*.css", "src/**/*.constant.ts","src/**/*/*.types.ts","src/components/icon/icon-list.ts"],
+  exclude: [
+    "src/**/*.css",
+    "src/**/*.constant.ts",
+    "src/**/*/*.types.ts",
+    "src/components/icon/icon-list.ts",
+  ],
   outdir: "dist/",
   dev: false,
   watch: false,

src/baklava.ts

@@ -1,40 +1,41 @@
-export { default as BlAccordionGroup } from "./components/accordion-group/bl-accordion-group";
 export { default as BlAccordion } from "./components/accordion-group/accordion/bl-accordion";
+export { default as BlAccordionGroup } from "./components/accordion-group/bl-accordion-group";
 export { default as BlAlert } from "./components/alert/bl-alert";
 export { default as BlBadge } from "./components/badge/bl-badge";
 export { default as BlButton } from "./components/button/bl-button";
+export { default as BlCalendar } from "./components/calendar/bl-calendar";
 export { default as BlCheckboxGroup } from "./components/checkbox-group/bl-checkbox-group";
 export { default as BlCheckbox } from "./components/checkbox-group/checkbox/bl-checkbox";
+export { default as BlDatepicker } from "./components/datepicker/bl-datepicker";
 export { default as BlDialog } from "./components/dialog/bl-dialog";
 export { default as BlDrawer } from "./components/drawer/bl-drawer";
+export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
+export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
+export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
 export { default as BlIcon } from "./components/icon/bl-icon";
 export { default as BlInput } from "./components/input/bl-input";
+export { default as BlLink } from "./components/link/bl-link";
+export { default as BlNotification } from "./components/notification/bl-notification";
+export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
 export { default as BlPagination } from "./components/pagination/bl-pagination";
+export { default as BlPopover } from "./components/popover/bl-popover";
 export { default as BlProgressIndicator } from "./components/progress-indicator/bl-progress-indicator";
 export { default as BlRadioGroup } from "./components/radio-group/bl-radio-group";
 export { default as BlRadio } from "./components/radio-group/radio/bl-radio";
 export { default as BlSelect } from "./components/select/bl-select";
 export { default as BlSelectOption } from "./components/select/option/bl-select-option";
-export { default as BlTab } from "./components/tab-group/tab/bl-tab";
+export { default as BlSpinner } from "./components/spinner/bl-spinner";
+export { default as BlSplitButton } from "./components/split-button/bl-split-button";
+export { default as BlSwitch } from "./components/switch/bl-switch";
 export { default as BlTabGroup } from "./components/tab-group/bl-tab-group";
 export { default as BlTabPanel } from "./components/tab-group/tab-panel/bl-tab-panel";
-export { default as BlTextarea } from "./components/textarea/bl-textarea";
-export { default as BlTooltip } from "./components/tooltip/bl-tooltip";
-export { default as BlPopover } from "./components/popover/bl-popover";
-export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
-export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
-export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
-export { default as BlSwitch } from "./components/switch/bl-switch";
-export { default as BlSpinner } from "./components/spinner/bl-spinner";
-export { default as BlNotification } from "./components/notification/bl-notification";
-export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
+export { default as BlTab } from "./components/tab-group/tab/bl-tab";
 export { default as BlTable } from "./components/table/bl-table";
-export { default as BlTableHeader } from "./components/table/table-header/bl-table-header";
 export { default as BlTableBody } from "./components/table/table-body/bl-table-body";
-export { default as BlTableRow } from "./components/table/table-row/bl-table-row";
-export { default as BlTableHeaderCell } from "./components/table/table-header-cell/bl-table-header-cell";
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
-export { default as BlSplitButton } from "./components/split-button/bl-split-button";
-export { default as BlCalendar } from "./components/calendar/bl-calendar";
-export { default as BlDatePicker } from "./components/datepicker/bl-datepicker";
+export { default as BlTableHeaderCell } from "./components/table/table-header-cell/bl-table-header-cell";
+export { default as BlTableHeader } from "./components/table/table-header/bl-table-header";
+export { default as BlTableRow } from "./components/table/table-row/bl-table-row";
+export { default as BlTextarea } from "./components/textarea/bl-textarea";
+export { default as BlTooltip } from "./components/tooltip/bl-tooltip";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";

src/components/calendar/bl-calendar.css

@@ -127,6 +127,7 @@
 
 .grid-item {
   width: 93.33px;
+
   --bl-size-3xs: 15px;
 }
 

src/components/datepicker/bl-datepicker.test.ts

@@ -1,16 +1,16 @@
 import { aTimeout, expect, fixture, html } from "@open-wc/testing";
-import { BlButton, BlDatePicker } from "../../baklava";
-import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import sinon from "sinon";
+import { BlButton, BlDatepicker } from "../../baklava";
+import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import "./bl-datepicker";
 
 describe("BlDatepicker", () => {
-  let element: BlDatePicker;
+  let element: BlDatepicker;
   let getElementByIdStub: sinon.SinonStub;
   let consoleWarnSpy: sinon.SinonSpy;
 
   beforeEach(async () => {
-    element = await fixture<BlDatePicker>(html`
+    element = await fixture<BlDatepicker>(html`
       <bl-datepicker type="single" locale="en"></bl-datepicker>`);
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -276,7 +276,7 @@ describe("BlDatepicker", () => {
   });
 
   it("should warn when 'value' is not an array for multiple/range selection", async () => {
-    element = await fixture<BlDatePicker>(html`
+    element = await fixture<BlDatepicker>(html`
       <bl-datepicker type="multiple" locale="en"></bl-datepicker>`);
     element.value = new Date();
 

src/components/link/bl-link.css

@@ -0,0 +1,105 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.link {
+  /* Custom properties */
+  --color: var(--bl-link-color, var(--bl-color-primary));
+  --hover-color: var(--bl-link-hover-color, var(--bl-color-primary-highlight));
+  --active-color: var(--bl-link-active-color, var(--bl-color-primary-highlight));
+
+  /* Base styles */
+  display: inline-flex;
+  align-items: center;
+  color: var(--color);
+  cursor: pointer;
+  outline: none;
+  position: relative;
+}
+
+/* States */
+.link:hover {
+  text-decoration: none;
+}
+
+.link:hover:not(.disabled) {
+  color: var(--hover-color);
+}
+
+.link:active:not(.disabled) {
+  color: var(--active-color);
+}
+
+/* Focus styles */
+.link:focus-visible {
+  outline: none;
+}
+
+.link:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border: 2px solid var(--bl-color-primary);
+  border-radius: var(--bl-border-radius-s);
+}
+
+/* Primary kind */
+.link.standalone.kind-primary {
+  color: var(--bl-color-primary);
+}
+
+.link.standalone.kind-primary:hover:not(.disabled),
+.link.standalone.kind-primary:active:not(.disabled) {
+  color: var(--bl-color-primary-highlight);
+}
+
+/* Neutral kind */
+.link.standalone.kind-neutral {
+  color: var(--bl-color-neutral);
+}
+
+.link.standalone.kind-neutral:hover:not(.disabled),
+.link.standalone.kind-neutral:active:not(.disabled) {
+  color: var(--bl-color-neutral-highlight);
+}
+
+/* Size variants */
+.link.standalone.size-large {
+  font-weight: var(--bl-font-weight-regular);
+  font-size: var(--bl-font-size-l);
+}
+
+.link.standalone.size-medium {
+  font-weight: var(--bl-font-weight-regular);
+  font-size: var(--bl-font-size-m);
+}
+
+.link.standalone.size-small {
+  font-weight: var(--bl-font-weight-regular);
+  font-size: var(--bl-font-size-s);
+}
+
+/* Icon styles */
+.icon {
+  margin-inline-start: var(--bl-size-3xs);
+}
+
+/* Disabled state */
+.link.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Screen reader only text */
+.visually-hidden {
+  position: absolute;
+  block-size: 1px;
+  inline-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}