Changelog

- Adds variants to TextInputand Select.

- Adds input as font size.

- Fixes pipeline

- Updates README

- Updates Light, Dark and Primitives

- Fixes CTA Button text design

- Makes font color of Sats and Elixia anniversary logos dynamic

- Adds light versions of 30 year anniversary logos for Sats and Elixia

- Change TextInput and Search input font sizes to custom sizes.

- Upgrade to React v19. Keeps support for React v18.

- Makes a Collapse component and removes the react-tiny-collapse dependency

- Updates Select component design partially

- icon prop removed from Select

- Updates package.json

- Removes deprecated APIs

- light, dark and primitive colour updates

- Font sizes split into tokens to use in various places

- VisuallyButton design fixes

- TextInput design fixes

- Checkbox design cleanup for future line height change

- Updates Search font sizing to use font-sizes tokens

- Fixes VisuallyButton text horizontal centring

- Fixes VisuallyButton text not being centred when multiple buttons are side by side and one has text onto a new line

- Fixes Button type for ToolBox's click area

- Adds the labelPosition property to Select

- Hotfix selectOption type

- Hotfix select type

- Updates dependencies

- Converts any types.

- Removes the usage of lightmode and darkmode from all components in favour of light.

- VisuallyButton colours moved to light instead of lightmode

- VisuallyButton new prop trailingIcon and hasStackedIcon

- light & dark colour updates

- VisuallyButton icon prop name renamed to leadingIcon to account for the new trailingIcon

- Again refactors away Sass' transparentize

> This means that [...] transparentize() [...] will be removed.

>

> – https://sass-lang.com/documentation/-changes/color-functions/#single-channel-adjustment-functions

- Fixes ContextMenu design bugs & updates docs

- Updates ContextMenu to latest colours, adds smallDescription prop and adds destructive theme to items

- Fixes ChipSelected design

- Fixes sticky buttons and header on Modal

- Refactors away Sass' transparentize

> This means that [...] transparentize() [...] will be removed.

>

> – https://sass-lang.com/documentation/-changes/color-functions/#single-channel-adjustment-functions

- Fixes scrolling in Modal

- Adds hiddenLabel to TextInput

- Fixes width of Modal on smaller content.

- New optional labelAlignment prop on ProgressBar.

- Fixes overlapping title and button on Modal.

- Fixes onClick handling of Modal action buttons.

- Updates title header theme for Modal

- Fixes spacings on Modal

- Fixes hover colors for Chip.

- Modal: New prop actions, a list of Button and/or LinkButton. If it's included, it moves the close button to top right on small screens.

- Modal: Sets title as optional prop as per spec

- Modal: Changes close button variant

- Fixes double underline bug for ContextMenu

- Adds new positions for ContextMenu

- Adds new colours to light, dark and primitives

- Fixes text theme for Chip.

- Update design of Chip. Adds isSelected prop.

- Removes use of defaultProps.

- More UI options for Toggle

- labelPosition and spaceBetween controls for Toggle docs

- Updates context-menu to support buttons

- Renames the type Button to Form. The type Button is still in use for buttons.

- Add new position for context menu

- Updates colours

- Fixes sass warnings

- Fixes Search buttons layout

- Design changes to Toggle.

- Adding optional labelPosition to Toggle types.

- Updates FormContentcomponent to be top aligned.

- Removes alignments from FormContent.

- Design changes to Form Content

- Design change to Search

- Updates light, dark and primitives

- Removes max width from TextArea

- Design changes to FormContent component.

- Fixes max width of TextArea

- Fixes character count of TextArea

- Loading states before isMounted on Search and Filter

- Adds destructive variants of primary, secondary and tertiary for VisuallyButton

- Fixes padding on tertiary icon variant of VisuallyButton when it is disabled.

- Removes automatic defaultOpen on ExpanderListItem when only one item in list.

- Adds additional input props to HiddenInput component.

- Fixes aria-label on Search not showing despite hiding label.

- Removes optional id for Expander button

- Updates Expander design

- Adds themes and variants to Flag to align with Figma.

