@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/publish-wizard/publish/HubSpotFlow.tsx

@@ -3,15 +3,15 @@ import Button from '../../button/Button';
 import TextAreaField from '../../text-area-field/TextAreaField';
 import HRule from '../../h-rule/HRule';
 import * as copy from '../../../constants/copy';
-import {ICON_CLIPBOARD} from '../../../constants/icons';
+import { ICON_CLIPBOARD } from '../../../constants/icons';
 
 interface IHubSpotFlowProps {
-    story : any;
-    status : string;
-    compositionId : string;
-    accessKey : string;
-    handleError(e) : void;
-    handleNotification? : (n) => void;
+    story: any;
+    status: string;
+    compositionId: string;
+    accessKey: string;
+    handleError(e): void;
+    handleNotification?: (n) => void;
 }
 
 class HubSpotFlow extends React.PureComponent<IHubSpotFlowProps, undefined> {
@@ -20,7 +20,7 @@ class HubSpotFlow extends React.PureComponent<IHubSpotFlowProps, undefined> {
     }
 
     private createUrl() {
-        const { story, compositionId, accessKey} = this.props;
+        const { story, compositionId, accessKey } = this.props;
         const storyId = story.id;
         const act = this.getFirstAct(story);
         const variables = act.inventory;
@@ -28,50 +28,54 @@ class HubSpotFlow extends React.PureComponent<IHubSpotFlowProps, undefined> {
 
         for (const key in variables) {
             if (variables.hasOwnProperty(key)) {
-                const prefix = (queryString) ? '&' : '?';
+                const prefix = queryString ? '&' : '?';
                 queryString += `${prefix}${key}={{${key.toUpperCase()}}}`;
             }
         }
 
         const href = window.location.href;
-        const root = (href.indexOf('staging') !== -1 || href.indexOf('localhost') !== -1) ? 'staging.imposium.com' : 'imposium.com';
+        const root =
+            href.indexOf('staging') !== -1 || href.indexOf('localhost') !== -1
+                ? 'staging.imposium.com'
+                : 'imposium.com';
         const playerUrl = `https://player.${root}/new/${accessKey}/${storyId}/${compositionId}${queryString}`;
         const posterUrl = `https://api.${root}/story/${storyId}/${compositionId}/poster${queryString}`;
         return `<a href="${playerUrl}" target="_blank"><img width="400" alt="Play Video" src="${posterUrl}"></a>`;
     }
 
-    private getFirstAct = (story) : any => {
-
+    private getFirstAct = (story): any => {
         for (const key in story.acts) {
             if (story.acts.hasOwnProperty(key)) {
                 return story.acts[key];
             }
         }
-    }
+    };
 
     public render() {
-        const {status, handleError, handleNotification} = this.props;
+        const { status, handleError, handleNotification } = this.props;
         return (
             <div>
                 <h2>{copy.publish.hubspotTitle}</h2>
-                <HRule/>
+                <HRule />
                 <p>{copy.publish.hubspotDesc}</p>
-                <HRule/>
+                <HRule />
                 <TextAreaField
                     label={copy.publish.embeddedCode}
                     value={this.createUrl()}
-                    showCopy = {status !== copy.header.publishing}
-                    onNotification = {(n) => handleNotification(n)}
-                    onError = {(e) => handleError(e)}
-                    readOnly = {true}/>
-                {status === copy.header.publishing &&
-                <Button size={'small'} customStyles={{margin: 0, height: '20px', border: 'none'}}
+                    showCopy={status !== copy.header.publishing}
+                    onNotification={(n) => handleNotification(n)}
+                    onError={(e) => handleError(e)}
+                    readOnly={true}
+                />
+                {status === copy.header.publishing && (
+                    <Button
+                        size={'small'}
+                        customStyles={{ margin: 0, height: '20px', border: 'none' }}
                         color='primary'
-                        onClick={() => handleError(copy.publish.embeddedCodeCopyError)}
-                >
-                    {ICON_CLIPBOARD}
-                </Button>
-                }
+                        onClick={() => handleError(copy.publish.embeddedCodeCopyError)}>
+                        {ICON_CLIPBOARD}
+                    </Button>
+                )}
             </div>
         );
     }

package/src/components/publish-wizard/publish/PublishStatusIndicator.tsx

@@ -7,69 +7,84 @@ import { ICON_TIMES } from '../../../constants/icons';
 import { bindActionCreators } from 'redux';
 
 interface IPublishStatusIndicatorProps {
-    publishData : any;
-    cancelPublish(api : IImposiumAPI, storyId : string) : void;
-    api : IImposiumAPI;
+    publishData: any;
+    cancelPublish(api: IImposiumAPI, storyId: string): void;
+    api: IImposiumAPI;
 }
 
 interface IPublishStatusIndicatorStates {
-    hover : boolean;
-    publishing : boolean;
+    hover: boolean;
+    publishing: boolean;
 }
-class PublishStatusIndicator extends React.PureComponent<IPublishStatusIndicatorProps, IPublishStatusIndicatorStates> {
-
+class PublishStatusIndicator extends React.PureComponent<
+    IPublishStatusIndicatorProps,
+    IPublishStatusIndicatorStates
+> {
     constructor(props) {
-
         super(props);
 
         this.state = {
             hover: false,
-            publishing: true,
+            publishing: true
         };
     }
 
     public onEnterHandler() {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     }
 
     public onLeaveHandler() {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     }
 
     public cancelPublisingHandler() {
-        const { publishData: {story_id}, api } = this.props;
+        const {
+            publishData: { story_id },
+            api
+        } = this.props;
         this.props.cancelPublish(api, story_id);
     }
 
     public render() {
-        const { publishing, version} = this.props.publishData;
+        const { publishing, version } = this.props.publishData;
         const { hover } = this.state;
 
         // nothing published yet, using working copy
         if (!publishing && !version) {
             return null;
         } else {
-
-            let cta : any = '';
+            let cta: any = '';
             if (publishing) {
                 const newVersion = version || 0 + 1;
                 const publishingString = `v${newVersion} Publishing`;
 
-                cta = <span onMouseEnter={() => this.onEnterHandler()} onMouseLeave={() => this.onLeaveHandler()}>
-                    {hover ?
-                    <><span onClick={() => this.cancelPublisingHandler()} style={{cursor: 'pointer'}}>{ICON_TIMES}</span>{' '}{publishingString}</> :
-                    <><Spinner/>{publishingString}</>
-                    }
-                    </span>;
+                cta = (
+                    <span
+                        onMouseEnter={() => this.onEnterHandler()}
+                        onMouseLeave={() => this.onLeaveHandler()}>
+                        {hover ? (
+                            <>
+                                <span
+                                    onClick={() => this.cancelPublisingHandler()}
+                                    style={{ cursor: 'pointer' }}>
+                                    {ICON_TIMES}
+                                </span>{' '}
+                                {publishingString}
+                            </>
+                        ) : (
+                            <>
+                                <Spinner />
+                                {publishingString}
+                            </>
+                        )}
+                    </span>
+                );
             } else {
                 cta = <span>{`v${version} Live`}</span>;
             }
 
-            return <div className = 'publish-status-indicator'>
-                {cta}
-            </div>;
+            return <div className='publish-status-indicator'>{cta}</div>;
         }
-
     }
 }
 
@@ -77,8 +92,8 @@ const mapStateToProps = (state) => ({
     publishData: state.publish
 });
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({cancelPublish}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ cancelPublish }, dispatch);
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PublishStatusIndicator);

package/src/components/publish-wizard/publish/WebpageHosted.tsx

@@ -1,28 +1,36 @@
 import * as React from 'react';
 import * as copy from '../../../constants/copy';
-import {BigLink, BigButton } from '../PublishWizard';
-import {ICON_DOWNLOAD, ICON_GLOBE, ICON_JS, ICON_PROJECT_DIAGRAM} from '../../../constants/icons';
-import {downloadSDKArchive, ISDKArchiveBody} from '../../../utils/template-generator';
-import {getDemoURL} from '../../../utils/routing';
+import { BigLink, BigButton } from '../PublishWizard';
+import { ICON_DOWNLOAD, ICON_GLOBE, ICON_JS, ICON_PROJECT_DIAGRAM } from '../../../constants/icons';
+import { downloadSDKArchive, ISDKArchiveBody } from '../../../utils/template-generator';
+import { getDemoURL } from '../../../utils/routing';
 import HRule from '../../h-rule/HRule';
 
 interface IWebpageHostedProps {
-    story : any;
-    accessKey : string;
-    compositionId : string;
+    story: any;
+    accessKey: string;
+    compositionId: string;
 }
 
 export const documentationLinks = [
     {
         key: 'js-sdk-link',
-        label : <span>{ICON_JS}&nbsp;{copy.integration.js}</span>,
-        link : copy.integration.jsSdkLink
+        label: (
+            <span>
+                {ICON_JS}&nbsp;{copy.integration.js}
+            </span>
+        ),
+        link: copy.integration.jsSdkLink
     },
     {
         key: 'rest-link',
-        label : <span>{ICON_PROJECT_DIAGRAM}&nbsp;{copy.integration.rest}</span>,
-        link : copy.integration.restLink
-    },
+        label: (
+            <span>
+                {ICON_PROJECT_DIAGRAM}&nbsp;{copy.integration.rest}
+            </span>
+        ),
+        link: copy.integration.restLink
+    }
 ];
 
 class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
