Merge pull request #14 from ONLYOFFICE/refactoring/text-heading
Refactoring/text heading
This commit is contained in:
commit
fbe1c4f1ff
@ -20,7 +20,7 @@ const App = ({ settings }) => {
|
||||
<Router history={history}>
|
||||
<StudioLayout>
|
||||
<Suspense
|
||||
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
|
||||
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
|
||||
>
|
||||
<Switch>
|
||||
<Redirect exact from="/" to={`${homepage}`} />
|
||||
|
@ -1,11 +1,10 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Header } from 'asc-web-components';
|
||||
import { store } from 'asc-web-common';
|
||||
import { store, Headline } from 'asc-web-common';
|
||||
const { getCurrentModule } = store.auth.selectors;
|
||||
|
||||
const ArticleHeaderContent = ({currentModuleName}) => {
|
||||
return <Header type="menu">{currentModuleName}</Header>;
|
||||
return <Headline type="menu">{currentModuleName}</Headline>;
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
|
@ -2,7 +2,8 @@ import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { withRouter } from "react-router";
|
||||
import PropTypes from "prop-types";
|
||||
import { IconButton, Header } from "asc-web-components";
|
||||
import { IconButton } from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { department } from "./../../../../../helpers/customNames";
|
||||
import { resetGroup } from "../../../../../store/group/actions";
|
||||
@ -36,7 +37,7 @@ class SectionHeaderContent extends React.Component {
|
||||
size="16"
|
||||
onClick={this.onBackClick}
|
||||
/>
|
||||
<Header type="content" style={textStyle}>{headerText}</Header>
|
||||
<Headline type="content" style={textStyle}>{headerText}</Headline>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -50,7 +50,7 @@ class GroupAction extends React.Component {
|
||||
articleHeaderContent={<ArticleHeaderContent />}
|
||||
articleMainButtonContent={<ArticleMainButtonContent />}
|
||||
articleBodyContent={<ArticleBodyContent />}
|
||||
sectionBodyContent={<Loader className="pageLoader" type="rombs" size={40} />}
|
||||
sectionBodyContent={<Loader className="pageLoader" type="rombs" size='40px' />}
|
||||
/>
|
||||
}
|
||||
</I18nextProvider>
|
||||
|
@ -29,7 +29,7 @@ const getFormatedGroups = (user, status) => {
|
||||
containerWidth='160px'
|
||||
type='action'
|
||||
title={temp[0].label}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
color={linkColor}
|
||||
onClick={temp[0].onClick}
|
||||
>
|
||||
@ -41,7 +41,7 @@ const getFormatedGroups = (user, status) => {
|
||||
isTextOverflow={true}
|
||||
containerWidth='160px'
|
||||
title={temp[0].label}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
color={linkColor}
|
||||
data={temp}
|
||||
>
|
||||
@ -80,7 +80,7 @@ const UserContent = ({ user, history, settings }) => {
|
||||
|
||||
return (
|
||||
<RowContent>
|
||||
<Link type='page' title={displayName} isBold={true} fontSize={15} color={nameColor} onClick={onUserNameClick} >{displayName}</Link>
|
||||
<Link type='page' title={displayName} isBold={true} fontSize='15px' color={nameColor} onClick={onUserNameClick} >{displayName}</Link>
|
||||
<>
|
||||
{status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
{status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
@ -91,7 +91,7 @@ const UserContent = ({ user, history, settings }) => {
|
||||
style={headDepartmentStyle}
|
||||
as="span"
|
||||
color={sideInfoColor}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
title={title}
|
||||
truncate={true}
|
||||
>
|
||||
@ -100,8 +100,8 @@ const UserContent = ({ user, history, settings }) => {
|
||||
: <div style={headDepartmentStyle}></div>
|
||||
}
|
||||
{groups}
|
||||
<Link type='page' title={mobilePhone} fontSize={12} color={sideInfoColor} onClick={onPhoneClick} >{mobilePhone}</Link>
|
||||
<Link containerWidth='220px' type='page' title={email} fontSize={12} color={sideInfoColor} onClick={onEmailClick} >{email}</Link>
|
||||
<Link type='page' title={mobilePhone} fontSize='12px' color={sideInfoColor} onClick={onPhoneClick} >{mobilePhone}</Link>
|
||||
<Link containerWidth='220px' type='page' title={email} fontSize='12px' color={sideInfoColor} onClick={onEmailClick} >{email}</Link>
|
||||
</RowContent>
|
||||
);
|
||||
};
|
||||
|
@ -4,11 +4,11 @@ import { withRouter } from "react-router";
|
||||
import {
|
||||
GroupButtonsMenu,
|
||||
DropDownItem,
|
||||
Header,
|
||||
toastr,
|
||||
ContextMenuButton,
|
||||
IconButton
|
||||
} from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
getSelectedGroup,
|
||||
@ -210,7 +210,7 @@ const SectionHeaderContent = props => {
|
||||
<div className="header-container">
|
||||
{group ? (
|
||||
<>
|
||||
<Header type="content" truncate={true}>{group.name}</Header>
|
||||
<Headline type="content" truncate={true}>{group.name}</Headline>
|
||||
{isAdmin && (
|
||||
<ContextMenuButton
|
||||
directionX="right"
|
||||
@ -225,7 +225,7 @@ const SectionHeaderContent = props => {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Header type="content">Departments</Header>
|
||||
<Headline type="content">Departments</Headline>
|
||||
{isAdmin && (
|
||||
<IconButton
|
||||
className="add-group-button"
|
||||
|
@ -104,10 +104,10 @@ class PureHome extends React.Component {
|
||||
<RequestLoader
|
||||
visible={this.state.isLoading}
|
||||
zIndex={256}
|
||||
loaderSize={16}
|
||||
loaderSize='16px'
|
||||
loaderColor={"#999"}
|
||||
label={`${t('LoadingProcessing')} ${t('LoadingDescription')}`}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
fontColor={"#999"}
|
||||
/>
|
||||
<PageLayout
|
||||
|
@ -235,7 +235,11 @@ class SectionBodyContent extends React.Component {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text fontSize={14} >
|
||||
<Text fontSize='18px' >
|
||||
Functionality at development stage.
|
||||
</Text>
|
||||
<br />
|
||||
<Text fontSize='14px' >
|
||||
Files are formatted according to <b>CSV RFC 4180</b> rules. <br />
|
||||
<b>Column Order:</b> FirstName, LastName, Email. <br />
|
||||
Comma delimiter, strings in unix format. <br />
|
||||
@ -249,7 +253,7 @@ class SectionBodyContent extends React.Component {
|
||||
</StyledFileInput>
|
||||
</SelectSourceWrapper>
|
||||
<br />
|
||||
<Text fontSize={14} >
|
||||
<Text fontSize='14px' >
|
||||
Ready for import: {splittedLines.length} of {splittedLines.length}
|
||||
</Text>
|
||||
<LoadCsvWrapper>
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { Header, IconButton, Badge } from "asc-web-components";
|
||||
import { IconButton } from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { withRouter } from "react-router";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@ -28,9 +29,9 @@ const SectionHeaderContent = props => {
|
||||
onClick={() => history.push(settings.homepage)}
|
||||
/>
|
||||
</div>
|
||||
<Header type="content" truncate={true} style={textStyle}>
|
||||
<Headline type="content" truncate={true} style={textStyle}>
|
||||
Add users to the portal (Development)
|
||||
</Header>
|
||||
</Headline>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -77,7 +77,7 @@ const getFormattedDepartments = departments => {
|
||||
const formattedDepartments = departments.map((department, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<Link type="page" fontSize={13} isHovered={true} onClick={onGroupClick.bind(this, department)}>
|
||||
<Link type="page" fontSize='13px' isHovered={true} onClick={onGroupClick.bind(this, department)}>
|
||||
{department.name}
|
||||
</Link>
|
||||
{departments.length - 1 !== index ? ", " : ""}
|
||||
@ -207,7 +207,7 @@ class ProfileInfo extends React.PureComponent {
|
||||
const formatedDepartments = department && getFormattedDepartments(groups);
|
||||
const supportEmail = "documentation@onlyoffice.com";
|
||||
const tooltipLanguage =
|
||||
<Text fontSize={13}>
|
||||
<Text fontSize='13px'>
|
||||
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
|
||||
"In case you cannot find your language in the list of the
|
||||
available ones, feel free to write to us at
|
||||
@ -248,7 +248,7 @@ class ProfileInfo extends React.PureComponent {
|
||||
}
|
||||
<Link
|
||||
type="page"
|
||||
fontSize={13}
|
||||
fontSize='13px'
|
||||
isHovered={true}
|
||||
title={email}
|
||||
onClick={this.onEmailClick.bind(email)}
|
||||
|
@ -11,8 +11,8 @@ import {
|
||||
Button,
|
||||
ModalDialog,
|
||||
AvatarEditor,
|
||||
Header
|
||||
} from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { withRouter } from "react-router";
|
||||
import {
|
||||
getUserStatus,
|
||||
@ -44,7 +44,7 @@ const wrapperStyle = {
|
||||
alignItems: "center"
|
||||
};
|
||||
|
||||
const HeaderContainer = styled(Header)`
|
||||
const HeaderContainer = styled(Headline)`
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
max-width: calc(100vw - 430px);
|
||||
@ -318,7 +318,7 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
User <b>{user.displayName}</b> will be deleted.
|
||||
</Text>
|
||||
<Text>Note: this action cannot be undone.</Text>
|
||||
<Text color="#c30" fontSize="18" style={{ margin: "20px 0" }}>
|
||||
<Text color="#c30" fontSize="18px" style={{ margin: "20px 0" }}>
|
||||
Warning!
|
||||
</Text>
|
||||
<Text>
|
||||
|
@ -57,7 +57,7 @@ class PureProfile extends React.Component {
|
||||
sectionHeaderContent: <SectionHeaderContent />,
|
||||
sectionBodyContent: <SectionBodyContent />
|
||||
} : {
|
||||
sectionBodyContent: <Loader className="pageLoader" type="rombs" size={40} />
|
||||
sectionBodyContent: <Loader className="pageLoader" type="rombs" size='40px' />
|
||||
};
|
||||
|
||||
return <PageLayout {...articleProps} {...sectionProps} />;
|
||||
|
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Header } from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
|
||||
const Container = styled.div`
|
||||
margin: 0 0 40px 0;
|
||||
`;
|
||||
|
||||
const StyledHeader = styled(Header)`
|
||||
const StyledHeader = styled(Headline)`
|
||||
margin: 0 0 24px 0;
|
||||
line-height: unset;
|
||||
`;
|
||||
|
@ -385,7 +385,7 @@ class CreateUserForm extends React.Component {
|
||||
|
||||
helpButtonHeaderContent={t("Mail")}
|
||||
tooltipContent={
|
||||
<Text fontSize={13} as="div">
|
||||
<Text fontSize='13px' as="div">
|
||||
<Trans i18nKey="EmailPopupHelper" i18n={i18n}>
|
||||
The main e-mail is needed to restore access to the portal in case of loss of the password and send notifications.
|
||||
<p className="tooltip_email" style={{margin: "1rem 0"}} >
|
||||
|
@ -459,26 +459,26 @@ class UpdateUserForm extends React.Component {
|
||||
<>
|
||||
<Text
|
||||
style={{paddingBottom: 17}}
|
||||
fontSize={13}>
|
||||
fontSize='13px'>
|
||||
{t("ProfileTypePopupHelper")}
|
||||
</Text>
|
||||
|
||||
<Text fontSize={12} as="div">
|
||||
<Text fontSize='12px' as="div">
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<Th>
|
||||
<Text isBold fontSize={13}>
|
||||
<Text isBold fontSize='13px'>
|
||||
{t("ProductsAndInstruments_Products")}
|
||||
</Text>
|
||||
</Th>
|
||||
<Th>
|
||||
<Text isBold fontSize={13}>
|
||||
<Text isBold fontSize='13px'>
|
||||
{t("Employee")}
|
||||
</Text>
|
||||
</Th>
|
||||
<Th>
|
||||
<Text isBold fontSize={13}>
|
||||
<Text isBold fontSize='13px'>
|
||||
{t("GuestCaption")}
|
||||
</Text>
|
||||
</Th>
|
||||
@ -568,7 +568,7 @@ class UpdateUserForm extends React.Component {
|
||||
|
||||
helpButtonHeaderContent={t("Mail")}
|
||||
tooltipContent={
|
||||
<Text fontSize={13} as="div">
|
||||
<Text fontSize='13px' as="div">
|
||||
<Trans i18nKey="EmailPopupHelper" i18n={i18n}>
|
||||
The main e-mail is needed to restore access to the portal in case of loss of the password and send notifications.
|
||||
<p style={{margin: "1rem 0"/*, height: "0", visibility: "hidden"*/}}>
|
||||
|
@ -2,16 +2,17 @@ import React, { useCallback } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from "react-router";
|
||||
import { IconButton, Header, utils } from 'asc-web-components';
|
||||
import { IconButton, utils } from 'asc-web-components';
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {typeUser, typeGuest } from './../../../../../helpers/customNames';
|
||||
import { typeUser, typeGuest } from './../../../../../helpers/customNames';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-Items: center;
|
||||
`;
|
||||
|
||||
const HeaderContainer = styled(Header)`
|
||||
const HeaderContainer = styled(Headline)`
|
||||
margin-left: 16px;
|
||||
max-width: calc(100vw - 430px);
|
||||
@media ${utils.device.tablet} {
|
||||
@ -38,7 +39,7 @@ const SectionHeaderContent = (props) => {
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick}/>
|
||||
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick} />
|
||||
<HeaderContainer type='content' truncate={true}>{headerText}</HeaderContainer>
|
||||
</Wrapper>
|
||||
);
|
||||
|
@ -66,7 +66,7 @@ class ProfileAction extends React.Component {
|
||||
}
|
||||
: {
|
||||
sectionBodyContent: (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
)
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { Header, IconButton } from "asc-web-components";
|
||||
import { IconButton } from "asc-web-components";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { withRouter } from "react-router";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@ -28,12 +29,12 @@ const SectionHeaderContent = props => {
|
||||
onClick={() => history.push(settings.homepage)}
|
||||
/>
|
||||
</div>
|
||||
<Header type="content" truncate={true} style={textStyle}>
|
||||
<Headline type="content" truncate={true} style={textStyle}>
|
||||
{/* {profile.displayName}
|
||||
{profile.isLDAP && ` (${t('LDAPLbl')})`}
|
||||
- */}
|
||||
{t('ReassignmentData')}
|
||||
</Header>
|
||||
</Headline>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -2473,13 +2473,13 @@ asap@~2.0.6:
|
||||
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
|
||||
|
||||
"asc-web-common@file:../../../packages/asc-web-common":
|
||||
version "1.0.13"
|
||||
version "1.0.12"
|
||||
dependencies:
|
||||
axios "^0.19.0"
|
||||
history "4.9.0"
|
||||
|
||||
"asc-web-components@file:../../../packages/asc-web-components":
|
||||
version "1.0.219"
|
||||
version "1.0.218"
|
||||
dependencies:
|
||||
email-addresses "^3.1.0"
|
||||
html-to-react "^1.4.2"
|
||||
@ -2891,6 +2891,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
||||
|
||||
bootstrap@4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
|
||||
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
|
||||
|
||||
brace-expansion@^1.1.7:
|
||||
version "1.1.11"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
||||
@ -6954,6 +6959,11 @@ jest@24.9.0:
|
||||
import-local "^2.0.0"
|
||||
jest-cli "^24.9.0"
|
||||
|
||||
jquery@3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
|
||||
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
|
||||
|
||||
js-base64@^2.1.8:
|
||||
version "2.5.1"
|
||||
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
|
||||
|
@ -13,7 +13,7 @@ const App = () => {
|
||||
<Router history={history}>
|
||||
<StudioLayout>
|
||||
<Suspense
|
||||
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
|
||||
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
|
||||
>
|
||||
<Switch>
|
||||
<PublicRoute exact path={["/login","/login/error=:error", "/login/confirmed-email=:confirmedEmail"]} component={Login} />
|
||||
|
@ -74,24 +74,24 @@ const Body = ({language}) => {
|
||||
</p>
|
||||
|
||||
<VersionStyle>
|
||||
<Text className="text_p" fontSize={14} color="#A3A9AE">
|
||||
<Text className="text_p" fontSize='14px' color="#A3A9AE">
|
||||
{`${t("AboutCompanyVersion")}: ${version.version}`}
|
||||
</Text>
|
||||
</VersionStyle>
|
||||
|
||||
<Text className="copyright-line" fontSize={14}>
|
||||
<Text className="copyright-line" fontSize='14px'>
|
||||
{t("AboutCompanyLicensor")}
|
||||
</Text>
|
||||
|
||||
<Text className="text_p" fontSize={16} isBold={true}>
|
||||
<Text className="text_p" fontSize='16px' isBold={true}>
|
||||
Ascensio System SIA
|
||||
</Text>
|
||||
|
||||
<Style>
|
||||
<Text className="text_p" fontSize={12}>
|
||||
<Text className="text_p" fontSize='12px'>
|
||||
<Text
|
||||
className="text_span"
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
@ -101,21 +101,21 @@ const Body = ({language}) => {
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
className="text_span"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
{t("AboutCompanyEmailTitle")}:{" "}
|
||||
<Link href="mailto:support@onlyoffice.com" fontSize={12}>
|
||||
<Link href="mailto:support@onlyoffice.com" fontSize='12px'>
|
||||
support@onlyoffice.com
|
||||
</Link>
|
||||
</Text>
|
||||
|
||||
<div style={{ marginTop: "4px" }}>
|
||||
<Text className="text_p" fontSize={12}>
|
||||
<Text className="text_p" fontSize='12px'>
|
||||
<Text
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
className="text_span"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
@ -126,28 +126,28 @@ const Body = ({language}) => {
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Link href="http://www.onlyoffice.com" fontSize={12}>
|
||||
<Link href="http://www.onlyoffice.com" fontSize='12px'>
|
||||
www.onlyoffice.com
|
||||
</Link>
|
||||
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<Text className="text_p" fontSize={12}>
|
||||
<Text className="text_p" fontSize='12px'>
|
||||
{t("LicensedUnder", {license: "GNU GPL v.3"} )}:{" "}
|
||||
<Link
|
||||
href="https://www.gnu.org/licenses/gpl-3.0.html"
|
||||
isHovered={true}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
>
|
||||
GNU GPL v.3
|
||||
</Link>{" "}
|
||||
</Text>
|
||||
|
||||
<Text className="text_p" fontSize={12}>
|
||||
<Text className="text_p" fontSize='12px'>
|
||||
{t("SourceCode")}:{" "}
|
||||
<Link
|
||||
href="https://github.com/ONLYOFFICE/CommunityServer"
|
||||
isHovered={true}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
>
|
||||
GitHub
|
||||
</Link>
|
||||
|
@ -24,7 +24,7 @@ const Confirm = ({ match, language }) => {
|
||||
return (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Suspense
|
||||
fallback={<Loader className="pageLoader" type="rombs" size={40} />}
|
||||
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
|
||||
>
|
||||
<Switch>
|
||||
<ConfirmRoute
|
||||
|
@ -27,7 +27,7 @@ class ActivateEmail extends React.PureComponent {
|
||||
render() {
|
||||
// console.log('Activate email render');
|
||||
return (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -184,19 +184,19 @@ class Confirm extends React.PureComponent {
|
||||
return (
|
||||
!isConfirmLoaded
|
||||
? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
)
|
||||
: (
|
||||
<ConfirmContainer>
|
||||
<div className='start-basis'>
|
||||
<div className='margin-left'>
|
||||
<Text className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='18px'>{t('InviteTitle')}</Text>
|
||||
|
||||
<div className='confirm-row full-width break-word'>
|
||||
<a href='/login'>
|
||||
<img src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
|
||||
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -293,11 +293,11 @@ class Confirm extends React.PureComponent {
|
||||
|
||||
{/* <Row className='confirm-row'>
|
||||
|
||||
<Text as='p' fontSize={14}>{t('LoginWithAccount')}</Text>
|
||||
<Text as='p' fontSize='14px'>{t('LoginWithAccount')}</Text>
|
||||
|
||||
</Row>
|
||||
*/}
|
||||
<Text className="confirm-row" fontSize={14} color="#c30">
|
||||
<Text className="confirm-row" fontSize='14px' color="#c30">
|
||||
{this.state.errorText}
|
||||
</Text>
|
||||
</div>
|
||||
|
@ -43,7 +43,7 @@ class ChangeEmail extends React.PureComponent {
|
||||
render() {
|
||||
console.log('Change email render');
|
||||
return (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -79,7 +79,7 @@ class Form extends React.PureComponent {
|
||||
alt="Logo"
|
||||
/>
|
||||
<Text className="owner-title">{greetingTitle}</Text>
|
||||
<Text className="owner-confirm_text" fontSize={18}>
|
||||
<Text className="owner-confirm_text" fontSize='18px'>
|
||||
{t("ConfirmOwnerPortalTitle", { newOwner: "NEW OWNER" })}
|
||||
</Text>
|
||||
{this.state.showButtons ? (
|
||||
@ -103,7 +103,7 @@ class Form extends React.PureComponent {
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Text className="owner-confirm-message" fontSize={12}>
|
||||
<Text className="owner-confirm-message" fontSize='12px'>
|
||||
{t("ConfirmOwnerPortalSuccessMessage")}
|
||||
</Text>
|
||||
)}
|
||||
|
@ -126,7 +126,7 @@ class Form extends React.PureComponent {
|
||||
const { isLoading, password, passwordEmpty } = this.state;
|
||||
|
||||
return !isConfirmLoaded ? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
) : (
|
||||
<BodyStyle>
|
||||
<div className="password-header">
|
||||
@ -139,7 +139,7 @@ class Form extends React.PureComponent {
|
||||
{greetingTitle}
|
||||
</Heading>
|
||||
</div>
|
||||
<Text className="password-text" fontSize={14}>
|
||||
<Text className="password-text" fontSize='14px'>
|
||||
{t("PassworResetTitle")}
|
||||
</Text>
|
||||
<PasswordInput
|
||||
|
@ -68,9 +68,9 @@ const PhoneForm = props => {
|
||||
{greetingTitle}
|
||||
</div>
|
||||
</div>
|
||||
<Text className="edit-text" isBold fontSize={14}>{subTitleTranslation}</Text>
|
||||
<Text fontSize={13}>{infoTranslation}: <b>+{currentPhone}</b></Text>
|
||||
<Text className="edit-text" fontSize={13}>{subInfoTranslation}</Text>
|
||||
<Text className="edit-text" isBold fontSize='14px'>{subTitleTranslation}</Text>
|
||||
<Text fontSize='13px'>{infoTranslation}: <b>+{currentPhone}</b></Text>
|
||||
<Text className="edit-text" fontSize='13px'>{subInfoTranslation}</Text>
|
||||
<TextInput
|
||||
id="phone"
|
||||
name="phone"
|
||||
|
@ -200,19 +200,19 @@ class Confirm extends React.PureComponent {
|
||||
return (
|
||||
!isConfirmLoaded
|
||||
? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
)
|
||||
: (
|
||||
<ConfirmContainer>
|
||||
<div className='start-basis'>
|
||||
<div className='margin-left'>
|
||||
<Text className='confirm-row' as='p' fontSize={18}>{t('InviteTitle')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='18px'>{t('InviteTitle')}</Text>
|
||||
|
||||
<div className='confirm-row full-width break-word'>
|
||||
<a href='/login'>
|
||||
<img src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
|
||||
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -314,11 +314,11 @@ class Confirm extends React.PureComponent {
|
||||
|
||||
{/* <Row className='confirm-row'>
|
||||
|
||||
<Text as='p' fontSize={14}>{t('LoginWithAccount')}</Text>
|
||||
<Text as='p' fontSize='14px'>{t('LoginWithAccount')}</Text>
|
||||
|
||||
</Row>
|
||||
*/}
|
||||
<Text className='confirm-row' fontSize={14} color="#c30">
|
||||
<Text className='confirm-row' fontSize='14px' color="#c30">
|
||||
{this.state.errorText}
|
||||
</Text>
|
||||
</div>
|
||||
|
@ -70,13 +70,13 @@ class ProfileRemove extends React.PureComponent {
|
||||
<a href='/login'>
|
||||
<img src="images/dark_general.png" alt="Logo" />
|
||||
</a>
|
||||
<Text as='p' fontSize={24} color='#116d9d'>{greetingTitle}</Text>
|
||||
<Text as='p' fontSize='24px' color='#116d9d'>{greetingTitle}</Text>
|
||||
</div>
|
||||
|
||||
{!isProfileDeleted
|
||||
? <>
|
||||
<Text className='confirm-row' as='p' fontSize={18} >{t('DeleteProfileConfirmation')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize={16} >{t('DeleteProfileConfirmationInfo')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='18px' >{t('DeleteProfileConfirmation')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='16px' >{t('DeleteProfileConfirmationInfo')}</Text>
|
||||
|
||||
<Button
|
||||
className='confirm-row'
|
||||
@ -89,8 +89,8 @@ class ProfileRemove extends React.PureComponent {
|
||||
/>
|
||||
</>
|
||||
: <>
|
||||
<Text className='confirm-row' as='p' fontSize={18} >{t('DeleteProfileSuccessMessage')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize={16} >{t('DeleteProfileSuccessMessageInfo')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='18px' >{t('DeleteProfileSuccessMessage')}</Text>
|
||||
<Text className='confirm-row' as='p' fontSize='16px' >{t('DeleteProfileSuccessMessageInfo')}</Text>
|
||||
</>
|
||||
}
|
||||
|
||||
|
@ -76,7 +76,7 @@ const Body = ({ modules, match, history, isLoaded }) => {
|
||||
return (
|
||||
!isLoaded
|
||||
? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
)
|
||||
: (
|
||||
<HomeContainer>
|
||||
@ -84,7 +84,7 @@ const Body = ({ modules, match, history, isLoaded }) => {
|
||||
<Tiles modules={modules} isPrimary={false} history={history} />
|
||||
|
||||
{!modules || !modules.length ? (
|
||||
<Text className="home-error-text" fontSize={14} color="#c30">
|
||||
<Text className="home-error-text" fontSize='14px' color="#c30">
|
||||
{t('NoOneModulesAvailable')}
|
||||
</Text>
|
||||
) : null}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Header } from 'asc-web-components';
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ArticleHeaderContent = () => {
|
||||
const { t } = useTranslation();
|
||||
return <Header type="menu">{t('Settings')}</Header>;
|
||||
return <Headline type="menu">{t('Settings')}</Headline>;
|
||||
}
|
||||
|
||||
export default ArticleHeaderContent;
|
@ -1,11 +1,12 @@
|
||||
import React from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { Header, utils } from 'asc-web-components';
|
||||
import { utils } from 'asc-web-components';
|
||||
import { Headline } from 'asc-web-common';
|
||||
import styled from 'styled-components';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { getKeyByLink, settingsTree, getTKeyByKey } from '../../../utils';
|
||||
|
||||
const HeaderContainer = styled(Header)`
|
||||
const HeaderContainer = styled(Headline)`
|
||||
margin-right: 16px;
|
||||
max-width: calc(100vw - 430px);
|
||||
@media ${utils.device.tablet} {
|
||||
|
@ -153,7 +153,7 @@ class Customization extends React.Component {
|
||||
const { isLoadedData, languages, language, isLoading, timezones, timezone, greetingTitle, isLoadingGreetingSave, isLoadingGreetingRestore } = this.state;
|
||||
const supportEmail = "documentation@onlyoffice.com";
|
||||
const tooltipLanguage =
|
||||
<Text fontSize={13}>
|
||||
<Text fontSize='13px'>
|
||||
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
|
||||
"In case you cannot find your language in the list of the
|
||||
available ones, feel free to write to us at
|
||||
@ -169,11 +169,11 @@ class Customization extends React.Component {
|
||||
console.log("CustomizationSettings render");
|
||||
return (
|
||||
!isLoadedData ?
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
: <>
|
||||
<StyledComponent>
|
||||
<div className='settings-block'>
|
||||
<Text fontSize={16}>{t('StudioTimeLanguageSettings')}</Text>
|
||||
<Text fontSize='16px'>{t('StudioTimeLanguageSettings')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerLanguage'
|
||||
className='margin-top field-container-width'
|
||||
@ -224,7 +224,7 @@ class Customization extends React.Component {
|
||||
</div>
|
||||
|
||||
<div className='settings-block'>
|
||||
<Text fontSize={16}>{t('GreetingSettingsTitle')}</Text>
|
||||
<Text fontSize='16px'>{t('GreetingSettingsTitle')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerWelcomePage'
|
||||
className='margin-top field-container-width'
|
||||
|
@ -10,7 +10,7 @@ const Common = ({ match }) => {
|
||||
const basePath = '/settings/common';
|
||||
|
||||
return (
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
|
@ -196,14 +196,14 @@ class WhiteLabel extends React.Component {
|
||||
console.log("WhiteLabelSettings render");
|
||||
return (
|
||||
!isLoadedData ?
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
: <>
|
||||
<StyledComponent>
|
||||
<div className='settings-block'>
|
||||
<Text fontSize={16}>{t('LogoSettings')}</Text>
|
||||
<Text fontSize='16px'>{t('LogoSettings')}</Text>
|
||||
<Text
|
||||
className='margin-top'
|
||||
fontSize={14}>
|
||||
fontSize='14px'>
|
||||
<Trans i18nKey="LogoUploadRecommendation">
|
||||
We recommended that you use images in <strong>PNG</strong> format with transparent background
|
||||
</Trans>
|
||||
|
@ -9,7 +9,7 @@ const Security = () => {
|
||||
const basePath = "/settings/security";
|
||||
|
||||
return (
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
|
@ -339,16 +339,16 @@ class PureAdminsSettings extends Component {
|
||||
return (
|
||||
<>
|
||||
{showLoader ? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
) : (
|
||||
<>
|
||||
<RequestLoader
|
||||
visible={isLoading}
|
||||
zIndex={256}
|
||||
loaderSize={16}
|
||||
loaderSize='16px'
|
||||
loaderColor={"#999"}
|
||||
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
fontColor={"#999"}
|
||||
className="page_loader"
|
||||
/>
|
||||
@ -442,7 +442,7 @@ class PureAdminsSettings extends Component {
|
||||
type="page"
|
||||
title={user.displayName}
|
||||
isBold={true}
|
||||
fontSize={15}
|
||||
fontSize='15px'
|
||||
color={nameColor}
|
||||
href={user.profileUrl}
|
||||
>
|
||||
|
@ -101,12 +101,12 @@ class PureModulesSettings extends Component {
|
||||
/>
|
||||
</RadioButtonContainer>
|
||||
<ProjectsBody>
|
||||
<Text className="projects_margin" fontSize={12}>
|
||||
<Text className="projects_margin" fontSize='12px'>
|
||||
{t("AccessRightsProductUsersCan", {
|
||||
category: t("People")
|
||||
})}
|
||||
</Text>
|
||||
<Text fontSize={12}>
|
||||
<Text fontSize='12px'>
|
||||
<li>{t("ViewProfilesAndGroups")}</li>
|
||||
</Text>
|
||||
</ProjectsBody>
|
||||
|
@ -168,21 +168,21 @@ class PureOwnerSettings extends Component {
|
||||
return (
|
||||
<>
|
||||
{showLoader ? (
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
) : (
|
||||
<OwnerContainer>
|
||||
<RequestLoader
|
||||
visible={isLoading}
|
||||
zIndex={256}
|
||||
loaderSize={16}
|
||||
loaderSize='16px'
|
||||
loaderColor={"#999"}
|
||||
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
fontColor={"#999"}
|
||||
className="page_loader"
|
||||
/>
|
||||
<HeaderContainer>
|
||||
<Text fontSize={18}>{t("PortalOwner")}</Text>
|
||||
<Text fontSize='18px'>{t("PortalOwner")}</Text>
|
||||
</HeaderContainer>
|
||||
|
||||
<BodyContainer>
|
||||
@ -197,7 +197,7 @@ class PureOwnerSettings extends Component {
|
||||
<div className="avatar_body">
|
||||
<Text
|
||||
className="avatar_text"
|
||||
fontSize={16}
|
||||
fontSize='16px'
|
||||
isBold={true}
|
||||
>
|
||||
{owner.displayName}
|
||||
@ -205,7 +205,7 @@ class PureOwnerSettings extends Component {
|
||||
{owner.groups &&
|
||||
owner.groups.map(group => (
|
||||
<Link
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
key={group.id}
|
||||
href={owner.profileUrl}
|
||||
>
|
||||
@ -215,10 +215,10 @@ class PureOwnerSettings extends Component {
|
||||
</div>
|
||||
</AvatarContainer>
|
||||
<ProjectsBody>
|
||||
<Text className="portal_owner" fontSize={12}>
|
||||
<Text className="portal_owner" fontSize='12px'>
|
||||
{t("AccessRightsOwnerCan")}:
|
||||
</Text>
|
||||
<Text fontSize={12}>
|
||||
<Text fontSize='12px'>
|
||||
{OwnerOpportunities.map((item, key) => (
|
||||
<li key={key}>{item};</li>
|
||||
))}
|
||||
@ -226,7 +226,7 @@ class PureOwnerSettings extends Component {
|
||||
</ProjectsBody>
|
||||
</BodyContainer>
|
||||
|
||||
<Text fontSize={12} className="text-body_wrapper">
|
||||
<Text fontSize='12px' className="text-body_wrapper">
|
||||
{t("AccessRightsChangeOwnerText")}
|
||||
</Text>
|
||||
|
||||
@ -248,7 +248,7 @@ class PureOwnerSettings extends Component {
|
||||
/>
|
||||
<Text
|
||||
className="text-body_inline"
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
color="#A3A9AE"
|
||||
>
|
||||
{t("AccessRightsChangeOwnerConfirmText")}
|
||||
|
@ -12,7 +12,7 @@ const Settings = () => {
|
||||
|
||||
return (
|
||||
<Layout key='1'>
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
|
||||
<Suspense fallback={<Loader className="pageLoader" type="rombs" size='40px' />}>
|
||||
<Switch>
|
||||
<Route
|
||||
path={`${basePath}/security`}
|
||||
|
@ -80,7 +80,7 @@ class ConfirmRoute extends React.Component {
|
||||
!this.state.isLoaded ? (
|
||||
<PageLayout
|
||||
sectionBodyContent={
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
|
@ -2473,13 +2473,13 @@ asap@~2.0.6:
|
||||
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
|
||||
|
||||
"asc-web-common@file:../../packages/asc-web-common":
|
||||
version "1.0.13"
|
||||
version "1.0.12"
|
||||
dependencies:
|
||||
axios "^0.19.0"
|
||||
history "4.9.0"
|
||||
|
||||
"asc-web-components@file:../../packages/asc-web-components":
|
||||
version "1.0.219"
|
||||
version "1.0.218"
|
||||
dependencies:
|
||||
email-addresses "^3.1.0"
|
||||
html-to-react "^1.4.2"
|
||||
@ -2891,6 +2891,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
||||
|
||||
bootstrap@4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
|
||||
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
|
||||
|
||||
brace-expansion@^1.1.7:
|
||||
version "1.1.11"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
||||
@ -6947,6 +6952,11 @@ jest@24.9.0:
|
||||
import-local "^2.0.0"
|
||||
jest-cli "^24.9.0"
|
||||
|
||||
jquery@3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
|
||||
integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
|
||||
|
||||
js-base64@^2.1.8:
|
||||
version "2.5.1"
|
||||
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
|
||||
|
@ -1,29 +1,29 @@
|
||||
# Header
|
||||
# Headline
|
||||
|
||||
Component that displays header text
|
||||
Component that displays Heading text with custom styles
|
||||
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import { Header } from "asc-web-components";
|
||||
import { Headline } from "asc-web-common";
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Header type="content" title="Some title" isInline>
|
||||
<Headline type="content" title="Some title" isInline>
|
||||
Some text
|
||||
</Header>
|
||||
</Headline>
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Header type="menu" title="Some title">
|
||||
<Headline type="menu" title="Some title">
|
||||
Some text
|
||||
</Header>
|
||||
</Headline>
|
||||
```
|
||||
|
||||
##### If you need to override styles add forwardedAs instead of as
|
||||
#### If you need to override styles add forwardedAs instead of as
|
||||
|
||||
```js
|
||||
const StyledText = styled(Header)`
|
||||
const StyledText = styled(Headline)`
|
||||
&:hover {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
@ -36,12 +36,12 @@ const StyledText = styled(Header)`
|
||||
</StyledText>
|
||||
```
|
||||
|
||||
### Properties Header
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------- | :------: | :------: | :-------------: | :-------: | ---------------------------------------------------- |
|
||||
| `color` | `string` | - | - | `#333333` | Specifies the contentHeader color |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `type` | `oneOf` | ✅ | `menu, content` | - | Sets the size of text: menu (27px) or content (21px) |
|
@ -1,30 +1,32 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text, boolean, withKnobs, color, select } from '@storybook/addon-knobs/react';
|
||||
import Header from '.';
|
||||
import Heading from '.';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
|
||||
const type = ['content', 'menu'];
|
||||
const levels = [1, 2, 3, 4, 5, 6];
|
||||
|
||||
storiesOf('Components|Header', module)
|
||||
storiesOf('Components|Heading', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
|
||||
|
||||
.add('base', () => (
|
||||
|
||||
<Section>
|
||||
<div style={{ width: "100%" }}>
|
||||
<Header
|
||||
type={select('type', type, 'content')}
|
||||
<Heading
|
||||
type={select('type', type, 'content')}
|
||||
color={color('color', '#333333')}
|
||||
level={select('level', levels, 1)}
|
||||
title={text('title', '')}
|
||||
truncate={boolean('truncate', false)}
|
||||
isInline={boolean('isInline', false)}
|
||||
>
|
||||
{text('Text', 'Sample text Header')}
|
||||
</Header>
|
||||
{text('Text', 'Sample text Heading')}
|
||||
</Heading>
|
||||
</div>
|
||||
</Section>
|
||||
));
|
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Header from '.';
|
||||
import Headline from '.';
|
||||
|
||||
describe('<Header />', () => {
|
||||
describe('<Headline />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<Header as='span' title='Some title'>
|
||||
<Headline level={1} title='Some title'>
|
||||
Some text
|
||||
</Header>
|
||||
</Headline>
|
||||
);
|
||||
|
||||
expect(wrapper).toExist();
|
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { css } from 'styled-components';
|
||||
import commonTextStyles from '../text/common-text-styles';
|
||||
import { Heading } from 'asc-web-components';
|
||||
|
||||
const fontSize = css`
|
||||
${props =>
|
||||
@ -10,29 +10,23 @@ const fontSize = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const styles = css`
|
||||
const StyledHeading = styled(Heading)`
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-size: ${fontSize}px;
|
||||
font-weight: 700;
|
||||
${props => props.isInline && css`display: inline-block;`}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.h1`
|
||||
${styles};
|
||||
${commonTextStyles};
|
||||
`;
|
||||
|
||||
const Header = ({ title, tag, as, children, ...rest }) => {
|
||||
//console.log("Header render");
|
||||
const Headline = (props) => {
|
||||
//console.log("Headline render");
|
||||
return (
|
||||
<StyledHeader as={!as && tag ? tag : as} title={title} {...rest}>{children}</StyledHeader>
|
||||
<StyledHeading
|
||||
{...props} />
|
||||
);
|
||||
};
|
||||
|
||||
Header.propTypes = {
|
||||
as: PropTypes.string,
|
||||
tag: PropTypes.string,
|
||||
Headline.propTypes = {
|
||||
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
||||
children: PropTypes.any,
|
||||
color: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
@ -41,11 +35,12 @@ Header.propTypes = {
|
||||
type: PropTypes.oneOf(['menu', 'content']),
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
Headline.defaultProps = {
|
||||
color: '#333333',
|
||||
title: '',
|
||||
truncate: false,
|
||||
isInline: false,
|
||||
level: 1
|
||||
};
|
||||
|
||||
export default Header;
|
||||
export default Headline;
|
@ -2,4 +2,5 @@ export { default as PrivateRoute } from "./routing/privateRoute";
|
||||
export { default as PublicRoute } from "./routing/publicRoute";
|
||||
export { default as Login } from "./login";
|
||||
export { default as StudioLayout } from "./layout";
|
||||
export { default as ModuleTile } from "./module-tile";
|
||||
export { default as ModuleTile } from "./module-tile";
|
||||
export { default as Headline } from "./headline";
|
@ -270,13 +270,13 @@ class Form extends Component {
|
||||
className="login-tooltip"
|
||||
helpButtonHeaderContent={t("CookieSettingsTitle")}
|
||||
tooltipContent={
|
||||
<Text fontSize={12}>{t("RememberHelper")}</Text>
|
||||
<Text fontSize='12px'>{t("RememberHelper")}</Text>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
className="login-link"
|
||||
type="page"
|
||||
isHovered={true}
|
||||
@ -311,11 +311,11 @@ class Form extends Component {
|
||||
/>
|
||||
|
||||
{params.confirmedEmail && (
|
||||
<Text isBold={true} fontSize={16}>
|
||||
<Text isBold={true} fontSize='16px'>
|
||||
{t("MessageEmailConfirmed")} {t("MessageAuthorize")}
|
||||
</Text>
|
||||
)}
|
||||
<Text fontSize={14} color="#c30">
|
||||
<Text fontSize='14px' color="#c30">
|
||||
{errorText}
|
||||
</Text>
|
||||
</FormContainer>
|
||||
|
@ -17,7 +17,7 @@ class SubModalDialog extends React.Component {
|
||||
<ModalDialog
|
||||
visible={openDialog}
|
||||
headerContent={
|
||||
<Text isBold={false} fontSize={21}>
|
||||
<Text isBold={false} fontSize='21px'>
|
||||
{t("PasswordRecoveryTitle")}
|
||||
</Text>
|
||||
}
|
||||
@ -26,7 +26,7 @@ class SubModalDialog extends React.Component {
|
||||
key="text-body"
|
||||
className="text-body"
|
||||
isBold={false}
|
||||
fontSize={13}
|
||||
fontSize='13px'
|
||||
>
|
||||
{t("MessageSendPasswordRecoveryInstructionsOnEmail")}
|
||||
</Text>,
|
||||
|
@ -97,10 +97,10 @@ const ModuleTile = props => {
|
||||
|
||||
<div className="title-text-wrapper">
|
||||
<div onClick={handleClick.bind(link)} className="title-text">
|
||||
<Text fontSize={36} className="title-text-header selectable">
|
||||
<Text fontSize='36px' className="title-text-header selectable">
|
||||
{title}
|
||||
</Text>
|
||||
<Text fontSize={12} className="title-text-description">
|
||||
<Text fontSize='12px' className="title-text-description">
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
@ -118,7 +118,7 @@ const ModuleTile = props => {
|
||||
<div>
|
||||
<div>
|
||||
<Text
|
||||
fontSize={18}
|
||||
fontSize='18px'
|
||||
className="sub-title-text"
|
||||
onClick={handleClick.bind(link)}
|
||||
>
|
||||
|
@ -16,7 +16,7 @@ export class ExternalRedirect extends Component {
|
||||
return (
|
||||
<PageLayout
|
||||
sectionBodyContent={
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
@ -37,7 +37,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
|
||||
return (
|
||||
<PageLayout
|
||||
sectionBodyContent={
|
||||
<Loader className="pageLoader" type="rombs" size={40} />
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
@ -2841,7 +2841,7 @@ asap@~2.0.3:
|
||||
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
|
||||
|
||||
"asc-web-components@file:../../packages/asc-web-components":
|
||||
version "1.0.219"
|
||||
version "1.0.218"
|
||||
dependencies:
|
||||
email-addresses "^3.1.0"
|
||||
html-to-react "^1.4.2"
|
||||
@ -3473,6 +3473,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
||||
|
||||
bootstrap@^4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
|
||||
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
|
||||
|
||||
boxen@^3.0.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
|
||||
|
@ -518,7 +518,7 @@ class AdvancedSelector extends React.Component {
|
||||
<Text
|
||||
as="p"
|
||||
className="group_header"
|
||||
fontSize={15}
|
||||
fontSize='15px'
|
||||
isBold={true}
|
||||
>
|
||||
Groups
|
||||
|
@ -17,7 +17,6 @@ import Textarea from "../textarea";
|
||||
import ContextMenuButton from "../context-menu-button";
|
||||
import DatePicker from "../date-picker";
|
||||
import FieldContainer from "../field-container";
|
||||
import Header from "../header";
|
||||
import Heading from "../heading";
|
||||
import Link from "../link";
|
||||
import Loader from "../loader";
|
||||
@ -181,11 +180,6 @@ storiesOf("Components|All", module)
|
||||
Heading text
|
||||
</Heading>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Header type="content" title="Some title" isInline>
|
||||
Header text
|
||||
</Header>
|
||||
</div>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Text as="p" title="Some title">
|
||||
Text as "p"
|
||||
@ -225,13 +219,13 @@ storiesOf("Components|All", module)
|
||||
getContent={dataTip =>
|
||||
dataTip ? (
|
||||
<div>
|
||||
<Text isBold={true} fontSize={16}>
|
||||
<Text isBold={true} fontSize='16px'>
|
||||
{arrayUsers[dataTip].name}
|
||||
</Text>
|
||||
<Text color="#A3A9AE" fontSize={13}>
|
||||
<Text color="#A3A9AE" fontSize='13px'>
|
||||
{arrayUsers[dataTip].email}
|
||||
</Text>
|
||||
<Text fontSize={13}>{arrayUsers[dataTip].position}</Text>
|
||||
<Text fontSize='13px'>{arrayUsers[dataTip].position}</Text>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
@ -484,13 +478,13 @@ storiesOf("Components|All", module)
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<Loader type="base" color="black" size={30} label="Loading..." />
|
||||
<Loader type="base" color="black" size='30px' label="Loading..." />
|
||||
</div>
|
||||
<div style={{ padding: "8px 0", marginLeft: 45 }}>
|
||||
<Loader type="oval" color="black" size={30} label="Loading" />
|
||||
<Loader type="oval" color="black" size='30px' label="Loading" />
|
||||
</div>
|
||||
<div style={{ padding: "8px 0", marginLeft: 45 }}>
|
||||
<Loader type="dual-ring" color="black" size={30} label="Loading" />
|
||||
<Loader type="dual-ring" color="black" size='30px' label="Loading" />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ justifySelf: "center" }}>
|
||||
|
@ -183,7 +183,7 @@ const Avatar = memo(props => {
|
||||
type='action'
|
||||
title={editLabel}
|
||||
isTextOverflow={true}
|
||||
fontSize={14}
|
||||
fontSize='14px'
|
||||
color={whiteColor}
|
||||
onClick={editAction}
|
||||
>
|
||||
|
@ -212,7 +212,7 @@ class Button extends React.Component {
|
||||
<StyledButton {...this.props}>
|
||||
{(isLoading || icon) &&
|
||||
isLoading
|
||||
? <Loader type="oval" size={size === "big" ? 16 : 14} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
|
||||
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
|
||||
: <Icon {...this.props} />
|
||||
}
|
||||
{label}
|
||||
|
@ -10,8 +10,7 @@ import isEmpty from "lodash/isEmpty";
|
||||
import Aside from "../layout/sub-components/aside";
|
||||
import { desktop } from "../../utils/device";
|
||||
import Backdrop from "../backdrop";
|
||||
import Text from "../text";
|
||||
import Header from "../header";
|
||||
import Heading from "../heading";
|
||||
import throttle from "lodash/throttle";
|
||||
|
||||
const DateInputStyle = styled.div`
|
||||
@ -31,9 +30,16 @@ const Content = styled.div`
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.header {
|
||||
max-width: 500px;
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
@ -44,13 +50,6 @@ const Body = styled.div`
|
||||
padding: 16px 0;
|
||||
`;
|
||||
|
||||
const HeaderText = styled(Header)`
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
class DatePicker extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -375,13 +374,15 @@ class DatePicker extends Component {
|
||||
/>
|
||||
<Aside visible={isOpen} scale={false} zIndex={zIndex}>
|
||||
<Content>
|
||||
<StyledHeader>
|
||||
<HeaderText type='content'>
|
||||
<Text isBold={true} fontSize={20}>
|
||||
<Header>
|
||||
<Heading
|
||||
className='header'
|
||||
size='medium'
|
||||
truncate={true}
|
||||
>
|
||||
{calendarHeaderContent}
|
||||
</Text>
|
||||
</HeaderText>
|
||||
</StyledHeader>
|
||||
</Heading>
|
||||
</Header>
|
||||
<Body>{this.renderBody()}</Body>
|
||||
</Content>
|
||||
</Aside>
|
||||
|
@ -81,11 +81,11 @@ const EmptyScreenContainer = props => {
|
||||
<EmptyContentImage imageSrc={imageSrc} imageAlt={imageAlt} className="ec-image" />
|
||||
|
||||
{headerText && (
|
||||
<Text as="span" color="#333333" fontSize={24} className="ec-header">{headerText}</Text>
|
||||
<Text as="span" color="#333333" fontSize='24px' className="ec-header">{headerText}</Text>
|
||||
)}
|
||||
|
||||
{descriptionText && (
|
||||
<Text as="span" color="#737373" fontSize={14} className="ec-desc">{descriptionText}</Text>
|
||||
<Text as="span" color="#737373" fontSize='14px' className="ec-desc">{descriptionText}</Text>
|
||||
)}
|
||||
|
||||
{buttons && (
|
||||
|
@ -135,18 +135,18 @@ storiesOf('EXAMPLES|Row', module)
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
<RowContent>
|
||||
<Link type='page' title={user.userName} isBold={true} fontSize={15} color={nameColor} >{user.userName}</Link>
|
||||
<Link type='page' title={user.userName} isBold={true} fontSize='15px' color={nameColor} >{user.userName}</Link>
|
||||
<>
|
||||
{user.status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
{user.status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
</>
|
||||
{user.isHead
|
||||
? <Link type='page' title='Head of department' fontSize={12} color={sideInfoColor} >Head of department</Link>
|
||||
? <Link type='page' title='Head of department' fontSize='12px' color={sideInfoColor} >Head of department</Link>
|
||||
: <></>
|
||||
}
|
||||
<Link type='action' title={user.department} fontSize={12} color={sideInfoColor} >{user.department}</Link>
|
||||
<Link type='page' title={user.mobilePhone} fontSize={12} color={sideInfoColor} >{user.mobilePhone}</Link>
|
||||
<Link type='page' title={user.email} fontSize={12} color={sideInfoColor} >{user.email}</Link>
|
||||
<Link type='action' title={user.department} fontSize='12px' color={sideInfoColor} >{user.department}</Link>
|
||||
<Link type='page' title={user.mobilePhone} fontSize='12px' color={sideInfoColor} >{user.mobilePhone}</Link>
|
||||
<Link type='page' title={user.email} fontSize='12px' color={sideInfoColor} >{user.email}</Link>
|
||||
</RowContent>
|
||||
</Row>
|
||||
);
|
||||
|
@ -127,7 +127,7 @@ class FieldContainer extends React.Component {
|
||||
<div className="field-body">
|
||||
{children}
|
||||
{hasError ? (
|
||||
<Text className="error-label" fontSize={10} color={errorColor}>
|
||||
<Text className="error-label" fontSize='10px' color={errorColor}>
|
||||
{errorMessage}
|
||||
</Text>
|
||||
) : null}
|
||||
|
@ -32,11 +32,11 @@ const StyledHeading = styled(Heading)`
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------- | :------: | :------: | :----------------------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `color` | `string` | - | - | `#333333` | Specifies the headline color |
|
||||
| `level` | `oneOf` | - | 1, 2, 3, 4, 5, 6 | `1` | The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `size` | `oneOF` | - | `big`, `medium`, `small` | `big` | Sets the size of headline |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------- | :------: | :------: | :--------------------------------------------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `color` | `string` | - | - | `#333333` | Specifies the headline color |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `level` | `oneOf` | - | 1, 2, 3, 4, 5, 6 | `1` | The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. |
|
||||
| `size` | `oneOF` | - | `xsmall`, `small`, `medium`, `large`, `xlarge` | `large` | Sets the size of headline |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
|
@ -7,7 +7,7 @@ import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
|
||||
const levels = [1, 2, 3, 4, 5, 6];
|
||||
const size = ['big', 'medium', 'small'];
|
||||
const size = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
|
||||
|
||||
storiesOf('Components|Heading', module)
|
||||
.addDecorator(withKnobs)
|
||||
@ -21,7 +21,7 @@ storiesOf('Components|Heading', module)
|
||||
title={text('title', '')}
|
||||
truncate={boolean('truncate', false)}
|
||||
isInline={boolean('isInline', false)}
|
||||
size={select('size', size, 'big')}
|
||||
size={select('size', size, 'large')}
|
||||
>
|
||||
{text('Text', 'Sample text Heading')}
|
||||
</Heading>
|
||||
|
@ -5,9 +5,11 @@ import commonTextStyles from '../text/common-text-styles';
|
||||
|
||||
const fontSize = css`
|
||||
${props =>
|
||||
(props.size === 'big' && 23) ||
|
||||
(props.size === 'medium' && 19) ||
|
||||
(props.size === 'small' && 15)
|
||||
(props.size === 'xlarge' && 27) ||
|
||||
(props.size === 'large' && 23) ||
|
||||
(props.size === 'medium' && 21) ||
|
||||
(props.size === 'small' && 19) ||
|
||||
(props.size === 'xsmall' && 15)
|
||||
}
|
||||
`;
|
||||
|
||||
@ -22,13 +24,10 @@ const StyledHeading = styled.h1`
|
||||
${commonTextStyles};
|
||||
`;
|
||||
|
||||
const Heading = ({ title, level, color, ...rest }) => {
|
||||
const Heading = ({ level, ...rest }) => {
|
||||
return (
|
||||
<StyledHeading
|
||||
as={`h${level}`}
|
||||
level={+level}
|
||||
title={title}
|
||||
color={color}
|
||||
{...rest}>
|
||||
</StyledHeading>
|
||||
);
|
||||
@ -40,7 +39,8 @@ Heading.propTypes = {
|
||||
title: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
isInline: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['big', 'medium', 'small']),
|
||||
size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Heading.defaultProps = {
|
||||
@ -48,8 +48,9 @@ Heading.defaultProps = {
|
||||
title: '',
|
||||
truncate: false,
|
||||
isInline: false,
|
||||
size: 'big',
|
||||
level: 1
|
||||
size: 'large',
|
||||
level: 1,
|
||||
className: ''
|
||||
};
|
||||
|
||||
export default Heading;
|
||||
|
@ -29,7 +29,7 @@ storiesOf("Components|Buttons", module)
|
||||
<HelpButton
|
||||
displayType="dropdown"
|
||||
tooltipContent={
|
||||
<Text fontSize={13}>
|
||||
<Text fontSize='13px'>
|
||||
Paste you tooltip content here
|
||||
</Text>
|
||||
}
|
||||
|
@ -9,6 +9,11 @@ describe("<HelpButton />", () => {
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it("HelpButton renders without error in Aside mode", () => {
|
||||
const wrapper = mount(<HelpButton tooltipContent={tooltipContent} displayType="aside" helpButtonHeaderContent="Header text" />);
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it("HelpButton componentWillUnmount test", () => {
|
||||
const wrapper = mount(<HelpButton tooltipContent={tooltipContent} />);
|
||||
const componentWillUnmount = jest.spyOn(
|
||||
|
@ -7,8 +7,7 @@ import uniqueId from "lodash/uniqueId";
|
||||
import Aside from "../layout/sub-components/aside";
|
||||
import { desktop } from "../../utils/device";
|
||||
import Backdrop from "../backdrop";
|
||||
import Text from "../text";
|
||||
import Header from "../header";
|
||||
import Heading from "../heading";
|
||||
import throttle from "lodash/throttle";
|
||||
import styled from "styled-components";
|
||||
|
||||
@ -17,6 +16,13 @@ const Content = styled.div`
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.header {
|
||||
max-width: 500px;
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700;
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderContent = styled.div`
|
||||
@ -30,12 +36,6 @@ const Body = styled.div`
|
||||
padding: 16px 0;
|
||||
`;
|
||||
|
||||
const HeaderText = styled(Header)`
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
class HelpButton extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -161,11 +161,13 @@ class HelpButton extends React.Component {
|
||||
<Content>
|
||||
{helpButtonHeaderContent && (
|
||||
<HeaderContent>
|
||||
<HeaderText type='content'>
|
||||
<Text isBold={true} fontSize={21}>
|
||||
<Heading
|
||||
className='header'
|
||||
size='medium'
|
||||
truncate={true}
|
||||
>
|
||||
{helpButtonHeaderContent}
|
||||
</Text>
|
||||
</HeaderText>
|
||||
</Heading>
|
||||
</HeaderContent>
|
||||
)}
|
||||
<Body>{tooltipContent}</Body>
|
||||
|
@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
|
||||
import styled from '@emotion/styled';
|
||||
import Layout from '.';
|
||||
import PageLayout from '../page-layout';
|
||||
import Header from '../header';
|
||||
import Heading from '../heading';
|
||||
import IconButton from '../icon-button';
|
||||
import ContextMenuButton from '../context-menu-button';
|
||||
import MainButton from '../main-button';
|
||||
@ -109,6 +109,12 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
|
||||
|
||||
const onLogoClick = (e) => action('Logo Clicked')(e);
|
||||
|
||||
const HeaderText = styled(Heading)`
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
const HeaderContent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -146,7 +152,7 @@ const perPageItems = [
|
||||
|
||||
const asideContent = <p style={{ padding: 40 }}>Aside Content</p>;
|
||||
|
||||
const articleHeaderContent = <Header type="menu">Article Header</Header>;
|
||||
const articleHeaderContent = <HeaderText size='xlarge'>Article Header</HeaderText>;
|
||||
|
||||
const articleMainButtonContent = <MainButton
|
||||
text='Actions'
|
||||
@ -161,7 +167,7 @@ const sectionHeaderContent = <HeaderContent>
|
||||
size='16'
|
||||
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
|
||||
/>
|
||||
<Header type="content">Section Header</Header>
|
||||
<HeaderText size='medium'>Section Header</HeaderText>
|
||||
<IconButton
|
||||
iconName={"PlusIcon"}
|
||||
size='16'
|
||||
|
@ -3,11 +3,11 @@ import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import { tablet } from "../../../utils/device";
|
||||
import NavItem from "./nav-item";
|
||||
import Header from "../../header";
|
||||
import Heading from "../../heading";
|
||||
|
||||
const backgroundColor = "#0F4071";
|
||||
|
||||
const StyledHeader = styled.header`
|
||||
const Header = styled.header`
|
||||
align-items: center;
|
||||
background-color: ${backgroundColor};
|
||||
display: none;
|
||||
@ -18,21 +18,27 @@ const StyledHeader = styled.header`
|
||||
@media ${tablet} {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700;
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderComponent = React.memo(props => {
|
||||
//console.log("Header render");
|
||||
return (
|
||||
<StyledHeader>
|
||||
<Header>
|
||||
<NavItem
|
||||
iconName="MenuIcon"
|
||||
badgeNumber={props.badgeNumber}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
<Header type="menu" color="#FFFFFF">
|
||||
<Heading className="heading" size='xlarge' color="#FFFFFF">
|
||||
{props.currentModule && props.currentModule.title}
|
||||
</Header>
|
||||
</StyledHeader>
|
||||
</Heading>
|
||||
</Header>
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -67,7 +67,7 @@ const NavItem = React.memo(props => {
|
||||
})}
|
||||
{children && (
|
||||
<NavItemLabel opened={opened}>
|
||||
<Text color={color} isBold fontSize={16}>
|
||||
<Text color={color} isBold fontSize='16px'>
|
||||
{children}
|
||||
</Text>
|
||||
</NavItemLabel>
|
||||
|
@ -25,7 +25,7 @@ import { LinkWithDropdown } from "asc-web-components";
|
||||
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
|
||||
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
|
||||
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
|
||||
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
|
||||
| `fontSize` | `string` | - | - | `13px` | Font size of link |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
|
||||
|
@ -236,7 +236,7 @@ LinkWithDropdown.propTypes = {
|
||||
color: PropTypes.string,
|
||||
data: PropTypes.array,
|
||||
dropdownType: PropTypes.oneOf(["alwaysDashed", "appearDashedAfterHover"]).isRequired,
|
||||
fontSize: PropTypes.number,
|
||||
fontSize: PropTypes.string,
|
||||
isBold: PropTypes.bool,
|
||||
isSemitransparent: PropTypes.bool,
|
||||
isTextOverflow: PropTypes.bool,
|
||||
@ -252,7 +252,7 @@ LinkWithDropdown.defaultProps = {
|
||||
color: "#333333",
|
||||
data: [],
|
||||
dropdownType: "alwaysDashed",
|
||||
fontSize: 13,
|
||||
fontSize: '13px',
|
||||
isBold: false,
|
||||
isSemitransparent: false,
|
||||
isTextOverflow: true,
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import LinkWithDropdown from '.';
|
||||
import Readme from './README.md';
|
||||
import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
|
||||
import { text, boolean, withKnobs, select, color } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
@ -39,7 +39,7 @@ storiesOf('Components|LinkWithDropdown', module)
|
||||
<LinkWithDropdown
|
||||
dropdownType={select('dropdownType', dropdownType, 'alwaysDashed')}
|
||||
color={color('color', '#333333')}
|
||||
fontSize={number('fontSize', 13)}
|
||||
fontSize={text('fontSize', '13px')}
|
||||
isBold={boolean('isBold', false)}
|
||||
title={text('title', undefined)}
|
||||
isTextOverflow={boolean('isTextOverflow', false)}
|
||||
|
@ -28,7 +28,7 @@ import { Link } from "asc-web-components";
|
||||
| ------------------- | :------------: | :------: | :--------------------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `color` | `string` | - | - | `#333333` | Color of link |
|
||||
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
|
||||
| `fontSize` | `string` | - | - | `13px` | Font size of link |
|
||||
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||
|
@ -12,7 +12,9 @@ const hoveredCss = css`
|
||||
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'underline dashed')};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Text)`
|
||||
// eslint-disable-next-line react/prop-types, no-unused-vars
|
||||
const PureText = ({type, color, ...props}) => <Text {...props}/>;
|
||||
const StyledText = styled(PureText)`
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
@ -26,6 +28,11 @@ const StyledLink = styled(Text)`
|
||||
}
|
||||
|
||||
${props => props.isHovered && hoveredCss}
|
||||
|
||||
${props => props.isTextOverflow && css`
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
`}
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
@ -33,19 +40,20 @@ const Link = memo(({ isTextOverflow, children, ...rest }) => {
|
||||
// console.log("Link render", rest);
|
||||
|
||||
return (
|
||||
<StyledLink
|
||||
<StyledText
|
||||
tag="a"
|
||||
isTextOverflow={isTextOverflow}
|
||||
truncate={isTextOverflow}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</StyledLink>
|
||||
</StyledText>
|
||||
);
|
||||
});
|
||||
|
||||
Link.propTypes = {
|
||||
color: PropTypes.string,
|
||||
fontSize: PropTypes.number,
|
||||
fontSize: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
isBold: PropTypes.bool,
|
||||
isHovered: PropTypes.bool,
|
||||
@ -65,7 +73,7 @@ Link.propTypes = {
|
||||
|
||||
Link.defaultProps = {
|
||||
color: "#333333",
|
||||
fontSize: 13,
|
||||
fontSize: '13px',
|
||||
href: undefined,
|
||||
isBold: false,
|
||||
isHovered: false,
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import Link from '.';
|
||||
import Readme from './README.md';
|
||||
import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
|
||||
import { text, boolean, withKnobs, select, color } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
@ -33,7 +33,7 @@ storiesOf('Components|Link', module)
|
||||
<Link
|
||||
type={select('type', type, 'page')}
|
||||
color={color('color', '#333333')}
|
||||
fontSize={number('fontSize', 13)}
|
||||
fontSize={text('fontSize', '13px')}
|
||||
isBold={boolean('isBold', false)}
|
||||
title={text('title', undefined)}
|
||||
target={select('target', target, '_blank')}
|
||||
|
@ -12,19 +12,19 @@ import { Loader } from "asc-web-components";
|
||||
<Loader
|
||||
type="base"
|
||||
color="black"
|
||||
size={18}
|
||||
size='18px'
|
||||
label="Loading"
|
||||
/>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------- | :---------------: | :------: | :----------------------------------: | :-----: | ----------------- |
|
||||
| `className` | `string` | - | - | - | Class name |
|
||||
| `color` | `string` | - | - | - | Font color |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `label` | `string` | - | - | - | Text label |
|
||||
| `size` | `number`,`string` | - | - | - | Font size |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------- | :------------: | :------: | :----------------------------------: | :-----: | ----------------- |
|
||||
| `className` | `string` | - | - | - | Class name |
|
||||
| `color` | `string` | - | - | - | Font color |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `label` | `string` | - | - | - | Text label |
|
||||
| `size` | `string` | - | - | `40px` | Font size |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `type` | `oneOf` | - | `base`, `oval`, `dual-ring`, `rombs` | `base` | - |
|
||||
|
@ -37,7 +37,7 @@ const Loader = (props) => {
|
||||
Loader.propTypes = {
|
||||
color: PropTypes.string,
|
||||
type: PropTypes.oneOf(['base', 'oval', 'dual-ring', 'rombs']),
|
||||
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
size: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
@ -47,7 +47,7 @@ const Loader = (props) => {
|
||||
Loader.defaultProps = {
|
||||
color: "#63686a",
|
||||
type: "base",
|
||||
size: 40,
|
||||
size: '40px',
|
||||
label: "Loading content, please wait."
|
||||
};
|
||||
|
||||
|
@ -16,7 +16,7 @@ storiesOf('Components|Loaders', module)
|
||||
<Loader
|
||||
type={select('type', typeOptions, 'base')}
|
||||
color={color('color', '#63686a')}
|
||||
size={number('size', 18)}
|
||||
size={text('size', '18px')}
|
||||
label={text('label', "Loading content, please wait...")} />
|
||||
</Section>
|
||||
))
|
||||
@ -25,7 +25,7 @@ storiesOf('Components|Loaders', module)
|
||||
<Loader
|
||||
type={select('type', typeOptions, 'dual-ring')}
|
||||
color={color('color', '#63686a')}
|
||||
size={number('size', 40)}
|
||||
size={text('size', '40px')}
|
||||
label={text('label', "Loading content, please wait.")} />
|
||||
</Section>
|
||||
))
|
||||
@ -34,7 +34,7 @@ storiesOf('Components|Loaders', module)
|
||||
<Loader
|
||||
type={select('type', typeOptions, 'oval')}
|
||||
color={color('color', '#63686a')}
|
||||
size={number('size', 40)}
|
||||
size={text('size', '40px')}
|
||||
label={text('label', "Loading content, please wait.")} />
|
||||
</Section>
|
||||
))
|
||||
@ -42,6 +42,6 @@ storiesOf('Components|Loaders', module)
|
||||
<Section>
|
||||
<Loader
|
||||
type={select('type', typeOptions, 'rombs')}
|
||||
size={number('size', 40)} />
|
||||
size={text('size', '40px')} />
|
||||
</Section>
|
||||
));
|
@ -5,7 +5,7 @@ import Loader from '.';
|
||||
const baseProps = {
|
||||
type:"base",
|
||||
color: "black",
|
||||
size: 18,
|
||||
size: '18px',
|
||||
label: "Loading"
|
||||
};
|
||||
|
||||
|
@ -37,8 +37,8 @@ export const keyFrameGreen = keyframes`
|
||||
`;
|
||||
|
||||
const Romb = styled.div`
|
||||
width: ${props => props.size}px;
|
||||
height: ${props => props.size}px;
|
||||
width: ${props => props.size};
|
||||
height: ${props => props.size};
|
||||
-ms-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-moz-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
@ -85,11 +85,11 @@ const Rombs = ({ size }) => (
|
||||
);
|
||||
|
||||
Rombs.protoTypes = {
|
||||
size: PropTypes.number.isRequired
|
||||
size: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
Rombs.defaultProps = {
|
||||
size: 40
|
||||
size: '40px'
|
||||
}
|
||||
|
||||
export { Rombs };
|
@ -166,7 +166,7 @@ class MainButton extends React.PureComponent {
|
||||
return (
|
||||
<GroupMainButton {...this.props} ref={this.ref}>
|
||||
<StyledMainButton {...this.props} onClick={this.onMainButtonClick}>
|
||||
<Text fontSize={16} isBold color="#fff">
|
||||
<Text fontSize='16px' isBold color="#fff">
|
||||
{this.props.text}
|
||||
</Text>
|
||||
</StyledMainButton>
|
||||
|
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import Backdrop from "../backdrop";
|
||||
import Aside from "../layout/sub-components/aside";
|
||||
import Header from "../header";
|
||||
import Heading from "../heading";
|
||||
import { desktop } from "../../utils/device";
|
||||
import throttle from "lodash/throttle";
|
||||
|
||||
@ -22,7 +22,13 @@ const Content = styled.div`
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 16px 16px;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.heading {
|
||||
max-width: 500px;
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
@ -31,13 +37,6 @@ const StyledHeader = styled.div`
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
`;
|
||||
|
||||
const HeaderText = styled(Header)`
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const CloseButton = styled.a`
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
@ -136,7 +135,13 @@ class ModalDialog extends React.Component {
|
||||
<Dialog>
|
||||
<Content>
|
||||
<StyledHeader>
|
||||
<HeaderText type='content'>{headerContent}</HeaderText>
|
||||
<Heading
|
||||
className='heading'
|
||||
size='medium'
|
||||
truncate={true}
|
||||
>
|
||||
{headerContent}
|
||||
</Heading>
|
||||
<CloseButton onClick={onClose}></CloseButton>
|
||||
</StyledHeader>
|
||||
<Body>{bodyContent}</Body>
|
||||
@ -145,7 +150,7 @@ class ModalDialog extends React.Component {
|
||||
</Dialog>
|
||||
</Backdrop>
|
||||
) : (
|
||||
<div
|
||||
<div
|
||||
className={this.props.className}
|
||||
id={this.props.id}
|
||||
style={this.props.style}
|
||||
@ -153,10 +158,16 @@ class ModalDialog extends React.Component {
|
||||
<Backdrop visible={visible} onClick={onClose} zIndex={zIndex} />
|
||||
<Aside visible={visible} scale={scale} zIndex={zIndex} className="modal-dialog-aside">
|
||||
<Content>
|
||||
<Header>
|
||||
<HeaderText>{headerContent}</HeaderText>
|
||||
<StyledHeader>
|
||||
<Heading
|
||||
className='heading'
|
||||
size='medium'
|
||||
truncate={true}
|
||||
>
|
||||
{headerContent}
|
||||
</Heading>
|
||||
{scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
|
||||
</Header>
|
||||
</StyledHeader>
|
||||
<Body>{bodyContent}</Body>
|
||||
<Footer className="modal-dialog-aside-footer">{footerContent}</Footer>
|
||||
</Content>
|
||||
|
@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
|
||||
import styled from '@emotion/styled';
|
||||
import Layout from '../layout';
|
||||
import PageLayout from '.';
|
||||
import Header from '../header';
|
||||
import Heading from '../heading';
|
||||
import IconButton from '../icon-button';
|
||||
import ContextMenuButton from '../context-menu-button';
|
||||
import MainButton from '../main-button';
|
||||
@ -49,7 +49,13 @@ const perPageItems = [
|
||||
}
|
||||
];
|
||||
|
||||
const articleHeaderContent = <Header type="menu">Article Header</Header>;
|
||||
const StyledHeading = styled(Heading)`
|
||||
margin: 0;
|
||||
line-height: 56px;
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
const articleHeaderContent = <StyledHeading size="xlarge">Article Header</StyledHeading>;
|
||||
|
||||
const articleMainButtonContent = <MainButton
|
||||
text='Actions'
|
||||
@ -64,7 +70,7 @@ const sectionHeaderContent = <HeaderContent>
|
||||
size='16'
|
||||
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
|
||||
/>
|
||||
<Header type="content">Section Header</Header>
|
||||
<StyledHeading size='medium'>Section Header</StyledHeading>
|
||||
<IconButton
|
||||
iconName={"PlusIcon"}
|
||||
size='16'
|
||||
|
@ -403,7 +403,7 @@ class PasswordInput extends React.Component {
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontSize={13}
|
||||
fontSize='13px'
|
||||
color={iconsColor}
|
||||
isSemitransparent={disableCopyAction}
|
||||
onClick={this.copyToClipboard.bind(this, emailInputName)}
|
||||
|
@ -22,16 +22,16 @@ import { RadioButtonGroup } from "asc-web-components";
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :----------------------: | :----------: | ---------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
|
||||
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
|
||||
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
|
||||
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
|
||||
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
|
||||
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
|
||||
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :----------------------: | :----------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
|
||||
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
|
||||
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
|
||||
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
|
||||
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
|
||||
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
|
||||
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |
|
||||
|
@ -25,8 +25,8 @@ import { RadioButton } from "asc-web-components";
|
||||
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used |
|
||||
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. |
|
||||
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component |
|
||||
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
|
||||
| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton |
|
||||
| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons |
|
||||
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) |
|
||||
| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container |
|
||||
|
@ -14,15 +14,15 @@ import { RequestLoader } from "asc-web-components";
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :---------------: | :------: | :----: | :-------------------------: | ----------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `fontColor` | `string` | - | - | `#999` | Text label font color |
|
||||
| `fontSize` | `number`,`string` | - | - | `12` | Text label font size |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `label` | `string` | - | - | `Loading... Please wait...` | Svg aria-label and text label |
|
||||
| `loaderColor` | `string` | - | - | `#999` | Svg color |
|
||||
| `loaderSize` | `number`,`string` | - | - | `16` | Svg height and width value |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `visible` | `bool` | - | - | `false` | Visibility |
|
||||
| `zIndex` | `string` | - | - | `256` | CSS z-index |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :----: | :-------------------------: | ----------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `fontColor` | `string` | - | - | `#999` | Text label font color |
|
||||
| `fontSize` | `string` | - | - | `12px` | Text label font size |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `label` | `string` | - | - | `Loading... Please wait...` | Svg aria-label and text label |
|
||||
| `loaderColor` | `string` | - | - | `#999` | Svg color |
|
||||
| `loaderSize` | `string` | - | - | `16px` | Svg height and width value |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `visible` | `bool` | - | - | `false` | Visibility |
|
||||
| `zIndex` | `string` | - | - | `256` | CSS z-index |
|
||||
|
@ -60,10 +60,10 @@ const RequestLoader = props => {
|
||||
RequestLoader.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
zIndex: PropTypes.number,
|
||||
loaderSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
loaderSize: PropTypes.string,
|
||||
loaderColor: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
fontSize: PropTypes.string,
|
||||
fontColor: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
@ -73,10 +73,10 @@ RequestLoader.propTypes = {
|
||||
RequestLoader.defaultProps = {
|
||||
visible: false,
|
||||
zIndex: 256,
|
||||
loaderSize: 16,
|
||||
loaderSize: '16px',
|
||||
loaderColor: '#999',
|
||||
label: 'Loading... Please wait...',
|
||||
fontSize: 12,
|
||||
fontSize: '12px',
|
||||
fontColor: '#999'
|
||||
};
|
||||
|
||||
|
@ -14,10 +14,10 @@ storiesOf('Components|Loaders', module)
|
||||
<RequestLoader
|
||||
visible={boolean('visible', true)}
|
||||
zIndex={number('zIndex', 256)}
|
||||
loaderSize={number('loaderSize', 16)}
|
||||
loaderSize={text('loaderSize', '16px')}
|
||||
loaderColor={color('loaderColor', '#999')}
|
||||
label={text('label', 'Loading... Please wait...')}
|
||||
fontSize={number('fontSize', 12)}
|
||||
fontSize={text('fontSize', '12px')}
|
||||
fontColor={color('fontColor', '#999')} />
|
||||
</Section>
|
||||
));
|
@ -67,18 +67,18 @@ storiesOf('Components|RowContainer', module)
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
<RowContent>
|
||||
<Link type='page' title={user.userName} isBold={true} fontSize={15} color={nameColor} >{user.userName}</Link>
|
||||
<Link type='page' title={user.userName} isBold={true} fontSize='15px' color={nameColor} >{user.userName}</Link>
|
||||
<>
|
||||
{user.status === 'pending' && <Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
{user.status === 'disabled' && <Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />}
|
||||
</>
|
||||
{user.isHead
|
||||
? <Link containerWidth='120px' type='page' title='Head of department' fontSize={12} color={sideInfoColor} >Head of department</Link>
|
||||
? <Link containerWidth='120px' type='page' title='Head of department' fontSize='12px' color={sideInfoColor} >Head of department</Link>
|
||||
: <div></div>
|
||||
}
|
||||
<Link containerWidth='160px' type='action' title={user.department} fontSize={12} color={sideInfoColor} >{user.department}</Link>
|
||||
<Link type='page' title={user.mobilePhone} fontSize={12} color={sideInfoColor} >{user.mobilePhone}</Link>
|
||||
<Link containerWidth='180px' type='page' title={user.email} fontSize={12} color={sideInfoColor} >{user.email}</Link>
|
||||
<Link containerWidth='160px' type='action' title={user.department} fontSize='12px' color={sideInfoColor} >{user.department}</Link>
|
||||
<Link type='page' title={user.mobilePhone} fontSize='12px' color={sideInfoColor} >{user.mobilePhone}</Link>
|
||||
<Link containerWidth='180px' type='page' title={user.email} fontSize='12px' color={sideInfoColor} >{user.email}</Link>
|
||||
</RowContent>
|
||||
</Row>
|
||||
);
|
||||
|
@ -10,33 +10,33 @@ import { RowContent } from "asc-web-components";
|
||||
|
||||
```jsx
|
||||
<RowContent>
|
||||
<Link type="page" title="Demo" isBold={true} fontSize={15} color="#333333">
|
||||
<Link type="page" title="Demo" isBold={true} fontSize='15px' color="#333333">
|
||||
Demo
|
||||
</Link>
|
||||
<>
|
||||
<Icons.SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
||||
<Icons.CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<Link type="page" title="Demo" fontSize={12} color="#A3A9AE">
|
||||
<Link type="page" title="Demo" fontSize='12px' color="#A3A9AE">
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo"
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
<Link type="page" title="0 000 0000000" fontSize={12} color="#A3A9AE">
|
||||
<Link type="page" title="0 000 0000000" fontSize='12px' color="#A3A9AE">
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo@demo.com"
|
||||
fontSize={12}
|
||||
fontSize='12px'
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo@demo.com
|
||||
|
@ -18,43 +18,43 @@ storiesOf('Components|RowContent', module)
|
||||
<h3>Base demo</h3>
|
||||
<div style={{height: '16px'}}></div>
|
||||
<RowContent>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
|
||||
<>
|
||||
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
|
||||
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
|
||||
</>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link type='page' title='Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo</Link>
|
||||
<Link type='page' title='Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo</Link>
|
||||
<>
|
||||
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
|
||||
</>
|
||||
<></>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo@demo.com</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo@demo.com</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link type='page' title='Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo</Link>
|
||||
<Link type='page' title='Demo Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo Demo</Link>
|
||||
<></>
|
||||
<></>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo@demo.com</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo.demo@demo.com</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link type='page' title='Demo Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo Demo</Link>
|
||||
<Link type='page' title='Demo Demo Demo Demo' isBold={true} fontSize='15px' color='#333333' >Demo Demo Demo Demo</Link>
|
||||
<>
|
||||
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
|
||||
</>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo.demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link containerWidth='160px' type='action' title='Demo Demo Demo Demo' fontSize='12px' color='#A3A9AE' >Demo Demo Demo Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link containerWidth='160px' type='page' title='demo.demo.demo.demo@demo.com' fontSize='12px' color='#A3A9AE' >demo.demo.demo.demo@demo.com</Link>
|
||||
</RowContent>
|
||||
<div style={{height: '36px'}}></div>
|
||||
<h3>Custom elements</h3>
|
||||
@ -62,7 +62,7 @@ storiesOf('Components|RowContent', module)
|
||||
<RowContent
|
||||
disableSideInfo={true}
|
||||
>
|
||||
<Link type='page' title='John Doe' isBold={true} fontSize={15} color='#333333' >John Doe</Link>
|
||||
<Link type='page' title='John Doe' isBold={true} fontSize='15px' color='#333333' >John Doe</Link>
|
||||
<></>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
|
@ -7,11 +7,11 @@ describe('<RowContent />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<RowContent>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
|
||||
</RowContent>
|
||||
);
|
||||
|
||||
@ -21,11 +21,11 @@ describe('<RowContent />', () => {
|
||||
it('accepts id', () => {
|
||||
const wrapper = mount(
|
||||
<RowContent id="testId">
|
||||
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
|
||||
</RowContent>
|
||||
);
|
||||
|
||||
@ -35,11 +35,11 @@ describe('<RowContent />', () => {
|
||||
it('accepts className', () => {
|
||||
const wrapper = mount(
|
||||
<RowContent className="test">
|
||||
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
|
||||
</RowContent>
|
||||
);
|
||||
|
||||
@ -49,11 +49,11 @@ describe('<RowContent />', () => {
|
||||
it('accepts style', () => {
|
||||
const wrapper = mount(
|
||||
<RowContent style={{ color: 'red' }}>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
|
||||
<Link type='page' title='Demo' isBold={true} fontSize='15px' color='#333333' >Demo</Link>
|
||||
<Link type='page' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='action' title='Demo' fontSize='12px' color='#A3A9AE' >Demo</Link>
|
||||
<Link type='page' title='0 000 0000000' fontSize='12px' color='#A3A9AE' >0 000 0000000</Link>
|
||||
<Link type='page' title='demo@demo.com' fontSize='12px' color='#A3A9AE' >demo@demo.com</Link>
|
||||
</RowContent>
|
||||
);
|
||||
|
||||
|
@ -224,7 +224,7 @@ class TabContainer extends Component {
|
||||
selected={activeTab === index}
|
||||
isDisabled={isDisabled}
|
||||
>
|
||||
<Text className="title_style" fontSize={13}>
|
||||
<Text className="title_style" fontSize='13px'>
|
||||
{item.title}
|
||||
</Text>
|
||||
</Label>
|
||||
|
@ -32,16 +32,16 @@ const StyledText = styled(Text)`
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :------: | :------: | :----: | :-------: | -------------------------------------------------- |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :-------------------------: | :------: | :----: | :-------: | -------------------------------------------------- |
|
||||
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
|
||||
| `backgroundColor` | `string` | - | - | - | Sets background color |
|
||||
| `color` | `string` | - | - | `#333333` | Specifies the text color |
|
||||
| `display` | `string` | - | - | - | Sets the 'display' property |
|
||||
| `fontSize` | `oneOfType(number, string)` | - | - | `13` | Sets the font size |
|
||||
| `as` | `string` | - | - | `p` | Sets the tag through which to render the component |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `display` | `string` | - | - | - | Sets the 'display' property |
|
||||
| `color` | `string` | - | - | `#333333` | Specifies the text color |
|
||||
| `isBold` | `bool` | - | - | `false` | Sets font weight value to bold |
|
||||
| `isItalic` | `bool` | - | - | `false` | Sets the font style |
|
||||
| `backgroundColor` | `string` | - | - | - | Sets background color |
|
||||
| `fontWeight` | `number` | - | - | - | Sets the font weight |
|
||||
| `fontWeight` | `number` | - | - | - | Sets the font weight |
|
||||
| `isBold` | `bool` | - | - | `false` | Sets font weight value to bold |
|
||||
| `isInline` | `bool` | - | - | `false` | Sets the 'display: inline-block' property |
|
||||
| `isItalic` | `bool` | - | - | `false` | Sets the font style |
|
||||
| `title` | `bool` | - | - | - | Title |
|
||||
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
||||
|
@ -4,10 +4,8 @@ import styled, { css } from 'styled-components';
|
||||
import commonTextStyles from './common-text-styles';
|
||||
|
||||
const styleCss = css`
|
||||
outline: 0 !important;
|
||||
${props => (typeof (props.fontSize) === 'string' && css`font-size: ${props.fontSize};`) ||
|
||||
(typeof (props.fontSize) === 'number' && css`font-size: ${props.fontSize}px;`)};
|
||||
font-weight: ${props => props.fontWeight
|
||||
font-size: ${props => props.fontSize};
|
||||
outline: 0 !important; font-weight: ${props => props.fontWeight
|
||||
? props.fontWeight
|
||||
: props.isBold == true ? 700 : 500};
|
||||
${props => props.isItalic == true && css`font-style: italic;`}
|
||||
@ -35,7 +33,7 @@ Text.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
fontSize: PropTypes.string,
|
||||
fontWeight: PropTypes.number,
|
||||
backgroundColor: PropTypes.string,
|
||||
truncate: PropTypes.bool,
|
||||
@ -48,7 +46,7 @@ Text.propTypes = {
|
||||
Text.defaultProps = {
|
||||
title: '',
|
||||
color: '#333333',
|
||||
fontSize: 13,
|
||||
fontSize: '13px',
|
||||
truncate: false,
|
||||
isBold: false,
|
||||
isInline: false,
|
||||
|
@ -18,7 +18,7 @@ storiesOf('Components|Text', module)
|
||||
<Text
|
||||
title={text('title', '')}
|
||||
as={select('as', textTags , 'p')}
|
||||
fontSize={number('fontSize', 13)}
|
||||
fontSize={text('fontSize', '13px')}
|
||||
fontWeight={number('fontWeight')}
|
||||
truncate={boolean('truncate', false)}
|
||||
color={color('color', '#333333')}
|
||||
|
@ -54,7 +54,6 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
|
||||
class Textarea extends React.PureComponent {
|
||||
render() {
|
||||
// console.log('Textarea render');
|
||||
console.warn('Textarea render');
|
||||
return (
|
||||
<StyledScrollbar
|
||||
className={this.props.className}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user