Merge pull request #327 from pxblue/dev

Release 2.3.6

.github/stale.yml

@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 90
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 10
 # Issues with these labels will never be considered stale

src/__configuration__/contributors/contributors.ts

@@ -1,4 +1,5 @@
 import EricAtha from '../../app/assets/credits/eric-atha.jpg';
+import KyleHorchen from '../../app/assets/credits/kyle-horchen.jpg';
 import IanTodhunter from '../../app/assets/credits/ian-todhunter.jpg';
 import ShivaniPitta from '../../app/assets/credits/shivani-pitta.jpeg';
 import BrianShyu from '../../app/assets/credits/brian-shyu.jpg';
@@ -16,6 +17,11 @@ export const contributors: Contributor[] = [
         description: 'UX Designer',
         image: EricAtha,
     },
+    {
+        name: 'Kyle Horchen',
+        description: 'UX Designer',
+        image: KyleHorchen,
+    },
     {
         name: 'Kraig Keller',
         description: 'Front-End Developer',

src/__configuration__/contributors/currentMaintainers.ts

@@ -3,7 +3,6 @@ import EvanMcLaughlin from '../../app/assets/credits/evan-mclaughlin.jpeg';
 import JosephBoyle from '../../app/assets/credits/joseph-boyle.png';
 import JeffeyGreiner from '../../app/assets/credits/jeffery-greiner.jpeg';
 import ThomasDailey from '../../app/assets/credits/thomas-dailey.jpeg';
-import KyleHorchen from '../../app/assets/credits/kyle-horchen.jpg';
 import { Contributor } from '../../__types__';
 
 export const currentMaintainers: Contributor[] = [
@@ -57,14 +56,4 @@ export const currentMaintainers: Contributor[] = [
             linkedIn: 'https://www.linkedin.com/in/thomas-dailey/',
         },
     },
-    {
-        name: 'Kyle Horchen',
-        description: 'UX Designer',
-        image: KyleHorchen,
-        info: `Formerly from the advertising industry, Kyle is a UI / UX designer who's worked with some of the largest brands in the world like the NBA and National Rugby League in Australia. A die-hard Star Wars fan, Kyle can recite every line of The Empire Strikes back and still watches it at least once a week.`,
-        contacts: {
-            github: 'https://github.com/Horchen154',
-            linkedIn: 'https://www.linkedin.com/in/kyle-horchen-3294b142/',
-        },
-    },
 ];

src/__configuration__/navigationMenu/navigation.tsx

@@ -11,6 +11,11 @@ export type SimpleNavItem = {
     hidden?: boolean;
 };
 
