Now with Partition Management
    Have ideas to improve npm?Join in the discussion! »

    @tdcerhverv/parrotfish

    3.0.7 • Public • Published

    Parrotfish

    Builds ready-to-use scss variables, mappers, fonts & svg icons directly from figma to a versionable ts and scss file. Uses figma api: https://www.figma.com/developers/docs. Build with npm run build to generate the colors design token in scss & d.ts format.

    Pushing to master is not allowed; please create a branch.

    Be sure to follow steps 1 (UI Upgrades) & 2 (Versioning strategy) for any new additions and create a pull-request on BitBucket against the master branch.

    Questions? Reach out to:

    1. UI Upgrades (for adding new icons / colors, or changing existing)

    In case of UI Upgrades started in UX Chapter (such as new CVI), the following describe the process for bumping new versions of design tokens:

    • Make sure the Figma page ids are passed correctly in all necessary generateDesignToken(SourceFigmaPages, DesignTokens); the parameters are controlled by enums found in ./enums/*.enums.ts
    • npm run generate-all or npm run generate-colors or npm run generate-icons
    • npm version major, commit & push in order to trigger auto-publish; then npm install @tdc-packages/parrotfish@x.x.x the new version you just created in your project.
    • DEBUG:
      • prerequisites: follow Figma's authentication guide and once you've got a developer access token, add it to your environment variables, mapped to FIGMA_TOKEN
      • npm run build:dev if all design-tokens have changed and check if the generated assets look correct.
    • Fragmented approach:
      • npm run generate-colors for fetching new colors from figma (see package.json/scripts);
      • npm run generate-icons for fetching new icons from figma (see package.json/scripts);

    2. Versioning strategy

    This package is not using semver conventions, due to the need of versioning both code & assets. Therefore, use these guidelines when applying npm version <versionType>:

    • major: UX chapter specifically names a CVI-version (optional) and changes all assets entirely
    • minor: breaking code changes
    • patch: new icon added / new color added in Figma

    !! Please update the ./packages/parrotfish/CHANGELOG.md with all changes referred above.

    Design tokens

    • SCSS color variables:
      • using GET: https://api.figma.com/v1/files/FIGMA-COLOR-FILE-ID
      • color pages:
        • master 1.5: CWDhhHgxEb7AEQFKl56RHGvt
        • developer + ux signoff color page ID: Xx1z0Lcl7j8JhXwFLTU3sdbB << currently in use
      • should be imported from dist/colors-design-token.scss
      • format: $color-cerulean-blue-40: rgba(255, 0, 130, 1);
      • theme format (recommended): map-get('primary', $theme);
    • TS color variables:
      • using GET: https://api.figma.com/v1/files/FIGMA-COLOR-FILE-ID
      • color pages:
        • master 1.5: CWDhhHgxEb7AEQFKl56RHGvt
        • developer + ux signoff color page ID: Xx1z0Lcl7j8JhXwFLTU3sdbB << currently in use
      • should be imported from dist/colors-design-token.ts
      • format: theme.primaryLight: '#2d80d3'
      • colorsMap exported as default. keys are formatted with camelCase (example: primary-light -> primaryLight)
    • Icon SVG:

    Usage

    1. Install via npm i @tdcerhverv/parrotfish;
    2. Using the color variables just requires a line as such in your bundler:
    @import '~@tdcerhverv/parrotfish/dist/colors-design-token.scss';
    
    1. Using the icons requires you to have @svgr/parcel-plugin-svgr (>= 4.x) installed (also specified in peerDependencies); Just import ICON_NAME from '@tdcerhverv/parrotfish/dist/icons/ICON_GROUP/ICON_NAME.svg'. ICON_GROUP names correspond to the frames defined in Figma, scoping the icons separately. Example:
    import Account_number from '@tdcerhverv/parrotfish/dist/icons/Icons/Account_number.svg';
    

    Dev

    Published to: https://www.npmjs.com/package/@tdcerhverv/parrotfish Repository: https://bitbucket.tdc.dk/projects/DB/repos/tdc-packages/browse?at=refs/heads/master Development: TypeScript Unit test: Jest Other: node fs, node https

    To Do

    • Ensure dist is not part of the import
    • Scale for different themes, color files, etc. and control with categorized fileEnum
    • Font styles
    • OAuth
    • Unit tests for generate-icons.ts
    • Rename "Figma" to "UITool"

    TDC Erhverv sass utils

    Import sass-utils as scss partials to leverage and ensure consistency in styling of your Erhverv product website. Refer to https://wiki.tdc.dk/display/SE/Styling+guidelines and (link will come soon) for when and how to use them.

    Contents

    • mixins - can be importend separately
    • normalize - must be imported separately
    • design-tokens imports

    Usage

    1. Install via npm i @tdcerhverv/sass-utils;
      NOTE: Please pay attention to peerDependencies warnings and make sure you have the right major version.

    2. Either:
      A) Import shared styles (UX signed off design rules translated to variables & mappers) + all utils into your bundler:

      @import '~@tdcerhverv/sass-utils/_tdc-core';
      

      OR
      B) Import only utils into your bundler:

      @import '~@tdcerhverv/sass-utils/_util';
      
    3. Optional Import nomalize styling.

      @import '~@tdcerhverv/sass-utils/_normalize';
      

    Dev

    Install

    npm i @tdcerhverv/parrotfish

    DownloadsWeekly Downloads

    1,124

    Version

    3.0.7

    License

    MIT

    Unpacked Size

    152 kB

    Total Files

    153

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar