How to use the @govuk-react/lib.shape.arrow function in @govuk-react/lib

To help you get started, we’ve selected a few @govuk-react/lib examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github govuk-react / govuk-react / components / back-link / src / index.js View on Github external
const Anchor = styled('a')(
  typography.font({ size: 16 }),
  link.common(),
  link.styleText,
  {
    display: 'inline-block',
    position: 'relative',
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[3],
    paddingLeft: '14px',
    borderBottom: `1px solid ${BLACK}`,
    textDecoration: 'none',
    '::before': {
      ...shape.arrow({ direction: 'left', base: 10, height: 6 }),

      content: "''",
      position: 'absolute',
      top: '-1px',
      bottom: '1px',
      left: 0,
      margin: 'auto',
    },
  },
  spacing.withWhiteSpace(),
);

/**
 *
 * ### Usage
 *
github govuk-react / govuk-react / components / details / src / index.js View on Github external
'::-webkit-details-marker': {
    display: 'none',
  },

  ':before': {
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    margin: 'auto',

    ...shape.arrow({ direction: 'right', base: 14 }),

    '[open] > &': shape.arrow({ direction: 'down', base: 14 }),
  },
});

const SummaryText = styled('span')({
  textDecoration: 'underline',
});

const DetailsText = styled('div')({
  padding: SPACING_POINTS[3],
  paddingLeft: SPACING_POINTS[4],
  borderLeft: `${BORDER_WIDTH} solid ${BORDER_COLOUR}`,

  p: {
    marginTop: 0,
    marginBottom: SPACING_POINTS[4],
  },
github govuk-react / govuk-react / components / details / src / index.js View on Github external
background: FOCUS_COLOUR,
  },

  '::-webkit-details-marker': {
    display: 'none',
  },

  ':before': {
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    margin: 'auto',

    ...shape.arrow({ direction: 'right', base: 14 }),

    '[open] > &': shape.arrow({ direction: 'down', base: 14 }),
  },
});

const SummaryText = styled('span')({
  textDecoration: 'underline',
});

const DetailsText = styled('div')({
  padding: SPACING_POINTS[3],
  paddingLeft: SPACING_POINTS[4],
  borderLeft: `${BORDER_WIDTH} solid ${BORDER_COLOUR}`,

  p: {
    marginTop: 0,