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.

Adding new colors and icons

• ensure your icons & colors are added to the correct Figma pages (see /enums/source.enum.ts)
• save and publish in Figma
• run npm run generate-all
• only new svgs + icons.ts should see updates if any new icons (inside /dist/)
• only colors-design-token.scss should be seen as update if any new colors (inside /dist/)
• new branch, commit, push, pull-request & merge

Contents

• mixins - can be importend separately
• normalize - must be imported separately
• design-tokens imports
• typography - import and use as css-modules in react. Current font-families:
  • Roboto - default
  • TDC - fallback 1, mainly used in and
  • sans-serif - fallback 2

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';

Typography

Import into typescript file.

import typography from '@tdcerhverv/sass-utils/typography.scss';

Optional combine with component styling.

const cn = classnames.bind({
  ...componentStyles,
  ...typography,
});

Use cn to trigger classes the easy way.

function Component({
  children,
  weight,
  align,
  uppercase,
  emphasis,
  underline,
}): {
  children?: ReactNode;
  weight?: 'thin' | 'regular' | 'strong';
  align?: 'left' | 'center' | 'right' | 'justify';
  uppercase?: boolean;
  emphasis?: boolean;
  underline?: boolean;
} {
  return (
    <p
      className={cn(
        {
          [weight]: Boolean(weight),
          [align]: Boolean(align),
          uppercase,
          emphasis,
          underline,
        }
      )}
    >
      {children}
    </p>
  );
}

Dev

Published to: https://www.npmjs.com/package/@tdcerhverv/sass-utils
Repository: https://bitbucket.tdc.dk/projects/DB/repos/tdc-packages Development: SCSS