@atlaskit/side-navigation 1.1.2

package/docs/button-item.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+  ${(
+    <SectionMessage title="Important usage instructions">
+      The <a href="section">section component</a> is required to be used to
+      ensure spacing around blocks of items exists! Make sure to use it.
+    </SectionMessage>
+  )}
+
+  Will render an item wrapped in a button tag \`<button>\` -
+  useful when you have an action that does something _other than_ changing routes.
+
+  ${code`
+import { ButtonItem } from '@atlaskit/side-navigation';
+
+<ButtonItem>Create article</ButtonItem>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/button-item.tsx').default}
+      source={require('!!raw-loader!../examples/button-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/button-item')}
+    />
+  )}
+`;

package/docs/custom-item.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+  ${(
+    <SectionMessage title="Important usage instructions">
+      The <a href="section">section component</a> is required to be used to
+      ensure spacing around blocks of items exists! Make sure to use it.
+    </SectionMessage>
+  )}
+
+  Useful when wanting to create a item using a your own component that inherits the look and feel of a menu item.
+  Use cases could include using your own router link component for example.
+
+  Your custom component will be given 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.
+
+  ${code`
+import { CustomItem, CustomItemComponentProps } from '@atlaskit/side-navigation';
+
+const Container = (props: CustomItemComponentProps) => {
+  return <span {...props}>{children}</span>;
+};
+
+<CustomItem component={Container}>Create article</CustomItem>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/custom-item.tsx').default}
+      source={require('!!raw-loader!../examples/custom-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/extract-react-types/custom-item-hack-for-ert')}
+    />
+  )}
+`;

package/docs/go-back-item.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+
+export default md`
+  Used when wanting to customize the go back button in [nestable navigation content](/packages/navigation/side-navigation/docs/nestable-navigation-content) and [nesting item](/packages/navigation/side-navigation/docs/nesting-item).
+  The most common case for this is needing to translate the text,
+  but another would be if you want an SPA transition to happen when a user interacts with the element.
+
+  ${code`
+import { GoBackItem } from '@atlaskit/side-navigation';
+
+<GoBackItem>Back to project</GoBackItem>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/go-back-item.tsx').default}
+      source={require('!!raw-loader!../examples/go-back-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/button-item')}
+    />
+  )}
+`;

package/docs/heading-item.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+
+export default md`
+  Heading that should be displayed inside a [section](/packages/navigation/side-navigation/docs/section).
+  When using the \`title\` prop you won't need to use this directly.
+
+  ${code`
+import { HeadingItem } from '@atlaskit/side-navigation';
+
+<HeadingItem>Actions</HeadingItem>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/heading-item.tsx').default}
+      source={require('!!raw-loader!../examples/heading-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/heading-item')}
+    />
+  )}
+`;

package/docs/link-item.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+  ${(
+    <SectionMessage title="Important usage instructions">
+      The <a href="section">section component</a> is required to be used to
+      ensure spacing around blocks of items exists! Make sure to use it.
+    </SectionMessage>
+  )}
+
+  Will render an item wrapped in an anchor tag \`<a>\` -
+  useful when you have an item that should change routes.
+  If wanting to do SPA transitions make sure to use a [custom item](/packages/navigation/side-navigation/docs/custom-item) with your router link instead.
+
+  ${code`
+import { LinkItem } from '@atlaskit/side-navigation';
+
+<LinkItem href="#">My articles</LinkItem>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/link-item.tsx').default}
+      source={require('!!raw-loader!../examples/link-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/link-item')}
+    />
+  )}
+`;

package/docs/nesting-item.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+
+export default md`
+  Used to create a nested view inside a [nestable navigation content](/packages/navigation/side-navigation/docs/nestable-navigation-content) component.
+  Will only work inside one - if you render it outside you'll get an error.
+  You can infinitely nest nesting items,
+  but the rule of thumb is try and limit nesting to three layers.
+
+  Will render its children when the view is active,
+  else will render itself as a button item waiting to be interacted with.
+  Once interacted,
+  the nested view will be shown.
+
+  ${code`highlight=7,11
+import {
+  NestableNavigationContent,
+  NestingItem
+} from '@atlaskit/side-navigation';
+
+<NavigationHeader label="project">
+  <NavigationHeader>
+    <Header>Money machine</Header>
+  </NavigationHeader>
+  <NestableNavigationContent>
+    <Section>
+      <NestingItem title="Print money">
+        <Section>
+          <ButtonItem>Money printed</ButtonItem>
+        </Section>
+      </NestingItem>
+    </Section>
+  </NestableNavigationContent>
+</NavigationHeader>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/nesting-item').default}
+      source={require('!!raw-loader!../examples/nesting-item')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      props={require('!!extract-react-types-loader!../src/components/NestingItem/hack-for-ert')}
+    />
+  )}
+`;

package/docs/section.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+  ${(
+    <SectionMessage title="Important usage instructions">
+      Section is required to be used to ensure spacing around blocks of items
+      exists! Make sure to use it.
+    </SectionMessage>
+  )}
+
+  Used to separate items into sections.
+  When using the \`title\` prop your section will implicitly group the items for screen readers without you needing to do anything.
+
+  ${code`
+import { Section } from '@atlaskit/side-navigation';
+
+<Section title="Actions">
+  <ButtonItem>Create issue</ButtonItem>
+</Section>
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/section.tsx').default}
+      source={require('!!raw-loader!../examples/section.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../src/components/Section/section')}
+    />
+  )}
+`;

package/docs/skeleton-heading-item.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+
+export default md`
+  Renders a skeleton which should be used in place of any heading item that is currently loading.
+  See [loading states](/packages/navigation/side-navigation/docs/loading-states) for best practices.
+
+${code`
+import { SkeletonHeadingItem } from '@atlaskit/side-navigation';
+
+<SkeletonHeadingItem />
+`}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/skeleton-heading-item.tsx').default}
+      source={require('!!raw-loader!../examples/skeleton-heading-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/skeleton-heading-item')}
+    />
+  )}
+`;

package/docs/skeleton-item.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { code, Example, md, Props } from '@atlaskit/docs';
+
+export default md`
+  Renders a skeleton which should be used in place any any item that is currently loading.
+  See [loading states](/packages/navigation/side-navigation/docs/loading-states) for best practices.
+
+  ${code`
+import { SkeletonItem } from '@atlaskit/side-navigation';
+
+<SkeletonItem />
+  `}
+
+  ${(
+    <Example
+      title=""
+      Component={require('../examples/skeleton-item.tsx').default}
+      source={require('!!raw-loader!../examples/skeleton-item.tsx')}
+    />
+  )}
+
+  ${(
+    <Props
+      heading="Props"
+      // We point to the original props object because for some reason ERT can't follow package boundaries.
+      props={require('!!extract-react-types-loader!../../../design-system/menu/src/menu-item/skeleton-item')}
+    />
+  )}
+`;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@atlaskit/side-navigation",
+  "version": "1.1.2",
+  "description": "A highly composable side navigation component that supports nested views.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "atlassian": {
+    "team": "Design System Team",
+    "deprecatedAutoEntryPoints": true,
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Side navigation"
+    }
+  },
+  "dependencies": {
+    "@atlaskit/ds-lib": "^1.1.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/menu": "^1.1.0",
+    "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.2.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/atlassian-navigation": "^1.1.0",
+    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/docs": "*",
+    "@atlaskit/logo": "^13.5.0",
+    "@atlaskit/onboarding": "^10.1.0",
+    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/select": "^15.2.0",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
+    "@types/jest-axe": "^3.5.0",
+    "ast-types": "^0.13.3",
+    "jest-axe": "^4.0.0",
+    "jest-emotion": "^10.0.32",
+    "jscodeshift": "^0.13.0",
+    "raf-stub": "^2.0.1",
+    "react-beautiful-dnd": "^12.1.1",
+    "typescript": "3.9.6"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "examples/**/*.ts",
+    "examples/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "baseUrl": "./"
+  }
+}