@imposium-hub/components 1.28.3 → 1.30.0

package/components/section/Section.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import Section from './Section';
+import TextField from '../text-field/TextField';
+import NumberField from '../number-field/NumberField';
+import Button from '../button/Button';
+import ButtonMenu from '../button-menu/ButtonMenu';
+import ButtonMenuItem from '../button-menu/ButtonMenuItem';
+import Card from '../card/Card';
+import {ICON_COPY, ICON_BARS} from '../../constants/icons';
+
+export default {
+    title: 'Section',
+    component: Section
+};
+
+export const defaultSection = () => {
+
+    const menuItems = [
+        <ButtonMenuItem
+            key = 'duplicate'
+            label = {<span>{ICON_COPY}&nbsp;Button Duplicate Overlay</span>}
+            onClick = {action('CLICKED')}/>,
+        <ButtonMenuItem
+            key = 'delete'
+            label = {<span>{ICON_COPY}&nbsp;Button Duplicate Overlay</span>}
+            onClick = {action('CLICKED')}/>
+    ];
+
+    const menu = <ButtonMenu
+        position = 'left'
+        items  = {menuItems}
+        button = {<Button style = 'subtle'>
+        {ICON_BARS}
+    </Button>}/>;
+
+    return (
+        <Section
+            title = 'Section Title'
+            buttons = {menu}
+        >
+            <Card
+                title = 'Card'
+                open = {true}
+                collapsable = {false}>
+                <TextField
+                    label = {'TextField'}
+                    tooltip = {'TOOLTIP'}
+                    value = {'name'}
+                    width = '33%'
+                    onChange = {action('CLICKED')}/>
+                <NumberField
+                    label = {'NumberField'}
+                    tooltip = {'TOOLTIP'}
+                    width = '33%'
+                    readOnly = {true}
+                    value = {1}
+                    onChange = {action('CLICKED')}
+                />
+            </Card>
+            <Card
+                title = 'Card'
+                open = {true}
+                collapsable = {false}>
+                <TextField
+                    label = {'TextField'}
+                    tooltip = {'TOOLTIP'}
+                    value = {'name'}
+                    width = '33%'
+                    onChange = {action('CLICKED')}/>
+                <NumberField
+                    label = {'NumberField'}
+                    tooltip = {'TOOLTIP'}
+                    width = '33%'
+                    readOnly = {true}
+                    value = {1}
+                    onChange = {action('CLICKED')}
+                />
+            </Card>
+        </Section>
+    );
+};

package/components/select-field/SelectField.stories.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import SelectField from './SelectField';
+import { action } from '@storybook/addon-actions';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'SelectField',
+    components: SelectField
+};
+
+interface ISelectOption {
+    label : string;
+    value : string;
+}
+
+interface ISelectFieldProps {
+    buttons? : any;
+    label? : string;
+    selectRef? : any;
+    options : any;
+    disable ? : boolean;
+    tooltip ? : IToolTipConfig | string;
+    placeholder? : string;
+    value : any;
+    width? : string | number;
+    onChange(e) : void;
+    info? : string;
+    labelPosition? : string;
+}
+
+export const defaultSelectField = () => (
+    <SelectField
+        label = {'Select Field'}
+        value = {'value'}
+        width = '50%'
+        options = { ['Option1', 'Option2'] }
+        onChange = {action('CHANGED')}/>
+);

package/components/shortcut-menu/ShortcutMenu.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import ShortcutMenu from './ShortcutMenu';
+
+export default {
+    title: 'ShortcutMenu',
+    component: ShortcutMenu
+};
+
+interface IShortcutMenu {
+    shortcutCopyMap : any;
+    heading? : string;
+}
+
+const shortcuts = {
+    'Up': 'Select previous experience',
+    'Down': 'Select next experience',
+    'Left': 'Go to previous page',
+    'Right': 'Go to next page',
+    'Shift + R': 'Refresh current page'
+};
+
+export const defaultShortcutMenu = () => (
+    <ShortcutMenu shortcutCopyMap = {shortcuts} />
+);

