diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf index fc584811bb7..872756bedda 100644 --- a/conf.d/rewrite.conf +++ b/conf.d/rewrite.conf @@ -1,30 +1,42 @@ -## Get started rewrites -rewrite /getting-started/developers/(.*) /get-started/develop/\$1 permanent; -rewrite /getting-started/designers /get-started/design permanent; -rewrite /getting-started/about-carbon /get-started/about-carbon permanent; -rewrite /get-started/design/?$ /get-started/design/sketch permanent; - -# Tutorial rewrites -rewrite /tutorial/react-(.*) /tutorial/react/\$1 permanent; -rewrite /tutorial/wrapping-up /tutorial/react/wrapping-up permanent; -rewrite /tutorial/overview /tutorial/react/overview permanent; - -# Contributions rewrites -rewrite /contributions/(.*) /how-to-contribute/\$1 permanent; - # Guidelines rewrites rewrite /guidelines/iconography/(.*) /guidelines/icons/\$1 permanent; rewrite /guidelines/layout /guidelines/2x-grid/basics/\$1 permanent; rewrite /guidelines/content/glossary /guidelines/content/action-labels permanent; -# Updates rewrites -rewrite /updates/roadmap /updates/whats-new permanent; - - # Experimental -> Cloud, Data, and AI rewrite /experimental/cards/(.*) https://pages.github.ibm.com/CDAI-design/CDAI-design-website/components/card/\$1 permanent; rewrite /experimental/dashboard-widgets/(.*) https://pages.github.ibm.com/CDAI-design/CDAI-design-website/components/widget/\$1 permanent; rewrite /experimental/order-summary-template/(.*) https://pages.github.ibm.com/CDAI-design/CDAI-design-website/patterns/order-summary/\$1 permanent; # Experimental -> community -rewrite /experimental/(.*) /community/patterns/\$1 permanent; \ No newline at end of file +rewrite /experimental/(.*) /community/patterns/\$1 permanent; + +# IA Updates 8/2020 +# All about Carbon +rewrite /get-started/about-carbon /all-about-carbon/what-is-carbon permanent; +rewrite /contributing/governance /all-about-carbon/how-we-work permanent; + +# Designing +rewrite /get-started/design/(.*) /designing/get-started/kits/\$1 permanent; + +# Contributions rewrites +rewrite /how-to-contribute/(.*) /contributing/\$1 permanent; + +# What's happening +rewrite /updates/whats-new /whats-happening/changelog-and-roadmap permanent; +rewrite /updates/work-in-progress /whats-happening/work-in-progress permanent; + +# Help +rewrite /updates/migration-guide/(.*) /help/migration-guide/\$1 permanent; +rewrite /help/support /help/contact-us permanent; +rewrite /help/faq /help/faqs permanent; + +# Developing +rewrite /get-started/develop/(.*) /developing/frameworks/\$1 permanent; +rewrite /resources /developing/developer-resources permanent; +rewrite /tutorial/angular(.*) /developing/angular-tutorial\$1 permanent; +rewrite /tutorial/react(.*) /developing/react-tutorial\$1 permanent; +rewrite /tutorial/vue(.*) /developing/vue-tutorial\$1 permanent; + +# Community assets +# add when index is live - rewrite /community/components /community/component-index permanent; diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 022287665a7..57e0076782a 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -1,19 +1,60 @@ -- title: Get started +- title: All about Carbon pages: - - title: About Carbon - path: /get-started/about-carbon - - title: Design - path: /get-started/design/sketch - - title: Develop - path: /get-started/develop/react -- title: Tutorial + - title: What is Carbon? + path: /all-about-carbon/what-is-carbon + - title: How we work + path: /all-about-carbon/how-we-work +- title: Designing pages: - - title: Angular - path: /tutorial/angular/overview - - title: React - path: /tutorial/react/overview - - title: Vue - path: /tutorial/vue/overview + - title: Get started + path: /designing/get-started + - title: Design kits + path: /designing/kits/sketch + - title: Other resources + path: /designing/design-resources +- title: Developing + pages: + - title: Get started + path: /developing/get-started + - title: Frameworks + path: /developing/frameworks/react + - title: Developer resources + path: /developing/dev-resources + - title: Angular tutorial + path: /developing/angular-tutorial/overview + - title: React tutorial + path: /developing/react-tutorial/overview + - title: Vue tutorial + path: /developing/vue-tutorial/overview +- title: Contributing + pages: + - title: Overview + path: /contributing/overview + - title: Bugs and requests + path: /contributing/bugs-and-requests + - title: Documentation + path: /contributing/documentation + - title: Components + path: /contributing/component + - title: Icons + path: /contributing/contribute-icons + - title: Patterns + path: /contributing/pattern + - title: Pictograms + path: /contributing/contribute-pictograms + - title: Add ons + path: /contributing/add-ons +- title: What's happening + pages: + - title: Changelog and roadmap + path: /whats-happening/changelog-and-roadmap + - title: News and articles + path: /whats-happening/news-and-articles + - title: Events + path: /whats-happening/events + - title: Work in progress + path: /whats-happening/work-in-progress + hasDivider: true - title: Guidelines pages: - title: 2x Grid @@ -140,6 +181,16 @@ path: /patterns/search-pattern - title: Text toolbar path: /patterns/text-toolbar-pattern +- title: Community assets + pages: + - title: Overview + path: /community/overview + - title: Components + path: /community/components + - title: Patterns + path: /community/patterns + - title: Domain guidance + path: /community/domain-guidance - title: Data visualization pages: - title: Get started @@ -160,50 +211,13 @@ path: /data-visualization/legends - title: Dashboards path: /data-visualization/dashboards -- title: Resources - pages: - - path: /resources -- title: How to contribute - pages: - - title: Overview - path: /how-to-contribute/overview - - title: Governance - path: /how-to-contribute/governance - - title: Bugs and requests - path: /how-to-contribute/bugs-and-requests - - title: Documentation - path: /how-to-contribute/documentation - - title: Components - path: /how-to-contribute/component - - title: Icons - path: /how-to-contribute/contribute-icons - - title: Patterns - path: /how-to-contribute/pattern - - title: Pictograms - path: /how-to-contribute/contribute-pictograms - - title: Add ons - path: /how-to-contribute/add-ons -- title: Updates - pages: - - title: Changelog and roadmap - path: /updates/whats-new - - title: Migration guide - path: /updates/migration-guide/overview - - title: Work in progress - path: /updates/work-in-progress - title: Help pages: - - title: Support - path: /help/support - - title: FAQ - path: /help/faq -- title: Community assets - pages: - - title: Overview - path: /community/overview - - title: Components - path: /community/components - - title: Patterns - path: /community/patterns - - title: Domain guidance - path: /community/domain-guidance + - title: FAQs + path: /help/faqs + - title: Certificate of Originality + path: /help/certificate-of-originality + - title: Migration guide + path: /help/migration-guide/overview + - title: Contact us + path: /help/contact-us diff --git a/src/gatsby-theme-carbon/components/Footer.js b/src/gatsby-theme-carbon/components/Footer.js index 5abe94674d5..722bb6d51b6 100644 --- a/src/gatsby-theme-carbon/components/Footer.js +++ b/src/gatsby-theme-carbon/components/Footer.js @@ -35,8 +35,8 @@ const Content = ({ buildTime }) => ( const links = { firstCol: [ { - href: 'https://www.carbondesignsystem.com/how-to-contribute/overview', - linkText: 'Contribute', + href: 'https://www.carbondesignsystem.com/help/contact-us', + linkText: 'Contact us', }, { href: 'https://www.ibm.com/privacy', linkText: 'Privacy' }, { href: 'https://www.ibm.com/legal', linkText: 'Terms of use' }, diff --git a/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js b/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js index 14406bcdde6..c7f1b2bc2c1 100644 --- a/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js +++ b/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js @@ -2,10 +2,6 @@ import React from 'react'; import ResourceLinks from 'gatsby-theme-carbon/src/components/LeftNav/ResourceLinks'; const links = [ - { - title: 'Design kit', - href: '/resources#theme-libraries', - }, { title: 'GitHub', href: 'https://github.com/carbon-design-system/carbon', diff --git a/src/gatsby-theme-carbon/templates/Homepage.js b/src/gatsby-theme-carbon/templates/Homepage.js index d1c4a7c72a0..fc6457a72b3 100644 --- a/src/gatsby-theme-carbon/templates/Homepage.js +++ b/src/gatsby-theme-carbon/templates/Homepage.js @@ -30,7 +30,7 @@ const SecondRightText = () => ( check out our contributing guidelines to get started. Start contributing → @@ -49,7 +49,7 @@ const customProps = { className={styles.callToAction} subTitle="Read" title="Migration guide" - href="/updates/migration-guide/overview" + href="/help/migration-guide/overview" color="dark" actionIcon="arrowRight" /> diff --git a/src/pages/404.js b/src/pages/404.js index 792c744790c..bf1a4242bd4 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -4,8 +4,8 @@ import { FourOhFour } from 'gatsby-theme-carbon'; const links = [ { href: '/get-started/about-carbon', text: 'About Carbon' }, { href: '/components/overview', text: 'Components overview' }, - { href: '/get-started/develop/react', text: 'Get started: develop' }, - { href: '/get-started/design', text: 'Get started: design' }, + { href: '/developing/get-started', text: 'Get started: develop' }, + { href: '/designing/get-started', text: 'Get started: design' }, ]; const Custom404 = () => ; diff --git a/src/pages/all-about-carbon/how-we-work.mdx b/src/pages/all-about-carbon/how-we-work.mdx new file mode 100755 index 00000000000..d1071eed4a7 --- /dev/null +++ b/src/pages/all-about-carbon/how-we-work.mdx @@ -0,0 +1,101 @@ +--- +title: How we work +description: + The Carbon team encourages adoption through guidance and training, community + development, maintenance, and support. +--- + + + +The Carbon team encourages adoption through guidance and training, community +development, maintenance, and support. The system is primarily maintained by a +core team and governed by a board of design advisors. + + + + + Code of conduct + Adoption + Assets + Contact us + + +## Code of conduct + +### The core team's promise + +Carbon is funded and built by IBM. Although that means we build for the +company's business needs, it also means we have a brilliant team of engineers +and designers working full time to make Carbon better. As one of the world's +largest companies, IBM has thousands of people across the globe using and +contributing to Carbon. + +We use what we build, and we've made it open source for anyone to use and +contribute back to. + +### Who is the Code of conduct for? + +The Carbon Design System is built for everybody and if you use or contribute to +Carbon, you are part of this community and we expect you to adhere to our +community standards. + +### Feedback and critique + +Building great products isn't easy, and there's usually more than one right +answer. If you're taking part in any discussion, whether on Slack, Twitter, +Gitter, GitHub, or even in person, please respect one another. Keep the mission +in mind, and help us make Carbon better. + +### Be understanding + +Differing needs and differing perspectives make Carbon comprehensive. Be +welcoming, be understanding, and be kind. If one user expresses frustrations or +complications, there are likely dozens of others who feel the same way. +Encourage community members to speak up. + +## Adoption + +**We conduct training classes and offer certifications.** These cover +introductions to Carbon and participating in this community. Each program is +piloted internally and available upon release externally. We teach at +conferences, bootcamp labs, and wherever else we're needed. + +**We engage the community.** We strive to be one of the world’s best design +systems and we’re always +[open to feedback](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md&title=). +We communicate with you about Carbon's state and roadmap through GitHub support, +blog posts, and Twitter. + +**Contributed components and patterns include a list of maintainers.** The +Carbon team triages and supports maintenance requests that do not have a +maintainer. + +**We provide support for users of the design system.** The Carbon team engages +with users primarily through GitHub. A member of the Carbon team responds to all +issues and pull requests. + +## Assets + +**We maintain a set of Sketch libraries containing Carbon components and +patterns.** There is a funnel of contribution for rigorous Sketch symbols before +they are made available in Sketch libraries. + +**Carbon supports multiple code implementations.** These reflect the +production-level design libraries. The frameworks are listed below with their +primary maintainers: + +- [React](https://github.com/carbon-design-system/carbon): Carbon Core team +- [CSS/Vanilla](https://github.com/carbon-design-system/carbon): Carbon Core + team +- [Angular](https://angular.carbondesignsystem.com/): Community maintained +- [Vue](https://github.com/carbon-design-system/carbon-components-vue): + Community maintained + +**Design patterns are harvested from products built with Carbon.** These become +part of the design system. Teams can use these well-defined patterns in their +work and contribute patterns back to the system. + +## Contact us + +Have questions? Found a bug? Learn where to go and what to do by visiting the +[Contact us page](/help/contact-us). diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx new file mode 100755 index 00000000000..7b1cb769ae2 --- /dev/null +++ b/src/pages/all-about-carbon/what-is-carbon.mdx @@ -0,0 +1,69 @@ +--- +title: What is Carbon? +description: + Carbon is IBM's open source design system for digital products and + experiences. With the IBM Design Language as its foundation, the system + consists of working code, design tools, and more. +--- + + + +Carbon is IBM's open source design system for digital products and experiences. +With the IBM Design Language as its foundation, the system consists of working +code, design tools and resources, human interface guidelines, and a vibrant +community of contributors. + + + + + +Introduction +Guiding principles +How we work + + + +## Introduction + +As IBM's official design system, Carbon serves a wide range of designers and +developers building digital products and experiences. + +Carbon is funded and built by IBM. Although that means we build for the +company's business needs, it also means we have a brilliant team of engineers +and designers working full time to make Carbon better. It is maintained by a +core team of designers, developers, and writers based in the Austin, Texas IBM +Design Studio. + +The goals of the design system include improving UI consistency and quality, +making the design and development process more efficient and focused, +establishing a shared vocabulary between designer and developer, and providing +clear, discoverable guidance around design and development best practices. + +The design system is built [React](/developing/frameworks/react) first. We also +support core parts of the system in +[vanilla JS](/developing/frameworks/vanilla), +[Angular](/developing/frameworks/angular), and +[Vue](/developing/frameworks/vue). If you’re using a different framework, you +can still build components by following our guidelines for +[other frameworks](/developing/frameworks/other-frameworks). + +## Guiding principles + +**Carbon is open.** The design system is a distributed effort, guided by the +principles of the +[open source movement](https://en.wikipedia.org/wiki/Open-source-software_movement). +Carbon's users are also its makers, and everyone is encouraged to contribute. + +**Carbon is inclusive.** It's designed and built to be accessible to all, +regardless of ability or situation. + +**Carbon is modular and flexible.** The system's modularity ensures maximum +flexibility in execution. Its components are designed to work seamlessly with +each other, in whichever combination suits the needs of the user. + +**Carbon puts the user first.** Using rigorous research into users' needs and +desires, Carbon is laser-focused on real people. + +**Carbon builds consistency.** Based on the IBM Design Language, every element +and component of Carbon was designed from the ground up to work elegantly +together to ensure consistent, cohesive user experiences. diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx index bd47c1a340c..9de8e6723a8 100755 --- a/src/pages/components/breadcrumb/usage.mdx +++ b/src/pages/components/breadcrumb/usage.mdx @@ -149,7 +149,7 @@ onto a second line. ### Further guidance For further content guidance, see Carbon's -[content guidelines](/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Behaviors diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 2ecaefe5054..39089447613 100755 --- a/src/pages/components/button/usage.mdx +++ b/src/pages/components/button/usage.mdx @@ -434,10 +434,10 @@ or ghost buttons in layouts with more than three calls to action. Ideally, when using groups of related buttons (not including ghost buttons), they should all be the same width. This can be achieved in one of two ways, both of which are acceptable. The first approach involves using the -[narrow grid mode](/guidelines/2x-grid/code). In this situation each button -would be set individually on the column grid. _Note: Carbon developers are -working on the narrow grid mode, currently left-hanging buttons can only be -achieved with an override._ +[narrow grid mode](/guidelines/2x-grid/implementation#grid-modes). In this +situation each button would be set individually on the column grid. _Note: +Carbon developers are working on the narrow grid mode, currently left-hanging +buttons can only be achieved with an override._ @@ -556,7 +556,7 @@ There are exceptions to this rule for situations in which button length could cause problems in compact UIs or negatively impact translation, but the {verb} + {noun} formula is still best practice. -For consistency, see Carbon’s [content guidelines](guidelines/content/overview) +For consistency, see Carbon’s [content guidelines](/guidelines/content/overview) for a list of recommended action labels. diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx index 33e2d55fbc3..e55a61e73e9 100755 --- a/src/pages/components/checkbox/usage.mdx +++ b/src/pages/components/checkbox/usage.mdx @@ -246,7 +246,7 @@ For more information about spacing for the checkbox component itself, see the ### Further guidance For further content guidance, see Carbon's -[content guidelines](notion://www.notion.so/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Behaviors diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx index 9c923f1e715..480153cca6a 100644 --- a/src/pages/components/code-snippet/usage.mdx +++ b/src/pages/components/code-snippet/usage.mdx @@ -185,7 +185,7 @@ text._ ### Further guidance For further content guidance, see Carbon's -[content guidelines](notion://www.notion.so/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Universal behaviors diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 44dfc2d21ac..d6b617125e5 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -488,7 +488,7 @@ other. [action labels.](/guidelines/content/action-labels) For further content guidance, see Carbon's -[content guidelines](guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Behaviors diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx index 9c11b070cc1..7206297c11d 100755 --- a/src/pages/components/date-picker/usage.mdx +++ b/src/pages/components/date-picker/usage.mdx @@ -519,7 +519,7 @@ a tile. Another common use case not accounted for in the above pickers is setting a time or date relative to today or now, such as with a reminder. For example, setting an install to begin now, in one hour, or tonight. This type of picker can made -by using the standard [select](link) component. +by using the standard [select](/components/select/usage/) component. #### Using individual inputs diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx index 070c38e4679..33a55f83d61 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -324,7 +324,7 @@ browser-based tooltip to show the full string of text. ### Further guidance For further content guidance, see Carbon's -[content guidelines](notion://www.notion.so/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Universal behaviors diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx index 22968aa3afc..446af7b2dbd 100755 --- a/src/pages/components/inline-loading/usage.mdx +++ b/src/pages/components/inline-loading/usage.mdx @@ -8,7 +8,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] -The inline loading component provides visual feedback that data is being processed. +The inline loading component provides visual feedback that data is being +processed. @@ -31,17 +32,21 @@ user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed. -Common actions that benefit from inline loading include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal. +Common actions that benefit from inline loading include any create, update, or +delete actions that may have a lot of data to process. It can be used in a +table, after a primary or secondary button click, or even in a modal. ### When to use -- Use an inline loading component for any action that cannot be performed instantly and will only require a short time to process. +- Use an inline loading component for any action that cannot be performed + instantly and will only require a short time to process. - Use when retrieving or refreshing small data amounts, such as status. ### When not to use - Don't use inline loading for full page loads, use skeleton states instead. -- Don't trigger inline loading on more than one item or action at a time, unless on initial page load or refresh. +- Don't trigger inline loading on more than one item or action at a time, unless + on initial page load or refresh. ## Live demo @@ -82,12 +87,14 @@ Common actions that benefit from inline loading include any create, update, or d -1. **Loading status**: indicates the state of the loading sequence (active, inactive, finished, error). +1. **Loading status**: indicates the state of the loading sequence (active, + inactive, finished, error). 2. **Label**: assistive text that explains the loading status. ### Placement -When inline loading temporarily replaces content, it should appear in the same spot as the content it replaced and maintain the same alignment. +When inline loading temporarily replaces content, it should appear in the same +spot as the content it replaced and maintain the same alignment. @@ -101,23 +108,31 @@ When inline loading temporarily replaces content, it should appear in the same s ### Main elements -Descriptive loading text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations. +Descriptive loading text for the action is optional, but encouraged. If you have +limited room or find adding text to be unnecessary you can just run through the +animations. #### Active loading label -This is the text that appears while the action is happening. The label should tell the user what action is being performed. For example, if it appears while a form is being save then it should say "Saving ...". +This is the text that appears while the action is happening. The label should +tell the user what action is being performed. For example, if it appears while a +form is being save then it should say "Saving ...". #### Finished loading label -Once the action has finished, the label should change to tell the user that the action was completed successfully. For example, when saving a form it would read "Saved" upon completion. +Once the action has finished, the label should change to tell the user that the +action was completed successfully. For example, when saving a form it would read +"Saved" upon completion. #### Error loading label -If the action fails then the label should change to tell the user that an error or failure has occurred. +If the action fails then the label should change to tell the user that an error +or failure has occurred. ### Further guidance -For further content guidance, see Carbon's [content guidelines](<[https://www.carbondesignsystem.com/guidelines/content/general](https://www.carbondesignsystem.com/guidelines/content/general)>). +For further content guidance, see Carbon's +[content guidelines](/guidelines/content/overview). ## Behaviors @@ -135,7 +150,8 @@ There are four states to inline loading: inactive, active, success, and error. #### Inactive -The inactive loading state is when no data is being loaded. Inactive has no visual indicator. +The inactive loading state is when no data is being loaded. Inactive has no +visual indicator. #### Active @@ -143,15 +159,25 @@ The active loading state indicates that the action is still in progress. #### Success -The success loading state indicates that the action completed successfully. The success state is active for 1.5 seconds before calling an optional function `onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely. +The success loading state indicates that the action completed successfully. The +success state is active for 1.5 seconds before calling an optional function +`onSuccess`. Use the `onSuccess` function to refetch new data, close a modal, or +reset a form. If no function is specified the success state will last +indefinitely. #### Error -The error loading state indicates that the action did not successfully complete. If an error occurs, the inline loading component becomes inactive and an inline notification or error handling within the form should appear. +The error loading state indicates that the action did not successfully complete. +If an error occurs, the inline loading component becomes inactive and an inline +notification or error handling within the form should appear. ### Interactions -Any interactive elements associated with the item that is loading should be disabled until the loading is complete. For example, in a file uploader the item that is loading is disabled until fully uploaded. If the inline loading is being used to submit a form, the form fields should be disabled until the loading is complete. +Any interactive elements associated with the item that is loading should be +disabled until the loading is complete. For example, in a file uploader the item +that is loading is disabled until fully uploaded. If the inline loading is being +used to submit a form, the form fields should be disabled until the loading is +complete. @@ -163,7 +189,8 @@ Any interactive elements associated with the item that is loading should be disa ### Modifiers -A loading spinner can be used by itself without a label. It is most commonly used this way inside a field input. +A loading spinner can be used by itself without a label. It is most commonly +used this way inside a field input. diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 2b0d69d6efb..90b32826b8a 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -285,7 +285,7 @@ style, no other body copy may be included. ### Further guidance For further content guidance, see Carbon's -[content guidelines](/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Behaviors @@ -439,10 +439,11 @@ buttons. ### Danger modal Danger modal is a specific type of -[transactional modal](/modal/usage#transactional-modal) used for destructive or -irreversible actions. In danger modal, the primary button is replaced by a -danger button. They are commonly used in high impact moments as a confirmation -for an action that would result in a significant data loss if done accidentally. +[transactional modal](/components/modal/usage#transactional-modal) used for +destructive or irreversible actions. In danger modal, the primary button is +replaced by a danger button. They are commonly used in high impact moments as a +confirmation for an action that would result in a significant data loss if done +accidentally. diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx index 7c89097e671..e312444c036 100755 --- a/src/pages/components/notification/usage.mdx +++ b/src/pages/components/notification/usage.mdx @@ -172,7 +172,7 @@ or a modal. ### Further guidance For further content guidance, see Carbon's -[content guidelines](/guidelines/content/general). +[content guidelines](/guidelines/content/overview). ## Inline notifications diff --git a/src/pages/how-to-contribute/add-ons.mdx b/src/pages/contributing/add-ons.mdx similarity index 96% rename from src/pages/how-to-contribute/add-ons.mdx rename to src/pages/contributing/add-ons.mdx index 35f88c29361..3cbd01edea4 100644 --- a/src/pages/how-to-contribute/add-ons.mdx +++ b/src/pages/contributing/add-ons.mdx @@ -25,8 +25,8 @@ If your team is using Carbon and needs components specific to your product or industry, you should create a Carbon add-on. If you feel that your components and/or patterns could be used in other -products, we encourage you to [contribute](/how-to-contribute/overview) your -work back to Carbon. +products, we encourage you to [contribute](/contributing/overview) your work +back to Carbon. ### Private vs public diff --git a/src/pages/how-to-contribute/bugs-and-requests.mdx b/src/pages/contributing/bugs-and-requests.mdx similarity index 93% rename from src/pages/how-to-contribute/bugs-and-requests.mdx rename to src/pages/contributing/bugs-and-requests.mdx index 2eb735566fd..5ad5e69c997 100644 --- a/src/pages/how-to-contribute/bugs-and-requests.mdx +++ b/src/pages/contributing/bugs-and-requests.mdx @@ -52,7 +52,7 @@ unsure which repo to use, please open an issue in the If you have a specific fix or contribution, start by generating a pull request in the appropriate -[Carbon repo](https://www.carbondesignsystem.com/resources#development-resources). +[Carbon repo](/developing/dev-resources#github-repos). Here are detailed [instructions](https://github.com/carbon-design-system/carbon-website/wiki/Creating-a-PR-through-github.com-UI) for forking the repo and opening a pull request. @@ -66,5 +66,4 @@ appropriate. Read more about our ## Need more help? If you have more questions about issues or requesting a features, there are -multiple ways to reach us at -[Support](https://www.carbondesignsystem.com/help/support). +multiple ways to reach us at [Contact us](/help/contact-us). diff --git a/src/pages/how-to-contribute/component/images/content-switcher-style-1.png b/src/pages/contributing/component/images/content-switcher-style-1.png similarity index 100% rename from src/pages/how-to-contribute/component/images/content-switcher-style-1.png rename to src/pages/contributing/component/images/content-switcher-style-1.png diff --git a/src/pages/how-to-contribute/component/images/contribution-iconography-pictogram.png b/src/pages/contributing/component/images/contribution-iconography-pictogram.png similarity index 100% rename from src/pages/how-to-contribute/component/images/contribution-iconography-pictogram.png rename to src/pages/contributing/component/images/contribution-iconography-pictogram.png diff --git a/src/pages/how-to-contribute/component/images/spec.png b/src/pages/contributing/component/images/spec.png similarity index 100% rename from src/pages/how-to-contribute/component/images/spec.png rename to src/pages/contributing/component/images/spec.png diff --git a/src/pages/how-to-contribute/component/index.mdx b/src/pages/contributing/component/index.mdx similarity index 99% rename from src/pages/how-to-contribute/component/index.mdx rename to src/pages/contributing/component/index.mdx index fae707c91ca..cac1a361e42 100644 --- a/src/pages/how-to-contribute/component/index.mdx +++ b/src/pages/contributing/component/index.mdx @@ -680,15 +680,14 @@ You should include color tokens and type tokens used. #### 3. A Sketch symbol Any new components or changes to existing components will also live in the -[Carbon Sketch kit](/get-started/design#get-the-kit) and so we'll need a Sketch -symbol. Check out +[Carbon Sketch kit](/designing/kits/sketch) and so we'll need a Sketch symbol. +Check out [Sketch's guide](https://www.sketch.com/docs/symbols/creating-symbols/) for creating a symbol. This symbol can be contributed with the asset or enhancement, but must be added -to the kit by one of its -[maintainers](/how-to-contribute/overview/overview#maintainers). To contribute a -symbol, simply open an issue in the +to the kit by one of its maintainers. To contribute a symbol, simply open an +issue in the [kit repo](https://github.com/carbon-design-system/carbon-design-kit/issues). #### 4. Usage documentation diff --git a/src/pages/how-to-contribute/contribute-icons.mdx b/src/pages/contributing/contribute-icons.mdx similarity index 100% rename from src/pages/how-to-contribute/contribute-icons.mdx rename to src/pages/contributing/contribute-icons.mdx diff --git a/src/pages/how-to-contribute/contribute-pictograms.mdx b/src/pages/contributing/contribute-pictograms.mdx similarity index 100% rename from src/pages/how-to-contribute/contribute-pictograms.mdx rename to src/pages/contributing/contribute-pictograms.mdx diff --git a/src/pages/how-to-contribute/documentation.mdx b/src/pages/contributing/documentation.mdx similarity index 100% rename from src/pages/how-to-contribute/documentation.mdx rename to src/pages/contributing/documentation.mdx diff --git a/src/pages/how-to-contribute/overview.mdx b/src/pages/contributing/overview.mdx similarity index 91% rename from src/pages/how-to-contribute/overview.mdx rename to src/pages/contributing/overview.mdx index f1eb4e0f44e..955d5ff9b83 100644 --- a/src/pages/how-to-contribute/overview.mdx +++ b/src/pages/contributing/overview.mdx @@ -20,6 +20,7 @@ Here's how you can contribute too. Working in the open The Carbon community Project workflow +Contributor License Agreement @@ -98,3 +99,10 @@ Carbon Design System projects typically use a [fork and pull request workflow](https://guides.github.com/activities/forking/) for contributions. Specific instructions can be found in each project’s GitHub `CONTRIBUTING.md` file. + +## Contributor License Agreement + +The Carbon core team works for IBM. To accept contributions, we need a signed +Contributor License Agreement (CLA) from you before code contributions can be +reviewed and merged. If you have questions, please don't hesitate +to [reach out](/help/contact-us). diff --git a/src/pages/how-to-contribute/pattern.mdx b/src/pages/contributing/pattern.mdx similarity index 100% rename from src/pages/how-to-contribute/pattern.mdx rename to src/pages/contributing/pattern.mdx diff --git a/src/pages/resources/images/10_3-image.png b/src/pages/designing/design-resources/images/10_3-image.png similarity index 100% rename from src/pages/resources/images/10_3-image.png rename to src/pages/designing/design-resources/images/10_3-image.png diff --git a/src/pages/resources/images/Article_02.png b/src/pages/designing/design-resources/images/Article_02.png similarity index 100% rename from src/pages/resources/images/Article_02.png rename to src/pages/designing/design-resources/images/Article_02.png diff --git a/src/pages/resources/images/Article_03.png b/src/pages/designing/design-resources/images/Article_03.png similarity index 100% rename from src/pages/resources/images/Article_03.png rename to src/pages/designing/design-resources/images/Article_03.png diff --git a/src/pages/resources/images/Article_04.png b/src/pages/designing/design-resources/images/Article_04.png similarity index 100% rename from src/pages/resources/images/Article_04.png rename to src/pages/designing/design-resources/images/Article_04.png diff --git a/src/pages/resources/images/Article_05.png b/src/pages/designing/design-resources/images/Article_05.png similarity index 100% rename from src/pages/resources/images/Article_05.png rename to src/pages/designing/design-resources/images/Article_05.png diff --git a/src/pages/resources/images/Article_06.png b/src/pages/designing/design-resources/images/Article_06.png similarity index 100% rename from src/pages/resources/images/Article_06.png rename to src/pages/designing/design-resources/images/Article_06.png diff --git a/src/pages/resources/images/Aug_preview_rev_2.png b/src/pages/designing/design-resources/images/Aug_preview_rev_2.png similarity index 100% rename from src/pages/resources/images/Aug_preview_rev_2.png rename to src/pages/designing/design-resources/images/Aug_preview_rev_2.png diff --git a/src/pages/resources/images/Carbon_what_to_expect.png b/src/pages/designing/design-resources/images/Carbon_what_to_expect.png similarity index 100% rename from src/pages/resources/images/Carbon_what_to_expect.png rename to src/pages/designing/design-resources/images/Carbon_what_to_expect.png diff --git a/src/pages/resources/images/Featured_01.png b/src/pages/designing/design-resources/images/Featured_01.png similarity index 100% rename from src/pages/resources/images/Featured_01.png rename to src/pages/designing/design-resources/images/Featured_01.png diff --git a/src/pages/resources/images/Featured_02.png b/src/pages/designing/design-resources/images/Featured_02.png similarity index 100% rename from src/pages/resources/images/Featured_02.png rename to src/pages/designing/design-resources/images/Featured_02.png diff --git a/src/pages/resources/images/Featured_03.png b/src/pages/designing/design-resources/images/Featured_03.png similarity index 100% rename from src/pages/resources/images/Featured_03.png rename to src/pages/designing/design-resources/images/Featured_03.png diff --git a/src/pages/resources/images/Featured_04.png b/src/pages/designing/design-resources/images/Featured_04.png similarity index 100% rename from src/pages/resources/images/Featured_04.png rename to src/pages/designing/design-resources/images/Featured_04.png diff --git a/src/pages/resources/images/Featured_05.png b/src/pages/designing/design-resources/images/Featured_05.png similarity index 100% rename from src/pages/resources/images/Featured_05.png rename to src/pages/designing/design-resources/images/Featured_05.png diff --git a/src/pages/resources/images/adobe-xd.png b/src/pages/designing/design-resources/images/adobe-xd.png similarity index 100% rename from src/pages/resources/images/adobe-xd.png rename to src/pages/designing/design-resources/images/adobe-xd.png diff --git a/src/pages/resources/images/ase.png b/src/pages/designing/design-resources/images/ase.png similarity index 100% rename from src/pages/resources/images/ase.png rename to src/pages/designing/design-resources/images/ase.png diff --git a/src/pages/resources/images/because-colors.png b/src/pages/designing/design-resources/images/because-colors.png similarity index 100% rename from src/pages/resources/images/because-colors.png rename to src/pages/designing/design-resources/images/because-colors.png diff --git a/src/pages/resources/images/bee_70.png b/src/pages/designing/design-resources/images/bee_70.png similarity index 100% rename from src/pages/resources/images/bee_70.png rename to src/pages/designing/design-resources/images/bee_70.png diff --git a/src/pages/resources/images/carbon-devtools.png b/src/pages/designing/design-resources/images/carbon-devtools.png similarity index 100% rename from src/pages/resources/images/carbon-devtools.png rename to src/pages/designing/design-resources/images/carbon-devtools.png diff --git a/src/pages/resources/images/carbon_themes.png b/src/pages/designing/design-resources/images/carbon_themes.png similarity index 100% rename from src/pages/resources/images/carbon_themes.png rename to src/pages/designing/design-resources/images/carbon_themes.png diff --git a/src/pages/resources/images/code_palette.png b/src/pages/designing/design-resources/images/code_palette.png similarity index 100% rename from src/pages/resources/images/code_palette.png rename to src/pages/designing/design-resources/images/code_palette.png diff --git a/src/pages/resources/images/codepen-icon.png b/src/pages/designing/design-resources/images/codepen-icon.png similarity index 100% rename from src/pages/resources/images/codepen-icon.png rename to src/pages/designing/design-resources/images/codepen-icon.png diff --git a/src/pages/resources/images/color-contrast-icon.png b/src/pages/designing/design-resources/images/color-contrast-icon.png similarity index 100% rename from src/pages/resources/images/color-contrast-icon.png rename to src/pages/designing/design-resources/images/color-contrast-icon.png diff --git a/src/pages/resources/images/designing_with_carbon.png b/src/pages/designing/design-resources/images/designing_with_carbon.png similarity index 100% rename from src/pages/resources/images/designing_with_carbon.png rename to src/pages/designing/design-resources/images/designing_with_carbon.png diff --git a/src/pages/resources/images/github-icon-inverted.png b/src/pages/designing/design-resources/images/github-icon-inverted.png similarity index 100% rename from src/pages/resources/images/github-icon-inverted.png rename to src/pages/designing/design-resources/images/github-icon-inverted.png diff --git a/src/pages/resources/images/hacktoberfest.png b/src/pages/designing/design-resources/images/hacktoberfest.png similarity index 100% rename from src/pages/resources/images/hacktoberfest.png rename to src/pages/designing/design-resources/images/hacktoberfest.png diff --git a/src/pages/resources/images/homepage_01.png b/src/pages/designing/design-resources/images/homepage_01.png similarity index 100% rename from src/pages/resources/images/homepage_01.png rename to src/pages/designing/design-resources/images/homepage_01.png diff --git a/src/pages/resources/images/homepage_02.png b/src/pages/designing/design-resources/images/homepage_02.png similarity index 100% rename from src/pages/resources/images/homepage_02.png rename to src/pages/designing/design-resources/images/homepage_02.png diff --git a/src/pages/resources/images/june_option_3.png b/src/pages/designing/design-resources/images/june_option_3.png similarity index 100% rename from src/pages/resources/images/june_option_3.png rename to src/pages/designing/design-resources/images/june_option_3.png diff --git a/src/pages/resources/images/minimal_css.png b/src/pages/designing/design-resources/images/minimal_css.png similarity index 100% rename from src/pages/resources/images/minimal_css.png rename to src/pages/designing/design-resources/images/minimal_css.png diff --git a/src/pages/resources/images/mono_repo_teal.png b/src/pages/designing/design-resources/images/mono_repo_teal.png similarity index 100% rename from src/pages/resources/images/mono_repo_teal.png rename to src/pages/designing/design-resources/images/mono_repo_teal.png diff --git a/src/pages/resources/images/october_release.png b/src/pages/designing/design-resources/images/october_release.png similarity index 100% rename from src/pages/resources/images/october_release.png rename to src/pages/designing/design-resources/images/october_release.png diff --git a/src/pages/resources/images/patterns_announcement.png b/src/pages/designing/design-resources/images/patterns_announcement.png similarity index 100% rename from src/pages/resources/images/patterns_announcement.png rename to src/pages/designing/design-resources/images/patterns_announcement.png diff --git a/src/pages/resources/images/preview_carbon.png b/src/pages/designing/design-resources/images/preview_carbon.png similarity index 100% rename from src/pages/resources/images/preview_carbon.png rename to src/pages/designing/design-resources/images/preview_carbon.png diff --git a/src/pages/resources/images/security_pic.png b/src/pages/designing/design-resources/images/security_pic.png similarity index 100% rename from src/pages/resources/images/security_pic.png rename to src/pages/designing/design-resources/images/security_pic.png diff --git a/src/pages/resources/images/v10.7-release.png b/src/pages/designing/design-resources/images/v10.7-release.png similarity index 100% rename from src/pages/resources/images/v10.7-release.png rename to src/pages/designing/design-resources/images/v10.7-release.png diff --git a/src/pages/resources/images/writing-is-designing.png b/src/pages/designing/design-resources/images/writing-is-designing.png similarity index 100% rename from src/pages/resources/images/writing-is-designing.png rename to src/pages/designing/design-resources/images/writing-is-designing.png diff --git a/src/pages/resources/images/xd_kit_img.png b/src/pages/designing/design-resources/images/xd_kit_img.png similarity index 100% rename from src/pages/resources/images/xd_kit_img.png rename to src/pages/designing/design-resources/images/xd_kit_img.png diff --git a/src/pages/designing/design-resources/index.mdx b/src/pages/designing/design-resources/index.mdx new file mode 100755 index 00000000000..ec7789a7e59 --- /dev/null +++ b/src/pages/designing/design-resources/index.mdx @@ -0,0 +1,141 @@ +--- +title: Other resources +description: + Everything you need to learn about and work with Carbon, including Sketch + libraries and templates, color palettes, fonts, GitHub repos, and design + tools. +--- + + + +Everything you need to learn about and work with Carbon, Sketch libraries and +templates, color palettes, GitHub repos, and design tools. + + + + + Introduction + Color, grid, and icons + Fonts + GitHub repos + + +## Introduction + +Carbon expresses the [IBM Design Language](https://www.ibm.com/design/language/) +and delivers it through tools for designers and developers including guidance, +tooling, components, and support. Take the time to read the design language site +so that you fully understand what drives IBM's design philosophy and principles, +and can make informed decisions in your product design work. + +To use the Sketch libraries you'll find here, you need the **most recent +version** of [Sketch](https://www.sketch.com/) installed. If you’re new to the +design kit, visit the [Design kits](/designing/kits/sketch) page. + +For data visualization resources, go to the +[Data visualization](/data-visualization/getting-started) section of the site. + +## Color, grid, and icons + + + + + +![](/images/ase.png) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +![](images/color-contrast-icon.png) + + + + + +## Fonts + +Carbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) – +carefully designed to meet IBM's needs as a global technology company and +reflect IBM's spirit, beliefs, and design principles. + +## GitHub repos + + + + + + + + + + + + + + + + + + +
diff --git a/src/pages/designing/get-started.mdx b/src/pages/designing/get-started.mdx new file mode 100644 index 00000000000..84311898018 --- /dev/null +++ b/src/pages/designing/get-started.mdx @@ -0,0 +1,100 @@ +--- +title: Get started +description: +--- + + + +Welcome to Carbon! If you're just starting out designing with Carbon, you're in +the right place. Here's a checklist of everything you need to get up and +running. + + + + + +First steps +Additional guidance +Connect with us + + + +## First steps + +### Install your design kit + +Our primary design kit is [Sketch](/designing/kits/sketch) and we also +[Adobe XD](/designing/kits/adobe-xd) and [Axure](/designing/kits/axure) kits +available. Head on over to the Design kits section and follow the install +instructions to get set up. + +These kits come with Carbon components so you don't have to build them. By using +the kits you automatically get any updates made by the Carbon team so you don't +need to go back and change any designs to match the latest release. And when +handing off to your developers there won't be confusion about the component and +its behaviors. + +### Check out other tools and resources + +In [Other resources](/designing/design-resources), you'll find links to the IBM +Design Language and icon libraries, color palettes, grid and shell templates, +the IBM Plex font, and the Github repos. + +## Additional guidance + +### Understand the IBM Design Language + +Carbon expresses the [IBM Design Language](https://www.ibm.com/design/language/) +in product and delivers it through tools for designers and developers including +guidance, tooling, components, and support. Take the time to read the design +language site so that you fully understand what drives IBM’s design philosophy +and principles, and can make informed decisions in your product work. + +### Review our detailed usage guidance + +Our usage guidance is detailed and thorough, and you'll learn a lot about the +system by reading through the components and patterns documentation. + +- [Components](/components/overview): Carbon provides in-depth design usage and + style guidance for all components. It's important to be familiar with this + additional UX and visual guidance when you are designing with our components. + +- [Patterns](/patterns/overview): We also offer a range of key patterns—best + practice solutions for how a user achieves a goal. These design patterns have + been harvested from products built with Carbon, and have been reviewed and + approved for use by the Carbon governance team. + +## Connect with us + +### Join us and the Carbon community + +_For IBMers only:_ If you have a question about any aspect of the kits or tools, +you can reach out to us on Slack and use that as a way to connect with your +fellow designers. Chances are someone has had a similar problem to you and will +jump in to help you out. + +- [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) +- [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD) +- [#carbon-elements](https://ibm-studios.slack.com/archives/CDHHNNZQR) +- [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H) + +And be sure to sign up for the latest Carbon news at +[#carbon-announcements](https://ibm-studios.slack.com/archives/CJ35H36MP). + +### Learn about what we're doing + +To read about Carbon's latest changes and future plans, check out +[What's happening](/whats-happening/changelog-and-roadmap). + +If you have questions, here are all the ways to [contact us](/help/contact-us). + +### Join us at an event + +Attend one of our [events](/whats-happening/events) to connect with us and level +up your skills. The weekly design playback is great for getting feedback on work +in progress from a group of designers and design leaders dedicated to your +success. + +We will be adding more Events moving forward, but if there's something in +particular you're interested in, we'd love to +[hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose). diff --git a/src/pages/get-started/design/adobe-xd.mdx b/src/pages/designing/kits/adobe-xd.mdx similarity index 96% rename from src/pages/get-started/design/adobe-xd.mdx rename to src/pages/designing/kits/adobe-xd.mdx index a74f9ff3d2b..422b609c037 100755 --- a/src/pages/get-started/design/adobe-xd.mdx +++ b/src/pages/designing/kits/adobe-xd.mdx @@ -1,5 +1,5 @@ --- -title: Design +title: Design kits description: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started. @@ -66,7 +66,7 @@ If you’re brand new to Adobe XD, they offer some great Enhancements to the kit will be rolling out in the future. When a new version of the library is available, you will need to download the new file to replace the old one. Releases will be posted to the -[GitHub repo](https://github.com/IBM/design-kit) +[GitHub repo](https://github.com/IBM/design-kit). ### Help diff --git a/src/pages/get-started/design/axure.mdx b/src/pages/designing/kits/axure.mdx similarity index 99% rename from src/pages/get-started/design/axure.mdx rename to src/pages/designing/kits/axure.mdx index 2f9483e9e4d..e0ddadac8d6 100755 --- a/src/pages/get-started/design/axure.mdx +++ b/src/pages/designing/kits/axure.mdx @@ -1,5 +1,5 @@ --- -title: Design +title: Design kits description: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started. diff --git a/src/pages/get-started/design/images/Carbon-kit-library.png b/src/pages/designing/kits/images/Carbon-kit-library.png similarity index 100% rename from src/pages/get-started/design/images/Carbon-kit-library.png rename to src/pages/designing/kits/images/Carbon-kit-library.png diff --git a/src/pages/get-started/design/images/adobe-xd.png b/src/pages/designing/kits/images/adobe-xd.png similarity index 100% rename from src/pages/get-started/design/images/adobe-xd.png rename to src/pages/designing/kits/images/adobe-xd.png diff --git a/src/pages/get-started/design/images/axure-icon.png b/src/pages/designing/kits/images/axure-icon.png similarity index 100% rename from src/pages/get-started/design/images/axure-icon.png rename to src/pages/designing/kits/images/axure-icon.png diff --git a/src/pages/get-started/design/images/axure-updates.png b/src/pages/designing/kits/images/axure-updates.png similarity index 100% rename from src/pages/get-started/design/images/axure-updates.png rename to src/pages/designing/kits/images/axure-updates.png diff --git a/src/pages/get-started/design/images/carbon-kit.png b/src/pages/designing/kits/images/carbon-kit.png similarity index 100% rename from src/pages/get-started/design/images/carbon-kit.png rename to src/pages/designing/kits/images/carbon-kit.png diff --git a/src/pages/get-started/design/images/grid-1.png b/src/pages/designing/kits/images/grid-1.png similarity index 100% rename from src/pages/get-started/design/images/grid-1.png rename to src/pages/designing/kits/images/grid-1.png diff --git a/src/pages/get-started/design/images/grid-2.gif b/src/pages/designing/kits/images/grid-2.gif similarity index 100% rename from src/pages/get-started/design/images/grid-2.gif rename to src/pages/designing/kits/images/grid-2.gif diff --git a/src/pages/get-started/design/images/ibm-carbon.png b/src/pages/designing/kits/images/ibm-carbon.png similarity index 100% rename from src/pages/get-started/design/images/ibm-carbon.png rename to src/pages/designing/kits/images/ibm-carbon.png diff --git a/src/pages/get-started/design/images/kit-1.png b/src/pages/designing/kits/images/kit-1.png similarity index 100% rename from src/pages/get-started/design/images/kit-1.png rename to src/pages/designing/kits/images/kit-1.png diff --git a/src/pages/get-started/design/images/kit-2.png b/src/pages/designing/kits/images/kit-2.png similarity index 100% rename from src/pages/get-started/design/images/kit-2.png rename to src/pages/designing/kits/images/kit-2.png diff --git a/src/pages/get-started/design/images/kit-3.png b/src/pages/designing/kits/images/kit-3.png similarity index 100% rename from src/pages/get-started/design/images/kit-3.png rename to src/pages/designing/kits/images/kit-3.png diff --git a/src/pages/get-started/design/images/kit-4.png b/src/pages/designing/kits/images/kit-4.png similarity index 100% rename from src/pages/get-started/design/images/kit-4.png rename to src/pages/designing/kits/images/kit-4.png diff --git a/src/pages/get-started/design/images/layer-style-1.png b/src/pages/designing/kits/images/layer-style-1.png similarity index 100% rename from src/pages/get-started/design/images/layer-style-1.png rename to src/pages/designing/kits/images/layer-style-1.png diff --git a/src/pages/get-started/design/images/symbol-nav.png b/src/pages/designing/kits/images/symbol-nav.png similarity index 100% rename from src/pages/get-started/design/images/symbol-nav.png rename to src/pages/designing/kits/images/symbol-nav.png diff --git a/src/pages/get-started/design/images/template-1.png b/src/pages/designing/kits/images/template-1.png similarity index 100% rename from src/pages/get-started/design/images/template-1.png rename to src/pages/designing/kits/images/template-1.png diff --git a/src/pages/get-started/design/images/template-2.png b/src/pages/designing/kits/images/template-2.png similarity index 100% rename from src/pages/get-started/design/images/template-2.png rename to src/pages/designing/kits/images/template-2.png diff --git a/src/pages/get-started/design/images/template-3.png b/src/pages/designing/kits/images/template-3.png similarity index 100% rename from src/pages/get-started/design/images/template-3.png rename to src/pages/designing/kits/images/template-3.png diff --git a/src/pages/get-started/design/images/text-styles-1.png b/src/pages/designing/kits/images/text-styles-1.png similarity index 100% rename from src/pages/get-started/design/images/text-styles-1.png rename to src/pages/designing/kits/images/text-styles-1.png diff --git a/src/pages/get-started/design/images/text-styles-2.png b/src/pages/designing/kits/images/text-styles-2.png similarity index 100% rename from src/pages/get-started/design/images/text-styles-2.png rename to src/pages/designing/kits/images/text-styles-2.png diff --git a/src/pages/get-started/design/sketch.mdx b/src/pages/designing/kits/sketch.mdx similarity index 97% rename from src/pages/get-started/design/sketch.mdx rename to src/pages/designing/kits/sketch.mdx index ae547401234..288e08554a4 100755 --- a/src/pages/get-started/design/sketch.mdx +++ b/src/pages/designing/kits/sketch.mdx @@ -1,5 +1,5 @@ --- -title: Design +title: Design kits description: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started. @@ -27,7 +27,7 @@ resources you need to get started. #### 1. **Install Sketch**. To design with Carbon you must have the **most recent version** of -[Sketch](https://www.sketchapp.com/) installed. +[Sketch](https://www.sketch.com/) installed. #### 2. **Choose a theme**. @@ -244,8 +244,8 @@ detaching the symbol to change default styles. Carbon text styles in Sketch are organized similarly to symbols. -- The first text style level displays [theme options](/guidelines/themes) (i.e., - white theme). +- The first text style level displays + [theme options](/guidelines/themes/overview) (i.e., white theme). - The second level shows the [Carbon type](/guidelines/typography/overview) tokens (i.e., body-long-01). - The third level selects the type color, which is labeled with a @@ -286,7 +286,7 @@ previous version. ### Migration If you're using an older version of Carbon, check out the v10 -[migration docs](/updates/v10-migration/designers) when you're ready to make the +[migration docs](/help/migration-guide/design/) when you're ready to make the switch. ### Support diff --git a/src/pages/tutorial/angular/images/carbon-badge.png b/src/pages/developing/angular-tutorial/images/carbon-badge.png similarity index 100% rename from src/pages/tutorial/angular/images/carbon-badge.png rename to src/pages/developing/angular-tutorial/images/carbon-badge.png diff --git a/src/pages/tutorial/angular/overview.mdx b/src/pages/developing/angular-tutorial/overview.mdx similarity index 87% rename from src/pages/tutorial/angular/overview.mdx rename to src/pages/developing/angular-tutorial/overview.mdx index b6ef044f6b7..e253636333b 100644 --- a/src/pages/tutorial/angular/overview.mdx +++ b/src/pages/developing/angular-tutorial/overview.mdx @@ -46,8 +46,8 @@ you will build: This tutorial is intended for people with all amounts of web development experience. If you want to jump straight to code, you may want to skip this -tutorial and go to the -[developers getting started](/get-started/develop/angular) page. +tutorial and go to the [developers getting started](/developing/get-started) +page. ## Prerequisites @@ -84,13 +84,13 @@ Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there. -1. [**Installing Carbon**](/tutorial/angular/step-1) +1. [**Installing Carbon**](/developing/angular-tutorial/step-1) - Create a web app with the UI shell component. -1. [**Building pages**](/tutorial/angular/step-2) +1. [**Building pages**](/developing/angular-tutorial/step-2) - Build out pages with the grid and various components. -1. [**Using APIs**](/tutorial/angular/step-3) +1. [**Using APIs**](/developing/angular-tutorial/step-3) - Populate the data table with an external data source. -1. [**Creating components**](/tutorial/angular/step-4) +1. [**Creating components**](/developing/angular-tutorial/step-4) - Extend Carbon by creating your own components. -1. [**Deploying to IBM Cloud**](/tutorial/angular/step-5) +1. [**Deploying to IBM Cloud**](/developing/angular-tutorial/step-5) - Build and host your app in a production environment. diff --git a/src/pages/tutorial/angular/step-1.mdx b/src/pages/developing/angular-tutorial/step-1.mdx similarity index 100% rename from src/pages/tutorial/angular/step-1.mdx rename to src/pages/developing/angular-tutorial/step-1.mdx diff --git a/src/pages/tutorial/angular/step-2.mdx b/src/pages/developing/angular-tutorial/step-2.mdx similarity index 98% rename from src/pages/tutorial/angular/step-2.mdx rename to src/pages/developing/angular-tutorial/step-2.mdx index 58343df08bf..18fc8cfed22 100644 --- a/src/pages/tutorial/angular/step-2.mdx +++ b/src/pages/developing/angular-tutorial/step-2.mdx @@ -56,7 +56,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/angular/step-1#fork-clone--branch). +[step 1 instructions](/developing/angular-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -92,7 +92,7 @@ npm start ``` You should see something similar to where the -[previous step](/tutorial/angular/step-1)) left off. +[previous step](/developing/angular-tutorial/step-1) left off. ## Add grid @@ -446,8 +446,7 @@ for now. We've added basic layout styles in `landing-page.component.scss` and `styles.scss`, so now let's add type, color and spacing styles to match the -design. We'll be using our -[spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing). In +design. We'll be using our [spacing tokens](/guidelines/spacing/overview). In `landing-page.component.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions: @@ -487,7 +486,7 @@ that, add: ``` Referencing the -[spacing token table](https://www.carbondesignsystem.com/guidelines/spacing#spacing-scale), +[spacing token table](/guidelines/spacing/overview#spacing-scale), `16px` can be set with the `$spacing-05` token. The design calls for `128px` of space below the heading and that's not in the spacing scale, we can achieve that in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem` @@ -854,8 +853,8 @@ npm run lint && npm test **Note:** Having issues running this? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -876,8 +875,8 @@ git push origin angular-step-2 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/angular/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/angular-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/angular/step-3.mdx b/src/pages/developing/angular-tutorial/step-3.mdx similarity index 97% rename from src/pages/tutorial/angular/step-3.mdx rename to src/pages/developing/angular-tutorial/step-3.mdx index 15a585a7528..21720da7b9d 100644 --- a/src/pages/tutorial/angular/step-3.mdx +++ b/src/pages/developing/angular-tutorial/step-3.mdx @@ -67,7 +67,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/angular/step-1#fork-clone--branch). +[step 1 instructions](/developing/angular-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -94,8 +94,8 @@ npm start ``` You should see something similar to where the -[previous step](/tutorial/angular/step-2) left off. Stop your app with `CTRL-C` -and let's get everything installed. +[previous step](/developing/angular-tutorial/step-2) left off. Stop your app +with `CTRL-C` and let's get everything installed. ## Install dependencies @@ -554,8 +554,8 @@ npm run lint && npm test **Note:** Having issues running the CI check? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -576,8 +576,8 @@ git push origin angular-step-3 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/angular/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/angular-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/angular/step-4.mdx b/src/pages/developing/angular-tutorial/step-4.mdx similarity index 98% rename from src/pages/tutorial/angular/step-4.mdx rename to src/pages/developing/angular-tutorial/step-4.mdx index 9fcc8475746..7db520f1409 100644 --- a/src/pages/tutorial/angular/step-4.mdx +++ b/src/pages/developing/angular-tutorial/step-4.mdx @@ -62,7 +62,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/angular/step-1#fork-clone--branch). +[step 1 instructions](/developing/angular-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -98,7 +98,7 @@ npm start ``` You should see something similar to where the -[previous step](/tutorial/angular/step-3) left off. +[previous step](/developing/angular-tutorial/step-3) left off. ## Review design @@ -695,8 +695,8 @@ git push origin angular-step-4 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/angular/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/angular-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/angular/step-5.mdx b/src/pages/developing/angular-tutorial/step-5.mdx similarity index 97% rename from src/pages/tutorial/angular/step-5.mdx rename to src/pages/developing/angular-tutorial/step-5.mdx index 2948508715c..cc3c8739b32 100644 --- a/src/pages/tutorial/angular/step-5.mdx +++ b/src/pages/developing/angular-tutorial/step-5.mdx @@ -47,7 +47,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/angular/step-1#fork-clone--branch). +[step 1 instructions](/developing/angular-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -83,7 +83,7 @@ npm start ``` You should see something similar to where the -[previous step](/tutorial/angular/step-4) left off. +[previous step](/developing/angular-tutorial/step-4) left off. ## Create IBM Cloud account @@ -284,8 +284,8 @@ git push origin angular-step-5 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/angular/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/angular-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/angular/wrapping-up.mdx b/src/pages/developing/angular-tutorial/wrapping-up.mdx similarity index 90% rename from src/pages/tutorial/angular/wrapping-up.mdx rename to src/pages/developing/angular-tutorial/wrapping-up.mdx index 9f35503236e..aa705d8fac7 100644 --- a/src/pages/tutorial/angular/wrapping-up.mdx +++ b/src/pages/developing/angular-tutorial/wrapping-up.mdx @@ -35,11 +35,11 @@ This badge demonstrates knowledge about Carbon's Angular components. To earn the badge: 1. Complete steps 1 through 5 of the Angular Carbon tutorial - - Step 1. [Installing Carbon](/tutorial/angular/step-1) - - Step 2. [Building pages](/tutorial/angular/step-2) - - Step 3. [Using APIs](/tutorial/angular/step-3) - - Step 4. [Creating components](/tutorial/angular/step-4) - - Step 5. [Deploying to IBM Cloud](/tutorial/angular/step-5) + - Step 1. [Installing Carbon](/developing/angular-tutorial/step-1) + - Step 2. [Building pages](/developing/angular-tutorial/step-2) + - Step 3. [Using APIs](/developing/angular-tutorial/step-3) + - Step 4. [Creating components](/developing/angular-tutorial/step-4) + - Step 5. [Deploying to IBM Cloud](/developing/angular-tutorial/step-5) 2. Submit links to approved pull requests for steps 1 through 5 of the Angular Carbon tutorial in the [carbon-tutorial-angular repository](https://github.com/carbon-design-system/carbon-tutorial-angular). diff --git a/src/pages/developing/dev-resources/images/carbon-devtools.png b/src/pages/developing/dev-resources/images/carbon-devtools.png new file mode 100644 index 00000000000..64c088df3dc Binary files /dev/null and b/src/pages/developing/dev-resources/images/carbon-devtools.png differ diff --git a/src/pages/developing/dev-resources/images/codepen-icon.png b/src/pages/developing/dev-resources/images/codepen-icon.png new file mode 100644 index 00000000000..a9d165c34d8 Binary files /dev/null and b/src/pages/developing/dev-resources/images/codepen-icon.png differ diff --git a/src/pages/developing/dev-resources/images/color-contrast-icon.png b/src/pages/developing/dev-resources/images/color-contrast-icon.png new file mode 100644 index 00000000000..4fafd5cf710 Binary files /dev/null and b/src/pages/developing/dev-resources/images/color-contrast-icon.png differ diff --git a/src/pages/developing/dev-resources/index.mdx b/src/pages/developing/dev-resources/index.mdx new file mode 100644 index 00000000000..2f8634e374d --- /dev/null +++ b/src/pages/developing/dev-resources/index.mdx @@ -0,0 +1,148 @@ +--- +title: Developer resources +description: + Here you'll find Carbon tools, as well as our GitHub repos and Storybooks for + your framework of choice. +--- + + + +Here you'll find Carbon tools, as well as our GitHub repos and Storybooks for +your framework of choice. + + + +### GitHub repos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +### Storybooks + + + + + + + + + + + + + + + + + + + + + + + + + +### Tools + + + + + + + + + + + + + +![](/images/carbon-devtools.png) + + + + + + + +![](/images/color-contrast-icon.png) + + + + + diff --git a/src/pages/get-started/develop/angular.mdx b/src/pages/developing/frameworks/angular.mdx similarity index 99% rename from src/pages/get-started/develop/angular.mdx rename to src/pages/developing/frameworks/angular.mdx index 7251b9d2093..56cdfcf0b94 100644 --- a/src/pages/get-started/develop/angular.mdx +++ b/src/pages/developing/frameworks/angular.mdx @@ -1,5 +1,5 @@ --- -title: Develop +title: Frameworks description: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue. diff --git a/src/pages/get-started/develop/images/carbon-angular-starter.png b/src/pages/developing/frameworks/images/carbon-angular-starter.png similarity index 100% rename from src/pages/get-started/develop/images/carbon-angular-starter.png rename to src/pages/developing/frameworks/images/carbon-angular-starter.png diff --git a/src/pages/get-started/develop/images/codesandbox.png b/src/pages/developing/frameworks/images/codesandbox.png similarity index 100% rename from src/pages/get-started/develop/images/codesandbox.png rename to src/pages/developing/frameworks/images/codesandbox.png diff --git a/src/pages/get-started/develop/images/storybook.svg b/src/pages/developing/frameworks/images/storybook.svg similarity index 100% rename from src/pages/get-started/develop/images/storybook.svg rename to src/pages/developing/frameworks/images/storybook.svg diff --git a/src/pages/get-started/develop/other-frameworks.mdx b/src/pages/developing/frameworks/other-frameworks.mdx similarity index 99% rename from src/pages/get-started/develop/other-frameworks.mdx rename to src/pages/developing/frameworks/other-frameworks.mdx index d83f73838ef..7aa237686ab 100755 --- a/src/pages/get-started/develop/other-frameworks.mdx +++ b/src/pages/developing/frameworks/other-frameworks.mdx @@ -1,5 +1,5 @@ --- -title: Develop +title: Frameworks description: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue. diff --git a/src/pages/get-started/develop/react.mdx b/src/pages/developing/frameworks/react.mdx similarity index 96% rename from src/pages/get-started/develop/react.mdx rename to src/pages/developing/frameworks/react.mdx index 7110e470ad4..36eb0957c4a 100755 --- a/src/pages/get-started/develop/react.mdx +++ b/src/pages/developing/frameworks/react.mdx @@ -1,5 +1,5 @@ --- -title: Develop +title: Frameworks description: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue. @@ -29,8 +29,8 @@ and production work. ![Storybook icon](images/storybook.svg) diff --git a/src/pages/get-started/develop/vanilla.mdx b/src/pages/developing/frameworks/vanilla.mdx similarity index 99% rename from src/pages/get-started/develop/vanilla.mdx rename to src/pages/developing/frameworks/vanilla.mdx index 1070e27d8fd..57f687fc3fb 100755 --- a/src/pages/get-started/develop/vanilla.mdx +++ b/src/pages/developing/frameworks/vanilla.mdx @@ -1,5 +1,5 @@ --- -title: Develop +title: Frameworks description: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue. diff --git a/src/pages/get-started/develop/vue.mdx b/src/pages/developing/frameworks/vue.mdx similarity index 99% rename from src/pages/get-started/develop/vue.mdx rename to src/pages/developing/frameworks/vue.mdx index 26ad29d0ef0..6b61b5ee60f 100644 --- a/src/pages/get-started/develop/vue.mdx +++ b/src/pages/developing/frameworks/vue.mdx @@ -1,5 +1,5 @@ --- -title: Develop +title: Frameworks description: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue. diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx new file mode 100644 index 00000000000..3c68aff239c --- /dev/null +++ b/src/pages/developing/get-started.mdx @@ -0,0 +1,116 @@ +--- +title: Get started +description: + Get started developing with the Carbon Design System. We also support the + system in React, vanilla JS, Angular, and Vue. +--- + + + + + +Welcome to Carbon! Get started developing in the Carbon Design System. The +Carbon Design System is built React first. We also support core parts of the +system in vanilla JS, Angular, and Vue and offer guidelines for other +frameworks. + + + + + +Get started +Tutorial +Developer resources + + + +## Get started + + + + + + + + + + + + + + + + + + + + + + + + + + + + +## Tutorial + +We offer tutorials to help guide you in creating an app with the Carbon Design +System. We’ll teach you the ins and outs of using Carbon components, while +introducing web development best practices along the way. + + + + + + + + + + + + + + + + + + + + + + + + + +## Developer Resources + +Here you’ll find Carbon tools, as well as our GitHub repos and Storybooks for +your framework of choice. + + + + + + diff --git a/src/pages/tutorial/react/images/carbon-badge.png b/src/pages/developing/react-tutorial/images/carbon-badge.png similarity index 100% rename from src/pages/tutorial/react/images/carbon-badge.png rename to src/pages/developing/react-tutorial/images/carbon-badge.png diff --git a/src/pages/tutorial/react/overview.mdx b/src/pages/developing/react-tutorial/overview.mdx similarity index 88% rename from src/pages/tutorial/react/overview.mdx rename to src/pages/developing/react-tutorial/overview.mdx index 85676aaee6d..914f694f83a 100644 --- a/src/pages/tutorial/react/overview.mdx +++ b/src/pages/developing/react-tutorial/overview.mdx @@ -41,7 +41,7 @@ you will build: This tutorial is intended for people with all amounts of web development experience. If you want to jump straight to code, you may want to skip this -tutorial and go to the [developers getting started](/get-started/develop/react) +tutorial and go to the [developers getting started](/developing/get-started) page. ## Prerequisites @@ -82,13 +82,13 @@ Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there. -1. [**Installing Carbon**](/tutorial/react/step-1) +1. [**Installing Carbon**](/developing/react-tutorial/step-1) - Create a web app with the UI shell component. -2. [**Building pages**](/tutorial/react/step-2) +2. [**Building pages**](/developing/react-tutorial/step-2) - Build out pages with the grid and various components. -3. [**Using APIs**](/tutorial/react/step-3) +3. [**Using APIs**](/developing/react-tutorial/step-3) - Populate the data table with an external data source. -4. [**Creating components**](/tutorial/react/step-4) +4. [**Creating components**](/developing/react-tutorial/step-4) - Extend Carbon by creating your own components. -5. [**Deploying to IBM Cloud**](/tutorial/react/step-5) +5. [**Deploying to IBM Cloud**](/developing/react-tutorial/step-5) - Build and host your app in a production environment. diff --git a/src/pages/tutorial/react/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx similarity index 100% rename from src/pages/tutorial/react/step-1.mdx rename to src/pages/developing/react-tutorial/step-1.mdx diff --git a/src/pages/tutorial/react/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx similarity index 98% rename from src/pages/tutorial/react/step-2.mdx rename to src/pages/developing/react-tutorial/step-2.mdx index 585e89d07eb..fe48c65fdce 100644 --- a/src/pages/tutorial/react/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -53,7 +53,7 @@ This tutorial has an accompanying GitHub repository called we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/react/step-1#fork-clone--branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -89,7 +89,7 @@ yarn start ``` You should see something similar to where the -[previous step](/tutorial/react/step-1) left off. +[previous step](/developing/react-tutorial/step-1) left off. ### IE11 polyfills @@ -881,8 +881,8 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -903,8 +903,8 @@ git push origin react-step-2 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/react/step-3.mdx b/src/pages/developing/react-tutorial/step-3.mdx similarity index 98% rename from src/pages/tutorial/react/step-3.mdx rename to src/pages/developing/react-tutorial/step-3.mdx index 979f10bf710..6350cfca484 100644 --- a/src/pages/tutorial/react/step-3.mdx +++ b/src/pages/developing/react-tutorial/step-3.mdx @@ -63,7 +63,7 @@ This tutorial has an accompanying GitHub repository called we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/react/step-1#fork-clone--branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -90,8 +90,8 @@ yarn start ``` You should see something similar to where the -[previous step](/tutorial/react/step-2) left off. Stop your app with `CTRL-C` -and let's get everything installed. +[previous step](/developing/react-tutorial/step-2) left off. Stop your app with +`CTRL-C` and let's get everything installed. ## Install dependencies @@ -584,8 +584,8 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -606,8 +606,8 @@ git push origin react-step-3 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/react/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx similarity index 97% rename from src/pages/tutorial/react/step-4.mdx rename to src/pages/developing/react-tutorial/step-4.mdx index dc4e4ac21ed..6c4e18ce586 100644 --- a/src/pages/tutorial/react/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -59,7 +59,7 @@ This tutorial has an accompanying GitHub repository called we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/react/step-1#fork-clone--branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -95,7 +95,7 @@ yarn start ``` You should see something similar to where the -[previous step](/tutorial/react/step-3) left off. +[previous step](/developing/react-tutorial/step-3) left off. ## Review design @@ -456,8 +456,8 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -478,8 +478,8 @@ git push origin react-step-4 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/react/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx similarity index 96% rename from src/pages/tutorial/react/step-5.mdx rename to src/pages/developing/react-tutorial/step-5.mdx index 7d7e228c975..fdcafc4ed43 100644 --- a/src/pages/tutorial/react/step-5.mdx +++ b/src/pages/developing/react-tutorial/step-5.mdx @@ -50,7 +50,7 @@ This tutorial has an accompanying GitHub repository called we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/react/step-1#fork-clone--branch). +[step 1 instructions](/developing/react-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -86,7 +86,7 @@ yarn start ``` You should see something similar to where the -[previous step](/tutorial/react/step-4) left off. +[previous step](/developing/react-tutorial/step-4) left off. ## Create IBM Cloud account @@ -205,7 +205,7 @@ applications: **Note:** With this set-up we're still using a GitHub personal access token saved in `.env.local`. If you haven't created a GitHub access token yet, see -[step 3](/tutorial/react/step-3#create-access-token). You can put the +[step 3](/developing/react-tutorial/step-3#create-access-token). You can put the environment variable in the manifest file, or manually add it in the IBM Cloud dashboard, but since we're building off previous tutorial steps nothing more is needed. @@ -301,8 +301,8 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1]() has -troubleshooting notes that may help. +[Step 1]() +has troubleshooting notes that may help. @@ -323,8 +323,8 @@ git push origin react-step-5 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/react/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/react-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/react/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx similarity index 90% rename from src/pages/tutorial/react/wrapping-up.mdx rename to src/pages/developing/react-tutorial/wrapping-up.mdx index e25d91d79b7..8d3590ef7da 100644 --- a/src/pages/tutorial/react/wrapping-up.mdx +++ b/src/pages/developing/react-tutorial/wrapping-up.mdx @@ -50,11 +50,11 @@ This badge demonstrates knowledge about Carbon's React components. To earn the badge: 1. Complete steps 1 through 5 of the Carbon React tutorial - - Step 1. [Installing Carbon](/tutorial/react/step-1) - - Step 2. [Building pages](/tutorial/react/step-2) - - Step 3. [Using APIs](/tutorial/react/step-3) - - Step 4. [Creating components](/tutorial/react/step-4) - - Step 5. [Deploying to IBM Cloud](/tutorial/react/step-5) + - Step 1. [Installing Carbon](/developing/react-tutorial/step-1) + - Step 2. [Building pages](/developing/react-tutorial/step-2) + - Step 3. [Using APIs](/developing/react-tutorial/step-3) + - Step 4. [Creating components](/developing/react-tutorial/step-4) + - Step 5. [Deploying to IBM Cloud](/developing/react-tutorial/step-5) 2. Have approved pull requests for steps 1 through 5 in the [carbon-tutorial repository](https://github.com/carbon-design-system/carbon-tutorial) 3. Complete the diff --git a/src/pages/tutorial/shared/step-2/images/landing-layout.png b/src/pages/developing/shared/step-2/images/landing-layout.png similarity index 100% rename from src/pages/tutorial/shared/step-2/images/landing-layout.png rename to src/pages/developing/shared/step-2/images/landing-layout.png diff --git a/src/pages/tutorial/shared/step-2/images/landing-r1-spacing.png b/src/pages/developing/shared/step-2/images/landing-r1-spacing.png similarity index 100% rename from src/pages/tutorial/shared/step-2/images/landing-r1-spacing.png rename to src/pages/developing/shared/step-2/images/landing-r1-spacing.png diff --git a/src/pages/tutorial/shared/step-2/images/landing-r1-type.png b/src/pages/developing/shared/step-2/images/landing-r1-type.png similarity index 100% rename from src/pages/tutorial/shared/step-2/images/landing-r1-type.png rename to src/pages/developing/shared/step-2/images/landing-r1-type.png diff --git a/src/pages/tutorial/shared/step-2/images/landing-r2-spacing.png b/src/pages/developing/shared/step-2/images/landing-r2-spacing.png similarity index 100% rename from src/pages/tutorial/shared/step-2/images/landing-r2-spacing.png rename to src/pages/developing/shared/step-2/images/landing-r2-spacing.png diff --git a/src/pages/tutorial/shared/step-2/images/landing-r3-spacing.png b/src/pages/developing/shared/step-2/images/landing-r3-spacing.png similarity index 100% rename from src/pages/tutorial/shared/step-2/images/landing-r3-spacing.png rename to src/pages/developing/shared/step-2/images/landing-r3-spacing.png diff --git a/src/pages/tutorial/shared/step-4/images/DAP-violations.png b/src/pages/developing/shared/step-4/images/DAP-violations.png similarity index 100% rename from src/pages/tutorial/shared/step-4/images/DAP-violations.png rename to src/pages/developing/shared/step-4/images/DAP-violations.png diff --git a/src/pages/tutorial/shared/step-4/images/info-layout.png b/src/pages/developing/shared/step-4/images/info-layout.png similarity index 100% rename from src/pages/tutorial/shared/step-4/images/info-layout.png rename to src/pages/developing/shared/step-4/images/info-layout.png diff --git a/src/pages/tutorial/shared/step-4/images/info-spacing.png b/src/pages/developing/shared/step-4/images/info-spacing.png similarity index 100% rename from src/pages/tutorial/shared/step-4/images/info-spacing.png rename to src/pages/developing/shared/step-4/images/info-spacing.png diff --git a/src/pages/tutorial/shared/wrapping-up/images/carbon-tee.png b/src/pages/developing/shared/wrapping-up/images/carbon-tee.png similarity index 100% rename from src/pages/tutorial/shared/wrapping-up/images/carbon-tee.png rename to src/pages/developing/shared/wrapping-up/images/carbon-tee.png diff --git a/src/pages/tutorial/vue/images/carbon-badge-vue.png b/src/pages/developing/vue-tutorial/images/carbon-badge-vue.png similarity index 100% rename from src/pages/tutorial/vue/images/carbon-badge-vue.png rename to src/pages/developing/vue-tutorial/images/carbon-badge-vue.png diff --git a/src/pages/tutorial/vue/overview.mdx b/src/pages/developing/vue-tutorial/overview.mdx similarity index 88% rename from src/pages/tutorial/vue/overview.mdx rename to src/pages/developing/vue-tutorial/overview.mdx index 4e71b64eaad..0b7f8d66c63 100644 --- a/src/pages/tutorial/vue/overview.mdx +++ b/src/pages/developing/vue-tutorial/overview.mdx @@ -50,7 +50,7 @@ you will build: This tutorial is intended for people with all amounts of web development experience. If you want to jump straight to code, you may want to skip this -tutorial and go to the [developers getting started](/get-started/develop/vue) +tutorial and go to the [developers getting started](/developing/get-started) page. ## Prerequisites @@ -88,13 +88,13 @@ Each step in this tutorial illustrates a different aspect of developing web applications with Carbon. We recommend starting with step 1, but you can pick up any step and take it from there. -1. [**Installing Carbon**](/tutorial/vue/step-1) +1. [**Installing Carbon**](/developing/vue-tutorial/step-1) - Create a web app with the UI shell component. -1. [**Building pages**](/tutorial/vue/step-2) +1. [**Building pages**](/developing/vue-tutorial/step-2) - Build out pages with the grid and various components. -1. [**Using APIs**](/tutorial/vue/step-3) +1. [**Using APIs**](/developing/vue-tutorial/step-3) - Populate the data table with an external data source. -1. [**Creating components**](/tutorial/vue/step-4) +1. [**Creating components**](/developing/vue-tutorial/step-4) - Extend Carbon by creating your own components. -1. [**Deploying to IBM Cloud**](/tutorial/vue/step-5) +1. [**Deploying to IBM Cloud**](/developing/vue-tutorial/step-5) - Build and host your app in a production environment. diff --git a/src/pages/tutorial/vue/step-1.mdx b/src/pages/developing/vue-tutorial/step-1.mdx similarity index 100% rename from src/pages/tutorial/vue/step-1.mdx rename to src/pages/developing/vue-tutorial/step-1.mdx diff --git a/src/pages/tutorial/vue/step-2.mdx b/src/pages/developing/vue-tutorial/step-2.mdx similarity index 98% rename from src/pages/tutorial/vue/step-2.mdx rename to src/pages/developing/vue-tutorial/step-2.mdx index add105f5e96..a19d42bb8b5 100644 --- a/src/pages/tutorial/vue/step-2.mdx +++ b/src/pages/developing/vue-tutorial/step-2.mdx @@ -53,7 +53,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/vue/step-1#fork-clone--branch). +[step 1 instructions](/developing/vue-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -89,7 +89,7 @@ yarn serve ``` You should see something similar to where the -[previous step](/tutorial/vue/step-1) left off. +[previous step](/developing/vue-tutorial/step-1) left off. ## Install grid @@ -396,7 +396,7 @@ for now. We've added basic layout styles in `LandingPage.vue`, so now let's add type, color and spacing styles to match the design. We'll be using our -[spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing). In a +[spacing tokens](/guidelines/spacing/overview#spacing-scale). In a new file `src/styles/_carbon-utils.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions: @@ -446,7 +446,7 @@ with the other imports and ``` Referencing the -[spacing token table](https://www.carbondesignsystem.com/guidelines/spacing#spacing-scale), +[spacing token table](/guidelines/spacing/overview#spacing-scale), `16px` can be set with the `$spacing-05` token. The design calls for `128px` of space below the heading and that's not in the spacing scale, we can achieve that in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem` @@ -892,7 +892,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has +[Step 1](/developing/vue-tutorial/step-1#continuous-integration-ci-check) has troubleshooting notes that may help. @@ -914,8 +914,8 @@ git push origin vue-step-2 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/vue-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/vue/step-3.mdx b/src/pages/developing/vue-tutorial/step-3.mdx similarity index 98% rename from src/pages/tutorial/vue/step-3.mdx rename to src/pages/developing/vue-tutorial/step-3.mdx index a30ab287157..969e9ecd015 100644 --- a/src/pages/tutorial/vue/step-3.mdx +++ b/src/pages/developing/vue-tutorial/step-3.mdx @@ -64,7 +64,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 2 instructions](/tutorial/vue/step-2#fork-clone--branch). +[step 2 instructions](/developing/vue-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -91,8 +91,8 @@ yarn serve ``` You should see something similar to where the -[previous step](/tutorial/vue/step-2) left off. Stop your app with `CTRL-C` and -let's get everything installed. +[previous step](/developing/vue-tutorial/step-2) left off. Stop your app with +`CTRL-C` and let's get everything installed. ## Install dependencies @@ -681,7 +681,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has +[Step 1](/developing/vue-tutorial/step-1#continuous-integration-ci-check) has troubleshooting notes that may help. @@ -703,8 +703,8 @@ git push origin vue-step-3 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/vue-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/vue/step-4.mdx b/src/pages/developing/vue-tutorial/step-4.mdx similarity index 98% rename from src/pages/tutorial/vue/step-4.mdx rename to src/pages/developing/vue-tutorial/step-4.mdx index d1b108eb37a..b0d0719dcd7 100644 --- a/src/pages/tutorial/vue/step-4.mdx +++ b/src/pages/developing/vue-tutorial/step-4.mdx @@ -60,7 +60,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial/vue/step-1#fork-clone--branch). +[step 1 instructions](/developing/vue-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -96,7 +96,7 @@ yarn serve ``` You should see something similar to where the -[previous step](/tutorial/vue/step-3) left off. +[previous step](/developing/vue-tutorial/step-3) left off. ## Review design @@ -540,7 +540,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has +[Step 1](/developing/vue-tutorial/step-1#continuous-integration-ci-check) has troubleshooting notes that may help. @@ -562,8 +562,8 @@ git push origin vue-step-4 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/vue-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/vue/step-5.mdx b/src/pages/developing/vue-tutorial/step-5.mdx similarity index 94% rename from src/pages/tutorial/vue/step-5.mdx rename to src/pages/developing/vue-tutorial/step-5.mdx index 9f9adcc61f0..0675d770d3c 100644 --- a/src/pages/tutorial/vue/step-5.mdx +++ b/src/pages/developing/vue-tutorial/step-5.mdx @@ -51,7 +51,7 @@ This tutorial has an accompanying GitHub repository called that we'll use as a starting point for each step. If you haven't forked and cloned that repository yet, and haven't added the upstream remote, go ahead and do so by following the -[step 1 instructions](/tutorial-vue/step-1/vue#fork-clone--branch). +[step 1 instructions](/developing/vue-tutorial/step-1#fork-clone-and-branch). ### Branch @@ -87,7 +87,7 @@ yarn serve ``` You should see something similar to where the -[previous step](/tutorial/vue/step-4) left off. +[previous step](/developing/vue-tutorial/step-4) left off. ## Create IBM Cloud account @@ -201,9 +201,10 @@ applications: **Note:** With this set-up we're still using a GitHub personal access token saved in `.env.local`. If you haven't created a GitHub access token yet, see -[step 3](/tutorial/vue/step-3#create-access-token). You can put the environment -variable in the manifest file, or manually add it in the IBM Cloud dashboard, -but since we're building off previous tutorial steps nothing more is needed. +[step 3](/developing/vue-tutorial/step-3#create-access-token). You can put the +environment variable in the manifest file, or manually add it in the IBM Cloud +dashboard, but since we're building off previous tutorial steps nothing more is +needed. @@ -283,7 +284,7 @@ yarn ci-check **Note:** Having issues running the CI check? -[Step 1](/tutorial/vue/step-1#continuous-integration-ci-check) has +[Step 1](/developing/vue-tutorial/step-1#continuous-integration-ci-check) has troubleshooting notes that may help. @@ -305,8 +306,8 @@ git push origin vue-step-5 **Note:** Having issues pushing your changes? -[Step 1](/tutorial/vue/step-1#git-commit-and-push) has troubleshooting notes -that may help. +[Step 1](/developing/vue-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. diff --git a/src/pages/tutorial/vue/wrapping-up.mdx b/src/pages/developing/vue-tutorial/wrapping-up.mdx similarity index 90% rename from src/pages/tutorial/vue/wrapping-up.mdx rename to src/pages/developing/vue-tutorial/wrapping-up.mdx index 639881ee27b..27367824230 100644 --- a/src/pages/tutorial/vue/wrapping-up.mdx +++ b/src/pages/developing/vue-tutorial/wrapping-up.mdx @@ -50,11 +50,11 @@ This badge demonstrates knowledge about Carbon's Vue components. To earn the badge: 1. Complete steps 1 through 5 of the Carbon Vue tutorial - - Step 1. [Installing Carbon](/tutorial/vue/step-1) - - Step 2. [Building pages](/tutorial/vue/step-2) - - Step 3. [Using APIs](/tutorial/vue/step-3) - - Step 4. [Creating components](/tutorial/vue/step-4) - - Step 5. [Deploying to IBM Cloud](/tutorial/vue/step-5) + - Step 1. [Installing Carbon](/developing/vue-tutorial/step-1) + - Step 2. [Building pages](/developing/vue-tutorial/step-2) + - Step 3. [Using APIs](/developing/vue-tutorial/step-3) + - Step 4. [Creating components](/developing/vue-tutorial/step-4) + - Step 5. [Deploying to IBM Cloud](/developing/vue-tutorial/step-5) 2. Have approved pull requests for steps 1 through 5 in the [carbon-tutorial-vue repository](https://github.com/carbon-design-system/carbon-tutorial-vue) 3. Complete the diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index 645b44fd526..52b1a0aa1d5 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -825,7 +825,7 @@ cases as we find them. ## Incorporating the Shell We cover more about shell behavior on the 2x Grid Basics tab in the -[Grid influencers](/guidelines/2x-grid/basics#grid-influencers) section. +[Grid influencers](/guidelines/2x-grid/overview/#grid-influencers) section. However, we've had a lot of questions about how the shell works in conjunction with our grid. That's why we recently incorporated the shell into our grid tooling as a Sketch template. We'd also like to show it in action here in a @@ -1137,9 +1137,9 @@ aspect ratio. We offer several classes for specifying aspect ratio for given content. We use these classes to maintain consistency throughout our UI. We discuss aspect ratios and various grid behaviors more in depth on the 2x Grid -Basics tab, both in the [Aspect ratios](/guidelines/2x-grid/basics#aspect-ratio) -section and in the [Grid behaviors](/guidelines/2x-grid/basics#grid-behaviors) -section. +Basics tab, both in the +[Aspect ratios](/guidelines/2x-grid/overview/#aspect-ratio) section and in the +[Grid behaviors](/guidelines/2x-grid/overview/#grid-behaviors) section. diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index ea4bfe50113..0c55f9dc79c 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -248,9 +248,9 @@ $hover-field: #e5e5e5 !default; Carbon has two spacing scales, one for general spacing within components and the other for layout spacing. Both are designed to complement the components and typography throughout the system. Each scale has its own -[distinct purpose](/guidelines/spacing). The two scales have certain overlapping -values that serve two different roles, so be mindful when choosing a spacing -token. +[distinct purpose](/guidelines/spacing/overview). The two scales have certain +overlapping values that serve two different roles, so be mindful when choosing a +spacing token. ```scss //// _spacing.scss diff --git a/src/pages/help/certificate-of-originality.mdx b/src/pages/help/certificate-of-originality.mdx new file mode 100644 index 00000000000..13575f7cbc4 --- /dev/null +++ b/src/pages/help/certificate-of-originality.mdx @@ -0,0 +1,25 @@ +--- +title: Certificate of Originality +description: +--- + +## Certificate of Originality + +This information is only relevant for IBM teams building with Carbon. + +### Carbon v10.x + +- COO record ID: 95607540 +- COO reference number: COO20190204 +- Name of IBM material (with version number): IBM Design System [Version 10, + Release n/a, Modification n/a] +- Last release date: March 31, 2019 +- Name of Product/Program manager or author of material: Matt Rosno/US/IBM + +### Carbon v9.x + +- COO number of IBM material (if any): AUS720180239 +- Name of IBM material (with version number): IBM Design System [Version 9, + Release n/a, Modification n/a] +- Last release date: June 4, 2018 +- Name of Product/Program manager or author of material: Matt Rosno/US/IBM diff --git a/src/pages/help/support/index.mdx b/src/pages/help/contact-us/index.mdx similarity index 67% rename from src/pages/help/support/index.mdx rename to src/pages/help/contact-us/index.mdx index 84582b719c1..e53354c4621 100755 --- a/src/pages/help/support/index.mdx +++ b/src/pages/help/contact-us/index.mdx @@ -1,35 +1,85 @@ --- -title: Support +title: Contact us description: - The Carbon core team provides support for users of the design system. Some of - our common channels for this include GitHub, Slack, Twitter, and email. + Have a question about our design system? The Carbon team is here to help you. + Before you start, be sure to check out the following resources to see if we've + already got your topic covered. --- -## Questions + -The Carbon core team provides support for users of the design system. Find the -use case below that most closely matches your own for the quickest response. +Have a question about our design system? The Carbon team is here to help you. +Before you start, be sure to check out the following resources to see if we've +already got your topic covered. + + + + + +Check existing resources +Provide a suggestion or contribution +Start a new discussion + + + +## Check existing resources ### Carbon website Please take some time to explore the content on this website before engaging the -Carbon team. The site is very comprehensive and most of the guidelines and -components are well documented. +Carbon team. The site is comprehensive and most of the guidelines and components +are well documented. ### Frequently asked questions Answers to the most common questions about the design system can be found in the -[Carbon FAQ](faq). +[Carbon FAQs](faqs). + +The Carbon core team provides support for users of the design system. Find the +use case below that most closely matches your own for the quickest response. + +## Provide a suggestion or contribution + +### GitHub issues + +If you have a bug report, suggestion, or general feedback, please create a +GitHub issue. + +#### Design issues + +- [Design kit](https://github.com/carbon-design-system/carbon-design-kit/issues/new) +- [Icons](https://github.com/carbon-design-system/carbon-icons/issues/new) +- [Website](https://github.com/carbon-design-system/carbon-website/issues/new/choose) +- [Components](https://github.com/carbon-design-system/carbon/issues/new/choose) +- [Elements](https://github.com/carbon-design-system/carbon/issues/new/choose) +- [Charts](https://github.com/carbon-design-system/carbon-charts/issues/new) +- [Everything else](https://github.com/carbon-design-system/issue-tracking/issues/new) + +#### Code issues + +- [carbon-components](https://github.com/carbon-design-system/carbon/issues/new/choose) +- [carbon-components-react](https://github.com/carbon-design-system/carbon/issues/new/choose) +- [carbon-components-angular](https://github.com/IBM/carbon-components-angular/issues/new) +- [carbon-components-vue](https://github.com/carbon-design-system/carbon-components-vue/issues/new) +- [carbon-charts](https://github.com/carbon-design-system/carbon-charts/issues/new) + +### GitHub pull requests + +If you have a specific fix or a contribution, you can generate a pull request in +the appropriate Carbon repo. + +## Start a new discussion ### Slack channels -_Internal IBM users only._ The Carbon core team maintains the following channels -and will provide support as time permits. +_For internal IBM users only._ The Carbon core team maintains the following +channels and will provide support as time permits. **Please try searching the Slack channel for your topic first.** Slack’s filtering feature will return more targeted and relevant results. For instance, if you have a technical question about the `DataTable` component, you could search “DataTable” in Slack and then filter by the #carbon-components channel. + _Tip: You can start a new search directly from the message box using the `/s` slash command._ @@ -49,33 +99,3 @@ as quickly as possible. The Carbon team can also be reached on Twitter: [@\_carbondesign](https://twitter.com/_carbondesign?lang=en) - -## Suggestions or contributions - -### GitHub pull requests - -If you have a specific fix or contribution, you can generate a pull request in -the appropriate Carbon repo. - -### GitHub issues - -Bug reports, feature requests, and general feedback can be delivered to the -Carbon team via the creation of a GitHub issue. - -#### Design issues - -- [Design kit](https://github.com/carbon-design-system/carbon-design-kit/issues/new) -- [Icons](https://github.com/carbon-design-system/carbon-icons/issues/new) -- [Website](https://github.com/carbon-design-system/carbon-website/issues/new/choose) -- [Components](https://github.com/carbon-design-system/carbon/issues/new/choose) -- [Elements](https://github.com/carbon-design-system/carbon/issues/new/choose) -- [Charts](https://github.com/carbon-design-system/carbon-charts/issues/new) -- [Everything else](https://github.com/carbon-design-system/issue-tracking/issues/new) - -#### Code issues - -- [carbon-components](https://github.com/carbon-design-system/carbon/issues/new/choose) -- [carbon-components-react](https://github.com/carbon-design-system/carbon/tree/master/packages/react/issues/new/choose) -- [carbon-components-angular](https://github.com/IBM/carbon-components-angular/issues/new) -- [carbon-components-vue](https://github.com/carbon-design-system/carbon-components-vue/issues/new) -- [carbon-charts](https://github.com/carbon-design-system/carbon-charts/issues/new) diff --git a/src/pages/help/faq/images/3col-layouts.png b/src/pages/help/faqs/images/3col-layouts.png similarity index 100% rename from src/pages/help/faq/images/3col-layouts.png rename to src/pages/help/faqs/images/3col-layouts.png diff --git a/src/pages/help/faq/index.mdx b/src/pages/help/faqs/index.mdx similarity index 98% rename from src/pages/help/faq/index.mdx rename to src/pages/help/faqs/index.mdx index 20fd9c55dbc..0c85ea91644 100755 --- a/src/pages/help/faq/index.mdx +++ b/src/pages/help/faqs/index.mdx @@ -1,5 +1,5 @@ --- -title: FAQ +title: FAQs description: What is the Carbon Design System? Who works on Carbon? How can I contribute? Here, we answer some of our frequently asked questions. @@ -27,7 +27,7 @@ and ### How can I contribute and/or propose new components/ideas? -Check out our [contribution overview](/how-to-contribute/overview) to learn all +Check out our [contribution overview](/contributing/overview) to learn all about the different ways to contribute. Thanks for the help! ### Which browsers are supported? diff --git a/src/pages/updates/migration-guide/design.mdx b/src/pages/help/migration-guide/design.mdx similarity index 95% rename from src/pages/updates/migration-guide/design.mdx rename to src/pages/help/migration-guide/design.mdx index 84207ce50f8..6d1913deaf3 100644 --- a/src/pages/updates/migration-guide/design.mdx +++ b/src/pages/help/migration-guide/design.mdx @@ -67,8 +67,8 @@ same time, you should avoid using v10 symbols in an app designed with v9. ### Setting up the kit -Head over to the [Get started guide](/get-started/design/sketch#get-the-kit) to -set up the new Sketch libraries. +Head over to [Design kits](/designing/kits/sketch) to set up the new Sketch +libraries. ## Elements @@ -146,8 +146,8 @@ should abide by these standards. ### Layout, grid, and spacing -Carbon v10 uses the 16 column [2x Grid](/guidelines/2x-grid/basics). Carbon v10 -will default to the 12-column grid with an option to switch to the 16-column +Carbon v10 uses the 16 column [2x Grid](/guidelines/2x-grid/overview). Carbon +v10 will default to the 12-column grid with an option to switch to the 16-column grid. Designers starting on new layouts using v10 should use the 16-column grid. Layout and spacing token names were updated in v10 but the values remain the diff --git a/src/pages/updates/migration-guide/develop.mdx b/src/pages/help/migration-guide/develop.mdx similarity index 99% rename from src/pages/updates/migration-guide/develop.mdx rename to src/pages/help/migration-guide/develop.mdx index d574a6e1694..408591becce 100644 --- a/src/pages/updates/migration-guide/develop.mdx +++ b/src/pages/help/migration-guide/develop.mdx @@ -26,7 +26,7 @@ Carbon code now lives in a monorepo. [Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was deprecated in v10, and the themes package [@carbon/themes](https://github.com/carbon-design-system/carbon/tree/master/packages/themes) -now lives in the [Carbon](https://github.com/carbon-design-system/carbon) Carbon +now lives in the [Carbon](https://github.com/carbon-design-system/carbon) monorepo. diff --git a/src/pages/updates/migration-guide/images/Carbon-kit-library.png b/src/pages/help/migration-guide/images/Carbon-kit-library.png similarity index 100% rename from src/pages/updates/migration-guide/images/Carbon-kit-library.png rename to src/pages/help/migration-guide/images/Carbon-kit-library.png diff --git a/src/pages/updates/migration-guide/images/IDL-kit-library.png b/src/pages/help/migration-guide/images/IDL-kit-library.png similarity index 100% rename from src/pages/updates/migration-guide/images/IDL-kit-library.png rename to src/pages/help/migration-guide/images/IDL-kit-library.png diff --git a/src/pages/updates/migration-guide/images/design-kit-step-1a.png b/src/pages/help/migration-guide/images/design-kit-step-1a.png similarity index 100% rename from src/pages/updates/migration-guide/images/design-kit-step-1a.png rename to src/pages/help/migration-guide/images/design-kit-step-1a.png diff --git a/src/pages/updates/migration-guide/images/design-kit-step-2a.png b/src/pages/help/migration-guide/images/design-kit-step-2a.png similarity index 100% rename from src/pages/updates/migration-guide/images/design-kit-step-2a.png rename to src/pages/help/migration-guide/images/design-kit-step-2a.png diff --git a/src/pages/updates/migration-guide/images/grid-template-1.png b/src/pages/help/migration-guide/images/grid-template-1.png similarity index 100% rename from src/pages/updates/migration-guide/images/grid-template-1.png rename to src/pages/help/migration-guide/images/grid-template-1.png diff --git a/src/pages/updates/migration-guide/images/react-icon.png b/src/pages/help/migration-guide/images/react-icon.png similarity index 100% rename from src/pages/updates/migration-guide/images/react-icon.png rename to src/pages/help/migration-guide/images/react-icon.png diff --git a/src/pages/updates/migration-guide/overview.mdx b/src/pages/help/migration-guide/overview.mdx similarity index 100% rename from src/pages/updates/migration-guide/overview.mdx rename to src/pages/help/migration-guide/overview.mdx diff --git a/src/pages/how-to-contribute/governance.mdx b/src/pages/how-to-contribute/governance.mdx deleted file mode 100644 index 459c32c110a..00000000000 --- a/src/pages/how-to-contribute/governance.mdx +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Governance -description: - Carbon is funded and built by IBM. Although that means we build for the - company's business needs, it also means we have a brilliant team of engineers - and designers working full time to make Carbon better. ---- - - - -Code of Conduct -Contributor License Agreement -Support - - - -## Code of Conduct - -### The core team's promise - -Carbon is funded and built by IBM. Although that means we build for the -company's business needs, it also means we have a brilliant team of engineers -and designers working full time to make Carbon better. As one of the world's -largest companies, IBM has thousands of people across the globe using and -contributing to Carbon. - -We use what we build, and we've made it open source for anyone to use and -contribute back to. - -### Who is the Code of Conduct for? - -The Carbon Design System is built for everybody and if you use or contribute to -Carbon, you are part of this community and we expect you to adhere to our -community standards. - -### Feedback and critique - -Building great products isn't easy, and there's usually more than one right -answer. If you're taking part in any discussion, whether on Slack, Twitter, -Gitter, GitHub, or even in person, please respect one another. Keep the mission -in mind, and help us make Carbon better. - -### Be understanding - -Differing needs and differing perspectives make Carbon comprehensive. Be -welcoming, be understanding, and be kind. If one user expresses frustrations or -complications, there are likely dozens of others who feel the same way. -Encourage community members to speak up. - -## Contributor License Agreement - -The Carbon core team works for IBM. To accept contributions, we need a signed -Contributor License Agreement (CLA) from you before code contributions can be -reviewed and merged. If you have questions, please don't hesitate -to [reach out](https://www.carbondesignsystem.com/help/support#email). - -## Support - -Have questions? Found a bug? Learn where to go and what to do by visiting the -[Support page](/help/support). diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 6d47838383f..457302b9e47 100755 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -4,7 +4,7 @@ export default HomepageTemplate; - + @@ -74,19 +73,19 @@ building websites and user interfaces. See a - + @@ -96,7 +95,7 @@ building websites and user interfaces. See a @@ -118,7 +117,7 @@ building websites and user interfaces. See a href="https://medium.com/carbondesign/seven-new-ux-patterns-for-carbon-f4a18c20c535" > -![New ux patterns announcement](resources/images/patterns_announcement.png) +![New ux patterns announcement](whats-happening/news-and-articles/images/patterns_announcement.png) @@ -145,7 +144,7 @@ building websites and user interfaces. See a href="https://medium.com/carbondesign/october-release-fadc38b757ad" > -![New in Carbon article](resources/images/v10.7-release.png) +![New in Carbon article](whats-happening/news-and-articles/images/v10.7-release.png) diff --git a/src/pages/patterns/empty-states-pattern/index.mdx b/src/pages/patterns/empty-states-pattern/index.mdx index 019d5206412..5e537a5cd13 100644 --- a/src/pages/patterns/empty-states-pattern/index.mdx +++ b/src/pages/patterns/empty-states-pattern/index.mdx @@ -435,7 +435,7 @@ Norman group’s A pattern providing guidance for error states is currently being planned. If you would like to contribute, please see our -[guidelines for contributions](/how-to-contribute/pattern). +[guidelines for contributions](/contributing/pattern). ## In-depth alternatives @@ -519,7 +519,7 @@ in conjunction with basic empty states. A pattern providing guidance for onboarding is currently being planned. It will include a framework for matching user needs with design solutions, tips for writing copy, and general best practices. If you would like to contribute, -please see our [guidelines for contributions](/how-to-contribute/pattern). +please see our [guidelines for contributions](/contributing/pattern). ### Starter content diff --git a/src/pages/patterns/notification-pattern/index.mdx b/src/pages/patterns/notification-pattern/index.mdx index 6897663ef24..0ad3b8de4af 100644 --- a/src/pages/patterns/notification-pattern/index.mdx +++ b/src/pages/patterns/notification-pattern/index.mdx @@ -454,7 +454,7 @@ receive, which is particularly helpful for users with cognitive limitations. The Error state pattern is currently being planned. If you would like to contribute, please see our -[guidelines for contributions](https://www.carbondesignsystem.com/how-to-contribute/pattern). +[guidelines for contributions](/contributing/pattern). ## References diff --git a/src/pages/patterns/search-pattern/index.mdx b/src/pages/patterns/search-pattern/index.mdx index fa0f5f21396..c86388dcd2f 100644 --- a/src/pages/patterns/search-pattern/index.mdx +++ b/src/pages/patterns/search-pattern/index.mdx @@ -48,9 +48,9 @@ and the location of the search within your product. The placement of your search field depends on the construction of your application and the scope of the search. For global searches, see the -[global header pattern](/patterns/global-header-pattern) for placement guidance. -See the [data table](/components/data-table/usage#search) component for search -placement within a data table. +[global header pattern](/patterns/global-header) for placement guidance. See the +[data table](/components/data-table/usage#search) component for search placement +within a data table. ### Anatomy @@ -429,9 +429,8 @@ several similar data sets without knowing where the information lives. If the user is likely to know the location of their data, offer a scope filter. A successful focused search will route a user directly to a page or resource. In -the event the user does select "See all results", present a -[results page](basic-search). Always include the number of search results, -including for searches with no results. +the event the user does select "See all results", present a results page. Always +include the number of search results, including for searches with no results. ## Accessibility diff --git a/src/pages/resources/index.mdx b/src/pages/resources/index.mdx deleted file mode 100755 index 90fbf7f8b11..00000000000 --- a/src/pages/resources/index.mdx +++ /dev/null @@ -1,639 +0,0 @@ ---- -title: Resources -description: - Everything you need to work with, learn about, and contribute to Carbon. ---- - - - -Everything you need to work with, learn about, and contribute to Carbon. - - - - - -Development resources -Design resources -Tools -Reading - - - -## Development resources - -### GitHub repos - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -### Storybooks - - - - - - - - - - - - - - - - - - - - - - - - - -### Storybooks - Data visualization - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -## Design resources - -To use Sketch libraries you must have the **most recent version** of -[Sketch](https://www.sketchapp.com/) installed. If you're new to the design kit, -visit the [Get started](/get-started/design/sketch) guide. - -### Theme libraries - - - - - - - - - - - - - - - - - - - - - - - - -### Color, grid, and icons - - - - - -![](/images/ase.png) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -### Data visualization - - - - - - - - - -### GitHub repos - - - - - - - - - - - - - - - - - - -
- -#### IBM Plex - -Carbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) – -carefully designed to meet IBM's needs as a global technology company and -reflect IBM's spirit, beliefs, and design principles. - -#### IBM Design Language - -Carbon delivers the [IBM Design Language](https://www.ibm.com/design/language/) -as tools for designers and developers, guidance, tutorials, and support. - -## Tools - - - - - - - - - - - - -![](images/color-contrast-icon.png) - - - - - - - -![](images/adobe-xd.png) - - - - - - -![](images/carbon-devtools.png) - - - - - -## Reading - -### Featured stories - - - - - -![](images/writing-is-designing.png) - - - - - - -![](images/Featured_01.png) - - - - - - - -![](images/Featured_03.png) - - - - - - -![](images/Featured_04.png) - - - - - - -![](images/Featured_05.png) - - - - - -### Articles - - - - - - - -![](images/patterns_announcement.png) - - - - - - - -![](images/v10.7-release.png) - - - - - - -![](/images/hacktoberfest.png) - - - - - - -![](/images/because-colors.png) - - - - - - -![](/images/october_release.png) - - - - - - -![](/images/security_pic.png) - - - - - - -![](/images/Aug_preview_rev_2.png) - - - - - - -![](../resources/images/june_option_3.png) - - - - - - -![](../resources/images/10_3-image.png) - - - - - - -![](../resources/images/code_palette.png) - - - - - - -![](../resources/images/mono_repo_teal.png) - - - - - - -![](../resources/images/carbon_themes.png) - - - - - - -![](../resources/images/bee_70.png) - - - - - - -![](../resources/images/designing_with_carbon.png) - - - - - - -![](../resources/images/minimal_css.png) - - - - - - -![](images/Carbon_what_to_expect.png) - - - - - - -![](images/Article_02.png) - - - - - - -![](images/Article_03.png) - - - - diff --git a/src/pages/updates/whats-new/images/z-icon.svg b/src/pages/whats-happening/changelog-and-roadmap/images/z-icon.svg similarity index 100% rename from src/pages/updates/whats-new/images/z-icon.svg rename to src/pages/whats-happening/changelog-and-roadmap/images/z-icon.svg diff --git a/src/pages/updates/whats-new/index.mdx b/src/pages/whats-happening/changelog-and-roadmap/index.mdx similarity index 87% rename from src/pages/updates/whats-new/index.mdx rename to src/pages/whats-happening/changelog-and-roadmap/index.mdx index 34acbe4fa4c..941c01f713c 100644 --- a/src/pages/updates/whats-new/index.mdx +++ b/src/pages/whats-happening/changelog-and-roadmap/index.mdx @@ -1,8 +1,8 @@ --- title: Changelog and roadmap description: - This changelog reflects the most recent changes to the design system, from bug - fixes to feature enhancements. + Read about the latest updates and learn more about what the team has planned + for Carbon’s future. --- diff --git a/src/pages/whats-happening/events/index.mdx b/src/pages/whats-happening/events/index.mdx new file mode 100644 index 00000000000..01b5951ebea --- /dev/null +++ b/src/pages/whats-happening/events/index.mdx @@ -0,0 +1,43 @@ +--- +title: Events +description: + The Carbon team is committed to making members of the community successful. + Find events for learning what’s new, tips and tricks, and leveling up your + skills. +--- + + + +The Carbon team is committed to making members of the community successful. Find +events for learning what’s new, tips and tricks, and leveling up your skills. + + + +This page is a work in progress. Need to add sign up / contact methods. + +### Weekly design playback + +#### Every Friday, 2pm Central, One hour + +You’ve got some work in progress and you’re ready to open it up and share it +with a broader audience for honest (and caring!) feedback. Verify that you’re +working with the grid correctly, that you’re using the right components, that +you’re using the correct language. Sign up to share, or come along to see other +work in progress and learn that way. + +### Carbon Insiders + +#### First Fridays, 9:30am Central, One hour + +An open forum for developers in product teams to come together with Carbon +developers and designers. Talk through questions, challenges, and share ideas +for building products with Carbon. All topics welcome. + +### Design pin-ups + +#### Contact us to schedule, Two + hours + +Put your screens up in MURAL and step through the flow and page designs with the +Carbon designers. Great for assessing the overall flow, page layouts, the best +choices and use of components, content—everything from the big picture to the +smallest detail! diff --git a/src/pages/whats-happening/news-and-articles/images/10_3-image.png b/src/pages/whats-happening/news-and-articles/images/10_3-image.png new file mode 100644 index 00000000000..1fcd091ddf4 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/10_3-image.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Article_02.png b/src/pages/whats-happening/news-and-articles/images/Article_02.png new file mode 100644 index 00000000000..7871c4e4b60 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Article_02.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Article_03.png b/src/pages/whats-happening/news-and-articles/images/Article_03.png new file mode 100644 index 00000000000..038238b2bd5 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Article_03.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Article_04.png b/src/pages/whats-happening/news-and-articles/images/Article_04.png new file mode 100644 index 00000000000..a94ae5ae5e0 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Article_04.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Article_05.png b/src/pages/whats-happening/news-and-articles/images/Article_05.png new file mode 100644 index 00000000000..075774343db Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Article_05.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Article_06.png b/src/pages/whats-happening/news-and-articles/images/Article_06.png new file mode 100644 index 00000000000..666461748ae Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Article_06.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Aug_preview_rev_2.png b/src/pages/whats-happening/news-and-articles/images/Aug_preview_rev_2.png new file mode 100644 index 00000000000..d29d3e2c43a Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Aug_preview_rev_2.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Carbon_what_to_expect.png b/src/pages/whats-happening/news-and-articles/images/Carbon_what_to_expect.png new file mode 100755 index 00000000000..c649d272479 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Carbon_what_to_expect.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Featured_01.png b/src/pages/whats-happening/news-and-articles/images/Featured_01.png new file mode 100644 index 00000000000..841737249d6 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Featured_01.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Featured_02.png b/src/pages/whats-happening/news-and-articles/images/Featured_02.png new file mode 100644 index 00000000000..61f47a34eba Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Featured_02.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Featured_03.png b/src/pages/whats-happening/news-and-articles/images/Featured_03.png new file mode 100644 index 00000000000..57d3b330a60 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Featured_03.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Featured_04.png b/src/pages/whats-happening/news-and-articles/images/Featured_04.png new file mode 100644 index 00000000000..22fc935fea2 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Featured_04.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/Featured_05.png b/src/pages/whats-happening/news-and-articles/images/Featured_05.png new file mode 100644 index 00000000000..472f3134dba Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/Featured_05.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/adobe-xd.png b/src/pages/whats-happening/news-and-articles/images/adobe-xd.png new file mode 100644 index 00000000000..ee61dbeb613 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/adobe-xd.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/ase.png b/src/pages/whats-happening/news-and-articles/images/ase.png new file mode 100644 index 00000000000..846f0f95021 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/ase.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/because-colors.png b/src/pages/whats-happening/news-and-articles/images/because-colors.png new file mode 100755 index 00000000000..363a3fec07b Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/because-colors.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/bee_70.png b/src/pages/whats-happening/news-and-articles/images/bee_70.png new file mode 100644 index 00000000000..1c876060c9d Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/bee_70.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/carbon-devtools.png b/src/pages/whats-happening/news-and-articles/images/carbon-devtools.png new file mode 100644 index 00000000000..64c088df3dc Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/carbon-devtools.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/carbon_themes.png b/src/pages/whats-happening/news-and-articles/images/carbon_themes.png new file mode 100644 index 00000000000..eb6570bf9ed Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/carbon_themes.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/code_palette.png b/src/pages/whats-happening/news-and-articles/images/code_palette.png new file mode 100644 index 00000000000..088df33b2bd Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/code_palette.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/codepen-icon.png b/src/pages/whats-happening/news-and-articles/images/codepen-icon.png new file mode 100644 index 00000000000..a9d165c34d8 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/codepen-icon.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/color-contrast-icon.png b/src/pages/whats-happening/news-and-articles/images/color-contrast-icon.png new file mode 100644 index 00000000000..4fafd5cf710 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/color-contrast-icon.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/designing_with_carbon.png b/src/pages/whats-happening/news-and-articles/images/designing_with_carbon.png new file mode 100644 index 00000000000..211d1ca2017 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/designing_with_carbon.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/github-icon-inverted.png b/src/pages/whats-happening/news-and-articles/images/github-icon-inverted.png new file mode 100644 index 00000000000..884432bebb6 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/github-icon-inverted.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/hacktoberfest.png b/src/pages/whats-happening/news-and-articles/images/hacktoberfest.png new file mode 100644 index 00000000000..6fbcca18c87 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/hacktoberfest.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/homepage_01.png b/src/pages/whats-happening/news-and-articles/images/homepage_01.png new file mode 100644 index 00000000000..b5d02809057 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/homepage_01.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/homepage_02.png b/src/pages/whats-happening/news-and-articles/images/homepage_02.png new file mode 100644 index 00000000000..4e7ee7be557 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/homepage_02.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/june_option_3.png b/src/pages/whats-happening/news-and-articles/images/june_option_3.png new file mode 100644 index 00000000000..93d7da426dd Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/june_option_3.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/kubernetes_16x9.png b/src/pages/whats-happening/news-and-articles/images/kubernetes_16x9.png new file mode 100644 index 00000000000..f14f2d31e9e Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/kubernetes_16x9.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/minimal_css.png b/src/pages/whats-happening/news-and-articles/images/minimal_css.png new file mode 100644 index 00000000000..b562d55b42c Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/minimal_css.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/mono_repo_teal.png b/src/pages/whats-happening/news-and-articles/images/mono_repo_teal.png new file mode 100644 index 00000000000..a0c4b1479e1 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/mono_repo_teal.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/october_release.png b/src/pages/whats-happening/news-and-articles/images/october_release.png new file mode 100644 index 00000000000..5c9053b2919 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/october_release.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/patterns_announcement.png b/src/pages/whats-happening/news-and-articles/images/patterns_announcement.png new file mode 100644 index 00000000000..c343adf0638 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/patterns_announcement.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/preview_carbon.png b/src/pages/whats-happening/news-and-articles/images/preview_carbon.png new file mode 100644 index 00000000000..adae8e1a11d Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/preview_carbon.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/security_pic.png b/src/pages/whats-happening/news-and-articles/images/security_pic.png new file mode 100755 index 00000000000..fcadcd4e380 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/security_pic.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/v10.7-release.png b/src/pages/whats-happening/news-and-articles/images/v10.7-release.png new file mode 100644 index 00000000000..f019a758ae1 Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/v10.7-release.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/writing-is-designing.png b/src/pages/whats-happening/news-and-articles/images/writing-is-designing.png new file mode 100644 index 00000000000..eefbba2682a Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/writing-is-designing.png differ diff --git a/src/pages/whats-happening/news-and-articles/images/xd_kit_img.png b/src/pages/whats-happening/news-and-articles/images/xd_kit_img.png new file mode 100644 index 00000000000..73d1bce065f Binary files /dev/null and b/src/pages/whats-happening/news-and-articles/images/xd_kit_img.png differ diff --git a/src/pages/whats-happening/news-and-articles/index.mdx b/src/pages/whats-happening/news-and-articles/index.mdx new file mode 100644 index 00000000000..3efd822af87 --- /dev/null +++ b/src/pages/whats-happening/news-and-articles/index.mdx @@ -0,0 +1,304 @@ +--- +title: News and articles +description: + Learn about some of Carbon's bigger projects and read other articles of + interest about design systems. +--- + + + +Learn about some of Carbon's bigger projects and read other articles of interest +about design systems. + + + + + Latest news + Books and articles + + +## Latest news + + + + + + + +![](/images/patterns_announcement.png) + + + + + + + +![](/images/v10.7-release.png) + + + + + + +![](/images/hacktoberfest.png) + + + + + + +![](/images/because-colors.png) + + + + + + +![](/images/october_release.png) + + + + + + +![](/images/security_pic.png) + + + + + + +![](/images/Aug_preview_rev_2.png) + + + + + + +![](/images/june_option_3.png) + + + + + + +![](/images/10_3-image.png) + + + + + + +![](/images/code_palette.png) + + + + + + +![](/images/mono_repo_teal.png) + + + + + + +![](/images/carbon_themes.png) + + + + + + +![](/images/bee_70.png) + + + + + + +![](/images/designing_with_carbon.png) + + + + + + +![](/images/minimal_css.png) + + + + + + +![](/images/Carbon_what_to_expect.png) + + + + + + +![](/images/Article_02.png) + + + + + + +![](/images/Article_03.png) + + + + + +## Books and articles + + + + + + +![](/images/kubernetes_16x9.png) + + + + + + + +![](images/writing-is-designing.png) + + + + + + +![](images/Featured_01.png) + + + + + + + +![](images/Featured_03.png) + + + + + + +![](images/Featured_04.png) + + + + + + +![](images/Featured_05.png) + + + + diff --git a/src/pages/updates/work-in-progress/images/github-icon.png b/src/pages/whats-happening/work-in-progress/images/github-icon.png similarity index 100% rename from src/pages/updates/work-in-progress/images/github-icon.png rename to src/pages/whats-happening/work-in-progress/images/github-icon.png diff --git a/src/pages/updates/work-in-progress/images/sketch-icon.png b/src/pages/whats-happening/work-in-progress/images/sketch-icon.png similarity index 100% rename from src/pages/updates/work-in-progress/images/sketch-icon.png rename to src/pages/whats-happening/work-in-progress/images/sketch-icon.png diff --git a/src/pages/updates/work-in-progress/index.mdx b/src/pages/whats-happening/work-in-progress/index.mdx similarity index 100% rename from src/pages/updates/work-in-progress/index.mdx rename to src/pages/whats-happening/work-in-progress/index.mdx