MasterClass Components

Browser support

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung | Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

mc-components aims to provide primitive components to build user interfaces in MasterClass.

Getting Started

This component library is most easily imported as a dependency. You can use yarn or npm to bring it in to your project. This ensures all required js and styles are included.

yarn add mc-components

Components

import { Button } from 'mc-components'

const Container = () =>
  <Button primary>Hello</Button>

Styles

The style library must also be imported manually into your root SCSS file.

@import 'mc-components/dist/styles/scss/index'

Masterclass uses the licensed font "Sohne" as its primary font for headings and body text. You can replace the references to this font stack by updating the $mc-font-default variable in the style variables file.

src/styles/base/variables.scss

Development

If you'd like to contribute to mc-components, please read the docs on our principles to get familiar with the concepts that are the foundation for the component library. After making contributions, we also have docs on how to version, release and deploy if you are part of the team that can do so.

mc-components utilizes Storybook, which provides a living version of the documentation for all components.

yarn install
yarn start

If you want to develop in mc-components and see changes compiled into your own project you can utilize yarn link and the dev script:

Inside of the mc-components directory

# Inside mc-components directory!
yarn link
yarn dev

From your other project directory

(For Masterclass employees, this is the masterclass directory):

# other project
yarn link mc-components

To get back to an officially released version, run this in your project:

yarn unlink mc-components
yarn install

To update the live documentation, run the following command from the root directory:

yarn deploy

PRs Welcome

• Create a PR with your changes
• Once approved, it will be merged into develop and released with the next version bump.

For further information on linting, versioning, and releasing, please see the wiki for documentation