[Feature] Button secondary noborder styles and button link variant

package.json

@@ -140,7 +140,7 @@
     "polished": "4.0.5",
     "react-popper": "2.2.4",
     "react-svg": "11.2.1",
-    "suomifi-design-tokens": "^3.0.0",
+    "suomifi-design-tokens": "3.1.0",
     "suomifi-icons": "^2.0.0",
     "uuid": "8.3.2"
   },

src/core/Button/Button.baseStyles.tsx

@@ -64,25 +64,35 @@ const secondaryStyles = css`
 `;
 
 const secondaryNoBorderStyles = css`
-  &.fi-button--secondary-noborder {
+  &.fi-button--secondaryNoBorder {
     ${secondary}
     border: none;
+    background-color: transparent;
   }
 `;
 
-const tertiaryStyles = css`
-  &.fi-button--tertiary {
+const linkStyles = css`
+  &.fi-button--link {
+    color: ${theme.colors.highlightBase};
     ${secondary}
-    background: ${theme.gradients.highlightLight3ToHighlightLight2};
+    background: ${theme.gradients.depthSecondaryToDepthSecondaryDark1};
     border: none;
 
     &:hover {
-      background: ${theme.colors.highlightLight3};
+      background: ${theme.gradients.highlightLight4ToDepthSecondary};
     }
 
     &:active {
       background: ${theme.gradients.depthLight3ToDepthLight2};
     }
+
+    &.fi-button--disabled,
+    &[disabled],
+    &:disabled {
+      color: ${theme.colors.depthBase};
+      background: none;
+      background-color: ${theme.colors.depthLight3};
+    }
   }
 `;
 
@@ -136,7 +146,7 @@ export const baseStyles = css`
   ${invertedStyles}
   ${secondaryStyles}
   ${secondaryNoBorderStyles}
-  ${tertiaryStyles}
+  ${linkStyles}
 
   & > .fi-button_icon {
     width: 16px;

src/core/Button/Button.md

@@ -87,16 +87,15 @@ import { Button } from 'suomifi-ui-components';
   <Button variant="secondary" disabled fullWidth icon="login">
     Secondary Button disabled fullWidth icon="login"
   </Button>
-
-  <Button variant="secondaryNoborder">
+  <Button variant="secondaryNoBorder">
     Borderless secondary Button
   </Button>
 
-  <Button variant="secondaryNoborder" icon="login">
+  <Button variant="secondaryNoBorder" icon="login">
     Borderless secondary Button icon="login"
   </Button>
 
-  <Button variant="secondaryNoborder" disabled icon="login">
+  <Button variant="secondaryNoBorder" disabled icon="login">
     Borderless secondary Button disabled icon="login"
   </Button>
 </>;
@@ -106,10 +105,10 @@ import { Button } from 'suomifi-ui-components';
 import { Button } from 'suomifi-ui-components';
 
 <>
-  <Button variant="tertiary">Tertiary Button</Button>
+  <Button variant="link">Link Button</Button>
 
-  <Button variant="tertiary" disabled icon="login">
-    Tertiary Button disabled icon="login"
+  <Button variant="link" disabled icon="login">
+    Link Button disabled icon="login"
   </Button>
 </>;
 ```

src/core/Button/Button.test.tsx

@@ -67,17 +67,15 @@ describe('Button variant', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('secondary-noborder should match snapshot', () => {
+  it('secondaryNoBorder should match snapshot', () => {
     const { container } = render(
-      <Button variant="secondary-noborder">Secondary-noborder button</Button>,
+      <Button variant="secondaryNoBorder">secondaryNoBorder button</Button>,
     );
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('tertiary match snapshot', () => {
-    const { container } = render(
-      <Button variant="tertiary">Tertiary button</Button>,
-    );
+  it('link match snapshot', () => {
+    const { container } = render(<Button variant="link">Link button</Button>);
     expect(container.firstChild).toMatchSnapshot();
   });
 });

src/core/Button/Button.tsx

@@ -9,13 +9,13 @@ type ButtonVariant =
   | 'default'
   | 'inverted'
   | 'secondary'
-  | 'secondary-noborder'
-  | 'tertiary';
+  | 'secondaryNoBorder'
+  | 'link';
 
 interface InternalButtonProps
   extends Omit<HtmlButtonProps, 'aria-disabled' | 'onClick'> {
   /**
-   * 'default' | 'inverted' | 'secondary' | 'secondary-noborder' | 'tertiary'
+   * 'default' | 'inverted' | 'secondary' | 'secondaryNoBorder' | 'link'
    * @default default
    */
   variant?: ButtonVariant;
@@ -145,8 +145,6 @@ const StyledButton = styled(
 /**
  * <i class="semantics" />
  * Use for inside Application onClick events.<br />
- * When using Button secondaryNoborder variant with other than white background,<br />
- * define styles background color for all needed states (:hover, :active, :disabled)<br /><br />
  */
 export const Button = forwardRef(
   (props: ButtonProps, ref: React.RefObject<HTMLButtonElement>) => (