fix: placeholder -> disabled

nl-design-system · Dec 20, 2024 · b2caae9 · b2caae9
1 parent fe245ac
commit b2caae9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/packages/storybook-test/stories/link/link.stories.tsx b/packages/storybook-test/stories/link/link.stories.tsx
@@ -407,12 +407,12 @@ De HTML heeft het \`aria-current="true"\` attribuut.`,
   },
 };
 
-export const Placeholder: Story = {
-  name: 'Placeholder Link',
+export const DisabledLink: Story = {
+  name: 'Disabled Link',
   args: {
     children: '2 december',
+    disabled: true,
     href: 'https://www.htmhell.dev/adventcalendar/2024/2/',
-    placeholder: true,
   },
   globals: {
     dir: 'ltr',
@@ -446,7 +446,7 @@ Een Placeholder-link is niet focusbaar. In de accessibility tree staan ze wel, a
             .map((_, i) => i + 3)
             .map((day) => (
               <li key={day}>
-                <Link href={`https://www.htmhell.dev/adventcalendar/2024/${day}/`} placeholder>
+                <Link href={`https://www.htmhell.dev/adventcalendar/2024/${day}/`} disabled>
                   {day} december
                 </Link>
               </li>

diff --git a/packages/tokens/link-tokens/tokens.json b/packages/tokens/link-tokens/tokens.json
@@ -33,50 +33,50 @@
           "$type": "fontWeights"
         }
       },
-      "hover": {
+      "disabled": {
         "color": {
           "$extensions": {
             "nl.nldesignsystem.css-property-syntax": "<color>",
             "nl.nldesignsystem.figma-implementation": true
           },
           "$type": "color"
         },
-        "text-decoration-line": {
+        "cursor": {
           "$extensions": {
-            "nl.nldesignsystem.css-property-syntax": ["inherit", "none", "underline"],
-            "nl.nldesignsystem.figma-implementation": true
+            "nl.nldesignsystem.css-property-syntax": ["<url>", "pointer", "*"],
+            "nl.nldesignsystem.figma-implementation": false
           },
-          "$type": "textDecoration"
+          "$type": "other"
         },
-        "text-decoration-thickness": {
+        "font-weight": {
           "$extensions": {
-            "nl.nldesignsystem.css-property-syntax": "<length>",
+            "nl.nldesignsystem.css-property-syntax": "<number>",
             "nl.nldesignsystem.figma-implementation": false
           },
-          "$type": "other"
+          "$type": "fontWeights"
         }
       },
-      "placeholder": {
+      "hover": {
         "color": {
           "$extensions": {
             "nl.nldesignsystem.css-property-syntax": "<color>",
             "nl.nldesignsystem.figma-implementation": true
           },
           "$type": "color"
         },
-        "cursor": {
+        "text-decoration-line": {
           "$extensions": {
-            "nl.nldesignsystem.css-property-syntax": ["<url>", "pointer", "*"],
-            "nl.nldesignsystem.figma-implementation": false
+            "nl.nldesignsystem.css-property-syntax": ["inherit", "none", "underline"],
+            "nl.nldesignsystem.figma-implementation": true
           },
-          "$type": "other"
+          "$type": "textDecoration"
         },
-        "font-weight": {
+        "text-decoration-thickness": {
           "$extensions": {
-            "nl.nldesignsystem.css-property-syntax": "<number>",
+            "nl.nldesignsystem.css-property-syntax": "<length>",
             "nl.nldesignsystem.figma-implementation": false
           },
-          "$type": "fontWeights"
+          "$type": "other"
         }
       },
       "text-decoration-line": {