@imposium-hub/components 1.29.0 → 1.30.0

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)}/>
+);