VERSIONS.md

Versioning

This file should contain all changes in the Styleguide.

• Use version in package.json ("version": "1.1.0")
• The numbers represent, "Major", "Minor" and "Patch"
• "Major" is reserved for rewrites of the styleguide, or entire Telia design rebrands (extremely rare).
• "Minor" in this context means breaking changes - such as a change in a components HTML structure, or a change in a CSS class name.
• "Patch" is reserved for smaller CSS changes, tweaks and improvements. Styleguide users are safe to upgrade to new patches. Also, new components and new component variants are also patches, since they do not break anything for other channels.

For Major and Minor changes in version you must notify everyone in the #styleguide Slack Channel.

Version History

Only noteworthy changes.

1.56.0

• Enabled CSS variables

1.50.0

• Updated React to version 18

1.48.0

• Step Indicator Paging with breaking changes, renamed props 'changeActiveStep' to 'arrowsAsCarousel', 'navigationCompletesPreviousSteps' to 'autocompletePreviousSteps', 'completeButtonId' to 'completeStepButtonId', 'previousButtonId' to 'previousStepButtonId', 'navigationClickable' to 'completeStepsClickable'

1.47.18

• Updated react to version 17

1.47.16

• Added a new accordion that supports multiple icons, and the ingress is hidden if accordion is open/expanded

1.46.12

• Added new version of shopping cart: ShoppingCartV2, SlidingShoppingCartV2
• Added two new kinds to Button: voca-normal, voca-inverted
• Fixed className prop for Paragraph
• Fixed active state for cart icon in Menu

1.46.00

• Added aria-labelledby as a required prop in Modal

1.45.17

• Undeprecated ModalDialog and made it look more like Modal component. Modal component does not work with SSR, so until that is fixed ModalDialog will still be in use.

1.45.15

• Released with github actions

1.45.0

• Added key as required prop for MobileNavBarMore items

1.44.0

• NEW colors (palette from VOCA)
• Recommended update if using the colors from SG: grey200 -> grey100

1.43.1

• NEW TeliaSans Font
• Update NPM ClassNames & Babel config

1.42.0

• StepFlow: use a fullscreen page layout component rather than a fullscreen modal.

1.41.21

• Added new component HardwareProductBox

1.41.10

• Added Breadcrumbs component
• Added inputRef to TextField component

1.41.0

• Updated Chip component
  • New size (32px for all), size prop is removed
  • Square chip is added
  • Kind prop is renamed to color
  • Change classnames to fit BEM pattern
• Updated TextField
  • Help text is left by default
• Updated PhoneNumberField
  • Change classnames to fit BEM battern
  • Added size prop

1.40.0

• Refactored StepByStep component - Written in typescript - Step, Content and Descriptions were perviously properties of the StepByStep class. These are now exported as components from index.ts and accessed from @telia/styleguide as Step, StepContent and StepDescription. - Enable customizing of icon, header and content in StepDescription - Add different sizes for a StepByStep component - Support dashed borders - Disable animations for non-interactive StepByStep components

1.39.7

• Added more colors to the Color Palette
  • Commit 385fc2c

1.39.0

• Updated classes with the BEM-pattern in the following components
  • TextField
  • Avatar
  • business/Tooltip
  • business/Table
  • business/StepFlow
  • business/MainMenu
  • business/List
  • business/Card
  • business/Button

1.38.37

• Added FieldInstructions component

1.38.20

• Added Badge component

1.38.0

• Breaking: moved Toggle from business to atoms. To fix in your app replace import {Toggle} from '@telia/styleguide/business' with the usual import {Toggle} from '@telia/styleguide'
• Breaking: moved Checkbox from business to atoms. To fix in your app replace import {Checkbox} from '@telia/styleguide/business' with the usual import {Checkbox} from '@telia/styleguide'
• Deprecated old CheckBoxWithLabel components

1.37.2

• Added business StepFlow

