DST-401: update content of compound component (#54)

* DST-401: update content

* DST-401: add language tone

* DST-401: fix tests

* DST-401: fix vercel

src/components/SideNavigation.test.tsx

@@ -26,6 +26,6 @@ test('renders navigation links', async () => {
 
  expect(screen.getByText('Welcome')).toBeInTheDocument();
  expect(links[0]).toHaveAttribute('href', '/');
- expect(screen.getByText('Compound Component')).toBeInTheDocument();
+ expect(screen.getByText('Compound component')).toBeInTheDocument();
  expect(links[1]).toHaveAttribute('href', '/compoundComponent');
 });

src/components/SideNavigation.tsx

@@ -13,7 +13,7 @@ export const SideNavigation = () => {
  },
  {
  linkTo: '/compoundComponent',
- name: 'Compound Component',
+ name: 'Compound component',
  },
  {
  linkTo: '/state-management',

src/components/compoundComponents/Breadcrumbs/breadcrumbs.mdx

@@ -15,7 +15,6 @@ import BreadcrumbsExample from './BreadcrumbsExample';
  import Breadcrumbs from './Breadcrumbs';
 
  function App() {
- // TODO: Replace this:
  return (
  <nav aria-label="Breadcrumbs">
  <ol>
@@ -67,21 +66,17 @@ import BreadcrumbsExample from './BreadcrumbsExample';
 
  ---
 
- ## Connect the components
-
  As final step we need to connect these components.
 
  ```tsx Breadcrumbs.tsx focus=34
  // from ./Breadcrumbs.tsx
  ```
 
- You can call it weird or awesome, but JS functions can have properties.
+ We can call it weird or awesome, but JS functions can have properties.
  Functions are like objects in this way. We can "hang" data on them, like clothes hung on a clothesline.
 
  ---
 
- ## Update BreadcrumbsExample.tsx
-
  Finally we can use this compound component in our BreadcrumbsExample.tsx.
 
 

src/components/compoundComponents/Tabs/tabs.mdx

@@ -20,15 +20,15 @@ import TabsExample from './TabsExample';
  // from ./Tabs.tsx
  ````
 
- This component is essentially a wrapper that exposes the active tab state and the function that allows you to change the active tab. The context provider acts as the wrapper. So now all the children inside this container can access the activeTab and the setter function using the useContext hook.
+ This component is essentially a wrapper that exposes the active tab state and the function that allow us to change the active tab. The context provider acts as the wrapper. So now all the children inside this container can access the activeTab and the setter function using the useContext hook.
 
  ---
 
  ```tsx Tab.tsx
  // from ./Tab.tsx
  ````
 
- Then let’s add the tab component. This is the button that’ll help you to switch between sections.
+ Then let’s add the tab component. This is the button that’ll help us to switch between sections.
  On clicking this button, it triggers the `changeTab` from the context changing the `activeTab state. Any other component that’s accessing this state will be re-rendered.
 
  ---
@@ -45,7 +45,7 @@ import TabsExample from './TabsExample';
  // from ./Tabs.tsx
  ````
 
- Now default export the tabs component and attach the other sub-components to this component.
+ Now we can default export the tabs component and attach the other sub-components to this component.
 
  ---
 
@@ -54,7 +54,7 @@ import TabsExample from './TabsExample';
  ````
  Inside the TabsExample file, let’s import all our tab components and use them as we please.
 
- Note: You can add any other elements you want like the `div`. You can also use a completely different arrangement of the elements.
+ Note: We can add any other elements we want like the `div`. We can also use a completely different arrangement of the elements.
 
 </CH.Scrollycoding>