feat(plasma-rsc): Added TextArea

packages/plasma-rsc/src/components/TextArea/TextArea.styles.ts

@@ -0,0 +1,204 @@
+import { styled } from '@linaria/react';
+
+import { applyEllipsis } from '../../mixins';
+
+import { tokens } from './TextArea.tokens';
+
+export const StyledLabel = styled.div`
+    margin-bottom: var(${tokens.labelMarginBottom});
+
+    font-family: var(${tokens.inputFontFamily});
+    font-size: var(${tokens.inputFontSize});
+    font-style: var(${tokens.inputFontStyle});
+    font-weight: var(${tokens.inputFontWeight});
+    letter-spacing: var(${tokens.inputLetterSpacing});
+    line-height: var(${tokens.inputLineHeight});
+`;
+
+export const StyledTextAreaWrapper = styled.div<{
+    hasHelper: boolean;
+}>`
+    background-color: var(${tokens.inputBackgroundColor});
+
+    padding-top: var(${tokens.inputPaddingTop});
+    padding-bottom: ${({ hasHelper }) =>
+        hasHelper ? `var(${tokens.inputPaddingBottomWithHelpers})` : `var(${tokens.inputPaddingBottom})`};
+
+    border-radius: ${({ hasHelper }) =>
+        hasHelper ? `var(${tokens.borderRadiusWithHelpers})` : `var(${tokens.borderRadius})`};
+`;
+
+export const StyledContent = styled.div`
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: 0;
+    z-index: 1;
+
+    top: var(${tokens.rightContentTop});
+    right: var(${tokens.rightContentRight});
+
+    height: var(${tokens.rightContentHeight});
+`;
+
+export const StyledContainer = styled.div<any>`
+    display: inline-flex;
+    flex-direction: column;
+
+    width: ${({ width }) => width};
+
+    position: relative;
+`;
+
+export const StyledTextArea = styled.textarea<{
+    hasHelper: boolean;
+    hasContentRight: boolean;
+    applyCustomWidth: boolean;
+    width?: string | number;
+    height?: string | number;
+    resize?: string;
+}>`
+    display: block;
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+    -webkit-appearance: none; /* для отображение рамок на iOS */
+    background-color: transparent;
+
+    color: var(${tokens.inputColor});
+    caret-color: var(${tokens.inputCaretColor});
+
+    resize: ${({ resize }) => resize || 'none'};
+
+    --plasma_private-textarea-height: ${({ height }) =>
+        !Number.isNaN(Number(height)) ? `calc(${height}rem - 0.875rem)` : height || `var(${tokens.inputHeight})`};
+
+    --plasma_private-textarea-width: ${({ width }) =>
+        !Number.isNaN(Number(width)) ? `${width}rem` : width || `var(${tokens.inputWidth})`};
+
+    --plasma_private-textarea-computed-height: ${({ rows }) =>
+        rows ? 'unset' : 'var(--plasma_private-textarea-height)'};
+    --plasma_private-textarea-computed-width: ${({ cols }) =>
+        cols ? 'unset' : 'var(--plasma_private-textarea-width)'};
+
+    height: var(--plasma_private-textarea-computed-height);
+    width: var(--plasma_private-textarea-computed-width);
+
+    min-width: ${({ applyCustomWidth }) => (applyCustomWidth ? 'var(--plasma_private-textarea-width)' : 'auto')};
+    max-width: ${({ applyCustomWidth }) => (applyCustomWidth ? 'var(--plasma_private-textarea-width)' : 'auto')};
+
+    min-height: var(${tokens.inputMinHeight});
+
+    padding-right: ${({ hasContentRight }) =>
+        hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent})` : `var(${tokens.inputPaddingRight})`};
+    padding-left: var(${tokens.inputPaddingLeft});
+    padding-top: 0;
+    padding-bottom: 0;
+
+    /* INFO: Высчитываем высоту блока с подсказками */
+    --plasma_private-textarea-helpers-computed-height: calc(
+        var(${tokens.helpersPaddingTop}) + var(${tokens.helpersPaddingBottom}) + var(${tokens.helpersLineHeight})
+    );
+
+    --plasma_private-textarea-input-with-helpers-height: calc(
+        var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) +
+            var(${tokens.helpersOffset})
+    );
+    --plasma_private-textarea-input-without-helpers-height: calc(
+        var(--plasma_private-textarea-computed-height) - var(${tokens.inputPaddingBottom})
+    );
+
+    --plasma_private-textarea-input-actual-height: ${({ hasHelper, rows }) =>
+        hasHelper && !rows
+            ? 'var(--plasma_private-textarea-input-with-helpers-height)'
+            : 'var(--plasma_private-textarea-input-without-helpers-height)'};
+
+    height: var(--plasma_private-textarea-input-actual-height);
+
+    font-family: var(${tokens.inputFontFamily});
+    font-size: var(${tokens.inputFontSize});
+    font-style: var(${tokens.inputFontStyle});
+    font-weight: var(${tokens.inputFontWeight});
+    letter-spacing: var(${tokens.inputLetterSpacing});
+    line-height: var(${tokens.inputLineHeight});
+
+    &::placeholder {
+        opacity: 0;
+    }
+
+    &:read-only {
+        cursor: default;
+    }
+
+    &:focus:not(:disabled) {
+        color: var(${tokens.inputColorFocus});
+    }
+`;
+
+export const StyledHelpers = styled.div`
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    transition: background-color 0.1s ease-in-out;
+
+    background-color: var(${tokens.helpersBackgroundColor});
+
+    padding-top: var(${tokens.helpersPaddingTop});
+    padding-right: var(${tokens.helpersPaddingRight});
+    padding-bottom: var(${tokens.helpersPaddingBottom});
+    padding-left: var(${tokens.helpersPaddingLeft});
+
+    border-bottom-left-radius: var(${tokens.borderRadius});
+    border-bottom-right-radius: var(${tokens.borderRadius});
+`;
+
+export const StyledLeftHelper = styled.span`
+    ${applyEllipsis()};
+
+    display: block;
+
+    font-family: var(${tokens.helpersFontFamily});
+    font-size: var(${tokens.helpersFontSize});
+    font-style: var(${tokens.helpersFontStyle});
+    font-weight: var(${tokens.helpersFontWeight});
+    letter-spacing: var(${tokens.helpersLetterSpacing});
+    line-height: var(${tokens.helpersLineHeight});
+
+    color: var(${tokens.leftHelperColor});
+`;
+
+export const StyledRightHelper = styled(StyledLeftHelper)`
+    color: var(${tokens.rightHelperColor});
+    margin-left: auto;
+`;
+
+export const StyledPlaceholder = styled.label<{
+    hasContentRight: boolean;
+}>`
+    box-sizing: border-box;
+    position: absolute;
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+
+    transition: all 0.1s ease-in-out;
+    transform-origin: top left;
+
+    color: var(${tokens.placeholderColor});
+
+    width: 100%;
+    height: auto;
+
+    top: var(${tokens.inputPaddingTop});
+    padding-left: var(${tokens.inputPaddingLeft});
+    padding-right: ${({ hasContentRight }) =>
+        hasContentRight ? `var(${tokens.inputPaddingRightWithRightContent})` : `var(${tokens.inputPaddingRight})`};
+
+    font-family: var(${tokens.inputFontFamily});
+    font-size: var(${tokens.inputFontSize});
+    font-style: var(${tokens.inputFontStyle});
+    font-weight: var(${tokens.inputFontWeight});
+    letter-spacing: var(${tokens.inputLetterSpacing});
+    line-height: var(${tokens.inputLineHeight});
+`;

packages/plasma-rsc/src/components/TextArea/TextArea.tokens.ts

@@ -0,0 +1,149 @@
+export const classes = {
+    /** Класс отвечающий за поднятие и уменьшение плейсхолдера */
+    innerPlaceholderUp: 'inner-placeholder-up',
+    /** Класс отвечающий за изменение цвета плейсхолдера при фокусе */
+    focusedOuterPlaceholderColor: 'focused-outer-placeholder-color',
+    /** Класс отвечающий за скрытие плейсхолдера */
+    hidePlaceHolder: 'hide-placeholder',
+    /** Класс для компонента `StyledContainer` */
+    styledContainer: 'textarea-container',
+    /** Класс для компонента `StyledTextArea` */
+    styledTextArea: 'textarea',
+    /** Класс для компонента `StyledTextAreaWrapper` */
+    styledTextAreaWrapper: 'textarea-wrapper',
+    /** Класс для компонента `StyledPlaceholder` */
+    styledPlaceholder: 'textarea-placeholder',
+    /** Класс для компонента `StyledHelpers` */
+    styledHelpers: 'textarea-helpers',
+};
+
+export const tokens = {
+    /** Цвет фона для элемента textarea */
+    inputBackgroundColor: '--plasma-textarea-input-background-color',
+    /** Цвет фона для элемента textarea в состоянии hover */
+    inputBackgroundColorHover: '--plasma-textarea-input-background-color-hover',
+    /** Цвет фона для элемента textarea в состоянии active */
+    inputBackgroundColorActive: '--plasma-textarea-input-background-color-active',
+    /** Цвет фона для элемента textarea в состоянии focus */
+    inputBackgroundColorFocus: '--plasma-textarea-input-background-color-focus',
+    /** Цвета границы для элемента textarea */
+    inputBorderColor: '--plasma-textarea-input-border-color',
+    /** Цвета границы для элемента textarea в состоянии hover */
+    inputBorderColorHover: '--plasma-textarea-input-border-color-hover',
+    /** Цвета границы для элемента textarea в состоянии active */
+    inputBorderColorActive: '--plasma-textarea-input-border-color-active',
+    /** Цвета границы для элемента textarea в состоянии focus */
+    inputBorderColorFocus: '--plasma-textarea-input-border-color-focus',
+    /** Цвет фона для блока подписей снизу */
+    helpersBackgroundColor: '--plasma-textarea-helpers-background-color',
+    /** Цвет фона для блока подписей снизу в состоянии hover */
+    helpersBackgroundColorHover: '--plasma-textarea-helpers-background-color-hover',
+    /** Цвет фона для блока подписей снизу в состоянии active */
+    helpersBackgroundColorActive: '--plasma-textarea-helpers-background-color-active',
+    /** Цвет фона для блока подписей снизу в состоянии focus */
+    helpersBackgroundColorFocus: '--plasma-textarea-helpers-background-color-focus',
+    /** Цвет текста для элемента textarea */
+    inputColor: '--plasma-textarea-input-color',
+    /** Цвет текста для элемента textarea в состоянии focus */
+    inputColorFocus: '--plasma-textarea-input-color-focus',
+    /** Цвет каретки для элемента textarea */
+    inputCaretColor: '--plasma-textarea-input-caret-color',
+    /** Цвет элемента placeholder */
+    placeholderColor: '--plasma-textarea-placeholder-color',
+    /** Цвет элемента placeholder в состоянии focus */
+    placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
+    /** Цвет текста для левой подписи снизу */
+    leftHelperColor: '--plasma-textarea-left-helper-color',
+    /** Цвет текста для правой подписи снизу */
+    rightHelperColor: '--plasma-textarea-right-helper-color',
+    /** Цвета границы для всего компонента */
+    borderColor: '--plasma-textarea-border-color',
+    /** Цвета границы для всего компонента в состоянии hover */
+    borderColorHover: '--plasma-textarea-border-color-hover',
+    /** Цвета границы для всего компонента в состоянии focus */
+    borderColorFocus: '--plasma-textarea-border-color-focus',
+
+    /** Ширина элемента textarea */
+    inputWidth: '--plasma-textarea-input-width',
+    /** Высота элемента textarea */
+    inputHeight: '--plasma-textarea-input-height',
+    /** Минимальная высота элемента textarea */
+    inputMinHeight: '--plasma-textarea-input-min-height',
+    /** Толщина рамки всего компонента */
+    borderSize: '--plasma-textarea-border-size',
+    /** Размер скругления рамки всего компонента */
+    borderRadius: '--plasma-textarea-border-radius',
+    /** Размер скругления рамки всего компонента, когда есть блок подписей и у него нет рамки */
+    borderRadiusWithHelpers: '--plasma-textarea-border-radius-with-helpers',
+    /** Отступ сверху для элемента textarea */
+    inputPaddingTop: '--plasma-textarea-input-padding-top',
+    /** Отступ справа для элемента textarea */
+    inputPaddingRight: '--plasma-textarea-input-padding-right',
+    /** Отступ справа для элемента textarea, когда есть контент справа */
+    inputPaddingRightWithRightContent: '--plasma-textarea-input-padding-right-with-right-content',
+    /** Отступ снизу для элемента textarea */
+    inputPaddingBottom: '--plasma-textarea-input-padding-bottom',
+    /** Отступ снизу для элемента textarea, когда есть блок подписей */
+    inputPaddingBottomWithHelpers: '--plasma-textarea-input-padding-bottom-with-helpers',
+    /** Отступ слева для элемента textarea */
+    inputPaddingLeft: '--plasma-textarea-input-padding-left',
+    /** Отступ сверху для блока подписей */
+    helpersPaddingTop: '--plasma-textarea-helpers-padding-top',
+    /** Отступ справа для блока подписей */
+    helpersPaddingRight: '--plasma-textarea-helpers-padding-right',
+    /** Отступ снизу для блока подписей */
+    helpersPaddingBottom: '--plasma-textarea-helpers-padding-bottom',
+    /** Отступ слева для блока подписей */
+    helpersPaddingLeft: '--plasma-textarea-helpers-padding-left',
+    /** Вспомогательная высота для всего компонента, когда есть блок подписей и у него нет рамки */
+    helpersOffset: '--plasma-textarea-helpers-offset',
+    /** Отступ сверху для контента справа */
+    rightContentTop: '--plasma-textarea-right-content-top',
+    /** Отступ справа для контента справа */
+    rightContentRight: '--plasma-textarea-right-content-right',
+    /** Высота контента справа */
+    rightContentHeight: '--plasma-textarea-right-content-height',
+    /** Отступ сверху для элемента label, когда он внутри и уменьшен */
+    labelMarginBottom: '--plasma-textarea-label-margin-bottom',
+    /** Шрифт для элемента label, когда он внутри и уменьшен */
+    labelInnerFontFamily: '--plasma-textarea-label-inner-font-family',
+    /** Размер шрифта для элемента label, когда он внутри и уменьшен */
+    labelInnerFontSize: '--plasma-textarea-label-inner-font-size',
+    /** Стиль шрифта для элемента label, когда он внутри и уменьшен */
+    labelInnerFontStyle: '--plasma-textarea-label-inner-font-style',
+    /** Начертание шрифта для элемента label, когда он внутри и уменьшен */
+    labelInnerFontWeight: '--plasma-textarea-label-inner-font-weight',
+    /** Межсимвольное расстояние для элемента label, когда он внутри и уменьшен */
+    labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
+    /** Высота строки для элемента label, когда он внутри и уменьшен */
+    labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
+    /** Шрифт для элемента textarea */
+    inputFontFamily: '--plasma-textarea-input-font-family',
+    /** Размер шрифта для элемента textarea */
+    inputFontSize: '--plasma-textarea-input-font-size',
+    /** Стиль шрифта для элемента textarea */
+    inputFontStyle: '--plasma-textarea-input-font-style',
+    /** Начертание шрифта для элемента textarea */
+    inputFontWeight: '--plasma-textarea-input-font-weight',
+    /** Межсимвольное расстояние шрифта для элемента textarea */
+    inputLetterSpacing: '--plasma-textarea-input-letter-spacing',
+    /** Высота строки шрифта для элемента textarea */
+    inputLineHeight: '--plasma-textarea-input-line-height',
+    /** Шрифт для элемента блока подписей снизу */
+    helpersFontFamily: '--plasma-textarea-helpers-font-family',
+    /** Размер шрифта для элемента блока подписей снизу */
+    helpersFontSize: '--plasma-textarea-helpers-font-size',
+    /** Стиль шрифта для элемента блока подписей снизу */
+    helpersFontStyle: '--plasma-textarea-helpers-font-style',
+    /** Начертание шрифта для элемента блока подписей снизу */
+    helpersFontWeight: '--plasma-textarea-helpers-font-weight',
+    /** Межсимвольное расстояние для элемента блока подписей снизу */
+    helpersLetterSpacing: '--plasma-textarea-helpers-letter-spacing',
+    /** Высота строки для элемента блока подписей снизу */
+    helpersLineHeight: '--plasma-textarea-helpers-line-height',
+
+    /** Прозрачность для всего компонента в состоянии disabled */
+    disabledOpacity: '--plasma-textarea-disabled-opacity',
+    /** Цвет текста для элемента textarea в состоянии disabled */
+    inputColorDisabled: '--plasma-textarea-input-color-disabled',
+};