Merge pull request #452 from lumapps/chore/demos-in-sb

chore: add component demos in storybook

packages/lumx-react/src/components/avatar/Avatar.stories.tsx

@@ -6,7 +6,7 @@ import { Avatar } from './Avatar';
 
 import { select, text } from '@storybook/addon-knobs';
 
-export default { title: 'LumX components/Avatar' };
+export default { title: 'LumX components/avatar/Avatar' };
 
 /**
  * Avatar stories showing a simple Avatar with different sizes.

packages/lumx-react/src/components/avatar/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/avatar/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/avatar/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/avatar/react

packages/lumx-react/src/components/badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVaria
 import { select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
-export default { title: 'LumX components/Badge' };
+export default { title: 'LumX components/badge/Badge' };
 
 export const simpleBadgeWithValue = () => (
     <Badge color={select('Colors', ColorPalette, ColorPalette.blue)}>

packages/lumx-react/src/components/badge/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/badge/Demos' };

packages/lumx-react/src/components/badge/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/badge/react

packages/lumx-react/src/components/button/Button.stories.tsx

@@ -5,7 +5,7 @@ import { DEFAULT_PROPS } from '@lumx/react/components/button/Button';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
-export default { title: 'LumX components/Button' };
+export default { title: 'LumX components/button/Button' };
 
 export const simpleButton = ({ theme }: any) => {
     return (

packages/lumx-react/src/components/button/Demos.stories.tsx

@@ -0,0 +1,6 @@
+export default { title: 'LumX components/button/Demos' };
+
+export { default as EmphasisHigh } from './demos/emphasis-high';
+export { default as EmphasisLow } from './demos/emphasis-low';
+export { default as EmphasisMedium } from './demos/emphasis-medium';
+export { default as Small } from './demos/small';

packages/lumx-react/src/components/button/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/button/react

packages/lumx-react/src/components/checkbox/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import React, { useState } from 'react';
 
-export default { title: 'LumX components/Checkbox' };
+export default { title: 'LumX components/checkbox/Checkbox' };
 
 export const simpleSelect = ({ theme }: any) => {
     const [value, setValue] = useState(false);

packages/lumx-react/src/components/checkbox/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/checkbox/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/checkbox/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/checkbox/react

packages/lumx-react/src/components/chip/Chip.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { mdiClose, mdiViewList } from '@lumx/icons';
 import { Chip, Icon } from '@lumx/react';
 
-export default { title: 'LumX components/Chip' };
+export default { title: 'LumX components/chip/Chip' };
 
 export const simple = ({ theme }: any) => <Chip theme={theme}>The chip</Chip>;
 

packages/lumx-react/src/components/chip/Demos.stories.tsx

@@ -0,0 +1,8 @@
+export default { title: 'LumX components/chip/Demos' };
+
+export { default as Choice } from './demos/choice';
+export { default as Default } from './demos/default';
+export { default as Dismissible } from './demos/dismissible';
+export { default as Filter } from './demos/filter';
+export { default as Group } from './demos/group';
+export { default as Small } from './demos/small';

packages/lumx-react/src/components/chip/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/chip/react

packages/lumx-react/src/components/comment-block/Demos.stories.tsx

@@ -0,0 +1,5 @@
+export default { title: 'LumX components/comment-block/Demos' };
+
+export { default as Default } from './demos/default';
+export { default as Relevant } from './demos/relevant';
+export { default as Threaded } from './demos/threaded';

packages/lumx-react/src/components/comment-block/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/comment-block/react

packages/lumx-react/src/components/date-picker/DatePickerField.stories.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 
 import { DatePickerField, DatePickerProps } from '@lumx/react';
 
-export default { title: 'LumX components/DatePickerField' };
+export default { title: 'LumX components/date-picker/DatePickerField' };
 
 export const simple = ({ theme }: any) => {
     const [value, setValue] = React.useState<DatePickerProps['value']>();

packages/lumx-react/src/components/date-picker/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/date-picker/Demos' };

packages/lumx-react/src/components/date-picker/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/date-picker/react

packages/lumx-react/src/components/dialog/Demos.stories.tsx

@@ -0,0 +1,7 @@
+export default { title: 'LumX components/dialog/Demos' };
+
+export { default as Action } from './demos/action';
+export { default as Default } from './demos/default';
+export { default as PreventAutoDismiss } from './demos/prevent-auto-dismiss';
+export { default as Scrollable } from './demos/scrollable';
+export { default as Sizes } from './demos/sizes';

packages/lumx-react/src/components/dialog/Dialog.stories.tsx

@@ -17,7 +17,7 @@ import { DialogSizes } from '@lumx/react/components/dialog/Dialog';
 import { select } from '@storybook/addon-knobs';
 import React, { RefObject, useRef, useState } from 'react';
 
-export default { title: 'LumX components/Dialog' };
+export default { title: 'LumX components/dialog/Dialog' };
 
 function useOpenButton(theme: Theme) {
     const buttonRef = useRef() as RefObject<HTMLButtonElement>;

packages/lumx-react/src/components/dialog/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/dialog/react

packages/lumx-react/src/components/divider/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/divider/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/divider/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/divider/react

packages/lumx-react/src/components/drag-handle/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/drag-handle/Demos' };

packages/lumx-react/src/components/drag-handle/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/drag-handle/react

packages/lumx-react/src/components/expansion-panel/Demos.stories.tsx

@@ -0,0 +1,6 @@
+export default { title: 'LumX components/expansion-panel/Demos' };
+
+export { default as Default } from './demos/default';
+export { default as DragHandle } from './demos/drag-handle';
+export { default as Examples } from './demos/examples';
+export { default as Trimmed } from './demos/trimmed';

packages/lumx-react/src/components/expansion-panel/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/expansion-panel/react

packages/lumx-react/src/components/flex-box/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/flex-box/Demos' };

packages/lumx-react/src/components/flex-box/FlexBox.stories.tsx

@@ -8,7 +8,7 @@ import isArray from 'lodash/isArray';
 import { DEFAULT_PROPS, FlexBox, FlexBoxProps } from './FlexBox';
 /*  tslint:disable object-literal-sort-keys */
 
