diff --git a/ashes/Makefile b/ashes/Makefile index aaabe92093..10d783f41f 100644 --- a/ashes/Makefile +++ b/ashes/Makefile @@ -1,6 +1,7 @@ include ../makelib header = $(call baseheader, $(1), ashes) + export PATH := $(CURDIR)/node_modules/.bin:$(PATH) SHELL := env PATH=$(PATH) /bin/sh diff --git a/ashes/docs/styles.md b/ashes/docs/styles.md index 2736afc217..e94ff980e5 100644 --- a/ashes/docs/styles.md +++ b/ashes/docs/styles.md @@ -152,3 +152,33 @@ If you need to use global classnames in selectors, which should not be transform ``` Please, try to avoid `:global()` usage. + +### Colors + +We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts), +but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties. +If mockups didn't match them, discuss that with designer. + +To use variables, just import them to your css file: + +```css +@import 'variables.css'; + +.block { + color: #123456; /* prohibited! */ + + color: var(--color-text); /* allowed */ + background-color: var(--bg-grey); +} + +.label { + color: var(--color-additional-text); + background: var(--bg-white); + border: 1px solid var(--color-border); +} + +.clickableText { + color: var(--color-action-text); +} +``` + diff --git a/ashes/package.json b/ashes/package.json index 718e3a251c..410550451e 100644 --- a/ashes/package.json +++ b/ashes/package.json @@ -105,15 +105,16 @@ "node-notifier": "^4.2.3", "nodemon": "^1.11.0", "optimize-css-assets-webpack-plugin": "^1.3.1", - "postcss-assets": "^4.1.0", "postcss-css-variables": "^0.7.0", "postcss-cssnext": "^2.10.0", + "postcss-debug": "^0.4.2", "postcss-import": "^9.1.0", "postcss-loader": "^1.3.3", "postcss-mixins": "^5.4.1", "postcss-modules-local-by-default": "^1.0.1", "postcss-modules-scope": "^1.0.0", "postcss-nested": "^1.0.1", + "postcss-url": "^7.0.0", "prettier": "^1.4.4", "prop-types": "^15.5.8", "query-string": "^4.3.4", @@ -143,6 +144,7 @@ "run-sequence": "^1.2.2", "simulant": "^0.2.2", "sinon": "^1.16.1", + "smoothscroll-polyfill": "^0.3.5", "sprout-data": "^0.2.3", "strip-ansi": "^3.0.0", "style-loader": "^0.16.1", diff --git a/ashes/postcss.config.js b/ashes/postcss.config.js index ebb33c9dde..31c984442f 100644 --- a/ashes/postcss.config.js +++ b/ashes/postcss.config.js @@ -31,9 +31,9 @@ const plugins = [ require('postcss-import')({ path: ['src/css', 'node_modules'], }), - require('postcss-assets')({ - loadPaths: ['src/images/'], - }), + require('postcss-url')({ url: 'inline', maxSize: 4 }), + // @todo remove second `postcss-url` after https://github.com/postcss/postcss-url/issues/104 + require('postcss-url')({ url: 'rebase', to: './src' }), require('postcss-cssnext')({ features: { @@ -51,4 +51,10 @@ const plugins = [ }), ]; -exports.plugins = plugins; +// uncomment and then +// ./node_modules/.bin/postcss-debug -c ./postcss.config.js ./styleguide/styleguide.css +// module.exports = function(postcss) { +// return postcss(plugins); +// }; + +module.exports.plugins = plugins; diff --git a/ashes/src/components/activity-notifications/block.css b/ashes/src/components/activity-notifications/block.css index a9ca36b4df..729fcd93c8 100644 --- a/ashes/src/components/activity-notifications/block.css +++ b/ashes/src/components/activity-notifications/block.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { height: 100%; diff --git a/ashes/src/components/activity-notifications/indicator.css b/ashes/src/components/activity-notifications/indicator.css index e8defefa4d..339e1785b8 100644 --- a/ashes/src/components/activity-notifications/indicator.css +++ b/ashes/src/components/activity-notifications/indicator.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { width: 85px; @@ -34,10 +34,14 @@ } .toggle { + display: flex; + justify-content: center; + align-items: center; position: relative; color: var(--color-additional-text); background-color: transparent; height: 100%; + cursor: pointer; & i { vertical-align: sub; diff --git a/ashes/src/components/activity-notifications/indicator.jsx b/ashes/src/components/activity-notifications/indicator.jsx index fdf15bd520..1506d67e25 100644 --- a/ashes/src/components/activity-notifications/indicator.jsx +++ b/ashes/src/components/activity-notifications/indicator.jsx @@ -5,9 +5,7 @@ import _ from 'lodash'; import React, { Component } from 'react'; import classNames from 'classnames'; import { autobind } from 'core-decorators'; - -// components -import { Button } from 'components/core/button'; +import Icon from 'components/core/icon'; // styles import s from './indicator.css'; @@ -61,9 +59,13 @@ export default class NotificationIndicator extends Component { return (
- +
); } diff --git a/ashes/src/components/activity-notifications/item.css b/ashes/src/components/activity-notifications/item.css index a3b81a6e1e..9ac6902511 100644 --- a/ashes/src/components/activity-notifications/item.css +++ b/ashes/src/components/activity-notifications/item.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { padding: 10px; diff --git a/ashes/src/components/activity-notifications/item.jsx b/ashes/src/components/activity-notifications/item.jsx index aae195ea00..b4f936d46a 100644 --- a/ashes/src/components/activity-notifications/item.jsx +++ b/ashes/src/components/activity-notifications/item.jsx @@ -6,7 +6,7 @@ import React from 'react'; import classNames from 'classnames'; // components -import { DateTime } from '../common/datetime'; +import { DateTime } from 'components/utils/datetime'; import AuthorTitle from '../activity-trail/activities/base/author-title'; import AuthorIcon from '../activity-trail/activities/base/author-icon'; import { representatives } from '../activity-trail/activities/index'; diff --git a/ashes/src/components/activity-notifications/item.md b/ashes/src/components/activity-notifications/item.md index 601edad03b..58a675cc47 100644 --- a/ashes/src/components/activity-notifications/item.md +++ b/ashes/src/components/activity-notifications/item.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript diff --git a/ashes/src/components/activity-notifications/panel.css b/ashes/src/components/activity-notifications/panel.css index 937b718e59..2f21a3429b 100644 --- a/ashes/src/components/activity-notifications/panel.css +++ b/ashes/src/components/activity-notifications/panel.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .markAll { width: 310px; diff --git a/ashes/src/components/activity-notifications/panel.md b/ashes/src/components/activity-notifications/panel.md index 5e2976eab3..e086d0d8de 100644 --- a/ashes/src/components/activity-notifications/panel.md +++ b/ashes/src/components/activity-notifications/panel.md @@ -1,5 +1,3 @@ ``` -
- -
+ ``` diff --git a/ashes/src/components/activity-trail/activities/base/activity.jsx b/ashes/src/components/activity-trail/activities/base/activity.jsx index d46224ee1e..4f6d68dff7 100644 --- a/ashes/src/components/activity-trail/activities/base/activity.jsx +++ b/ashes/src/components/activity-trail/activities/base/activity.jsx @@ -7,7 +7,7 @@ import classNames from 'classnames'; // components import { Button } from 'components/core/button'; -import { Time } from '../../../common/datetime'; +import { Time } from 'components/utils/datetime'; import AuthorTitle from './author-title'; import AuthorIcon from './author-icon'; diff --git a/ashes/src/components/activity-trail/activities/gift-cards/index.jsx b/ashes/src/components/activity-trail/activities/gift-cards/index.jsx index 8d213b35be..32949b452d 100644 --- a/ashes/src/components/activity-trail/activities/gift-cards/index.jsx +++ b/ashes/src/components/activity-trail/activities/gift-cards/index.jsx @@ -7,7 +7,7 @@ import { joinEntities } from '../base/utils'; // components import GiftCardLink from '../base/gift-card-link'; import CordTarget from '../base/cord-target'; -import Currency from '../../../common/currency'; +import Currency from 'components/utils/currency'; import Title from '../base/title'; const authorizedAndCapturedDesc = { diff --git a/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx b/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx index 245ca7d5b5..85099b8a73 100644 --- a/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx +++ b/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import types from '../base/types'; import CordTarget from '../base/cord-target'; -import Currency from '../../../common/currency'; +import Currency from 'components/utils/currency'; import GiftCardLink from '../base/gift-card-link'; import Title from '../base/title'; diff --git a/ashes/src/components/activity-trail/activities/store-credits/index.jsx b/ashes/src/components/activity-trail/activities/store-credits/index.jsx index 3c3da52fe2..520a16e54c 100644 --- a/ashes/src/components/activity-trail/activities/store-credits/index.jsx +++ b/ashes/src/components/activity-trail/activities/store-credits/index.jsx @@ -6,7 +6,7 @@ import types from '../base/types'; // components import GiftCardLink from '../base/gift-card-link'; import CordTarget from '../base/cord-target'; -import Currency from '../../../common/currency'; +import Currency from 'components/utils/currency'; import Title from '../base/title'; const representatives = { diff --git a/ashes/src/components/addresses/address-form/address-form.jsx b/ashes/src/components/addresses/address-form/address-form.jsx index 32a5db301a..129a911d74 100644 --- a/ashes/src/components/addresses/address-form/address-form.jsx +++ b/ashes/src/components/addresses/address-form/address-form.jsx @@ -212,7 +212,7 @@ export default class AddressForm extends React.Component { return res; }, - this.props.address + { ...this.props.address } ); submitAction(formData); diff --git a/ashes/src/components/analytics/analytics.jsx b/ashes/src/components/analytics/analytics.jsx index 1fa3002d6c..b8f177aba8 100644 --- a/ashes/src/components/analytics/analytics.jsx +++ b/ashes/src/components/analytics/analytics.jsx @@ -12,7 +12,7 @@ import Spinner from 'components/core/spinner'; import { ApiErrors } from 'components/utils/errors'; import QuestionBoxList from './question-box-list'; import type { Props as QuestionBoxType } from './question-box'; -import Currency from '../common/currency'; +import Currency from 'components/utils/currency'; import TrendButton, { TrendType } from './trend-button'; import StaticColumnSelector from './static-column-selector'; import { Dropdown } from '../dropdown'; diff --git a/ashes/src/components/analytics/question-box.css b/ashes/src/components/analytics/question-box.css index 9d6882cbac..2bb0e6a00f 100644 --- a/ashes/src/components/analytics/question-box.css +++ b/ashes/src/components/analytics/question-box.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .question-box-container-active { width: 225px; diff --git a/ashes/src/components/analytics/segment-control-list.css b/ashes/src/components/analytics/segment-control-list.css index 532efb869f..a0a645a6fb 100644 --- a/ashes/src/components/analytics/segment-control-list.css +++ b/ashes/src/components/analytics/segment-control-list.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .segment-control-list-legend { margin-top: 51px; diff --git a/ashes/src/components/analytics/segment-control.css b/ashes/src/components/analytics/segment-control.css index 411ed76c54..a4cf75a3a7 100644 --- a/ashes/src/components/analytics/segment-control.css +++ b/ashes/src/components/analytics/segment-control.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .segment-control-container-active { width: 66px; diff --git a/ashes/src/components/analytics/static-column-selector.css b/ashes/src/components/analytics/static-column-selector.css index 9e7d50f012..63b5e19c26 100644 --- a/ashes/src/components/analytics/static-column-selector.css +++ b/ashes/src/components/analytics/static-column-selector.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .column-selector { position: relative; diff --git a/ashes/src/components/analytics/trend-button.css b/ashes/src/components/analytics/trend-button.css index 63e0c47d75..2ecbeec5b6 100644 --- a/ashes/src/components/analytics/trend-button.css +++ b/ashes/src/components/analytics/trend-button.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .trend-button-container-gain { display: inline-block; diff --git a/ashes/src/components/auth/css/auth.css b/ashes/src/components/auth/css/auth.css index 9d4555f4df..5f03cc5ab5 100644 --- a/ashes/src/components/auth/css/auth.css +++ b/ashes/src/components/auth/css/auth.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .title { font-size: 20px; diff --git a/ashes/src/components/auth/css/wrap-to-lines.css b/ashes/src/components/auth/css/wrap-to-lines.css index 3c3f7d9468..b378c9ed3b 100644 --- a/ashes/src/components/auth/css/wrap-to-lines.css +++ b/ashes/src/components/auth/css/wrap-to-lines.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/bulk-actions/modal/modal.css b/ashes/src/components/bulk-actions/modal/modal.css index b113cad9cd..957a3d391f 100644 --- a/ashes/src/components/bulk-actions/modal/modal.css +++ b/ashes/src/components/bulk-actions/modal/modal.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .cancelReason { margin: 30px 0 0; diff --git a/ashes/src/components/carts/line-item.jsx b/ashes/src/components/carts/line-item.jsx index 3a7a0ed920..6972c24bdf 100644 --- a/ashes/src/components/carts/line-item.jsx +++ b/ashes/src/components/carts/line-item.jsx @@ -12,7 +12,7 @@ import { Link } from 'components/link'; import ConfirmationModal from 'components/core/confirmation-modal'; import Counter from 'components/core/counter'; import { DeleteButton } from 'components/core/button'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import ProductImage from 'components/imgix/product-image'; // actions diff --git a/ashes/src/components/carts/sku-result.jsx b/ashes/src/components/carts/sku-result.jsx index 524c814f37..9129677ed2 100644 --- a/ashes/src/components/carts/sku-result.jsx +++ b/ashes/src/components/carts/sku-result.jsx @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; -import Currency from '../common/currency'; +import Currency from 'components/utils/currency'; import ProductImage from 'components/imgix/product-image'; type Props = { diff --git a/ashes/src/components/common/currency.jsx b/ashes/src/components/common/currency.jsx deleted file mode 100644 index a8c2238e6c..0000000000 --- a/ashes/src/components/common/currency.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import formatCurrency from '../../lib/format-currency'; - -const Currency = (props) => { - const {isTransaction, id, ...rest} = props; - const className = classNames('fc-currency', { - '_transaction': isTransaction, - '_negative': parseInt(props.value, 10) < 0 - }); - - return ( - - {formatCurrency(props.value, {...rest})} - - ); -}; - -Currency.propTypes = { - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - fractionBase: PropTypes.number, - currency: PropTypes.string, - bigNumber: PropTypes.bool, - isTransaction: PropTypes.bool, -}; - -Currency.defaultProps = { - fractionBase: 2, - currency: 'USD', - bigNumber: false -}; - -export default Currency; diff --git a/ashes/src/components/common/datetime.jsx b/ashes/src/components/common/datetime.jsx deleted file mode 100644 index 084c44deb7..0000000000 --- a/ashes/src/components/common/datetime.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import moment from 'moment'; - -const Moment = ({ utc, value, format, emptyValue }) => { - if (!value) { - return {emptyValue}; - } - - const timeValue = utc ? moment.utc(value) : moment(value); - - return ( - - ); -}; - -Moment.propTypes = { - utc: PropTypes.bool, - value: PropTypes.string, - format: PropTypes.string, - emptyValue: PropTypes.string, -}; - -Moment.defaultProps = { - format: 'L LTS', - utc: true, - emptyValue: 'not set', -}; - -const DateTime = props => ; - -DateTime.propTypes = { - utc: PropTypes.bool, - value: PropTypes.string, -}; - -DateTime.defaultProps = { - utc: true, -}; - -const Date = props => ; - -Date.propTypes = { - utc: PropTypes.bool, - value: PropTypes.string, -}; - -Date.defaultProps = { - utc: true, -}; - -const Time = props => ; - -Time.propTypes = { - utc: PropTypes.bool, - value: PropTypes.string, -}; - -Time.defaultProps = { - utc: true, -}; - -export { Moment, DateTime, Date, Time }; diff --git a/ashes/src/components/common/totals.jsx b/ashes/src/components/common/totals.jsx index d4ec08d636..0bf11471ee 100644 --- a/ashes/src/components/common/totals.jsx +++ b/ashes/src/components/common/totals.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import _ from 'lodash'; import ContentBox from '../content-box/content-box'; -import Currency from './currency'; +import Currency from 'components/utils/currency'; const TotalsFooter = props => { const { entityType } = props.entity; diff --git a/ashes/src/components/core/alert/alert.css b/ashes/src/components/core/alert/alert.css index aed3e3986e..6c4a7fd0ab 100644 --- a/ashes/src/components/core/alert/alert.css +++ b/ashes/src/components/core/alert/alert.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .alert { position: relative; @@ -10,8 +10,7 @@ } .message { - font-size: 13px; - line-height: 18px; + font: var(--font-body); flex: 1 1 auto; } diff --git a/ashes/src/components/core/alert/alert.md b/ashes/src/components/core/alert/alert.md index 179863c9cc..c00887ab5e 100644 --- a/ashes/src/components/core/alert/alert.md +++ b/ashes/src/components/core/alert/alert.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Alert from 'components/core/alert'; @@ -29,7 +29,7 @@ class Alerts extends React.Component { render() { return ( -
+
Fetched successfully diff --git a/ashes/src/components/core/button-with-menu/button-with-menu.css b/ashes/src/components/core/button-with-menu/button-with-menu.css index 07d8781507..e93ef3392f 100644 --- a/ashes/src/components/core/button-with-menu/button-with-menu.css +++ b/ashes/src/components/core/button-with-menu/button-with-menu.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .button { display: inline-block; diff --git a/ashes/src/components/core/button-with-menu/button-with-menu.md b/ashes/src/components/core/button-with-menu/button-with-menu.md index a4296d5aa4..0f5dca1605 100644 --- a/ashes/src/components/core/button-with-menu/button-with-menu.md +++ b/ashes/src/components/core/button-with-menu/button-with-menu.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import { ButtonWithMenu } from 'components/core/button-with-menu'; @@ -26,12 +26,16 @@ import { ButtonWithMenu } from 'components/core/button-with-menu'; const items=[['id1', 'Save and Exit'], ['id2', 'Save and Duplicate']];
- - - -
- - - +
+ + + +
+
+ +
+ + +
``` diff --git a/ashes/src/components/core/button/button.css b/ashes/src/components/core/button/button.css index cd5d8abd19..29b7a42e45 100644 --- a/ashes/src/components/core/button/button.css +++ b/ashes/src/components/core/button/button.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; /* * General Button Styles @@ -8,12 +8,10 @@ display: inline-flex; /* not just `flex` because of legacy */ align-items: center; justify-content: center; - padding: 11px 20px; + padding: 10px 20px; color: var(--color-text); background: var(--bg-grey-buttons); - font-size: 14px; - font-weight: 600; - line-height: 18px; + font: var(--font-labels); border: none; vertical-align: top; user-select: none; @@ -37,7 +35,7 @@ &.onlyIcon { width: 40px; - padding: 11px 0; + padding: 10px 0; } &.fullWidth { @@ -46,7 +44,7 @@ } &.small { - padding: 4px 5px; + padding: 3px 5px; } &.small.onlyIcon { @@ -54,17 +52,12 @@ } } -.icon { +.icon:not(.only) { font-size: 10px; transition: all .2s; } -.button:not(.onlyIcon) i[class*="icon-"] { - margin-bottom: -1px; -} - .only { - font-size: 14px; margin: 0 auto; } diff --git a/ashes/src/components/core/button/button.md b/ashes/src/components/core/button/button.md index 350abb654c..0300deda2d 100644 --- a/ashes/src/components/core/button/button.md +++ b/ashes/src/components/core/button/button.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript
``` @@ -48,9 +52,11 @@ import { PrimaryButton } from 'components/core/button' ```
- Push Me - Loading... - Disabled +
+ Push Me + Loading... + Disabled +
Push Me
``` @@ -63,10 +69,12 @@ import { LeftButton } from 'components/core/button' ```
- Left - Left - Left - +
+ Left + Left + Left + +
``` @@ -78,10 +86,12 @@ import { RightButton } from 'components/core/button' ```
- Right - Right - Right - +
+ Right + Right + Right + +
``` @@ -93,10 +103,12 @@ import { DecrementButton } from 'components/core/button' ```
- Less - Less - Less - +
+ Less + Less + Less + +
``` @@ -108,10 +120,12 @@ import { IncrementButton } from 'components/core/button' ```
- More - More - More - +
+ More + More + More + +
``` @@ -123,10 +137,12 @@ import { AddButton } from 'components/core/button' ```
- Add - Add - Add - +
+ Add + Add + Add + +
``` @@ -138,10 +154,12 @@ import { EditButton } from 'components/core/button' ```
- Edit - Edit - Edit - +
+ Edit + Edit + Edit + +
``` @@ -153,10 +171,12 @@ import { DeleteButton } from 'components/core/button' ```
- Delete - Delete - Delete - +
+ Delete + Delete + Delete + +
``` @@ -168,9 +188,11 @@ import { SocialButton } from 'components/core/button' ```
- Social - Social - Social - +
+ Social + Social + Social + +
``` diff --git a/ashes/src/components/core/checkbox/checkbox.css b/ashes/src/components/core/checkbox/checkbox.css index 3cd2d2fa39..93fd5e9c0b 100644 --- a/ashes/src/components/core/checkbox/checkbox.css +++ b/ashes/src/components/core/checkbox/checkbox.css @@ -1,17 +1,12 @@ -@import 'colors.css'; +@import 'variables.css'; .checkbox { display: inline-flex; align-items: center; + font: var(--font-nav); & input { - position: absolute; - width: 24px; - height: 24px; - margin: 0; - padding: 0; - font-size: 1rem; - opacity: 0; + display: none; } & .label { @@ -21,7 +16,6 @@ justify-content: flex-start; width: 100%; height: 100%; - font-size: 13px; color: var(--color-text); } @@ -46,8 +40,6 @@ left: 2px; width: 20px; height: 20px; - font-size: 12px; - font-weight: 500; line-height: 20px; text-align: center; font-family: "fontello"; @@ -151,7 +143,6 @@ width: 36px; height: 36px; font-size: 24px; - font-weight: 400; line-height: 36px; color: var(--color-light-text); transform: scale(1) translateY(-50%); @@ -160,10 +151,6 @@ & input:checked + .label::after { background: var(--bg-nav-main); } - - & .label { - line-height: 40px; - } } .slideCheckbox { @@ -184,9 +171,7 @@ padding: 0 10px; text-align: right; color: var(--color-light-text); - font-size: 16px; - font-weight: 500; - line-height: 34px; + font: var(--font-section-title); user-select: none; cursor: pointer; } @@ -203,13 +188,10 @@ border: none; border-radius: 17px; transition: all .4s ease; - padding: 0 10px; + padding: 6px 10px 0; text-indent: -42px; text-align: left; color: var(--color-light-text); - font-size: 16px; - font-weight: 500; - line-height: 34px; } & .label::after { @@ -217,13 +199,13 @@ position: absolute; left: 5px; top: 5px; + padding-top: 1px; width: 24px; height: 24px; background: var(--bg-white); border-radius: 17px; transition: all .4s ease; text-indent: 42px; - line-height: 24px; } & input { diff --git a/ashes/src/components/core/checkbox/checkbox.md b/ashes/src/components/core/checkbox/checkbox.md index 910abc9724..e9ef1078f8 100644 --- a/ashes/src/components/core/checkbox/checkbox.md +++ b/ashes/src/components/core/checkbox/checkbox.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript


- +
Checkbox in table cell
@@ -71,7 +71,7 @@ import { SliderCheckbox } from 'components/core/checkbox' ```
-
-
+ +
``` diff --git a/ashes/src/components/core/confirmation-modal/confirmation-modal.md b/ashes/src/components/core/confirmation-modal/confirmation-modal.md index 92a04c079e..91311189c4 100644 --- a/ashes/src/components/core/confirmation-modal/confirmation-modal.md +++ b/ashes/src/components/core/confirmation-modal/confirmation-modal.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import ConfirmationModal from 'components/core/confirmation-modal'; diff --git a/ashes/src/components/core/countdown/countdown.css b/ashes/src/components/core/countdown/countdown.css index fe56a59087..7e0ac7321a 100644 --- a/ashes/src/components/core/countdown/countdown.css +++ b/ashes/src/components/core/countdown/countdown.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .countdown { display: inline-block; diff --git a/ashes/src/components/core/countdown/countdown.md b/ashes/src/components/core/countdown/countdown.md index 9d45b51be1..28e853f0b1 100644 --- a/ashes/src/components/core/countdown/countdown.md +++ b/ashes/src/components/core/countdown/countdown.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Countdown from 'components/core/countdown'; @@ -14,30 +14,32 @@ import Countdown from 'components/core/countdown'; const moment = require('moment');
- - - - - - - - - +
+ + + + + + + + + +
``` diff --git a/ashes/src/components/core/counter/counter.css b/ashes/src/components/core/counter/counter.css index 2b007950fe..d627bfc0f8 100644 --- a/ashes/src/components/core/counter/counter.css +++ b/ashes/src/components/core/counter/counter.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .counter { display: inline-flex; diff --git a/ashes/src/components/core/counter/counter.md b/ashes/src/components/core/counter/counter.md index e82e0a21e0..26d0291533 100644 --- a/ashes/src/components/core/counter/counter.md +++ b/ashes/src/components/core/counter/counter.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Counter from 'components/core/counter'; @@ -27,7 +27,7 @@ class CounterExample extends React.Component { render() { return ( -
+
this.handleChange('value1', v)} diff --git a/ashes/src/components/core/icon/icon.jsx b/ashes/src/components/core/icon/icon.jsx index b48a9ca514..1fece8f70f 100644 --- a/ashes/src/components/core/icon/icon.jsx +++ b/ashes/src/components/core/icon/icon.jsx @@ -18,6 +18,7 @@ type Props = { const Icon = (props: Props) => { const { name, className, ...rest } = props; const iconCls = classNames(className, `icon-${name}`); + return ; }; diff --git a/ashes/src/components/core/icon/icon.md b/ashes/src/components/core/icon/icon.md index 9474ce8e9e..6ae28e641f 100644 --- a/ashes/src/components/core/icon/icon.md +++ b/ashes/src/components/core/icon/icon.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Icon from 'components/core/icon'; @@ -10,9 +10,11 @@ import Icon from 'components/core/icon'; ```
- - - - +
+ + + + +
``` diff --git a/ashes/src/components/core/modal-container/modal-container.css b/ashes/src/components/core/modal-container/modal-container.css index 5159a4c281..aa87c9a27b 100644 --- a/ashes/src/components/core/modal-container/modal-container.css +++ b/ashes/src/components/core/modal-container/modal-container.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .container { position: fixed; diff --git a/ashes/src/components/core/modal-container/modal-container.md b/ashes/src/components/core/modal-container/modal-container.md index cec7fe2f2f..9257d010dd 100644 --- a/ashes/src/components/core/modal-container/modal-container.md +++ b/ashes/src/components/core/modal-container/modal-container.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import ModalContainer from 'components/core/modal-container'; diff --git a/ashes/src/components/core/modal/modal.css b/ashes/src/components/core/modal/modal.css index 5d2777d3f7..df49b1714e 100644 --- a/ashes/src/components/core/modal/modal.css +++ b/ashes/src/components/core/modal/modal.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .modal { min-width: 640px; @@ -29,9 +29,7 @@ background-color: var(--bg-grey-headers); border-bottom: 1px solid var(--color-border); padding: 18px 20px 17px; - font-size: 16px; - line-height: 24px; - font-weight: 600; + font: var(--font-section-title); } .title {} /* stylelint-disable-line */ @@ -48,9 +46,7 @@ .body { width: 100%; padding: 20px; - font-size: 15px; - font-weight: 400; - line-height: 18px; + font: var(--font-nav); text-align: left; .modal.big & { diff --git a/ashes/src/components/core/modal/modal.md b/ashes/src/components/core/modal/modal.md index 65033fdde6..a4b90b89ef 100644 --- a/ashes/src/components/core/modal/modal.md +++ b/ashes/src/components/core/modal/modal.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Modal from 'components/core/modal'; diff --git a/ashes/src/components/core/page-nav/page-nav.css b/ashes/src/components/core/page-nav/page-nav.css index 8f20b24861..a721f95d8b 100644 --- a/ashes/src/components/core/page-nav/page-nav.css +++ b/ashes/src/components/core/page-nav/page-nav.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { position: relative; @@ -10,7 +10,7 @@ } .item { - font-size: 14px; + font: var(--font-nav); color: var(--color-text); display: inline-block; vertical-align: top; @@ -94,7 +94,7 @@ display: block; width: 100%; margin: 0; - font-weight: 600; + font: var(--font-labels); transition: all .2s; } @@ -104,8 +104,7 @@ .dropdown .item a { display: block; - padding: 11px 20px; - line-height: 18px; + padding: 10px 20px; } .dropdown .item a:hover { diff --git a/ashes/src/components/core/page-nav/page-nav.md b/ashes/src/components/core/page-nav/page-nav.md index 7a9d9d1b47..539a8055c9 100644 --- a/ashes/src/components/core/page-nav/page-nav.md +++ b/ashes/src/components/core/page-nav/page-nav.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript diff --git a/ashes/src/components/core/radio-button/radio-button.css b/ashes/src/components/core/radio-button/radio-button.css index 78b33c2cb6..dae7c2e347 100644 --- a/ashes/src/components/core/radio-button/radio-button.css +++ b/ashes/src/components/core/radio-button/radio-button.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .radio { input[type=radio]:not(old) { /* stylelint-disable-line */ @@ -29,12 +29,15 @@ } } +.input { + display: none; +} + .label { position: relative; - display: inline-block; - margin-left: -24px; - line-height: 24px; - font-size: 13px; + display: flex; + align-items: center; + font: var(--font-nav); color: var(--color-text); &::before { @@ -42,11 +45,10 @@ display: inline-block; height: 24px; width: 24px; - margin: .25em .5em .25em .25em; + margin: 4px 8px 4px 4px; border: 2px solid var(--color-border); - border-radius: 13px; + border-radius: 50%; background: var(--bg-grey-headers); - vertical-align: middle; transition: all .2s; } @@ -56,10 +58,10 @@ position: absolute; height: 16px; width: 16px; - margin: .25em; + margin: 4px; top: 4px; left: 4px; - border-radius: 9px; + border-radius: 50%; background: var(--bg-nav-main); z-index: 1; opacity: 0; diff --git a/ashes/src/components/core/radio-button/radio-button.jsx b/ashes/src/components/core/radio-button/radio-button.jsx index 2c4777019f..ab7671f93d 100644 --- a/ashes/src/components/core/radio-button/radio-button.jsx +++ b/ashes/src/components/core/radio-button/radio-button.jsx @@ -32,7 +32,7 @@ const RadioButton = (props: Props) => { return (
- +
); diff --git a/ashes/src/components/core/radio-button/radio-button.md b/ashes/src/components/core/radio-button/radio-button.md index b149a55df6..e2a558f274 100644 --- a/ashes/src/components/core/radio-button/radio-button.md +++ b/ashes/src/components/core/radio-button/radio-button.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import RadioButton from 'components/core/radio-button'; @@ -19,6 +19,5 @@ import RadioButton from 'components/core/radio-button'; -
``` diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.css b/ashes/src/components/core/rounded-pill/rounded-pill.css index d43b87df7d..134587d906 100644 --- a/ashes/src/components/core/rounded-pill/rounded-pill.css +++ b/ashes/src/components/core/rounded-pill/rounded-pill.css @@ -1,13 +1,12 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .main { display: inline-flex; align-items: stretch; vertical-align: top; min-height: 32px; - font-size: 12px; - line-height: 16px; + font: var(--font-body); color: var(--color-light-text); background-color: var(--bg-nav-main); border-radius: 16px; @@ -38,21 +37,21 @@ } .label { - padding: 8px 15px; + padding: 7px 14px; border-radius: 17px; transition: background .2s; .closable & { border-radius: 17px 0 0 17px; } + + .main.closable & { + padding-right: 8px; + padding-left: 10px; + } } .main.clickable:not(.loading) .label:hover { background-color: var(--bg-nav-active); cursor: pointer; } - -.main.closable .label { - padding-right: 8px; - padding-left: 10px; -} diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.md b/ashes/src/components/core/rounded-pill/rounded-pill.md index 4a40d59c4c..95e9629c27 100644 --- a/ashes/src/components/core/rounded-pill/rounded-pill.md +++ b/ashes/src/components/core/rounded-pill/rounded-pill.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript - - {}} value={1} /> - alert('clicked')} /> - {}} value={1} /> - alert('clicked')} onClose={() => {}} value={1} /> - {}} value={1}> - filter - +
+ + {}} value={1} /> + alert('clicked')} /> + {}} value={1} /> + alert('clicked')} onClose={() => {}} value={1} /> + {}} value={1}> + filter + +
``` diff --git a/ashes/src/components/core/save-cancel/save-cancel.md b/ashes/src/components/core/save-cancel/save-cancel.md index 41dbde9487..a8fd2a2dad 100644 --- a/ashes/src/components/core/save-cancel/save-cancel.md +++ b/ashes/src/components/core/save-cancel/save-cancel.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript diff --git a/ashes/src/components/core/svg-icon/svg-icon.md b/ashes/src/components/core/svg-icon/svg-icon.md index 619f832ebe..3e2820aa4c 100644 --- a/ashes/src/components/core/svg-icon/svg-icon.md +++ b/ashes/src/components/core/svg-icon/svg-icon.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import SvgIcon from 'components/core/svg-icon'; diff --git a/ashes/src/components/core/swatch-input/swatch-input.css b/ashes/src/components/core/swatch-input/swatch-input.css index e71dd0fa01..0412361324 100644 --- a/ashes/src/components/core/swatch-input/swatch-input.css +++ b/ashes/src/components/core/swatch-input/swatch-input.css @@ -1,28 +1,26 @@ -@import 'colors.css'; +@import 'variables.css'; .swatchInput { display: flex; + align-items: stretch; + font: var(--font-nav); &::before { content: "#"; position: absolute; - padding: 0 10px; - line-height: 40px; - font-size: 20px; + padding: 10px; color: var(--color-additional-text); } & .input { width: 130px; - height: 40px; - padding-left: 30px; + padding-left: 26px; text-transform: uppercase; } } .swatch { width: 40px; - height: 40px; border: 1px solid var(--color-border); border-left: none; } diff --git a/ashes/src/components/core/swatch-input/swatch-input.md b/ashes/src/components/core/swatch-input/swatch-input.md index a30add2899..9bdb01e684 100644 --- a/ashes/src/components/core/swatch-input/swatch-input.md +++ b/ashes/src/components/core/swatch-input/swatch-input.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript diff --git a/ashes/src/components/core/text-input/text-input.css b/ashes/src/components/core/text-input/text-input.css index 099a8d8b52..dacfc0b861 100644 --- a/ashes/src/components/core/text-input/text-input.css +++ b/ashes/src/components/core/text-input/text-input.css @@ -1,11 +1,11 @@ -@import 'colors.css'; +@import 'variables.css'; .input { padding: 10px; border: 1px solid var(--color-border); transition: all .2s; outline: none; - font-size: 13px; + font: var(--font-nav); &[disabled] { background-color: var(--bg-grey-headers); diff --git a/ashes/src/components/core/text-input/text-input.md b/ashes/src/components/core/text-input/text-input.md index 12ea2ce625..ac6931792b 100644 --- a/ashes/src/components/core/text-input/text-input.md +++ b/ashes/src/components/core/text-input/text-input.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import { TextInput } from 'components/core/text-input' diff --git a/ashes/src/components/core/text-mask/text-mask.md b/ashes/src/components/core/text-mask/text-mask.md index 58f1705e68..518af8b6aa 100644 --- a/ashes/src/components/core/text-mask/text-mask.md +++ b/ashes/src/components/core/text-mask/text-mask.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript @@ -15,14 +15,22 @@ const phoneArrMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', const strMask = '(999) 999 99 99';
- - - - - - - - - +
+ + + + +
+ +
+ + + + +
+ +
+ +
``` diff --git a/ashes/src/components/coupons-panel/coupons-panel.css b/ashes/src/components/coupons-panel/coupons-panel.css index 19b108c5db..2a535a3742 100644 --- a/ashes/src/components/coupons-panel/coupons-panel.css +++ b/ashes/src/components/coupons-panel/coupons-panel.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .coupons-panel { & td { diff --git a/ashes/src/components/coupons/form.css b/ashes/src/components/coupons/form.css index 6a6d5e7a8e..15c75e226b 100644 --- a/ashes/src/components/coupons/form.css +++ b/ashes/src/components/coupons/form.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .field-label { font-weight: 600; diff --git a/ashes/src/components/coupons/form/styles.css b/ashes/src/components/coupons/form/styles.css index 6165747c3c..c92bc28110 100644 --- a/ashes/src/components/coupons/form/styles.css +++ b/ashes/src/components/coupons/form/styles.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .form-subset { margin-left: 35px; diff --git a/ashes/src/components/customers-groups/editor/inputs/index.jsx b/ashes/src/components/customers-groups/editor/inputs/index.jsx index 7145b1fead..c45c2b3441 100644 --- a/ashes/src/components/customers-groups/editor/inputs/index.jsx +++ b/ashes/src/components/customers-groups/editor/inputs/index.jsx @@ -1,4 +1,4 @@ -import currency from './currency'; +import currency from 'components/utils/currency'; import date from './date'; import dropdown from './dropdown'; import lookup from './lookup'; diff --git a/ashes/src/components/customers-groups/editor/labels/currency.jsx b/ashes/src/components/customers-groups/editor/labels/currency.jsx index b6aedbdeec..8f5e873c04 100644 --- a/ashes/src/components/customers-groups/editor/labels/currency.jsx +++ b/ashes/src/components/customers-groups/editor/labels/currency.jsx @@ -7,7 +7,7 @@ import React from 'react'; import { prefix } from 'lib/text-utils'; //components -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import propTypes from '../widgets/propTypes'; type LabelProps = { diff --git a/ashes/src/components/customers-groups/editor/labels/index.jsx b/ashes/src/components/customers-groups/editor/labels/index.jsx index 7145b1fead..c45c2b3441 100644 --- a/ashes/src/components/customers-groups/editor/labels/index.jsx +++ b/ashes/src/components/customers-groups/editor/labels/index.jsx @@ -1,4 +1,4 @@ -import currency from './currency'; +import currency from 'components/utils/currency'; import date from './date'; import dropdown from './dropdown'; import lookup from './lookup'; diff --git a/ashes/src/components/customers-groups/editor/widgets/index.jsx b/ashes/src/components/customers-groups/editor/widgets/index.jsx index 7145b1fead..c45c2b3441 100644 --- a/ashes/src/components/customers-groups/editor/widgets/index.jsx +++ b/ashes/src/components/customers-groups/editor/widgets/index.jsx @@ -1,4 +1,4 @@ -import currency from './currency'; +import currency from 'components/utils/currency'; import date from './date'; import dropdown from './dropdown'; import lookup from './lookup'; diff --git a/ashes/src/components/customers-groups/group-details.jsx b/ashes/src/components/customers-groups/group-details.jsx index 687f21a09d..c5cc33c3da 100644 --- a/ashes/src/components/customers-groups/group-details.jsx +++ b/ashes/src/components/customers-groups/group-details.jsx @@ -38,7 +38,7 @@ import Criterion from './editor/criterion-view'; import CustomerGroupStats from './stats'; import SearchCustomersModal from './customers/search-modal'; import Icon from 'components/core/icon'; -import { DateTime } from 'components/common/datetime'; +import { DateTime } from 'components/utils/datetime'; type State = { criteriaOpen: boolean, diff --git a/ashes/src/components/customers-groups/group-template/styles.css b/ashes/src/components/customers-groups/group-template/styles.css index 485ade5025..d5876a43d2 100644 --- a/ashes/src/components/customers-groups/group-template/styles.css +++ b/ashes/src/components/customers-groups/group-template/styles.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .template { height: 300px; diff --git a/ashes/src/components/customers-groups/select-groups.css b/ashes/src/components/customers-groups/select-groups.css index 325d1bed6b..471b2093b3 100644 --- a/ashes/src/components/customers-groups/select-groups.css +++ b/ashes/src/components/customers-groups/select-groups.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .groups-table { margin-top: 20px; diff --git a/ashes/src/components/customers-groups/stats/stats.css b/ashes/src/components/customers-groups/stats/stats.css index 01ff28346e..71a4f6eda7 100644 --- a/ashes/src/components/customers-groups/stats/stats.css +++ b/ashes/src/components/customers-groups/stats/stats.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .stats { margin-bottom: 40px; diff --git a/ashes/src/components/customers-groups/stats/stats.jsx b/ashes/src/components/customers-groups/stats/stats.jsx index a6caf952aa..1ea46fbae9 100644 --- a/ashes/src/components/customers-groups/stats/stats.jsx +++ b/ashes/src/components/customers-groups/stats/stats.jsx @@ -7,7 +7,7 @@ import React, { Component, Element } from 'react'; // components import { PanelList, PanelListItem } from 'components/panel/panel-list'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import RadioButton from 'components/core/radio-button'; // styles diff --git a/ashes/src/components/customers/groups/groups.css b/ashes/src/components/customers/groups/groups.css index 907648c0be..1532c90e40 100644 --- a/ashes/src/components/customers/groups/groups.css +++ b/ashes/src/components/customers/groups/groups.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .empty { font-size: 16px; diff --git a/ashes/src/components/customers/store-credits/new-store-credit.jsx b/ashes/src/components/customers/store-credits/new-store-credit.jsx index b7312e6fea..8131fd6953 100644 --- a/ashes/src/components/customers/store-credits/new-store-credit.jsx +++ b/ashes/src/components/customers/store-credits/new-store-credit.jsx @@ -16,7 +16,7 @@ import { PageTitle } from '../../section-title'; import FormField from '../../forms/formfield'; import Form from '../../forms/form'; import Dropdown from '../../dropdown/dropdown'; -import Currency from '../../common/currency'; +import Currency from 'components/utils/currency'; import SaveCancel from 'components/core/save-cancel'; import TextInput from 'components/core/text-input'; import Icon from 'components/core/icon'; diff --git a/ashes/src/components/customers/store-credits/summary.jsx b/ashes/src/components/customers/store-credits/summary.jsx index 237a2d7af7..e5f062d90c 100644 --- a/ashes/src/components/customers/store-credits/summary.jsx +++ b/ashes/src/components/customers/store-credits/summary.jsx @@ -10,7 +10,7 @@ import { Link, IndexLink } from 'components/link'; import { SectionTitle } from '../../section-title'; import TabListView from '../../tabs/tabs'; import TabView from '../../tabs/tab'; -import Currency from '../../common/currency'; +import Currency from 'components/utils/currency'; import { PanelList, PanelListItem } from '../../panel/panel-list'; type Props = { diff --git a/ashes/src/components/customers/title-block.css b/ashes/src/components/customers/title-block.css index 99358a9130..db52527751 100644 --- a/ashes/src/components/customers/title-block.css +++ b/ashes/src/components/customers/title-block.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; :root { --header-height: 60px; diff --git a/ashes/src/components/customers/title-block.jsx b/ashes/src/components/customers/title-block.jsx index a04cbb403b..325ed056a8 100644 --- a/ashes/src/components/customers/title-block.jsx +++ b/ashes/src/components/customers/title-block.jsx @@ -5,14 +5,12 @@ import PropTypes from 'prop-types'; // components import Icon from 'components/core/icon'; +import { DateTime } from 'components/utils/datetime'; +import Currency from 'components/utils/currency'; //styles import styles from './title-block.css'; -//components -import Currency from '../common/currency'; -import { DateTime } from 'components/common/datetime'; - export default class Customer extends React.Component { static propTypes = { customer: PropTypes.object.isRequired, diff --git a/ashes/src/components/discounts-panel/discounts-panel.css b/ashes/src/components/discounts-panel/discounts-panel.css index 5ea9558165..52c264c9c7 100644 --- a/ashes/src/components/discounts-panel/discounts-panel.css +++ b/ashes/src/components/discounts-panel/discounts-panel.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .empty-message { padding: 20px; diff --git a/ashes/src/components/docs/colors/bg-colors.css b/ashes/src/components/docs/colors/bg-colors.css index 6abefab7d2..e2a3ecdb77 100644 --- a/ashes/src/components/docs/colors/bg-colors.css +++ b/ashes/src/components/docs/colors/bg-colors.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/docs/colors/bg-colors.jsx b/ashes/src/components/docs/colors/bg-colors.jsx deleted file mode 100644 index 3441c7d852..0000000000 --- a/ashes/src/components/docs/colors/bg-colors.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// @flow - -import classNames from 'classnames'; -import React from 'react'; - -import s from './bg-colors.css'; - -const colors = []; - -let i = 1; -while (s[`color-${i}`]) { - colors.push({ - value: i++, - }); -} - -const BgColor = props => { - return ( -
-
-
-
-
- ); -}; - -export const BgColors = () => { - return ( -
- {colors.map(cl => )} -
- ); -}; diff --git a/ashes/src/components/docs/colors/bg-colors.md b/ashes/src/components/docs/colors/bg-colors.md deleted file mode 100644 index 4aa6f9f6f9..0000000000 --- a/ashes/src/components/docs/colors/bg-colors.md +++ /dev/null @@ -1,5 +0,0 @@ -``` -
- -
-``` diff --git a/ashes/src/components/docs/colors/colors.jsx b/ashes/src/components/docs/colors/colors.jsx new file mode 100644 index 0000000000..2646e16d4c --- /dev/null +++ b/ashes/src/components/docs/colors/colors.jsx @@ -0,0 +1,60 @@ +// @flow + +import classNames from 'classnames'; +import React from 'react'; + +import stc from './text-colors.css'; +import sbc from './bg-colors.css'; + +const colorsText = []; +const colorsBack = []; + +let i = 1; +while (stc[`color-${i}`]) { + colorsText.push({ + value: i++, + }); +} + +i = 1; +while (sbc[`color-${i}`]) { + colorsBack.push({ + value: i++, + }); +} + +const TextColor = props => { + return ( +
+
Aa
+
+
+
+ ); +}; + +export const Colors = () => { + return ( +
+ {colorsText.map(cl => )} +
+ ); +}; + +const BgColor = props => { + return ( +
+
+
+
+
+ ); +}; + +export const Backgrounds = () => { + return ( +
+ {colorsBack.map(cl => )} +
+ ); +}; diff --git a/ashes/docs/colors-and-typos.md b/ashes/src/components/docs/colors/colors.md similarity index 54% rename from ashes/docs/colors-and-typos.md rename to ashes/src/components/docs/colors/colors.md index 725d983d75..a347ab6536 100644 --- a/ashes/docs/colors-and-typos.md +++ b/ashes/src/components/docs/colors/colors.md @@ -1,9 +1,11 @@ -We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts), but it is hightly recommended to use only existing variables for `color`, `background-color` and `font` css properties. If mockups didnt match them, discuss that with designer. +We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts), +but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties. +If mockups didn't match them, discuss that with designer. To use variables, just import them to your css file: ```css -@import 'colors.css'; +@import 'variables.css'; .block { color: #123456; /* prohibited! */ @@ -22,3 +24,15 @@ To use variables, just import them to your css file: color: var(--color-action-text); } ``` + +### Text colors + +``` + +``` + +### Backgrounds/borders + +``` + +``` diff --git a/ashes/src/components/docs/colors/text-colors.css b/ashes/src/components/docs/colors/text-colors.css index 776c66959f..8b3377abc2 100644 --- a/ashes/src/components/docs/colors/text-colors.css +++ b/ashes/src/components/docs/colors/text-colors.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/docs/colors/text-colors.jsx b/ashes/src/components/docs/colors/text-colors.jsx deleted file mode 100644 index 82ca0390a4..0000000000 --- a/ashes/src/components/docs/colors/text-colors.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// @flow - -import classNames from 'classnames'; -import React from 'react'; - -import s from './text-colors.css'; - -const colors = []; - -let i = 1; -while (s[`color-${i}`]) { - colors.push({ - value: i++, - }); -} - -const TextColor = props => { - return ( -
-
Aa
-
-
-
- ); -}; - -export const TextColors = () => { - return ( -
- {colors.map(cl => )} -
- ); -}; diff --git a/ashes/src/components/docs/colors/text-colors.md b/ashes/src/components/docs/colors/text-colors.md deleted file mode 100644 index c83110e472..0000000000 --- a/ashes/src/components/docs/colors/text-colors.md +++ /dev/null @@ -1,5 +0,0 @@ -``` -
- -
-``` diff --git a/ashes/src/components/docs/fonts/fonts.css b/ashes/src/components/docs/fonts/fonts.css new file mode 100644 index 0000000000..7af6e6f8c5 --- /dev/null +++ b/ashes/src/components/docs/fonts/fonts.css @@ -0,0 +1,34 @@ +@import 'variables.css'; + +.block { + display: flex; + flex-direction: column; + + & > div { + margin: 10px 0; + } +} + +.title { + font: var(--font-page-title); + + & span { + color: var(--color-subtitle-text); + } +} + +.section { + font: var(--font-section-title); +} + +.buttons { + font: var(--font-labels); +} + +.nav { + font: var(--font-nav); +} + +.body { + font: var(--font-body); +} diff --git a/ashes/src/components/docs/fonts/fonts.jsx b/ashes/src/components/docs/fonts/fonts.jsx new file mode 100644 index 0000000000..d79466ddc5 --- /dev/null +++ b/ashes/src/components/docs/fonts/fonts.jsx @@ -0,0 +1,31 @@ +// @flow + +import React from 'react'; + +import s from './fonts.css'; + +export const Fonts = () => { + return ( +
+
+ Page Title and Subtitle: 300 30px/41px. +
+ +
+ SectionTitle → 600 16px/22px. +
+ +
+ Buttons & Field Labels → 600 14px/20px. +
+ +
+ Tab Nav → 400 14px/20px. +
+ +
+ Body → 400 13px/18px. +
+
+ ); +}; diff --git a/ashes/src/components/docs/fonts/fonts.md b/ashes/src/components/docs/fonts/fonts.md new file mode 100644 index 0000000000..b75f210f05 --- /dev/null +++ b/ashes/src/components/docs/fonts/fonts.md @@ -0,0 +1,3 @@ +``` + +``` diff --git a/ashes/src/components/docs/icons/icons.css b/ashes/src/components/docs/icons/icons.css index ef85a0599e..29dd82decc 100644 --- a/ashes/src/components/docs/icons/icons.css +++ b/ashes/src/components/docs/icons/icons.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .container { display: flex; diff --git a/ashes/src/components/docs/logos/logos.css b/ashes/src/components/docs/logos/logos.css index 7b0a1f5705..3c1264e716 100644 --- a/ashes/src/components/docs/logos/logos.css +++ b/ashes/src/components/docs/logos/logos.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .container { display: flex; diff --git a/ashes/src/components/docs/svg-icons/svg-icons.css b/ashes/src/components/docs/svg-icons/svg-icons.css index 5b45f8d22c..e4ef1576dc 100644 --- a/ashes/src/components/docs/svg-icons/svg-icons.css +++ b/ashes/src/components/docs/svg-icons/svg-icons.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .container { display: flex; diff --git a/ashes/src/components/dropdown/dropdown-item.css b/ashes/src/components/dropdown/dropdown-item.css index 38ee94ee08..2955b40a31 100644 --- a/ashes/src/components/dropdown/dropdown-item.css +++ b/ashes/src/components/dropdown/dropdown-item.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .item { padding: 0 20px; diff --git a/ashes/src/components/dropdown/dropdown-search.css b/ashes/src/components/dropdown/dropdown-search.css index 7e2e861587..bc8fc58d01 100644 --- a/ashes/src/components/dropdown/dropdown-search.css +++ b/ashes/src/components/dropdown/dropdown-search.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .searchbar-wrapper { width: 100%; diff --git a/ashes/src/components/dropdown/dropdown.css b/ashes/src/components/dropdown/dropdown.css index a7d49579c8..673c3c4df9 100644 --- a/ashes/src/components/dropdown/dropdown.css +++ b/ashes/src/components/dropdown/dropdown.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .needle { color: var(--color-link); diff --git a/ashes/src/components/dropdown/generic-dropdown.css b/ashes/src/components/dropdown/generic-dropdown.css index 2936fff181..e60691b985 100644 --- a/ashes/src/components/dropdown/generic-dropdown.css +++ b/ashes/src/components/dropdown/generic-dropdown.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { &:focus { @@ -22,8 +22,6 @@ /* padding: 0 10px !important; */ - padding-top: 11px !important; - &:active { box-shadow: none !important; } diff --git a/ashes/src/components/errors/error.css b/ashes/src/components/errors/error.css index 3662bbf112..f31aad3592 100644 --- a/ashes/src/components/errors/error.css +++ b/ashes/src/components/errors/error.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .error { margin: 50px auto; diff --git a/ashes/src/components/forms/css/password-input.css b/ashes/src/components/forms/css/password-input.css index 01f6d2aaa6..3b364937a5 100644 --- a/ashes/src/components/forms/css/password-input.css +++ b/ashes/src/components/forms/css/password-input.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .password-input { position: relative; diff --git a/ashes/src/components/gift-cards/gift-card.jsx b/ashes/src/components/gift-cards/gift-card.jsx index 643af2afc2..b8de79887e 100644 --- a/ashes/src/components/gift-cards/gift-card.jsx +++ b/ashes/src/components/gift-cards/gift-card.jsx @@ -10,8 +10,8 @@ import { ReasonType } from '../../lib/reason-utils'; import { IndexLink, Link } from 'components/link'; import { Errors } from 'components/utils/errors'; import GiftCardCode from './gift-card-code'; -import { DateTime } from '../common/datetime'; -import Currency from '../common/currency'; +import { DateTime } from 'components/utils/datetime'; +import Currency from 'components/utils/currency'; import Spinner from 'components/core/spinner'; import { PageTitle } from '../section-title'; import Panel from '../panel/panel'; diff --git a/ashes/src/components/header/breadcrumb.css b/ashes/src/components/header/breadcrumb.css index 1033d9c4f6..f4647653f2 100644 --- a/ashes/src/components/header/breadcrumb.css +++ b/ashes/src/components/header/breadcrumb.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/header/header.css b/ashes/src/components/header/header.css index 888f5df54e..400ca88b92 100644 --- a/ashes/src/components/header/header.css +++ b/ashes/src/components/header/header.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .header, .sub-nav, diff --git a/ashes/src/components/header/usermenu.css b/ashes/src/components/header/usermenu.css index 98246ec575..45248e6371 100644 --- a/ashes/src/components/header/usermenu.css +++ b/ashes/src/components/header/usermenu.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .usermenu { position: absolute; diff --git a/ashes/src/components/image-card/image-card.css b/ashes/src/components/image-card/image-card.css index 12399f6adc..71a425e0ad 100644 --- a/ashes/src/components/image-card/image-card.css +++ b/ashes/src/components/image-card/image-card.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .card { display: flex; diff --git a/ashes/src/components/images/accordion/accordion.css b/ashes/src/components/images/accordion/accordion.css index c09b282814..3cd90a44e3 100644 --- a/ashes/src/components/images/accordion/accordion.css +++ b/ashes/src/components/images/accordion/accordion.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .accordion { margin-bottom: 40px; diff --git a/ashes/src/components/images/album-wrapper/album-wrapper.css b/ashes/src/components/images/album-wrapper/album-wrapper.css index 2ed42a0c8b..c343dd6012 100644 --- a/ashes/src/components/images/album-wrapper/album-wrapper.css +++ b/ashes/src/components/images/album-wrapper/album-wrapper.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .accordion { margin-bottom: 40px; diff --git a/ashes/src/components/images/edit-image.jsx b/ashes/src/components/images/edit-image.jsx index 7c59daa91d..36024d79b8 100644 --- a/ashes/src/components/images/edit-image.jsx +++ b/ashes/src/components/images/edit-image.jsx @@ -6,7 +6,7 @@ import { autobind } from 'core-decorators'; import React, { Component } from 'react'; // components -import { DateTime } from 'components/common/datetime'; +import { DateTime } from 'components/utils/datetime'; import Modal from 'components/core/modal'; import { FormField } from '../forms'; import SaveCancel from 'components/core/save-cancel'; diff --git a/ashes/src/components/images/images.css b/ashes/src/components/images/images.css index 7dad25491f..b50505caa5 100644 --- a/ashes/src/components/images/images.css +++ b/ashes/src/components/images/images.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .header { display: flex; diff --git a/ashes/src/components/inventory/inventory-warehouse-drawer.jsx b/ashes/src/components/inventory/inventory-warehouse-drawer.jsx index e6c3a779b1..2d85ba19a9 100644 --- a/ashes/src/components/inventory/inventory-warehouse-drawer.jsx +++ b/ashes/src/components/inventory/inventory-warehouse-drawer.jsx @@ -8,7 +8,7 @@ import Table from '../table/table'; import Drawer from '../table/drawer'; import TableRow from '../table/row'; import Counter from 'components/core/counter'; -import Currency from '../common/currency'; +import Currency from 'components/utils/currency'; import * as WarehousesActions from 'modules/inventory/warehouses'; diff --git a/ashes/src/components/inventory/item-details.css b/ashes/src/components/inventory/item-details.css index 0bf9a58576..4fd6c94ff6 100644 --- a/ashes/src/components/inventory/item-details.css +++ b/ashes/src/components/inventory/item-details.css @@ -1,4 +1,4 @@ -@import "colors.css"; +@import "variables.css"; .onHand { & > span { diff --git a/ashes/src/components/link/link.css b/ashes/src/components/link/link.css index 7c385634c1..3e3ec8a6d4 100644 --- a/ashes/src/components/link/link.css +++ b/ashes/src/components/link/link.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .link { color: var(--color-link); diff --git a/ashes/src/components/live-search/live-search.css b/ashes/src/components/live-search/live-search.css index f948ebabdf..51b2f64a71 100644 --- a/ashes/src/components/live-search/live-search.css +++ b/ashes/src/components/live-search/live-search.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .table { position: relative; diff --git a/ashes/src/components/live-search/menu/menu.css b/ashes/src/components/live-search/menu/menu.css index 305990d26c..2ae193f7dc 100644 --- a/ashes/src/components/live-search/menu/menu.css +++ b/ashes/src/components/live-search/menu/menu.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { background-color: white; diff --git a/ashes/src/components/merchant-applications/list.css b/ashes/src/components/merchant-applications/list.css index e58c99bad9..5c5ae3d19e 100644 --- a/ashes/src/components/merchant-applications/list.css +++ b/ashes/src/components/merchant-applications/list.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .body { padding: 0 1.85%; diff --git a/ashes/src/components/object-page/object-details.css b/ashes/src/components/object-page/object-details.css index cde4149f47..98532e0acf 100644 --- a/ashes/src/components/object-page/object-details.css +++ b/ashes/src/components/object-page/object-details.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .object-details { display: flex; diff --git a/ashes/src/components/orders/order.jsx b/ashes/src/components/orders/order.jsx index 337442d77c..9f687a4732 100644 --- a/ashes/src/components/orders/order.jsx +++ b/ashes/src/components/orders/order.jsx @@ -10,7 +10,7 @@ import { allowedStateTransitions } from '../../paragons/order'; // components import { Dropdown } from '../dropdown'; import RemorseTimer from './remorseTimer'; -import { DateTime } from '../common/datetime'; +import { DateTime } from 'components/utils/datetime'; import { PanelList, PanelListItem } from '../panel/panel-list'; import { PageTitle } from '../section-title'; import SubNav from './sub-nav'; diff --git a/ashes/src/components/orders/shipments/shipment-row.css b/ashes/src/components/orders/shipments/shipment-row.css index a359f166e9..2d7e26f068 100644 --- a/ashes/src/components/orders/shipments/shipment-row.css +++ b/ashes/src/components/orders/shipments/shipment-row.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .row-toggle { margin-right: 10px; diff --git a/ashes/src/components/orders/shipments/shipment-row.jsx b/ashes/src/components/orders/shipments/shipment-row.jsx index 3bb4ac4804..f83f771582 100644 --- a/ashes/src/components/orders/shipments/shipment-row.jsx +++ b/ashes/src/components/orders/shipments/shipment-row.jsx @@ -7,7 +7,7 @@ import { autobind } from 'core-decorators'; // components import TableRow from 'components/table/row'; import TableCell from 'components/table/cell'; -import { DateTime } from 'components/common/datetime'; +import { DateTime } from 'components/utils/datetime'; import AddressDetails from 'components/addresses/address-details'; import ShippedItem from './shipped-item'; import Transaction from './transaction'; diff --git a/ashes/src/components/orders/shipments/shipped-item.jsx b/ashes/src/components/orders/shipments/shipped-item.jsx index 7c4e901d9a..373460c39e 100644 --- a/ashes/src/components/orders/shipments/shipped-item.jsx +++ b/ashes/src/components/orders/shipments/shipped-item.jsx @@ -7,7 +7,7 @@ import React, { Element } from 'react'; import styles from './shipped-item.css'; // components -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import ProductImage from 'components/imgix/product-image'; //types diff --git a/ashes/src/components/orders/shipments/transaction.jsx b/ashes/src/components/orders/shipments/transaction.jsx index d388d43a5b..3cc95f6e5b 100644 --- a/ashes/src/components/orders/shipments/transaction.jsx +++ b/ashes/src/components/orders/shipments/transaction.jsx @@ -7,9 +7,9 @@ import React, { Element } from 'react'; import styles from './transaction.css'; // components -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import PaymentMethod from 'components/payment/payment-method'; -import { DateTime } from 'components/common/datetime'; +import { DateTime } from 'components/utils/datetime'; //types type Props = { diff --git a/ashes/src/components/orders/shipments/unshipped-items.jsx b/ashes/src/components/orders/shipments/unshipped-items.jsx index 42e16eb8f2..b582001388 100644 --- a/ashes/src/components/orders/shipments/unshipped-items.jsx +++ b/ashes/src/components/orders/shipments/unshipped-items.jsx @@ -13,7 +13,7 @@ import ContentBox from 'components/content-box/content-box'; import TableView from 'components/table/tableview'; import TableRow from 'components/table/row'; import TableCell from 'components/table/cell'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import ProductImage from 'components/imgix/product-image'; // styles diff --git a/ashes/src/components/overlay/overlay.css b/ashes/src/components/overlay/overlay.css index 72b0ccc0b2..c20d21202f 100644 --- a/ashes/src/components/overlay/overlay.css +++ b/ashes/src/components/overlay/overlay.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .overlay { display: none; diff --git a/ashes/src/components/panel-header/panel-header.css b/ashes/src/components/panel-header/panel-header.css index 9329c20511..86d3e609c2 100644 --- a/ashes/src/components/panel-header/panel-header.css +++ b/ashes/src/components/panel-header/panel-header.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .header { align-items: center; diff --git a/ashes/src/components/panel/panel-list.css b/ashes/src/components/panel/panel-list.css index 9217dd0af1..e8149b4c6b 100644 --- a/ashes/src/components/panel/panel-list.css +++ b/ashes/src/components/panel/panel-list.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/participants/participants.css b/ashes/src/components/participants/participants.css index 92069e408f..2caf0c57c7 100644 --- a/ashes/src/components/participants/participants.css +++ b/ashes/src/components/participants/participants.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .title-row { display: flex; diff --git a/ashes/src/components/payment-row/debit-credit-info.jsx b/ashes/src/components/payment-row/debit-credit-info.jsx index e3ccb63b8f..1fb1ff0523 100644 --- a/ashes/src/components/payment-row/debit-credit-info.jsx +++ b/ashes/src/components/payment-row/debit-credit-info.jsx @@ -1,6 +1,6 @@ /* @flow */ import React from 'react'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; type Props = { amount: number; diff --git a/ashes/src/components/payment-row/debit-credit.jsx b/ashes/src/components/payment-row/debit-credit.jsx index 2dfd52e5ac..89a5f85643 100644 --- a/ashes/src/components/payment-row/debit-credit.jsx +++ b/ashes/src/components/payment-row/debit-credit.jsx @@ -2,7 +2,7 @@ import React, { Component, Element } from 'react'; import { autobind } from 'core-decorators'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import CurrencyInput from 'components/forms/currency-input'; import { Form, FormField } from 'components/forms'; import SaveCancel from 'components/core/save-cancel'; diff --git a/ashes/src/components/payment-row/payment-row.css b/ashes/src/components/payment-row/payment-row.css index 487d756a08..fbac29438c 100644 --- a/ashes/src/components/payment-row/payment-row.css +++ b/ashes/src/components/payment-row/payment-row.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .row-toggle { display: inline-block; diff --git a/ashes/src/components/payment-row/payment-row.jsx b/ashes/src/components/payment-row/payment-row.jsx index a533a1c154..4cbe99eebc 100644 --- a/ashes/src/components/payment-row/payment-row.jsx +++ b/ashes/src/components/payment-row/payment-row.jsx @@ -8,13 +8,13 @@ import { connect } from 'react-redux'; // components import CreditCardDetails from './credit-card'; -import Currency from 'components/common/currency'; +import Currency from 'components/utils/currency'; import GiftCardDetails from './gift-card'; import StoreCreditDetails from './store-credit'; import PaymentMethodDetails from 'components/payment/payment-method'; import TableCell from 'components/table/cell'; import TableRow from 'components/table/row'; -import { DateTime } from 'components/common/datetime'; +import { DateTime } from 'components/utils/datetime'; import { EditButton, DeleteButton } from 'components/core/button'; import Icon from 'components/core/icon'; diff --git a/ashes/src/components/payment/payment-method.css b/ashes/src/components/payment/payment-method.css index 2bd33d1da4..ee5ec7816e 100644 --- a/ashes/src/components/payment/payment-method.css +++ b/ashes/src/components/payment/payment-method.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .payment-method { display: inline-block; diff --git a/ashes/src/components/payments-panel/payments.css b/ashes/src/components/payments-panel/payments.css index c630c5f95e..2d2ab7e429 100644 --- a/ashes/src/components/payments-panel/payments.css +++ b/ashes/src/components/payments-panel/payments.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .row-toggle { vertical-align: top; diff --git a/ashes/src/components/products-add/products-add.css b/ashes/src/components/products-add/products-add.css index d549b04d35..3bfbd981bf 100644 --- a/ashes/src/components/products-add/products-add.css +++ b/ashes/src/components/products-add/products-add.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .productSearch { & .search { diff --git a/ashes/src/components/products/category-item.css b/ashes/src/components/products/category-item.css index 06f62e0324..62b815a959 100644 --- a/ashes/src/components/products/category-item.css +++ b/ashes/src/components/products/category-item.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .item { padding: 6px 10px; diff --git a/ashes/src/components/products/form.css b/ashes/src/components/products/form.css index 20d16b21b1..8d65c47220 100644 --- a/ashes/src/components/products/form.css +++ b/ashes/src/components/products/form.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .slug-field-container { position: relative; diff --git a/ashes/src/components/products/product-amazon.css b/ashes/src/components/products/product-amazon.css index e22c886f00..3fde288c38 100644 --- a/ashes/src/components/products/product-amazon.css +++ b/ashes/src/components/products/product-amazon.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .root { padding: 0 30px; diff --git a/ashes/src/components/products/skus/editable-sku-row.css b/ashes/src/components/products/skus/editable-sku-row.css index bdd425cc76..21258d150b 100644 --- a/ashes/src/components/products/skus/editable-sku-row.css +++ b/ashes/src/components/products/skus/editable-sku-row.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .sku-cell { position: relative; diff --git a/ashes/src/components/promotions/attrs-edit.css b/ashes/src/components/promotions/attrs-edit.css index 91458b7ead..167485f65b 100644 --- a/ashes/src/components/promotions/attrs-edit.css +++ b/ashes/src/components/promotions/attrs-edit.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .type-chooser { max-width: 40%; diff --git a/ashes/src/components/promotions/coupon-new.css b/ashes/src/components/promotions/coupon-new.css index 7b82c7f9df..3f602e84f8 100644 --- a/ashes/src/components/promotions/coupon-new.css +++ b/ashes/src/components/promotions/coupon-new.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .modal { width: 800px; diff --git a/ashes/src/components/promotions/discounts/discounts.css b/ashes/src/components/promotions/discounts/discounts.css index 28bc33fe0e..8510f82164 100644 --- a/ashes/src/components/promotions/discounts/discounts.css +++ b/ashes/src/components/promotions/discounts/discounts.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .discount_qualifier :global .autowidth_dd { width: auto; diff --git a/ashes/src/components/promotions/discounts/index.jsx b/ashes/src/components/promotions/discounts/index.jsx index af1f6dd98e..2e22041e1d 100644 --- a/ashes/src/components/promotions/discounts/index.jsx +++ b/ashes/src/components/promotions/discounts/index.jsx @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { autobind } from 'core-decorators'; import { Dropdown } from '../../dropdown'; -import Currency from './currency'; +import Currency from 'components/utils/currency'; import Counter from './counter'; import styles from './discounts.css'; import { Checkbox } from 'components/core/checkbox'; diff --git a/ashes/src/components/promotions/widgets/index.js b/ashes/src/components/promotions/widgets/index.js index 1e3c8aac3e..99e7fdc710 100644 --- a/ashes/src/components/promotions/widgets/index.js +++ b/ashes/src/components/promotions/widgets/index.js @@ -2,5 +2,5 @@ export selectProducts from './select-products'; export selectProduct from './select-product'; export percent from './percent'; -export currency from './currency'; +export currency from 'components/utils/currency'; export counter from './counter'; diff --git a/ashes/src/components/promotions/widgets/select-product.css b/ashes/src/components/promotions/widgets/select-product.css index 121cd738eb..ce75aace33 100644 --- a/ashes/src/components/promotions/widgets/select-product.css +++ b/ashes/src/components/promotions/widgets/select-product.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .product-description { color: var(--color-additional-text); diff --git a/ashes/src/components/rmas/helpers.jsx b/ashes/src/components/rmas/helpers.jsx index 5c70403831..5306f2848a 100644 --- a/ashes/src/components/rmas/helpers.jsx +++ b/ashes/src/components/rmas/helpers.jsx @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'; import { Link } from 'components/link'; import TableRow from '../table/row'; import TableCell from '../table/cell'; -import { DateTime } from '../common/datetime'; -import Currency from '../common/currency'; +import { DateTime } from 'components/utils/datetime'; +import Currency from 'components/utils/currency'; import PaymentMethod from '../../components/payment/payment-method'; const CustomerInfo = props => { diff --git a/ashes/src/components/selectable-list/selectable-list.css b/ashes/src/components/selectable-list/selectable-list.css index 04e90d78cd..4806751db8 100644 --- a/ashes/src/components/selectable-list/selectable-list.css +++ b/ashes/src/components/selectable-list/selectable-list.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .selectable-list { background-color: var(--bg-white); diff --git a/ashes/src/components/shipping/shipping-method-row.jsx b/ashes/src/components/shipping/shipping-method-row.jsx index dd7fbf6231..8f9cd41e45 100644 --- a/ashes/src/components/shipping/shipping-method-row.jsx +++ b/ashes/src/components/shipping/shipping-method-row.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; // components -import Currency from '../common/currency'; +import Currency from 'components/utils/currency'; import { EditButton } from 'components/core/button'; import CurrencyInput from '../forms/currency-input'; import RadioButton from 'components/core/radio-button'; diff --git a/ashes/src/components/sidebar/entries/entries.css b/ashes/src/components/sidebar/entries/entries.css index 40a565ffd8..62d93a4646 100644 --- a/ashes/src/components/sidebar/entries/entries.css +++ b/ashes/src/components/sidebar/entries/entries.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .fc-entries-wrapper { margin-bottom: 25px; diff --git a/ashes/src/components/site/auth-pages.css b/ashes/src/components/site/auth-pages.css index 257ea2a447..c972c6e8b8 100644 --- a/ashes/src/components/site/auth-pages.css +++ b/ashes/src/components/site/auth-pages.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .body { color: var(--color-additional-text); diff --git a/ashes/src/components/site/site.css b/ashes/src/components/site/site.css index 34ff02bbaa..e73b6fca95 100644 --- a/ashes/src/components/site/site.css +++ b/ashes/src/components/site/site.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { display: flex; diff --git a/ashes/src/components/sortable/sortable-tiles.css b/ashes/src/components/sortable/sortable-tiles.css index 57949c045e..11f681424d 100644 --- a/ashes/src/components/sortable/sortable-tiles.css +++ b/ashes/src/components/sortable/sortable-tiles.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .title { margin-top: 1.25em; diff --git a/ashes/src/components/table/cell.jsx b/ashes/src/components/table/cell.jsx index a24f4adb40..674e1ed9cc 100644 --- a/ashes/src/components/table/cell.jsx +++ b/ashes/src/components/table/cell.jsx @@ -7,8 +7,8 @@ import PropTypes from 'prop-types'; // components import { Link } from 'components/link'; import columnPropType from './column-prop-type'; -import { Moment, Date, DateTime, Time } from '../common/datetime'; -import Currency from '../common/currency'; +import { Date, DateTime, Time } from 'components/utils/datetime'; +import Currency from 'components/utils/currency'; import State from '../common/state'; import Change from 'components/utils/change'; import ProductImage from 'components/imgix/product-image'; @@ -31,8 +31,6 @@ function getCell(column, children, row) { return ; case 'transaction': return ; - case 'moment': - return ; case 'date': return ; case 'datetime': diff --git a/ashes/src/components/table/column-selector.css b/ashes/src/components/table/column-selector.css index 21e1ee4d20..800aadea63 100644 --- a/ashes/src/components/table/column-selector.css +++ b/ashes/src/components/table/column-selector.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .column-selector { position: relative; diff --git a/ashes/src/components/tabs/tabs.css b/ashes/src/components/tabs/tabs.css index 0692c298e1..d777e3eb1c 100644 --- a/ashes/src/components/tabs/tabs.css +++ b/ashes/src/components/tabs/tabs.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .loading { &::before { diff --git a/ashes/src/components/tags/tags.css b/ashes/src/components/tags/tags.css index dfdeb9fa9f..320a9d68b9 100644 --- a/ashes/src/components/tags/tags.css +++ b/ashes/src/components/tags/tags.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .main { margin-bottom: 20px; diff --git a/ashes/src/components/taxonomies/taxonomy-dropdown.css b/ashes/src/components/taxonomies/taxonomy-dropdown.css index 91e43d98c1..bc63ea2473 100644 --- a/ashes/src/components/taxonomies/taxonomy-dropdown.css +++ b/ashes/src/components/taxonomies/taxonomy-dropdown.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .dropdown { max-width: none; diff --git a/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css b/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css index c42739f6d7..e234e8778c 100644 --- a/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css +++ b/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .dropdown { max-width: none; diff --git a/ashes/src/components/taxonomies/taxons/taxon-list-widget.css b/ashes/src/components/taxonomies/taxons/taxon-list-widget.css index 26928e4ce8..b1f0b01b85 100644 --- a/ashes/src/components/taxonomies/taxons/taxon-list-widget.css +++ b/ashes/src/components/taxonomies/taxons/taxon-list-widget.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .root { background-color: var(--bg-white); diff --git a/ashes/src/components/taxonomies/widget/taxonomy-widget.css b/ashes/src/components/taxonomies/widget/taxonomy-widget.css index ec0739b574..218c698dbf 100644 --- a/ashes/src/components/taxonomies/widget/taxonomy-widget.css +++ b/ashes/src/components/taxonomies/widget/taxonomy-widget.css @@ -1,5 +1,5 @@ @import 'common.css'; -@import 'colors.css'; +@import 'variables.css'; .spinner { margin: 10px auto; diff --git a/ashes/src/components/tree-node/tree-node.css b/ashes/src/components/tree-node/tree-node.css index aa0212855e..6c54d483ac 100644 --- a/ashes/src/components/tree-node/tree-node.css +++ b/ashes/src/components/tree-node/tree-node.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .node { position: relative; diff --git a/ashes/src/components/typeahead/typeahead.css b/ashes/src/components/typeahead/typeahead.css index 5cc38d8b52..315eb3c959 100644 --- a/ashes/src/components/typeahead/typeahead.css +++ b/ashes/src/components/typeahead/typeahead.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { position: relative; diff --git a/ashes/src/components/upload/upload.css b/ashes/src/components/upload/upload.css index 7342eb2b24..0379db6974 100644 --- a/ashes/src/components/upload/upload.css +++ b/ashes/src/components/upload/upload.css @@ -1,4 +1,4 @@ -@import 'colors.css'; +@import 'variables.css'; .block { background-clip: padding-box; diff --git a/ashes/src/components/utils/change/change.css b/ashes/src/components/utils/change/change.css index dc5757601e..482d78eaa0 100644 --- a/ashes/src/components/utils/change/change.css +++ b/ashes/src/components/utils/change/change.css @@ -1,4 +1,4 @@ -@import "colors.css"; +@import "variables.css"; .change { &::before { @@ -8,7 +8,7 @@ } &.positive { - color: var(--color-action-text); + color: var(--color-link); &::before { content: "+"; diff --git a/ashes/src/components/utils/change/change.jsx b/ashes/src/components/utils/change/change.jsx index 47afade896..75d5d94622 100644 --- a/ashes/src/components/utils/change/change.jsx +++ b/ashes/src/components/utils/change/change.jsx @@ -1,6 +1,7 @@ /* @flow */ // libs +import { identity } from 'lodash'; import classNames from 'classnames'; import React from 'react'; @@ -10,6 +11,8 @@ import s from './change.css'; type Props = { /** value of change */ value: number, + /** value formatting function */ + format?: (value: number) => string }; /** @@ -17,15 +20,14 @@ type Props = { * * @function Change */ -const Change = (props: Props) => { - const { value } = props; +const Change = ({ value, format = identity }: Props) => { const cls = classNames(s.change, { [s.positive]: value > 0, [s.negative]: value < 0, }); - return {Math.abs(value)}; + return {format(Math.abs(value))}; }; export default Change; diff --git a/ashes/src/components/utils/change/change.md b/ashes/src/components/utils/change/change.md index 28b721ed95..74bf71ccfc 100644 --- a/ashes/src/components/utils/change/change.md +++ b/ashes/src/components/utils/change/change.md @@ -1,4 +1,4 @@ -#### Basic usage +##### Basic usage ```javascript import Change from 'components/utils/change'; @@ -8,9 +8,9 @@ import Change from 'components/utils/change'; ### States ``` -
-
-
-
+
+ + +
``` diff --git a/ashes/src/components/utils/currency/currency.css b/ashes/src/components/utils/currency/currency.css new file mode 100644 index 0000000000..e03dcc9b50 --- /dev/null +++ b/ashes/src/components/utils/currency/currency.css @@ -0,0 +1,4 @@ + +.currency { + display: inline-block; +} diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx new file mode 100644 index 0000000000..94df9b5d10 --- /dev/null +++ b/ashes/src/components/utils/currency/currency.jsx @@ -0,0 +1,62 @@ +/* @flow */ + +// libs +import { curryRight } from 'lodash'; +import React from 'react'; +import classNames from 'classnames'; + +// components +import formatCurrency from 'lib/format-currency'; +import Change from 'components/utils/change'; + +// styles +import s from './currency.css'; + +type Props = { + /** element's id */ + id: number, + /** passing value */ + value: number | string, + /** fraction base */ + fractionBase?: number, + /** currency abbreviation (e.g. 'EUR') */ + currency?: string, + /** set true if value is big number */ + bigNumber?: boolean, + /** transaction mode renders colored positive/negative values */ + isTransaction?: boolean, + /** additional className */ + className?: string +} + +/** + * Currency component serves to format passed value + * and render it with currency symbol + * + * @function Change + */ + +const Currency = (props: Props) => { + const { isTransaction, id, className, ...rest } = props; + let value; + + if (isTransaction) { + value = ; + } else { + value = formatCurrency(props.value, rest); + } + + return ( + + {value} + + ); +}; + +Currency.defaultProps = { + fractionBase: 2, + currency: 'USD', + bigNumber: false +}; + +export default Currency; diff --git a/ashes/src/components/utils/currency/currency.md b/ashes/src/components/utils/currency/currency.md new file mode 100644 index 0000000000..56a49ddc84 --- /dev/null +++ b/ashes/src/components/utils/currency/currency.md @@ -0,0 +1,65 @@ +##### Basic usage + +```javascript +import Currency from 'components/utils/currency'; + + +``` + +### States +``` +
+ + + + +
+ +``` + +### Example +``` +class CurrencyExample extends React.Component { + constructor() { + this.state = { + value: 0, + isTransaction: false + }; + } + + checkboxChange() { + this.setState({ isTransaction: !this.state.isTransaction }); + } + + inputChange(value) { + this.setState({ value }); + } + + render() { + return ( +
+
+ +
+
+ +
+
+ Result: + +
+
+ ); + } +} + + +``` diff --git a/ashes/src/components/utils/currency/currency.spec.jsx b/ashes/src/components/utils/currency/currency.spec.jsx new file mode 100644 index 0000000000..a3eae83e52 --- /dev/null +++ b/ashes/src/components/utils/currency/currency.spec.jsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import Currency from './currency'; + +describe('Currency', function () { + + it('should render non-empty tag by default', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('$0.00'); + }); + + it('should render empty string when get incorrect value', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal(''); + }); + + it('should render correct currency', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('$1.23'); + }); + + it('should render correct negative value', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('-$1.23'); + }); + + it('should render value with delimiter', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('$12,345,678.90'); + }); + + it('should support another fractionBase', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('$123.00'); + }); + + it('should support another currency', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('€1.23'); + }); + + it('should support big integers', function () { + + const currency = mount( + + ); + + expect(currency.text()).to.equal('$151,515,425,195,151,845.15'); + }); + + it('should render positive style in Transaction mode', function () { + + const currency = mount( + + ); + + expect(currency.find('Change').hasClass('positive')).to.be.true; + }); + + it('should render negative style in Transaction mode', function () { + + const currency = mount( + + ); + + expect(currency.find('Change').hasClass('negative')).to.be.true; + }); +}); diff --git a/ashes/src/components/utils/currency/index.js b/ashes/src/components/utils/currency/index.js new file mode 100644 index 0000000000..db6389a25b --- /dev/null +++ b/ashes/src/components/utils/currency/index.js @@ -0,0 +1 @@ +export default from './currency'; diff --git a/ashes/src/components/utils/datetime/datetime.jsx b/ashes/src/components/utils/datetime/datetime.jsx new file mode 100644 index 0000000000..d3a945f928 --- /dev/null +++ b/ashes/src/components/utils/datetime/datetime.jsx @@ -0,0 +1,60 @@ +/* @flow */ + +// libs +import React from 'react'; +import moment from 'moment'; + +type DateTimeProps = { + /** time string */ + value: string, + /** set UTC time*/ + utc?: boolean, + /** set empty value text */ + emptyValue?: string, + /** className */ + className?: string +} + +type MomentProps = DateTimeProps & { + /** set time format */ + format: string, +}; + +/** + * `DateTime`, `Date`, and `Time` - are simple components + * build on the top of generic `Moment` + * and serve to show date/time data + * + * @function DateTime + */ +export const DateTime = (props: DateTimeProps) => ; +export const Date = (props: DateTimeProps) => ; +export const Time = (props: DateTimeProps) => ; + +const Moment = ({ + utc, + value, + format, + emptyValue, + className, + ...rest +}: MomentProps) => { + + if (!value) { + return {emptyValue}; + } + + const timeValue = utc ? moment.utc(value) : moment(value); + + return ( + + ); +}; + +Moment.defaultProps = { + format: 'L LTS', + utc: true, + emptyValue: 'not set', +}; diff --git a/ashes/src/components/utils/datetime/datetime.md b/ashes/src/components/utils/datetime/datetime.md new file mode 100644 index 0000000000..6e9149dfa7 --- /dev/null +++ b/ashes/src/components/utils/datetime/datetime.md @@ -0,0 +1,37 @@ +#### Basic usage + +```javascript + +``` + +### States + +```javascript +import { DateTime } from 'components/utils/datetime' +``` + +``` +
+ +
+``` + +```javascript +import { Date } from 'components/utils/datetime' +``` + +``` +
+ +
+``` + +```javascript +import { Time } from 'components/utils/datetime' +``` + +``` +
+ +
+``` diff --git a/ashes/src/components/utils/datetime/datetime.spec.jsx b/ashes/src/components/utils/datetime/datetime.spec.jsx new file mode 100644 index 0000000000..054097afdb --- /dev/null +++ b/ashes/src/components/utils/datetime/datetime.spec.jsx @@ -0,0 +1,109 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { DateTime, Date, Time } from './datetime'; + +describe('DateTime', () => { + + describe('#DateTime', () => { + it('should render date/time in (L LT) format', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('12/29/2017 3:10 PM'); + }); + + it('should render default emptyValue when value is not defined', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('not set'); + }); + + it('should render custom emptyValue ', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('date is not set'); + }); + + it('should render passed className', () => { + const datetime = mount( + + ); + + expect(datetime.hasClass('test')).to.be.true; + }); + + }); + + describe('#Date', () => { + it('should render date/time in (L) format', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('12/29/2017'); + }); + + it('should render default emptyValue when value is not defined', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('not set'); + }); + + it('should render custom emptyValue ', () => { + const datetime = mount( + + ); + + expect(datetime.text()).to.equal('date is not set'); + }); + + it('should render passed className', () => { + const datetime = mount( + + ); + + expect(datetime.hasClass('test')).to.be.true; + }); + }); + + describe('#Date', () => { + it('should render date/time in (LT) format', () => { + const datetime = mount( +