intelicoreact 0.0.95 → 0.0.98

package/dist/Molecular/Datepicker/Datepicker.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatepickerTemplate = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _yup = require("yup");
+
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en'; // export default {
+//   title: 'Form Elements/Datepicker',
+//   component: Datepicker,
+// };
+
+var Template = function Template(args) {
+  var params = {
+    minDate: args === null || args === void 0 ? void 0 : args.minDate,
+    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
+  };
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
+    data: args.date,
+    params: params
+  });
+};
+
+var DatepickerTemplate = Template.bind({});
+exports.DatepickerTemplate = DatepickerTemplate;
+DatepickerTemplate.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
+};

package/dist/Molecular/Datepicker/components/Calendar.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var Icon = _interopRequireWildcard(require("react-feather"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Calendar = function Calendar(props) {
+  var date = props.date,
+      setDate = props.setDate,
+      startDate = props.startDate,
+      endDate = props.endDate,
+      _props$allowPrev = props.allowPrev,
+      allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
+      _props$allowNext = props.allowNext,
+      allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
+      onClick = props.onClick,
+      onHover = props.onHover,
+      startPrevDate = props.startPrevDate,
+      endPrevDate = props.endPrevDate,
+      limitRange = props.limitRange;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      days = _useState2[0],
+      setDays = _useState2[1];
+
+  var title = (0, _react.useMemo)(function () {
+    return "".concat((0, _moment.default)(date).format('MMM'), " ").concat((0, _moment.default)(date).format('YYYY'));
+  }, [date]);
+  (0, _react.useEffect)(function () {
+    var result = {};
+    var day = (0, _moment.default)(date).startOf('month');
+    var daysInMonth = day.daysInMonth();
+
+    for (var d = 0; d < daysInMonth; d += 1) {
+      var week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
+      }
+
+      result[week][day.weekday()] = {
+        date: day.toDate()
+      };
+      day.add(1, 'd');
+    }
+
+    setDays(result);
+  }, [date]);
+
+  var renderDay = function renderDay(week, dayOfWeek) {
+    var day = days[week][dayOfWeek];
+    var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isPastDay = limitRange ? day && (0, _moment.default)(day.date).isBefore((0, _moment.default)().subtract(limitRange, 'days'), 'day') : null;
+    var isRangeEnd = day && ((0, _moment.default)(day.date).isSame(startDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endDate).subtract(1, 'hour'), 'day'));
+    var isRangeInside = day && startDate && endDate && (0, _moment.default)(day.date).isAfter(startDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endDate).subtract(1, 'hour'), 'day');
+    var isPrevRangeEnd = day && ((0, _moment.default)(day.date).isSame(startPrevDate, 'day') || (0, _moment.default)(day.date).isSame((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day'));
+    var isPrevRangeInside = day && startPrevDate && endPrevDate && (0, _moment.default)(day.date).isAfter(startPrevDate, 'day') && (0, _moment.default)(day.date).isBefore((0, _moment.default)(endPrevDate).subtract(1, 'day'), 'day');
+    var classNames = (0, _classnames.default)('calendar__day', {
+      'calendar__day--clickable': day
+    }, {
+      'calendar__day--disabled': isFutureDay
+    }, {
+      'calendar__day--disabled': isPastDay
+    }, {
+      'calendar__day--range-end': isRangeEnd
+    }, {
+      'calendar__day--range-inside': isRangeInside
+    }, {
+      'calendar__day--prev-range-end': isPrevRangeEnd
+    }, {
+      'calendar__day--prev-range-inside': isPrevRangeInside
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "".concat(week, "_").concat(dayOfWeek),
+      className: classNames,
+      onClick: day && !isFutureDay ? function () {
+        return onClick(day.date);
+      } : null,
+      onMouseOver: day && !isFutureDay ? function () {
+        return onHover(day.date);
+      } : null,
+      onMouseLeave: function onMouseLeave() {
+        return onHover(null);
+      }
+    }, day && day.date.getDate());
+  };
+
+  var handlePrev = function handlePrev() {
+    setDate((0, _moment.default)(date).subtract(1, 'month').toDate());
+  };
+
+  var handleNext = function handleNext() {
+    setDate((0, _moment.default)(date).add(1, 'month').toDate());
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__prev"
+  }, allowPrev && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handlePrev
+  }, /*#__PURE__*/_react.default.createElement(Icon.ChevronLeft, {
+    size: 16
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-header__next"
+  }, allowNext && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleNext
+  }, /*#__PURE__*/_react.default.createElement(Icon.ChevronRight, {
+    size: 16
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar__week"
+  }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "day-of-week_".concat(dayOfWeek),
+      className: "calendar__day calendar__day--title"
+    }, (0, _moment.default)().weekday(dayOfWeek).format('dd').charAt(0));
+  })), Object.keys(days).map(function (week, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "week_".concat(index),
+      className: "calendar__week"
+    }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
+      return renderDay(week, dayOfWeek);
+    }));
+  }));
+};
+
+var _default = Calendar;
+exports.default = _default;

