feat(shadowing): update guidelines for shadowing header and footer (#…

…1148)

packages/example/src/pages/guides/shadowing.mdx

@@ -34,16 +34,18 @@ possible and not forgo future updates.
 
 ## Shadowing basics
 
-In order to shadow a component in the theme, all you need to do is place a file
-in the `src/gatsby-theme-carbon` in your project. The file should have the same
+In order to shadow a component in the theme, all you need to do is place a directory
+in the `src/gatsby-theme-carbon` in your project. The directory should have the same
 name as the file you’re shadowing.
 
 In order to place your own title in the Header component:
 
-1. Create a file at the same directory as the component you wish to shadow.
+1. Create a directory the same name as the component you wish to shadow.
    Everything after `src/gatsby-theme-carbon/` refers to the
    [src directory of gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src).
 
+1. Create a file inside of the directory that matches the component you want to shadow. For example: `src/gatsby-theme-carbon/Header/index.js`. _If shadowing Footer or Header the file must be named **`index.js`**_
+
 1. Import the component you wish to shadow by providing the full url pointing at
    the component within the theme
 
@@ -77,5 +79,5 @@ you’ll definitely need to shadow.
 | Component     | Path                                                                                                                                                                                                                | Description                                                                        |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | ResourceLinks | [`src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js`](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/gatsby-theme-carbon/components/LeftNav/ResourceLinks.js) | The bottom links on the SideNav, pass `shouldOpenNewTabs` to open links externally |
-| Footer        | [`src/gatsby-theme-carbon/components/Footer.js`](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/gatsby-theme-carbon/components/Footer.js)                               | The links and content at the bottom of each page                                   |
-| Header        | [`src/gatsby-theme-carbon/components/Header.js`](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/gatsby-theme-carbon/components/Header.js)                               | The text in the top left corner of the UI Shell                                    |
+| Footer        | [`src/gatsby-theme-carbon/components/Footer/index.js`](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/gatsby-theme-carbon/components/Footer/index.js)                               | The links and content at the bottom of each page                                   |
+| Header        | [`src/gatsby-theme-carbon/components/Header/index.js`](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/gatsby-theme-carbon/components/Header/index.js)                               | The text in the top left corner of the UI Shell                                    |