diff --git a/package-lock.json b/package-lock.json index 8f05881a4c..12a9339c8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32083,16 +32083,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz", "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==" }, - "node_modules/react-github-corner": { - "version": "2.5.0", - "license": "MIT", - "engines": { - "node": ">= 4.0.0" - }, - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-is": { "version": "17.0.2", "dev": true, @@ -39246,7 +39236,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__/package.json b/packages/__docs__/package.json index 9154e13e37..18eef89388 100644 --- 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 index be96cacdc6..3b263dff7e 100644 --- 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 index 80c9bdc04c..9d1f19e8ed 100644 --- 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 { static propTypes = propTypes static allowedProps = allowedProps @@ -199,7 +197,7 @@ class Document extends Component { ) } - 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)} - {children.map((child: any, index: any) => ( + {children.map((child, index) => ( +
+ + + View source on GitHub + + + + + +
)} ) diff --git a/packages/__docs__/src/Document/props.ts b/packages/__docs__/src/Document/props.ts index 39779b2a6c..231946eb68 100644 --- 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> -type DocumentProps = DocumentOwnProps & - WithStyleProps +type DocumentProps = DocumentOwnProps & WithStyleProps const propTypes: PropValidators = { doc: DocPropType.isRequired, @@ -56,13 +55,7 @@ const propTypes: PropValidators = { 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 index 2bc324914b..f61f83ed32 100644 --- 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 deleted file mode 100644 index c512924b78..0000000000 --- a/packages/__docs__/src/Document/theme.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ - -import type { DocumentTheme } from './props' -const generateComponentTheme = (): DocumentTheme => { - const componentVariables = { - githubCornerColor: '#333' - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-focusable/src/Focusable/index.tsx b/packages/ui-focusable/src/Focusable/index.tsx index 135052d16d..fa6e573902 100644 --- a/packages/ui-focusable/src/Focusable/index.tsx +++ b/packages/ui-focusable/src/Focusable/index.tsx @@ -238,10 +238,7 @@ class Focusable extends Component { if (tagName == 'TEXTAREA') { return true } - if (isContentEditable) { - return true - } - return false + return isContentEditable } render() {