feat(fantasy): add dropdown & link (#77)

* feat(fantasy): add dropdown & link
alfa-laboratory · Jun 15, 2017 · cdf09fc · cdf09fc
1 parent 2bcf514
commit cdf09fc
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 23 deletions.
diff --git a/src/dropdown/README.md b/src/dropdown/README.md
@@ -1,14 +1,14 @@
 ```
 <div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='s'
             popupContent='Popup with default props'
         >
             Click me
         </Dropdown>
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='m'
             popupContent='Dropdown popup width custom props'
@@ -21,7 +21,7 @@
             Click me
         </Dropdown>
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='l'
             popupContent='Dropdown popup'
@@ -34,12 +34,10 @@
             } }
         />
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='xl'
-            popupContent={
-                <Label size='l'>Label inside popup</Label>
-            }
+            popupContent='Content inside popup'
             popupProps={ {
                 directions: ['bottom-center'],
                 mainOffset: 13,
@@ -54,7 +52,7 @@
 
 ```
 <div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='s'
             switcherType='button'
@@ -64,7 +62,7 @@
             Click me
         </Dropdown>
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='m'
             switcherType='button'
@@ -78,7 +76,7 @@
             Click me
         </Dropdown>
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='l'
             switcherType='button'
@@ -92,13 +90,11 @@
             } }
         />
     </div>
-    <div className='layout' >
+    <div className='layout'>
         <Dropdown
             size='xl'
             switcherType='button'
