From 70a6a1794a284c0fdffa40e24ba8a407b4372175 Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 3 Feb 2021 11:43:26 -0500 Subject: [PATCH] Update to latest theme and font packages --- package.json | 5 +-- src/database/index-database.json | 38 +++++++++---------- src/database/sitemap-database.json | 4 +- .../development/frameworks-web/angular.mdx | 4 +- src/docs/development/frameworks-web/react.mdx | 4 +- src/index.tsx | 6 ++- yarn.lock | 30 +++++++-------- 7 files changed, 46 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index f33ce4778..e52300fae 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "prettier": "@pxblue/prettier-config", "dependencies": { "@brainhubeu/react-carousel": "^1.12.15", + "@fontsource/roboto-mono": "^4.1.1", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", @@ -33,7 +34,7 @@ "@pxblue/icons-mui": "^2.2.1", "@pxblue/react-components": "^4.1.1", "@pxblue/react-progress-icons": "^2.1.0", - "@pxblue/react-themes": "^5.0.2", + "@pxblue/react-themes": "^6.0.0-beta.0", "axios": "^0.19.2", "clsx": "^1.1.0", "color": "^3.1.3", @@ -129,8 +130,6 @@ "style-loader": "1.0.0", "terser-webpack-plugin": "^4.2.2", "ts-pnp": "1.1.5", - "typeface-open-sans": "0.0.75", - "typeface-roboto-mono": "^0.0.75", "typescript": "~3.7.2", "url-loader": "2.3.0", "webpack": "4.41.2", diff --git a/src/database/index-database.json b/src/database/index-database.json index 9a4cb388d..4bb82425d 100644 --- a/src/database/index-database.json +++ b/src/database/index-database.json @@ -4461,7 +4461,7 @@ { "/style/themes": 1 } ], "angular": [ - { "/development/frameworks-web/angular": 32 }, + { "/development/frameworks-web/angular": 33 }, { "/development/testing": 8 }, { "/development/frameworks-mobile/ionic": 7 }, { "/development/frameworks-web/intro": 6 }, @@ -4488,7 +4488,7 @@ ], "react": [ { "/development/frameworks-mobile/react-native": 48 }, - { "/development/frameworks-web/react": 20 }, + { "/development/frameworks-web/react": 21 }, { "/development/testing": 12 }, { "/development/frameworks-mobile/intro": 9 }, { "/patterns/loading": 7 }, @@ -5415,6 +5415,7 @@ { "/development/frameworks-mobile/react-native": 2 }, { "/community/our-team": 2 }, { "/development/environment": 1 }, + { "/development/frameworks-web/angular": 1 }, { "/patterns/visualizations": 1 }, { "/community/bugs": 1 }, { "/community/features": 1 }, @@ -6100,9 +6101,9 @@ { "/development/frameworks-mobile/react-native": 1 } ], "themes": [ + { "/development/frameworks-web/angular": 11 }, { "/style/themes": 11 }, - { "/development/frameworks-web/angular": 10 }, - { "/development/frameworks-web/react": 6 }, + { "/development/frameworks-web/react": 7 }, { "/development/frameworks-mobile/react-native": 6 }, { "/design/project-identity": 5 }, { "/community/faq": 3 }, @@ -6140,9 +6141,9 @@ { "/development/frameworks-mobile/react-native": 1 } ], "pxblue": [ - { "/development/frameworks-web/angular": 12 }, + { "/development/frameworks-web/angular": 13 }, + { "/development/frameworks-web/react": 12 }, { "/development/frameworks-mobile/react-native": 12 }, - { "/development/frameworks-web/react": 11 }, { "/development/frameworks-mobile/ionic": 7 }, { "/patterns/appbar": 3 }, { "/patterns/empty-states": 3 }, @@ -6656,8 +6657,8 @@ ], "font": [ { "/style/typography": 9 }, + { "/development/frameworks-web/angular": 4 }, { "/design/websites": 4 }, - { "/development/frameworks-web/angular": 3 }, { "/development/frameworks-web/react": 3 }, { "/development/frameworks-mobile/react-native": 3 }, { "/design/accessibility": 3 }, @@ -6666,7 +6667,6 @@ { "/patterns/internationalization": 1 }, { "/style/illustrations": 1 } ], - "typeface": [{ "/development/frameworks-web/angular": 2 }, { "/development/frameworks-web/react": 2 }], "ie": [{ "/development/frameworks-web/angular": 1 }, { "/development/frameworks-web/react": 1 }], "refer": [ { "/development/frameworks-mobile/react-native": 4 }, @@ -6897,7 +6897,7 @@ { "/style/illustrations": 1 } ], "src": [{ "/development/frameworks-web/angular": 1 }], - "scss": [{ "/development/frameworks-web/angular": 2 }, { "/style/themes": 1 }], + "scss": [{ "/development/frameworks-web/angular": 3 }, { "/style/themes": 1 }], "node_modules": [{ "/development/frameworks-web/angular": 2 }], "applying": [ { "/development/frameworks-web/angular": 2 }, @@ -7091,12 +7091,13 @@ { "/development/frameworks-mobile/react-native": 1 } ], "mui": [{ "/development/frameworks-web/react": 1 }], + "fontsource": [{ "/development/frameworks-web/react": 1 }], "polyfills": [{ "/development/frameworks-web/react": 1 }], "polyfill": [{ "/development/frameworks-web/react": 1 }], "enzyme": [{ "/development/frameworks-web/react": 3 }, { "/development/testing": 1 }], "adapter": [{ "/development/frameworks-web/react": 1 }], "import": [ - { "/development/frameworks-web/react": 1 }, + { "/development/frameworks-web/react": 2 }, { "/development/frameworks-mobile/react-native": 1 }, { "/community/innersourcing": 1 } ], @@ -7108,15 +7109,6 @@ { "/patterns/internationalization": 1 } ], "tsx": [{ "/development/frameworks-web/react": 2 }, { "/development/frameworks-mobile/react-native": 2 }], - "require": [ - { "/patterns/internationalization": 3 }, - { "/patterns/user-auth": 2 }, - { "/style/color": 2 }, - { "/community/innersourcing": 2 }, - { "/development/frameworks-web/react": 1 }, - { "/design/websites": 1 }, - { "/patterns/navigation": 1 } - ], "whole": [{ "/development/frameworks-web/react": 1 }, { "/patterns/user-auth": 1 }], "simply": [ { "/development/frameworks-web/react": 1 }, @@ -9351,6 +9343,14 @@ { "/style/illustrations": 1 } ], "highlight": [{ "/patterns/lists": 2 }, { "/design/websites": 1 }, { "/patterns/navigation": 1 }], + "require": [ + { "/patterns/internationalization": 3 }, + { "/patterns/user-auth": 2 }, + { "/style/color": 2 }, + { "/community/innersourcing": 2 }, + { "/design/websites": 1 }, + { "/patterns/navigation": 1 } + ], "highly": [{ "/design/websites": 1 }, { "/community/faq": 1 }], "legible": [{ "/design/websites": 1 }, { "/style/illustrations": 1 }], "script": [{ "/design/websites": 1 }], diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json index 6acfc8863..e1321041d 100644 --- a/src/database/sitemap-database.json +++ b/src/database/sitemap-database.json @@ -30,11 +30,11 @@ }, "/development/frameworks-web/angular": { "title": "Angular Guide", - "text": "import { Divider } from '../../../app/components';\n\n\n\n# Getting Started with Angular\n\nThe following instructions will guide you through starting a new PX Blue project using Angular. Alternatively, you can also start your project by downloading one of our code samples from [Github](https://github.com/pxblue) (the Login or Navigation examples are good projects to start from).\n\n## Using the PX Blue CLI\n\nThe fastest way to start a new PX Blue project is to use the [PX Blue CLI](/development/cli). The CLI will automatically create a starter project for you (using the [Angular CLI](http://cli.angular.io/)) with all of the necessary PX Blue dependencies pre-configured. To start an Angular project:\n\n```sh\nnpx -p @pxblue/cli pxb new angular\n```\n\nYou will be asked to provide a name for your project and whether or not you want to use the PX Blue eslint and prettier configurations files.\n\nThe PX Blue CLI will automatically include:\n\n- Angular Material Component Library ([@angular/material](https://www.npmjs.com/package/@angular/material))\n- PX Blue Component Library ([@pxblue/angular-components](https://www.npmjs.com/package/@pxblue/angular-components))\n- PX Blue Themes ([@pxblue/angular-themes](https://www.npmjs.com/package/@pxblue/angular-themes))\n- PX Blue Icons ([@pxblue/icons](https://www.npmjs.com/package/@pxblue/icons))\n- PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))\n- Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans))\n- PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))\n- IE 11 Support\n\nFor detailed usage instructions, refer to the [PX Blue CLI documentation](https://www.npmjs.com/package/@pxblue/cli).\n\n## Using an Existing Project\n\nIf you have an existing project and would like to integrate PX Blue, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the PX Blue CLI.\n\n\n\n# Manual PX Blue Integration\n\nBefore taking the following steps, you'll want to make sure that you have an existing application. If you used the PX Blue CLI to start your project, these steps have already been done for you automatically.\n\n## Including the Component Libraries\n\n### Angular Material\n\nAngular projects should make use of the [Angular Material](https://material.angular.io/) component library. Our PX Blue themes are designed to work with these components.\n\n```sh\nnpm install --save @angular/material\n// or\nyarn add @angular/material\n```\n\nFor detailed documentation about the various components available in Angular Material, as well as sample code and API reference, refer to the [Angular Material Documentation](https://material.angular.io/components/).\n\n### PX Blue Components\n\nAdditionally, we have a [supplemental library](https://github.com/pxblue/angular-component-library/tree/dev) of components designed specifically for PX Blue applications. If you wish to use these components, you can install them by running:\n\n```sh\nnpm install --save @pxblue/angular-components\n// or\nyarn add @pxblue/angular-components\n```\n\n## Adding PX Blue Themes\n\nBy default, your application will be themed with the Google Material theme. To use the [PX Blue theme](https://www.npmjs.com/package/@pxblue/angular-themes), first install it:\n\n```sh\nnpm install --save @pxblue/angular-themes\n// or\nyarn add @pxblue/angular-themes\n```\n\nInstalling the theme package will automatically include the Open Sans web font package as well as the PX Blue [colors](https://www.npmjs.com/package/@pxblue/colors) package. In order to use the PX Blue themes and font (Open Sans), you will need to modify your angular.json file \"styles\" entries (there is one under \"build\" and one under \"test\") to include the PX Blue themes and Open Sans reference:\n\n```json\n\"styles\": [\n \"src/styles.scss\",\n \"./node_modules/@pxblue/angular-themes/theme.scss\",\n \"./node_modules/typeface-open-sans\"\n],\n```\n\n### Applying the Theme\n\nYou can apply the theme to your application by adding the proper class to your application's body element:\n\n```html\n// Default Theme\n\n\n// Dark Theme\n\n```\n\n> If you do not specify a theme class, your application will use the default Material theme.\n\nYou can access the fonts using mat-typography, e.g.:\n\n```html\n
\n

H1 Text

\n

H2 Text

\n

Paragraph text

\n
Bold body copy
\n
\n```\n\nYou can access theme colors as well, e.g.:\n\n```html\nMy App\n```\n\nMore details about applying themes in your application can be found in [Theming your Angular Material app](https://material.angular.io/guide/theming).\n\n\n\n# Additional Information\n\n## Code Formatting / Style\n\nPX Blue provides packages for code standards and style using ESLint and Prettier. These packages are used internally by the PX Blue team, but they can also be used in your projects. You can find instructions for adding these packages to your project on [GitHub](https://github.com/pxblue/code-standards).\n\n## Browser Support\n\nAngular and Angular Material will work with any modern browser. For specific details, you can view their official support pages:\n\n- [Angular CLI](https://angular.io/guide/browser-support)\n- [Angular Material](https://github.com/angular/material2#browser-and-screen-reader-support)\n\n> As of Angular 8, the Angular CLI no longer includes support for IE11 by default. If you need to support this browser (not recommended), you can configure your project to support it manually ([Contact us](/community/contactus) for assistance) or use the PX Blue CLI to scaffold your project.\n\n## License Information\n\n[Angular](https://github.com/angular/angular/blob/master/LICENSE) and [Angular Material](https://github.com/angular/material2/blob/master/LICENSE) are both available under the MIT License.\n" + "text": "import { Divider } from '../../../app/components';\n\n\n\n# Getting Started with Angular\n\nThe following instructions will guide you through starting a new PX Blue project using Angular. Alternatively, you can also start your project by downloading one of our code samples from [Github](https://github.com/pxblue) (the Login or Navigation examples are good projects to start from).\n\n## Using the PX Blue CLI\n\nThe fastest way to start a new PX Blue project is to use the [PX Blue CLI](/development/cli). The CLI will automatically create a starter project for you (using the [Angular CLI](http://cli.angular.io/)) with all of the necessary PX Blue dependencies pre-configured. To start an Angular project:\n\n```sh\nnpx -p @pxblue/cli pxb new angular\n```\n\nYou will be asked to provide a name for your project and whether or not you want to use the PX Blue eslint and prettier configurations files.\n\nThe PX Blue CLI will automatically include:\n\n- Angular Material Component Library ([@angular/material](https://www.npmjs.com/package/@angular/material))\n- PX Blue Component Library ([@pxblue/angular-components](https://www.npmjs.com/package/@pxblue/angular-components))\n- PX Blue Themes ([@pxblue/angular-themes](https://www.npmjs.com/package/@pxblue/angular-themes))\n- PX Blue Icons ([@pxblue/icons](https://www.npmjs.com/package/@pxblue/icons))\n- PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))\n- Open Sans web font ([@font-source/open-sans](https://www.npmjs.com/package/@fontsource/open-sans))\n- PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))\n- IE 11 Support\n\nFor detailed usage instructions, refer to the [PX Blue CLI documentation](https://www.npmjs.com/package/@pxblue/cli).\n\n## Using an Existing Project\n\nIf you have an existing project and would like to integrate PX Blue, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the PX Blue CLI.\n\n\n\n# Manual PX Blue Integration\n\nBefore taking the following steps, you'll want to make sure that you have an existing application. If you used the PX Blue CLI to start your project, these steps have already been done for you automatically.\n\n## Including the Component Libraries\n\n### Angular Material\n\nAngular projects should make use of the [Angular Material](https://material.angular.io/) component library. Our PX Blue themes are designed to work with these components.\n\n```sh\nnpm install --save @angular/material\n// or\nyarn add @angular/material\n```\n\nFor detailed documentation about the various components available in Angular Material, as well as sample code and API reference, refer to the [Angular Material Documentation](https://material.angular.io/components/).\n\n### PX Blue Components\n\nAdditionally, we have a [supplemental library](https://github.com/pxblue/angular-component-library/tree/dev) of components designed specifically for PX Blue applications. If you wish to use these components, you can install them by running:\n\n```sh\nnpm install --save @pxblue/angular-components\n// or\nyarn add @pxblue/angular-components\n```\n\n## Adding PX Blue Themes\n\nBy default, your application will be themed with the Google Material theme. To use the [PX Blue theme](https://www.npmjs.com/package/@pxblue/angular-themes), first install it:\n\n```sh\nnpm install --save @pxblue/angular-themes\n// or\nyarn add @pxblue/angular-themes\n```\n\nInstalling the theme package will automatically include the Open Sans web font package as well as the PX Blue [colors](https://www.npmjs.com/package/@pxblue/colors) package. In order to use the PX Blue themes and font (Open Sans), you will need to modify your angular.json file \"styles\" entries (there is one under \"build\" and one under \"test\") to include the PX Blue themes and Open Sans reference:\n\n```json\n\"styles\": [\n \"src/styles.scss\",\n \"./node_modules/@pxblue/angular-themes/theme.scss\",\n \"./node_modules/@pxblue/angular-themes/open-sans.scss\",\n],\n```\n\n### Applying the Theme\n\nYou can apply the theme to your application by adding the proper class to your application's body element:\n\n```html\n// Default Theme\n\n\n// Dark Theme\n\n```\n\n> If you do not specify a theme class, your application will use the default Material theme.\n\nYou can access the fonts using mat-typography, e.g.:\n\n```html\n
\n

H1 Text

\n

H2 Text

\n

Paragraph text

\n
Bold body copy
\n
\n```\n\nYou can access theme colors as well, e.g.:\n\n```html\nMy App\n```\n\nMore details about applying themes in your application can be found in [Theming your Angular Material app](https://material.angular.io/guide/theming).\n\n\n\n# Additional Information\n\n## Code Formatting / Style\n\nPX Blue provides packages for code standards and style using ESLint and Prettier. These packages are used internally by the PX Blue team, but they can also be used in your projects. You can find instructions for adding these packages to your project on [GitHub](https://github.com/pxblue/code-standards).\n\n## Browser Support\n\nAngular and Angular Material will work with any modern browser. For specific details, you can view their official support pages:\n\n- [Angular CLI](https://angular.io/guide/browser-support)\n- [Angular Material](https://github.com/angular/material2#browser-and-screen-reader-support)\n\n> As of Angular 8, the Angular CLI no longer includes support for IE11 by default. If you need to support this browser (not recommended), you can configure your project to support it manually ([Contact us](/community/contactus) for assistance) or use the PX Blue CLI to scaffold your project.\n\n## License Information\n\n[Angular](https://github.com/angular/angular/blob/master/LICENSE) and [Angular Material](https://github.com/angular/material2/blob/master/LICENSE) are both available under the MIT License.\n" }, "/development/frameworks-web/react": { "title": "React Guide", - "text": "import { Divider } from '../../../app/components';\n\n\n\n# Getting Started with React\n\nThe following instructions will guide you through starting a new PX Blue project using React. Alternatively, you can also start your project by downloading one of our code samples from [Github](https://github.com/pxblue) (the Login or Navigation examples are good projects to start from).\n\n## Using the PX Blue CLI\n\nThe fastest way to start a new PX Blue project is to use the [PX Blue CLI](/development/cli). The CLI will automatically create a starter project for you (using [Create React App](https://github.com/facebookincubator/create-react-app)) with all of the necessary PX Blue dependencies pre-configured. To start a React project:\n\n```sh\nnpx -p @pxblue/cli pxb new react\n```\n\nYou will be asked to provide a name for your project, choose whether you would like to use TypeScript or JavaScript, and for TypeScript projects, you'll be asked if you want to use the PX Blue eslint and prettier configurations files.\n\nThe PX Blue CLI will automatically include:\n\n- Material-UI Component Library and Icons ([@material-ui/core](https://www.npmjs.com/package/@material-ui/core) / [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons))\n- PX Blue Component Library ([@pxblue/react-components](https://www.npmjs.com/package/@pxblue/react-components))\n- PX Blue Themes ([@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes))\n- PX Blue Icons ([@pxblue/icons-mui](https://www.npmjs.com/package/@pxblue/icons-mui))\n- PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))\n- Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans))\n- PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))\n- IE 11 Polyfills ([react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill))\n- Enzyme testing library ([enzyme](https://www.npmjs.com/package/enzyme) / [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16))\n\nFor detailed usage instructions, refer to the [PX Blue CLI documentation](https://www.npmjs.com/package/@pxblue/cli).\n\n## Using an Existing Project\n\nIf you have an existing project and would like to integrate PX Blue, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the PX Blue CLI.\n\n\n\n# Manual PX Blue Integration\n\nBefore taking the following steps, you'll want to make sure that you have an existing application. If you used the PX Blue CLI to start your project, these steps have already been done for you automatically.\n\n## Including the Component Libraries\n\n### Material UI\n\nReact projects should make use of the [Material-UI](https://material-ui.com/) component library. Our PX Blue themes are designed to work with these components. You'll also want to install the icons.\n\n```sh\nnpm install --save @material-ui/core @material-ui/icons\n// or\nyarn add @material-ui/core @material-ui/icons\n```\n\nFor detailed documentation about the various components available in Material UI, as well as sample code and API reference, refer to the [Material UI Documentation](https://material-ui.com/).\n\n### PX Blue Components\n\nAdditionally, we have a [supplemental library](https://github.com/pxblue/react-component-library/tree/dev) of components designed specifically for PX Blue applications. If you wish to use these components, you can install them by running:\n\n```sh\nnpm install --save @pxblue/react-components\n// or\nyarn add @pxblue/react-components\n```\n\n## Adding PX Blue Themes\n\nBy default, your application will be themed with the Google Material theme. To use the [PX Blue theme](https://www.npmjs.com/package/@pxblue/react-themes), first install it:\n\n```sh\nnpm install --save @pxblue/react-themes\n// or\nyarn add @pxblue/react-themes\n```\n\nInstalling the theme package will automatically include the Open Sans web font package as well as the PX Blue [colors](https://www.npmjs.com/package/@pxblue/colors) package.\n\n### Applying the Theme\n\nImport the theme files, Material UI theme provider, and **Open Sans** font into your application, e.g. in App.js:\n\n```tsx\nimport { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport * as PXBThemes from '@pxblue/react-themes';\nrequire('typeface-open-sans');\n```\n\nTo add the theme to your whole application, you would simply add a `` around your top-level component and pass it the theme you want to use, e.g.:\n\n```tsx\n\n \n \n\n```\n\nYou can read about [React Theming](https://material-ui.com/customization/theming/) to learn more.\n\n\n\n# Additional Information\n\n## Code Formatting / Style\n\nPX Blue provides packages for code standards and style using ESLint and Prettier. These packages are used internally by the PX Blue team, but they can also be used in your projects. You can find instructions for adding these packages to your project on [GitHub](https://github.com/pxblue/code-standards).\n\n> NOTE: the ESLint package is only available for TypeScript projects.\n\n## Browser Support\n\nReact and Material UI will work with any modern browser. For specific details, you can view their official support pages:\n\n- [React](https://facebook.github.io/create-react-app/docs/supported-browsers-features)\n- [Material UI](https://material-ui.com/getting-started/supported-platforms/)\n\n> The latest Create React App CLI does not include support for IE11 by default. If you need to support this browser (not recommended), you can configure your project to support it manually ([Contact us](/community/contactus) for assistance) or use the PX Blue CLI to scaffold your project.\n\n## License Information\n\n[React](https://github.com/facebook/react/blob/master/LICENSE) and [Material UI](https://github.com/mui-org/material-ui/blob/master/LICENSE) are both available under the MIT License.\n" + "text": "import { Divider } from '../../../app/components';\n\n\n\n# Getting Started with React\n\nThe following instructions will guide you through starting a new PX Blue project using React. Alternatively, you can also start your project by downloading one of our code samples from [Github](https://github.com/pxblue) (the Login or Navigation examples are good projects to start from).\n\n## Using the PX Blue CLI\n\nThe fastest way to start a new PX Blue project is to use the [PX Blue CLI](/development/cli). The CLI will automatically create a starter project for you (using [Create React App](https://github.com/facebookincubator/create-react-app)) with all of the necessary PX Blue dependencies pre-configured. To start a React project:\n\n```sh\nnpx -p @pxblue/cli pxb new react\n```\n\nYou will be asked to provide a name for your project, choose whether you would like to use TypeScript or JavaScript, and for TypeScript projects, you'll be asked if you want to use the PX Blue eslint and prettier configurations files.\n\nThe PX Blue CLI will automatically include:\n\n- Material-UI Component Library and Icons ([@material-ui/core](https://www.npmjs.com/package/@material-ui/core) / [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons))\n- PX Blue Component Library ([@pxblue/react-components](https://www.npmjs.com/package/@pxblue/react-components))\n- PX Blue Themes ([@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes))\n- PX Blue Icons ([@pxblue/icons-mui](https://www.npmjs.com/package/@pxblue/icons-mui))\n- PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))\n- Open Sans web font ([@fontsource/open-sans](https://www.npmjs.com/package/@fontsource/open-sans))\n- PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))\n- IE 11 Polyfills ([react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill))\n- Enzyme testing library ([enzyme](https://www.npmjs.com/package/enzyme) / [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16))\n\nFor detailed usage instructions, refer to the [PX Blue CLI documentation](https://www.npmjs.com/package/@pxblue/cli).\n\n## Using an Existing Project\n\nIf you have an existing project and would like to integrate PX Blue, you can follow the manual integration instructions below. If you have not already started your project, we recommend that you scaffold your project with the PX Blue CLI.\n\n\n\n# Manual PX Blue Integration\n\nBefore taking the following steps, you'll want to make sure that you have an existing application. If you used the PX Blue CLI to start your project, these steps have already been done for you automatically.\n\n## Including the Component Libraries\n\n### Material UI\n\nReact projects should make use of the [Material-UI](https://material-ui.com/) component library. Our PX Blue themes are designed to work with these components. You'll also want to install the icons.\n\n```sh\nnpm install --save @material-ui/core @material-ui/icons\n// or\nyarn add @material-ui/core @material-ui/icons\n```\n\nFor detailed documentation about the various components available in Material UI, as well as sample code and API reference, refer to the [Material UI Documentation](https://material-ui.com/).\n\n### PX Blue Components\n\nAdditionally, we have a [supplemental library](https://github.com/pxblue/react-component-library/tree/dev) of components designed specifically for PX Blue applications. If you wish to use these components, you can install them by running:\n\n```sh\nnpm install --save @pxblue/react-components\n// or\nyarn add @pxblue/react-components\n```\n\n## Adding PX Blue Themes\n\nBy default, your application will be themed with the Google Material theme. To use the [PX Blue theme](https://www.npmjs.com/package/@pxblue/react-themes), first install it:\n\n```sh\nnpm install --save @pxblue/react-themes\n// or\nyarn add @pxblue/react-themes\n```\n\nInstalling the theme package will automatically include the Open Sans web font package as well as the PX Blue [colors](https://www.npmjs.com/package/@pxblue/colors) package.\n\n### Applying the Theme\n\nImport the theme files, Material UI theme provider, and **Open Sans** font into your application, e.g. in App.js:\n\n```tsx\nimport { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport * as PXBThemes from '@pxblue/react-themes';\nimport '@pxblue/react-themes/open-sans';\n```\n\nTo add the theme to your whole application, you would simply add a `` around your top-level component and pass it the theme you want to use, e.g.:\n\n```tsx\n\n \n \n\n```\n\nYou can read about [React Theming](https://material-ui.com/customization/theming/) to learn more.\n\n\n\n# Additional Information\n\n## Code Formatting / Style\n\nPX Blue provides packages for code standards and style using ESLint and Prettier. These packages are used internally by the PX Blue team, but they can also be used in your projects. You can find instructions for adding these packages to your project on [GitHub](https://github.com/pxblue/code-standards).\n\n> NOTE: the ESLint package is only available for TypeScript projects.\n\n## Browser Support\n\nReact and Material UI will work with any modern browser. For specific details, you can view their official support pages:\n\n- [React](https://facebook.github.io/create-react-app/docs/supported-browsers-features)\n- [Material UI](https://material-ui.com/getting-started/supported-platforms/)\n\n> The latest Create React App CLI does not include support for IE11 by default. If you need to support this browser (not recommended), you can configure your project to support it manually ([Contact us](/community/contactus) for assistance) or use the PX Blue CLI to scaffold your project.\n\n## License Information\n\n[React](https://github.com/facebook/react/blob/master/LICENSE) and [Material UI](https://github.com/mui-org/material-ui/blob/master/LICENSE) are both available under the MIT License.\n" }, "/development/frameworks-mobile/intro": { "title": "Introduction", diff --git a/src/docs/development/frameworks-web/angular.mdx b/src/docs/development/frameworks-web/angular.mdx index e7e19f051..f3970e444 100644 --- a/src/docs/development/frameworks-web/angular.mdx +++ b/src/docs/development/frameworks-web/angular.mdx @@ -23,7 +23,7 @@ The PX Blue CLI will automatically include: - PX Blue Themes ([@pxblue/angular-themes](https://www.npmjs.com/package/@pxblue/angular-themes)) - PX Blue Icons ([@pxblue/icons](https://www.npmjs.com/package/@pxblue/icons)) - PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors)) -- Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans)) +- Open Sans web font ([@font-source/open-sans](https://www.npmjs.com/package/@fontsource/open-sans)) - PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config)) - IE 11 Support @@ -79,7 +79,7 @@ Installing the theme package will automatically include the Open Sans web font p "styles": [ "src/styles.scss", "./node_modules/@pxblue/angular-themes/theme.scss", - "./node_modules/typeface-open-sans" + "./node_modules/@pxblue/angular-themes/open-sans.scss", ], ``` diff --git a/src/docs/development/frameworks-web/react.mdx b/src/docs/development/frameworks-web/react.mdx index b2c6e93a4..700dc5a98 100644 --- a/src/docs/development/frameworks-web/react.mdx +++ b/src/docs/development/frameworks-web/react.mdx @@ -23,7 +23,7 @@ The PX Blue CLI will automatically include: - PX Blue Themes ([@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes)) - PX Blue Icons ([@pxblue/icons-mui](https://www.npmjs.com/package/@pxblue/icons-mui)) - PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors)) -- Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans)) +- Open Sans web font ([@fontsource/open-sans](https://www.npmjs.com/package/@fontsource/open-sans)) - PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config)) - IE 11 Polyfills ([react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill)) - Enzyme testing library ([enzyme](https://www.npmjs.com/package/enzyme) / [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16)) @@ -84,7 +84,7 @@ Import the theme files, Material UI theme provider, and **Open Sans** font into import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import * as PXBThemes from '@pxblue/react-themes'; -require('typeface-open-sans'); +import '@pxblue/react-themes/open-sans'; ``` To add the theme to your whole application, you would simply add a `` around your top-level component and pass it the theme you want to use, e.g.: diff --git a/src/index.tsx b/src/index.tsx index 2fa4b09d2..53f6ac234 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,8 +7,10 @@ import * as serviceWorker from './serviceWorker'; import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import { getScheduledSiteConfig } from './__configuration__/themes'; -import 'typeface-open-sans'; -import 'typeface-roboto-mono'; +import '@pxblue/react-themes/open-sans'; +import '@fontsource/roboto-mono/400.css'; +import '@fontsource/roboto-mono/600.css'; +import '@fontsource/roboto-mono/700.css'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { MDXProvider } from '@mdx-js/react'; diff --git a/yarn.lock b/yarn.lock index 6ecab0aa9..b81230d98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1535,6 +1535,16 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@fontsource/open-sans@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.1.0.tgz#d44b4495bd23d78018675e4e79973894e393c0ed" + integrity sha512-sWDAAr6ESHJdBKXse6njvZem4sTZLILkugaEfAvpdFiaKBh2RnXTa4DJllDh5LzP0MLMUrfj/JAjMbKxWFo6pQ== + +"@fontsource/roboto-mono@^4.1.1": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-4.1.1.tgz#85d1547db7f58ea096b4bd15d06fc7aa2c735883" + integrity sha512-eMz2LIZZRlq+2tZZ/kI+JeDBJQ1mtR3bV64K1xlb9diRURoLK6Nhj8L/TEuwna7YxWLW+Op4U70n63dTWMcGKA== + "@hapi/address@2.x.x", "@hapi/address@^2.1.2": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -2081,13 +2091,13 @@ color "^3.1.2" react-jss "^10.4.0" -"@pxblue/react-themes@^5.0.2": - version "5.0.2" - resolved "https://registry.yarnpkg.com/@pxblue/react-themes/-/react-themes-5.0.2.tgz#468b5c4892337599a7718e111717d75b5f3b7815" - integrity sha512-HEyBHbEo/KQnr0jHKP4wiQl1zqaYKHFnWo9MpQp0prlQJ2ryswLXQfgvubJ7lWkJmrN+dLjYx556wuiEjCrG3A== +"@pxblue/react-themes@^6.0.0-beta.0": + version "6.0.0-beta.0" + resolved "https://registry.yarnpkg.com/@pxblue/react-themes/-/react-themes-6.0.0-beta.0.tgz#885e861769c9ffebef87fae0546d0bacddaadfe6" + integrity sha512-dTYJnt6YJbWgo253sqcpz0sGjyy0+NSEEili45dscszb9iq+9zWpQUtSXIGrLQHHRexJoGxuuiQ7F8Wa22G7Rg== dependencies: + "@fontsource/open-sans" "^4.1.0" "@pxblue/colors" "^3.0.0" - typeface-open-sans "^0.0.75" "@pxblue/types@^2.0.0": version "2.0.0" @@ -14637,16 +14647,6 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typeface-open-sans@0.0.75, typeface-open-sans@^0.0.75: - version "0.0.75" - resolved "https://registry.yarnpkg.com/typeface-open-sans/-/typeface-open-sans-0.0.75.tgz#20d0c330f14c0c40463c334adbedd6005389abe4" - integrity sha512-0lLmB7pfj113OP4T78SbpSmC4OCdFQ0vUxdSXQccsSb6qF76F92iEuC/DghFgmPswTyidk8+Hwf+PS/htiJoRQ== - -typeface-roboto-mono@^0.0.75: - version "0.0.75" - resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-0.0.75.tgz#00c4543662066a837c014c251ee5140fb66a5ad8" - integrity sha512-dYfyXd6HrKyMC/PuBAAtay0tZKsBrzxIW/fBY325vLxFfi/IDKSuyTkWxkU4lyZV6KPHetFnJ661PNXzz2FS/w== - typescript@~3.7.2: version "3.7.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"