Merge branch 'master' into i-44730

docs/data/about/teamMembers.json

@@ -245,7 +245,8 @@
     "title": "Talent & Culture Partner",
     "location": "Novi Sad, Serbia",
     "locationCountry": "rs",
-    "about": "🧠 Psychology geek, 🏂 amateur snowboarder, and 𐃡 pottery enthusiast."
+    "about": "🧠 Psychology geek, 🏂 amateur snowboarder, and 𐃡 pottery enthusiast.",
+    "github": "nadjakovacev"
   },
   {
     "name": "James Nelson",

docs/scripts/reportBrokenLinks.js

@@ -64,13 +64,9 @@ function cleanLink(link) {
 }
 
 function getLinksAndAnchors(fileName) {
-  const toc = [];
   const headingHashes = {};
-  const userLanguage = 'en';
   const render = createRender({
     headingHashes,
-    toc,
-    userLanguage,
     options: {
       ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
       env: {

docs/src/components/about/OurValues.tsx

@@ -78,7 +78,6 @@ export default function OurValues() {
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
-                alignItems: 'space-between',
                 gap: 1.5,
                 background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
                 ...theme.applyDarkStyles({

docs/src/components/careers/CareersFaq.tsx

@@ -9,6 +9,8 @@ import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRound
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetail from '@mui/material/AccordionDetails';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import { createRender } from '@mui/internal-markdown';
 import { Link } from '@mui/docs/Link';
 import Section from 'docs/src/layouts/Section';
 
@@ -58,42 +60,94 @@ const AccordionDetails = styled(MuiAccordionDetail)(({ theme }) => ({
   padding: 0,
 }));
 
+// Data from https://www.notion.so/mui-org/Hiring-FAQ-64763b756ae44c37b47b081f98915501
 const faqData = [
   {
     summary: 'Are there application deadlines?',
-    detail: 'No. You can still apply if a position is visible on our careers page.',
+    detail: 'No. If a job is visible on our careers page, then you can still apply.',
   },
   {
     summary: 'Does MUI do whiteboarding during interviews?',
     detail:
       'No. We ask applicants to complete challenges that are close to their future day-to-day contributions.',
   },
   {
-    summary: 'Does MUI offer contract job opportunities?',
-    detail:
-      'Yes. People outside of France can be hired as full-time contractors. (Benefits may vary.)',
+    summary: 'Contractor or Employee?',
+    detail: `
+  People joining MUI have the choice between joining:
+
+  - under an "employee" legal type of contract
+  - under a "contractor" legal type of contract
+
+  This is up to you. This is also not set in stone, you can change it later on [Raising a change of employment request](https://www.notion.so/Raising-a-change-of-employment-request-bac24a7a73f0413c8036b2640e1df9ae?pvs=21). We design the benefits so that there are as few differences as possible between each type of contract. 
+
+  For those that chose the "employee":
+
+  - people in France are hired as full-time employees under the French [legal entity](https://www.infogreffe.com/entreprise-societe/852357748-material-ui-750119B189960000.html).
+  - people outside of France are hired through an Employer of Record (EOR), for example, Deel: https://www.deel.com/.
+`,
+  },
+  {
+    summary: 'Which countries does MUI hire from?',
+    detail: `
+We hire from as many countries as possible. However, we have a few limitations:
+
+- We favor candidates working normal hours in the UTC-6 to UTC+5 timezone range. It's not a hard requirement though. This helps us find synchronous time, e.g. for bonding.
+- We can't hire people who have a fiscal residency in Russia. If you are impacted, you would need to relocate to a different country. We don't want to help fund the current government in place.
+
+**Countries with complications**
+
+  - Bank accounts in countries we can send money to with our Wise account https://wise.com/help/articles/2571942/what-countries-can-i-send-to
+  - Countries we can use Deel in: https://help.letsdeel.com/hc/en-gb/articles/4407737728273-Where-Is-Deel-Available
+`,
+  },
+  {
+    summary: 'Does MUI offer visa sponsorship?',
+    detail: `At present, MUI does not provide visa sponsorship for individuals applying for new roles within the company. Candidates must already possess legal authorization to work in the country for which they're applying to be considered for employment.`,
+  },
+  {
+    summary: 'How would you describe the culture?',
+    detail: `
+We are documenting our [Company culture](https://www.notion.so/Company-culture-8c295a7b95564f2da03aca6759413391?pvs=21). This culture is not frozen in time, it evolves based on the needs of the organization and the opportunities we find to improve it. Assuming that most people's behavior hardly changes over time, we filter the candidates based on how we want the culture to look.
+
+Compared to other company cultures, we aim to build a team of people who:
+
+- **seeking correctness over complacency.** People who enjoy discovering the truth a lot more than being right. People who enjoy debate, embrace confusion, and reason with probabilistic models.
+- **aim for clarity of thoughts.** This is the foundation for any great teamwork.
+- **have self-determination.** They don't stop when it becomes hard, on the contrary, it's when things start to be interesting for them.
+- **see opportunities anywhere there is a struggle.** We are optimistic about the future, and we enjoy helping the people around us.
+`,
+  },
+  {
+    summary: 'Can I use AI during the hiring process?',
+    detail: `
+We don't allow AI tools anytime we test skills for which candidates wouldn't be able to use AI in the role. For example, debating the pros and cons of a decision.
+
+However, we allow candidates to use AI tools when applied to solve problems they would also use AI to solve in the role. For example, writing code.
+    `,
   },
 ];
 
-function renderFAQItem(index: number, defaultExpanded?: boolean) {
-  const faq = faqData[index];
+const render = createRender({
+  options: {
+    env: {
+      SOURCE_CODE_REPO: '',
+    },
+  },
+});
+
+function renderFAQItem(faq: (typeof faqData)[0]) {
   return (
-    <Accordion variant="outlined" defaultExpanded={defaultExpanded}>
+    <Accordion variant="outlined">
       <AccordionSummary
         expandIcon={<KeyboardArrowDownRounded sx={{ fontSize: 20, color: 'primary.main' }} />}
       >
-        <Typography variant="body2" component="h3" sx={{ fontWeight: 'bold' }}>
+        <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>
           {faq.summary}
         </Typography>
       </AccordionSummary>
-      <AccordionDetails>
-        <Typography
-          component="div"
-          variant="body2"
-          sx={{ color: 'text.secondary', '& ul': { pl: 2 } }}
-        >
-          {faq.detail}
-        </Typography>
+      <AccordionDetails sx={{ '& p:last-of-type': { mb: 0 } }}>
+        <MarkdownElement renderedMarkdown={render(faq.detail)} />
       </AccordionDetails>
     </Accordion>
   );
@@ -102,16 +156,25 @@ function renderFAQItem(index: number, defaultExpanded?: boolean) {
 export default function CareersFaq() {
   return (
     <Section bg="transparent" cozy>
-      <Typography variant="h2" sx={{ mb: { xs: 2, sm: 4 } }}>
+      <Typography id="faq" variant="h2" sx={{ mb: { xs: 2, sm: 4 } }}>
         Frequently asked questions
       </Typography>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12, md: 6 }}>
-          {renderFAQItem(0, true)}
-          {renderFAQItem(1)}
+          {faqData.map((faq, index) => {
+            if (index % 2 !== 0) {
+              return null;
+            }
+            return renderFAQItem(faq);
+          })}
         </Grid>
         <Grid size={{ xs: 12, md: 6 }}>
-          {renderFAQItem(2)}
+          {faqData.map((faq, index) => {
+            if (index % 2 !== 1) {
+              return null;
+            }
+            return renderFAQItem(faq);
+          })}
           <Paper
             variant="outlined"
             sx={(theme) => ({

docs/src/components/productDesignKit/DesignKitFAQ.tsx

@@ -145,7 +145,7 @@ export default function DesignKitFAQ() {
   }
   return (
     <Section>
-      <Typography variant="h2" sx={{ mb: { xs: 2, sm: 4 } }} id="faq">
+      <Typography id="faq" variant="h2" sx={{ mb: { xs: 2, sm: 4 } }}>
         Frequently asked questions
       </Typography>
       <Grid container spacing={2}>

docs/src/components/typography/SectionHeadline.tsx

@@ -17,7 +17,7 @@ interface SectionHeadlineProps {
 export default function SectionHeadline(props: SectionHeadlineProps) {
   const { alwaysCenter = false, description, id, inverted = false, overline, title } = props;
   return (
-    <Box sx={{ m: alwaysCenter ? 'auto' : 'none' }}>
+    <Box sx={{ m: alwaysCenter ? 'auto' : null }}>
       {overline && (
         <Typography
           id={id}
@@ -27,7 +27,6 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
             fontWeight: 'bold',
             color: 'primary.main',
             mb: 1,
-
             ...(alwaysCenter && {
               textAlign: 'center',
             }),

packages/markdown/index.d.ts

@@ -6,10 +6,11 @@ interface TableOfContentsEntry {
 }
 
 export function createRender(context: {
-  headingHashes: Record<string, string>;
-  toc: TableOfContentsEntry[];
-  userLanguage: string;
-  ignoreLanguagePages: (path: string) => boolean;
+  headingHashes?: Record<string, string>;
+  toc?: TableOfContentsEntry[];
+  userLanguage?: string;
+  ignoreLanguagePages?: (path: string) => boolean;
+  options: object;
 }): (markdown: string) => string;
 
 export interface MarkdownHeaders {

packages/markdown/parseMarkdown.js

@@ -291,13 +291,13 @@ const noSEOadvantage = [
  * @property {number} level
  * @property {string} text
  * @param {object} context
- * @param {Record<string, string>} context.headingHashes - WILL BE MUTATED
- * @param {TableOfContentsEntry[]} context.toc - WILL BE MUTATED
- * @param {string} context.userLanguage
+ * @param {Record<string, string>} [context.headingHashes] - WILL BE MUTATED
+ * @param {TableOfContentsEntry[]} [context.toc] - WILL BE MUTATED
+ * @param {string} [context.userLanguage]
  * @param {object} context.options
  */
 function createRender(context) {
-  const { headingHashes, toc, userLanguage, options } = context;
+  const { headingHashes = {}, toc = [], userLanguage = 'en', options } = context;
   const headingHashesFallbackTranslated = {};
   let headingIndex = -1;