Skip to content

Latest commit

 

History

History
444 lines (296 loc) · 12.6 KB

File metadata and controls

444 lines (296 loc) · 12.6 KB

@guardian/source

13.0.0

Major Changes

12.2.1

Patch Changes

  • 7fb0f8a: bump @isaacs/brace-expansion transitive dep

12.2.0

Minor Changes

  • 71ca777: Update icons and add SvgClosedCaptionsOff and SvgClosedCaptionsOn
  • 81de86f: Add textSans 42 presets (textSans42, textSansBold42, textSansItalic42)

12.1.0

Minor Changes

  • c31ae0c: Validate calculateHoverColour input as hex code and export the function

12.0.0

Major Changes

  • 816eebd:
    • Peer Dependency: Update typescript to 5.9.3
    • Peer Dependency: Update tslib to 2.8.1

11.3.1

Patch Changes

11.3.0

Minor Changes

  • f5e3b0b: Add new icons: AI Indicator, Guess Puzzles and Trophy

11.2.0

Minor Changes

  • f1cb6e6: Add new palette colours for Labs: 100, 500, 600, 700

11.1.0

Minor Changes

  • 4186157: Add notificationBlue.400 colour. Fixes previous addition of opinion.700 which was not built

11.0.0

Major Changes

  • f1248c7: Update lifestyle 800 colour

    This change improves contrast against the neutral.46 colour, ensuring compliance with WCAG accessibility standards for text and background colour contrast.

10.2.0

Minor Changes

  • b574bf9: Add automatic hover colour calculation for Button themes

    backgroundPrimaryHover, backgroundSecondaryHover and backgroundTertiaryHover are now optional properties of ThemeButton. If supplied these hover colours will be used, if not then the following rules will be used to create a hover colour based on the lightness of the other colours.

    Background colour:
    Very Dark (Luminosity: 0–10) Lighten by 20% on hover.
    Dark (Luminosity: 11–20) Darken by 8% on hover.
    Medium (Luminosity: 21–80) Darken by 5% on hover.
    Light (Luminosity: 81-90) Darken by 7% on hover.
    Very Light (Luminosity 91-100) Darken by 10% on hover.
    Borders with transparent backgrounds:
    Luminosity 0–40 Set border colour opacity to 10%.
    Luminosity 40–50 Set border colour opacity to 15%.
    Luminosity 51–100 Set border colour opacity to 20%.

10.1.0

Minor Changes

  • 65c6eaf: Add new colour shades news.700, sport.700 and opinion.700
  • 601cc6e: Adds new icons SvgCloudSync and SvgCloudUpload

10.0.0

Major Changes

  • 3f1442d: Bump @emotion/react to 11.11.4

9.0.0

Major Changes

  • 29e58ba: Adds new icons to source and both renames and removes some existing icons. This is a major bump and consumers using removed icons will need to update their UI.
  • The following icons have been added to source:
'add-to-basket': 'Add to basket',
'all-recipes': 'All recipes',
'bookmark-round-filled': 'Bookmarked',
'bookmark-round-outlined': 'Bookmark',
chef: 'Chef',
'chevron-left-single-small': 'Chevron left',
'chevron-right-single-small': 'Chevron right',
'clock-filled': 'Clock',
'clock-outlined': 'Clock',
cuisines: 'Cuisines',
diets: 'Diets',
discover: 'Discover',
'folder-filled': 'Folder',
folder: 'Folder',
'headphones-filled': 'Listening',
'headphones-outlined': 'Listen',
'headphones-round-filled': 'Listening',
'headphones-round-outlined': 'Listen',
list: 'list',
'meal-types': 'Meal types',
'newspaper-archive': 'Newspaper archive',
'newsletter-outlined': 'Newsletter',
'padlock-locked': 'Padlock locked',
'padlock-unlocked': 'Padlock unlocked',
'share-round-filled': 'Share',
'share-round-outline': 'Share',
'shopping-list': 'Shopping list',
'shopping-basket': 'Shopping basket',
sort: 'Sort',
'text-size-round-filled': 'Text size active',
'text-size-round-outline': 'Text size',
'transparent-arrow-left-straight-round': 'Go back',
'white-arrow-left-straight-round': 'Go back',
  • The following icons have been updated in source:

    newsletter has become newsletter-filled

  • The following icons have been removed in source:

