From 1a7473bbce93a8f853ee61400ed821e7397f3c38 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 1 Feb 2024 11:53:08 +0100
Subject: [PATCH] :recycle: #15 - refactor: refactor styling

---
 src/components/breadcrumbs/breadcrumbs.scss | 12 ++-------
 src/components/breadcrumbs/breadcrumbs.tsx  | 18 ++++---------
 src/components/typography/a/a.scss          | 15 ++++++++++-
 src/components/typography/a/a.tsx           | 25 +++++++++++++++--
 src/components/typography/li/li.scss        |  4 +++
 src/components/typography/li/li.tsx         | 26 +++++-------------
 src/components/typography/ol/ol.scss        |  9 +++++++
 src/components/typography/ol/ol.tsx         | 30 +++++++++++++--------
 src/components/typography/p/p.tsx           |  1 +
 src/settings/tokens.css                     |  2 +-
 10 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss
index f2f013d4..ad406294 100644
--- a/src/components/breadcrumbs/breadcrumbs.scss
+++ b/src/components/breadcrumbs/breadcrumbs.scss
@@ -20,16 +20,8 @@
     }
   }
 
-  &__link {
-    cursor: pointer;
-    text-decoration: none;
-    color: inherit;
-    font-size: var(--typography-font-size-body-xs);
-  }
-
-  &__separator {
+  .mykn-icon {
     color: var(--theme-color-primary-800);
-    height: 20px;
-    width: 20px;
+    margin: 0 var(--spacing-h-xs);
   }
 }
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 67884725..baef6e6c 100644
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import React from "react";
 
 import { Outline } from "../icon";
@@ -37,28 +36,21 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
 }) => {
   return (
     <nav className="mykn-breadcrumbs" {...props}>
-      <Ol className="mykn-breadcrumbs__list">
+      <Ol inline listStyle="none">
         {pathItems.map((item, index) => {
           const isLastItem = index === pathItems.length - 1;
 
           return (
-            <Li
-              key={item.path}
-              size="xs"
-              className={clsx("mykn-breadcrumbs__item", {
-                "mykn-breadcrumbs__item--last": isLastItem,
-              })}
-            >
+            <Li key={item.path} size="xs">
               <A
                 href={item.path}
+                muted={!isLastItem}
+                textDecoration="none"
                 onClick={() => onClick?.(item.path)}
-                className="mykn-breadcrumbs__link"
               >
                 {item.label}
               </A>
-              {!isLastItem && (
-                <Outline.ChevronRightIcon className="mykn-breadcrumbs__separator" />
-              )}
+              {!isLastItem && <Outline.ChevronRightIcon />}
             </Li>
           );
         })}
diff --git a/src/components/typography/a/a.scss b/src/components/typography/a/a.scss
index fb3d4189..bd52e4f7 100644
--- a/src/components/typography/a/a.scss
+++ b/src/components/typography/a/a.scss
@@ -1,18 +1,31 @@
-@use '../p/p';
+@use "../p/p";
 
 .mykn-a {
   @extend .mykn-p;
   color: var(--theme-color-primary-800);
   display: inline-flex;
+  font-size: inherit;
   justify-content: center;
   align-items: center;
   gap: 0.5em;
   width: fit-content;
 
+  &--text-decoration-none {
+    text-decoration: none;
+
+    &#{&}:hover {
+      text-decoration: underline;
+    }
+  }
+
   &:hover {
     text-decoration: none;
   }
 
+  &#{&}--muted {
+    @extend .mykn-p--muted;
+  }
+
   &[aria-current] {
     font-weight: var(--typography-font-weight-bold);
   }
diff --git a/src/components/typography/a/a.tsx b/src/components/typography/a/a.tsx
index db20686a..e7177900 100644
--- a/src/components/typography/a/a.tsx
+++ b/src/components/typography/a/a.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, { AnchorHTMLAttributes } from "react";
 
 import "./a.scss";
@@ -8,17 +9,37 @@ export type AProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
    * container or set of related elements.
    */
   active?: boolean;
+
+  /** Whether the text should be presented in a lighter color. */
+  muted?: boolean;
+
+  /** The text decoration. */
+  textDecoration?: "underline" | "none";
 };
 
 /**
  * Anchor (<a>) component
  * @param active
  * @param children
+ * @param muted
+ * @param textDecoration
  * @param props
  * @constructor
  */
