HelpLink component (#211)

* removing useless doc snippet

* adding KnowMore component

* adding KnowMore test

* adding KnowMore stories

* component renaming

* adding button variation

* linting

* helpLink breadcrumb integration

* linting

* tests fix

styleguide/src/Components/HelpLink/HelpLink.spec.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./HelpLink.stories"
+
+const { Default, Button, NoTextOnMobile } = composeStories(stories)
+
+const specTitle = require('cypress-sonarqube-reporter/specTitle');
+describe(specTitle('HelpLink tests'), () => {
+
+  it('Default', () => {
+    mount(<Default />)
+    cy.get('#helpLinkContainer').within(() => {
+      cy.get('span').should('have.class', 'text-f6').and('have.class', 'font-semibold').contains('Saiba mais')
+    })
+  })
+
+  it('Button', () => {
+    mount(<Button />)
+    cy.get('#helpLinkContainer').within(() => {
+      cy.get('span').should('have.class', 'text-f6').and('have.class', 'font-semibold').contains('Saiba mais')
+      cy.get('#helpLinkContainer').should(() => {alert(`Clicked!`)})
+    })
+  })
+
+  it('NoTextOnMobile', () => {
+    mount(<NoTextOnMobile />)
+    cy.get('#helpLinkContainer').within(() => {
+      cy.get('span').should('have.class', 'hidden').and('have.class', 'md:inline').contains('Saiba mais')
+    })
+  })
+
+})

styleguide/src/Components/HelpLink/HelpLink.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { HelpLink, HelpLinkProps } from '.'
+
+export default {
+  title: 'Navigation/HelpLink',
+  component: HelpLink,
+  parameters: {
+    layout: 'padded',
+  }
+} as Meta
+
+const Template: Story<HelpLinkProps> = args => <HelpLink {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  text: 'Saiba mais',
+  as: 'hyperLink',
+  href: 'https://www.lojaintegrada.com.br'
+}
+
+export const Button = Template.bind({})
+Button.args = {
+  text: 'Saiba mais',
+  as: 'button',
+  onClick: function() {
+    alert('Clicked!')
+  }
+}
+
+export const NoTextOnMobile = Template.bind({})
+NoTextOnMobile.args = {
+  text: 'Saiba mais',
+  as: 'hyperLink',
+  href: 'https://www.lojaintegrada.com.br',
+  mobileText: false,
+}
+

styleguide/src/Components/HelpLink/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Icon } from '../../Icons'
+
+const defaultClass =
+  'flex p-1 pr-0 text-on-base-2 hover:text-on-base duration-200 transition-colors items-center'
+
+export const HelpLink: React.FC<HelpLinkProps> = React.memo(
+  ({
+    className = '',
+    text = '',
+    mobileText,
+    href = '',
+    as = 'hyperLink',
+    onClick,
+  }) => {
+    const Text = () => (
+      <>
+        <Icon icon="questionCircle" size={4} className="shrink-0" block />
+        <span
+          className={`text-f6 font-semibold tracking-4 leading-6 ml-2
+            ${!mobileText ? 'hidden md:inline' : ''}
+          `}
+        >
+          {text}
+        </span>
+      </>
+    )
+
+    const HyperLink = () => (
+      <a
+        className={`${defaultClass} ${className}`}
+        href={href}
+        rel="noreferrer"
+        target="_blank"
+        id="helpLinkContainer"
+      >
+        <Text />
+      </a>
+    )
+
+    const Button = () => (
+      <button
+        className={`${defaultClass} ${className}`}
+        id="helpLinkContainer"
+        onClick={onClick}
+      >
+        <Text />
+      </button>
+    )
+
+    return as == 'hyperLink' ? <HyperLink /> : <Button />
+  }
+)
+
+export interface HelpLinkProps {
+  /**
+   * Custom class name
+   * */
+  className?: string
+  /**
+   * Text to be displayed
+   * */
+  text?: string
+  /**
+   * Text will appear on mobile or not
+   * */
+  mobileText?: boolean
+  /**
+   * Component behaviour as hyper link or button
+   * */
+  as: 'hyperLink' | 'button'
+  /**
+   * Href to the link where component redirects
+   * */
+  href?: string
+  /**
+   * Button action when clicked
+   * */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}

styleguide/src/Navigation/Breadcrumb/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Icon } from '../../Icons/Icon'
+import { HelpLink } from '../../Components/HelpLink'
 
 const actionsDisplayClass = {
   both: 'flex',
@@ -84,28 +85,12 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
         <div className="header-navigation-content flex shrink-0 max-w-1/2 items-center flex-grow justify-end gap-5 ml-2 whitespace-nowrap">
           <div className="header-navigation-help help flex items-center">
             {help && (
-              <a
+              <HelpLink
+                text={help.title}
+                mobileText={help.mobileText}
+                as="hyperLink"
                 href={help.href}
-                target="_blank"
-                rel="noreferrer"
-                className={`flex p-1 pr-0 text-on-base-2 hover:text-on-base duration-200 transition-colors items-center`}
-              >
-                <Icon
-                  icon="questionCircle"
-                  size={4}
-                  className="shrink-0"
-                  block
-                />
-                {help.title && (
-                  <span
-                    className={`text-f6 font-semibold tracking-4 leading-6 ml-2 ${
-                      !help.mobileText ? 'hidden md:inline' : ''
-                    }`}
-                  >
-                    {help.title}
-                  </span>
-                )}
-              </a>
+              />
             )}
           </div>
           {actions && (

styleguide/src/Navigation/Stepper/index.tsx

@@ -94,7 +94,4 @@ export interface StepperProps {
    * Shows step text instead of linking lines
    * */
   showText?: boolean
-  /**
-   * Function to handle step click
-   * */
 }