package/components/slider-field/SliderField.stories.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import SliderField from './SliderField';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'SliderField',
+    component: SliderField
+};
+
+interface ISliderFieldProps {
+    label? : string;
+    value : number;
+    width? : string | number;
+    min : number;
+    max : number;
+    step : number;
+    tooltip? : IToolTipConfig | string;
+    defaultValue : number;
+    onChange(e) : void;
+    info? : string;
+    labelPosition? : string;
+}
+
+interface ISliderFieldState {
+    inputValue : any;
+}
+
+export const defaultSliderField = () => {
+    const [sliderValue, setSliderValue] = React.useState(5);
+
+    const handleChange = (e) => {
+        setSliderValue(e.target.value);
+    };
+
+    return (
+        <div style={{width: '50%'}}>
+            <SliderField
+                label = {'Slider Field'}
+                min = {0}
+                max = {50}
+                step = {1}
+                value = {sliderValue}
+                defaultValue = {0}
+                onChange = {handleChange}
+            />
+        </div>
+    );
+};

package/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Tabs from './Tabs';
+
+export default {
+    title: 'Tabs',
+    component: Tabs
+};
+
+interface ITab {
+    content : any;
+    key : string;
+    canClose? : boolean;
+    resize? : boolean;
+    label : string;
+}
+
+interface ITabsProps {
+    activeTab? : string;
+    keepMounted? : boolean;
+    options : ITab[];
+    onChange(i) : void;
+    onClose(i) : void;
+    tabPadding? : number;
+}
+
+interface ITabsState {
+    allowableTabsInView : number | null;
+}
+
+const tabs = [
+    {
+        label: 'Tab1',
+        key: 'project',
+        content: 'Content 1'
+    },
+    {
+        label: 'Tab2',
+        key: 'moderation',
+        content: 'Content 2'
+    },
+    {
+        label: 'Tab3',
+        key: 'advanced',
+        content: 'Content 3'
+    },
+    {
+        label: 'Tab4',
+        key: 'video',
+        content: 'Content 4'
+    }
+];
+
+export const defaultTabs = () => {
+    const [activeTab, setActiveTab] = React.useState('project');
+
+    const handleTabChange = (i) => {
+        setActiveTab(i);
+    };
+
+    return (
+        <Tabs
+            activeTab = { activeTab }
+            onChange = {(i) => handleTabChange(i)}
+            options = {tabs}/>
+    );
+};

package/components/text-area-field/TextAreaField.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import TextAreaField from './TextAreaField';
+import { action } from '@storybook/addon-actions';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'TextAreaField',
+    components: TextAreaField
+};
+
+interface ITextAreaFieldProps {
+    buttons? : any;
+    controlled? : boolean;
+    disabled? : boolean;
+    label? : string;
+    placeholder? : string;
+    readOnly? : boolean;
+    value : string;
+    showCopy? : boolean;
+    width? : string | number;
+    tooltip? : IToolTipConfig | string;
+    onBlur?(e) : void;
+    onChange?(e) : void;
+    onFocus?(e) : void;
+    onNotification?(n, t?) : void;
+    onError?(e) : void;
+    onSubmit?(e) : void;
+    info? : string;
+    labelPosition? : string;
+}
+
+interface ITextAreaFieldState {
+    editing : boolean;
+    internalValue : string;
+}
+
+export const defaultTextAreaField = () => (
+    <TextAreaField
+        label = {'TextArea Field'}
+        showCopy = {true}
+        tooltip = {'TOOLTIP'}
+        value = {''}
+        onNotification = {(n) => action(n)}
+        onError = {(n) => action(n)}
+        onChange = {action('CHANGED')}/>
+);

package/components/text-field/TextField.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import TextField from './TextField';
+import { IToolTipConfig } from '../Tooltip';
+
+export default {
+    title: 'TextField',
+    components: TextField
+};
+
+interface ITextFieldProps {
+    buttons? : any;
+    controlled? : boolean;
+    loading? : boolean;
+    disabled? : boolean;
+    submittable? : boolean;
+    focusOnMount ? : boolean;
+    label? : string;
+    placeholder? : string;
+    readOnly? : boolean;
+    value? : string;
+    tooltip ? : IToolTipConfig | string;
+    showCopy? : boolean;
+    width? : string | number;
+    submittableType? : 'search' | 'add';
+    suggestions? : string[];
+    hideButtons? : boolean;
+    onBlur?(e) : void;
+    onChange?(e) : void;
+    onFocus?(e) : void;
+    onNotification?(e) : void;
+    onError?(e) : void;
+    onSubmit?(e) : void;
+    doSubmit? : (v : string) => any;
+    pattern? : RegExp;
+    info? : string;
+    labelPosition? : string;
+}
+
+interface ITextFieldState {
+    editing : boolean;
+    suggestions : string[];
+    internalValue : string;
+}
+
+export const defaultTextField = () => (
+    <TextField
+        label = {'Label'}
+        tooltip = {'TOOLTIP'}
+        value = {''}
+        onChange = {(v) => action(v)}/>
+);