@atlaskit/navigation-system 0.166.0

package/README.md

@@ -0,0 +1,26 @@
+# Navigation System
+
+The latest navigation system for Atlassian products.
+
+Atlassian’s navigation is made of these basic parts:
+
+- The layout defines clear areas for navigation elements
+- Side navigation menus create a consistent feel for actions and links
+- Top navigation elements provide familiar spots for common features
+
+## Installation
+
+Note: the package will be renamed to `@atlaskit/navigation-system` in the next release, and will be
+made public and published to npm. The existing `@atlassian/navigation-system` package will still be
+available in Atlassian's internal registry, but will be deprecated. There will be no support for the
+private package going forwards - you should migrate to the new `@atlaskit/navigation-system`
+package.
+
+```sh
+yarn add @atlaskit/navigation-system
+```
+
+## Usage
+
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/navigation-system/).

package/afm-cc/tsconfig.json

@@ -0,0 +1,75 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "declaration": true,
+        "target": "es5",
+        "composite": true,
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__navigation-system",
+        "rootDir": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*"
+    ],
+    "references": [
+        {
+            "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../avatar/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../button/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../css/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../ds-lib/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../icon/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../layering/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../logo/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../popup/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../pragmatic-drag-and-drop/core/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../pragmatic-drag-and-drop/hitbox/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../primitives/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../navigation/temp-nav-app-icons/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../tokens/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../tooltip/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../visually-hidden/afm-cc/tsconfig.json"
+        }
+    ]
+}

package/afm-jira/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-jira/tsconfig.json"
+		}
+	]
+}

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-post-office/tsconfig.json"
+		}
+	]
+}

package/afm-townsquare/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.townsquare.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../townsquare/tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-townsquare/tsconfig.json"
+		}
+	]
+}

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/constellation/index/examples.mdx

@@ -0,0 +1,44 @@
+import SectionMessage from '@atlaskit/section-message';
+
+import { IntegrationLayoutExample } from '../../examples/constellation/integration';
+
+Navigation is how users get around a site to complete their tasks.
+
+## Overview
+
+Atlassian’s navigation is made of these basic parts:
+
+- The [layout](/components/navigation-system/layout) defines clear areas for navigation elements
+- [Side navigation menus](/components/navigation-system/side-navigation) create a consistent feel
+  for actions and links
+- [Top navigation elements](/components/navigation-system/top-navigation) provide familiar spots for
+  common features
+
+These layout and menu areas contain the app switcher, search, and other key features in Atlassian
+products.
+
+<SectionMessage title="Required: Compiled CSS configuration">
+	<p>
+		Compiled CSS must be configured in your application to ensure styles are correctly applied. See
+		the <a href="/get-started/develop#set-up-your-bundling-environment">get started page</a> for
+		steps.
+	</p>
+	<p>
+		For Atlassian staff, you can also refer to{' '}
+		<a href="https://go.atlassian.com/configure-compiled" target="_blank">
+			go/configure-compiled
+		</a>
+	</p>
+</SectionMessage>
+
+<!-- TODO: add go-link to hub. [Get details on navigation parts and what goes in them (Atlassians only)](/link-text)
+ -->
+
+## Basic example
+
+To see in full-screen, open the code sandbox below.
+
+<!-- Only showing source to prevent nested context errors, as the example's `Root` is nested
+inside the docs website's `Root` -->
+
+<Example Component={IntegrationLayoutExample} appearance="source-only" />

package/constellation/index/props.mdx

@@ -0,0 +1 @@
+Props

package/constellation/layout/code.mdx

@@ -0,0 +1,129 @@
+---
+title: Layout
+description:
+  Layout components define consistent areas for navigation menus and other elements in the page
+  structure.
+order: 2
+props:
+  packageName: '@atlaskit/navigation-system'
+  exports:
+    - Root
+    - Banner
+    - TopNav
+    - TopNavStart
+    - TopNavMiddle
+    - TopNavEnd
+    - SideNav
+    - SideNavHeader
+    - SideNavContent
+    - SideNavFooter
+    - Main
+    - MainStickyHeader
+    - Aside
+    - Panel
+    - PanelSplitter
+    - SideNavToggleButton
+---
+
+## Props
+
+### Root
+
+The root component of the navigation system, wrapping the entire view.
+
+<TSMorphProps exportName="Root" packageName="@atlaskit/navigation-system" />
+
+### Banner
+
+The banner layout area. It will always be displayed at the top of the screen.
+
+<TSMorphProps exportName="Banner" packageName="@atlaskit/navigation-system" />
+
+### TopNav
+
+The top nav layout area. It will display at the top of the screen, below the banner if one is
+present.
+
+<TSMorphProps exportName="TopNav" packageName="@atlaskit/navigation-system" />
+
+### TopNavStart
+
+Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
+
+<TSMorphProps exportName="TopNavStart" packageName="@atlaskit/navigation-system" />
+
+### TopNavMiddle
+
+Wrapper for the actions in the middle of the top navigation.
+
+<TSMorphProps exportName="TopNavMiddle" packageName="@atlaskit/navigation-system" />
+
+### TopNavEnd
+
+Wrapper for the top navigation actions on the inline-end (right) side of the top navigation.
+
+<TSMorphProps exportName="TopNavEnd" packageName="@atlaskit/navigation-system" />
+
+### SideNav
+
+Use the SideNav area to render side navigation items. It will show on the left (inline start) of the
+screen.
+
+<TSMorphProps exportName="SideNav" packageName="@atlaskit/navigation-system" />
+
+<!-- Not using level 4 heading for side nav layout areas as they won't be added to table of contents -->
+
+### SideNavHeader
+
+The top part of the side nav.
+
+<TSMorphProps exportName="SideNavHeader" packageName="@atlaskit/navigation-system" />
+
+### SideNavContent
+
+The main content of the side nav, filling up the middle section. It acts as a scroll container.
+
+<TSMorphProps exportName="SideNavContent" packageName="@atlaskit/navigation-system" />
+
+### SideNavFooter
+
+The bottom part of the side nav.
+
+<TSMorphProps exportName="SideNavFooter" packageName="@atlaskit/navigation-system" />
+
+### Main
+
+Use the Main area for the main page content.
+
+<TSMorphProps exportName="Main" packageName="@atlaskit/navigation-system" />
+
+### MainStickyHeader
+
+The sticky header of the main layout area.
+
+<TSMorphProps exportName="MainStickyHeader" packageName="@atlaskit/navigation-system" />
+
+### Aside
+
+The Aside layout area is rendered to the right (inline end) of the Main area.
+
+<TSMorphProps exportName="Aside" packageName="@atlaskit/navigation-system" />
+
+### Panel
+
+The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if
+it is present. On small viewports, the Panel slot will become an overlay.
+
+<TSMorphProps exportName="Panel" packageName="@atlaskit/navigation-system" />
+
+### Panel splitter
+
+A component that allows the user to resize a layout area.
+
+<TSMorphProps exportName="PanelSplitter" packageName="@atlaskit/navigation-system" />
+
+### SideNavToggleButton
+
+Button for toggling the side nav. It should be used in the top bar.
+
+<TSMorphProps exportName="SideNavToggleButton" packageName="@atlaskit/navigation-system" />