feat: update link (#1111)

* feat: update link component * test: update accordion tests
ocean-ds · Jun 26, 2024 · 8aa0bf2 · 8aa0bf2
1 parent 354f5bb
commit 8aa0bf2
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 13 deletions.
diff --git a/packages/ocean-core/src/components/_link.scss b/packages/ocean-core/src/components/_link.scss
@@ -3,19 +3,46 @@
   font-family: $font-family-base;
   font-weight: $font-weight-medium;
   line-height: $line-height-tight;
+  text-decoration: underline;
+
+  &--chevron {
+    svg {
+      margin-left: 2px;
+    }
+  }
+
+  &--tiny {
+    font-size: $font-size-xxxs;
+    line-height: 12px;
+
+    svg {
+      height: 14px;
+      margin-left: 0;
+      width: 14px;
+    }
+  }
+
+  &--external {
+    svg {
+      margin-left: $spacing-inline-xxxs;
+    }
+  }
 
   &--sm {
     font-size: $font-size-xxs;
+    line-height: 14px;
   }
 
   &--md {
     font-size: $font-size-xs;
+    line-height: 16px;
   }
 
   &--primary {
     color: $color-brand-primary-pure;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $color-brand-primary-down;
       text-decoration: underline;
     }
@@ -24,7 +51,8 @@
   &--inverse {
     color: $color-complementary-down;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $color-complementary-up;
       text-decoration: underline;
     }
@@ -33,19 +61,22 @@
   &--neutral {
     color: $color-interface-dark-down;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $color-brand-primary-down;
       text-decoration: underline;
     }
   }
 
+  &--disabled {
+    color: $color-interface-dark-up;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
   &--with-icon {
     align-items: center;
     display: flex;
     flex-direction: row;
   }
-
-  svg {
-    margin-left: $spacing-inline-xxxs;
-  }
 }
diff --git a/packages/ocean-react/src/Accordion/Accordion.tsx b/packages/ocean-react/src/Accordion/Accordion.tsx
@@ -28,6 +28,7 @@ const Accordion = ({
           'ods-accordion__header--collapsed': isCollapsed,
         })}
         aria-expanded={!isCollapsed}
+        data-testid="accordion-header"
       >
         {title}
         <ChevronDown

diff --git a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import Accordion, { AccordionProps } from '../Accordion';
 
 const setUp = (props: AccordionProps) => {
   render(<Accordion {...props} />);
 };
 
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 test('renders element properly', () => {
   setUp({ title: 'Title', description: 'Description' });
 
@@ -17,6 +21,7 @@ test('renders element properly', () => {
       <button
         aria-expanded="false"
         class="ods-accordion__header ods-accordion__header--collapsed"
+        data-testid="accordion-header"
         type="button"
       >
         Title
@@ -47,3 +52,49 @@ test('renders element properly', () => {
     </div>
   `);
 });
+
+test('render element opened', () => {
+  setUp({ title: 'Title', description: 'Description' });
+
+  const button = screen.getByTestId('accordion-header');
+
+  fireEvent.click(button);
+
+  expect(document.querySelector('.ods-accordion')).toMatchInlineSnapshot(`
+    <div
+      class="ods-accordion"
+    >
+      <button
+        aria-expanded="true"
+        class="ods-accordion__header"
+        data-testid="accordion-header"
+        type="button"
+      >
+        Title
+        <svg
+          class="ods-accordion__icon"
+          fill="currentColor"
+          height="24"
+          viewBox="0 0 20 20"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+      <div
+        class="ods-accordion__content"
+      >
+        <p
+          class="ods-accordion__description"
+        >
+          Description
+        </p>
+      </div>
+    </div>
+  `);
+});
diff --git a/packages/ocean-react/src/Link/Link.tsx b/packages/ocean-react/src/Link/Link.tsx
@@ -13,27 +13,42 @@ export type LinkProps = {
    * The size of the link.
    * @default 'md'
    */
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'tiny';
   /**
    * Sets a custon icon for the Link.
    * @default ' '
    */
   icon?: 'linkChevron' | 'externalLink';
+  disabled?: boolean;
 } & ComponentPropsWithoutRef<'a'>;
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
-    { children, className, variant = 'primary', size = 'md', icon, ...rest },
+    {
+      children,
+      className,
+      variant = 'primary',
+      size = 'md',
+      icon,
+      disabled,
+      ...rest
+    },
     ref
   ) => (
     <a
+      aria-disabled={disabled}
       ref={ref}
       className={classNames(
         'ods-link',
         `ods-link--${size}`,
         `ods-link--${variant}`,
         icon ? 'ods-link--with-icon' : '',
-        className
+        className,
+        {
+          'ods-link--disabled': disabled,
+          'ods-link--chevron': icon === 'linkChevron',
+          'ods-link--external': icon === 'externalLink',
+        }
       )}
       {...rest}
     >

diff --git a/packages/ocean-react/src/Link/__tests__/Link.test.tsx b/packages/ocean-react/src/Link/__tests__/Link.test.tsx
@@ -37,3 +37,13 @@ test('renders a medium link', () => {
   render(<Link data-testid="link-test" size="md" />);
   expect(screen.getByTestId('link-test')).toHaveClass('ods-link--md');
 });
+
+test('renders a tiny link', () => {
+  render(<Link data-testid="link-test" size="tiny" />);
+  expect(screen.getByTestId('link-test')).toHaveClass('ods-link--tiny');
+});
+
+test('renders a disabled link', () => {
+  render(<Link data-testid="link-test" disabled />);
+  expect(screen.getByTestId('link-test')).toHaveClass('ods-link--disabled');
+});
diff --git a/packages/ocean-react/src/Link/stories/Link.stories.mdx b/packages/ocean-react/src/Link/stories/Link.stories.mdx
@@ -105,7 +105,7 @@ If that's not sufficient, you can check the [implementation of the component](ht
       },
       size: {
         name: 'size',
-        options: ['sm', 'md'],
+        options: ['sm', 'md', 'tiny'],
         control: { type: 'select' },
       },
       icon: {
@@ -115,6 +115,6 @@ If that's not sufficient, you can check the [implementation of the component](ht
       },
     }}
   >
-    {(props) => <Link {...props} />}
+    {(props) => <Link href="https://www.google.com.br/?hl=pt-BR" {...props} />}
   </Story>
 </Canvas>