- Adds an optional id to Expander button

- Use React.createElement instead of JSX-syntax in Expander

- Fixes text truncating on placeholder in Search component

- Adds animation to expandable in Search component

- Minor fixes on Search component

- Updates Search component to align with Figma.

- Removes clearAllAriaLabel and replaces it with clear on Search, type changes from string to Button. This affects Search, Filter, DropdownList and FilterWrapper.

- Adds fixed background to Link component

- Updates colours

- Adds fixedTertiary variant to VisuallyButton component

- Adds MessageField component

- TextArea design updated to reflect Figma

- label is required on TextArea. If the label needs to be hidden, a new isLabelVisible prop can be used which swaps the visible label with an area-label.

- Expander can have links

- Fixes design of DropdownList component for a11y and slight design update to match Figma.

- Adds new colours to Light and Dark

- Adds role="dialog" to Confirmation for accessibility.

- Adds required ariaLabel prop to Confirmation for accessibility.

- Updates Tag component to reflect new design.

- Updates Expander to use Badge istead of Tag

- Type of value on Expander changed from string to number

- Adds a Badge component

- Resolve Confirmation class name collision.

- Updates Link component to reflect Figma. Includes a new size and variant prop.

- Modal no longer swallows events

- light and dark colour updates and additions. For full changelog see [Figma]("https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles?type=design&node-id=9692%3A25427&mode=design&t=eYfOogWPi8YGRQkW-1")

- buttons-action-* colours moved to on-buttons-on-action-*

- buttons-link-* colours moved to on-buttons-on-link-*

- ge-indicator-tags-* changed to include default and alternate

- on-ge-on-indicator-tags-* changed to include default and alternate

- Modal close button size changes

- Modal now automatically close when you click outside.

Updates light and dark colours.

Prevents accidentally using Expander without itemRenderer.

- Expander<T> type no longer has an optional itemRenderer

- Expander component requires itemRenderer

- Light and Dark colour updates

- New primitives colours

- Moves colour sources from /colours/ to /colour-sources/

#### Light & Dark

- *-delete-* renamed to *-destructive-*

- $on-buttons-on-delete-alternate-* renamed to $on-buttons-on-destructive-outlined-*

- $on-buttons-on-waiting-list-secondary-* renamed to $on-buttons-on-waiting-list-outlined-*

- All fixed surface and background colours moved to a new category $fixed-*

- All on-fixed surface and background colours moved to a new category $on-fixed-*

- All $ge-selector-* variables renamed to include primary and secondary

- $buttons-waiting-list-secondary-default renamed to $buttons-waiting-list-outlined-default

- $buttons-waiting-list-secondary-disabled renamed to $buttons-waiting-list-outlined-disabled

- $buttons-waiting-list-secondary-hover renamed to $buttons-waiting-list-outlined-hover

- $ge-selector-indicator-icon has been renamed to $on-ge-on-selector-primary-selected-default

- Modal updated to be more spec compliant

- Modal requires title

- Modal's backgrounColor is removed

- Left aligns Expander's trigger text

- If only one item in Expander, have it open by default

- This adds blue theme to Checkbox.

- When an Expander is a faq, itemProp=answerText is now itemProp=text

- VisuallyButton variant tertiary matches design with no padding on sides

- VisuallyButton variant link changed colour

- New Primitives, light and dark colours

- Some dark & light colours change names

- VisuallyButton now accepts an optional test ID (prop testId)

- Expander's trigger is now transparent in its resting state, as designed

- Checkbox now sets required on the rendered input, instead of never setting required (since !14285)

- Confirmation now acceps children, and the text prop is optional.

- Fixes typing of title in Expander and ExpanderListItem

- Adds new component Banner

- italic now works as expected on Text with variant normal

- Button can now be variant complete

- Text is now considerably closer to the design system's typography

- Text props

- size heading1 renamed to headline1

- size heading2 renamed to headline2

- size heading3 renamed to headline3

- theme headline-italic removed

- theme normal-italic removed

- italic added

- Updates Expander to better match its design

- Adds Tag

- Fixes light and dark imports.

