![]() 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.
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
import { Button } from 'mc-components'
const Container = () =>
<Button primary>Hello</Button>
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
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 mc-components directory!
yarn link
yarn dev
(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
- 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