Skip to content

Commit

Permalink
feat(shadowing): update guidelines for shadowing header and footer (#…
Browse files Browse the repository at this point in the history 
…1148)
  • Loading branch information
Alessandra Davila authored Jul 22, 2021
1 parent 0feddd5 commit 33b0493
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 5 deletions.
0 .../gatsby-theme-carbon/components/Footer.js → ...y-theme-carbon/components/Footer/index.js
View file
File renamed without changes.
0 .../gatsby-theme-carbon/components/Header.js → ...y-theme-carbon/components/Header/index.js
View file
File renamed without changes.
12 changes: 7 additions & 5 deletions packages/example/src/pages/guides/shadowing.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 |

1 comment on commit 33b0493

@vercel
Copy link

@vercel vercel bot commented on 33b0493 Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.