1.37.0

• Breaking: moved TextField from business to molecules. To fix in your app replace import {TextField} from '@telia/styleguide/business' with the usual import {TextField} from '@telia/styleguide'
• Deprecated old TextBox components

1.36.0

• Breaking: renamed label props in business ListItem to title
• Added DatePicker
• Added PeriodPicker
• Added Incrementer
• Support expandable list items

1.35.0

• Breaking: Removed SideMenuHeader component. Use SideMenuItem instead
• A bunch og patches and minor improvements

1.34.21

Contains new components

• Lozenge
• Chip
• TextField (in busienss area)

1.34.8

• Added SubscriptionLinesAccordion component

1.34.0

• Rename icon "pen" to "edit"
• Rename icon "return" to "return-arrow"

1.33.73

• Added Avatar component
• Added new side menu
• Added navigation bar for mobile
• Adjustments to Toggle Button (business)
• Added support for only displaying focus style when user is tabbing (enableTabKeyDetetcion)

1.33.71

• Add new Button component in business part

1.33.66

• Removed component-lib directory, move everything to the root directory.

1.33.61

• Add new Modal component and deprecate old

1.33.51

• Changed from SvgIcon to Icon on Accordion

1.33.47

• Deprecate barColor prop in ProgressBar. Add color prop, typed by colors object.
• Add support for dropdown search (search input with dropdown menu, and dropdown with search input inside menu)
• Add support for nullish coalescing in component lib

1.33.45

• Support for typescript on AllIcons

1.33.42

• Added onCartClick and numberOfItemsInCart optional props to Menu to show cart icon with number of items in cart.

1.33.39

• Added declareations to d.ts files for better typescript support

1.33.38

• Added SlidingShoppingCart component.

1.33.36

• Added ColorPicker component.
• Added SmallBoxList component.
• Added BigImageModal component.
• Added SubscriptionAccordion component.
• Added InfoCard component.

1.33.33

• Dropdown Menu in the Menu component. A new feature that will advance when identity login are launched for all channels

1.33.24

• Changes to Subscription. Adding extraDataAmount, extraDataUnit props and always light gray teaser on expand.
• Change to FunkyTabs. Added support for no image on tabs.

1.33.22

• Storybook organizing sidebar
• Link table border bottom removed
• Link padding removal on links without icon

1.33.21

• New Icon: check-mark-circle

1.33.19

• Changes to ShoppingCart. Removing prop additionalItems and some style changes.

1.33.16

• Added Table to business components
• Added Checkbox to business components

1.33.15

• Added animation prop to Accordion.
• Added top level id to Accordion element.

1.33.14

• New Links & List

1.33.13

• New Button

1.33.10

• Added hideIcon prop to Alert.

1.33.9

• Change look of delete icon for ShoppingCart
• Change size of QuantityPicker for small devices.

1.33.2

• New Color Component, more info on home/color palette in storybook

1.33.1

• Added Initial Expanded State to TableWithDropDown

1.33.0

• Added Button kind normal, has no specific styling, same effect as not defining the button's kind
• In ModalDialog:
  • Remove disableOverlayClick and disableCloseByEscKey props. It's implicitly defined by onClose function.
  • Added size prop for the container size
  • Added submitKind and closeKind to overwrite the submit and close buttons kinds

1.31.3

• Added title attr and removed block styling for Icon.
• Updated QuantityPicker, QuantityButton, StepIndicator, ShoppingCartItem, ShoppingCart and ShoppingCartAccordion with new icons.

1.31.0

• Added new icons & component

1.30.18

• Added new LinkTable molecule.

1.30.18

• Modals: Border-radius from % to rem

1.30.17

• Modals: Ensure that overflow hidden is set on modal window

1.30.16

• RadioButtonGroup updated
• Fixed modal dialog focus to target the dialog itself to prevent scrolling to the bottom

1.30.15

