deleted sub-components

This commit is contained in:
Artem Tarasov 2020-06-26 17:57:08 +03:00
parent d911f80342
commit efd6e652da
28 changed files with 0 additions and 634 deletions

View File

@ -1,21 +0,0 @@
import React from 'react';
import { Button } from 'asc-web-components';
import StyledButtonBox from './StyledButtonBox';
const ButtonBox = ({ label }) => (
<StyledButtonBox>
<Button
id="continue-button"
className="wizard-button"
primary
label={label}
tabIndex={3}
size="big"
onClick={() => alert('click')}
/>
</StyledButtonBox>
);
export default ButtonBox;

View File

@ -1,5 +0,0 @@
import styled from 'styled-components';
const StyledButtonBox = styled.div``;
export default StyledButtonBox;

View File

@ -1,3 +0,0 @@
import ButtonBox from './ButtonBox';
export default ButtonBox;

View File

@ -1,49 +0,0 @@
import React from 'react';
import {
Checkbox,
Link
} from 'asc-web-components';
import StyledCheckboxBox from './StyledCheckboxBox';
const CheckboxBox = ({
isSendData,
isAcceptLicense,
sendDataHandler,
acceptLicenseHandler,
t
}) => (
<StyledCheckboxBox>
<Checkbox
className="wizard-checkbox"
id="usage-data"
name="usage-data"
label={t('checkboxBox.labelSendData')}
isChecked={isSendData}
isIndeterminate={false}
isDisabled={false}
onChange={sendDataHandler}
/>
<Checkbox
className="wizard-checkbox"
id="license"
name="confirm"
label={t('checkboxBox.labelAcceptLicense')}
isChecked={isAcceptLicense}
isIndeterminate={false}
isDisabled={false}
onChange={acceptLicenseHandler}
/>
<Link
type="page"
color="#116d9d"
href="https://gnu.org/licenses/gpl-3.0.html"
isBold={false}
>
{t('checkboxBox.link')}
</Link>
</StyledCheckboxBox>
)
export default CheckboxBox;

View File

@ -1,16 +0,0 @@
import styled from 'styled-components';
const StyledCheckboxBox = styled.div`
margin-top: 40px;
.wizard-checkbox {
margin-bottom: 10px;
}
#license {
display: inline-block;
margin-right: 3px;
}
`;
export default StyledCheckboxBox;

View File

@ -1,2 +0,0 @@
import CheckboxBox from './CheckboxBox';
export default CheckboxBox;

View File

@ -1,18 +0,0 @@
import React from 'react';
import StyledHeaderBox from './StyledHeaderBox';
const HeaderBox = () => (
<StyledHeaderBox>
<div className="wizard-header">
<a className="wizard-logo" href="/home">
<img
src="images/onlyoffice_logo/light_small_general.svg"
alt="Logo"
/>
</a>
</div>
</StyledHeaderBox>
);
export default HeaderBox;

View File

@ -1,33 +0,0 @@
import styled from 'styled-components';
const StyledHeaderBox = styled.header`
.wizard-header {
height: 48px;
background-color: #0f4071;
width: 100%;
position: relative;
margin-bottom: 74px;
.wizard-logo {
display: block;
width: 142px;
height: 23px;
cursor: pointer;
margin: -12px 0 0;
margin-left: 24px;
position: absolute;
top: 51%;
}
}
.wizard-header::before {
content: "";
background: url("images/clouds_fond.png");
height: 48px;
position: absolute;
top: 48px;
width: 100%;
}
`;
export default StyledHeaderBox;

View File

@ -1,3 +0,0 @@
import HeaderBox from './HeaderBox';
export default HeaderBox;

View File

@ -1,71 +0,0 @@
import React from 'react';
import {
Heading,
Label,
Icons,
ComboBox
} from 'asc-web-components';
import StyledLanguageAndTimezoneBox from './StyledLanguageAndTimezoneBox';
const LanguageAndTimezoneBox = ({
languages, timeZones, t
}) => {
const optionsLang = languages.map( el => Object.assign({}, {
key: el,
label: el
}));
const optionsTimeZone = timeZones.map( el => Object.assign({}, {
key: el,
label: el
}))
return <StyledLanguageAndTimezoneBox>
<Heading level={2} title="Language and Time Zone Settings" className="header-base timezone">
{t('languageAndTimezoneBox.heading')}
</Heading>
<Label
className="lang timezone-lang-label"
text={t('languageAndTimezoneBox.labelLanguage')}
title="Language"
display="block"
htmlFor="language"
/>
<Icons.QuestionIcon size="small" className="question-icon"/>
<ComboBox
className="comboBox"
id="language"
options={optionsLang}
selectedOption={{
key: optionsLang[0].key,
label: optionsLang[0].label
}}
dropDownMaxHeight={200}
onSelect={option => console.log("selected", option)} />
<Label
className="timezone timezone-lang-label"
text={t('languageAndTimezoneBox.labelTimezone')}
title="Time Zone"
display="block"
htmlFor="time-zone"
/>
<ComboBox
className="comboBox"
id="time-zone"
options={optionsTimeZone}
selectedOption={{
key: optionsTimeZone[0].key,
label: optionsTimeZone[0].label
}}
dropDownMaxHeight={200}
onSelect={option => console.log("selected", option)} />
</StyledLanguageAndTimezoneBox>
}
export default LanguageAndTimezoneBox;

