@afiniti/design-system
Test Package Locally
To test our package locally in any project please follow these steps.
- navigate to root directory of design-system
- run compile command:
run npm compile
- run link command:
npm link
this will create a symlink to our node_modules - navigate to desire project and run
npm link "@afiniti/design-system"
this
will connect with symlink node_module
Now you are able to test the package into any npm project available locally
- simply navigate to any component and import components from library
For Example:
import {BackCta} from '@afiniti/afiniti-design-system/dist/Buttons'
<BackCta path="/" theme={theme} text="Global Leaders" />
SCSS Classes and Variables
The documentation for the exported SCSS variables and global classes are
available here:
Publish Package
Note: to publish private package you are required to login with paid account /
or set the appropriate access token.
- rename package.json to package.json.web
- rename package.json.lib to package.json
- increment version number in package.json
- run command npm run compile from project root to ensure successful build
- run command npm publish to release new package version to npm
Project setup with design-system
-
npm install @afiniti/design-system
-
Setup scss structure with partials and globals using the styles located in
@afiniti/design-system/dist/styles
- Each partial file in your scss structure should import its corresponding
file from the design system.
- Your base.scss file should import all your partials.
- Your app.scss file should then import all global scss and base.scss
- A sample of these files would look like this:
- _colors.scss:
@import '~@afiniti/design-system/dist/styles/partials/colors.scss';
// your project specific variables here
$textColorSecondary: $secondaryColor;
$backgroundColorSecondary: $secondaryColor;
- _base.scss:
@import '~@afiniti/design-system/dist/styles/base/base';
@import '../partials/colors';
@import '../partials/variables';
@import '../partials/_mixins';
@import '../partials/extends';
- default.scss:
@import './base';
@import '~@afiniti/design-system/dist/styles/base/default.scss';
- app.scss:
@import 'styles/base/base';
@import 'styles/base/reset';
@import 'styles/base/default';
@import 'styles/base/global';
- Your final scss structure should look like this:
- /styles
- /base
- base.scss
- default.scss
- global.scss
- reset.scss
- /partials
- _colors.scss
- _extends.scss
- _mixins.scss
- _variables.scss
- /utilities
- utility1.scss
- utility2.scss
- app.scss
-
Add AppContext for header and navigation
- The header and navigation components require an AppContext with a reducer to
receive actions to function correctly. You may copy and modify the context
file used in this
project here.