From a3a4c50f26b8750ae1c87f1f1103b84b7d2e6315 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 14 Nov 2023 15:11:22 +0100
Subject: refactor(components): replace LinksListWidget with LinksWidget

* avoid List component repeat
* rewrite tests and CSS
* add an id to LinksWidgetItemData (previously LinksListItems) type
because the label could be duplicated
---
 .../widgets/links-widget/links-widget.module.scss  | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/components/organisms/widgets/links-widget/links-widget.module.scss

(limited to 'src/components/organisms/widgets/links-widget/links-widget.module.scss')

diff --git a/src/components/organisms/widgets/links-widget/links-widget.module.scss b/src/components/organisms/widgets/links-widget/links-widget.module.scss
new file mode 100644
index 0000000..296d8e4
--- /dev/null
+++ b/src/components/organisms/widgets/links-widget/links-widget.module.scss
@@ -0,0 +1,65 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/placeholders";
+
+.item {
+  &:not(:last-child) {
+    border-bottom: fun.convert-px(1) solid var(--color-primary);
+  }
+}
+
+.link {
+  display: block;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  background: none;
+  text-decoration: underline solid transparent 0;
+
+  &:hover,
+  &:focus {
+    background: var(--color-bg-secondary);
+  }
+
+  &:focus {
+    color: var(--color-primary);
+    text-decoration-color: var(--color-primary-light);
+    text-decoration-thickness: 0.25ex;
+  }
+
+  &:active {
+    background: var(--color-bg-tertiary);
+    text-decoration-color: transparent;
+    text-decoration-thickness: 0;
+  }
+}
+
+.list {
+  padding: 0;
+
+  &--ordered {
+    counter-reset: link;
+
+    .link {
+      counter-increment: link;
+
+      &::before {
+        content: counters(link, ".") ". ";
+        display: inline-block;
+        padding-inline-end: var(--spacing-2xs);
+        color: var(--color-secondary);
+      }
+    }
+  }
+
+  & & {
+    border-top: fun.convert-px(1) solid var(--color-primary);
+
+    .link {
+      padding-left: var(--spacing-lg);
+    }
+  }
+
+  & & & {
+    .link {
+      padding-left: var(--spacing-2xl);
+    }
+  }
+}
-- 
cgit v1.2.3