@dtdot/lego 0.18.6 → 0.18.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/Button/Button.component.d.ts +1 -1
- package/build/components/Button/Button.component.js +1 -1
- package/build/index.d.ts +2 -0
- package/build/index.js +2 -0
- package/build/theme/providers/DarkTheme.provider.d.ts +6 -0
- package/build/theme/providers/DarkTheme.provider.js +8 -0
- package/build/theme/providers/DefaultTheme.provider.d.ts +6 -0
- package/build/theme/providers/DefaultTheme.provider.js +8 -0
- package/package.json +1 -1
- package/build/components/ActionMenu/ActionMenu.stories.d.ts +0 -6
- package/build/components/ActionMenu/ActionMenu.stories.js +0 -48
- package/build/components/ActionMessage/ActionMessage.stories.d.ts +0 -6
- package/build/components/ActionMessage/ActionMessage.stories.js +0 -19
- package/build/components/Alert/Alert.stories.d.ts +0 -8
- package/build/components/Alert/Alert.stories.js +0 -21
- package/build/components/Badge/Badge.stories.d.ts +0 -5
- package/build/components/Badge/Badge.stories.js +0 -18
- package/build/components/BadgeSelector/BadgeSelector.stories.d.ts +0 -6
- package/build/components/BadgeSelector/BadgeSelector.stories.js +0 -94
- package/build/components/Button/Button.stories.d.ts +0 -7
- package/build/components/Button/Button.stories.js +0 -27
- package/build/components/ButtonGroup/ButtonGroup.stories.d.ts +0 -8
- package/build/components/ButtonGroup/ButtonGroup.stories.js +0 -20
- package/build/components/Card/Card.stories.d.ts +0 -9
- package/build/components/Card/Card.stories.js +0 -84
- package/build/components/Checklist/Checklist.stories.d.ts +0 -5
- package/build/components/Checklist/Checklist.stories.js +0 -42
- package/build/components/ControlGroup/ControlGroup.stories.d.ts +0 -7
- package/build/components/ControlGroup/ControlGroup.stories.js +0 -24
- package/build/components/FancyCheckbox/FancyCheckbox.stories.d.ts +0 -5
- package/build/components/FancyCheckbox/FancyCheckbox.stories.js +0 -29
- package/build/components/Form/Form.stories.d.ts +0 -5
- package/build/components/Form/Form.stories.js +0 -21
- package/build/components/Heading/Heading.stories.d.ts +0 -7
- package/build/components/Heading/Heading.stories.js +0 -9
- package/build/components/ImageUpload/ImageUpload.stories.d.ts +0 -8
- package/build/components/ImageUpload/ImageUpload.stories.js +0 -49
- package/build/components/InlineCard/InlineCard.stories.d.ts +0 -7
- package/build/components/InlineCard/InlineCard.stories.js +0 -52
- package/build/components/Input/Input.stories.d.ts +0 -7
- package/build/components/Input/Input.stories.js +0 -28
- package/build/components/LiveInput/LiveInput.stories.d.ts +0 -6
- package/build/components/LiveInput/LiveInput.stories.js +0 -12
- package/build/components/LiveList/LiveList.stories.d.ts +0 -8
- package/build/components/LiveList/LiveList.stories.js +0 -57
- package/build/components/Loader/Loader.stories.d.ts +0 -5
- package/build/components/Loader/Loader.stories.js +0 -9
- package/build/components/Menu/Menu.stories.d.ts +0 -7
- package/build/components/Menu/Menu.stories.js +0 -95
- package/build/components/MinimalMenu/MinimalMenu.stories.d.ts +0 -5
- package/build/components/MinimalMenu/MinimalMenu.stories.js +0 -46
- package/build/components/Modal/Modal.stories.d.ts +0 -6
- package/build/components/Modal/Modal.stories.js +0 -55
- package/build/components/Notification/Notification.stories.d.ts +0 -8
- package/build/components/Notification/Notification.stories.js +0 -28
- package/build/components/Notifications/Notifications.stories.d.ts +0 -7
- package/build/components/Notifications/Notifications.stories.js +0 -96
- package/build/components/PageHeader/PageHeader.stories.d.ts +0 -6
- package/build/components/PageHeader/PageHeader.stories.js +0 -13
- package/build/components/ProfileImage/ProfileImage.stories.d.ts +0 -6
- package/build/components/ProfileImage/ProfileImage.stories.js +0 -8
- package/build/components/QrCode/QrCode.stories.d.ts +0 -5
- package/build/components/QrCode/QrCode.stories.js +0 -8
- package/build/components/SquareButton/SquareButton.stories.d.ts +0 -5
- package/build/components/SquareButton/SquareButton.stories.js +0 -14
- package/build/components/Swimlane/Swimlane.stories.d.ts +0 -6
- package/build/components/Swimlane/Swimlane.stories.js +0 -102
- package/build/components/Table/Table.stories.d.ts +0 -8
- package/build/components/Table/Table.stories.js +0 -75
- package/build/components/Text/Text.stories.d.ts +0 -6
- package/build/components/Text/Text.stories.js +0 -11
- package/build/examples/Form.stories.d.ts +0 -5
- package/build/examples/Form.stories.js +0 -19
- package/build/examples/Modal.stories.d.ts +0 -5
- package/build/examples/Modal.stories.js +0 -37
- package/build/layouts/Action/Action.stories.d.ts +0 -6
- package/build/layouts/Action/Action.stories.js +0 -17
- package/build/layouts/Centered/Centered.stories.d.ts +0 -5
- package/build/layouts/Centered/Centered.stories.js +0 -11
- package/build/layouts/Column/Column.stories.d.ts +0 -5
- package/build/layouts/Column/Column.stories.js +0 -11
- package/build/layouts/Content/Content.stories.d.ts +0 -9
- package/build/layouts/Content/Content.stories.js +0 -40
- package/build/layouts/Focus/Focus.stories.d.ts +0 -5
- package/build/layouts/Focus/Focus.stories.js +0 -19
- package/build/layouts/Padded/Padded.stories.d.ts +0 -6
- package/build/layouts/Padded/Padded.stories.js +0 -13
- package/build/layouts/WidthLimit/WidthLimit.stories.d.ts +0 -8
- package/build/layouts/WidthLimit/WidthLimit.stories.js +0 -43
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { Button, ControlGroup, Form, Input } from '../..';
|
|
3
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
4
|
-
export const Standard = () => {
|
|
5
|
-
const [value, setValue] = useState({ name: 'Frightened Kangaroo', colour: 'Red' });
|
|
6
|
-
return (React.createElement(React.Fragment, null,
|
|
7
|
-
React.createElement(Form, { value: value, onChange: setValue },
|
|
8
|
-
React.createElement(ControlGroup, { variation: 'submission' },
|
|
9
|
-
React.createElement(Input, { name: 'name', placeholder: 'name' }),
|
|
10
|
-
React.createElement(Input, { name: 'colour', placeholder: 'colour' }),
|
|
11
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
12
|
-
React.createElement(Button, null, "Next"))),
|
|
13
|
-
React.createElement("br", null),
|
|
14
|
-
React.createElement("br", null),
|
|
15
|
-
React.createElement("br", null),
|
|
16
|
-
React.createElement("div", null, JSON.stringify(value))));
|
|
17
|
-
};
|
|
18
|
-
export default {
|
|
19
|
-
title: 'Components/Form',
|
|
20
|
-
component: Form,
|
|
21
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const SubHeading: () => JSX.Element;
|
|
5
|
-
export declare const FormHeading: () => JSX.Element;
|
|
6
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
7
|
-
export default _default;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Heading } from '../..';
|
|
3
|
-
export const Standard = () => React.createElement(Heading, null, "A Standard Heading");
|
|
4
|
-
export const SubHeading = () => React.createElement(Heading.SubHeading, null, "A Standard Sub Heading");
|
|
5
|
-
export const FormHeading = () => React.createElement(Heading.FormHeading, null, "A Standard Sub Heading");
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Components/Heading',
|
|
8
|
-
component: Heading,
|
|
9
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const FillMode: () => JSX.Element;
|
|
4
|
-
export declare const WithAnImage: () => JSX.Element;
|
|
5
|
-
export declare const InALayout: () => JSX.Element;
|
|
6
|
-
export declare const InACard: () => JSX.Element;
|
|
7
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
8
|
-
export default _default;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Button, Card, CardGroup, ControlGroup, FocusLayout, Heading, ImageUpload, LiveInput, Spacer, Text, } from '../..';
|
|
4
|
-
import colours from '../../colours/colours';
|
|
5
|
-
import FileContext from '../../contexts/File.context';
|
|
6
|
-
const CentreContainer = styled.div `
|
|
7
|
-
display: flex;
|
|
8
|
-
width: 100%;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
`;
|
|
11
|
-
const InnerContainer = styled.div `
|
|
12
|
-
width: 200px;
|
|
13
|
-
height: 200px;
|
|
14
|
-
`;
|
|
15
|
-
export const FillMode = () => (React.createElement(React.Fragment, null,
|
|
16
|
-
React.createElement("div", { style: { width: '600px', height: '300px', padding: '30px', backgroundColor: colours.grey20 } },
|
|
17
|
-
React.createElement(ImageUpload, { name: 'profile' }))));
|
|
18
|
-
export const WithAnImage = () => (React.createElement(React.Fragment, null,
|
|
19
|
-
React.createElement("div", { style: { width: '600px', height: '300px', padding: '30px', backgroundColor: colours.grey20 } },
|
|
20
|
-
React.createElement(FileContext.Provider, { value: { upload: async () => 'done', getUrl: (url) => url } },
|
|
21
|
-
React.createElement(ImageUpload, { name: 'profile', value: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })))));
|
|
22
|
-
export const InALayout = () => (React.createElement(FocusLayout, null,
|
|
23
|
-
React.createElement(Heading, null, "Lets get setup.."),
|
|
24
|
-
React.createElement(Spacer, { size: '4x' }),
|
|
25
|
-
React.createElement(ControlGroup, { variation: 'submission' },
|
|
26
|
-
React.createElement(Text, null, "Lets upload your profile image. This will be the first thing that people see when connecting with you."),
|
|
27
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
28
|
-
React.createElement(CentreContainer, null,
|
|
29
|
-
React.createElement(InnerContainer, null,
|
|
30
|
-
React.createElement(ImageUpload, { name: 'profile' }))),
|
|
31
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
32
|
-
React.createElement(Button, null, "Next"))));
|
|
33
|
-
export const InACard = () => (React.createElement(CardGroup, null,
|
|
34
|
-
React.createElement(Card, { size: 'sm' },
|
|
35
|
-
React.createElement(Card.Media, null,
|
|
36
|
-
React.createElement(ImageUpload, { name: 'profile' })),
|
|
37
|
-
React.createElement(Card.Content, null,
|
|
38
|
-
React.createElement(LiveInput, { name: 'name', placeholder: 'Name' }))),
|
|
39
|
-
React.createElement(Card, { size: 'sm' },
|
|
40
|
-
React.createElement(Card.Media, null,
|
|
41
|
-
React.createElement(ImageUpload, { name: 'profile', onSearch: () => {
|
|
42
|
-
console.log('search');
|
|
43
|
-
} })),
|
|
44
|
-
React.createElement(Card.Content, null,
|
|
45
|
-
React.createElement(LiveInput, { name: 'name', placeholder: 'Name' })))));
|
|
46
|
-
export default {
|
|
47
|
-
title: 'Components/ImageUpload',
|
|
48
|
-
component: ImageUpload,
|
|
49
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const WithDrag: () => JSX.Element;
|
|
5
|
-
export declare const WithSelection: () => JSX.Element;
|
|
6
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
7
|
-
export default _default;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
-
import { Badge, FocusLayout, Form, InlineCard, InlineCardGroup } from '../..';
|
|
4
|
-
import InlineCardSelection from './InlineCardSelection.component';
|
|
5
|
-
export const Standard = () => (React.createElement(InlineCardGroup, null,
|
|
6
|
-
React.createElement(InlineCard, null,
|
|
7
|
-
React.createElement(InlineCard.Content, null, "Some content")),
|
|
8
|
-
React.createElement(InlineCard, null,
|
|
9
|
-
React.createElement(InlineCard.Media, null,
|
|
10
|
-
React.createElement("img", { src: 'https://www.jotform.com/blog/wp-content/uploads/2012/07/mario-luigi-yoschi-figures-163036.jpeg' })),
|
|
11
|
-
React.createElement(InlineCard.Content, null, "Some more content")),
|
|
12
|
-
React.createElement(InlineCard, { onClick: () => {
|
|
13
|
-
console.log('Clicked');
|
|
14
|
-
} },
|
|
15
|
-
React.createElement(InlineCard.Content, null, "Clickable card"),
|
|
16
|
-
React.createElement(InlineCard.Meta, null,
|
|
17
|
-
React.createElement(Badge, { variant: 'info' }, "Clickable")))));
|
|
18
|
-
export const WithDrag = () => (React.createElement(FocusLayout, null,
|
|
19
|
-
React.createElement(InlineCardGroup, null,
|
|
20
|
-
React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
|
|
21
|
-
React.createElement(InlineCard.Content, null, "A success gesture")),
|
|
22
|
-
React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faInfoCircle, gestureLeftVariant: 'info' },
|
|
23
|
-
React.createElement(InlineCard.Content, null, "A info gesture")),
|
|
24
|
-
React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faExclamationTriangle, gestureLeftVariant: 'warn' },
|
|
25
|
-
React.createElement(InlineCard.Content, null, "A warning gesture")),
|
|
26
|
-
React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
|
|
27
|
-
React.createElement(InlineCard.Content, null, "A danger gesture")))));
|
|
28
|
-
export const WithSelection = () => {
|
|
29
|
-
const [value, setValue] = useState({ animals: ['lama'] });
|
|
30
|
-
return (React.createElement(FocusLayout, null,
|
|
31
|
-
React.createElement(Form, { value: value, onChange: setValue },
|
|
32
|
-
React.createElement(InlineCardSelection, { name: 'animals' },
|
|
33
|
-
React.createElement(InlineCardGroup, null,
|
|
34
|
-
React.createElement(InlineCard, { value: 'camel' },
|
|
35
|
-
React.createElement(InlineCard.Media, null,
|
|
36
|
-
React.createElement("img", { src: 'http://3.bp.blogspot.com/-m2w1bFhTLMs/Uyh0xlVCluI/AAAAAAAACjw/G4IhU8b0RhY/w1200-h630-p-k-nu/368692.jpg' })),
|
|
37
|
-
React.createElement(InlineCard.Content, null, "A cranky camel")),
|
|
38
|
-
React.createElement(InlineCard, { value: 'eagle' },
|
|
39
|
-
React.createElement(InlineCard.Media, null,
|
|
40
|
-
React.createElement("img", { src: 'https://www.hakaimagazine.com/wp-content/uploads/header-bald-eagle-nests.jpg' })),
|
|
41
|
-
React.createElement(InlineCard.Content, null, "An eager eagle")),
|
|
42
|
-
React.createElement(InlineCard, { value: 'lama' },
|
|
43
|
-
React.createElement(InlineCard.Media, null,
|
|
44
|
-
React.createElement("img", { src: 'https://external-preview.redd.it/3KAYF01HBUX-QKwcpo89kHPzScRoZPXZN7o02JepX8E.jpg?auto=webp&s=08bbddec975a8af76de43a33001604099fb0168d' })),
|
|
45
|
-
React.createElement(InlineCard.Content, null, "A lazy lama")),
|
|
46
|
-
React.createElement(InlineCard, { value: 'iguana' },
|
|
47
|
-
React.createElement(InlineCard.Content, null, "An invisible iguana")))))));
|
|
48
|
-
};
|
|
49
|
-
export default {
|
|
50
|
-
title: 'Components/InlineCard',
|
|
51
|
-
component: InlineCard,
|
|
52
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const WithoutLabels: () => JSX.Element;
|
|
5
|
-
export declare const WithError: () => JSX.Element;
|
|
6
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
7
|
-
export default _default;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { Button, ButtonGroup, Input, ControlGroup, Spacer } from '../..';
|
|
3
|
-
export const Standard = () => (React.createElement(ControlGroup, null,
|
|
4
|
-
React.createElement(Input, { name: 'one', label: 'A standard input' }),
|
|
5
|
-
React.createElement(Input, { name: 'two', label: 'Another input' })));
|
|
6
|
-
export const WithoutLabels = () => (React.createElement(ControlGroup, null,
|
|
7
|
-
React.createElement(Input, { name: 'one', placeholder: 'A standard input' }),
|
|
8
|
-
React.createElement(Input, { name: 'two', placeholder: 'Another input' })));
|
|
9
|
-
export const WithError = () => {
|
|
10
|
-
const [error, setError] = useState('Input has an error!');
|
|
11
|
-
const clear = () => {
|
|
12
|
-
setError(undefined);
|
|
13
|
-
};
|
|
14
|
-
const validate = () => {
|
|
15
|
-
setError('Input has an error!');
|
|
16
|
-
};
|
|
17
|
-
return (React.createElement(React.Fragment, null,
|
|
18
|
-
React.createElement(ControlGroup, null,
|
|
19
|
-
React.createElement(Input, { name: 'one', error: error, placeholder: 'A standard input' })),
|
|
20
|
-
React.createElement(Spacer, { size: '2x' }),
|
|
21
|
-
React.createElement(ButtonGroup, null,
|
|
22
|
-
React.createElement(Button, { onClick: clear }, "Clear"),
|
|
23
|
-
React.createElement(Button, { onClick: validate }, "Set Errors"))));
|
|
24
|
-
};
|
|
25
|
-
export default {
|
|
26
|
-
title: 'Components/Input',
|
|
27
|
-
component: Input,
|
|
28
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const WithoutLabels: () => JSX.Element;
|
|
5
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
6
|
-
export default _default;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LiveInput, ControlGroup } from '../..';
|
|
3
|
-
export const Standard = () => (React.createElement(ControlGroup, null,
|
|
4
|
-
React.createElement(LiveInput, { name: 'one', placeholder: 'Some text..' }),
|
|
5
|
-
React.createElement(LiveInput, { name: 'two', placeholder: 'Some text..' })));
|
|
6
|
-
export const WithoutLabels = () => (React.createElement(ControlGroup, null,
|
|
7
|
-
React.createElement(LiveInput, { name: 'one', placeholder: 'A standard input' }),
|
|
8
|
-
React.createElement(LiveInput, { name: 'two', placeholder: 'Another input' })));
|
|
9
|
-
export default {
|
|
10
|
-
title: 'Components/LiveInput',
|
|
11
|
-
component: LiveInput,
|
|
12
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const InForm: () => JSX.Element;
|
|
5
|
-
export declare const WithValidation: () => JSX.Element;
|
|
6
|
-
export declare const EmptyList: () => JSX.Element;
|
|
7
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
8
|
-
export default _default;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { Button, ButtonGroup, ControlGroup, Form, Heading, ImageUpload, Input, LiveList, Spacer, Text } from '../..';
|
|
3
|
-
const exampleLiveListValue = [
|
|
4
|
-
{ id: '6f974464-d592-4271-b3ae-2821fffce258', value: '500g chicken' },
|
|
5
|
-
{ id: 'a273d33a-2643-4991-b81d-2beff51d42a8', value: '1/2 cup rice' },
|
|
6
|
-
{ id: '2ecef56f-f725-4f8a-ac84-bd3117e7d50b', value: '1 tbs olive oil' },
|
|
7
|
-
];
|
|
8
|
-
const exampleListErrors = {
|
|
9
|
-
'6f974464-d592-4271-b3ae-2821fffce258': 'Ingredient not found',
|
|
10
|
-
'a273d33a-2643-4991-b81d-2beff51d42a8': 'Ingredient not found',
|
|
11
|
-
};
|
|
12
|
-
export const Standard = () => {
|
|
13
|
-
const [value, setValue] = useState(exampleLiveListValue);
|
|
14
|
-
return (React.createElement(React.Fragment, null,
|
|
15
|
-
React.createElement(Heading.FormHeading, null, "Ingredients"),
|
|
16
|
-
React.createElement(Spacer, { size: '1x' }),
|
|
17
|
-
React.createElement(LiveList, { value: value, onChange: setValue })));
|
|
18
|
-
};
|
|
19
|
-
export const InForm = () => {
|
|
20
|
-
const [value, setValue] = useState({});
|
|
21
|
-
return (React.createElement(Form, { value: value, onChange: setValue },
|
|
22
|
-
React.createElement(ControlGroup, { variation: 'comfortable' },
|
|
23
|
-
React.createElement(ImageUpload, { name: 'image' }),
|
|
24
|
-
React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
|
|
25
|
-
React.createElement(Heading.FormHeading, null, "Ingredients"),
|
|
26
|
-
React.createElement(LiveList, { name: 'ingredients' }))));
|
|
27
|
-
};
|
|
28
|
-
export const WithValidation = () => {
|
|
29
|
-
const value = { ingredients: exampleLiveListValue };
|
|
30
|
-
const [errors, setErrors] = useState({ ingredients: exampleListErrors });
|
|
31
|
-
const validate = () => {
|
|
32
|
-
setErrors({ ingredients: exampleListErrors });
|
|
33
|
-
};
|
|
34
|
-
const clear = () => {
|
|
35
|
-
setErrors({ ingredients: undefined });
|
|
36
|
-
};
|
|
37
|
-
return (React.createElement(React.Fragment, null,
|
|
38
|
-
React.createElement(Form, { value: value, errors: errors, onChange: () => undefined },
|
|
39
|
-
React.createElement(ControlGroup, { variation: 'comfortable' },
|
|
40
|
-
React.createElement(Text, { variant: 'secondary' }, "Max length 20 chars"),
|
|
41
|
-
React.createElement(LiveList, { name: 'ingredients' }))),
|
|
42
|
-
React.createElement(Spacer, { size: '2x' }),
|
|
43
|
-
React.createElement(ButtonGroup, null,
|
|
44
|
-
React.createElement(Button, { onClick: clear }, "Clear"),
|
|
45
|
-
React.createElement(Button, { onClick: validate }, "Set Errors"))));
|
|
46
|
-
};
|
|
47
|
-
export const EmptyList = () => {
|
|
48
|
-
const [value, setValue] = useState({});
|
|
49
|
-
return (React.createElement(React.Fragment, null,
|
|
50
|
-
React.createElement(Heading.FormHeading, null, "Ingredients"),
|
|
51
|
-
React.createElement(Spacer, { size: '1x' }),
|
|
52
|
-
React.createElement(LiveList, { value: value, onChange: setValue })));
|
|
53
|
-
};
|
|
54
|
-
export default {
|
|
55
|
-
title: 'Components/LiveList',
|
|
56
|
-
component: LiveList,
|
|
57
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const WithPanel: () => JSX.Element;
|
|
5
|
-
export declare const IndependentScrolling: () => JSX.Element;
|
|
6
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
7
|
-
export default _default;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, } from '../..';
|
|
3
|
-
import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
|
|
4
|
-
export const Standard = () => {
|
|
5
|
-
const [route, setRoute] = useState('/eat');
|
|
6
|
-
return (React.createElement(React.Fragment, null,
|
|
7
|
-
React.createElement(Menu, { heading: 'Something Tasty' },
|
|
8
|
-
React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
|
|
9
|
-
React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
|
|
10
|
-
React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
|
|
11
|
-
React.createElement(Menu.Content, null,
|
|
12
|
-
React.createElement(Menu.Page, null,
|
|
13
|
-
React.createElement(FocusLayout, null,
|
|
14
|
-
React.createElement(Heading, null, "Configuration"),
|
|
15
|
-
React.createElement(Spacer, { size: '4x' }),
|
|
16
|
-
React.createElement(ControlGroup, { variation: 'submission' },
|
|
17
|
-
React.createElement(Text, null, "Enter your name here. This will be used to identify you when connecting with friends."),
|
|
18
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
19
|
-
React.createElement(Input, { name: 'name', placeholder: 'name' }),
|
|
20
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
21
|
-
React.createElement(Button, null, "Next")))))));
|
|
22
|
-
};
|
|
23
|
-
export const WithPanel = () => {
|
|
24
|
-
const [route, setRoute] = useState('/eat');
|
|
25
|
-
return (React.createElement(React.Fragment, null,
|
|
26
|
-
React.createElement(Menu, { heading: 'Something Tasty' },
|
|
27
|
-
React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
|
|
28
|
-
React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
|
|
29
|
-
React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
|
|
30
|
-
React.createElement(Menu.Content, null,
|
|
31
|
-
React.createElement(Menu.Panel, { panelSize: 'md' },
|
|
32
|
-
React.createElement(PaddedLayout, null,
|
|
33
|
-
React.createElement(ControlGroup, { variation: 'comfortable' },
|
|
34
|
-
React.createElement(Heading.SubHeading, null, "You"),
|
|
35
|
-
React.createElement(Input, { label: 'Income', name: 'name', placeholder: '30,000' }),
|
|
36
|
-
React.createElement(Heading.SubHeading, null, "Loan"),
|
|
37
|
-
React.createElement(Input, { label: 'Deposit', name: 'name', placeholder: '10,000' }),
|
|
38
|
-
React.createElement(Input, { label: 'Interest Rate', name: 'name', placeholder: '4%' })))),
|
|
39
|
-
React.createElement(Menu.Page, null,
|
|
40
|
-
React.createElement(FocusLayout, null,
|
|
41
|
-
React.createElement(Heading, null, "Configuration"),
|
|
42
|
-
React.createElement(Spacer, { size: '4x' }),
|
|
43
|
-
React.createElement(ControlGroup, { variation: 'submission' },
|
|
44
|
-
React.createElement(Text, null, "Enter your name here. This will be used to identify you when connecting with friends."),
|
|
45
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
46
|
-
React.createElement(Input, { name: 'name', placeholder: 'name' }),
|
|
47
|
-
React.createElement(ControlGroup.Spacer, null),
|
|
48
|
-
React.createElement(Button, null, "Next")))))));
|
|
49
|
-
};
|
|
50
|
-
export const IndependentScrolling = () => {
|
|
51
|
-
const [route, setRoute] = useState('/eat');
|
|
52
|
-
return (React.createElement(React.Fragment, null,
|
|
53
|
-
React.createElement(Menu, { heading: 'Something Tasty' },
|
|
54
|
-
React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
|
|
55
|
-
React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
|
|
56
|
-
React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
|
|
57
|
-
React.createElement(Menu.Content, null,
|
|
58
|
-
React.createElement(Menu.Panel, { panelSize: 'sm', scrollable: true },
|
|
59
|
-
React.createElement(PaddedLayout, null,
|
|
60
|
-
React.createElement(Text, null,
|
|
61
|
-
"Suspendisse sit amet pellentesque nisi. Quisque eget velit sit amet mauris tincidunt dictum id et ex. Integer pulvinar tellus id viverra finibus. Cras dapibus diam a ante eleifend, ac ultrices ligula vestibulum. Nulla gravida ante nec mi tristique, vel elementum arcu volutpat. Nunc in lorem id ligula sodales tincidunt non ut ipsum. Fusce risus eros, dapibus sed lacus et, faucibus auctor purus. Nulla sed rhoncus ligula, at porttitor tellus. Aliquam vitae gravida quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis tempus risus.",
|
|
62
|
-
React.createElement("br", null),
|
|
63
|
-
React.createElement("br", null),
|
|
64
|
-
"Nullam tincidunt mauris ut lectus auctor aliquam. Aenean ornare mi et sollicitudin suscipit. Integer eu nulla at turpis molestie malesuada. Maecenas non consectetur massa. Nunc dui magna, imperdiet placerat bibendum ac, accumsan non lorem. Proin vulputate magna nisl, vel convallis elit iaculis quis. Proin maximus ante non ante vehicula sodales. Aliquam dui nisi, posuere vitae urna in, porta aliquet tellus. Curabitur commodo diam nec erat luctus, quis pharetra diam ultricies. Fusce sagittis libero lorem, convallis tristique mi egestas fermentum. Sed eu erat ut eros porttitor sollicitudin. Vivamus facilisis felis odio, ac tristique enim blandit a. Aliquam tincidunt iaculis sapien, sed vulputate mauris luctus ac. Donec aliquet ullamcorper orci quis tempor. Curabitur ac felis nulla.",
|
|
65
|
-
React.createElement("br", null),
|
|
66
|
-
React.createElement("br", null),
|
|
67
|
-
"Aenean vestibulum aliquam purus ut fringilla. Maecenas aliquet a nunc eget scelerisque. Mauris varius dignissim velit, vitae faucibus massa posuere sit amet. Nulla rutrum enim tellus, eget interdum massa ultricies sed. Proin pulvinar odio non lectus scelerisque, et varius nisl blandit. Donec nisl ante, ultricies eu volutpat ut, dapibus sed ex. Aliquam risus ex, porttitor vel commodo in, convallis laoreet dolor. Proin pretium neque pretium, laoreet dolor ultrices, vulputate sapien. Aenean rutrum lorem non mauris egestas accumsan."))),
|
|
68
|
-
React.createElement(Menu.Page, { scrollable: true },
|
|
69
|
-
React.createElement(ContentLayout, null,
|
|
70
|
-
React.createElement(ContentLayout.Content, { size: 'sm' },
|
|
71
|
-
React.createElement(Text, null,
|
|
72
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh lorem, mattis sed dolor ac, malesuada maximus lorem. Proin hendrerit maximus ipsum, eu laoreet erat congue a. Duis pellentesque leo sed nisi mattis, a sollicitudin sapien ornare. Mauris efficitur nulla metus. Etiam felis velit, mollis eget fringilla nec, venenatis non libero. Suspendisse at arcu rhoncus, tristique ex nec, blandit enim. Vivamus rutrum, felis faucibus vulputate vulputate, lacus quam sollicitudin eros, non consequat velit neque in lorem. Ut hendrerit lectus vel quam placerat tincidunt. Ut auctor tortor elit, ac aliquam orci pellentesque efficitur. Morbi eget sollicitudin est. Donec ullamcorper velit ipsum, non dapibus nisi vulputate ac. Proin dapibus, mi ac scelerisque sollicitudin, turpis augue hendrerit metus, eget dignissim justo lectus id urna. Vivamus massa ipsum, posuere eu risus non, ultrices convallis tellus. Mauris et egestas erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sagittis porttitor nisi a gravida.",
|
|
73
|
-
React.createElement("br", null),
|
|
74
|
-
React.createElement("br", null),
|
|
75
|
-
"Donec mollis nisl quis scelerisque suscipit. Suspendisse eget risus ornare lorem convallis gravida sit amet id nisi. Duis venenatis tortor vitae facilisis auctor. Nulla in pretium odio, et aliquet dui. Sed non venenatis ex. Praesent felis sem, tincidunt et ligula sit amet, vulputate tincidunt tellus. Nam quis eros quis justo aliquet tempus. Nulla imperdiet bibendum velit, eu elementum felis cursus ut. Curabitur eget dui et urna vehicula porttitor sit amet vitae risus. Nulla vitae lacus id quam gravida volutpat at eu elit. Quisque efficitur hendrerit purus, sed viverra elit cursus non. Nunc at scelerisque eros, ut posuere erat. Suspendisse egestas volutpat orci, id ornare nisi aliquet vel.",
|
|
76
|
-
React.createElement("br", null),
|
|
77
|
-
React.createElement("br", null),
|
|
78
|
-
"Donec ultrices lectus lectus, eget mollis nisi venenatis vitae. Morbi cursus quis sapien ut ultrices. Quisque placerat, massa ut accumsan tempor, purus leo sollicitudin leo, eu auctor mauris quam nec nisl. Donec eu dignissim erat. Aenean bibendum blandit leo, sed posuere risus euismod eu. Ut dignissim nisl ex, eget condimentum turpis auctor in. Fusce tristique neque accumsan diam suscipit, vel blandit lorem sodales. Etiam ut tincidunt nisi, ut aliquet felis. Suspendisse vestibulum, velit imperdiet tempor varius, lectus massa consectetur lacus, sagittis scelerisque ante enim non metus. Donec nunc nisl, fermentum scelerisque ornare nec, congue id velit. Praesent vehicula dolor nisl, vel sollicitudin nisl ullamcorper sit amet. Maecenas nec ante eu dui interdum mollis. Maecenas urna enim, maximus et ligula at, aliquet varius arcu. Ut justo arcu, commodo iaculis est ut, ornare posuere arcu.",
|
|
79
|
-
React.createElement("br", null),
|
|
80
|
-
React.createElement("br", null),
|
|
81
|
-
"Curabitur at nunc et erat placerat laoreet aliquet in eros. Proin sagittis dolor libero, ut ultrices elit euismod vitae. Phasellus non tellus tellus. Morbi sit amet auctor lacus. Maecenas commodo sagittis ex nec eleifend. Mauris sit amet augue a sapien vulputate rhoncus. Donec dignissim finibus erat, sit amet suscipit arcu blandit non. Sed pulvinar tincidunt volutpat. Proin pretium leo non enim pretium, vitae porttitor felis pellentesque. Nam tincidunt euismod arcu quis aliquam. Maecenas in lorem et tortor sagittis efficitur. Vestibulum est odio, tristique eget massa vitae, porta tincidunt magna. Curabitur tempus velit ut auctor auctor. Integer ultricies lorem vitae nibh convallis, ac placerat tellus rutrum.",
|
|
82
|
-
React.createElement("br", null),
|
|
83
|
-
React.createElement("br", null),
|
|
84
|
-
"Curabitur ac lorem vitae lorem convallis tincidunt. Aenean luctus, dolor et blandit consectetur, odio risus lacinia ante, non auctor libero turpis accumsan metus. Donec accumsan vitae lacus a varius. Aliquam ac ultricies massa. Praesent vel lacus tempus, interdum nisi eget, varius justo. Pellentesque nec mauris ac dolor fringilla pulvinar. Sed sollicitudin nec lectus nec condimentum. Maecenas molestie blandit ipsum ut finibus. Cras eu nibh congue, porta metus vel, pellentesque tellus.",
|
|
85
|
-
React.createElement("br", null),
|
|
86
|
-
React.createElement("br", null),
|
|
87
|
-
"Morbi feugiat, arcu vel ultricies ultrices, justo odio faucibus purus, vel pharetra augue metus nec purus. Suspendisse sit amet leo ipsum. Vivamus ut velit ut ante consectetur vehicula ut at mi. Nam et ex at nisl ullamcorper maximus nec vel est. Fusce ut est neque. Vivamus dictum, ipsum porta varius tempus, arcu diam sollicitudin risus, in vulputate est orci sit amet ligula. Donec a est vel lacus consectetur dictum.")))))));
|
|
88
|
-
};
|
|
89
|
-
export default {
|
|
90
|
-
title: 'Components/Menu',
|
|
91
|
-
component: Menu,
|
|
92
|
-
parameters: {
|
|
93
|
-
layout: 'fullscreen',
|
|
94
|
-
},
|
|
95
|
-
};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { menuHelpers, MinimalMenu, PaddedLayout, Text } from '../..';
|
|
3
|
-
import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
|
|
4
|
-
export const Standard = () => {
|
|
5
|
-
const [route, setRoute] = useState('/eat');
|
|
6
|
-
return (React.createElement(React.Fragment, null,
|
|
7
|
-
React.createElement(MinimalMenu, null,
|
|
8
|
-
React.createElement(MinimalMenu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }),
|
|
9
|
-
React.createElement(MinimalMenu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }),
|
|
10
|
-
React.createElement(MinimalMenu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') })),
|
|
11
|
-
React.createElement(MinimalMenu.Page, null,
|
|
12
|
-
React.createElement(PaddedLayout, null,
|
|
13
|
-
React.createElement(Text, null,
|
|
14
|
-
"Suspendisse sit amet pellentesque nisi. Quisque eget velit sit amet mauris tincidunt dictum id et ex. Integer pulvinar tellus id viverra finibus. Cras dapibus diam a ante eleifend, ac ultrices ligula vestibulum. Nulla gravida ante nec mi tristique, vel elementum arcu volutpat. Nunc in lorem id ligula sodales tincidunt non ut ipsum. Fusce risus eros, dapibus sed lacus et, faucibus auctor purus. Nulla sed rhoncus ligula, at porttitor tellus. Aliquam vitae gravida quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis tempus risus.",
|
|
15
|
-
React.createElement("br", null),
|
|
16
|
-
React.createElement("br", null),
|
|
17
|
-
"Nullam tincidunt mauris ut lectus auctor aliquam. Aenean ornare mi et sollicitudin suscipit. Integer eu nulla at turpis molestie malesuada. Maecenas non consectetur massa. Nunc dui magna, imperdiet placerat bibendum ac, accumsan non lorem. Proin vulputate magna nisl, vel convallis elit iaculis quis. Proin maximus ante non ante vehicula sodales. Aliquam dui nisi, posuere vitae urna in, porta aliquet tellus. Curabitur commodo diam nec erat luctus, quis pharetra diam ultricies. Fusce sagittis libero lorem, convallis tristique mi egestas fermentum. Sed eu erat ut eros porttitor sollicitudin. Vivamus facilisis felis odio, ac tristique enim blandit a. Aliquam tincidunt iaculis sapien, sed vulputate mauris luctus ac. Donec aliquet ullamcorper orci quis tempor. Curabitur ac felis nulla.",
|
|
18
|
-
React.createElement("br", null),
|
|
19
|
-
React.createElement("br", null),
|
|
20
|
-
"Aenean vestibulum aliquam purus ut fringilla. Maecenas aliquet a nunc eget scelerisque. Mauris varius dignissim velit, vitae faucibus massa posuere sit amet. Nulla rutrum enim tellus, eget interdum massa ultricies sed. Proin pulvinar odio non lectus scelerisque, et varius nisl blandit. Donec nisl ante, ultricies eu volutpat ut, dapibus sed ex. Aliquam risus ex, porttitor vel commodo in, convallis laoreet dolor. Proin pretium neque pretium, laoreet dolor ultrices, vulputate sapien. Aenean rutrum lorem non mauris egestas accumsan.",
|
|
21
|
-
React.createElement("br", null),
|
|
22
|
-
React.createElement("br", null),
|
|
23
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh lorem, mattis sed dolor ac, malesuada maximus lorem. Proin hendrerit maximus ipsum, eu laoreet erat congue a. Duis pellentesque leo sed nisi mattis, a sollicitudin sapien ornare. Mauris efficitur nulla metus. Etiam felis velit, mollis eget fringilla nec, venenatis non libero. Suspendisse at arcu rhoncus, tristique ex nec, blandit enim. Vivamus rutrum, felis faucibus vulputate vulputate, lacus quam sollicitudin eros, non consequat velit neque in lorem. Ut hendrerit lectus vel quam placerat tincidunt. Ut auctor tortor elit, ac aliquam orci pellentesque efficitur. Morbi eget sollicitudin est. Donec ullamcorper velit ipsum, non dapibus nisi vulputate ac. Proin dapibus, mi ac scelerisque sollicitudin, turpis augue hendrerit metus, eget dignissim justo lectus id urna. Vivamus massa ipsum, posuere eu risus non, ultrices convallis tellus. Mauris et egestas erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sagittis porttitor nisi a gravida.",
|
|
24
|
-
React.createElement("br", null),
|
|
25
|
-
React.createElement("br", null),
|
|
26
|
-
"Donec mollis nisl quis scelerisque suscipit. Suspendisse eget risus ornare lorem convallis gravida sit amet id nisi. Duis venenatis tortor vitae facilisis auctor. Nulla in pretium odio, et aliquet dui. Sed non venenatis ex. Praesent felis sem, tincidunt et ligula sit amet, vulputate tincidunt tellus. Nam quis eros quis justo aliquet tempus. Nulla imperdiet bibendum velit, eu elementum felis cursus ut. Curabitur eget dui et urna vehicula porttitor sit amet vitae risus. Nulla vitae lacus id quam gravida volutpat at eu elit. Quisque efficitur hendrerit purus, sed viverra elit cursus non. Nunc at scelerisque eros, ut posuere erat. Suspendisse egestas volutpat orci, id ornare nisi aliquet vel.",
|
|
27
|
-
React.createElement("br", null),
|
|
28
|
-
React.createElement("br", null),
|
|
29
|
-
"Donec ultrices lectus lectus, eget mollis nisi venenatis vitae. Morbi cursus quis sapien ut ultrices. Quisque placerat, massa ut accumsan tempor, purus leo sollicitudin leo, eu auctor mauris quam nec nisl. Donec eu dignissim erat. Aenean bibendum blandit leo, sed posuere risus euismod eu. Ut dignissim nisl ex, eget condimentum turpis auctor in. Fusce tristique neque accumsan diam suscipit, vel blandit lorem sodales. Etiam ut tincidunt nisi, ut aliquet felis. Suspendisse vestibulum, velit imperdiet tempor varius, lectus massa consectetur lacus, sagittis scelerisque ante enim non metus. Donec nunc nisl, fermentum scelerisque ornare nec, congue id velit. Praesent vehicula dolor nisl, vel sollicitudin nisl ullamcorper sit amet. Maecenas nec ante eu dui interdum mollis. Maecenas urna enim, maximus et ligula at, aliquet varius arcu. Ut justo arcu, commodo iaculis est ut, ornare posuere arcu.",
|
|
30
|
-
React.createElement("br", null),
|
|
31
|
-
React.createElement("br", null),
|
|
32
|
-
"Curabitur at nunc et erat placerat laoreet aliquet in eros. Proin sagittis dolor libero, ut ultrices elit euismod vitae. Phasellus non tellus tellus. Morbi sit amet auctor lacus. Maecenas commodo sagittis ex nec eleifend. Mauris sit amet augue a sapien vulputate rhoncus. Donec dignissim finibus erat, sit amet suscipit arcu blandit non. Sed pulvinar tincidunt volutpat. Proin pretium leo non enim pretium, vitae porttitor felis pellentesque. Nam tincidunt euismod arcu quis aliquam. Maecenas in lorem et tortor sagittis efficitur. Vestibulum est odio, tristique eget massa vitae, porta tincidunt magna. Curabitur tempus velit ut auctor auctor. Integer ultricies lorem vitae nibh convallis, ac placerat tellus rutrum.",
|
|
33
|
-
React.createElement("br", null),
|
|
34
|
-
React.createElement("br", null),
|
|
35
|
-
"Curabitur ac lorem vitae lorem convallis tincidunt. Aenean luctus, dolor et blandit consectetur, odio risus lacinia ante, non auctor libero turpis accumsan metus. Donec accumsan vitae lacus a varius. Aliquam ac ultricies massa. Praesent vel lacus tempus, interdum nisi eget, varius justo. Pellentesque nec mauris ac dolor fringilla pulvinar. Sed sollicitudin nec lectus nec condimentum. Maecenas molestie blandit ipsum ut finibus. Cras eu nibh congue, porta metus vel, pellentesque tellus.",
|
|
36
|
-
React.createElement("br", null),
|
|
37
|
-
React.createElement("br", null),
|
|
38
|
-
"Morbi feugiat, arcu vel ultricies ultrices, justo odio faucibus purus, vel pharetra augue metus nec purus. Suspendisse sit amet leo ipsum. Vivamus ut velit ut ante consectetur vehicula ut at mi. Nam et ex at nisl ullamcorper maximus nec vel est. Fusce ut est neque. Vivamus dictum, ipsum porta varius tempus, arcu diam sollicitudin risus, in vulputate est orci sit amet ligula. Donec a est vel lacus consectetur dictum.")))));
|
|
39
|
-
};
|
|
40
|
-
export default {
|
|
41
|
-
title: 'Components/MinimalMenu',
|
|
42
|
-
component: MinimalMenu,
|
|
43
|
-
parameters: {
|
|
44
|
-
layout: 'fullscreen',
|
|
45
|
-
},
|
|
46
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const LotsOfContent: () => JSX.Element;
|
|
5
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
6
|
-
export default _default;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { Modal, Button } from '../..';
|
|
3
|
-
export const Standard = () => {
|
|
4
|
-
const [open, setOpen] = useState(true);
|
|
5
|
-
const [loading, setLoading] = useState(false);
|
|
6
|
-
const handleOpen = () => {
|
|
7
|
-
setOpen(true);
|
|
8
|
-
setLoading(true);
|
|
9
|
-
setTimeout(() => setLoading(false), 2000);
|
|
10
|
-
};
|
|
11
|
-
const handleClose = () => {
|
|
12
|
-
setOpen(false);
|
|
13
|
-
setLoading(false);
|
|
14
|
-
};
|
|
15
|
-
return (React.createElement(React.Fragment, null,
|
|
16
|
-
React.createElement(Button, { onClick: handleOpen }, "Open"),
|
|
17
|
-
open && (React.createElement(Modal, { size: 'sm', onClose: handleClose, loading: loading },
|
|
18
|
-
React.createElement(Modal.Header, { header: 'Small modal', subHeader: "This one shouldn't scroll" }),
|
|
19
|
-
React.createElement(Modal.Body, null,
|
|
20
|
-
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu."),
|
|
21
|
-
React.createElement("br", null))))));
|
|
22
|
-
};
|
|
23
|
-
export const LotsOfContent = () => {
|
|
24
|
-
const [open, setOpen] = useState(true);
|
|
25
|
-
return (React.createElement(React.Fragment, null,
|
|
26
|
-
React.createElement(Button, { onClick: () => setOpen(true) }, "Open"),
|
|
27
|
-
open && (React.createElement(Modal, { onClose: () => setOpen(false) },
|
|
28
|
-
React.createElement(Modal.Header, { header: 'Larger modal', subHeader: 'This one should scroll' }),
|
|
29
|
-
React.createElement(Modal.Body, null,
|
|
30
|
-
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget efficitur libero. In eu gravida turpis. Nunc dictum pretium felis a vulputate. Aliquam bibendum ex sed sapien rutrum accumsan. Curabitur sed mi arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut cursus urna. Morbi vestibulum tortor porta tortor efficitur, et semper tortor viverra. Suspendisse ac cursus lacus. Vivamus blandit, elit eu pretium rutrum, tellus orci tristique ante, vel condimentum quam nisl eget quam. Donec convallis aliquet dictum. Aliquam in sapien quis quam consequat interdum sed quis est. Phasellus dictum posuere mauris in tempor. Nulla scelerisque, risus ut dignissim gravida, ex urna vestibulum turpis, vel interdum velit nibh nec quam. Nulla non commodo odio. Proin eu justo risus."),
|
|
31
|
-
React.createElement("br", null),
|
|
32
|
-
React.createElement("p", null, "In volutpat nulla eros, sed vulputate urna suscipit vestibulum. Suspendisse posuere, mauris ut pellentesque aliquam, sapien leo molestie arcu, eu dapibus felis eros varius lacus. Quisque nec convallis neque. Mauris dignissim ultricies nunc, vel interdum ante elementum nec. Integer faucibus laoreet nisi. Etiam tincidunt eleifend velit, nec tempor tortor rhoncus vel. Aliquam interdum, eros euismod tincidunt tristique, lacus tellus sagittis mi, a ultricies ligula tortor quis est. Nam volutpat nisl vitae vulputate tristique. Proin consequat lacus facilisis, pretium turpis quis, faucibus nisl. Vivamus eu mauris pellentesque, pretium eros nec, blandit mauris. Nulla maximus risus a velit dapibus, quis laoreet nisl dapibus. Nullam a varius nulla."),
|
|
33
|
-
React.createElement("br", null),
|
|
34
|
-
React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
|
|
35
|
-
React.createElement("br", null),
|
|
36
|
-
React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
|
|
37
|
-
React.createElement("br", null),
|
|
38
|
-
React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
|
|
39
|
-
React.createElement("br", null),
|
|
40
|
-
React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
|
|
41
|
-
React.createElement("br", null),
|
|
42
|
-
React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
|
|
43
|
-
React.createElement("br", null),
|
|
44
|
-
React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."),
|
|
45
|
-
React.createElement("br", null),
|
|
46
|
-
React.createElement("p", null, "Aliquam vitae sollicitudin sapien, at commodo est. In hac habitasse platea dictumst. Etiam erat metus, gravida ut posuere ac, mollis quis nisi. Curabitur arcu lorem, convallis nec facilisis non, ultricies vel lectus. Suspendisse accumsan metus eu lorem dictum vestibulum sed sed lorem. Sed facilisis ultricies enim consectetur sagittis. Phasellus blandit urna vitae varius tempus. Ut molestie porta nisl id egestas. Ut bibendum ante vitae quam viverra, ut dapibus felis convallis. Fusce quam nisl, pellentesque ac turpis sed, scelerisque congue velit. Morbi vehicula ac neque et rutrum. Vivamus leo velit, accumsan at tristique a, ultricies vitae tortor. Pellentesque gravida pharetra urna. Maecenas aliquet elementum justo, id tincidunt velit."),
|
|
47
|
-
React.createElement("br", null),
|
|
48
|
-
React.createElement("p", null, "Proin vitae nulla porta, ullamcorper nisi at, convallis ante. Maecenas facilisis augue vel ultricies laoreet. Vivamus blandit enim ac felis consectetur, quis malesuada sem laoreet. Praesent vehicula felis tellus, at luctus ipsum suscipit at. Sed lorem felis, euismod sit amet cursus et, porttitor et mauris. Proin cursus arcu lacus, non condimentum mi consectetur eu. Suspendisse quis venenatis felis, eu facilisis dolor. Morbi laoreet egestas arcu, vel tempor nisi vehicula at. Nullam ut ligula posuere, vestibulum mi at, mollis felis. Nunc ut massa elit. Suspendisse id nunc at ipsum eleifend finibus imperdiet et lectus. Curabitur elementum, nulla sit amet interdum mollis, metus elit vulputate neque, mattis lacinia lorem purus ut odio. Morbi interdum neque sed libero molestie consequat. Sed condimentum orci facilisis tortor mollis ultrices."),
|
|
49
|
-
React.createElement("br", null),
|
|
50
|
-
React.createElement("p", null, "Nulla diam lorem, placerat non dui et, viverra ultrices augue. Phasellus tristique porta odio at scelerisque. Proin facilisis elit ut est faucibus rhoncus. Nunc ac auctor ante. Suspendisse consequat nulla sit amet interdum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dapibus sem. Quisque feugiat libero id maximus blandit. Duis nec urna aliquet, dapibus nibh at, scelerisque enim. Donec venenatis est dui, sit amet sollicitudin mi tempus ac. Aenean quis nunc a risus congue malesuada at vulputate metus. Integer sed efficitur libero. Aenean sit amet consequat arcu. Aliquam rhoncus porttitor vestibulum."))))));
|
|
51
|
-
};
|
|
52
|
-
export default {
|
|
53
|
-
title: 'Components/Modal',
|
|
54
|
-
component: Modal,
|
|
55
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const Variants: () => JSX.Element;
|
|
5
|
-
export declare const WithCount: () => JSX.Element;
|
|
6
|
-
export declare const WithAction: () => JSX.Element;
|
|
7
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
8
|
-
export default _default;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Notification } from '../..';
|
|
3
|
-
/* eslint-disable no-alert */
|
|
4
|
-
export const Standard = () => (React.createElement(React.Fragment, null,
|
|
5
|
-
React.createElement(Notification, { variant: 'info', message: 'This is a base notification' }),
|
|
6
|
-
React.createElement("br", null),
|
|
7
|
-
React.createElement(Notification, { variant: 'info', message: 'This is a base notification with quite a bit of content. It may wrap around to the next line...' })));
|
|
8
|
-
export const Variants = () => (React.createElement(React.Fragment, null,
|
|
9
|
-
React.createElement(Notification, { variant: 'info', message: 'This is an info notification' }),
|
|
10
|
-
React.createElement("br", null),
|
|
11
|
-
React.createElement(Notification, { variant: 'success', message: 'This is a success notification' }),
|
|
12
|
-
React.createElement("br", null),
|
|
13
|
-
React.createElement(Notification, { variant: 'warn', message: 'This is a warn notification' }),
|
|
14
|
-
React.createElement("br", null),
|
|
15
|
-
React.createElement(Notification, { variant: 'danger', message: 'This is a danger notification' })));
|
|
16
|
-
export const WithCount = () => (React.createElement(React.Fragment, null,
|
|
17
|
-
React.createElement(Notification, { variant: 'info', count: 5, message: 'This is a notification with a count' }),
|
|
18
|
-
React.createElement("br", null),
|
|
19
|
-
React.createElement(Notification, { variant: 'success', count: 5, message: 'This is a notification with a count' }),
|
|
20
|
-
React.createElement("br", null),
|
|
21
|
-
React.createElement(Notification, { variant: 'warn', count: 5, message: 'This is a notification with a count' }),
|
|
22
|
-
React.createElement("br", null),
|
|
23
|
-
React.createElement(Notification, { variant: 'danger', count: 5, message: 'This is a notification with a count' })));
|
|
24
|
-
export const WithAction = () => (React.createElement(Notification, { variant: 'info', message: 'This is a notification with an action', action: 'Undo', onAction: () => alert('Undoing...') }));
|
|
25
|
-
export default {
|
|
26
|
-
title: 'Components/Notification',
|
|
27
|
-
component: Notification,
|
|
28
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Meta } from '@storybook/react/types-6-0';
|
|
3
|
-
export declare const Standard: () => JSX.Element;
|
|
4
|
-
export declare const Interactive: () => JSX.Element;
|
|
5
|
-
export declare const OverModal: () => JSX.Element;
|
|
6
|
-
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
|
7
|
-
export default _default;
|