diff --git a/.github/stale.yml b/.github/stale.yml index 448d01fa4..5974e42c2 100644 --- a/.github/stale.yml +++ b/.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 diff --git a/src/__configuration__/contributors/contributors.ts b/src/__configuration__/contributors/contributors.ts index 1701c5cf4..d82790948 100644 --- a/src/__configuration__/contributors/contributors.ts +++ b/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', diff --git a/src/__configuration__/contributors/currentMaintainers.ts b/src/__configuration__/contributors/currentMaintainers.ts index 189573d18..5f4355828 100644 --- a/src/__configuration__/contributors/currentMaintainers.ts +++ b/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/', - }, - }, ]; diff --git a/src/__configuration__/navigationMenu/navigation.tsx b/src/__configuration__/navigationMenu/navigation.tsx index d0f266e71..59dab88aa 100644 --- a/src/__configuration__/navigationMenu/navigation.tsx +++ b/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: , }, ]; + +export const pageRedirects: RedirectItem[] = [ + { + oldUrl: '/patterns/login', + newUrl: '/patterns/user-auth', + }, +]; diff --git a/src/app/pages/Resources.tsx b/src/app/pages/Resources.tsx index e2d9cbcba..80b72b699 100644 --- a/src/app/pages/Resources.tsx +++ b/src/app/pages/Resources.tsx @@ -84,7 +84,7 @@ export const Resources: React.FC = (): JSX.Element => { {/* First expander */} - + {resources.map( (bucket, bIndex) => (!bucket.applies || diff --git a/src/app/pages/Roadmap.tsx b/src/app/pages/Roadmap.tsx index 9ebdd2462..4705ea1a1 100644 --- a/src/app/pages/Roadmap.tsx +++ b/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( diff --git a/src/app/router/index.tsx b/src/app/router/index.tsx index ad2c5c87a..fd7600f8f 100644 --- a/src/app/router/index.tsx +++ b/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(); + } + return ret; +}; + const useStyles = makeStyles((theme: Theme) => createStyles({ footer: { @@ -86,6 +94,7 @@ export const MainRouter = (): JSX.Element => {
{buildRoutes(pageDefinitions, '')} + {buildRedirects()} {/* Catch-All Redirect to Landing Page */} diff --git a/src/database/index-database.json b/src/database/index-database.json index 35de02ba5..2383a26b3 100644 --- a/src/database/index-database.json +++ b/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 }], diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json index f2e37f83b..b20161d01 100644 --- a/src/database/sitemap-database.json +++ b/src/database/sitemap-database.json @@ -58,7 +58,7 @@ }, "/design/anatomy": { "title": "Design System Anatomy", - "text": "import { Divider, ImageGrid } from '../../app/components';\nimport CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png';\nimport PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png';\n\n\n\n# Design System Anatomy\n\nThe building blocks of the PX Blue design system are broken down into four levels of increasing complexity: elements, components, pages, and workflows. When communicating with other members of the PX Blue community, you should strive to use this terminology to promote effective collaboration and understanding. This is applicable to designers, developers, product managers, etc.\n\n\n\n## Foundations\n\nThe foundations include the most basic visual elements on the page, such as [color](/style/color), [icons](/style/iconography), [typography](/style/typography), etc. These typically have no behavior or interaction on their own, but instead are used to communicate information to a user, establish a brand, or lay the foundations for the PX Blue components, pages, and workflows.\n\n## Components\n\nComponents are the basic functional units of the UI. They are usually interactive through clicking, expanding, etc. Components can be as simple (such as buttons, tabs, sliders) or complex (such as [navigation drawers](/patterns/navigation)). Simpler components are often combined to form complex ones.\n\nMost of the simple components in PX Blue are defined and built by Material Design and the component libraries that implement it. PX Blue focuses on defining and building advanced components that are shared across PX Blue applications.\n\n## Pages\n\nPages are the largest single unit in the PX Blue design system. These are typically full-screen designs that specify how certain pages can look in an application. Foundation of these pages should stay the same while there may be some room for customizations. Examples of pages include \"login (empty fields)\" and \"create password (invalid)\".\n\n## Workflows\n\nWorkflows are a sequence of pages combined with rules surrounding how a user goes from one page to another. These usually represent a common path that a user is expected to take to complete various tasks. Workflows that are defined in PX Blue are intended to be nearly identical between applications. Examples of very common workflows include the [login](/patterns/user-auth) experience and user registration / sign up.\n\n\n\n# Design Patterns\n\n\n \n\n\n[Design patterns](/patterns) are very common in PX Blue. A design pattern is a common interaction or behavior that can exist at any level in the design system hierarchy described above. For example, we may have a design pattern for showing actions available on a list item or how to interact with individual settings on a settings page.\n\nBecause a design pattern centers around interactions, they typically include different states. A button can be normal, hovered, or pressed. Similarly, a login workflow can involve login with 2FA, Captcha, or simply a username and password.\n\nFor each state, PX Blue tries to provide:\n\n- Guidelines: How it's used and in what context\n- Design Specifications: How it looks\n- Interactions: How it goes from one state to another\n- Code: How it can be implemented\n\n\n\n# PX Blue and the Atomic Design System\n\nIf you are familiar with other design systems, such as the [Atomic Design System](https://atomicdesign.bradfrost.com/), you may recognize some concepts used here. PX Blue's \"components\" parallel Atomic Design's atoms, molecules, and organisms. The idea of \"pages\" is the same in both systems, but PX Blue also goes one level further in each direction (i.e., Foundations and Workflows) to define a project's user experience more comprehensively.\n" + "text": "import { Divider, ImageGrid, RegularWidth } from '../../app/components';\nimport CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png';\nimport PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png';\n\n\n\n# Design System Anatomy\n\nThe building blocks of the PX Blue design system are broken down into four levels of increasing complexity: elements, components, pages, and workflows. When communicating with other members of the PX Blue community, you should strive to use this terminology to promote effective collaboration and understanding. This is applicable to designers, developers, product managers, etc.\n\n\n\n## Foundations\n\nThe foundations include the most basic visual elements on the page, such as [color](/style/color), [icons](/style/iconography), [typography](/style/typography), etc. These typically have no behavior or interaction on their own, but instead are used to communicate information to a user, establish a brand, or lay the foundations for the PX Blue components, pages, and workflows.\n\n## Components\n\nComponents are the basic functional units of the UI. They are usually interactive through clicking, expanding, etc. Components can be as simple (such as buttons, tabs, sliders) or complex (such as [navigation drawers](/patterns/navigation)). Simpler components are often combined to form complex ones.\n\nMost of the simple components in PX Blue are defined and built by Material Design and the component libraries that implement it. PX Blue focuses on defining and building advanced components that are shared across PX Blue applications.\n\n## Pages\n\nPages are the largest single unit in the PX Blue design system. These are typically full-screen designs that specify how certain pages can look in an application. Foundation of these pages should stay the same while there may be some room for customizations. Examples of pages include \"login (empty fields)\" and \"create password (invalid)\".\n\n## Workflows\n\nWorkflows are a sequence of pages combined with rules surrounding how a user goes from one page to another. These usually represent a common path that a user is expected to take to complete various tasks. Workflows that are defined in PX Blue are intended to be nearly identical between applications. Examples of very common workflows include the [login](/patterns/user-auth) experience and user registration / sign up.\n\n\n\n# Design Patterns\n\n\n \n\n\n[Design patterns](/patterns) are very common in PX Blue. A design pattern is a common interaction or behavior that can exist at any level in the design system hierarchy described above. For example, we may have a design pattern for showing actions available on a list item or how to interact with individual settings on a settings page.\n\nBecause a design pattern centers around interactions, they typically include different states. A button can be normal, hovered, or pressed. Similarly, a login workflow can involve login with 2FA, Captcha, or simply a username and password.\n\nFor each state, PX Blue tries to provide:\n\n- Guidelines: How it's used and in what context\n- Design Specifications: How it looks\n- Interactions: How it goes from one state to another\n- Code: How it can be implemented\n\n\n\n# PX Blue and the Atomic Design System\n\nIf you are familiar with other design systems, such as the [Atomic Design System](https://atomicdesign.bradfrost.com/), you may recognize some concepts used here. PX Blue's \"components\" parallel Atomic Design's atoms, molecules, and organisms. The idea of \"pages\" is the same in both systems, but PX Blue also goes one level further in each direction (i.e., Foundations and Workflows) to define a project's user experience more comprehensively.\n" }, "/design/accessibility": { "title": "Accessibility", @@ -111,7 +111,7 @@ }, "/patterns/user-auth": { "title": "User Authentication", - "text": "import { DemoCard, ImageGrid, Divider, MaterialDesignDescription } from '../../app/components';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n\n\nimport LoginBanner from '../../app/assets/design-patterns/user-authentication/login.svg';\n\n\n\nimport EnterEmailAdress from '../../app/assets/design-patterns/user-authentication/enter-email-address.png';\nimport AcceptEULA from '../../app/assets/design-patterns/user-authentication/accept-eula.png';\nimport VerifyEmail from '../../app/assets/design-patterns/user-authentication/verify-email.png';\nimport CreatePassword from '../../app/assets/design-patterns/user-authentication/create-password.png';\nimport AccountDetails from '../../app/assets/design-patterns/user-authentication/account-details.png';\nimport WelcomeOnboard from '../../app/assets/design-patterns/user-authentication/welcome-onboard.png';\nimport RegistrationDesktop from '../../app/assets/design-patterns/user-authentication/registration-desktop.png';\n\nimport EnterOrganizationCode from '../../app/assets/design-patterns/user-authentication/enter-organization-code.png';\nimport EnterOrganizationConfirm from '../../app/assets/design-patterns/user-authentication/enter-organization-confirm.png';\nimport EnterOrganizationWelcome from '../../app/assets/design-patterns/user-authentication/enter-organization-welcome.png';\nimport JoinAnOrganizationDesktop from '../../app/assets/design-patterns/user-authentication/join-an-organization-desktop.png';\n\nimport Login from '../../app/assets/design-patterns/user-authentication/login.png';\nimport LoginDesktop from '../../app/assets/design-patterns/user-authentication/login-desktop.png';\n\nimport ForgotPasswordEnterEmail from '../../app/assets/design-patterns/user-authentication/forgot-password-email.png';\nimport ForgotPasswordConfirmSent from '../../app/assets/design-patterns/user-authentication/forgot-password-confirm.png';\nimport ForgotPasswordNewPassword from '../../app/assets/design-patterns/user-authentication/forgot-password-password.png';\nimport ForgotPasswordWelcome from '../../app/assets/design-patterns/user-authentication/forgot-password-welcome.png';\nimport ChangePassword from '../../app/assets/design-patterns/user-authentication/change-password.png';\nimport ChangePasswordWelcome from '../../app/assets/design-patterns/user-authentication/change-password-confirm.png';\nimport ResetPasswordDesktop from '../../app/assets/design-patterns/user-authentication/reset-password-desktop.png';\nimport ChangePasswordDesktop from '../../app/assets/design-patterns/user-authentication/change-password-desktop.png';\n\n\n\nimport EmailCommunicationInvitation from '../../app/assets/design-patterns/user-authentication/email-communication-invitation.png';\nimport EmailCommunicationVerification from '../../app/assets/design-patterns/user-authentication/email-communication-verification.png';\nimport ExpiredCode from '../../app/assets/design-patterns/user-authentication/expired.png';\nimport ErrorStates from '../../app/assets/design-patterns/user-authentication/error-states.png';\n\n\n\n# User Authentication & Registration\n\n\n\nMost applications require some form of user authentication to keep unauthorized users out, and a way to add authorized users to the application.\n\n\n\n\n\n# Variations\n\nUser authentication contains four primary workflows:\n\n- Registration\n- Joining an organization\n- Login\n- Forgot / Reset password\n\nAll of these workflows should follow the rules specified by our [forms and validation](/patterns/forms) pattern, and multi-step workflows should be connected using our [steppers](/patterns/steppers) pattern.\n\n}\n/>\n}\n/>\n\nYour authentication and registration workflows should work equally well on different screen sizes. On mobile, these should be presented as full-screen layouts, whereas on desktop, they should be presented in a card centered on the screen as an [overlay](/patterns/overlay).\n\n## Registration\n\nRegistration is the process of user account creation. Typically, users can either register themselves (self-registration) or you can invite them to join your application (invitation-based).\n\n**Self-Registration**\n\nIf you do not need to restrict who can register for your application, you can allow users to self-register. The self-registration workflow includes the following steps:\n\n- Enter email address\n- Accept EULA\n- Receive an email for verification\n- Verify email\n- Create password\n- Add account details\n- Success: account created\n\n**Registration via Invitation**\n\nIf you need to restrict who is able to use your application, you may choose to go with a invitation-based registration. In this situation, a system admin sends an email to authorized users inviting them to register. The invitation-based registration workflow includes the following steps:\n\n- Receive an email for invitation\n- Accept EULA\n- Create password\n- Add account details\n- Success: account created\n\n### Screens\n\nThe majority of the registration screens are the same between invitation-based and self-registration. The primary difference is in how the registration workflow is initiated, and whether the email needs to be verified. Use the following screens for the registration workflow where appropriate.\n\n\n\n> The purpose of a success screen is to assure the user that something has been achieved. These screens can be an opportunity to perform more product branding — you are encouraged to use animations and [graphics](/style/illustrations) on these screens.\n\n\n\n## Joining an Organization\n\nSome applications may require users to join specific groups or organizations after creating an account. Generally, there are three ways for a user to join an organization:\n\n**Request Access**\n\nThis occurs when a user has an account but need to access an invitation-only organization. This workflow involves the following steps:\n\n- Enter organization identifier\n- Success: request sent\n- Receive an email invitation\n- Success: organization joined\n\n**Join with Invitation**\n\nJoining via invitation occurs when a system admin extends an invitation for a user to join a group. If the user does not yet have an account, they will first proceed through the invitation-based registration workflow followed by the screens for joining the organization. This workflow includes the following steps:\n\n- Receive an email invitation\n- Success: organization joined\n\n### Screens\n\nThe majority of the joining-an-organization screens are the same regardless of the underlying mechanism. Use the following screens for the joining-an-organization workflow where appropriate.\n\n\n\n\n## Login\n\n\n\nLogging in can usually be accomplished in one of two ways: basic login or login via a third-party.\n\n**Basic Login**\n\nA simple login presents fields for the users to enter their credentials and a button to submit them for verification.\n\nThe login screen should always present information on how to create an account and what to do if a user has forgotten their credentials — these buttons should trigger the Registration and Forgot Password (see below) workflows .\n\n\n\n\n**Login via Third Party**\n\nSome applications, especially consumer-facing ones, can be authorized via third-party accounts / credentials. Different platforms may have different requirements for this. Here are some commonly used platforms and their instructions:\n\n- [Login with Amazon](https://developer.amazon.com/docs/login-with-amazon/brand.html)\n- [Google Sign-in](https://developers.google.com/identity/sign-in/web/sign-in)\n- [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/)\n- [Facebook Login](http://developers.facebook.com/docs/facebook-login/)\n- [Sign in with Microsoft](https://developer.microsoft.com/en-us/identity/add-sign-in-with-microsoft)\n\n## Forgot / Change Password\n\n**Forgot password**\n\nThe login screen for an application should also present users with a way to reset their password if they have forgotten it. This is typically displayed as a hyperlink below the credential fields. Clicking the link will present users with a field to enter their e-mail address. They will then receive an email with a hyperlink to reset their password. This workflow involves the following steps:\n\n- Enter email address\n- Success: reset instructions sent\n- Receive an email for resetting the password\n- Create a new password\n- Success: password updated\n\n\n\n\n**Change Password**\n\nWhen the users are logged in, they have the option to change their password by going through the change password workflow, typically triggered from within the user settings. This workflow includes the following steps:\n\n- Change password\n- Success: password updated\n\n> After a successful password change, users should be logged out and forced to log in with the new credentials.\n\n\n \n \n \n\n\n# Behavior\n\n## Email Communications\n\n\n\nEmail communications are frequently used throughout the user authentication workflow to verify the user's identity. Users receive emails for invitations, address verification, confirmation codes, etc.\n\nEmails are also sent to confirm security-related changes to a user's account, such as changing a password, updating a profile, etc. You should never allow users to unsubscribe from security-related email notifications.\n\n\n\n## Terminated Workflows & Expired Sessions\n\nDuring the registration, if a user leaves the application before creating a password for their account, the whole session is treated as expired, and upon returning, they must start the registration process over again.\n\nIf an invitation link or verification code has expired, the users should be able to request for another invitation link or verification code.\n\n\n\n## Security Concerns\n\n### Error Messages\n\nWhen a user encounters an error — such as a password mismatch or the server is temporarily down — they should be notified with an appropriate error message. However, be very careful when presenting error messages to the users. You should only show what is necessary to recover from the problem, such as \"incorrect email or password\" or \"server unavailable\" — do not expose information that could compromise the security of your application.\n\n> Do **NOT** provide messages like \"User does not exist,\" \"Incorrect Password,\" etc.\n\n\n\n### Exposing Credentials\n\nUnlike a phone application, a shared HMI application is more vulnerable to outside threats via showing credentials. These projects should **NOT** implement password visibility toggles or \"remember me\" functionality.\n\n### Two-Factor Authentication\n\nThe examples on this page used email as the login credentials. However, if your project requires additional security, consider using two-factor authentication. Two-factor authentication involves sending an additional confirmation code (typically via email or SMS) to verify a user's identity after they enter their password.\n\n\n\n# Developers\n\nWe 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.\n\n**Angular** and **Ionic:**\n\n_Planned_\n\n**React:**\n\n- [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow)\n\n**React Native:**\n\n- [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow)\n" + "text": "import { DemoCard, ImageGrid, Divider, MaterialDesignDescription } from '../../app/components';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n\n\nimport LoginBanner from '../../app/assets/design-patterns/user-authentication/login.svg';\n\n\n\nimport EnterEmailAdress from '../../app/assets/design-patterns/user-authentication/enter-email-address.png';\nimport AcceptEULA from '../../app/assets/design-patterns/user-authentication/accept-eula.png';\nimport VerifyEmail from '../../app/assets/design-patterns/user-authentication/verify-email.png';\nimport CreatePassword from '../../app/assets/design-patterns/user-authentication/create-password.png';\nimport AccountDetails from '../../app/assets/design-patterns/user-authentication/account-details.png';\nimport WelcomeOnboard from '../../app/assets/design-patterns/user-authentication/welcome-onboard.png';\nimport RegistrationDesktop from '../../app/assets/design-patterns/user-authentication/registration-desktop.png';\n\nimport EnterOrganizationCode from '../../app/assets/design-patterns/user-authentication/enter-organization-code.png';\nimport EnterOrganizationConfirm from '../../app/assets/design-patterns/user-authentication/enter-organization-confirm.png';\nimport EnterOrganizationWelcome from '../../app/assets/design-patterns/user-authentication/enter-organization-welcome.png';\nimport JoinAnOrganizationDesktop from '../../app/assets/design-patterns/user-authentication/join-an-organization-desktop.png';\n\nimport Login from '../../app/assets/design-patterns/user-authentication/login.png';\nimport LoginDesktop from '../../app/assets/design-patterns/user-authentication/login-desktop.png';\n\nimport ForgotPasswordEnterEmail from '../../app/assets/design-patterns/user-authentication/forgot-password-email.png';\nimport ForgotPasswordConfirmSent from '../../app/assets/design-patterns/user-authentication/forgot-password-confirm.png';\nimport ForgotPasswordNewPassword from '../../app/assets/design-patterns/user-authentication/forgot-password-password.png';\nimport ForgotPasswordWelcome from '../../app/assets/design-patterns/user-authentication/forgot-password-welcome.png';\nimport ChangePassword from '../../app/assets/design-patterns/user-authentication/change-password.png';\nimport ChangePasswordWelcome from '../../app/assets/design-patterns/user-authentication/change-password-confirm.png';\nimport ResetPasswordDesktop from '../../app/assets/design-patterns/user-authentication/reset-password-desktop.png';\nimport ChangePasswordDesktop from '../../app/assets/design-patterns/user-authentication/change-password-desktop.png';\n\n\n\nimport EmailCommunicationInvitation from '../../app/assets/design-patterns/user-authentication/email-communication-invitation.png';\nimport EmailCommunicationVerification from '../../app/assets/design-patterns/user-authentication/email-communication-verification.png';\nimport ExpiredCode from '../../app/assets/design-patterns/user-authentication/expired.png';\nimport ErrorStates from '../../app/assets/design-patterns/user-authentication/error-states.png';\n\n\n\n# User Authentication & Registration\n\n\n\nMost applications require some form of user authentication to keep unauthorized users out, and a way to add authorized users to the application.\n\n\n\n\n\n# Variations\n\nUser authentication contains four primary workflows:\n\n- Registration\n- Joining an organization\n- Login\n- Forgot / Reset password\n\nAll of these workflows should follow the rules specified by our [forms and validation](/patterns/forms) pattern, and multi-step workflows should be connected using our [steppers](/patterns/steppers) pattern.\n\n}\n/>\n}\n/>\n\nYour authentication and registration workflows should work equally well on different screen sizes. On mobile, these should be presented as full-screen layouts, whereas on desktop, they should be presented in a card centered on the screen as an [overlay](/patterns/overlay).\n\n## Registration\n\nRegistration is the process of user account creation. Typically, users can either register themselves (self-registration) or you can invite them to join your application (invitation-based).\n\n**Self-Registration**\n\nIf you do not need to restrict who can register for your application, you can allow users to self-register. The self-registration workflow includes the following steps:\n\n- Enter email address\n- Accept EULA\n- Receive an email for verification\n- Verify email\n- Create password\n- Add account details\n- Success: account created\n\n**Registration via Invitation**\n\nIf you need to restrict who is able to use your application, you may choose to go with a invitation-based registration. In this situation, a system admin sends an email to authorized users inviting them to register. The invitation-based registration workflow includes the following steps:\n\n- Receive an email for invitation\n- Accept EULA\n- Create password\n- Add account details\n- Success: account created\n\n### Screens\n\nThe majority of the registration screens are the same between invitation-based and self-registration. The primary difference is in how the registration workflow is initiated, and whether the email needs to be verified. Use the following screens for the registration workflow where appropriate.\n\n\n\n> The purpose of a success screen is to assure the user that something has been achieved. These screens can be an opportunity to perform more product branding — you are encouraged to use animations and [graphics](/style/illustrations) on these screens.\n\n\n\n## Joining an Organization\n\nSome applications may require users to join specific groups or organizations after creating an account. Generally, there are three ways for a user to join an organization:\n\n**Request Access**\n\nThis occurs when a user has an account but need to access an invitation-only organization. This workflow involves the following steps:\n\n- Enter organization identifier\n- Success: request sent\n- Receive an email invitation\n- Success: organization joined\n\n**Join with Invitation**\n\nJoining via invitation occurs when a system admin extends an invitation for a user to join a group. If the user does not yet have an account, they will first proceed through the invitation-based registration workflow followed by the screens for joining the organization. This workflow includes the following steps:\n\n- Receive an email invitation\n- Success: organization joined\n\n### Screens\n\nThe majority of the joining-an-organization screens are the same regardless of the underlying mechanism. Use the following screens for the joining-an-organization workflow where appropriate.\n\n\n\n\n## Login\n\n\n\nLogging in can usually be accomplished in one of two ways: basic login or login via a third-party.\n\n**Basic Login**\n\nA simple login presents fields for the users to enter their credentials and a button to submit them for verification.\n\nThe login screen should always present information on how to create an account and what to do if a user has forgotten their credentials — these buttons should trigger the Registration and Forgot Password (see below) workflows .\n\n\n\n\n**Login via Third Party**\n\nSome applications, especially consumer-facing ones, can be authorized via third-party accounts / credentials. Different platforms may have different requirements for this. Here are some commonly used platforms and their instructions:\n\n- [Login with Amazon](https://developer.amazon.com/docs/login-with-amazon/brand.html)\n- [Google Sign-in](https://developers.google.com/identity/sign-in/web/sign-in)\n- [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/)\n- [Facebook Login](http://developers.facebook.com/docs/facebook-login/)\n- [Sign in with Microsoft](https://developer.microsoft.com/en-us/identity/add-sign-in-with-microsoft)\n\n## Forgot / Change Password\n\n**Forgot password**\n\nThe login screen for an application should also present users with a way to reset their password if they have forgotten it. This is typically displayed as a hyperlink below the credential fields. Clicking the link will present users with a field to enter their e-mail address. They will then receive an email with a hyperlink to reset their password. This workflow involves the following steps:\n\n- Enter email address\n- Success: reset instructions sent\n- Receive an email for resetting the password\n- Create a new password\n- Success: password updated\n\n\n\n\n**Change Password**\n\nWhen the users are logged in, they have the option to change their password by going through the change password workflow, typically triggered from within the user settings. This workflow includes the following steps:\n\n- Change password\n- Success: password updated\n\n> After a successful password change, users should be logged out and forced to log in with the new credentials.\n\n\n \n \n \n\n\n# Behavior\n\n## Email Communications\n\n\n\nEmail communications are frequently used throughout the user authentication workflow to verify the user's identity. Users receive emails for invitations, address verification, confirmation codes, etc.\n\nEmails are also sent to confirm security-related changes to a user's account, such as changing a password, updating a profile, etc. You should never allow users to unsubscribe from security-related email notifications.\n\n\n\n## Terminated Workflows & Expired Sessions\n\nDuring the registration, if a user leaves the application before creating a password for their account, the whole session is treated as expired, and upon returning, they must start the registration process over again.\n\nIf an invitation link or verification code has expired, the users should be able to request for another invitation link or verification code.\n\n\n\n## Security Concerns\n\n### Error Messages\n\nWhen a user encounters an error — such as a password mismatch or the server is temporarily down — they should be notified with an appropriate error message. However, be very careful when presenting error messages to the users. You should only show what is necessary to recover from the problem, such as \"incorrect email or password\" or \"server unavailable\" — do not expose information that could compromise the security of your application.\n\n> Do **NOT** provide messages like \"User does not exist,\" \"Incorrect Password,\" etc.\n\n\n\n### Exposing Credentials\n\nUnlike a phone application, a shared HMI application is more vulnerable to outside threats via showing credentials. These projects should **NOT** implement password visibility toggles or \"remember me\" functionality.\n\n### Two-Factor Authentication\n\nThe examples on this page used email as the login credentials. However, if your project requires additional security, consider using two-factor authentication. Two-factor authentication involves sending an additional confirmation code (typically via email or SMS) to verify a user's identity after they enter their password.\n\n\n\n# Developers\n\nWe 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.\n\n**Angular:**\n\n- [@pxblue/angular-auth-workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow)\n\n**React:**\n\n- [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow)\n\n**React Native:**\n\n- [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow)\n\n**Ionic:**\n\n_Planned_\n" }, "/patterns/visualizations": { "title": "Visualizations", diff --git a/src/docs/design/anatomy.mdx b/src/docs/design/anatomy.mdx index b54d7a76a..59c9a1309 100644 --- a/src/docs/design/anatomy.mdx +++ b/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'; diff --git a/src/docs/design/intro.mdx b/src/docs/design/intro.mdx index ab0ca8be0..c6c469071 100644 --- a/src/docs/design/intro.mdx +++ b/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. diff --git a/src/docs/patterns/user-auth.mdx b/src/docs/patterns/user-auth.mdx index f968d4a74..9cd322822 100644 --- a/src/docs/patterns/user-auth.mdx +++ b/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_ diff --git a/src/docs/release-notes/R17/R17.mdx b/src/docs/release-notes/R17/R17.mdx index 196f25a31..f3908df2c 100644 --- a/src/docs/release-notes/R17/R17.mdx +++ b/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) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx new file mode 100644 index 000000000..fa57460cc --- /dev/null +++ b/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 diff --git a/src/docs/release-notes/R18/Summary.mdx b/src/docs/release-notes/R18/Summary.mdx new file mode 100644 index 000000000..df5c74d11 --- /dev/null +++ b/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. diff --git a/src/docs/release-notes/index.tsx b/src/docs/release-notes/index.tsx index 6e2e8e443..4ef6a00aa 100644 --- a/src/docs/release-notes/index.tsx +++ b/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: , + summary: , + }, { title: 'R17', date: 'September 2020',