How to use the @govuk-react/constants.FOCUS_WIDTH.split function in @govuk-react/constants

To help you get started, we’ve selected a few @govuk-react/constants 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 / hidden-text / src / index.js View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import InsetText from '@govuk-react/inset-text';
import { LINK_COLOUR, LINK_HOVER_COLOUR, FOCUS_COLOUR } from 'govuk-colours';
import { FOCUS_WIDTH, FONT_SIZE, SPACING, NTA_LIGHT } from '@govuk-react/constants';
import { withWhiteSpace } from '@govuk-react/hoc';

const HIDDEN_TEXT_FOCUS_WIDTH = `${parseInt(FOCUS_WIDTH.split('px')[0], 10) + 1}px`;

const StyledSpan = styled('span')({
  textDecoration: 'underline',
  textDecorationSkipInk: 'none',
});

const StyledSummary = styled('summary')({
  cursor: 'pointer',
  color: LINK_COLOUR,
  fontFamily: NTA_LIGHT,
  fontSize: FONT_SIZE.SIZE_19,
  position: 'relative',
  marginBottom: SPACING.SCALE_1,
  ':hover': {
    color: LINK_HOVER_COLOUR,
  },