SDC Component Library

This package contains a CSS framework and Vue UI component library based off of SDC's custom design system for consistent UI development at SmileDirectClub.

Latest available version

Storybook

https://component-library-prod.smiledirectclub.com/

We use Storybook to house our custom component examples and documentation for each component on the "Docs" tab.

NOTE: You need to be connected to SDC's VPN to view the Storybook link.

Underlying Frameworks

This component library is built on top of customized versions of the Bulma CSS framework and Buefy Vue framework.

When you include the sdc-component-library package in your application, you will be able to use any HTML & CSS Templates or Vue components included in those underlying frameworks as well as our custom SmileComponents.

• Bulma docs: https://bulma.io/documentation/
• Buefy docs: https://buefy.org/documentation/

Consuming/Using this package in your application

Install with NPM or Yarn

npm i sdc-component-library

yarn add sdc-component-library

CSS only

The sdc.css file contains our entire CSS framework including the Sofia Pro font and Feather Icon font imports.

Path to package CSS file

node_modules/sdc-component-library/dist/sdc.css

CDN

Entire framework - NOTE: Replace version number with latest/desired version.

https://cdn.jsdelivr.net/npm/sdc-component-library@1.1.7/dist/sdc.css

Sofia Pro font (if not using sdc.css file)

https://cdn.jsdelivr.net/npm/sdc-component-library@1.1.7/src/static-assets/fonts/sofia-pro/sofia-pro.css

Feather Icon font (if not using sdc.css file)

https://cdn.jsdelivr.net/npm/sdc-component-library@1.1.7/src/static-assets/icons/feather/feather.css

Nuxt.js

Nuxt uses a built-in functionality of theirs called Plugins to import global dependencies.

Nuxt plugin docs: https://nuxtjs.org/docs/2.x/directory-structure/plugins/

1. In your plugins/ directory create a file called sdc-component-library.js with the following:

   import Vue from 'vue'
   import ComponentLibrary from 'sdc-component-library';
   import 'sdc-component-library/dist/sdc.css';
   // ^^ you can omit this CSS import if you prefer to include it in the nuxt.config.js as shown in option 3 or 4 below.
   
   Vue.use(ComponentLibrary);
   

2. In your nuxt.config.js file include '~/plugins/sdc-component-library' in the plugins: [...] array. If you do not have one yet, it should look something like this:

   export default {
     plugins: ['~/plugins/sdc-component-library']
   }
   

3. OPTIONALLY include the core css in your nuxt.config.js in the css object:

   css: [
     'sdc-component-library/dist/sdc.css',
   ],
   
   

   NOTE: You may need to also set postcss: false, in the build: object to prevent parsing errors from Nuxt since this is a pre-compiled CSS file.

4. OPTIONALLY include the CSS from an external resource in the nuxt.config.js file's head object. Update the version number in the URL to the latest or desired version.

   head: {
    link: [
      { rel: 'stylesheet', type: 'text/css', preload: true, href: 'https://cdn.jsdelivr.net/npm/sdc-component-library@1.1.7/dist/sdc.css' }
    ]
   },
   

Vue CLI

To Install the entire Vue component library globally, in your main.js file add:

import ComponentLibrary from 'sdc-component-library';
import 'sdc-component-library/dist/sdc.css';
Vue.use(ComponentLibrary);

Or install specific components in individual files

Import core css file in main.js:

import 'sdc-component-library/dist/sdc.css';

Then use in individual files (Example for pulling in a smile-button):

<template>
  <div>
    <smile-button>I'm a Button</smile-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { SmileButton } from 'sdc-component-library';

export default Vue.extend({
  name: 'AwesomeExampleComponent',
  components: { SmileButton }
});
</script>

NOTE: if you run into a typescript "sdc-component-library' is not a module error, then specify the following in the shims-vue.d.ts to declare the module so typescript knows about it.

declare module 'sdc-component-library';

Best practices when developing applications with this library

Below are some internal best practices when developing your own application using SDC Component Library: https://smiledirectclub.atlassian.net/wiki/spaces/UX/pages/2236088501/Developing+with+SDC+Component+Library

Contributing / Developing for this Repo

Contrubuting / Developing Docs can be found in our private Confluence: https://smiledirectclub.atlassian.net/wiki/spaces/UX/pages/1371767133/SDC+Component+Library#Contributing-to-SDC-Component-Library-Source-Code