fix: docs Github corner has focus ring

Closes: INSTUI-4269 Also do not use a dependency for it TEST PLAN: Check if you tab to the end of the page the Github corner has visible focus. When using SR then it should announce the link text
instructure · Oct 31, 2024 · cc742d1 · cc742d1
1 parent 87623f7
commit cc742d1
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json
@@ -122,7 +122,6 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-github-corner": "^2.5.0",
     "semver": "^7.6.3",
     "uuid": "^10.0.0",
     "webpack-merge": "^6.0.1"

diff --git a/packages/__docs__/src/App/props.ts b/packages/__docs__/src/App/props.ts
@@ -29,6 +29,7 @@ import type {
   MainDocsData,
   ProcessedFile
 } from '../../buildScripts/DataTypes.mts'
+import type { DocDataType } from '../Document/props'
 
 type AppOwnProps = {
   trayWidth: number
@@ -90,7 +91,7 @@ type AppState = {
 
 type DocData = ProcessedFile & {
   componentInstance: any
-  children: any[]
+  children: DocDataType[]
 }
 
 export type { AppProps, AppState, DocData, LayoutSize, AppStyle, AppTheme }

diff --git a/packages/__docs__/src/Document/index.tsx b/packages/__docs__/src/Document/index.tsx
@@ -24,7 +24,6 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-import GithubCorner from 'react-github-corner'
 
 import { Link } from '@instructure/ui-link'
 import { View } from '@instructure/ui-view'
@@ -34,7 +33,6 @@ import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { Description } from '../Description'
 import { Properties } from '../Properties'
@@ -47,7 +45,7 @@ import { Heading } from '../Heading'
 import { propTypes, allowedProps } from './props'
 import type { DocumentProps, DocumentState, DocDataType } from './props'
 
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Document extends Component<DocumentProps, DocumentState> {
   static propTypes = propTypes
   static allowedProps = allowedProps
@@ -199,7 +197,7 @@ class Document extends Component<DocumentProps, DocumentState> {
     )
   }
 
-  renderThemeLink(doc: any, text?: string) {
+  renderThemeLink(doc: DocDataType, text?: string) {
     if (doc.themeUrl && doc.themePath) {
       const { themePath, themeUrl, legacyGitBranch } = doc
 
@@ -330,7 +328,7 @@ import { ${importName} } from '${esPath}'
             >
               {this.renderDetails(doc)}
             </Tabs.Panel>
-            {children.map((child: any, index: any) => (
+            {children.map((child, index) => (
               <Tabs.Panel
                 renderTitle={child.title}
                 key={`${child.id}TabPanel`}
@@ -359,10 +357,44 @@ import { ${importName} } from '${esPath}'
         {['.js', '.ts', '.tsx'].includes(doc.extension) && this.renderUsage()}
         {this.renderEditOnGithub()}
         {repository && layout !== 'small' && (
-          <GithubCorner
-            href={repository}
-            bannerColor={this.props.styles?.githubCornerColor as string}
-          />
+          <div css={this.props.styles?.githubCorner}>
+            <View
+              position="relative"
+              display="block"
+              tabIndex={0}
+              href={repository}
+            >
+              <svg
+                width="80"
+                height="80"
+                viewBox="0 0 250 250"
+                css={this.props.styles?.githubCornerOctoArm}
+              >
+                <title>View source on GitHub</title>
+                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+                <path
+                  d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,
+                  82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,
+                  76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,
+                  101.9 134.4,103.2"
+                  fill="currentColor"
+                  id="octoArm"
+                />
+                <path
+                  d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,
+                  101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,
+                  74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,
+                  49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,
+                  56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,
+                  73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,
+                  93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,
+                  112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,
+                  120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </View>
+          </div>
         )}
       </div>
     )

diff --git a/packages/__docs__/src/Document/props.ts b/packages/__docs__/src/Document/props.ts
@@ -45,8 +45,7 @@ type PropKeys = keyof DocumentOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type DocumentProps = DocumentOwnProps &
-  WithStyleProps<DocumentTheme, DocumentStyle>
+type DocumentProps = DocumentOwnProps & WithStyleProps<null, DocumentStyle>
 
 const propTypes: PropValidators<PropKeys> = {
   doc: DocPropType.isRequired,
@@ -56,13 +55,7 @@ const propTypes: PropValidators<PropKeys> = {
   layout: PropTypes.oneOf(['small', 'medium', 'large', 'x-large'])
 }
 
-type DocumentStyle = ComponentStyle<'githubCornerColor'>
-
-type DocumentTheme = {
-  githubCornerColor: string
-}
-
-type TOCHeadingData = { id: string; innerText: string; level: string }
+type DocumentStyle = ComponentStyle<'githubCornerOctoArm' | 'githubCorner'>
 
 type DocumentState = {
   selectedDetailsTabIndex: number
@@ -78,11 +71,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export { propTypes, allowedProps }
-export type {
-  DocumentProps,
-  DocumentStyle,
-  DocumentState,
-  DocumentTheme,
-  DocDataType,
-  TOCHeadingData
-}
+export type { DocumentProps, DocumentStyle, DocumentState, DocDataType }
diff --git a/packages/__docs__/src/Document/styles.ts b/packages/__docs__/src/Document/styles.ts
@@ -33,10 +33,54 @@
  * @return {Object} The final style object, which will be used in the component
  */
 
-import type { DocumentTheme, DocumentStyle } from './props'
-const generateStyle = (componentTheme: DocumentTheme): DocumentStyle => {
+import type { DocumentStyle } from './props'
+import { keyframes } from '@instructure/emotion'
+
+const octocatWave = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(-25deg);
+  }
+
+  40% {
+    transform: rotate(10deg);
+  }
+
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  80% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }`
+
+const generateStyle = (): DocumentStyle => {
   return {
-    githubCornerColor: componentTheme.githubCornerColor
+    githubCorner: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    },
+    githubCornerOctoArm: {
+      fill: '#151513',
+      color: '#fff',
+      ':hover': {
+        '[id="octoArm"]': {
+          // 0,0 is the bottom left of the SVG
+          transformOrigin: '55% 45%',
+          animationDuration: '560ms',
+          animationName: octocatWave,
+          animationTimingFunction: 'ease-in-out'
+        }
+      }
+    }
   }
 }
 

diff --git a/packages/__docs__/src/Document/theme.ts b/packages/__docs__/src/Document/theme.ts
diff --git a/packages/ui-focusable/src/Focusable/index.tsx b/packages/ui-focusable/src/Focusable/index.tsx
@@ -238,10 +238,7 @@ class Focusable extends Component<FocusableProps, FocusableState> {
     if (tagName == 'TEXTAREA') {
       return true
     }
-    if (isContentEditable) {
-      return true
-    }
-    return false
+    return isContentEditable
   }
 
   render() {