theexplay · May 24, 2019 15:14
diff --git a/AppBackButton.stories.tsx b/AppBackButton.stories.tsx
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import centered from '@storybook/addon-centered';
 import { text, withKnobs } from '@storybook/addon-knobs';
 import { AppBackButton } from './AppBackButton';

 storiesOf('Nebula/Organism', module)
    .addDecorator(withKnobs)
    .addDecorator(centered)
    .add('AppBackButton', () => {
        return (
            <div style={{textAlign: 'center'}}>
                <AppBackButton caption={text('caption', 'Back Button')} />
                <br/>
                <div style={{display: 'inline-block'}}>
                    <AppBackButton />
                </div>
            </div>
        );
    });
diff --git a/AppBackButton.tsx b/AppBackButton.tsx
 import * as React from 'react';
 import * as cn from 'classnames';
 import bem from '../../../../helpers/bem';
 import { DynamicTag } from '../../ds/DynamicTag';
 import { DsHelper } from '../../ds/DsHelper';
 import { Icon, IconValues } from '../Icon';
 import { AppBackButtonHasCaption } from './AppBackButtonValues';

 interface IAppBackButtonProps {
    caption?: string;
    parentClass?: string;
    onClick?(event: React.MouseEvent<HTMLElement>): void;
 }

 /**
 * Кнопка вернуться назад
 */
 const AppBackButton: React.FC<IAppBackButtonProps> = (props) => {
    const blockClass = 'nbl-appBackButton';
    const {caption, onClick} = props;

    return (
        <DynamicTag
            className={cn(
                DsHelper.computeBlockClass(props, blockClass),
                bem(blockClass, [`hasCaption_${!!caption ? AppBackButtonHasCaption.Yes : AppBackButtonHasCaption.No}`])
            )}
            onClick={onClick}
        >
            <Icon
                name={IconValues.IconArrowLeft20}
                parentClass={blockClass}
            />
            <div className={bem(blockClass, 'caption')}>
                {!!caption && caption}
            </div>
        </DynamicTag>
    );
 };

 export { AppBackButton, IAppBackButtonProps };