SvgAlertTriangle
SvgDirectDebitWide

8.0.2

Patch Changes

  • 5de61bb: Fix eslint errors after version bump

8.0.1

Patch Changes

  • 064c5fb: Fixes for new eslint config

8.0.0

Major Changes

  • 33608e2: Disallows direct use of Emotion's css prop on Source components.

    If you need to override the internal styling of Source components, use cssOverrides instead.

7.0.1

Patch Changes

  • 80eea1d: Small refactors to allow Eslint updates

7.0.0

Major Changes

  • 238dfd3: Removes deprecated typography API.

    In @guardian/source-foundations@14.2.0 (2024-04-07), we added new web typography presets to standardise on the typographic language used by Design, and deprecated the old typography API.

    This release removes that old API, in order to simplify the ongoing maintenance of the library.

    The following exports have been removed:

    • titlepiece
    • headline
    • body
    • textSans
    • titlepieceSizes
    • headlineSizes
    • bodySizes
    • textSansSizes
    • remTitlepieceSizes
    • remHeadlineSizes
    • remBodySizes
    • remTextSansSizes
    • fonts
    • fontWeights
    • lineHeights
    • bodyObjectStyles
    • headlineObjectStyles
    • textSansObjectStyles
    • titlepieceObjectStyles

    along with the following type exports:

    • ScaleUnit
    • Category
    • LineHeight
    • FontWeight
    • FontStyle
    • FontWeightDefinition
    • Option
    • TypographySizes
    • TypographyStyles
    • TitlepieceSizes
    • HeadlineSizes
    • BodySizes
    • TextSansSizes
    • Fs
    • FontScaleFunction
    • FontScaleFunctionStr
    • FontScaleArgs

    If you cannot map existing uses of the old API to the new presets, please check which preset you should use with a designer.

  • 447e6b6: Applies consistent spacing around checkboxes and radio buttons by removing conditional styles and using padding to ensure minimum height of 44px.

    The external padding is now consistent regardless of the presence of a label and / or supporting text, and removes any inconsistency when these elements are stacked vertically.

    Checkboxes and radio buttons are also now aligned with the first line of text when labels wrap on to multiple lines.

  • 7805d16: Brings remSize, remIconSize, remHeight and remWidth into line with remSpace, by changing their values from a number (of rems) to a string that ends with rem units.

    pxToRem also now returns a string with rem units, rather than a number of rems.

    The sizes haven't changed, only the way they are exported.

    Before

    const style = `
    	top: ${pxToRem(10)}rem;
    	bottom: ${remHeight.ctaSmall}rem;
    `;

    After

    const style = `
    	top: ${pxToRem(10)};
    	bottom: ${remHeight.ctaSmall};
    `;

    If you have been performing calculations with the old number values in JS, you can use the CSS calc function instead:

    Before

    const style = `
    	bottom: -${remHeight.ctaSmall / 2}rem;
    `;

    After

    const style = `
    	bottom: calc(-${remHeight.ctaSmall} / 2);
    `;

Patch Changes

  • 69ecc3f: Moves design tokens into @guardian/source itself.

    Allows us to calculate @guardian/source/foundations values during build, rather than at the point of consumption, which relieves user's devices of this overhead and means the design tokens JSON will no longer be included in consumer's bundles.

6.1.0

Minor Changes

  • 11c62af: Adds headlineBold15, headlineLight15, headlineLightItalic15, headlineMedium15 and headlineMediumItalic15 to the typography presets

