@atlaskit/side-navigation 1.2.8 → 1.2.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/side-navigation
 
+## 1.2.9
+
+### Patch Changes
+
+- [`85ca75319b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85ca75319b1) - Move side-navigation docs to Constellation (atlassian.design)
+
 ## 1.2.8
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # Side Navigation
 
-The new side navigation experience used in Atlassian products.
+A side navigation experience used in Atlassian products.
 
 ## Installation
 
@@ -10,7 +10,7 @@ yarn add @atlaskit/side-navigation
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/navigation/side-navigation).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/side-navigation).
 
-To add a top navigation, use [@atlaskit/atlassian-navigation](https://atlaskit.atlassian.com/packages/navigation/atlassian-navigation)
+To add a top navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation)
 To control the layout of these navigation elements and add expand/collapse functionality to `side-navigation`, use [@atlaskit/page-layout](https://atlaskit.atlassian.com/packages/design-system/page-layout).

package/constellation/index/examples.mdx

@@ -0,0 +1,97 @@
+---
+order: 0
+---
+
+import ButtonItemExample from '../../examples/constellation/button-item';
+import ContainerExample from '../../examples/constellation/container';
+import ContentExample from '../../examples/constellation/content';
+import CustomItemExample from '../../examples/constellation/custom-item';
+import DefaultExample from '../../examples/constellation/default';
+import GoBackExample from '../../examples/constellation/go-back';
+import HeaderAndFooterExample from '../../examples/constellation/header-and-footer';
+import LinkItemExample from '../../examples/constellation/link-item';
+import LoadingExample from '../../examples/constellation/loading';
+import NestedExample from '../../examples/constellation/nested';
+import SectionExample from '../../examples/constellation/section';
+
+## Default
+
+A side navigation example showing all [components](#side-navigation-components) and [items](#side-navigation-items) composed together.
+
+<Example Component={DefaultExample} packageName="@atlaskit/side-navigation" />
+
+## Side navigation components
+
+### Container
+
+Uses 100% of its parent's height and width, so make sure to place it into an element with explicit values set.<br />
+**Minimum width of 240px.**
+
+<Example Component={ContainerExample} packageName="@atlaskit/side-navigation"/>
+
+### Header and footer
+
+You can customise header and footer using `NavigationHeader` and `NavigationFooter`.
+
+<Example Component={HeaderAndFooterExample} packageName="@atlaskit/side-navigation"/>
+
+### Content
+
+Used as the container for [navigation items](#side-navigation-items). For nested views see the following example.
+
+<Example Component={ContentExample} packageName="@atlaskit/side-navigation"/>
+
+### Section
+
+Used to separate items into sections. Using the `title` prop makes a section implicitly group the items for screen readers with no additional work required.
+
+<Example Component={SectionExample} packageName="@atlaskit/side-navigation"/>
+
+### Nested navigation
+
+The container for navigation items with nested views is `NestableNavigationContent`.
+
+<Example Component={NestedExample} packageName="@atlaskit/side-navigation"/>
+
+## Side navigation items
+
+Granular items that can be rendered as part of the navigation experience.<br />
+The `Section` component **must** be used to ensure consistent spacing around blocks of items.
+
+### Go back item
+
+This item is used to provide a customized "go back" button in nested navigations.
+
+<Example Component={GoBackExample} packageName="@atlaskit/side-navigation"/>
+
+### Link item
+
+Renders an item wrapped in an anchor tag, useful when you have an item that should change routes using native browser navigation.
+
+For custom SPA transitions use a custom item with the respective router logic, following the next example.
+
+<Example Component={LinkItemExample} packageName="@atlaskit/side-navigation"/>
+
+### Custom item
+
+Handles use cases where a custom router link component is needed.
+
+The custom component receives all overflow props passed to the custom item component, as well as when using TypeScript will add the custom component props to the root component props type for type safety.
+
+<Example Component={CustomItemExample} packageName="@atlaskit/side-navigation"/>
+
+### Button item
+
+Renders an item wrapped in a button tag, used primarily when an action does something other than changing routes.
+
+<Example Component={ButtonItemExample} packageName="@atlaskit/side-navigation"/>
+
+### Heading item
+
+Available for advanced use cases, for most situations providing a `title` to `Section` should be enough.
+
+## Loading
+
+Use loading skeletons to reduce the perceived loading time.
+
+<Example Component={LoadingExample} packageName="@atlaskit/side-navigation"/>

package/constellation/index/props.mdx

@@ -0,0 +1,30 @@
+import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation'
+import HeaderProps from '!!extract-react-types-loader!../../src/components/Header'
+import FooterProps from '!!extract-react-types-loader!../../src/components/Footer'
+import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent'
+import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent'
+import SectionProps from '!!extract-react-types-loader!../../src/components/Section'
+
+### Navigation props
+
+<PropsTable heading="" props={SideNavigationProps}/>
+
+### Header props
+
+<PropsTable heading="" props={HeaderProps}/>
+
+### Footer props
+
+<PropsTable heading="" props={FooterProps}/>
+
+### Content props
+
+<PropsTable heading="" props={NavigationContentProps}/>
+
+### Nestable content props
+
+<PropsTable heading="" props={NestableNavigationContentProps}/>
+
+### Section props
+
+<PropsTable heading="" props={SectionProps}/>

package/constellation/index/usage.mdx

@@ -0,0 +1,24 @@
+---
+order: 2
+---
+
+import DoDont from '@atlaskit/gatsby-theme-brisk/src/components/do-dont';
+import buttonConciseDo from './images/button-concise-do.png';
+import buttonConciseDont from './images/button-concise-dont.png';
+import buttonCapitalizationDo from './images/button-capitalization-do.png';
+import buttonCapitalizationDont from './images/button-capitalization-dont.png';
+import buttonActionDo from './images/button-action-do.png';
+import buttonActionDont from './images/button-action-dont.png';
+
+## Usage
+
+### Loading states
+
+Occasionally it's necessary to load some of the side navigation content asynchronously. There are a few things to take care of
+
+* Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
+* When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels __stable__, which means it doesn't jump around when content loads.
+* Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
+* When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
+
+For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)) (content restricted to Atlassian staff).

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.2.8",
+	"version": "1.2.9",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.2.8",
+	"version": "1.2.9",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.2.8",
+	"version": "1.2.9",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -67,5 +67,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlassian.design/components/side-navigation/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }