@afiniti/design-system-2021

@afiniti/design-system

Test Package Locally

To test our package locally in any project please follow these steps.

1. navigate to root directory of design-system
2. run compile command: run npm compile
3. run link command: npm link this will create a symlink to our node_modules
4. 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:

• Variables
• Classes

Publish Package

Note: to publish private package you are required to login with paid account / or set the appropriate access token.

1. rename package.json to package.json.web
2. rename package.json.lib to package.json
3. increment version number in package.json
4. run command npm run compile from project root to ensure successful build
5. 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.