• Modal dialog invoke effects only once and fix clickout

1.30.14

• Created stories for all Atoms
• tableWithDropDown component // Storybook /atoms/tableWithDropDown
• Sortable table hook

1.30.13

• ModalDialog: Added option to scroll if the modal content overflows the page.

1.30.12

• Added disableOverlayClick and disableCloseByEscKey props to ModalDialog component

1.30.11

• Added TableWithDropDown component

1.30.10

• Fixed Toggle components IE positioning bug
• New ThSortable component in FullWidthTable

1.30.9

• Hide ',-' for price in Subscription component for not rounded numbers (B2B customers)

1.30.8

• Fixed bug with showing nested buttons in Subscription component.

1.30.6

• Fixed bug in business icons (arrow-small-* and more)

1.30.2

• Added new business icons

1.30.1

• New molecule: RadioButtonGroup
• New atom: RadioButton
• Deprecated: RadioButtonList
• Deprecated: RadioButtonWithLabel

1.30.0

• TypeScript definitions (.d.ts) for all components. This can break existing build processes using TS.
• New business component: MainMenu
• Added download link for all business icons (.zip link in Storybook)

1.29.23

• Changes on Box component from article to button for accessibility

1.29.22

• Upgrade dependencies to mitigate security risks in serialize-javascriptand serialize-to-js packages

1.29.19

• Non breaking tweaks to ShoppingCart and ShoppingCartAccordion
• Added AllIcons to all stories

1.29.18

• New molecule: ShoppingCart
• New organism: ShoppingCartAccordion

1.29.16

Added footer prop to Accordion

1.29.15

Added <Icon /> to business components area

1.29.14

Subscription speechbubble font from italic to regular

1.29.13

Build and deploy storybook with web site

1.29.12

Switch from using Box to StatefulBox most likely, and update how the usage of Subscription.

• Separated Box into stateless and stateful
• Added scrollToOnOpen, second feature highlight, onSelect and onClose to Subscription
• Added jsx and knobs to storybook, and added story for Subscription.

1.29.11

- SubscriptionPriceBox
- SubscriptionPriceBoxes

1.29.10

• Alert (Added scrollTo and closeButtonText props)
• Accordion
• AccordionList
• Menu (Added onlyLogo prop)

1.29.9

• Focus trap is available for all and MobileMenu is focus trapped (accessibility improvement)

1.29.7

• Changed font-size of text in the Quote component

1.29.6

• Lint and Prettier fix
• Menu search: Shows spinner when loading and input field are disabled

1.29.3

• Menu & ModalDialog: IE compatibility fixes

1.29.2

• Allow modal dialog templating
• Menu accessibility: converted to buttons and added aria labels where needed.

1.29.1

• Fix missing Element in SSR problem for modals

1.29.0

• Modal dialog rewrite and accessibility improvements

1.28.60

• Create cjs version of AllIcons

1.28.52 and 1.28.53

• Colors: Darkest grey is changed, and all use of custom dark-grey-2 is removed.
• Svg icon files: Id is removed from all icons except pebbles. Title tag is removed.
• SvgIcon: add aria-hidden="true" if no title is provided
• TextBox: Should use TextBoxWithLabel and set hideLabel prop
• TextArea: Should use TextAreaWithLabel and set hideLabel prop
• Banner: Added image alt prop
• DisplayFunctonality: Breaking change; pass in both image and alt text
• Box: aria-label on close button
• PageMenu: Deleted examples
• Video: Added videoTitle prop
• Header: Added videoTitle prop

1.28.37 [new component]

• Molecules: TextBoxWithCharCount: input field with maximum number of characters

1.28.36

• onChange prop fixed in RadioButtonList

1.28.35

• Molecules: Gallery
• package "marked" updated
• CheckboxWithLabel has a disabled state
• Different layout for colors on the website
• Other minor tweaks

1.28.32

• DropDownListWithLabel: new Disabled option

