From 4f459851429cc4adf468ebcfc50b895968ff65ae Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Tue, 27 Jun 2023 15:55:16 -0400 Subject: [PATCH] docs: Landing page update and fix nav tabs routing (#1095) --- .changeset/chart-keyboardevent.md | 5 +++ .changeset/docs-route.md | 5 +++ .changeset/landing.md | 6 +++ .../charts/src/components/LineChart/Chart.tsx | 2 +- .../src/components/PageContent/index.js | 23 ++++++---- .../src/pages/design/alert.mdx | 2 +- .../src/pages/design/banner.mdx | 2 +- .../src/pages/design/toast.mdx | 5 ++- website/react-magma-landing/scripts/build.js | 27 +++++++++++- website/react-magma-landing/static/styles.css | 7 +-- .../react-magma-landing/templates/index.html | 44 ++++++++----------- 11 files changed, 84 insertions(+), 44 deletions(-) create mode 100644 .changeset/chart-keyboardevent.md create mode 100644 .changeset/docs-route.md create mode 100644 .changeset/landing.md diff --git a/.changeset/chart-keyboardevent.md b/.changeset/chart-keyboardevent.md new file mode 100644 index 000000000..92242e98d --- /dev/null +++ b/.changeset/chart-keyboardevent.md @@ -0,0 +1,5 @@ +--- +'@react-magma/charts': patch +--- + +Fix handleKeyboardInstructionsButtonKeydown type error \ No newline at end of file diff --git a/.changeset/docs-route.md b/.changeset/docs-route.md new file mode 100644 index 000000000..144ae4461 --- /dev/null +++ b/.changeset/docs-route.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +Fix routing in implementation and design component tabs \ No newline at end of file diff --git a/.changeset/landing.md b/.changeset/landing.md new file mode 100644 index 000000000..083386d4e --- /dev/null +++ b/.changeset/landing.md @@ -0,0 +1,6 @@ +--- +'react-magma-landing': patch +--- + +- Display latest version based on React compatibility +- Remove old versions from list that don't have docs sites \ No newline at end of file diff --git a/packages/charts/src/components/LineChart/Chart.tsx b/packages/charts/src/components/LineChart/Chart.tsx index 149e550d7..a69e68713 100644 --- a/packages/charts/src/components/LineChart/Chart.tsx +++ b/packages/charts/src/components/LineChart/Chart.tsx @@ -121,7 +121,7 @@ function BaseChart(props: ChartProps, ref: React.Ref) { setIsKeyboardInstructionsOpen(prevOpen => !prevOpen); } - function handleKeyboardInstructionsButtonKeydown(event: React.KeyboardEvent) { + function handleKeyboardInstructionsButtonKeydown(event: { preventDefault?: any; key?: any; shiftKey?: any; }) { const { key, shiftKey } = event; switch (key) { diff --git a/website/react-magma-docs/src/components/PageContent/index.js b/website/react-magma-docs/src/components/PageContent/index.js index fe2de376d..4f4834245 100644 --- a/website/react-magma-docs/src/components/PageContent/index.js +++ b/website/react-magma-docs/src/components/PageContent/index.js @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { graphql, StaticQuery } from 'gatsby'; +import { Link } from 'gatsby'; import { SubPageTabs } from '../SubPageTabs'; import { convertTextToId } from '../../utils'; import { @@ -28,7 +29,11 @@ const NAV_TABS = { }; // Special case pages that don't have secondary navigation. -const PAGES_NO_NAV = ['contribution_guidelines', 'getting_started_patterns', 'select_migration']; +const PAGES_NO_NAV = [ + 'contribution_guidelines', + 'getting_started_patterns', + 'select_migration', +]; const TabsWrapper = styled.div` position: sticky; @@ -255,21 +260,21 @@ export const PageContent = ({ children, componentName, type }) => { {apiDocs || patternsDocs ? ( Implementation + } isActive={type === NAV_TABS.API} - > - Implementation - + /> ) : ( <> )} {designDocs || designPatternDocs ? ( Design + } isActive={type === NAV_TABS.DESIGN} - > - Design - + /> ) : ( <> )} diff --git a/website/react-magma-docs/src/pages/design/alert.mdx b/website/react-magma-docs/src/pages/design/alert.mdx index ffaa026f2..a468e6e8b 100644 --- a/website/react-magma-docs/src/pages/design/alert.mdx +++ b/website/react-magma-docs/src/pages/design/alert.mdx @@ -127,7 +127,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an ## Accessibility -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) +(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader. diff --git a/website/react-magma-docs/src/pages/design/banner.mdx b/website/react-magma-docs/src/pages/design/banner.mdx index ae42f11ce..a12bb971a 100644 --- a/website/react-magma-docs/src/pages/design/banner.mdx +++ b/website/react-magma-docs/src/pages/design/banner.mdx @@ -37,7 +37,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an ## Accessibility -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) +(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader. diff --git a/website/react-magma-docs/src/pages/design/toast.mdx b/website/react-magma-docs/src/pages/design/toast.mdx index 65720d5a8..ad00f0f04 100644 --- a/website/react-magma-docs/src/pages/design/toast.mdx +++ b/website/react-magma-docs/src/pages/design/toast.mdx @@ -11,7 +11,8 @@ import { LeadParagraph } from '../../components/LeadParagraph'; - Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. + Toasts are lightweight notifications designed to mimic the push notifications + that have been popularized by mobile and desktop operating systems. ## Usage @@ -131,7 +132,7 @@ When the viewport is 600px wide and smaller, we automatically reduce the icon an ## Accessibility -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) +(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/) Alerts have a number of measures built into them to improve accessibility. Starting with the colors, we make sure that text always has at least a 4.5:1 contrast ratio with the background color. All of the alerts can be navigated with a keyboard or screen reader. diff --git a/website/react-magma-landing/scripts/build.js b/website/react-magma-landing/scripts/build.js index 2dfb0517e..f9de42e56 100644 --- a/website/react-magma-landing/scripts/build.js +++ b/website/react-magma-landing/scripts/build.js @@ -11,6 +11,7 @@ const cleanVersions = ({ versions, time, tags }) => { return semver .sort(Object.keys(versions)) .filter(a => a.match(/^\d+\.\d+\.\d+$/)) + .filter(a => semver.gte(a, '2.3.2')) .map(version => { return { version, @@ -22,10 +23,31 @@ const cleanVersions = ({ versions, time, tags }) => { return value === version ? key : null; }) .filter(a => a), + reactDependency: versions[version]?.peerDependencies?.react, }; }); }; +const versionsByReactDependency = ({ versions, time, tags }) => { + const allVersions = cleanVersions({ versions, time, tags }); + + var versionsByReactDep = new Map(); + allVersions.forEach(versionObj => { + if (!versionsByReactDep.has(versionObj?.reactDependency)) { + versionsByReactDep.set(versionObj?.reactDependency, []); + } + versionsByReactDep.get(versionObj?.reactDependency).push(versionObj); + }); + + const latestVersions = []; + for (let [, value] of versionsByReactDep) { + const latest = value.reverse()[0]; + latestVersions.push(latest); + } + + return latestVersions; +}; + const enhanceTags = ({ tags, time }) => { return Object.fromEntries( Object.entries(tags).map(([key, value]) => { @@ -45,7 +67,8 @@ const enhanceTags = ({ tags, time }) => { const filterNPM = ({ versions, 'dist-tags': tags, time }) => { return { tags: enhanceTags({ tags, time }), - versions: cleanVersions({ versions, time, tags }), + versions: cleanVersions({ versions, time, tags }).reverse(), + reactSupport: versionsByReactDependency({ versions, time, tags }), }; }; @@ -61,7 +84,7 @@ getAllVersions().then(versions => { copy( path.resolve(__dirname, '../static/**'), path.resolve(__dirname, '../dist'), - function(err, files) { + function (err, files) { if (err) throw err; Promise.resolve(files); } diff --git a/website/react-magma-landing/static/styles.css b/website/react-magma-landing/static/styles.css index 0bd909f2d..f8a250d69 100644 --- a/website/react-magma-landing/static/styles.css +++ b/website/react-magma-landing/static/styles.css @@ -148,7 +148,7 @@ header h1 { .container { margin: 0 auto; - max-width: 700px; + max-width: 800px; padding: 10px 20px; text-align: center; } @@ -173,7 +173,8 @@ header h1 { .box { padding: 20px; - width: 45%; + margin: 4px; + width: 31%; border: 1px solid #D4D4D4; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15); border-radius: 8px; @@ -184,6 +185,7 @@ header h1 { .box-icon { width: 80px; + margin-top: 12px; margin-bottom: 24px; } @@ -191,7 +193,6 @@ header h1 { color: #707070; font-size: 14px; line-height: 20px; - margin: 4px 0; } diff --git a/website/react-magma-landing/templates/index.html b/website/react-magma-landing/templates/index.html index bfe0832a1..ba91d707b 100644 --- a/website/react-magma-landing/templates/index.html +++ b/website/react-magma-landing/templates/index.html @@ -29,38 +29,32 @@

Get started with React Magma

for students and instructors using Cengage products.

+ <% reactSupport.forEach(function(version){ %> +
+

Latest version compatible with React <%= version.reactDependency %>

+ + View <%= version.version %> + +

+ Published <%= version.date %> +

+
+ <% }); %>
- - View Latest Version -

- v<%= tags.latest.version %> - – - Published <%= tags.latest.date %> -

-

Latest stable version

-
-
+

Current development version

View Next Version -

- v<%= tags.next.version %> - – - Published <%= tags.next.date %> -

-

In development

+ >Dev Version
-
-

Older versions

+

All versions