Skip to content

Commit

Permalink
Add break-word typography helper
Browse files Browse the repository at this point in the history
  • Loading branch information
querkmachine committed Jul 19, 2024
1 parent 52e46ef commit ab8633d
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 1 deletion.
17 changes: 17 additions & 0 deletions packages/govuk-frontend/src/govuk/helpers/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,23 @@
font-variant-numeric: tabular-nums if($important, !important, null);
}

/// Word break helper
///
/// Forcibly breaks long words that lack spaces, such as email addresses,
/// across multiple lines when they wouldn't otherwise fit.
///
/// @param {Boolean} $important [false] - Whether to mark declarations as
/// `!important`. Generally Used to create override classes.
/// @access public

@mixin govuk-font-break-words($important: false) {
// IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
word-wrap: break-word if($important, !important, null);

// All other browsers support `overflow-wrap`
overflow-wrap: break-word if($important, !important, null);
}

/// Convert line-heights specified in pixels into a relative value, unless
/// they are already unit-less (and thus already treated as relative values)
/// or the units do not match the units used for the font size.
Expand Down
44 changes: 44 additions & 0 deletions packages/govuk-frontend/src/govuk/helpers/typography.unit.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,50 @@ describe('@mixin govuk-font-tabular-numbers', () => {
})
})

describe('@mixin govuk-font-break-words', () => {
it('adds the word-wrap and overflow-wrap properties', async () => {
const sass = `
${sassBootstrap}
.foo {
@include govuk-font-break-words;
}
`

const results = compileSassString(sass)

await expect(results).resolves.toMatchObject({
css: outdent`
.foo {
word-wrap: break-word;
overflow-wrap: break-word;
}
`
})
})

it('marks the properties as important if $important is set to true', async () => {
const sass = `
${sassBootstrap}
.foo {
@include govuk-font-break-words($important: true);
}
`

const results = compileSassString(sass)

await expect(results).resolves.toMatchObject({
css: outdent`
.foo {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
`
})
})
})

describe('@function _govuk-line-height', () => {
it('preserves line-height if already unitless', async () => {
const sass = `
Expand Down
6 changes: 5 additions & 1 deletion packages/govuk-frontend/src/govuk/overrides/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,13 @@
@include govuk-typography-weight-bold($important: true);
}

// Tabular numbers
// Typography helpers

.govuk-\!-font-tabular-numbers {
@include govuk-font-tabular-numbers($important: true);
}

.govuk-\!-font-break-words {
@include govuk-font-break-words($important: true);
}
}

0 comments on commit ab8633d

Please sign in to comment.