fix: add support for top level items with tabs

carbon-design-system · May 13, 2019 · 19a319c · 19a319c
1 parent 911978d
commit 19a319c
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 6 deletions.
diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml
@@ -28,6 +28,9 @@
       path: /getting-started/about-carbon
     - title: Designers
       path: /getting-started/designers
+- title: Top Level With Tabs
+  pages:
+    - path: /top-level-with-tabs/tab-one
 - title: Resources
   pages:
     - path: /resources
diff --git a/packages/example/src/pages/top-level-with-tabs/tab-one.mdx b/packages/example/src/pages/top-level-with-tabs/tab-one.mdx
@@ -0,0 +1,89 @@
+---
+title: Tab One
+tabs: ['Tab One', 'Tab Two']
+---
+
+import {
+  AnchorLinks,
+  AnchorLink,
+  PageDescription,
+  Video,
+} from 'gatsby-theme-carbon';
+
+<PageDescription>
+  Add-on repositories, or repos, are components built for a specific product or
+  experience. The repos are built on top of the core Carbon repo, and enable
+  teams to create their own custom components that follow Carbon's visual style
+  and guidelines.
+</PageDescription>
+
+<AnchorLinks>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+</AnchorLinks>
+
+## Images
+
+![blossom](../../images/blossom.jpg)
+
+## Videos
+
+<Video title="Eyes" vimeoId="310583077" />
+
+## Checklist
+
+Please answer yes or no to the following list of questions:
+
+- Is your team using Carbon components?
+- Does your team have the need to add custom components in addition to Carbon's core components?
+- Will these components only be needed by your team?
+- Do you need these custom components to match Carbon's visual style?
+
+#### If you've answered "yes" to all the questions above...
+
+then you definitely qualify for an add-on repo! Jump to the next section to learn about the required steps to create an add-on repo.
+
+#### If you answered "no" to any of the questions above...
+
+but still feel like you need an add-on repo, please reach out to the a member of the Carbon team to discuss additional options. It might be that your component need is something that can be shared across the core Carbon organization. In this case, we can talk about how you can contribute this component back to the core Carbon repo.
+
+## Creating add-ons
+
+There are a number of growing add-on repos that can be found under the [Carbon org](https://github.com/carbon-design-system). If you'd like to create an add-on repo we have created a [vanilla boilerplate](https://github.com/carbon-design-system/carbon-boilerplate) and a [react boilerplate](https://github.com/carbon-design-system/carbon-addons-boilerplate-react) that you can clone to get started. For further assistance please reach out to a member of the carbon design team.
+
+### Private vs public
+
+Carbon Design System is an open-source project and we do encourage teams using Carbon Design System to stay open-source as well. However, if your product has privacy constraints, we can discuss options for creating an add-on repo under our GitHub Enterprise account.
+
+## Contributing to add-ons
+
+Add-ons are generally easier to contribute to because they are not fully managed by the Carbon team. Below are the items that you need to pass in order for your contribution to be accepted. You can read our full contribution process for [design](/contributing/designers) and [development](/contributing/developers) to learn more.
+
+| Category      | Metric                                              | Core library | Add-ons |
+| ------------- | --------------------------------------------------- | ------------ | ------- |
+| Accessibility | WCAG AA                                             | ✅           | ✅      |
+|               | Keyboard tabbing                                    | ✅           | ✅      |
+|               | Carbon custom focus states                          | ✅           |         |
+| Visual + UX   | Carbon themed                                       | ✅           |         |
+|               | Universal pattern <br />(fits for 2-3 use cases)    | ✅           |         |
+|               | Interaction states (hover, active, focus, disabled) | ✅           | ✅      |
+
+## Ownership
+
+Once an add-on repo has been created, the team or product that requested it is in charge of maintaining and keeping it up to date. This involves carrying over specific changes from the core Carbon repo, as well as making sure it is using the latest major version of Carbon Components.
+
+## Carbon support
+
+The table below shows the Carbon team's level of support for the Core library vs. the Add-ons repo.
+
+| Support category          | Core library | Add-ons |
+| ------------------------- | ------------ | ------- |
+| General design questions  | ✅           | ✅      |
+| Design feedback & support | ✅           |         |
+| Troubleshooting           | ✅           | ✅      |
+| Bug fixes                 | ✅           |         |
diff --git a/packages/example/src/pages/top-level-with-tabs/tab-two.mdx b/packages/example/src/pages/top-level-with-tabs/tab-two.mdx
@@ -0,0 +1,89 @@
+---
+title: Tab Two
+tabs: ['Tab One', 'Tab Two']
+---
+
+import {
+  AnchorLinks,
+  AnchorLink,
+  PageDescription,
+  Video,
+} from 'gatsby-theme-carbon';
+
+<PageDescription>
+  Add-on repositories, or repos, are components built for a specific product or
+  experience. The repos are built on top of the core Carbon repo, and enable
+  teams to create their own custom components that follow Carbon's visual style
+  and guidelines.
+</PageDescription>
+
+<AnchorLinks>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+  <AnchorLink>The foundation</AnchorLink>
+</AnchorLinks>
+
+## Images
+
+![blossom](../../images/blossom.jpg)
+
+## Videos
+
+<Video title="Eyes" vimeoId="310583077" />
+
+## Checklist
+
+Please answer yes or no to the following list of questions:
+
+- Is your team using Carbon components?
+- Does your team have the need to add custom components in addition to Carbon's core components?
+- Will these components only be needed by your team?
+- Do you need these custom components to match Carbon's visual style?
+
+#### If you've answered "yes" to all the questions above...
+
+then you definitely qualify for an add-on repo! Jump to the next section to learn about the required steps to create an add-on repo.
+
+#### If you answered "no" to any of the questions above...
+
+but still feel like you need an add-on repo, please reach out to the a member of the Carbon team to discuss additional options. It might be that your component need is something that can be shared across the core Carbon organization. In this case, we can talk about how you can contribute this component back to the core Carbon repo.
+
+## Creating add-ons
+
+There are a number of growing add-on repos that can be found under the [Carbon org](https://github.com/carbon-design-system). If you'd like to create an add-on repo we have created a [vanilla boilerplate](https://github.com/carbon-design-system/carbon-boilerplate) and a [react boilerplate](https://github.com/carbon-design-system/carbon-addons-boilerplate-react) that you can clone to get started. For further assistance please reach out to a member of the carbon design team.
+
+### Private vs public
+
+Carbon Design System is an open-source project and we do encourage teams using Carbon Design System to stay open-source as well. However, if your product has privacy constraints, we can discuss options for creating an add-on repo under our GitHub Enterprise account.
+
+## Contributing to add-ons
+
+Add-ons are generally easier to contribute to because they are not fully managed by the Carbon team. Below are the items that you need to pass in order for your contribution to be accepted. You can read our full contribution process for [design](/contributing/designers) and [development](/contributing/developers) to learn more.
+
+| Category      | Metric                                              | Core library | Add-ons |
+| ------------- | --------------------------------------------------- | ------------ | ------- |
+| Accessibility | WCAG AA                                             | ✅           | ✅      |
+|               | Keyboard tabbing                                    | ✅           | ✅      |
+|               | Carbon custom focus states                          | ✅           |         |
+| Visual + UX   | Carbon themed                                       | ✅           |         |
+|               | Universal pattern <br />(fits for 2-3 use cases)    | ✅           |         |
+|               | Interaction states (hover, active, focus, disabled) | ✅           | ✅      |
+
+## Ownership
+
+Once an add-on repo has been created, the team or product that requested it is in charge of maintaining and keeping it up to date. This involves carrying over specific changes from the core Carbon repo, as well as making sure it is using the latest major version of Carbon Components.
+
+## Carbon support
+
+The table below shows the Carbon team's level of support for the Core library vs. the Add-ons repo.
+
+| Support category          | Core library | Add-ons |
+| ------------------------- | ------------ | ------- |
+| General design questions  | ✅           | ✅      |
+| Design feedback & support | ✅           |         |
+| Troubleshooting           | ✅           | ✅      |
+| Bug fixes                 | ✅           |         |
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js
@@ -14,18 +14,21 @@ const LeftNavItem = props => {
   const { items, category } = props;
   const { toggleNavState } = useContext(NavContext);
   const closeLeftNav = () => toggleNavState('leftNavIsOpen', 'close');
-
   if (items.length === 1) {
+    const isActive = window.location.pathname.includes(
+      slugify(category, { lower: true })
+    );
     return (
       <SideNavLink
         onClick={closeLeftNav}
         icon={<span>dummy icon</span>}
         element={Link}
-        partiallyActive
-        activeClassName="bx--side-nav__link--current"
+        isActive={isActive} // TODO similar categories
         to={`${items[0].path}`}
       >
-        {category}
+        <span style={{ color: isActive ? '#171717' : 'inherit' }}>
+          {category}
+        </span>
       </SideNavLink>
     );
   }

diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js
@@ -110,7 +110,10 @@ const NextPreviousContainer = props => {
     if (prevTabItem) {
       return {
         to: `${href.replace(currentTitle, prevTabItem.slug)}`,
-        name: getName(navigationList[navIndex].title, prevTabItem.title),
+        name: getName(
+          navigationList[navIndex].title || navigationList[navIndex].category,
+          prevTabItem.title
+        ),
       };
     }
 
@@ -144,7 +147,10 @@ const NextPreviousContainer = props => {
       const href = location.pathname.replace(pathPrefix, '');
       return {
         to: `${href.replace(currentTitle, nextTabItem.slug)}`,
-        name: getName(navigationList[navIndex].title, nextTabItem.title),
+        name: getName(
+          navigationList[navIndex].title || navigationList[navIndex].category,
+          nextTabItem.title
+        ),
       };
     }