feedback fixes + improved tests

packages/core/admin/admin/src/pages/Admin/Onboarding/index.js

@@ -8,18 +8,20 @@ import { Text } from '@strapi/parts/Text';
 import { FocusTrap } from '@strapi/parts/FocusTrap';
 import { useConfigurations } from '../../../hooks';
 
-const Wrapper = styled.button`
+const OnboardingWrapper = styled(Box)`
   position: fixed;
   bottom: ${({ theme }) => theme.spaces[2]};
   right: ${({ theme }) => theme.spaces[2]};
+`;
+
+const Button = styled.button`
   width: ${({ theme }) => theme.spaces[8]};
   height: ${({ theme }) => theme.spaces[8]};
   background: ${({ theme }) => theme.colors.primary600};
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
-
   svg {
-    color: white;
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
 
@@ -33,7 +35,6 @@ const LinksWrapper = styled(Box)`
 const StyledLink = styled.a`
   display: flex;
   align-items: center;
-  width: 100%;
   text-decoration: none;
   padding: ${({ theme }) => theme.spaces[2]};
   padding-left: ${({ theme }) => theme.spaces[5]};
@@ -91,18 +92,21 @@ const Onboarding = () => {
   };
 
   return (
-    <Wrapper
+    <OnboardingWrapper>
-      aria-label={formatMessage({
+      <Button
-        id: 'app.components.Onboarding.help.button',
+        id="onboarding"
-        defaultMessage: 'Help Button',
+        aria-label={formatMessage({
-      })}
+          id: 'app.components.Onboarding.help.button',
-      type="button"
+          defaultMessage: 'Help button',
-      onClick={handleClick}
+        })}
-    >
+        onClick={handleClick}
-      {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
+      >
-      {isOpen && <FontAwesomeIcon icon={faTimes} />}
+        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
+        {isOpen && <FontAwesomeIcon icon={faTimes} />}
+      </Button>
+
       {/* FIX ME - replace with popover when overflow popover is fixed 
-      + when v4 mockups for onboarding component are ready */}
+       + when v4 mockups for onboarding component are ready */}
       {isOpen && (
         <FocusTrap onEscape={handleClick}>
           <LinksWrapper
@@ -126,7 +130,7 @@ const Onboarding = () => {
           </LinksWrapper>
         </FocusTrap>
       )}
-    </Wrapper>
+    </OnboardingWrapper>
   );
 };
 

packages/core/admin/admin/src/pages/Admin/Onboarding/tests/index.test.js

@@ -1,9 +1,15 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { ThemeProvider, lightTheme } from '@strapi/parts';
 import Onboarding from '../index';
 
+jest.mock('../../../../hooks', () => ({
+  useConfigurations: jest.fn(() => {
+    return { showTutorials: true };
+  }),
+}));
+
 const App = (
   <ThemeProvider theme={lightTheme}>
     <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">
@@ -13,43 +19,62 @@ const App = (
 );
 
 describe('Onboarding', () => {
-  it('renders and matches the snapshot', () => {
+  it('renders and matches the snapshot', async () => {
     const {
       container: { firstChild },
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
-        border: 0;
+        position: fixed;
-        -webkit-clip: rect(0 0 0 0);
+        bottom: 8px;
-        clip: rect(0 0 0 0);
+        right: 8px;
-        height: 1px;
+      }
-        margin: -1px;
+
-        overflow: hidden;
+      .c1 {
-        padding: 0;
+        width: 40px;
-        position: absolute;
+        height: 40px;
-        width: 1px;
+        background: #4945ff;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+        border-radius: 50%;
+      }
+
+      .c1 svg {
+        color: #ffffff;
       }
 
       <div
         class="c0"
       >
-        <p
+        <button
-          aria-live="polite"
+          aria-label="Help button"
-          id="live-region-log"
+          class="c1"
-          role="log"
+          id="onboarding"
-        />
+        >
-        <p
+          <svg
-          aria-live="polite"
+            aria-hidden="true"
-          id="live-region-status"
+            class="svg-inline--fa fa-question fa-w-12 "
-          role="status"
+            data-icon="question"
-        />
+            data-prefix="fas"
-        <p
+            focusable="false"
-          aria-live="assertive"
+            role="img"
-          id="live-region-alert"
+            viewBox="0 0 384 512"
-          role="alert"
+            xmlns="http://www.w3.org/2000/svg"
-        />
+          >
+            <path
+              d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
       </div>
     `);
   });
+
+  it('should open links when button is clicked', () => {
+    render(App);
+
+    fireEvent.click(document.querySelector('#onboarding'));
+    expect(screen.getByText('Documentation')).toBeInTheDocument();
+  });
 });