From 12e666bb880fe2b7f6d6cfada5b651a61b107591 Mon Sep 17 00:00:00 2001
From: Alexandr Romanov <aromanov07@gmail.com>
Date: Thu, 25 Apr 2019 16:29:11 +0300
Subject: [PATCH 1/3] Animation edit

---
 packages/desktop/src/modal/SimpleModal.tsx |  10 +-
 packages/mobile/src/modal/SimpleModal.md   | 200 +++++++++++++++++++++
 packages/mobile/src/modal/SimpleModal.tsx  |  12 +-
 3 files changed, 211 insertions(+), 11 deletions(-)
 create mode 100644 packages/mobile/src/modal/SimpleModal.md

diff --git a/packages/desktop/src/modal/SimpleModal.tsx b/packages/desktop/src/modal/SimpleModal.tsx
index 5dcfcd248..a8e134e16 100644
--- a/packages/desktop/src/modal/SimpleModal.tsx
+++ b/packages/desktop/src/modal/SimpleModal.tsx
@@ -19,8 +19,8 @@ const contentTransition: FunctionComponent<SimpleTransitionProps> = (props) => <
 
 contentTransition.defaultProps = {
   timeout: {
-    enter: 370,
-    exit: 250,
+    enter: 300,
+    exit: 150,
   },
   enterClassName: (timeout: number) => css({
     opacity: 1,
@@ -29,7 +29,7 @@ contentTransition.defaultProps = {
   }),
   exitClassName: (timeout: number) => css({
     opacity: 0,
-    transform: 'translate3d(0, 35px, 0)',
+    transform: 'translate3d(0, 28px, 0)',
     transition: `opacity ${timeout}ms ease, transform ${timeout}ms ease`,
   }),
 }
@@ -38,8 +38,8 @@ const backdropTransition: FunctionComponent<SimpleTransitionProps> = (props) =>
 
 backdropTransition.defaultProps = {
   timeout: {
-    enter: 370,
-    exit: 250,
+    enter: 300,
+    exit: 200,
   },
   enterClassName: (timeout: number) => css({
     opacity: 1,
diff --git a/packages/mobile/src/modal/SimpleModal.md b/packages/mobile/src/modal/SimpleModal.md
new file mode 100644
index 000000000..10dc2d932
--- /dev/null
+++ b/packages/mobile/src/modal/SimpleModal.md
@@ -0,0 +1,200 @@
+Рекомендуемый размер заголовка [H2](#/Компоненты/Heading) с основным текстом [Body M]() (Normal).
+
+В окнах применяются [Brand Button](#/Компоненты/Button) и [Simple Button](#/Компоненты/Button) в размере Normal.
+
+```jsx
+<Box>
+  <Actions size="normal">
+    <Button
+      kind="simple"
+      size="normal"
+      type="button"
+      text="Показать окно"
+      onClick={() => setState({delete: true})}
+    />
+  </Actions>
+  <SimpleModal
+    show={state.delete}
+    size={'m'}
+    closable
+    backdropClose
+    onHide={() => setState({delete: false})}
+    children={
+      <Spacer size="xl">
+        <Heading size="2">Удалить из избранного?</Heading>
+        <Actions size="normal">
+          <Button
+            kind="brand"
+            size="normal"
+            type="button"
+            text="Удалить"
+            onClick={() => setState({delete: false})}
+          />
+          <Button
+            kind="simple"
+            size="normal"
+            type="button"
+            text="Отменить"
+            onClick={() => setState({delete: false})}
+          />
+        </Actions>
+      </Spacer>
+    }
+  />
+</Box>
+```
+
+
+
+## Примеры окон
+
+#### Заголовок, описание и кнопки
+
+```jsx
+<Box>
+  <Actions size="normal">
+    <Button
+      kind="simple"
+      size="normal"
+      type="button"
+      text="Открыть"
+      onClick={() => setState({notification: true})}
+    />
+  </Actions>
+  <SimpleModal
+    show={state.notification}
+    size={'m'}
+    closable
+    backdropClose
+    onHide={() => setState({notification: false})}
+    children={
+      <Spacer size="l">
+        <Spacer size="m">
+          <Heading size="2">Отключить уведомления?</Heading>
+          <Paragraph size="m">Вам перестанут приходить сообщения о пополнении и списании</Paragraph>
+        </Spacer>
+        <Actions size="normal">
+          <Button
+            kind="brand"
+            size="normal"
+            type="button"
+            text="Отключить уведомления"
+            onClick={() => setState({notification: false})}
+          />
+          <Button
+            kind="simple"
+            size="normal"
+            type="button"
+            text="Не отключать"
+            onClick={() => setState({notification: false})}
+          />
+        </Actions>
+      </Spacer>
+    }
+  />
+</Box>
+```
+
+#### Заголовок, инпут и кнопка
+
+```jsx
+<Box>
+  <Actions size="normal">
+    <Button
+      kind="simple"
+      size="normal"
+      type="button"
+      text="Открыть"
+      onClick={() => setState({email: true})}
+    />
+  </Actions>
+  <SimpleModal
+    show={state.email}
+    size={'m'}
+    closable
+    backdropClose
+    onHide={() => setState({email: false})}
+    children={
+      <Spacer size="l">
+        <Spacer size="l">
+          <Heading size="2">Куда отправить квитанцию?</Heading>
+            <TextField
+              title="Адрес элктронной почты"
+              type="text"
+              value={state.text}
+              onChange={text => setState({text})}
+            />
+        </Spacer>
+        <Actions size="normal">
+          <Button
+            kind="brand"
+            size="normal"
+            type="button"
+            text="Отправить"
+            onClick={() => setState({email: false})}
+          />
+        </Actions>
+      </Spacer>
+    }
+  />
+</Box>
+```
+
+#### Заголовок, инпут, кнопка и чекбоксы.
+
+```jsx
+initialState = {values: ['selected']};
+<Box>
+  <Actions size="normal">
+    <Button
+      kind="simple"
+      size="normal"
+      type="button"
+      text="Открыть"
+      onClick={() => setState({snapping: true})}
+    />
+  </Actions>
+  <SimpleModal
+    show={state.snapping}
+    size={'m'}
+    closable
+    backdropClose
+    onHide={() => setState({snapping: false})}
+    children={
+      <Spacer size="l">
+        <Spacer size="l">
+          <Heading size="2">Привязка почты к QIWI Кошельку</Heading>
+            <TextField
+              title="Адрес элктронной почты"
+              type="text"
+              value={state.text}
+              onChange={text => setState({text})}
+            />
+        </Spacer>
+        <Actions size="normal">
+          <Button
+            kind="brand"
+            size="normal"
+            type="button"
+            text="Привязать почту"
+            onClick={() => setState({snapping: false})}
+          />
+        </Actions>
+       <CheckboxField
+          options={[{
+            label: 'Использовать почту для изменения пароля',
+            value: 'selected',
+            disabled: false,
+          }, {
+            label: 'Получать письма о полезных функциях и акциях от QIWI',
+            value: 'normal',
+            disabled: false,
+          }]}
+          values={state.values}
+          onChange={(values) => setState({values})}
+        />
+      </Spacer>
+    }
+  />
+</Box>
+```
diff --git a/packages/mobile/src/modal/SimpleModal.tsx b/packages/mobile/src/modal/SimpleModal.tsx
index ba1dfdb52..ad9719a84 100644
--- a/packages/mobile/src/modal/SimpleModal.tsx
+++ b/packages/mobile/src/modal/SimpleModal.tsx
@@ -19,17 +19,17 @@ const contentTransition: FunctionComponent<SimpleTransitionProps> = (props) => <
 
 contentTransition.defaultProps = {
   timeout: {
-    enter: 370,
-    exit: 250,
+    enter: 300,
+    exit: 150,
   },
   enterClassName: (timeout: number) => css({
     opacity: 1,
-    transform: 'translate3d(0, 0, 0)',
+    transform: 'scale(1.0)',
     transition: `opacity ${timeout}ms ease, transform ${timeout}ms ease`,
   }),
   exitClassName: (timeout: number) => css({
     opacity: 0,
-    transform: 'translate3d(0, -100%, 0)',
+    transform: 'scale(0.94)',
     transition: `opacity ${timeout}ms ease, transform ${timeout}ms ease`,
   }),
 }
@@ -38,8 +38,8 @@ const backdropTransition: FunctionComponent<SimpleTransitionProps> = (props) =>
 
 backdropTransition.defaultProps = {
   timeout: {
-    enter: 370,
-    exit: 250,
+    enter: 200,
+    exit: 200,
   },
   enterClassName: (timeout: number) => css({
     opacity: 1,

From ce033762372a60407a0444af7b13c400b47ecaf2 Mon Sep 17 00:00:00 2001
From: Alexandr Romanov <aromanov07@gmail.com>
Date: Mon, 6 May 2019 14:34:06 +0300
Subject: [PATCH 2/3] Modal window open edit

---
 packages/mobile/src/modal/SimpleModal.md  | 6 ++++++
 packages/mobile/src/modal/SimpleModal.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/mobile/src/modal/SimpleModal.md b/packages/mobile/src/modal/SimpleModal.md
index 10dc2d932..aacbe449e 100644
--- a/packages/mobile/src/modal/SimpleModal.md
+++ b/packages/mobile/src/modal/SimpleModal.md
@@ -22,6 +22,12 @@
     children={
       <Spacer size="xl">
         <Heading size="2">Удалить из избранного?</Heading>
+          <ReCaptchaField
+            siteKey="6Le0iiETAAAAAPNu6albLuW5O2Zz7FO8N95lisA1"
+            value={state.value1}
+            action={state.value1 ? <a href="javascript:void(0)" onClick={() => setState({value1: undefined})}>Сбросить</a> : null}
+            onChange={(value1) => setState({value1})}
+          />
         <Actions size="normal">
           <Button
             kind="brand"
diff --git a/packages/mobile/src/modal/SimpleModal.tsx b/packages/mobile/src/modal/SimpleModal.tsx
index ad9719a84..54ce16394 100644
--- a/packages/mobile/src/modal/SimpleModal.tsx
+++ b/packages/mobile/src/modal/SimpleModal.tsx
@@ -24,12 +24,12 @@ contentTransition.defaultProps = {
   },
   enterClassName: (timeout: number) => css({
     opacity: 1,
-    transform: 'scale(1.0)',
+    transform: 'translate3d(0, 0, 0)',
     transition: `opacity ${timeout}ms ease, transform ${timeout}ms ease`,
   }),
   exitClassName: (timeout: number) => css({
     opacity: 0,
-    transform: 'scale(0.94)',
+    transform: 'translate3d(0, 100%, 0)',
     transition: `opacity ${timeout}ms ease, transform ${timeout}ms ease`,
   }),
 }

From 6b5a19aa840ce327b0fe39e5f87de0cead48f85a Mon Sep 17 00:00:00 2001
From: Alexandr Romanov <aromanov07@gmail.com>
Date: Mon, 6 May 2019 16:45:57 +0300
Subject: [PATCH 3/3] Modal sizes name editet in md description

---
 packages/desktop/src/modal/SimpleModal.md | 16 ++++++++--------
 packages/mobile/src/modal/SimpleModal.md  | 14 ++++----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/desktop/src/modal/SimpleModal.md b/packages/desktop/src/modal/SimpleModal.md
index c928511c3..635bd3903 100644
--- a/packages/desktop/src/modal/SimpleModal.md
+++ b/packages/desktop/src/modal/SimpleModal.md
@@ -15,7 +15,7 @@
   </Actions>
   <SimpleModal
     show={state.delete}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({delete: false})}
@@ -53,27 +53,27 @@
       kind="simple"
       size="normal"
       type="button"
-      text="S"
+      text="s"
       onClick={() => setState({s: true})}
     />
     <Button
       kind="simple"
       size="normal"
       type="button"
-      text="M"
+      text="m"
       onClick={() => setState({m: true})}
     />
     <Button
       kind="simple"
       size="normal"
       type="button"
-      text="L"
+      text="l"
       onClick={() => setState({l: true})}
     />
   </Actions>
   <SimpleModal
     show={state.s}
-    size={'s'}
+    size="s"
     closable
     onHide={() => setState({s: false})}
     children={
@@ -85,7 +85,7 @@
   />
   <SimpleModal
     show={state.m}
-    size={'m'}
+    size="m"
     closable
     onHide={() => setState({m: false})}
     children={
@@ -97,7 +97,7 @@
   />
   <SimpleModal
     show={state.l}
-    size={'l'}
+    size="l"
     closable
     onHide={() => setState({l: false})}
     children={
@@ -174,7 +174,7 @@
   </Actions>
   <SimpleModal
     show={state.email}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({email: false})}
diff --git a/packages/mobile/src/modal/SimpleModal.md b/packages/mobile/src/modal/SimpleModal.md
index aacbe449e..2a2f3e32e 100644
--- a/packages/mobile/src/modal/SimpleModal.md
+++ b/packages/mobile/src/modal/SimpleModal.md
@@ -15,19 +15,13 @@
   </Actions>
   <SimpleModal
     show={state.delete}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({delete: false})}
     children={
       <Spacer size="xl">
         <Heading size="2">Удалить из избранного?</Heading>
-          <ReCaptchaField
-            siteKey="6Le0iiETAAAAAPNu6albLuW5O2Zz7FO8N95lisA1"
-            value={state.value1}
-            action={state.value1 ? <a href="javascript:void(0)" onClick={() => setState({value1: undefined})}>Сбросить</a> : null}
-            onChange={(value1) => setState({value1})}
-          />
         <Actions size="normal">
           <Button
             kind="brand"
@@ -69,7 +63,7 @@
   </Actions>
   <SimpleModal
     show={state.notification}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({notification: false})}
@@ -116,7 +110,7 @@
   </Actions>
   <SimpleModal
     show={state.email}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({email: false})}
@@ -162,7 +156,7 @@ initialState = {values: ['selected']};
   </Actions>
   <SimpleModal
     show={state.snapping}
-    size={'m'}
+    size="m"
     closable
     backdropClose
     onHide={() => setState({snapping: false})}