View File

@ -1,35 +0,0 @@
import styled from 'styled-components';
const StyledLanguageAndTimezoneBox = styled.div`
padding-left: 7px;
@media(max-width: 600px) {
padding-left: 0;
}
.timezone {
margin-top: 12px;
}
.timezone-lang-label {
font: bold 12px 'Open Sans', sans-serif;
margin-bottom: 5px;
}
.lang {
display: inline-block;
margin-right: 5px;
}
.question-icon {
display: inline-block;
vertical-align: middle;
}
.comboBox {
width: 350px;
}
`;
export default StyledLanguageAndTimezoneBox;

View File

@ -1,3 +0,0 @@
import LanguageAndTimezoneBox from './LanguageAndTimezoneBox';
export default LanguageAndTimezoneBox;

View File

@ -1,81 +0,0 @@
import React from 'react';
import {
Heading,
Label,
PasswordInput
} from 'asc-web-components';
import StyledPasswordBox from './StyledPasswordBox';
const settingsPassword = {
minLength: 6,
upperCase: true,
digits: true,
specSymbols: true
};
const PasswordBox = ({
firstPass, secondPass, t
}) => (
<StyledPasswordBox>
<Heading level={2} className="header-base">
{t('passwordBox.heading')}
</Heading>
<Label
className="label-pass"
text={t('passwordBox.labelFirstPass')}
title="first pass"
htmlFor="first"
display="block"
/>
<PasswordInput
className="wizard-pass"
id="first"
inputName="firstPass"
emailInputName="email-wizard"
inputValue={firstPass}
onChange={e => console.log(e)}
tooltipPasswordTitle={t('passwordBox.tooltipPasswordTitle')}
tooltipPasswordLength={t('passwordBox.tooltipPasswordLength')}
tooltipPasswordDigits={t('passwordBox.tooltipPasswordDigits')}
tooltipPasswordCapital={t('passwordBox.tooltipPasswordCapital')}
tooltipPasswordSpecial={t('passwordBox.tooltipPasswordSpecial')}
generatorSpecial="!@#$%^&*"
passwordSettings={settingsPassword}
isDisabled={false}
placeholder={t('passwordBox.placeholder')}
onValidateInput={a => console.log(a)}
/>
<Label
className="label-pass"
text={t('passwordBox.labelSecondPass')}
title="second pass"
htmlFor="second"
display="block"
/>
<PasswordInput
className="wizard-pass"
id="second"
inputName="secondPass"
emailInputName="email-wizard"
inputValue={secondPass}
onChange={e => console.log(e)}
tooltipPasswordTitle={t('passwordBox.tooltipPasswordTitle')}
tooltipPasswordLength={t('passwordBox.tooltipPasswordLength')}
tooltipPasswordDigits={t('passwordBox.tooltipPasswordDigits')}
tooltipPasswordCapital={t('passwordBox.tooltipPasswordCapital')}
tooltipPasswordSpecial={t('passwordBox.tooltipPasswordSpecial')}
generatorSpecial="!@#$%^&*"
passwordSettings={settingsPassword}
isDisabled={false}
placeholder={t('passwordBox.placeholder')}
onValidateInput={a => console.log(a)}
/>
</StyledPasswordBox>
);
export default PasswordBox;

View File

@ -1,39 +0,0 @@
import styled from 'styled-components'
const StyledPasswordBox = styled.div`
width: 30%;
.wizard-pass {
width: 95%;
margin: 8px 0;
}
.label-pass {
font-size: 12px;
}
.label-pass::after {
content: "*";
color: red;
}
@media(max-width: 768px) {
width: 50%;
.wizard-pass {
width: 95%;
margin: 8px 0;
}
}
@media(max-width: 600px) {
width: 100%;
.wizard-pass {
width: 98%;
margin: 8px 0;
}
}
`;
export default StyledPasswordBox;

View File

@ -1,3 +0,0 @@
import PasswordBox from './PasswordBox';
export default PasswordBox;

View File

@ -1,58 +0,0 @@
import React from 'react';
import {
Heading,
Label,
EmailInput,
Text,
Icons,
utils
} from 'asc-web-components';
import StyledLanguageAndTimezoneBox from './StyledRegistrationSettingsBox';
const { EmailSettings } = utils.email;
const settings = new EmailSettings();
settings.allowDomainPunycode = true;
const RegistrationSettingsBox = ({
domain, t
}) => (
<StyledLanguageAndTimezoneBox>
<Heading className="reg-settings-title" title="Registration Settings" className="header-base">
{t('registrationSettingsBox.heading')}
</Heading>
<Label
className="settings-label"
text={t('registrationSettingsBox.labelEmail')}
title="registered email"
display="block"
htmlFor="input-email"
/>
<EmailInput
id="input-email"
name="email-wizard"
placeholder={t('registrationSettingsBox.placeholder')}
emailSettings={settings}
onValidateInput={result => {
console.log("onValidateInput", result.value, result.isValid, result.errors)
}}
/>
<Label
className="settings-label"
text={t('registrationSettingsBox.labelDomain')}
title="registered domain"
display="block"
htmlFor="input-email"
/>
<Text className="domain-name">
{domain}
</Text>
<Icons.QuestionIcon size="small" className="question-icon"/>
</StyledLanguageAndTimezoneBox>
);
export default RegistrationSettingsBox;

