Nonstop Progressive Marxism

    @afiniti/design-system-2021

    1.2.8 • Public • Published

    @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:

    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.

    Keywords

    none

    Install

    npm i @afiniti/design-system-2021

    DownloadsWeekly Downloads

    9

    Version

    1.2.8

    License

    MIT

    Unpacked Size

    633 kB

    Total Files

    85

    Last publish

    Collaborators

    • neha.akram