package/dist/Molecular/FormElements/FormElement.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Label = _interopRequireDefault(require("../../Atomic/FormElements/Label/Label"));
+
+require("./FormElement.scss");
+
+var RC = 'form-element';
+
+var FormElement = function FormElement(_ref) {
+  var label = _ref.label,
+      required = _ref.required,
+      children = _ref.children,
+      error = _ref.error,
+      className = _ref.className,
+      hint = _ref.hint;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, RC)
+  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
+    className: "".concat(RC, "__label"),
+    label: label,
+    hint: hint,
+    isRequired: required
+  }), children, error && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(RC, "__error")
+  }, error));
+};
+
+var _default = FormElement;
+exports.default = _default;

package/dist/Molecular/FormElements/FormElement.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputTemplate = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
+
+var _FormElement = _interopRequireDefault(require("./FormElement"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/Form Element',
+  component: _FormElement.default,
+  argTypes: {
+    label: {
+      description: 'string/JSX'
+    },
+    children: {
+      description: 'JSX'
+    },
+    error: {
+      description: 'string - print error if is errored'
+    },
+    required: {
+      description: 'boolean'
+    },
+    className: {
+      description: 'string'
+    },
+    hint: {
+      description: 'object {text: string, hintSide: bottom/right',
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_FormElement.default, args, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    error: args.error
+  }));
+};
+
+var InputTemplate = Template.bind({});
+exports.InputTemplate = InputTemplate;
+InputTemplate.args = {
+  label: 'Text label',
+  error: 'error',
+  required: true,
+  hint: {
+    text: 'hint',
+    hintSide: 'bottom'
+  },
+  numStep: 1,
+  min: '0',
+  max: '5',
+  placeholder: 'Placeholder',
+  mask: ''
+};

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Atomic/UI/Button/Button"));

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.95",
-  "description": "fix input-calendar",
+  "version": "0.0.98",
+  "description": "added softStringMode with string and dot for input, fix logic of start/end-date props (part 5)",
   "main": "dist/index.js",
+  "files": ["dist/*"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "babel src --out-dir dist --copy-files"

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        "regenerator": true
-      }
-    ]
-  ]
-
-}

package/.eslintignore

@@ -1,10 +0,0 @@
-node_modules
-react-backend
-app
-build
-src/JS/store/initialState
-src/vendor.js
-src/JS/store/reducers/
-config/
-*.spec.js
-/.git

package/.eslintrc.json

@@ -1,93 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "jest": true
-  },
-  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "prettier"],
-
-  "rules": {
-    "prettier/prettier": ["error", {"arrowParens": "avoid", "trailingComma": "none"}],
-
-    "import/prefer-default-export": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "no-param-reassign": 0,
-    "jsx-a11y/control-has-associated-label": 0,
-    "import/no-cycle": 0,
-
-    "react/react-in-jsx-scope": 0,
-    "react/jsx-filename-extension": 0,
-    "react/prop-types": 0,
-    "react/jsx-one-expression-per-line": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/no-array-index-key": 0,
-    "react/button-has-type": 0,
-    "react/no-danger": 0
-  },
-
-  "overrides": [
-    {
-      "files": ["**/*.ts", "**/*.tsx"],
-      "env": {
-        "browser": true,
-        "es6": true
-      },
-      "parser": "@typescript-eslint/parser",
-      "plugins": ["react", "@typescript-eslint"],
-      "extends": ["airbnb-typescript", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended"],
-      "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-      },
-      "rules": {
-        "@typescript-eslint/comma-dangle": 0,
-        "linebreak-style": "off",
-        "prettier/prettier": ["error", {"endOfLine": "auto", "arrowParens": "avoid", "trailingComma": "none"}],
-
-        "import/prefer-default-export": 0,
-        "jsx-a11y/click-events-have-key-events": 0,
-        "jsx-a11y/no-static-element-interactions": 0,
-        "no-param-reassign": 0,
-        "jsx-a11y/control-has-associated-label": 0,
-        "import/no-cycle": 0,
-
-        "react/react-in-jsx-scope": 0,
-        "react/jsx-filename-extension": 0,
-        "react/prop-types": 0,
-        "react/jsx-one-expression-per-line": 0,
-        "react/jsx-props-no-spreading": 0,
-        "react/no-array-index-key": 0,
-        "react/button-has-type": 0,
-        "react/no-danger": 0
-      },
-      "parserOptions": {
-        "ecmaFeatures": {
-          "jsx": true
-        },
-        "ecmaVersion": 2020,
-        "sourceType": "module",
-        "project": "./tsconfig.json"
-      },
-      "settings": {
-        "react": {
-          "version": "detect"
-        }
-      }
-    }
-  ]
-}