-            popupContent={
-                <Label size='l'>Label inside popup</Label>
-            }
+            popupContent='Content inside popup'
             popupProps={ {
                 directions: ['bottom-center'],
                 mainOffset: 13,

diff --git a/src/dropdown/dropdown.jsx b/src/dropdown/dropdown.jsx
@@ -145,11 +145,12 @@ class Dropdown extends React.Component {
                 className={ cn('switcher') }
                 size={ this.props.size }
                 ref={ (switcher) => { this.switcher = switcher; } }
+                disabled={ this.props.disabled }
                 pseudo={ true }
+                text={ content }
                 onClick={ !this.props.disabled ? this.handleSwitcherClick : undefined }
                 onMouseEnter={ this.handleSwitcherMouseEnter }
                 onMouseLeave={ this.handleSwitcherMouseLeave }
-                text={ content }
             />
         );
     }

diff --git a/src/dropdown/fantasy/index.js b/src/dropdown/fantasy/index.js
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import '../../button/fantasy';
+import '../../link/fantasy';
+import '../../popup/fantasy';
+
+export default from '../dropdown';
diff --git a/src/dropdown/index.js b/src/dropdown/index.js
@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 import '../button';
 import '../link';
 import '../popup';

diff --git a/src/link/README.md b/src/link/README.md
@@ -8,7 +8,7 @@ const layoutStyle = {
             {['s', 'm', 'l', 'xl'].map(size => (
                 <span style={ layoutStyle }>
                     <Link {...{
-                        text: `${mod} link`,
+                        text: `${mod ? `${mod} ` : ''}link`,
                         size,
                         [mod]: true
                     }} />
@@ -31,14 +31,14 @@ const iconStyle = {
         <div key={ mod }>
             {['s', 'm', 'l', 'xl'].map(size => {
                 const props = {
-                    text: `${mod} link`,
+                    text: `${mod ? `${mod} ` : ''}link`,
                     size,
                     [mod]: true
                 };
                 return  (
                     <span style={ layoutStyle }>
                         <Link { ...props } >
-                            <Icon { ...props } 
+                            <Icon { ...props }
                                 style={ iconStyle }
                                 icon='ok' />
                         </Link>
@@ -48,4 +48,4 @@ const iconStyle = {
         </div>
     ))}
 </div>
-```
+```
diff --git a/src/link/fantasy/index.js b/src/link/fantasy/index.js
@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import './link.css';
+
+export default from '../link';
diff --git a/src/link/fantasy/link.css b/src/link/fantasy/link.css
@@ -0,0 +1,122 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import '../../vars-fantasy.css';
+
+.link {
+    cursor: pointer;
+    outline: none;
+    font-family: var(--font);
+    font-weight: var(--font-weight-normal);
+    text-decoration: none;
+    transition: color 200ms ease-out;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
+
+    &__text {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        transition: border-color 200ms ease-out;
+    }
+
+    &__icon {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+        line-height: 0;
+    }
+
+    &_size_xs {
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-normal);
+    }
+
+    &_size_s {
+        font-size: var(--font-size-s);
+        line-height: var(--line-height-normal);
+    }
+
+    &_size_m {
+        font-size: var(--font-size-m);
+        line-height: var(--line-height-normal);
+    }
+
+    &_size_l {
+        font-size: var(--font-size-xl);
+        line-height: var(--line-height-condensed);
+    }
+
+    &_size_xl {
+        font-size: var(--font-size-2xl);
+        line-height: var(--line-height-condensed);
+    }
+
+    &_pseudo &__text {
+        border-bottom-style: dotted;
+    }
+
+    &_disabled,
+    &_checked {
+        cursor: default;
+    }
+
+    &_disabled &__icon, &_checked &__icon {
+        opacity: var(--opacity-disabled);
+    }
+}
+
+.link_theme_alfa-on-color {
+    color: var(--color-content-alfa-on-color);
+
+    .link__text {
+        border-color: rgba(255, 255, 255, .4);
+    }
+
+    &.link_hovered,
+    &.link_focused {
+        color: var(--color-content-accent-alfa-on-color);
+
+        .link__text {
+            border-color: rgba(255, 255, 255, 1);
+        }
+    }
+
+    &.link_disabled {
+        color: var(--color-content-minor-alfa-on-color);
+    }
+}
+
+.link_theme_alfa-on-white {
+    color: var(--color-content-alfa-on-white);
+
+    .link__text {
+        border-color: rgba(0, 0, 0, .4);
+    }
+
+    &.link_hovered,
+    &.link_focused {
+        color: var(--color-content-heavy-accent-alfa-on-white);
+
+        .link__text {
+            border-color: var(--color-accent-translucent);
+        }
+    }
+
+    &.link_disabled {
+        color: var(--color-content-minor-alfa-on-white);
+    }
+}
+
+.link_theme_alfa-on-color,
+.link_theme_alfa-on-white {
+    &.link_disabled,
+    &.link_checked {
+        .link__text {
+            border-color: transparent;
+        }
+    }
+
+    &.link_checked {
+        color: var(--color-accent);
+    }
+}
diff --git a/src/link/index.js b/src/link/index.js
@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 import './link.css';
 
 export default from './link';
diff --git a/src/vars/fantasy/font.css b/src/vars/fantasy/font.css
@@ -76,7 +76,7 @@
     /**
      * Базовый интерлиньяж
      */
-    --line-height: 1.4;
+    --line-height-normal: 1.4;
 
     /**
      * Сокращённый интерлиньяж

diff --git a/yarn.lock b/yarn.lock
@@ -6054,9 +6054,9 @@ lexical-scope@^1.2.0:
   dependencies:
     astw "^2.0.0"
 
-library-utils@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/library-utils/-/library-utils-1.3.2.tgz#24d3772696906e909ba728b115634890a8505406"
+library-utils@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/library-utils/-/library-utils-1.3.3.tgz#bf90aadb86f3a9ccfbfe65fc73810cf3e475e67c"
   dependencies:
     del "^2.2.2"
     ejs "^2.5.6"
@@ -6071,6 +6071,7 @@ library-utils@^1.3.2:
     react-component-info "^1.0.0"
     react-docgen "^2.15.0"
     recast "^0.12.5"
+    resolve "^1.3.3"
     through2 "^2.0.3"
     typescript "^2.2.1"
     typescript-formatter "^5.2.0"
@@ -8948,6 +8949,12 @@ resolve@^1.1.0, resolve@^1.1.3, resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7,
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"