6.0.0

Major Changes

  • d274436: Adds new icons to the icon library and applies updates to existing icons. In addition, some icons have been renamed and others deprecated. Icons that were previously deprecated have now been removed in this update.

    Renamed icons

    These icons have been renamed:

    Old name New name
    SvgBookMark SvgBookmarkFilled
    SvgBookMarkCross SvgBookmarkCross
    SvgCrossRound SvgCrossRoundFilled
    SvgHouse SvgHomeHouseFilled
    SvgPersonRound SvgPersonRoundFilled
    SvgShare SvgShareWeb

    Deprecated icons

    These existing deprecated aliases have been removed:

    Removed Aliased to
    SvgOfflineCloud SvgCrossedOutCloud
    SvgAlert SvgExclamation
    SvgMessenger SvgFacebookMessenger
    SvgInfo SvgInfoRound
    SvgPlay SvgMediaControlsPlay
    SvgPayPal SvgPayPalBrand

    eg. if you are importing SvgOfflineCloud this is aliased to SvgCrossedOutCloud. The alias has now been removed so you should import SvgCrossedOutCloud directly.

    The following icons have been deprecated and are still available, but will be removed in a future release:

    Don't use Use instead
    SvgAlertTriangle SvgAlertRound
    SvgFilter SvgFilterOutlinedWeb
    SvgShareCallout SvgShareWeb

5.0.0

Major Changes

  • e5b15dc: Update TypeScript support to v5.5.2.

4.0.0

Major Changes

  • dc79048: Adds Guardian Headline 64px typography presets and removes Guardian Headline 70px presets.

    headlineBold64
    headlineLight64
    headlineLightItalic64
    headlineMedium64
    headlineMediumItalic64
    
  • 490384d: Now has a peer dependency of @emotion/react@^11.11.3 (from ^11.11.1).

    Fixes conflicting types between Emotion's deps, as outlined in emotion-js/emotion#3141.

3.0.0

Major Changes

  • a275431: Removes SvgSpinner from icon library and replaces with dedicated Spinner component. The size prop supports the existing set of named icon sizes for backwards compatibility, but also allows setting a custom size in pixels. The default colour scheme can be overridden with the theme prop.

    <>
    	<Spinner size="small" />
    	<Spinner size={40} />
    	<Spinner theme={{ background: 'transparent', color: 'currentColor' }} />
    </>

2.1.0

Minor Changes

  • 803f111: Adds success.300 to the colour palette

2.0.0

Major Changes

  • 637d127:
    • Adds collapseUntil option to Inline layout component to allow collapsing into a single column below a given breakpoint.
    • Text and icons are now horizontally centred within buttons. Visually this is only apparent if a button's styles have been overridden and it is stretched beyond it's natural intrinsic width. (Previously the text and icon would be pushed to the edges of the button.)

Patch Changes

  • 1921d8c: Fixes bug where space.0 was not applied to Inline layouts and updates Column and Stack to support all spacing units

1.0.3

Patch Changes

  • 957cbac: call react hook useId before conditional

1.0.2

Patch Changes

  • 522b68e: Replaced internal uses of generateSourceId with React's useId, as it does not change when the component is re-rendered.
  • 2e48c80: Make react and @emotion/react optional peerDeps (you don't need them if you're not using react components).

1.0.1

Patch Changes

  • be759ac: Improve README

0.3.0

Minor Changes

  • e60f79e: third attempt

1.0.0

Major Changes

First production release of single Source package.

Combining @guardian/source-foundations@16.0.0 and @guardian/source-react-components@25.0.0 into single package.

Before

import { palette } from '@guardian/source-foundations'
import { Button } from '@guardian/source-react-components'

After

import { palette } from '@guardian/source/foundations'
import { Button } from '@guardian/source/react-components'

There will be no more updates to the two separate packages. From now on, all updates to Source will come via this single package.