diff --git a/src/pages/developing/react-tutorial/faq.mdx b/src/pages/developing/react-tutorial/faq.mdx new file mode 100644 index 00000000000..eb5e3908c80 --- /dev/null +++ b/src/pages/developing/react-tutorial/faq.mdx @@ -0,0 +1,82 @@ +--- +title: FAQs +description: + Welcome to Carbon! This tutorial will guide you in creating a React app with + the Carbon Design System. +tabs: + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] +--- + +### I am getting an error that says `failed to find manifest for cf`. What do I do? + +- The 5th step assumes your spaces are in the US South region. To successfully + deploy, you might need to update the region code (e.g. + `api.[REGION].cf.cloud.ibm.com`) to the region where your spaces were created, + or create a space in the US South region. + +- If you don't have an org, create one + [here](https://cloud.ibm.com/account/cloud-foundry). + - In the top nav go to Manage > Account > Account resources > Cloud Foundry + orgs + - The name you give it doesn't matter, just take note of the region you + select, and use that region's API endpoint (e.g. + `api.[REGION].cf.cloud.ibm.com`) + - Find regions and endpoints + [here](https://cloud.ibm.com/docs/cloud-foundry-public?topic=cloud-foundry-public-endpoints). + +### I am getting an error that says `yarn lockfile missing`. How do I fix this? + +- This error can occur when the `yarn.lock` file is either missing or differs + from the one used in the tutorial step. To fix this, you can go to the Github + branch for the step you are on, find the `yarn.lock` file, and copy that file + into your working directory. You may need to delete your `node_modules` folder + and run `yarn` afterwards. + +### I am getting a `yarn offline cache` error. How do I fix this? + +- Try running + `rm -rf .yarn-offline-mirror node_modules && yarn cache clean && yarn install` + and push up any changes. If this still does not work, ensure your `yarn.lock` + file matches the one at the start of the tutorial step + +### When will my PR be reviewed? + +- If your PR is passing, it will automatically get approved and closed by a bot. + After it's closed, you can move on to the next step. + +- If your PR is failing, try out the troubleshooting tips on this page first to + fix it. If it's still failing, reach out for help in our slack channel + `#carbon-react` or tag `@carbon-design-system/developers` in a comment on your + PR for help. + +### When will I get the badge? + +- After you've completed the tutorial, as well as the form and badge survey + mentioned + [here](https://carbondesignsystem.com/developing/react-tutorial/wrapping-up#badge-process), + our badge issuer will approve your badge. This is a manual job done by one + person. Please be patient if it takes a while to review as we have lots of + people go thru our tutorial badging process. + +- Badge issuer contact: matt.rosno@ibm.com. + +- For questions related to your Acclaim badge earner account and profile, as + well as issues related to claiming your badge after receiving a notification, + go to http://support.youracclaim.com for account issues. + +### Other troubleshooting tips + +- We updated the `react-scripts` dependency to `v5.0.1`. Pull from `upstream` + and run `yarn` or `npm install` to update your remote branch. +- You no longer need the `.env` with the updated `react-scripts` dependency. If + you are up to date, you can delete that file (previously at the root level). +- Run `yarn format` and commit any changes made. diff --git a/src/pages/developing/react-tutorial/overview.mdx b/src/pages/developing/react-tutorial/overview.mdx index 914f694f83a..9d040077b64 100644 --- a/src/pages/developing/react-tutorial/overview.mdx +++ b/src/pages/developing/react-tutorial/overview.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx index 1e5ec6dc87c..de16e38bd93 100644 --- a/src/pages/developing/react-tutorial/step-1.mdx +++ b/src/pages/developing/react-tutorial/step-1.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index 07491b1d35e..7838ae98c48 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/step-3.mdx b/src/pages/developing/react-tutorial/step-3.mdx index d1e12779a0c..914b730bf42 100644 --- a/src/pages/developing/react-tutorial/step-3.mdx +++ b/src/pages/developing/react-tutorial/step-3.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx index 8e5d6704766..6996bfcd8c4 100644 --- a/src/pages/developing/react-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx index 8a33dac7ee7..68866bce6ef 100644 --- a/src/pages/developing/react-tutorial/step-5.mdx +++ b/src/pages/developing/react-tutorial/step-5.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- import Preview from 'components/Preview'; diff --git a/src/pages/developing/react-tutorial/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx index 33cba4c4639..67838b9581f 100644 --- a/src/pages/developing/react-tutorial/wrapping-up.mdx +++ b/src/pages/developing/react-tutorial/wrapping-up.mdx @@ -4,7 +4,16 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app with the Carbon Design System. tabs: - ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] + [ + 'Overview', + 'Step 1', + 'Step 2', + 'Step 3', + 'Step 4', + 'Step 5', + 'Wrapping up', + 'FAQ', + ] --- diff --git a/src/styles/_page.scss b/src/styles/_page.scss index d5d44ec3c70..405a80e55af 100644 --- a/src/styles/_page.scss +++ b/src/styles/_page.scss @@ -90,3 +90,10 @@ section[role='tabpanel'] [class*='--col'] + [class*='--col'] { .tab--columns_label { margin-bottom: 0.5rem; } + +.tutorial-faq-header-code code { + background-color: $ui-03; + font-size: 1.25rem; + padding: 0 0.5rem; + border-radius: 0.25rem; +}