@@ -32,9 +40,9 @@ class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
 
     private downloadSampleWebPage = () => {
         const { story, compositionId, accessKey } = this.props;
-        const firstAct : any = this.getFirstAct(story);
-        let archiveName : string;
-        let sdkExampleBody : ISDKArchiveBody;
+        const firstAct: any = this.getFirstAct(story);
+        let archiveName: string;
+        let sdkExampleBody: ISDKArchiveBody;
         if (
             story.id &&
             story.name &&
@@ -52,19 +60,22 @@ class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
 
             downloadSDKArchive(archiveName, sdkExampleBody);
         }
-    }
-
-    private getFirstAct = (story) : any => {
+    };
 
+    private getFirstAct = (story): any => {
         for (const key in story.acts) {
             if (story.acts.hasOwnProperty(key)) {
                 return story.acts[key];
             }
         }
-    }
+    };
 
     private linkToDemoPage() {
-        const {accessKey, compositionId, story: {id}} = this.props;
+        const {
+            accessKey,
+            compositionId,
+            story: { id }
+        } = this.props;
         if (accessKey) {
             const demoUrl = `${getDemoURL()}/${accessKey}/${id}/${compositionId}`;
             window.open(demoUrl, '_blank');
@@ -74,22 +85,30 @@ class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
     public render() {
         const webPageOptions = [
             {
-                label : <span>{ICON_GLOBE}&nbsp;{copy.publish.webPageHosted}</span>,
-                onClick: () => this.linkToDemoPage(),
+                label: (
+                    <span>
+                        {ICON_GLOBE}&nbsp;{copy.publish.webPageHosted}
+                    </span>
+                ),
+                onClick: () => this.linkToDemoPage()
             },
             {
-                label : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.sampleWebpage}</span>,
-                onClick: () => this.downloadSampleWebPage(),
-            },
+                label: (
+                    <span>
+                        {ICON_DOWNLOAD}&nbsp;{copy.publish.sampleWebpage}
+                    </span>
+                ),
+                onClick: () => this.downloadSampleWebPage()
+            }
         ];
 
         return (
             <div>
                 <h2>{copy.publish.webpageTitle}</h2>
-                <HRule/>
+                <HRule />
                 <p>{copy.publish.webpageDesc}</p>
-                <HRule/>
-                <div className = 'link-wrapper'>
+                <HRule />
+                <div className='link-wrapper'>
                     {webPageOptions?.map((option, index) => {
                         return (
                             <BigButton
@@ -100,20 +119,14 @@ class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
                         );
                     })}
                 </div>
-                <br/>
-                <br/>
+                <br />
+                <br />
                 <h2>{copy.integration.documentation}</h2>
-                <HRule/>
+                <HRule />
                 <p>{copy.integration.docParagraph}</p>
-                <div className = 'link-wrapper'>
-                    {documentationLinks?.map((link) =>   {
-                        return (
-                            <BigLink
-                                key={link.key}
-                                label = {link.label}
-                                link = {link.link}
-                            />
-                        );
+                <div className='link-wrapper'>
+                    {documentationLinks?.map((link) => {
+                        return <BigLink key={link.key} label={link.label} link={link.link} />;
                     })}
                 </div>
             </div>

package/src/components/section/Section.stories.tsx

@@ -7,7 +7,7 @@ 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';
+import { ICON_COPY, ICON_BARS } from '../../constants/icons';
 
 export default {
     title: 'Section',
@@ -15,66 +15,61 @@ export default {
 };
 
 export const defaultSection = () => {
-
     const menuItems = [
         <ButtonMenuItem
-            key = 'duplicate'
-            label = {<span>{ICON_COPY}&nbsp;Button Duplicate Overlay</span>}
-            onClick = {action('CLICKED')}/>,
+            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')}/>
+            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>}/>;
+    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}>
+        <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')}/>
+                    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')}
+                    label={'NumberField'}
+                    tooltip={'TOOLTIP'}
+                    width='33%'
+                    readOnly={true}
+                    value={1}
+                    onChange={action('CLICKED')}
                 />
             </Card>
-            <Card
-                title = 'Card'
-                open = {true}
-                collapsable = {false}>
+            <Card title='Card' open={true} collapsable={false}>
                 <TextField
-                    label = {'TextField'}
-                    tooltip = {'TOOLTIP'}
-                    value = {'name'}
-                    width = '33%'
-                    onChange = {action('CLICKED')}/>
+                    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')}
+                    label={'NumberField'}
+                    tooltip={'TOOLTIP'}
+                    width='33%'
+                    readOnly={true}
+                    value={1}
+                    onChange={action('CLICKED')}
                 />
             </Card>
         </Section>

package/src/components/section/Section.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 
 const Section = (props) => {
-    const customClass : string = (typeof props.className === 'string') ? props.className : '';
-    const loader = (props.isLoading) ? <div className = 'loading-bar'/> : null;
-    let titleMarkup : JSX.Element = (<div className = 'title'>{props.title}</div>);
+    const customClass: string = typeof props.className === 'string' ? props.className : '';
+    const loader = props.isLoading ? <div className='loading-bar' /> : null;
+    let titleMarkup: JSX.Element = <div className='title'>{props.title}</div>;
 
     if (props.hasOwnProperty('tabs') && Array.isArray(props.tabs)) {
-        titleMarkup = props.tabs.map((tabName : string, i : number) => (
+        titleMarkup = props.tabs.map((tabName: string, i: number) => (
             <div
-                key = {i}
-                className = {`tab ${props.activeTabName === tabName ? 'active' : ''}`}
-                onClick = {() => props.selectTab(tabName, i)}>
+                key={i}
+                className={`tab ${props.activeTabName === tabName ? 'active' : ''}`}
+                onClick={() => props.selectTab(tabName, i)}>
                 {tabName}
             </div>
         ));
@@ -22,9 +22,7 @@ const Section = (props) => {
                 {titleMarkup}
                 <div className='buttons'>{props.buttons}</div>
             </div>
-            <div className='section-content'>
-                {props.children}
-            </div>
+            <div className='section-content'>{props.children}</div>
             {loader}
         </div>
     );

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

@@ -1,38 +1,18 @@
 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')}/>
+        label={'Select Field'}
+        value={'value'}
+        width='50%'
+        options={['Option1', 'Option2']}
+        onChange={action('CHANGED')}
+    />
 );