Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Jul 22, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .../gatsby-theme-carbon/components/Footer.js → ...y-theme-carbon/components/Footer/index.js
View file
Open in desktop
File renamed without changes.
0 .../gatsby-theme-carbon/components/Header.js → ...y-theme-carbon/components/Header/index.js
View file
Open in desktop
File renamed without changes.
12 changes: 7 additions & 5 deletions packages/example/src/pages/guides/shadowing.mdx
View file
Open in desktop
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 |