feat(fantasy): add calendar

package.json

@@ -30,6 +30,7 @@
     "compile": "gulp --cwd . --gulpfile ./node_modules/library-utils/gulpfile.js compile",
     "pub": "npm run compile && cd .publish && npm publish",
     "styleguide": "styleguidist server",
+    "styleguide-fantasy": "styleguidist server --config ./styleguide-fantasy.config.js",
     "styleguide-build": "styleguidist build",
     "lint-staged": "lint-staged"
   },
@@ -103,7 +104,7 @@
     "react-textarea-autosize": "^4.3.2"
   },
   "devDependencies": {
-    "arui-presets": "2.2.1",
+    "arui-presets": "2.3.0",
     "babel-core": "^6.24.1",
     "bowser": "^1.6.1",
     "chai": "^3.5.0",

src/calendar/fantasy/README.md

@@ -0,0 +1,56 @@
+```
+    initialState = {
+      date: Date.now()
+    };
+    <Calendar
+        value={ state.date }
+        onValueChange={ (newDate) => {
+            setState({
+                date: newDate
+            });
+        } }
+    />   
+```
+
+```
+const addDays = require('date-fns/add_days');
+const startOfDay = require('date-fns/start_of_day');
+const subtractDays = require('date-fns/sub_days');
+initialState = {
+  date: Date.now(),
+  earlierLimit: subtractDays(new Date(), 3).valueOf(),
+  laterLimit: addDays(new Date(), 1).valueOf()
+};
+
+<Calendar
+    value={ state.date }
+    earlierLimit={ state.earlierLimit }
+    laterLimit={ state.laterLimit }
+    onValueChange={ (newDate) => {
+        setState({
+            date: newDate
+        });
+    } }
+/>
+```
+
+```
+const addDays = require('date-fns/add_days');
+const startOfDay = require('date-fns/start_of_day');
+const subtractDays = require('date-fns/sub_days');
+initialState = {
+  date: Date.now()
+};
+const offDays = [subtractDays(new Date(), 2), addDays(new Date(), 2)]
+    .map(date => startOfDay().valueOf());
+
+<Calendar
+    value={ state.date }
+    offDays={ offDays }
+    onValueChange={ (newDate) => {
+        setState({
+            date: newDate
+        });
+    } }
+/>
+```

src/calendar/fantasy/calendar.css

@@ -0,0 +1,113 @@
+@import '../../vars-fantasy.css';
+
+.calendar {
+    display: inline-block;
+    padding: 0;
+    outline: 0;
+    font-family: var(--font);
+    font-size: var(--font-size-m);
+    font-weight: var(--font-weight-normal);
+    border-radius: var(--border-radius-control);
+
+    &__name {
+        text-align: center;
+    }
+
+    &__layout {
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    &__title {
+        vertical-align: middle;
+        padding: 20px 15px 5px;
+        line-height: 20px;
+    }
+
+    &__layout {
+        padding: 0 15px 15px;
+    }
+
+    &__dayname,
+    &__day {
+        font-size: var(--font-size-s);
+    }
+
+    &__dayname {
+        cursor: default;
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-normal);
+        line-height: 34px;
+        text-align: center;
+    }
+
+    &__day {
+        width: 35px;
+        cursor: pointer;
+        line-height: 30px;
+        text-align: center;
+    }
+
+    &__arrow, &__double_arrow {
+        opacity: var(--opacity-minor);
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        transition: all 0.1s ease-out;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
+    &__arrow:hover {
+        opacity: 1;
+    }
+
+    &__arrow_direction_left, &__double_arrow_direction_left {
+        float: left;
+    }
+
+    &__arrow_direction_right, &__double_arrow_direction_right {
+        float: right;
+    }
+
+    &__day_type_weekend {
+        font-weight: var(--font-weight-medium);
+    }
+
+    &__day_state_current {
+        position: relative;
+        margin: 0;
+        outline: 0;
+        user-select: none;
+        color: var(--color-accent-content);
+        text-align: center;
+        z-index: 2;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 3px;
+            right: 0;
+            bottom: 2px;
+            left: 0;
+            background: var(--color-accent);
+            border-radius: 14px;
+            z-index: -1;
+        }
+    }
+
+    &__day_type_off,
+    &__day_type_weekend-off {
+        cursor: default;
+        opacity: var(--opacity-minor);
+    }
+
+    &__arrow_disabled {
+        visibility: hidden;
+    }
+
+    &__error {
+        width: 240px;
+        margin: 7px;
+    }
+}

src/calendar/fantasy/calendar_theme_alfa-on-color.css

@@ -0,0 +1,22 @@
+@import '../../vars-fantasy.css';
+
+.calendar_theme_alfa-on-color {
+    color: var(--color-content-alfa-on-color);
+    background-color: var(--color-background-alfa-on-color);
+
+    .calendar__arrow_direction_left {
+        background-image: url(../images/arrow_cl.svg);
+
+        &.calendar__arrow_double {
+            background-image: url(../images/2_arrow_cl.svg);
+        }
+    }
+
+    .calendar__arrow_direction_right {
+        background-image: url(../images/arrow_cr.svg);
+
+        &.calendar__arrow_double {
+            background-image: url(../images/2_arrow_cr.svg);
+        }
+    }
+}

src/calendar/fantasy/calendar_theme_alfa-on-white.css

@@ -0,0 +1,22 @@
+@import '../../vars-fantasy.css';
+
+.calendar_theme_alfa-on-white {
+    color: var(--color-content-alfa-on-white);
+    background-color: var(--color-background-alfa-on-white);
+
+    .calendar__arrow_direction_left {
+        background-image: url(../images/arrow_wl.svg);
+
+        &.calendar__arrow_double {
+            background-image: url(../images/2_arrow_wl.svg);
+        }
+    }
+
+    .calendar__arrow_direction_right {
+        background-image: url(../images/arrow_wr.svg);
+
+        &.calendar__arrow_double {
+            background-image: url(../images/2_arrow_wr.svg);
+        }
+    }
+}

src/calendar/fantasy/index.js

@@ -0,0 +1,5 @@
+import './calendar.css';
+import './calendar_theme_alfa-on-white.css';
+import './calendar_theme_alfa-on-color.css';
+
+export default from '../calendar';

src/heading/fantasy/README.md

@@ -0,0 +1,9 @@
+```
+<div>
+    <Heading>Heading H1 by default</Heading>
+    <Heading size='s'>Heading H4</Heading>
+    <Heading size='m'>Heading H3</Heading>
+    <Heading size='l'>Heading H2</Heading>
+    <Heading size='xl'>Heading H1</Heading>
+</div>
+```

src/heading/fantasy/heading.css

@@ -0,0 +1,53 @@
+@import '../../vars-fantasy.css';
+
+.heading {
+    font-family: var(--font);
+    font-weight: var(--font-weight-black);
+    line-height: var(--line-height-condensed);
+
+    &_size_s {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: var(--font-size-l);
+    }
+
+    &_size_m {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: var(--font-size-xl);
+
+        @media (--medium) {
+            font-size: var(--font-size-2xl);
+        }
+    }
+
+    &_size_l {
+        margin-top: 30px;
+        margin-bottom: 25px;
+        font-size: var(--font-size-2xl);
+
+        @media (--medium) {
+            font-size: var(--font-size-3xl);
+        }
+    }
+
+    &_size_xl {
+        margin-top: 25px;
+        margin-bottom: 20px;
+        font-size: var(--font-size-3xl);
+
+        @media (--large) {
+            margin-top: 35px;
+            margin-bottom: 30px;
+            font-size: var(--font-size-4xl);
+        }
+    }
+
+    &_theme_alfa-on-color {
+        color: var(--color-content-alfa-on-color);
+    }
+
+    &_theme_alfa-on-white {
+        color: var(--color-content-alfa-on-white);
+    }
+}

src/heading/fantasy/index.js

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

src/heading/heading.jsx

@@ -37,14 +37,13 @@ class Heading extends React.Component {
     };
 
     render(cn) {
-        let headingSize = this.props.size;
         let headingProps = {
             className: cn({
-                size: headingSize
+                size: this.props.size
             })
         };
 
-        return React.createElement(`h${HEADING_LEVEL[headingSize]}`,
+        return React.createElement(`h${HEADING_LEVEL[this.props.size]}`,
             headingProps,
             this.props.children
         );

src/main-fantasy.css

@@ -0,0 +1,36 @@
+/* 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';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: var(--color-content-alfa-on-white);
+    font-family: var(--font);
+    font-size: var(--font-size-m);
+    font-style: normal;
+    font-weight: var(--font-weight-normal);
+    letter-spacing: 0;
+    background-color: var(--color-background-alfa-on-white);
+}
+
+#react-app {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: inherit;
+}

src/vars-fantasy.css

@@ -0,0 +1,18 @@
+/* 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/font.css';
+@import './vars/fantasy/color.css';
+@import './vars/fantasy/color-theme_alfa-on-color.css';
+@import './vars/fantasy/color-theme_alfa-on-white.css';
+@import './vars/fantasy/opacity.css';
+@import './vars/fantasy/border-radius.css';
+@import './vars/fantasy/shadow.css';
+
+:root {
+    --small-screen-padding: 12px;
+    --small-header-height: 80px;
+    --large-screen-content-width: 1000px;
+    --xlarge-screen-content-width: 1100px;
+}

src/vars/fantasy/border-radius.css

@@ -0,0 +1,10 @@
+/* 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/. */
+
+:root {
+    /**
+     * Стандартное скругление углов.
+     */
+    --border-radius-control: 3px;
+}