package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import './CheckboxInput.scss';
-
-const CheckboxInput = ({ label, id, value, onChange, disabled, className, isStark }) => {
-  return (
-    <label className={cn('checkbox-input', className, { [`checkbox-input_disabled`]: disabled })} htmlFor={id}>
-      <div className={cn(`checkbox-input__input`, { [`checkbox-input__input_checked`]: value })}>
-        <input
-          id={id}
-          type="checkbox"
-          className="checkbox-input__checkbox"
-          onChange={(e) => onChange(!value, e)}
-          checked={value}
-          disabled={disabled}
-          ref={(elem) => {
-            if (elem) elem.indeterminate = isStark;
-          }}
-        />
-        <span className="checkbox-input__mark" />
-      </div>
-      {label && <div className="checkbox-input__label">{label}</div>}
-    </label>
-  );
-};
-
-export default CheckboxInput;

package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss

@@ -1,107 +0,0 @@
-.checkbox-input {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &_disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: auto;
-  }
-
-  &:hover {
-    .checkbox-input__input {
-      background-color: rgba(#6b81dd, 0.2);
-    }
-  }
-
-  &__input {
-    position: relative;
-    height: 14px;
-    width: 14px;
-    min-width: 14px;
-    border: 1px solid #9aa0b9;
-    border-radius: 2px;
-    overflow: hidden;
-    margin-right: 5px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    background-color: #ffff;
-
-    &_checked {
-      border-color: #6b81dd;
-    }
-
-    .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
-      display: block;
-    }
-  }
-
-  &__checkbox {
-    opacity: 0;
-    position: absolute;
-    height: 0;
-    width: 0;
-  }
-
-  &__mark {
-    display: none;
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    background-color: #6b81dd;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: -2px;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-      width: 4px;
-      height: 8px;
-      border: solid white;
-      border-radius: 2px;
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-  }
-
-  &__label {
-    font-size: 13px;
-    user-select: none;
-  }
-
-  input[type="checkbox" i] {
-    &:indeterminate {
-      display: block;
-      width: 100%;
-      height: 100%;
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: 100%;
-        height: 100%;
-        background-color: #6b81dd;
-      }
-      &:before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 65%;
-        border: solid white;
-        border-radius: 2px;
-        border-width: 0 2px 2px 0;
-        z-index: 1;
-      }
-    }
-  }
-}

package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import CheckboxInput from './CheckboxInput';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/CheckboxInput',
-  component: CheckboxInput,
-};
-
-const Template = (args) => {
-  const { value: argsValue } = args;
-  const [value, setValue] = useState(argsValue);
-
-  return <CheckboxInput {...args} value={value} onChange={setValue} />;
-};
-
-export const Checkbox = Template.bind({});
-
-Checkbox.args = {
-  label: 'Test label',
-  value: true,
-  disabled: false,
-  forced: false,
-  isStark: true,
-};

package/src/Atomic/FormElements/DateTime/DateTime.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-
-import './DateTime.scss';
-
-const DateTime = ({ className, item }) => {
-  const date = moment(item).format('DD.MM.YYYY');
-  const time = moment(item).format('HH:mm:ss');
-
-  return (
-    <div className={`date-time ${className}`}>
-      <span className="date-time--date">{date}</span>
-      <span className="date-time--time color--pause">{time}</span>
-    </div>
-  );
-};
-
-export default DateTime;

package/src/Atomic/FormElements/DateTime/DateTime.scss

@@ -1,12 +0,0 @@
-.date-time {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: column;
-  font-size: 13px;
-
-  &--date,
-  &--time {
-    font-weight: 400;
-  }
-}