added pressed state to links

gsoft-inc · May 10, 2024 · 0105ded · 0105ded
1 parent 4bdcc58
commit 0105ded
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/components/src/Link/src/Link.module.css b/packages/components/src/Link/src/Link.module.css
@@ -8,11 +8,13 @@
     --hop-Link-primary-text-color: var(--hop-primary-text);
     --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
     --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
+    --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
 
     /** Secondary */
     --hop-Link-neutral-text-color: var(--hop-neutral-text);
     --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
     --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
+    --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
 
     cursor: pointer;
 
@@ -62,6 +64,10 @@
     color: var(--hop-Link-primary-text-hover-color);
 }
 
+.hop-Link--primary:not([data-disabled])[data-pressed] {
+    color: var(--hop-Link-primary-text-pressed-color);
+}
+
 .hop-Link--secondary {
     color: var(--hop-Link-neutral-text-color);
 }
@@ -75,6 +81,10 @@
     color: var(--hop-Link-neutral-text-hover-color);
 }
 
+.hop-Link--secondary:not([data-disabled])[data-pressed] {
+    color: var(--hop-Link-neutral-text-pressed-color);
+}
+
 .hop-Link__icon,
 .hop-Link__icon-list {
     order: 2

diff --git a/packages/components/src/Link/tests/chromatic/Link.stories.tsx b/packages/components/src/Link/tests/chromatic/Link.stories.tsx
@@ -268,6 +268,11 @@ export const PrimaryStates: Story = {
                     link.setAttribute("data-hovered", "true");
                     link.removeAttribute("data-chromatic-force-hover");
                 }
+
+                if (link.getAttribute("data-chromatic-force-press")) {
+                    link.setAttribute("data-pressed", "true");
+                    link.removeAttribute("data-chromatic-force-press");
+                }
             }
         });
     },
@@ -282,6 +287,8 @@ export const PrimaryStates: Story = {
                 <StateTemplate {...args} data-chromatic-force-focus />
                 <h1>Hovered</h1>
                 <StateTemplate {...args} data-chromatic-force-hover />
+                <h1>Pressed</h1>
+                <StateTemplate {...args} data-chromatic-force-press />
                 <h1>Focus Visible and Hovered</h1>
                 <StateTemplate {...args} data-chromatic-force-focus data-chromatic-force-hover />
             </Stack>