@atlaskit/side-navigation 1.2.12 → 1.2.13

package/docs/99-loading-states.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import { code, Example, md, Props } from '@atlaskit/docs';
-
-export default md`
-  Occasionally you will need to asynchronously load some of your side nav.
-  There are a few things to take care of:
-
-  1. Only use skeletons when you're quite certain of what the loaded state will look like.
-  The majority of items that would appear in side navigation are probably fine to use with skeletons,
-  for example \`@atlaskit/tree\`
-  1. 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 solid**,
-  which means it doesn't jump around
-  1. 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 you can
-  1. When content is loading in make sure it all loads in at once altogether - our minds aren't fast enough to distinguish each item loading individually for example,
-  and it would appear slower to the majority of users
-
-  For a more in-depth look at how to approach loading states have our _work in progress_ [Skeleton exploration](https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)) (only Atlassians will be able to access this link unfortuntely).
-
-  ${code`highlight=1,9-17,21
-import {
-  LoadingItems,
-  SectionHeading,
-  SkeletonItem
-} from '@atlaskit/side-navigation';
-
-<SideNavigation>
-  <NavigationContent>
-    <LoadingItems
-      isLoading={isLoading}
-      fallback={
-        <>
-          <SectionHeading>Project settings</SectionHeading>
-          <SkeletonItem />
-        </>
-      }
-    >
-      <Section title="Project settings">
-        <ButtonItem>Details</ButtonItem>
-      </Section>
-    </LoadingItems>
-  <NavigationContent>
-<SideNavigation>
-  `}
-
-  ${(
-    <Example
-      title=""
-      Component={require('../examples/07-loading-section.tsx').default}
-      source={require('!!raw-loader!../examples/07-loading-section.tsx')}
-    />
-  )}
-
-  ${(
-    <Props
-      heading="Props"
-      props={require('!!extract-react-types-loader!../src/components/LoadingItems')}
-    />
-  )}
-
-  ## React Suspense
-
-  If you're using [Suspense](https://reactjs.org/docs/code-splitting.html#reactlazy) you'll want to use it instead of using the loading items component.
-  Unfortunately you won't be able to cross-fade between states,
-  but you will simplify your code quite a bit.
-
-  ${code`highlight=1,6-15
-import { Suspense } from 'react';
-import { SectionHeading, SkeletonItem } from '@atlaskit/side-navigation';
-
-<SideNavigation>
-  <NavigationContent>
-    <Suspense
-      fallback={
-        <>
-          <SectionHeading>Project settings</SectionHeading>
-          <SkeletonItem />
-        </>
-      }
-    >
-      <LazyItems />
-    </Suspense>
-  <NavigationContent>
-<SideNavigation>
-  `}
-
-  ${(
-    <Example
-      title=""
-      Component={require('../examples/08-suspense-loading-section.tsx').default}
-      source={require('!!raw-loader!../examples/08-suspense-loading-section.tsx')}
-    />
-  )}
-`;

package/docs/button-item.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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')}
-    />
-  )}
-`;