1.28.23

• Button: new 'negative' kind

1.28.22

• FullWidthTable: Hover functionality with onClick event on rows

1.28.21

• Subscription: The subscription box is now more flexible with no hardcoded text

1.28.20

• Menu z-index fix

1.28.19 [new component]

• Molecules: Card

1.28.18

• Molecules: StatefulAccordionList: Removed scroll to active accordion

1.28.15 [new component]

• Atom: IconAnimated - has a dependency to the library lottie-web

1.28.9

• New function and stle on Menu component

1.28.6

• Fixed accordians to work with and without buttons

1.28.2

• Small menu adjustments

1.27.0

• ES6 is no longer exposed in the component-lib - it is now vanilla JS, so works on all browsers.

1.26.1

• FocusBox: works better on small screens

1.26.0

• Large rewrite to remove dependencies, and get rid of (most of) the server

1.25.12

• StatsDisplay: molecule added

1.25.11

• Banner: molecule added

1.25.10

• RadioButtonList: onChange prop added
• Box: Add transparent option
• DisplayFunctionalityBlock: Added ability to choose device
• FeatureBox: Added ability to choose size and border of

1.25.9

• Changed styling on Quote component

1.25.8

• Fixed bug with ModalDialogOverlay not working on server rendered pages

1.25.7

• Make modifications to StepIndicator
• Add proper display for single elements in BoxGridBlocks

1.25.6

• Add DisplayFunctionality molecule

1.25.5

• TextBox className passed down
• Modal scroll fix

1.25.4

• Video with custom thumbnail and title

1.25.3

• TextBoxWithLabel bugfix when conditionally showing icon

1.25.2

• Add new options for BoxGrid component
• Removed pointer-events from AccordionList icon
• CSS tweaks to ToggleSwitch

1.25.1

• Expost MenuTopPanel

1.25.0

• TextBox components split up

1.24.1

• Header component has grey background by default

1.24.0

• Updated React version in the Node app
• Updated PostCSS versions

1.23.2

• InfoBox component
• Heading's can be centered
• Label styling adjustments

1.23.0

• Accordion: Plus/minus icons replaced with up/down arrows. No breaking changes to React component, but HTML structure changes, so non-React apps need to adjust their HTML.

1.22.4

• FeatureBoxes component

1.22.3

• Forgot to update AllIcons files

1.22.2

• Added two new icons ico_five and ico_six
• Add vertical list display option for USPs
• Add new checkmark icon for B2B page

1.22.1

• Style changes to LightAlert and Container

1.22.0

• FunkyTabs now only renders selected content (previously all other content was in DOM with display:none)
• Added and changed use of props for ToggleButton

1.21.7

• Small color change to icon for black version of Subscription Box

1.21.6

• Added new Data Freedom icon
• Updated black variant of Subscription Box

1.21.5

• Added new Music Freedom icon

1.21.4

• Added three new icons: ico_gift, ico_kr and ico_interest_free_down_payment. Also changed the ico_klikk-og-hent.

1.21.3

• Added black color option to Box/Subscription component
• Small change to FunkyTabs onSelect method

1.21.2

• Changes to style of StepIndicator
• Added withBorderBottom and backgroundColor props to Header
• Changes to style for FocusBoxWithLabels
• Added id prop to Form
• Fixed such that FocusBox shows border on mobile as well
• Added light-grey color to AnimatedProgressBar

1.21.1

• Updated README in component-lib folder
• Updated heroku build scripts

1.21.0

• Made custom classes appear last for Button component
• Form component can now take classNames
• PriceTable can now have array of subtitles per product. This is a major change to the proptypes of PriceTable
• StepIndicator changes
• Safari Fix for Speechbuble in Subscription component

1.20.0

• tree shakable components (this version has backward-compatibility, however, since there is not /dist folder anymore in the library, you should import index.css from styleguide root directory if you have this file in your codebase)

