sdc-component-library
v1.1.96
Published
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.
Downloads
147
Readme
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/[email protected]/dist/sdc.css
Sofia Pro font (if not using sdc.css
file)
https://cdn.jsdelivr.net/npm/[email protected]/src/static-assets/fonts/sofia-pro/sofia-pro.css
Feather Icon font (if not using sdc.css
file)
https://cdn.jsdelivr.net/npm/[email protected]/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/
In your
plugins/
directory create a file calledsdc-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);
In your
nuxt.config.js
file include'~/plugins/sdc-component-library'
in theplugins: [...]
array. If you do not have one yet, it should look something like this:export default { plugins: ['~/plugins/sdc-component-library'] }
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 thebuild:
object to prevent parsing errors from Nuxt since this is a pre-compiled CSS file.OPTIONALLY include the CSS from an external resource in the
nuxt.config.js
file'shead
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/[email protected]/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