-export default { title: 'LumX components/FlexBox' };
+export default { title: 'LumX components/flex-box/FlexBox' };
 
 type FlexBoxPropName = keyof FlexBoxProps;
 const flexViewKnobConfigs: Array<

packages/lumx-react/src/components/flex-box/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/flex-box/react

packages/lumx-react/src/components/grid/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/grid/Demos' };

packages/lumx-react/src/components/grid/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/grid/react

packages/lumx-react/src/components/icon/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/icon/Demos' };

packages/lumx-react/src/components/icon/Icon.stories.tsx

@@ -4,7 +4,7 @@ import { mdiEmail } from '@lumx/icons';
 import { ColorPalette, FlexBox, Icon, IconSizes, Size } from '@lumx/react';
 import { Orientation } from '..';
 
-export default { title: 'LumX components/Icon' };
+export default { title: 'LumX components/icon/Icon' };
 
 const iconSizes: Array<IconSizes | undefined> = [
     undefined,

packages/lumx-react/src/components/icon/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/icon/react

packages/lumx-react/src/components/image-block/Demos.stories.tsx

@@ -0,0 +1,6 @@
+export default { title: 'LumX components/image-block/Demos' };
+
+export { default as Default } from './demos/default';
+export { default as ImageBlockAlignment } from './demos/image-block-alignment';
+export { default as ImageBlockOver } from './demos/image-block-over';
+export { default as ImageBlockPadding } from './demos/image-block-padding';

packages/lumx-react/src/components/image-block/ImageBlock.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Alignment, AspectRatio, Chip, ChipGroup, ImageBlock, Size } from '@lumx/react';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 
-export default { title: 'LumX components/Image Block' };
+export default { title: 'LumX components/image-block/Image Block' };
 
 const numberKnobOptions = {
     max: 1,

packages/lumx-react/src/components/image-block/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/image-block/react

packages/lumx-react/src/components/input-helper/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/input-helper/Demos' };

packages/lumx-react/src/components/input-helper/InputHelper.stories.tsx

@@ -2,7 +2,7 @@ import { InputHelper, Kind } from '@lumx/react';
 import { text } from '@storybook/addon-knobs';
 import React from 'react';
 
-export default { title: 'LumX components/Input Helper' };
+export default { title: 'LumX components/input-helper/Input Helper' };
 
 export const informationHelper = ({ theme }: any) => (
     <InputHelper kind={Kind.info} theme={theme}>

packages/lumx-react/src/components/input-helper/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/input-helper/react

packages/lumx-react/src/components/input-label/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/input-label/Demos' };

packages/lumx-react/src/components/input-label/InputLabel.stories.tsx

@@ -4,6 +4,6 @@ import { text } from '@storybook/addon-knobs';
 
 import { InputLabel } from './InputLabel';
 
-export default { title: 'LumX components/Input Label' };
+export default { title: 'LumX components/input-label/Input Label' };
 
 export const simpleLabel = ({ theme }: any) => <InputLabel theme={theme}>{text('Label', 'The label')}</InputLabel>;

packages/lumx-react/src/components/input-label/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/input-label/react

packages/lumx-react/src/components/lightbox/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/lightbox/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/lightbox/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/lightbox/react

packages/lumx-react/src/components/link-preview/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/link-preview/Demos' };

packages/lumx-react/src/components/link-preview/LinkPreview.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Size } from '..';
 import { LinkPreview } from './LinkPreview';
 
-export default { title: 'LumX components/Link preview' };
+export default { title: 'LumX components/link-preview/Link preview' };
 
 const LONG_LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam sollicitudin, viverra quam eget, pretium tellus. Praesent sit amet augue in odio varius accumsan vitae quis nunc. Aliquam iaculis neque at augue laoreet, eu sagittis dolor tempus. Nullam sit amet bibendum velit, in pharetra lorem. Aliquam semper accumsan placerat. Sed felis risus, efficitur non eros non, rhoncus viverra lectus. Aliquam eget interdum tellus. Praesent non ex ut urna tempus facilisis. Sed tellus tortor, pharetra vel velit sit amet, aliquet condimentum quam. Sed dictum nibh eget nibh ullamcorper dignissim. Vestibulum elementum at mauris sit amet iaculis. Maecenas pretium luctus enim vel commodo. Cras accumsan sagittis eros, vel maximus sem molestie id. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

packages/lumx-react/src/components/link-preview/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/link-preview/react

packages/lumx-react/src/components/link/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/link/Demos' };

packages/lumx-react/src/components/link/Link.stories.tsx

@@ -2,7 +2,7 @@ import { ColorPalette, ColorVariant, Link } from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
-export default { title: 'LumX components/Link' };
+export default { title: 'LumX components/link/Link' };
 
 export const simpleLink = () => (
     <>

packages/lumx-react/src/components/link/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/link/react

packages/lumx-react/src/components/list/Demos.stories.tsx

@@ -1,4 +1,4 @@
-export default { title: 'LumX components/List/Demos' };
+export default { title: 'LumX components/list/Demos' };
 
 export { default as tiny } from './demos/tiny';
 export { default as regular } from './demos/regular';

packages/lumx-react/src/components/list/List.stories.tsx

@@ -9,7 +9,7 @@ import { select, text } from '@storybook/addon-knobs';
 import { List } from './List';
 import { ListItem } from './ListItem';
 
-export default { title: 'LumX components/List/List' };
+export default { title: 'LumX components/list/List' };
 
 export const KeyboardNavigation = () => {
     const listRef = useRef<any>();

packages/lumx-react/src/components/list/ListDivider.stories.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 
 import { ListDivider } from './ListDivider';
 
-export default { title: 'LumX components/List/ListDivider' };
+export default { title: 'LumX components/list/ListDivider' };
 
 export const Default = () => <ListDivider />;

packages/lumx-react/src/components/list/ListItem.stories.tsx

@@ -5,7 +5,7 @@ import { select, text } from '@storybook/addon-knobs';
 
 import { ListItem } from './ListItem';
 
-export default { title: 'LumX components/List/ListItem' };
+export default { title: 'LumX components/list/ListItem' };
 
 export const Default = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
 

packages/lumx-react/src/components/list/ListSubheader.stories.tsx

@@ -3,6 +3,6 @@ import React from 'react';
 import { ListSubheader } from '@lumx/react';
 import { text } from '@storybook/addon-knobs';
 
-export default { title: 'LumX components/List/ListSubheader' };
+export default { title: 'LumX components/list/ListSubheader' };
 
 export const Default = () => <ListSubheader>{text('text', 'Text')}</ListSubheader>;

packages/lumx-react/src/components/message/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/message/Demos' };

packages/lumx-react/src/components/message/Message.stories.tsx

@@ -2,7 +2,7 @@ import { Message, MessageKind } from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
-export default { title: 'LumX components/Message' };
+export default { title: 'LumX components/message/Message' };
 
 export const message = () => (
     <Message

packages/lumx-react/src/components/message/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/message/react

packages/lumx-react/src/components/mosaic/Demos.stories.tsx

@@ -0,0 +1 @@
+export default { title: 'LumX components/mosaic/Demos' };

packages/lumx-react/src/components/mosaic/Mosaic.stories.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { Alignment, ImageBlock, Lightbox, Slideshow, SlideshowItem, Theme } from '@lumx/react';
 import { Mosaic } from './Mosaic';
 
-export default { title: 'LumX components/Mosaic' };
+export default { title: 'LumX components/mosaic/Mosaic' };
 
 export const oneThumbnail = ({ theme }: any) => {
     const wrapperStyle = { width: 250 };

packages/lumx-react/src/components/mosaic/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/mosaic/react

packages/lumx-react/src/components/notification/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/notification/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/notification/Notifications.stories.tsx

@@ -4,7 +4,7 @@ import { Button, Notification, NotificationType } from '@lumx/react';
 
 import noop from 'lodash/noop';
 
-export default { title: 'LumX components/Notification' };
+export default { title: 'LumX components/notification/Notification' };
 
 const properties = {
     error: {

packages/lumx-react/src/components/notification/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/notification/react

packages/lumx-react/src/components/post-block/Demos.stories.tsx

@@ -0,0 +1,3 @@
+export default { title: 'LumX components/post-block/Demos' };
+
+export { default as Default } from './demos/default';

packages/lumx-react/src/components/post-block/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/post-block/react

packages/lumx-react/src/components/progress-tracker/Demos.stories.tsx

@@ -0,0 +1,8 @@
+export default { title: 'LumX components/progress-tracker/Demos' };
+
+export { default as Completed } from './demos/completed';
+export { default as Current } from './demos/current';
+export { default as Error } from './demos/error';
+export { default as Future } from './demos/future';
+export { default as Helper } from './demos/helper';
+export { default as States } from './demos/states';

packages/lumx-react/src/components/progress-tracker/ProgressTracker.stories.tsx

@@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import React from 'react';
 
-export default { title: 'LumX components/Progress Tracker' };
+export default { title: 'LumX components/progress-tracker/Progress Tracker' };
 
 export const simpleSteps = ({ theme }: any) => (
     <ProgressTracker theme={theme}>

packages/lumx-react/src/components/progress-tracker/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/progress-tracker/react

packages/lumx-react/src/components/progress/Demos.stories.tsx

@@ -0,0 +1,4 @@
+export default { title: 'LumX components/progress/Demos' };
+
+export { default as Circular } from './demos/circular';
+export { default as Linear } from './demos/linear';

packages/lumx-react/src/components/progress/demos

@@ -0,0 +1 @@
+../../../../site-demo/content/product/components/progress/react

packages/lumx-react/src/components/radio-button/Demos.stories.tsx

@@ -0,0 +1,4 @@
+export default { title: 'LumX components/radio-button/Demos' };
+
+export { default as Default } from './demos/default';
+export { default as Helper } from './demos/helper';

packages/lumx-react/src/components/radio-button/RadioButton.stories.tsx

@@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import React from 'react';
 
-export default { title: 'LumX components/Radio button' };
+export default { title: 'LumX components/radio-button/Radio button' };
 
 export const simpleRadioButton = ({ theme }: any) => (
     <RadioButton