1.19.4

• Minor stuff

1.19.2

• Added hideMenu prop to PageHeader
• Minor style change for StepIndicator
• Added sr-only class global in component lib (screereader-only)

1.19.0

• Split AccordionList component into AccordionList and StatefulAccordionList where all the scrolling and toggling is inside the StatefulAccordionList and AccordionList is a pure component.

1.18.0

• Changed handling of menuLinks prop in PageMenu to expect a string of html in contentAboveItems instead of a React component

1.17.0

• Added RichText molecule
• Adjusted margins on several components
• Removed margin-bottom on heading--level-2

• (and therefore) added new light-alert__heading css class for LightAlert molecule
• (and) new focus-subscription__heading css class for FocusSubscription organism

• Updated some examples and sample pages with new classes and content

1.16.1

• HorizontalRule: Added prop to fix example that was wrong, and updated related components.

1.16.0

• NumberBoxes component removed

1.15.14

• B2B subscription box: Bugfix: text in bubble disappeared on hover

1.15.12

• FullWidthTable: Table rows are contained within container

1.15.11

• ProductPromoBox: center text in button

1.15.10

• ProductPromoBox: inlined button on desktop

1.15.9

• Bugfix for streched HardwareProducts in Firefox

1.15.8

• Added LightAlert molecule

1.15.7

• ProductListGrid has a horizontal layout option

1.15.6

• New icon ico_truck added

1.15.5

• ProductList data boost Safari fix

1.15.4

• Removed BelowTheLineOffer
• TextBoxWithLabel ref forwarding
• Button disabled prop fix
• Font name fix
• ProductList smallfixes
• Removed heading--pebble class
• • others

1.15.3

• Added trash icons & source icon cleanups

1.15.2

• Added klikk-og-hent & map icons
• ProductList items onClick

1.15.0

• Icon fixes
• ProductListGrid multi-column layout

1.14.3/1.14.4/1.14.5

• Added two svg icons

1.14.1/1.14.2

• Auto-generate the AllIcons.jsx component - no dependencies - and make it a part of the library.

1.14.0

• No static path for icons. Relies on an embedded SVG being present in the DOM.

1.13.2

• StepIndicator [changed]
• PromoBox [new]

1.13.1

• ProductList: new promo variant [changed]
• RelatedArticle: placeholder image [changed]
• ProductListGrid [new]
• Fixed all linting errors

1.13.0 [changed component]

• TextBoxWithLabel: Refactoring of component, adding props className and withIconButton. Old withIcon prop has now a different usecase, new name is withIconButton.
• AnimatedProgressBar: Bugfix in prop-types
• PageHeader: Always white BG
• PageMenu: Faster hamburger meny animation

1.12.1 [changed component]

• UniqueSellingPoints: adjusted width on items

1.12.0 [changed component]

• ProductPromoBox changes

1.11.10

• AnimatedProgressBar
• UniqueSellingPoints

1.11.9 [various]

• Organism: FocusBoxWithLabels
• PageHeader fixes
• StepIndicator fixes
• Hamburger menu animation
• PriceTable adjustments

1.11.4 [changed component]

• Molecule: PageMenu - modified to use searchUrl for link to search page or remove button if not defined

1.11.0 [changed component]

• Molecule: AccordionList - icons now done with CSS again

1.10.0 [new + changed components]

Atoms:

• Box
• IconLink
• List with BubbleLinks
• SvgIcon
• UniqueSellingPoints

Molecules:

• AccordionList
• Alert
• ArticleMetaData
• BelowTheLineOffer
• BoxGrid
• FactBox0
• Header
• PageHeader
• PageMenu
• PersonBox
• ProductList
• StepByStep
• Subscription
• TypeSearch

Organisms:

• ContentRating
• Theme Boxes

1.9.7 [changed component]

• Molecule: PageHeader - added "Handlekurv" text to cart button and made styling-changes to the cart counter