-export const A: React.FC<AProps> = ({ active, children, ...props }) => (
-  <a className="mykn-a" aria-current={active} {...props}>
+export const A: React.FC<AProps> = ({
+  active,
+  children,
+  muted,
+  textDecoration = "underline",
+  ...props
+}) => (
+  <a
+    className={clsx("mykn-a", `mykn-a--text-decoration-${textDecoration}`, {
+      "mykn-a--muted": muted,
+    })}
+    aria-current={active}
+    {...props}
+  >
     {children}
   </a>
 );
diff --git a/src/components/typography/li/li.scss b/src/components/typography/li/li.scss
index c064b327..3a4ae3c6 100644
--- a/src/components/typography/li/li.scss
+++ b/src/components/typography/li/li.scss
@@ -2,4 +2,8 @@
 
 .mykn-li {
   @extend .mykn-p;
+
+  &--size-xs {
+    @extend .mykn-p--size-xs;
+  }
 }
diff --git a/src/components/typography/li/li.tsx b/src/components/typography/li/li.tsx
index 8eb4f70a..46eac5ff 100644
--- a/src/components/typography/li/li.tsx
+++ b/src/components/typography/li/li.tsx
@@ -3,34 +3,20 @@ import React from "react";
 
 import "./li.scss";
 
-export type LiProps = React.PropsWithChildren<
-  {
-    /** The size of the text. */
-    size?: "s" | "xs";
-
-    /** Additional class names to apply to the component */
-    className?: string;
-  } & React.HTMLAttributes<HTMLLIElement>
->;
+export type LiProps = React.HTMLAttributes<HTMLLIElement> & {
+  /** The size of the text. */
+  size?: "s" | "xs";
+};
 
 /**
  * Li component
  * @param children
  * @param size
- * @param className
  * @param props
  * @constructor
  */
-export const Li: React.FC<LiProps> = ({
-  children,
-  size = "s",
-  className,
-  ...props
-}) => (
-  <li
-    className={clsx("mykn-li", `mykn-li--size-${size}`, className)}
-    {...props}
-  >
+export const Li: React.FC<LiProps> = ({ children, size = "s", ...props }) => (
+  <li className={clsx("mykn-li", `mykn-li--size-${size}`)} {...props}>
     {children}
   </li>
 );
diff --git a/src/components/typography/ol/ol.scss b/src/components/typography/ol/ol.scss
index a94f796d..f42ad0aa 100644
--- a/src/components/typography/ol/ol.scss
+++ b/src/components/typography/ol/ol.scss
@@ -5,6 +5,15 @@
   list-style-position: inside;
   padding-inline-start: 0;
 
+  &--inline .mykn-li {
+    float: left; // fallback
+    float: inline-start;
+  }
+
+  &--list-style-none {
+    list-style: none;
+  }
+
   .mykn-ol {
     padding-inline-start: var(--spacing-h-xl);
   }
diff --git a/src/components/typography/ol/ol.tsx b/src/components/typography/ol/ol.tsx
index 3d3b563d..9a264270 100644
--- a/src/components/typography/ol/ol.tsx
+++ b/src/components/typography/ol/ol.tsx
@@ -4,32 +4,40 @@ import React from "react";
 import { PProps } from "../p";
 import "./ol.scss";
 
-export type OlProps = React.PropsWithChildren<
-  {
-    /** The size of the text. */
-    size?: PProps["size"];
+export type OlProps = React.HTMLAttributes<HTMLOListElement> & {
+  /** Whether to show list items inline. */
+  inline?: boolean;
 
-    /** Additional class names to apply to the component */
-    className?: string;
-  } & React.HTMLAttributes<HTMLOListElement>
->;
+  /** The list style. */
+  listStyle?: "decimal" | "none";
+
+  /** The size of the text. */
+  size?: PProps["size"];
+};
 
 /**
  * Ol component
  * @param children
+ * @param inline
+ * @param listStyle
  * @param size
- * @param className
  * @param props
  * @constructor
  */
 export const Ol: React.FC<OlProps> = ({
   children,
+  inline = false,
+  listStyle,
   size = "s",
-  className,
   ...props
 }) => (
   <ol
-    className={clsx("mykn-ol", `mykn-ol--size-${size}`, className)}
+    className={clsx(
+      "mykn-ol",
+      `mykn-ol--size-${size}`,
+      `mykn-ol--list-style-${listStyle}`,
+      { "mykn-ol--inline": inline },
+    )}
     {...props}
   >
     {children}
diff --git a/src/components/typography/p/p.tsx b/src/components/typography/p/p.tsx
index 3fab3378..20ce2055 100644
--- a/src/components/typography/p/p.tsx
+++ b/src/components/typography/p/p.tsx
@@ -14,6 +14,7 @@ export type PProps = React.PropsWithChildren<{
 /**
  * Ul component
  * @param children
+ * @param muted
  * @param size
  * @param props
  * @constructor
diff --git a/src/settings/tokens.css b/src/settings/tokens.css
index 06c60eed..369b34bb 100644
--- a/src/settings/tokens.css
+++ b/src/settings/tokens.css
@@ -60,7 +60,7 @@
   --typography-color-background: var(--theme-shade-0);
   --typography-color-h: var(--theme-shade-900);
   --typography-color-body: var(--theme-shade-700);
-  --typography-color-muted: var(--theme-shade-400);
+  --typography-color-muted: var(--theme-shade-600);
 
   --typography-font-size-h1: 24px;
   --typography-font-size-h2: 20px;