- Adds optional testId prop to Toggle component

- Fixes Toggle input click area for a11y programs

- Removes unneeded type restriction of T on Expander<T>

- Fixes colour import for expander.scss.

- Hides Colours folder from NPM package.

- Clarifies the usage of tokens/light and tokens/dark.

### Depricated:

lightmode and darkmode are now depricated. In a future update they will be removed. This is to give the consumers time migrate to the new system in a timely fashion.

- Expander reworked to match design rules, and has new props that should be nicer to use

- Expander List Item no longer exposed (it was never intended to be used directly)

- Removes icons

Use [@sats-group/icons](https://www.npmjs.com/package/@sats-group/icons) instead.

- Adds optional description prop to Expander

- Adds multiple 36x36 icons Icons

- Updated Activity-Filled icons for size 18, 24, 28, and 32

NEW

- Expander component

- Text can now be tight (without margins)

### FIXED

- Token groups dark and light can be referenced

###

- ExpanderGroup is now Expander

- Expander props match the design more closely

- Adds support for node 20

- Removes support for node 16

- Adds npm v10

- Changes height and radius of ProgressBar to 4px.

- Adds new primitives.scss, light.scss and dark.scss colour tokens.

- Adds new colour codegen for light.scss and dark.scss

- Render body in Expander

- Add Expander and ExpanderGroup.

- Link component now accepts prop 'testId'

- Text component font size clamp adjusted on smaller text sizes

- Adds display: flex and flex-direction: column to Radio --underline

- Adds Toolbox component

- Adds 40x40 avatar-subtract icon

- Adds asterisk on Checkbox when marked as required

- Updates Icons

- Adds a11y tests to icon docs page

- Adds new icon set

- Removes CTABanner

- Removes InfoBox

- Renames icons: treatment is now treatments

- Updates README

- Fix pipeline

- Fix pipeline

- Publishing ui-lib to public registry

- Updates all lightmode and darkmode tokens

- Fixes fill color on s-avatar and e-avatar logos

- Adds s-avatar and e-avatar logos

- Add new font Inter-ExtraBold

- Change Inter Emphasis Heading 1,2,3 from SemiBold (600) to ExtraBold (800)

- Removes hover effect on VisuallyButton

- Fixes Modal height on iphone devices

- Fixes ContextMenu text color on dark backgrounds

- Fixes ContextMenu header position when there is no description

- Adds PrimaryWhite variant for VisuallyButton

- Fixes Modal background on mobile

- Adds GX color to lightmode and darkmode

- ContextMenu added testId prop to list items.

- ContextMenu changed hover background color to match Figma

- ContextMenu changed title size to match Figma

- Chip icon left aligned and changed to close icon to match Figma

- VisuallyButton border width changed to 1.7px

- Adjust minimum font-size for both normal and italic headline 1.

- Fixes spacing around Radio

- Updates logos.

- Adds the dialog role, id and aria-label to Modal, for accessibility.

Modal now requires id and ariaLabel

- Exports icon names

Import them like this:

`ts

import { iconNames16 } from '@sats/ui-lib/react/icon/icon.names.16';

`

- New Sats and Elixia small logos.

- Fixes ContextMenu close button variant

- Fixes ContextMenu list item icon color

- Updates icons

- All icons, except avatar-subtract, now exist in sizes 16px, 18px, 24px, 28px and 32px

Some icons have been renamed.

- video -> video-filled

- pt -> pt-label

- checkbox -> booked

- 28px bell -> notifications

- 32px notification -> notifications

- menu -> web-menu

- gym class -> GX

- class -> cycling

- Fixes modal width of ContextMenu

- Adds ContextMenu component

- Adds HiddenInput component

- New VisuallyButton, Button and LinkButton variant tertiary

- New VisuallyButton, Button and LinkButton variant secondaryWhite

- Changed VisuallyButton, Button and LinkButton hover background color for secondary, ctaSecondary and waitlistSecondary

- Changed VisuallyButton, Button and LinkButton text transformation uppercase to capitalize on all buttons except CTA variants.

- Changed VisuallyButton, Button and LinkButton text themes to reflect Figma changes.

- Migration guide for VisuallyButton, Button and LinkButton can be found in Figma.

- Changed VisuallyButton, Button and LinkButton variant names to camelCase

- New VisuallyButton, Button and LinkButton size basic to replace size small.

- New VisuallyButton, Button and LinkButton size small

- New default size for VisuallyButton, Button and LinkButton set to basic

- Updates Typescript package

- Linting cleanup in various components.

- Removes hasError prop from Search component

- Removes extra and showCustomError props from Toggle component

- Adds Icon component

- Updates SVG of most icons

- Adds StudioMarkerBg, StudioMarkerElixia and StudioMarkerSats icons

- Removes AvatarIntersect icon

- Removes StudiosMarkerElixia and StuidoMarkerSats icons

- Renames Video1 icon to VideoFilled

- Renames Pt1 icon to ptLabel

Removes components:

- ContentInformation

- Testimonial

- Voucher

- Adds "required"-attribute for TextArea and Select

- Adds Confirmation component

- New icon set, fresh export of all icons from Figma

Deletes icons:

- 120/avatar.svg

- 160/avatar.svg

- 28/qr.svg

- 32/addfilled.svg

- 32/addoutlined.svg

- 32/help.svg

- 32/homefilled.svg

- 32/homeoutlined.svg

- 32/profilefilled.svg

- 32/profileoutlined.svg

- 32/searchoutlined.svg

- 32/workoutsfilled.svg

- 32/workoutsoutlined.svg

- 36/qr.svg

- 32/watilist-book.svg

- 42/back.svg

- 56/add-circle.svg

- 60/check.svg

- 60/waitlist.svg

- 80/avatar.svg

- Primary colour in lightmode has changed to the correct HEX value.

- Use the Text component in Link to ensure the correct font size

- Fixes width of Modal component

- Redesign Modal according to new design. Adds backgroundColor as a prop.

- Modal can no longer be persistent, it needs a close button

- Modal do no longer accept size and theme as props

- Fixes css for TextInput of type time and date on partially supported browsers.

- Fixes sticky hover bug on all hover states

- Fixes hover bug for touch screens on Chip

- Adds hover state on Chip

- Updates Icon

- 24: <Calendar />

- Adds Icons

- 36: <Clubs />

- 36: <Gx />

- 36: <Pt />

- 36: <Satsonline />

- Fixes TabTrapper types. Needed for TypeScript 5.

- Adds support for npm 9

- Adds required label to Search

- Fixes Select label size, margin and font weight

- Fixes TextInput label size, margin and font weight

- Fixes FilterWrapper classname breakpoint

- Adds optional testTags prop to Filter

- Long titles in Filter break onto two lines and left align

- Adds <FilterWrapper /> component for lists of Filter

- Adds support for RadioList in Filter

- Adds mini as an option for Message

- Cleanup of FormContent, Filter and DropdownList and its sub components.

- FormContent doc cleaned up.

- Filter, DropdownList & FormContent:

- Removes children.

- Adds keys to choose modal content with.

- Limits content of component to range, checkboxList and radioList.

- Cleanup of FormContent and its sub components.

- Filter & DropdownList: Splits Search into its own sub component FormContentSearch.

- Search component utilises onChangeFunc instead of onChange

- Minor design improvements to TextArea

- Removes HasMovingLabel from TextArea

- Change line-height for all headings to 1.1.

- Adds safety to string matching in Filter and DropdownList search.

- Search component font size fixed on smaller screen

- TextInput design updates

- Adds theme prop to DropdnowList

- Fixes background color on DropdownList

- New Corner-radius size xs at 4px

- Fixes background of DropdownList

- Fixes Search component value & clear button

- Fixes DropdownList header size

- Fixes missing spacing on long title for Filter

- Deletes SharedDropdown component and merges it into the parent components Filter and DropdownList

- Fixes box-sizing and width of selected option for Filter

- Fixes padding and size of selected options for Filter

- Margin top for extra in Checkbox

- Size small on Button in Message component.

- Fixes to Button variant on dark CTA Banner.

- Border on all VisuallyButtons. Subtracted from padding to ensure similar sizes across variants.

- Slight design change for Filter component.

- Fixes FormContent checkbox category disabled view.

- Changed FormContent submit button theme

- Removes description from filter component

- Fixes width of Search component.

- Adds Filter icon.

- Adds Icons

- 32: <Award />

- 32: <Calendar />

- 32: <Notification />

- 32: <Profile />

- Makes size small default on VisuallyButton. Affects LinkButton and Button

- Changes padding on small buttons for VisuallyButton according to new design

- Fixes Search component's design.

- Changes Search component's size attribute to inputSize due to a conflict with input element's default size attribute.

- Version bump due to pipeline

- Fixes Logo Docs page

- Fixes DocControls component's viewport on smaller screens

- Edits Contribution.md file

- Adds DocControls to Contribution page

- Adds missing VisuallyButtons from docs page

- Redesigns ui-lib website. Bumps version

- Fixes Filter modal not displaying on some versions of ipad

- Always center align text on VisuallyButton

- Fixes loading icon going out of bounds on VisuallyButton

- Updates styles of cta, primary, secondary for VisuallyButton

- New variants of VisuallyButton

- waitlist

- waitlist-secondary

- cta-secondary

- cta-secondary-white

- Adds new colors to lightmode

- ui-pressed

- waitlist

- waitlist-hover

- waitlist-disabled

- Removes variants Ghost & Text from VisuallyButton

- Fixes Text theme normal-italic to be normal weight

- Fixes Text theme headline-normal to be normal.

- Text component has a new theme normal-italic

- New font added Inter-Italic

- Fixes Bomb's price text with new text theme

- Fixes CtaBanner's price text with new text theme

- Text theme headline-normal has new weight and size

- Text theme headline-emphasis has been renamed to headline-italic and has new sizes

- Fixes stroke not being currentColor in creditcard icon

- Adds Delete icon

- Adds <Search /> component

- Adds Remove icon

- Updates color ui-border

- Support node 18

- Fixes Checkbox disabled text color

- Adds Icons

- 24: <Close />

- 32: <CreditCard />

- 32: <Invoice />

- Close dropdown when the submit button is clicked

- Puts theme-normal and size-basic back to css

- Adds themes to Button

- Adds basicas default size on Text component

- Adds ProgressBar

Has:

- cta variant

- dark theme

- several labelPositions.

- Optional label

- Adds new 120 icon <Avatar />

- Adds use-message hook

- Adds new 120 icon <Avatar />

- Changes VisuallyButton corner radius to reflect new design

- Removes border-radius on modal in FormContent when on mobile

- Changes Radio description color to reflect design

- Fixes spacing in DropdownList to reflect design

- Cleans up unused imports

- Prevents checkboxs from shrinking

- Small visual fixes to form-content

- Loweres the max-height of popup modal

- Set a higher breakpoint for smaller screens

- Centres header on smaller screens.

- Adds 24x24 PT icon

- Changes search key/value pair for CheckboxList and RadioList

- Updates to CTA Banner:

- Adds secondary variant

- Small adjustment to padding

- title font changed to headline-emphasis on main CTA and headline-normal on secondary banner

- Small ShareDropdown fix

- Small Checkbox fix

- Fixes hover state bug on ShareDropdown on touch screens

- Fixes arrow icon position on DropdownList

- Fixes description hover color on Filter

- Fixes spacing in Filter

- Fixes Select border radius colour

- Set maxChipsToShow as optional on ChipSelected

- Fixes type of Chip

- Adds lightmode color $background-surface-secondary

- CheckboxList and RadioList have forced underline under each item.

- DropdownList handles disabled state better.

- Filter and DropdownList fills the space horizontally.

- Filter and DropdownList have a parent component SharedDropdown for shared styling.

- Fixed changelog

- Info icon SVG changed to reflect new design

- Fixes Link css styling.

- Fixes changelog

- Adds new font style headline-normal to Text

- Adds new font face token SATSHeadline-RegularItalic

- Changes Text font name from headline to headline-emphasis

- Adds FormContent.Range to FormContent

- Fixes FormContent box sizing to fluid with a max height

- Fixes style imports in Link that was unresolvable by consumers

- Fixes CheckboxLink crashing bug

- Adds Link component w/variants

- Adds ChipSelected component

- Adds action colour to lightmode

- Adds action-hover colour to lightmode

- Adds action-disabled colour to lightmode

- Adds FormContent.CheckboxList to FormContent

- Cleans up unused type exports from FormContent

- Adds add-bem-modifiers.ts

- Adds react-tiny-collapse peer dependency

- Moved fuzzy-search package into peerDependencies

- Fixes export of FormContent.RadioList from FormContent.radioList

- Fixes changelog formatting

- Changes height of FormContent container

- Removes FormContent.submit component and merges it into FormContent

- Fixes spacing on Checkbox, removes spacing when there is no label

- Renames FormContainer to FormContent

- Moves submit button in FormContent into sub component <FormContent.submit />

- Fixes disabled state on DropdownList

- Fixes header always showing on FormContainer.RadioList

- Fixes spacing of DropdownList

- Fixes DropdownList click outside.

- Fixes FormContainer types

- Removes top margin of DropdownList

- Adds optional description text to Radio

- Adds optional underline prop to Radio

- Adds DropdownList component

- Adds FormContainer component

- Adds FormContainer.RadioList sub component

- Changes Checkbox text colour when disabled

- Changes Checkbox description colour to match design

- Adds new lightmode hover colour secondary-hover-light

- Filter modal moved to FormContainer

- Filter alignment moved to FormContainer

- Adds hooks

- Adds Filter component

- Adds optional description text to Checkbox

- Adds optional underline prop to Checkbox

- Adds responsive text size to Checkbox

- Redesigns documentation page for Checkbox

- Makes Text component responsive

- Adds Chip component

- Adds new aspect ratios to accommodate more variations of images added to articles.

- Adds icon and text option to variants of VisuallyButton

- Including the text prop will display the text

- Adds ariaLabel prop to VisuallyButton that replaces the usage of text for aria-label when VisuallyButton is icon only

- Fixes size on radio button according to design

- Adds 80x80 Avatar icon

- Updates dependencies

- Adds corner-radius tokens ([Figma](https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles?node-id=342:0))

- Adds Bomb component

- Fixed missing type on text input

- Fixes version number

- Adds avatar icon

- Updates color for signal-error and signal-error-text

- Adds required to TextInput

- Updates several dependencies

- Updates React to 18

- Adds icon to TextInput

- Adds theme to TextInput

- Changes TextInput and TextArea help text font sizes

- Refactors TextInput styling

- Adds textfield styling to TextInput

- Fixes Toggle types

- Toggle prop showCustomError type changed from string to boolean

- Adds hero space to spacing

- Adds toggle component

- Adds hasMovingLabel prop to TextArea fields

- isLabelVisible removed from TextArea fields

- Adds spinner theme to all VisuallyButton that only shows when the button is disabled

- spinner prop removed from VisuallyButton

- Adds spinner prop to all VisuallyButton

- Updates several components to conform more to the design

- Modal

- TextArea

- TextInput

- Color tokens (/tokens/colors) removed

- TextInput members removed

- colors

- themes

- TextInput props removed

- color

- icon

- inputElementClassName

- isLabelVisible

- theme

- TextInput props made required

- label

- Fixes VisuallyButton's font weight

- New font _SATS Headline_

- Text.themes.headline added

- Text.themes.normal added

- Text.size.section is larger

- All Text themes fall back to sans-serif

- Text defaults to normal theme

- Text.themes.brand removed

- Text.themes.default removed

- Makes LinkCard's text optional

- Adds pointer cursor to all VisuallyButton

- Adds small logos

- Renames logo components

- Removes prop forwarding from logo components

- Adds new 32\*32 icons

- Close

- Facebook

- Instagram

- LinkedIn

- Spotify

- YouTube

- Updates 32\*32 icons

- Aerobics

- Aqua

- Class

- Flexibility

- Kids-Teens

- Prformance

- Profile (outlined)

- Adds SVG props to logo components

- Adds ghost variant to VisuallyButton

- Adds success theme to Message

- Makes sure Message is styled correctly when there is no action present

- Adds helpText to TextArea

- Changes Flag's text size.

- Message has fewer props.

### New

- Adds new signal text colors.

- Message has a new visual style.

- Adds new signal text colors.

- Built JS is no longer part of the published files.

- Removes all icons.

- Logos have dynamic color (currentColor).

### New

- SVG icons (icons/<size>/<name>.svg).

- React component icons (react/icons/<size>/<name>.tsx).

- React component logos (react/logos/<name>.tsx).

- Adds ContentInformation component.

- Adds LinkCard component.

- Updates Select to toggle label visibility.

- Adds Voucher component.

- Adds CTABanner component.

- Adds Message component.

- Adds Testimonial component.

- Makes it possible to show custom error messages for Radio and Checkbox.

- Updates Select's colors.

- Updates cta color in lightmode.

- Adds Elixia logos.

- Fixes VisuallyButton's icon rendering when the icon isn't perfectly square.

- Updates ScaleBar component with new colors.

- Adds z-index to Modal to ensure the component is on top of other content.

- VisuallyButton's (and therefore Button's and LinkButton's) icon now respects size and wide.

- Adds Flag component.

- Updates Checkbox component.

- : Checkbox.colors removed.

- : Checkbox.themes now includes light for applying the light theme.

- : indeterminate is now intermediate, to match the design language, and a boolean property.

- Updates VisuallyButton component. Fewer styles means changes (f.ex. purple variants don't exist anymore).

- Updates Radio component.

- Adds InfoBox component.

- Adds more sizes to Text component.

- Adds optional persistency to Modal.

- Adds lightmode and darkmode tokens.

Purposefully does not remove the old colors tokens, so that consumers (and ui-lib components) can ease into using the new tokens.

- Adds Modal.

- Adds spacing tokens.

- Adds version and changelog to the site.

- No changes to the library itself.

- Fixes blank HTML files on site's first build.

- No changes to the library itself.

- Fixes VisuallyButton's [disabled] style.

- Removes styling for larger viewports on visually-button--big size on VisuallyButton

- Adds indeterminate theme to Checkbox

- Moves Message type to use-input-validation.types to fix type errors on the server

- Adds support for custom HTML form validation error message to text-input and use-input-validation

- Updates peer dependencies of react and react-dom to 17.0.2 and upgrades react and react-dom in /site to 17.0.2

- Fixes slash as division for Sass files, ref. https://sass-lang.com/documentation/-changes/slash-div

- Changes font size of helper-text in Text-Input

- Makes value required in Checkbox, limits type to only string

- Adds help text to TextInput

- Adds prop that adds custom classes TextInput's input element

- Fixes checkbox__input-placeholder shrinking

- Makes the extra property on Checkbox optional

- Adds recipe icon

- : Moves types for react components to separate files. F. ex., the types for Button can now be imported from react/button/button.types.

- : Removes wildcard export from react component index files to ensure that type files can only be imported explicitly (to avoid accidentally importing the entire component which might break type checking when targeting Node.js).

- : Extra properties on Select options now have to use the extra property, instead of any property name. All uses of onChangeOption should be updated.

- : Converts all react components to TypeScript (new types might cause changes)

- React components no longer need to be compiled when using this package

- Fixes radio__fake-element shrinking

- Adds defaultValue to TextInput prop types

- Fixes error style for movingLabel theme in TextInput

- Fixes label overlapping with pre-filled content when using the movingLabel theme on TextInput

- Adds inline validation errors and validation error styles for

- Checkbox

- Radio

- Select

- TextArea

- TextInput

- Fixes wrong color on orange VisuallyButton, Button and ButtonLink

- : Replaces the current menu icon with the menu icon from the style guide

- Adds orange color to VisuallyButton, Button and ButtonLink

- Fixes label vertical alignment for movingLabel theme in TextInput

- Fixes long text labels overflowing when used with movingLabel theme in TextInput

- Hides placeholder text when movingLabel theme is set in TextInput

- Removes support for prefix in TextInput

- Adds movingLabel theme to TextInput

- :

- Replaces themes prop with color in:

- Checkbox

- Radio

- Replaces themes prop with theme and color in TextInput

- Removes negative theme from TextInput (use the color prop instead)

- Replaces themes prop with theme, color and size in:

- VisuallyButton

- Button

- LinkButton

- All themes that were named negative are now named light (using the color prop)

- Adds color prop in TextInput

- : Removes id from the propTypes of the following components (id can still be set):

- Checkbox

- Radio

- Select

- TextArea

- TextInput

- Adds an option to hide the checkbox-label

- Fixes the extra element on Checkbox always showing

- Adds an optional child element to Checkbox that is rendered outside of the label element.

- Adds type declaration file for SelectOption

- Fixes text input not filling available space when prefix prop is used.

- Adds filled-video icon

- Removes calendar icon from TextInput with type date.

- Adds bigIcon theme to VisuallyButton

- Adds missing colors

- Fixes gray theme on VisuallyButton

- Adds restProps to Text

- Adds TypeScript view models

- Fixes Select chevron not being clickable

- Moves Select label so it conforms to the other inputs

- Adds $signal-negative-warning color

- Adds styles for type "date" in TextInput

- Fixes Button documentation

- Adds support for prefix to TextInput

- Adds LinkButton.

- Adds VisuallyButton.

- Refactors Button.

- Adds loading support to CroppedImage.

- Deduplicates image rendering in CroppedImage.

- Fixes Button component not inheriting font-family

- Fixes srcQuery not being applied to <img /> element in CroppedImage

Version 3.0.0 updates many components to use the new sats-web-components spec (https://www.figma.com/file/CemEcLe6DpoD5ELrFqlwZ7/sats-web-components).

- : Removes rounded theme from TextInput

- VISUALLY : Changes design for default and negative themes in TextInput

- VISUALLY : Changes padding for default and big themes in Button

- VISUALLY : Changes padding for Select. It is now 10px taller

- Adds support for icon in TextInput

- Adds support for icon in Select

- Adds support for srcQuery in CroppedImage

- Adds onChangeOption to Select

- Fixes id prop being ignored for all input components

- Fixes type prop not working in TextInput

- Adds body-icon

- Fixes Checkbox not rendering value

- Fixes bug in gray theme for Button

- Adds gray theme to Button

- Changes the color on ScaleBar-bars to orange

- Adds React.forwardRef to Checkbox, Radio, Select, TextArea and TextInput components

- Fixes TextArea colors

- VISUALLY : Changes the default elementName in Text from span to div

- VISUALLY : Changes all font sizes in Text

- This isn't a problem for the views that have used the previous version of Text "correctly". The views that have faked a bigger font with sizes.big will need to change from sizes.big to sizes.basic.

- : Removes gray theme from TextInput

- Adds error and disabled styles to TextInput

- Increases horizontal padding for TextInput.themes.rounded

- Fixes extra margin when rendering TextInput with an empty label

- Fixes className not being applied to outermost element in TextInput

- Adds icon and elevated themes to Button

- : Renames color variables:

- $signal-delete -> $signal-negative-delete

- $signal-error -> $signal-negative-error

- $signal-success -> $signal-negative-success

- Adds $signal-positive-delete, $signal-positive-error and $signal-positive-success color variables

- Adds the possibility to send children to Text Area, Text Input and Select

- Adds classname and restprops to Select

- Removes clip from VisuallyHidden

- Adds loading.svg

- Adds menu.svg

- Makes stroke thicker on check-mini.svg

- Adds height and width to logo-sats.svg

- Adds icons

- Adds logos

- Adds CroppedImage component

- Adds restprops to Text Area and Text Input

- Fixes wrong button colors

- Radio and Checkbox can use children as label

- Update button main color

- Adds Select

- Adds Text Area

- Fixes bug with index file generation

- Improves type definitions for react components