Skip to content
Component library πŸ’…
JavaScript Other
Branch: master
Clone or download
3 authors fix(deps): update all dependencies (major) (#1265)
* fix(deps): update all dependencies

* chore: disable new styleling rule

Co-authored-by: WhiteSource Renovate <renovatebot@gmail.com>
Co-authored-by: Abel Almeida <jonnybel91@gmail.com>
1
Latest commit f13b0e5 Feb 17, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(deps): lock file maintenance all dependencies (#1260) Feb 11, 2020
.github chore: update rtl (#820) May 31, 2019
.storybook chore: use babel.config.js file (#1220) Dec 15, 2019
.yarn/releases chore: update yarn (#1262) Feb 12, 2020
codemods/custom-property-replacer feat: add postcss codemod (#893) Jun 26, 2019
design-system
docs/assets chore(storybook): fix page title and favicon (#261) Nov 27, 2018
examples feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
packages fix(deps): update all dependencies (major) (#1265) Feb 17, 2020
philosophy feat(flat-button): add `inverted` tone (#1175) Nov 13, 2019
presets chore(release): publish v10.16.0 Feb 14, 2020
scripts fix: force canary releases to always publish all packages (#1259) Feb 11, 2020
src refactor: move components src to corresponding packages folders (#1224) Feb 11, 2020
test
transforms/v10
visual-testing-app chore(deps): lock file maintenance all dependencies (#1266) Feb 17, 2020
.editorconfig
.env.template feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
.eslintignore docs: update release process (#1206) Dec 5, 2019
.eslintrc.yaml feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
.github-labelsrc.json
.gitignore chore: fix gitignore Dec 13, 2019
.kodiak.toml chore(ci): add kodiak (#961) Jul 26, 2019
.nvmrc chore: use native node13 full icu (#1138) Oct 25, 2019
.percy.yml Rework visual regression testing to use Puppeteer and Percy πŸŽ­πŸ‘ΊπŸ“Έ (#373) Jan 2, 2019
.prettierignore
.prettierrc feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
.renovaterc.json chore(deps): lock file maintenance all dependencies (#1266) Feb 17, 2020
.stylelintrc fix(deps): update all dependencies (major) (#1265) Feb 17, 2020
.yarnrc chore: update yarn (#1262) Feb 12, 2020
CHANGELOG.md docs(changelog): for release v10.16.0 [skip ci] (#1264) Feb 14, 2020
CODE_OF_CONDUCT.md Add bundling (rollup) (#34) Sep 10, 2018
CONTRIBUTING.md docs: update release process (#1206) Dec 5, 2019
LICENSE feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
README.md feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
babel.config.js chore: use babel.config.js file (#1220) Dec 15, 2019
bundlesize.config.json
commitlint.config.js chore: migrate and make it public Aug 31, 2018
husky.config.js feat: split codebase into packages and set up monorepository (#1177) Dec 4, 2019
jest-puppeteer.config.js refactor: to use CircleCI instead of TravisCI (#615) Mar 29, 2019
jest-runner-eslint.config.js
jest.bundle.config.js chore: use babel.config.js file (#1220) Dec 15, 2019
jest.eslint.config.js chore: move to zeit now (#1207) Dec 5, 2019
jest.stylelint.config.js
jest.test.config.js
jest.visual.config.js chore: use babel.config.js file (#1220) Dec 15, 2019
lerna.json chore(release): publish v10.16.0 Feb 14, 2020
lint-staged.config.js refactor: move components src to corresponding packages folders (#1224) Feb 11, 2020
logo.png chore: add logo (#1201) Nov 28, 2019
now.json
package.json fix(deps): update all dependencies (major) (#1265) Feb 17, 2020
rollup.config.js
vendors-to-transpile.js chore: update react-intl to latest (#962) Jul 29, 2019
yarn.lock fix(deps): update all dependencies (major) (#1265) Feb 17, 2020

README.md

🎹 commercetools UI Kit πŸ’…

Logo

Latest release (latest dist-tag) Latest release (next dist-tag) CI status This project is using Percy.io for visual regression testing Minified + GZipped size GitHub license

✨ Component library based on our design system πŸ› 

If you are building Merchant Center Applications, be sure to check out our application-kit

Installation

$ yarn add @commercetools-frontend/ui-kit

# or

$ npm install --save @commercetools-frontend/ui-kit

Required peer dependencies

UI Kit comes with some peer dependencies which are required to be available in any project consuming it. These include but may not be limited to: moment, moment-timezone, react, react-dom, react-intl and react-router-dom. An up-to-date list with their respective version ranges can be found in the package.json. Please make sure all packages are installed within your application for UI Kit to be able to work as expected.

Importing

The package's main export contains all UI components.

import {
  Text,
  TextInput,
  PrimaryButton,
  // etc.
} from '@commercetools-frontend/ui-kit';

Importing CSS variables

When you are developing your application using UI Kit components, chances you want to use the same design tokens as our design system. We provide them through both CSS variables and JavaScript variables.

Show details

We expose the CSS variables from the @commercetools-uikit/design-system/materials/custom-properties.css file.

Importing css variables in css files

You will need a postcss-import plugin, and a postcss variable plugin: either postcss-custom-properties or postcss-css-variables would work.

@import '@commercetools-uikit/design-system/materials/custom-properties.css';

.container {
  padding: var(--spacing-l);
}
// wherever you process your CSS
postcss([postcssImportPlugin(), postcssCustomProperties()]);

Using postcss-custom-properties and importFrom

The ui-kit css variables can also be injected using postcss-custom-properties, removing the need to import them directly inside your css files.

/* no import required! */
.container {
  padding: var(--spacing-l);
}
// wherever you process your CSS
postcss([
  postcssCustomProperties({
    preserve: false,
    importFrom: require.resolve(
      '@commercetools-uikit/design-system/materials/custom-properties.css'
    ),
  }),
]);

Accessing JavaScript variables and design tokens

You can also access the JavaScript variables like this

import { customProperties } from '@commercetools-frontend/ui-kit';

const primary = customProperties.colorPrimary;

Please look at the file itself to inspect which variables are available (documentation will be provided in the future).

Motivation

  • Declarative components serving as a design guide
  • Shared independently from the application's code base
  • Used across different apps consumed by different teams
  • Shared language between developers and designers

Documentation and Storybook

Available at https://uikit.commercetools.com.

You can’t perform that action at this time.