1.9.6 [changed component]

• Molecule: TextBoxWithLabel - changed positioning of icon in input field

1.9.5 [changed component]

• Molecule: TextBoxWithLabel - added a modifier to have the possibility to add an icon in the input field

1.9.0 [changed component]

• Molecule: PageMenu (removed showButtons prop)
• Molecule: PageHeading - (removed textAboveLoginButton and showButtons prop in favour of templating; CSS change)

1.8.0 [new component]

• Molecule: MiniDashboard (previously UserDashboard)
• Molecule: UserDashboard - removed

1.7.10 [new component]

• Molecule: Subscription (broadband variant)
• Molecule: PriceTable

1.7.8 [new component]

• Organism: HardwareProductList

1.7.7 [new component]

• Molecule: HardwareProduct

1.7.6

• Add new icons

1.7.5

• Fix missing lodash import

1.7.4

• CommonJS/dist stuff
• Alerts are minimizable
• ToggleSwitch adjustments

1.7.2 [new + changed components]

• PageMenu
• PageHeading . ToggleSwitch

1.7.1 [new components]

Atoms:

• Caption
• DescriptionList
• FullWidthTable
• HorizontalRule
• IconLink
• InputError
• List
• NumberBoxes
• PagePebbles
• Paragraph
• Quote
• ShadowBox
• SpecialMessage
• StepIndicator
• Tags
• TelephoneNumberLink
• TextArea
• UniqueSellingPoints

Molecules:

• ArticleMetaData
• BoxGrid
• DownloadButtons
• FactBox
• FocusHeader
• FullWidthImage
• Header
• HeadingLink
• Hero
• Image
• ImageHeadingLink
• ListWithImage
• RelatedArticle
• StepByStep
• Video

1.7.0 [changed component]

• Tabs & FunkyTabs changes

1.6.0 [changed component]

• Molecule: Subscription

1.5.4 [new component]

• Organism: ThemeBoxesWithImage

1.5.1 [component library]

• Component library small fixes

1.5.0 [component library]

• Initial support for a component library (!)

1.4.0 [changed component]

• Organism: ThemeBoxes - removed/added css class

1.3.8 [new component]

• Molecule: Tooltip

1.3.5 [changed component + smallfixes]

• Molecule: ProductList
• Others: disabled button, radio focus styling, other minor changes

1.3.4 [new component]

• Organism: ThemeBoxes

1.3.3 [new component]

• Molecule: RecommendedProducts

1.3.2 [new component]

• Molecule: ProductList

1.3.0 [changed component]

• Organism: FocusSubscription - uses the new DescriptionList component

1.2.6 [new component]

• Atom: DescriptionList

1.2.5 [changed component]

• Atom: List - Changed margin-top on list

1.2.4 [extended component]

• Atom: List - Added option of having list with columns

1.2.3 [extended component]

• Molecule: DataBoostChart and DonutChart - added option for having the charts as a link

1.2.0 [changed component]

• Molecule: FactBox - removed horizontal line and borders

1.1.13 [extended component]

• Atom: Button - Added processing state

1.1.12 [extended components]

• Molecule: TextArea, TextAreaWithLabel and TextBoxWithLabel - Added disable state

1.1.11 [extended component]

• Organism: Form - Added fieldset as an element to form

1.1.10 [new component]

• Atom: AlertText

1.1.8 [new variant of component]

• Atom/Molecule: Subscription purple

1.1.6 [new component]

• Atom: InputError

1.1.4 [new component]

• Molecule: TextAreaWithLabel

1.1.3 [new variant of component]

• Atom: List--icon-text-links

1.1.2 [new component]

• Atom: TelephoneNumberLink

1.1.1 [new component]

• Atom: ShadowBox

1.1.0 [breaking changes]

• Molecule - StepByStep - New Pebble type and separated Circle type. Steps can now change between types with just a class change.