diff --git a/appBackButton.twig b/appBackButton.twig
 {#
    "appBackButton"
    @see http://nebula.dev.ivi.ru/preview/web.html#organism--appBackButton

    Variables Example
    {
        hasCaption: 'string'.isRequired, // 'yes' || 'no'
        text: 'string'.isOptional,
    }

    {% include "nebula/appBackButton.twig" with {
        hasCaption: 'yes'
        text: 'К фильму'
    }%}
 #}

 {% set blockClass = 'nbl-appBackButton' %}

 <a href="" class="{{ parentClass ? bem(parentClass, blockClass) }} {{ bem(blockClass, [hasCaption ? 'hasCaption_' ~ hasCaption]) }}">

    {# todo заменить на icon компонент #}
    <div class="{{ bem(bem(blockClass, 'nbl-icon'), [icon]) }} nbl-icon nbl-icon_arrowLeft_20"></div>
    <div class="{{ bem(bem(blockClass, 'caption'), [icon]) }}">{{ text }}</div>

 </a>
diff --git a/appBackButton__routines.less b/appBackButton__routines.less
 @import '../__';
 @import '../icon/icon__globals';

 .appBackButton {

    ._common(@commonData, @root, @rootPrefix) {
        .relative();
        .box-sizing(border-box);
        cursor: pointer;
        display: flex;
        height: @commonData[height];
        padding: @commonData[padY] @commonData[padX];
        user-select: none;

        .@{rootPrefix}@{root}__nbl-icon {
            // todo: добавить возможность применять иконку по прилетающему из небулы имени
            .icon_arrowLeft_20();
            .nbl-icon__size(20px);
            width: @commonData[iconWidth];
            height: @commonData[iconHeight];
            color: @commonData[defaultIconColor];
            transition-property: color, transform;
        }

        .@{rootPrefix}@{root}__caption {
            ._t__use(@commonData[captionTypo]);
            margin-left: @commonData[captionOffsetLeft];
            color: @commonData[defaultCaptionColor];
            transition-property: color;
        }

        &:not(:hover):not(:active) .@{rootPrefix}@{root}__caption {
            transition-duration: @commonData[transitionDurationOut];
        }

        &:hover:not(:active) .@{rootPrefix}@{root}__nbl-icon {
            color: @commonData[focusedIconColor];
        }

        &:hover:not(:active) .@{rootPrefix}@{root}__caption {
            color: @commonData[focusedCaptionColor];
            transition-duration: @commonData[transitionDurationIn];
        }

        &:active .@{rootPrefix}@{root}__nbl-icon,
        &:active .@{rootPrefix}@{root}__caption {
            transition-duration: @commonData[transitionDurationIn];
        }
    }

    .hasCaption(@hasCaptionData, @commonData, @root, @rootPrefix) {

        &.@{rootPrefix}@{root}:not(:hover):not(:active) .@{rootPrefix}@{root}__nbl-icon {
            transform: translateX(@hasCaptionData[defaultIconShiftX]);
            transition-property: color, transform;
            transition-duration: @commonData[transitionDurationOut];
        }

        &.@{rootPrefix}@{root}:hover:not(:active) .@{rootPrefix}@{root}__nbl-icon {
            transform: translateX(@hasCaptionData[focusedIconShiftX]);
            transition-property: color, transform;
            transition-duration: @commonData[transitionDurationIn];
        }

        &.@{rootPrefix}@{root}:active .@{rootPrefix}@{root}__nbl-icon {
            transform: translateX(@hasCaptionData[pressedIconShiftX]);
            transition-property: color, transform;
            transition-duration: @commonData[transitionDurationIn];
        }
    }
 }
diff --git a/index.ts b/index.ts
 export {AppBackButton, IAppBackButtonProps} from './AppBackButton';
	import * as React from 'react';
	import { storiesOf } from '@storybook/react';
	import centered from '@storybook/addon-centered';
	import { text, withKnobs } from '@storybook/addon-knobs';
	import { AppBackButton } from './AppBackButton';

	storiesOf('Nebula/Organism', module)
	.addDecorator(withKnobs)
	.addDecorator(centered)
	.add('AppBackButton', () => {
	return (
	<div style={{textAlign: 'center'}}>
	<AppBackButton caption={text('caption', 'Back Button')} />
	<br/>
	<div style={{display: 'inline-block'}}>
	<AppBackButton />
	</div>
	</div>
	);
	});
	import * as React from 'react';
	import * as cn from 'classnames';
	import bem from '../../../../helpers/bem';
	import { DynamicTag } from '../../ds/DynamicTag';
	import { DsHelper } from '../../ds/DsHelper';
	import { Icon, IconValues } from '../Icon';
	import { AppBackButtonHasCaption } from './AppBackButtonValues';

	interface IAppBackButtonProps {
	caption?: string;
	parentClass?: string;
	onClick?(event: React.MouseEvent<HTMLElement>): void;
	}

	/**
	* Кнопка вернуться назад
	*/
	const AppBackButton: React.FC<IAppBackButtonProps> = (props) => {
	const blockClass = 'nbl-appBackButton';
	const {caption, onClick} = props;

	return (
	<DynamicTag
	className={cn(
	DsHelper.computeBlockClass(props, blockClass),
	bem(blockClass, [`hasCaption_${!!caption ? AppBackButtonHasCaption.Yes : AppBackButtonHasCaption.No}`])
	)}
	onClick={onClick}
	>
	<Icon
	name={IconValues.IconArrowLeft20}
	parentClass={blockClass}
	/>
	<div className={bem(blockClass, 'caption')}>
	{!!caption && caption}
	</div>
	</DynamicTag>
	);
	};

	export { AppBackButton, IAppBackButtonProps };
	{#
	"appBackButton"
	@see http://nebula.dev.ivi.ru/preview/web.html#organism--appBackButton

	Variables Example
	{
	hasCaption: 'string'.isRequired, // 'yes' \|\| 'no'
	text: 'string'.isOptional,
	}

	{% include "nebula/appBackButton.twig" with {
	hasCaption: 'yes'
	text: 'К фильму'
	}%}
	#}

	{% set blockClass = 'nbl-appBackButton' %}

	<a href="" class="{{ parentClass ? bem(parentClass, blockClass) }} {{ bem(blockClass, [hasCaption ? 'hasCaption_' ~ hasCaption]) }}">

	{# todo заменить на icon компонент #}
	<div class="{{ bem(bem(blockClass, 'nbl-icon'), [icon]) }} nbl-icon nbl-icon_arrowLeft_20"></div>
	<div class="{{ bem(bem(blockClass, 'caption'), [icon]) }}">{{ text }}</div>

	</a>
	@import '../__';
	@import '../icon/icon__globals';

	.appBackButton {

	._common(@commonData, @root, @rootPrefix) {
	.relative();
	.box-sizing(border-box);
	cursor: pointer;
	display: flex;
	height: @commonData[height];
	padding: @commonData[padY] @commonData[padX];
	user-select: none;

	.@{rootPrefix}@{root}__nbl-icon {
	// todo: добавить возможность применять иконку по прилетающему из небулы имени
	.icon_arrowLeft_20();
	.nbl-icon__size(20px);
	width: @commonData[iconWidth];
	height: @commonData[iconHeight];
	color: @commonData[defaultIconColor];
	transition-property: color, transform;
	}

	.@{rootPrefix}@{root}__caption {
	._t__use(@commonData[captionTypo]);
	margin-left: @commonData[captionOffsetLeft];
	color: @commonData[defaultCaptionColor];
	transition-property: color;
	}

	&:not(:hover):not(:active) .@{rootPrefix}@{root}__caption {
	transition-duration: @commonData[transitionDurationOut];
	}

	&:hover:not(:active) .@{rootPrefix}@{root}__nbl-icon {
	color: @commonData[focusedIconColor];
	}

	&:hover:not(:active) .@{rootPrefix}@{root}__caption {
	color: @commonData[focusedCaptionColor];
	transition-duration: @commonData[transitionDurationIn];
	}

	&:active .@{rootPrefix}@{root}__nbl-icon,
	&:active .@{rootPrefix}@{root}__caption {
	transition-duration: @commonData[transitionDurationIn];
	}
	}

	.hasCaption(@hasCaptionData, @commonData, @root, @rootPrefix) {

	&.@{rootPrefix}@{root}:not(:hover):not(:active) .@{rootPrefix}@{root}__nbl-icon {
	transform: translateX(@hasCaptionData[defaultIconShiftX]);
	transition-property: color, transform;
	transition-duration: @commonData[transitionDurationOut];
	}

	&.@{rootPrefix}@{root}:hover:not(:active) .@{rootPrefix}@{root}__nbl-icon {
	transform: translateX(@hasCaptionData[focusedIconShiftX]);
	transition-property: color, transform;
	transition-duration: @commonData[transitionDurationIn];
	}

	&.@{rootPrefix}@{root}:active .@{rootPrefix}@{root}__nbl-icon {
	transform: translateX(@hasCaptionData[pressedIconShiftX]);
	transition-property: color, transform;
	transition-duration: @commonData[transitionDurationIn];
	}
	}
	}