View File

@ -1,51 +0,0 @@
import styled from 'styled-components';
const StyledRegistrationSettingsBox = styled.div`
width: 100%;
padding-left: 7px;
padding-top: 3px;
.settings-label {
font: normal 14px 'Open Sans', sans-serif;
display: inline-block;
margin: 2px 14px 11px 0;
}
#input-email {
display: inline-block;
height: 24px;
width: 45%;
@media(max-width: 985px) {
width: 70%;
}
@media(max-width: 768px) {
width: 95%;
}
@media(max-width: 600px) {
width: 85%;
}
}
.domain-name {
display: inline-block;
font: bold 14px 'Open Sans', sans-serif;
margin-right: 5px;
@media(max-width: 600px) {
display: block;
}
}
.question-icon {
display: inline-block;
vertical-align: middle;
}
@media(max-width: 600px) {
padding-left: 0;
}
`;
export default StyledRegistrationSettingsBox;

View File

@ -1,3 +0,0 @@
import RegistrationSettingsBox from './RegistrationSettingsBox';
export default RegistrationSettingsBox;

View File

@ -1,13 +0,0 @@
import React from 'react';
import StyledSettingsWrapper from './StyledSettingsWrapper';
const SettingsWrapper = ({
children
}) => (
<StyledSettingsWrapper>
{ children }
</StyledSettingsWrapper>
);
export default SettingsWrapper;

View File

@ -1,28 +0,0 @@
import styled from 'styled-components';
const StyledSettingsWrapper = styled.div`
display: flex;
flex-wrap: wrap;
align-items: top;
margin-top: 26px;
width: 100%;
@media(max-width: 600px) {
margin-top: 0px;
flex-direction: column;
}
.float-right {
@media(max-width: 768px) {
width: 50%;
}
@media(max-width: 600px) {
margin-left: 0;
width: 100%;
}
width: 70%;
}
`;
export default StyledSettingsWrapper;

View File

@ -1,3 +0,0 @@
import SettingsWrapper from './SettingsWrapper';
export default SettingsWrapper;

View File

@ -1,26 +0,0 @@
import styled from 'styled-components';
const StyledWelcomeBox = styled.div`
.wizard-title {
font-size: 28px;
margin-bottom: 15px;
font: normal 28px 'Open Sans', sans-serif;
}
.wizard-desc{
position: relative;
display: inline-block;
font-size: 12px;
margin-left: 30px;
}
.wizard-desc::before {
display: block;
position: absolute;
content: url("images/lock.png");
left: -30px;
top: -6px;
}
`;
export default StyledWelcomeBox;

View File

@ -1,22 +0,0 @@
import React from 'react';
import {
Heading,
Text
} from 'asc-web-components';
import StyledWelcomeBox from './StyledWelcomeBox';
const WelcomeBox = ({ t }) => (
<StyledWelcomeBox>
<Heading level={1} title="Heading form" className="wizard-title">
{t('welcomeBox.heading')}
</Heading>
<Text className="wizard-desc">
{t('welcomeBox.text')}
</Text>
</StyledWelcomeBox>
);
export default WelcomeBox;

View File

@ -1,3 +0,0 @@
import WelcomeBox from './WelcomeBox';
export default WelcomeBox;

View File

@ -1,22 +0,0 @@
import styled from 'styled-components';
const StyledWizardForm = styled.div`
width: 976px;
margin: 0 auto;
@media(max-width: 1080px) {
width: 90%;
}
.header-base {
font: normal 18px 'Open Sans', sans-serif;
margin-bottom: 12px;
}
#continue-button {
margin-top: 20px;
font: normal 15px 'Open Sans', sans-serif;
}
`;
export default StyledWizardForm;

View File

@ -1,11 +0,0 @@
import React from 'react';
import StyledWizardForm from './StyledWizardForm';
const WizardForm = ({ children }) => (
<StyledWizardForm>
{children}
</StyledWizardForm>
);
export default WizardForm;

View File

@ -1,3 +0,0 @@
import WizardForm from './WizardForm';
export default WizardForm;

View File

@ -1,9 +0,0 @@
export { default as ButtonBox } from './ButtonBox';
export { default as CheckboxBox } from './CheckboxBox';
export { default as HeaderBox } from './HeaderBox';
export { default as LanguageAndTimezoneBox } from './LanguageAndTimezoneBox';
export { default as PasswordBox } from './PasswordBox';
export { default as RegistrationSettingsBox } from './RegistrationSettingsBox';
export { default as SettingsWrapper } from './SettingsWrapper';
export { default as WelcomeBox } from './WelcomeBox';
export { default as WizardForm } from './WizardForm';