Skip to content

helpers.mdx

Latest commit

 

History

History
272 lines (203 loc) · 6.48 KB

helpers.mdx

File metadata and controls

272 lines (203 loc) · 6.48 KB
Raw

import { Meta } from '@storybook/blocks';

Helper methods

pxToRem

Converts px values to rem units based on value of BASE_FONT_SIZE constant (currently set to 16).

This function takes any number of arguments and returns converted values in given order.

import { pxToRem } from '@securityscorecard/design-system';

// pxToRem :: (number | string)... -> string
pxToRem(16, auto, 0); // -> '1rem auto 0'

createSpacing (DEPRECATED)

Use Layout Primitives instead.

Generates spacing values of given kind (margin or padding) for given value based on BASE_LINE_HEIGHT constant (currently set to 20).

import { createSpacing } from '@securityscorecard/design-system';

// createSpacing :: Kind -> Value -> string | string[]
// Kind - 'margin' or 'padding'
// Value - number or 'none' or object
createSpacing('margin', 1); // -> margin: 1.25rem;
createSpacing('margin', 'none'); // -> margin: 0;
createSpacing('margin', { horizontal: 2, vertical: 1 });
/*
  -> margin-top: 1.25rem;
  -> margin-bottom: 1.25rem;
  -> margin-left: 2.5rem;
  -> margin-right: 2.5rem;
*/
createSpacing('margin', { top: 1, bottom: 2, left: 3, right: 4 });
/*
  -> margin-top: 1.25rem;
  -> margin-bottom: 2.5rem;
  -> margin-left: 3.75rem;
  -> margin-right: 5rem;
*/

createMarginSpacing, createPaddingSpacing (DEPRECATED)

Use Layout Primitives instead.

Generates spacing values for given kind.

import {
  createMarginSpacing,
  createPaddingSpacing,
} from '@securityscorecard/design-system';

createMarginSpacing({ horizontal: 2, vertical: 1 });
/*
  -> margin-top: 1.25rem;
  -> margin-bottom: 1.25rem;
  -> margin-left: 2.5rem;
  -> margin-right: 2.5rem;
*/

createPaddingSpacing({ horizontal: 2, vertical: 1 });
/*
  -> padding-top: 1.25rem;
  -> padding-bottom: 1.25rem;
  -> padding-left: 2.5rem;
  -> padding-right: 2.5rem;
*/

createSpacings (DEPRECATED)

Use Layout Primitives instead.

Generates spacing values for both kinds.

import { createSpacings } from '@securityscorecard/design-system';

createSpacings({ margin: { horizontal: 2, vertical: 1 }, padding: 4 });
/*
  -> margin-top: 1.25rem;
  -> margin-bottom: 1.25rem;
  -> margin-left: 2.5rem;
  -> margin-right: 2.5rem;
  -> padding-top: 5rem;
  -> padding-bottom: 5rem;
  -> padding-left: 5rem;
  -> padding-right: 5rem;
*/

createPadding

Generates padding of given type with given standard size.

import { createPadding } from '@securityscorecard/design-system';

const Box = styled.div<{paddingType: PaddingType; paddingSize: SpaceSize}>`
  ${createPadding};
`

<Box paddingType="square" paddingSize="lg" />
/*
  -> padding: 2rem;
*/

<Box paddingType="squish" paddingSize="lg" />
/*
  -> padding: 2rem 1rem;
*/

<Box paddingType="stretch" paddingSize="lg" />
/*
  -> padding: 1rem 2rem;
*/

Theme getters

These methods retrieving values from the theme object and can be used only in styled-components template literals.

getColor

Returns color from theme for given key.

import { getColor } from '@securityscorecard/design-system';

// getColor :: Color -> Props -> string
// Color - any key of 'ColorTypes' (src/theme/colors.enums.ts)
// Props - styled-components props object
const Component = styled.div`
  color: ${getColor('neutral.0')};
`; // -> color: #000;

getFontFamily

Returns font-family chain from theme for given key.

import { getFontFamily } from '@securityscorecard/design-system';

// getFontFamily :: Family -> Props -> string
// Family - any key of 'family' (src/theme/typography.ts)
// Props - styled-components props object
const Component = styled.div`
  font-family: var(--sscds-font-family-body);
`; // -> font-family: 'Inter', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;

getFontWeight

Returns font-weight from theme for given key.

import { getFontWeight } from '@securityscorecard/design-system';

// getFontWeight :: Weight -> Props -> number
// Weight - any key of 'weight' (src/theme/typography.ts)
// Props - styled-components props object
const Component = styled.div`
  font-weight: ${getFontWeight('medium')};
`; // -> font-weight: 500;

getFontSize

Returns font-size from theme for given key.

import { getFontSize } from '@securityscorecard/design-system';

// getFontSize :: Size -> Props -> string
// Size - any key of 'size' (src/theme/typography.ts)
// Props - styled-components props object
const Component = styled.div`
  font-size: ${getFontSize('lg')};
`; // -> font-size: 15px;

getLineHeight

Returns line-height from theme for given key.

import { getLineHeight } from '@securityscorecard/design-system';

// getLineHeight :: Size -> Props -> string
// Size - any key of 'lineHeight' (src/theme/typography.ts)
// Props - styled-components props object
const Component = styled.div`
  line-height: ${getLineHeight('lg')};
`; // -> line-height: 20px;

getRadii

Returns border-radius from theme for given key.

import { getRadii } from '@securityscorecard/design-system';

// getRadii :: Type -> Props -> string
// Type - any key of 'radii' (src/theme/radii.ts)
// Props - styled-components props object
const Component = styled.div`
  border-radius: ${getRadii('default')};
`; // -> border-radius: 4px;

getFormStyle

Returns form style from theme for given key.

import { getFormStyle } from '@securityscorecard/design-system';

// getFormStyle :: Property -> Props -> string
// Property - any key of 'forms' (src/theme/forms.ts)
// Props - styled-components props object
const Component = styled.input`
  background: ${getFormStyle('bgColor')}; // -> #fff
  border: 1px solid ${getFormStyle('borderColor')}; // -> 1px solid #b4b4b4
  color: ${getFormStyle('color')}; // -> #2a2a2a
`;

getDepth

Returns z-index from theme for given element.

import { getDepth } from '@securityscorecard/design-system';

// getDepth :: Element -> Props -> string
// Element - any key of 'depth' (src/theme/depths.ts)
// Props - styled-components props object
const Component = styled.input`
  z-index: ${getDepth('modal')};
`; // -> z-index: 1250;

getSpace

Returns space value from theme for given size.

import { getSpace } from '@securityscorecard/design-system';

// getDepth :: Element -> Props -> string
// Element - any key of 'depth' (src/theme/depths.ts)
// Props - styled-components props object
const Component = styled.input`
  margin-bottom: ${space('m')};
`; // -> margin-bottom: 1rem;