+export type RedirectItem = {
+    oldUrl: string;
+    newUrl: string;
+};
+
 // Change scripts/crawl/sitemap.json after you make changes here.
 export const pageDefinitions: SimpleNavItem[] = [
     {
@@ -325,3 +330,10 @@ export const pageDefinitions: SimpleNavItem[] = [
         component: <ReleaseNotes />,
     },
 ];
+
+export const pageRedirects: RedirectItem[] = [
+    {
+        oldUrl: '/patterns/login',
+        newUrl: '/patterns/user-auth',
+    },
+];

src/app/pages/Resources.tsx

@@ -84,7 +84,7 @@ export const Resources: React.FC = (): JSX.Element => {
             </AppBar>
 
             {/* First expander */}
-            <PageContent>
+            <PageContent style={{ width: '100%' }}>
                 {resources.map(
                     (bucket, bIndex) =>
                         (!bucket.applies ||

src/app/pages/Roadmap.tsx

@@ -159,13 +159,6 @@ export const Roadmap: React.FC = (): JSX.Element => {
     const roadmapBuckets =
         // Filter buckets by item type
         roadmap
-            .map((bucket) => ({
-                // TODO: Remove this map function in the next push (it's only here for backwards compatibility with the older Roadmap types)
-                ...bucket,
-                type: bucket.type ? bucket.type : 'development',
-                // @ts-ignore
-                framework: bucket.framework ? bucket.framework : bucket.applies,
-            }))
             .filter(
                 (bucket) => !bucket.type || bucket.type === typeFilter || bucket.type === 'all' || typeFilter === 'all'
             )
@@ -181,25 +174,18 @@ export const Roadmap: React.FC = (): JSX.Element => {
             // Filter line items by remaining filters
             .map((bucket) => ({
                 ...bucket,
-                items: bucket.items
-                    .map((item) => ({
-                        // TODO: Remove this map function in the next push (it's only here for backwards compatibility with the older Roadmap types)
-                        ...item,
-                        // @ts-ignore
-                        framework: item.framework ? item.framework : item.applies,
-                    }))
-                    .filter((item) => {
-                        const show =
-                            (typeFilter === 'design' || // if filtering by design, ignore the framework filter
-                                item.framework === undefined ||
-                                item.framework.includes(frameworkFilter) ||
-                                item.framework.includes('all') ||
-                                frameworkFilter === 'all') &&
-                            (filterByRelease(releaseFilter, item) || releaseFilter === 'all') &&
-                            (item.status === statusFilter || statusFilter === 'all');
-                        if (show) results++;
-                        return show;
-                    }),
+                items: bucket.items.filter((item) => {
+                    const show =
+                        (typeFilter === 'design' || // if filtering by design, ignore the framework filter
+                            item.framework === undefined ||
+                            item.framework.includes(frameworkFilter) ||
+                            item.framework.includes('all') ||
+                            frameworkFilter === 'all') &&
+                        (filterByRelease(releaseFilter, item) || releaseFilter === 'all') &&
+                        (item.status === statusFilter || statusFilter === 'all');
+                    if (show) results++;
+                    return show;
+                }),
             }));
 
     const getTags = useCallback(

src/app/router/index.tsx

@@ -8,7 +8,7 @@ import { AppState } from '../redux/reducers';
 import { Menu } from '@material-ui/icons';
 import { useSelector } from 'react-redux';
 
-import { pageDefinitions, SimpleNavItem } from '../../__configuration__/navigationMenu/navigation';
+import { pageDefinitions, SimpleNavItem, pageRedirects } from '../../__configuration__/navigationMenu/navigation';
 import { getScheduledSiteConfig } from '../../__configuration__/themes';
 import {
     AppBar,
@@ -39,6 +39,14 @@ const buildRoutes = (routes: SimpleNavItem[], url: string): JSX.Element[] => {
     return ret;
 };
 
+const buildRedirects = (): JSX.Element[] => {
+    const ret: JSX.Element[] = [];
+    for (let i = 0; i < pageRedirects.length; i++) {
+        ret.push(<Redirect exact from={pageRedirects[i].oldUrl} to={pageRedirects[i].newUrl} />);
+    }
+    return ret;
+};
+
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         footer: {
@@ -86,6 +94,7 @@ export const MainRouter = (): JSX.Element => {
                             <div style={{ minHeight: `calc(50vh - ${toolbarHeight}px)` }}>
                                 <Switch>
                                     {buildRoutes(pageDefinitions, '')}
+                                    {buildRedirects()}
 
                                     {/* Catch-All Redirect to Landing Page */}
                                     <Route path="*">

src/database/index-database.json

@@ -518,7 +518,7 @@
             { "/design/accessibility": 18 },
             { "/patterns/internationalization": 18 },
             { "/patterns/navigation": 17 },
-            { "/patterns/user-auth": 15 },
+            { "/patterns/user-auth": 14 },
             { "/design/anatomy": 13 },
             { "/patterns/lists": 13 },
             { "/community/license": 13 },
@@ -4403,10 +4403,10 @@
             { "/patterns/internationalization": 2 },
             { "/patterns/overlay": 2 },
             { "/patterns/steppers": 2 },
+            { "/patterns/user-auth": 2 },
             { "/community/features": 2 },
             { "/get-started/web": 1 },
             { "/development/cli": 1 },
-            { "/patterns/user-auth": 1 },
             { "/patterns/visualizations": 1 },
             { "/community/innersourcing": 1 },
             { "/community/our-team": 1 }
@@ -6034,9 +6034,9 @@
             { "/patterns/empty-states": 3 },
             { "/patterns/lists": 3 },
             { "/patterns/navigation": 3 },
+            { "/patterns/user-auth": 3 },
             { "/patterns/visualizations": 3 },
             { "/development/cli": 2 },
-            { "/patterns/user-auth": 2 },
             { "/style/color": 2 },
             { "/patterns/steppers": 1 },
             { "/style/themes": 1 },
@@ -8668,7 +8668,7 @@
         "centers": [{ "/design/anatomy": 1 }],
         "hovered": [{ "/design/anatomy": 1 }, { "/design/websites": 1 }],
         "similarly": [{ "/design/anatomy": 1 }],
-        "workflow": [{ "/patterns/user-auth": 14 }, { "/patterns/steppers": 2 }, { "/design/anatomy": 1 }],
+        "workflow": [{ "/patterns/user-auth": 15 }, { "/patterns/steppers": 2 }, { "/design/anatomy": 1 }],
         "involve": [{ "/design/anatomy": 1 }],
         "2fa": [{ "/design/anatomy": 1 }],
         "captcha": [{ "/design/anatomy": 1 }],
@@ -10017,7 +10017,7 @@
         "register": [{ "/patterns/user-auth": 5 }],
         "forget": [{ "/patterns/user-auth": 1 }],
         "forgot": [{ "/patterns/user-auth": 5 }],
-        "auth": [{ "/patterns/user-auth": 3 }],
+        "auth": [{ "/patterns/user-auth": 4 }],
         "join": [{ "/patterns/user-auth": 6 }],
         "unauthorized": [{ "/patterns/user-auth": 1 }],
         "authorized": [{ "/patterns/user-auth": 3 }],

src/docs/design/anatomy.mdx

@@ -1,4 +1,4 @@
-import { Divider, ImageGrid } from '../../app/components';
+import { Divider, ImageGrid, RegularWidth } from '../../app/components';
 import CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png';
 import PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png';
 

src/docs/design/intro.mdx

@@ -19,7 +19,7 @@ PX Blue has design / style guidelines for:
 -   [Color Usage](/style/color)
 -   [Themes](/style/themes)
 
-In addition to these guidelines, we also provide [an easy-to-use plugin](https://www.figma.com/community/file/852558784352181868) that you can include in your Figma projects to jump start your project with pre-defined UI styles and components. You are encouraged to duplicate this file to your own draft space and build your project on top of it.
+In addition to these guidelines, we also provide easy-to-use Figma community files — [PX Blue Component Stickersheet](https://www.figma.com/community/file/852558784352181868) and [PX Blue Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that you can include in your Figma projects to jump start your project with pre-defined UI styles and components. You are encouraged to duplicate those files to your own draft space and build your project on top of it.
 
 <Divider />
 

src/docs/patterns/user-auth.mdx

@@ -304,9 +304,9 @@ The examples on this page used email as the login credentials. However, if your
 
 We recommend using the following packages to construct these workflows. Additionally, you should familiarize yourself with the components used for the [Forms](/patterns/forms#developers) and [Overlays](/patterns/overlay#developers) patterns.
 
-**Angular** and **Ionic:**
+**Angular:**
 
-_Planned_
+-   [@pxblue/angular-auth-workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow)
 
 **React:**
 
@@ -315,3 +315,7 @@ _Planned_
 **React Native:**
 
 -   [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow)
+
+**Ionic:**
+
+_Planned_

src/docs/release-notes/R17/R17.mdx

@@ -1,4 +1,4 @@
-### Stickersheet Components
+### Component Stickersheet
 
 -   Added PX Blue components (Scorecard, Empty State, Channel Value, Heroes, List Item Tag, Info List Item, Nav Rail, Drawer, Dropdown Toolbar) to our [Stickersheet](https://www.figma.com/community/file/852558784352181868)
 -   Added several PX Blue design patterns (Progress Indicators, Pagers, Panels)

src/docs/release-notes/R18/R18.mdx

@@ -0,0 +1,36 @@
+### Component Libraries
+
+-   Added a [Mobile Stepper](https://pxblue-components.github.io/angular/?path=/info/components-mobile-stepper--readme) component for Angular
+-   Angular components are now compatible with Angular 10+
+-   Updated React Native components to be compatible with `react-native-paper` version 4
+
+### Design Patterns
+
+-   Updated content for [Navigation](/patterns/navigation) and [Visualizations](/patterns/visualizations)
+-   Released a new [Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that will include many examples of all of our [Design Patterns](/patterns), starting with [forms](/patterns/forms), [side sheet](/patterns/overlay) and [lists](/patterns/lists).
+
+### Documentation Site
+
+-   Updated [Iconography](/style/iconography) page to enable users to download icons and search by keywords/tags
+-   Added a new page dedicated to helping you build a [Project Identity](/design/project-identity)
+-   Added new holiday themes
+
+### PX Blue CLI
+
+-   You can now use [templates](https://github.com/pxblue/react-cli-templates) to kick-start your React projects with navigation and authentication
+
+### Reusable Workflows
+
+-   Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular.
+
+### Component Stickersheet
+
+-   Re-built all the components using the new Figma variants and auto-layout
+-   Added images, tiles and patterns
+-   Added more components (badges, dialogs, form controls, icon buttons, menus, side sheets, steppers and toggle buttons)
+-   Reorganized the stickersheet structure
+
+### Miscellaneous
+
+-   Bug fixes & performance updates
+-   Addressed security vulnerabilities

src/docs/release-notes/R18/Summary.mdx

@@ -0,0 +1 @@
+Major overhaul of the Figma Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, [CLI templates](https://github.com/pxblue/react-cli-templates/tree/master) for React projects, and documentation site improvements.

src/docs/release-notes/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 // Full Release Notes
+import R18 from './R18/R18.mdx';
 import R17 from './R17/R17.mdx';
 import R16 from './R16/R16.mdx';
 import R15 from './R15/R15.mdx';
@@ -14,6 +15,7 @@ import R8 from './R8/R8.mdx';
 import R7 from './R7/R7.mdx';
 
 // Summaries (for Landing Page)
+import R18Summary from './R18/Summary.mdx';
 import R17Summary from './R17/Summary.mdx';
 import R16Summary from './R16/Summary.mdx';
 import R15Summary from './R15/Summary.mdx';
@@ -34,6 +36,13 @@ export type ReleaseInfo = {
     summary: JSX.Element;
 };
 const Releases: ReleaseInfo[] = [
+    {
+        title: 'R18',
+        date: 'December 2020',
+        version: '2.3.6',
+        details: <R18 />,
+        summary: <R18Summary />,
+    },
     {
         title: 'R17',
         date: 'September 2020',