Add autoplay option to carousel

Remove zendesk from boilerPlate

Include event.js before the system's bootstrap

Scope RTL rules for legacy components

Lazy loading component stops working after 4 seconds

Lazy loading starts working as soon as the main js is executed

Select arrow rotation

Blue frame on arrow of the product finder on mobile

Fix the display of the arrow in product finder component

Use em instead of px

RTL Fix for Tabs alignment

This issue was visible in the middle of the page tabs implementation in right to left websites.

Fix round checkbox styles

Fix broken styles.

Implementation of getImport method

Implemented a new function to import assets that might not be initially present in the page.

Update Support Email

Updated support email to point to ZenHub.

Select style fix for custom implementations

Implemented custom data attribute selector for default search.

Remove modenizr

This was causing a conflict with webpack in the latest version of Docker Desktop 2.5.x but was no longer needed so it was removed.

Choice styles fix in mobile navigation

Added code from choices base style.

Radio box colour fix for default option

Added checked state to radio box output.

Front lag when loading page

Fixed a loading issue in the front page. Slight loading time improvement.

Add missing tabs configuration

Added tabs in the PostCSS.

Change feature selectors to classes

Refactoring of code. No functionality change.

Batch CSS link insertions

Refactoring of code. No functionality change.

Removed redundant code from DOMElmReady

Manual code was removed because the choice.js extension it now has the patched functionality.

Added Preloaders to components JavaScript Files

This change improves loading of included files.

Refactor DOMElmReady to ES7 Syntax

Refactoring of code. No functionality change.

Add display swap to type face styles

Improved selection of the correct font type file extension.

Refactor Button Entry Point

Refactoring of code. No functionality change.

External Hover Link Transition

Fixed an visual issue.

Carousel mobile improvements

Peaking card contrast change, pagination dot size changes for better accessibility.

Update browser support

Work done to review and replace the old browser support list with a newer list has been implemented and included within this release. A new page tab has also been added to the docs outlining this change.

Number picker label

A label has been added to the number picker to improve UX and accessibility of the component.

Form element colour contrast

Accessibility improvements to the form elements have been made to increase the colour contrast and ensure WCAG AA conformity.

Improved readability of long-form button text

Button text was being truncated with an ellipsis if it's length exceeded that of the buttons parent container. In Firefox an additional bug was making the entire button leak outside of its parent container which, in some cases, would break the layout. New styling enables the button text to wrap over multiple lines which helps maintain readability at all times.

Product page image gallery

The height of the carousel items has been equalised to avoid the UI from jumping up and down when images of differing aspect ratio are used. Images are now centered vertically if they don't fully fill the gallery frame.

Filter margins

Increase to the vertical spacing between filter check boxes.

RTL - Add tick to check box list when checked

The RTL market styling of the check box list was missing a tick when the checklist item was checked despite the text being correctly struck out.

RTL - Fix the margins on centered tab component

The centered variant of the tabs component has too much space between items, which looked more like it was justified rather than centered. This fix ensures the LTR and RTL centered styling is the same.

Secondary nav - dropdown icon artefact

A chevron icon from the secondary nav was showing through onto the main navigation panel on mobile screens. A z-index style change has fixed this.

Latest Sketch UI kit deployment

Version 8.9.1 of the sketch UI kit has been added to the resource download section of the docs.

Alerts

Alerts had a series of issues that made them operate poorly, this release rectified the following bugs: - Alerts are not closing completely - Incorrect cursor on alert close button - Hitbox on close button on normal alert is not aligned correctly

Accessibility issue with video embed

Added a title tag to video iframes examples within the portal to increase accessibility. Requires non-breaking HTML updates to any currrent implementations.

UI form focus accessibility

Added missing form focus styling to dropdown select elements.

No dataLayer push on Tooltip images

Added dataLayer push events to the interactive image tooltips.

Improve Datepicker Input Entry Validation

Added input masking to the date picker when keyboard is being used to input dates.

Add Eslint Rules to Protect against Cross Site Scripting

New eslint rules have been added to the codebase to help identify and warn of possible dangerous code techniques and methods.

Multi-select dropdown

Based on design recommendations, dropdown options now persist after being selected with an icon now showing selected state.

Lazy loaded carousels break the page layout in RTL markets

Added some new CSS that fixes this problem.

Make the config loading example codes version number dynamic

It was hardcoded which is not ideal, it now uses a dynamic value.

Menu hamburger button not working when tapped from some pages on mobile

Interactive image is not interactive anymore was an additional issue bundled with the issue title. It was caused by the interactive image initialization.

Navigation Preview link goes to 404 page

Preview button in Design Language Portal now toggles the correct mega navigation component in the related example.

Top Search Icon

Browser compatibility fix that was related to some browsers adding themselves the 'X' in the input of the search bar.

Top Search Symbol Issue While Typing

Top search weird symbol appeared when you typed in search bar. That was a style issue, now fixed.

Hierarchy Misspelt

Typo correction.

Fix Critical CSS Blue Links

Styling issue caused by component loading with the wrong priority.

Progress bar with indicators and tooltip undefined at 0%, 50% and 100%

Fixed a small issue where progress indicators would return an undefined value, also added a better example of how to use custom progress labels.

XSS issues - forms, sliders

Sanitized messages that were passed through data attributes on the form validation.

Increased line-height on bulleted lists and icon lists

WYSIYG lists have had their line height increased to better space out items.

Add preconnect and dns-prefetch to documentation

Added performance enhancing preconnect and dns-prefetch tags to the boilerplate HTML to increase page speed.

Configuration based loading

This work introduces a new way to initialise components by specific declaration per page. Which creates performance improvements and helps unblock other pieces of work that load with different priorities.

Update noUISlider to enable new accessibility features

Accessibility improvements and version update for noUISlider dependency.

Page Selector (Pagination)

It was agreed with the stakeholder that pagination component should not be displayed fully RTL, we reverted the text display to LTR and changed the button configuration to RTL.

Icon Positioning

All icons across the component library have had there position reversed to suit RTL layout

Carousel display optimised

All the carousel variants have been fixed for RTL language display

Form display update for RTL language

A complete update of basic form elements has been completed for RTL language, this includes text boxes, checkboxes, radio buttons and dropdown selects.

Spacing and Alignment Issues

A complete audit of all elements and components has resulted in a thorough set of fixes of all RTL spacing and alignment issues.

Interactive Image Toggle fix

We found an issue regarding the loading of the Interactive Image Toggle Component. This was blocking JavaScript on the rest of the page and has now been fixed.

RTL Tooltips and checkboxes

We amended the styling on these UI elements which were not displaying appropriately in RTL languages.

Design Language Critical CSS additions

We have added critical CSS to improve base styling and reduce jarring page reflow after JavaScript execution.

Sentry Loading Issues

This version introduces one major fix for sentry loading issues that produced errors in various components by prohibiting loading.

Sentry Loading Issues

This version introduces one major fix for sentry loading issues that produced errors in various components by prohibiting loading.

Sentry Loading Issues

This version introduces one major fix for sentry loading issues that produced errors in various components by prohibiting loading.

Sentry Loading Issues

This version introduces one major fix for sentry loading issues that produced errors in various components by prohibiting loading.

Docker and Node 10

A lot of work has been done to change the development environment to use Node version 10 and Docker.

Update Contribution, Access Request Email

Updated the email address in the contribution page to allow new contributors request access to this project.

Update Registered Logo

Updated the Royal Canin logo to include the trademark symbol.

Navigation Menu Issues

This version introduces some fixes to navigation issues caused by the RTL work of the previous version.

Grid Container Fix

There was an improvement in loading order of the styles of the grid container layout.

Carousel Navigation Dots Fix

Improvement of the loading order of components used to synthesize the carousel.

Fix Dropdown Arrow Bug

Fixed a bug that caused, in a few components, to make the dropdown briefly visible after page load and then make it invisible.

Added Right to Left (RTL) support

We added support, to a great extend, for right to left alignment for the majority of RCDL components and layouts. This will enable greater usage of our system in RTL languages such as Hebrew and Arabic.

Added GTM tracking to various components

We added GTM tracking to various old and new RCDL components, which allows us to track interactions, ultimately allowing us to better the component in the future based on user feedback. The components enhanced in this release are; Interactive Image Toggle, All Tabs, and the Checklist component.

Google Font Proxy for Chinese Markets

ISPs based in China were blocking/slowing down the connection when Google Fonts were requested. This was adding on average an extra 30 seconds to the page loading time. This new feature provides fonts from another server, reducing the font to load on average 3ms. Speedy!

Security Improvements

Updated the Snyk package to latest version. Keeping on top of vulnerabilities so you can focus on what matters.

Cleaning & Refactoring Code

Refactored the SASS to CSS split build process. Far cleaner CSS being exported which means that this assets can be loaded much faster.

Updated Preload Logic

Component loading logic has been updated to use internal Webpack logic. This means a much faster cleaner build.

Updated Polyfills

We have updated our central polyfill (code to provide modern functionality on older browsers) codebase to ensure more consistent polyfilling across browsers and devices. This has also reduced the amount of unnecessary code. Meaning a quicker, faster design language!

Add checklist component

We have added the checklist component, which can be used as an interactive tool for users to mark off items as they complete them.

Add quicktips component

We have added the quicktips component which has been designed for stand out copy when you want to highlight a point, or draw attention to additional information

Add interactive image component variant

We have added the interactive image component variant as another way to show content in relation to an image. You can use numbers or icons within action buttons on this component.

Add content block component

We have added the content block component to show how users have the ability to use components together within a layout container to achieve a richer experience.

Missing class on hyperlink example

We have fixed an issue which was causing some users to experience un-styled links. To fix this we added the missing ‘rc-styled-link' class to the hyperlinks cta. This means that there is now a consistent standard set with links.

Missing class on shadow visual styles

We found an issue which meant that the shadow visual styles weren’t showing on the portal, so users of the design language couldn’t see any examples. This has now been fixed.

Icons were being hidden from buttons

Icons were being hidden from buttons by the critical css file on first load. This has been fixed now.

Borders being hidden from list items

Border were being hidden from list items, which made the mobile nav harder to read, this has been fixed now.

Component Lazy Loading

There was an issue where our components were all loading as soon as the user landed on a page. This had a negative impact on performance and had to be fixed. We’ve now implemented lazy loading, so each component will only be loaded as and when it’s needed.

Flash of Safari based styles

This was fixed with the Critical CSS enhancement mentioned below, but essentially Safari adds base styles by itself. For example, buttons have grey backgrounds; which is not design language compliant. Because of this we had to add specific styles to the Critical CSS stylesheet to counteract the safari specific styles. Now the header loads almost perfectly with the Critical CSS so the jump from that to the main CSS shouldn’t be too noticeable.

Royal Canin Logo Update

We have update the royal Canin logo throughout the website to include the registered trademark symbol. This change will be rolled out with all new versions, and will be manually added to previous versions one by one.

Improve Critical CSS

We load two CSS stylesheets on the Design Language; Critical CSS and the Main CSS. The critical CSS is loaded on first load, and the main css is loaded afterwards. If the user has a slow connection, the Critical CSS might be the only stylesheet loaded for a few seconds. The critical CSS is designed to have the basic colours and layout correct, so that the jump from Critical to Main CSS isn’t too aggressive. We have added more styles to the Critical CSS to make this jump smoother. Noticeably in the header, and with button styles.

Feature Checking Performance Improvement

We’ve improved the way that we load features in the Design Language, which has had a positive impact on the performance and speed of loading features.

Cleaning & Refactoring Code

We are constantly on a mission to ensure that our code is up to the latest standards, not only for accessibility and page speed, but also so that it’s developer friendly. We made a conscious effort during this sprint to refactor a long list of elements, and tidy up large sections of code. This will make our code much more maintainable going forward, which keeps our developers happy.

Add Gitter Link

We recently removed our Slack channel from the RCDL, as its not a platform that we wanted to use going forward. We have now added Gitter! It works in very much the same way; If you go to the link on the Help page, you can login to Gitter with a GitLab, GitHub or Twitter account, and can start a conversation with people on the Royal Canin Design Language team. Your questions will be answered as they're picked up, and you might be able to help fellow community members with their problems. This feels like a more inclusive solution, and we’re excited to see how the public uses it.

Removed Links to Slack Support Channel

We have removed the links to our slack support channel in anticipation of a much more useful, engaging support platform coming soon. The slack channel is now redundant. Issues can still be raised in GitHub for the time being.

Replace Incorrect Link in Mega Menu

The 'submit an issue' link in the mega menu was directing users to the incorrect page. This has been rectified.

Code Snippets Displaying Incorrectly

Some code snippets for certain elements were not displaying correctly. All of the functionality worked as expected, but some styles were missing. This has been rectified now.

CSS Testing has been added

We have added a CSS testing library called CSS Stats. This allows us to view statistics about the css that we are using, to make sure that things are consistent, and that we are not straying from the design guidelines.

Typography Documentation

The typography documentation has been reviewed and updated to make it more clear and concise. Typeface, Headings, Paragraph and Modifiers documentation has been split up into separate tabs so that it is easier to navigate and find the correct information. We have also added extra documentation around the Alpha Impact class.

Brand Identity - Type Styles

Line height increased for alpha, beta, gamma and delta classes on larger displays and line height also increased for alpha and gamma classes on smaller displays.

Brand Identity - Iconography

New icon for ‘New Window’ under General UI. New icon for ‘Contact’ under General UI.

Brand Identity - Colour

Tertiary success colour changed from '#47B800' to '#008900' to comply with A11y colour contrast testing.

New impact class added

New impact class added as an alternative style for alpha text.

Elements - Buttons

New rules around high impact and general use buttons to avoid overuse of high impact buttons.

Elements - Forms

Select dropdown input state redesigned to coordinate with design language portal. Unreleased tag removed from Multi-select Dropdown. Mini forms renamed Micro forms to coordinate with design language portal.

Components - Interactive Hotspots

Interactive hotspots on mobile reduced from 48px to 40px.

Components - Image Galleries

Image Galleries deprecated, this has now been removed from the Sketch kit.

External Links & New Window Icon

Adds in new window icon and adds the ability to open links in a new window.

Success Green Colour Change

Update success green colour to comply with A11y colour contrast testing.

Integrate Automatic HTML Testing

Adds automatic HTML testing which allows us to ensure that our elements and components are HTML compliant with W3C guidelines.

A11y Testing on parts

A11y testing allows us to run accessibility tests on various parts of the design language to ensure they are compliant with modern accessibility guidelines.

New hyperlink type added

New Window hyperlink type added that allows links to open in a new window. We also added a new link icon to accompany this.

A11Y testing tool

The automated accessibility testing tool has been added to the portal. That will help us to eliminate any accessibility issues before each release.

New contact icon

A new contact icon has been added to the design language icon kit.

Keyboard Accessibility

Bug that made it difficult to navigate the mega menu using your keyboard has now been fixed.

CSS chunks loading

The bug that was causing, not all of the styles were loaded on the website, has now been fixed.

New Hyperlink Documentation

Hyperlink documentation has been updated to include our new link type.

Utility class documentation

Documentation about utility classes has been improved. New page dedicated specifically to it has been added to the portal.

Updated Starter Boilerplate

Starter boilerplate template has been updated, to make sure it follows all the Design Language rules.

Zoom pinch on product carousel

New option of zooming image with pinch gesture, has been added to the product carousel.

Mega menu on iOS9

Bug that was causing mega menu unable to open on iOS9, has now been fixed.

Tabs, accordions on iOS9

Bug that was causing tabs and accordions unable to toggle on iOS9, has now been fixed.

IOS bugs

Multiple minor bugs on iOS has been now fixed.

Code examples

Bug that was causing incorrect rendering of code examples on portal, has now been fixed.

A11y errors and warnings

Multiple accessibility errors and warnings on the portal has now beed fixed.

Tooltips with data on charts

Tooltips are now displayed correctly when user interacts with the charts.

Colour utility classes

More colour utility classes have been added to the portal.

Custom date picker

We’ve added documentation around how to initialise date picker with custom options.

Keyboard Accessibility

Keyboard accessibility has been improved, by adding more obvious focus state, and fixing switching between elements.

New style added for header

New ‘impact’ modifier class has been introduced. It can be used with ‘.rc-alpha’ class.

Added event on load for each component

Event fires when each component is loaded, for use by developers.

Mobile navigation padding

Bug that was causing incorrect padding to be rendered on mobile navigation items, has now been fixed.

Hover icon bug

Bug that was causing incorrect hover behaviour on Boilerplate icons has been fixed.

Number picker validation message

Incorrect behaviour of validation in number picker has been fixed.

Assets loading bug

Bug that was causing to not all CSS assets being loaded, has now been fixed.

Custom date picker

We’ve added option to initialise date picker with custom options.

IE buttons styles

The bug that was causing buttons to display incorrectly on Internet Explorer, has been fixed.

Calendar year select

The bug that was causing the date input to display only few years, has now been fixed.

Product carousel image on IE

The bug that was causing product carousel image being cropped on IE11, has now been fixed.

Spacer classes specificity

The bug that was causing spacer utility classes specificity issues, has now been fixed.

Incorrect form label size

Form label size has been updated to match the UI Kit.

Box checkboxes

A new checkbox style has been added to better suit commerce usage.

Impact font style

Alpha header modifier styles has been added to Design Language to create a bigger impact when paired with emblematic images.

Release notes search

Ability to search release notes has been added.

Switch tab to accordions

Functionality that changes accordions to tabs, when changing from desktop to mobile view, has been added.

Card carousel documentation

Card carousel documentation, about various card numbers, has been updated.

iOS icons bug

The bug that was causing icons being displayed with additional line on iOS devices, has now been fixed.

Number picker issues

Minor bugs with number picker input, have now been fixed.

Navigation list headers

The bug that was causing mis-alignment of navigation list headers, has now been fixed.

Product carousel image height

The bug that was causing product carousel images being too tall, has now been fixed.

Vet product description page

The bug that was causing product title header to be hidden on Vet PDP, has now been fixed.

Product carousel image on MS Edge

The bug that was causing product carousel image not displaying on MS Edge browser has now been fixed.

Telephone input

The bug that was causing incorrect validation of the telephone number, has now been fixed.

Text input with prefix and suffix

New text inputs which allow the addition of prefix/suffix to the input, has been added to the Design Language.

CSS delivery improvement

CSS stylesheets have been sliced into smaller batches to further improve loading time. Critical CSS stylesheet has also been created to make sure first load is as fast as possible.

Image zoom loader indicator

Image zoom loader indicator has been added when using zoom feature on product carousel.

Card footer area

The default are in cards components has been added to the design.

Icons - how to

To aid consistency and efficiency, a document explaining how to create icons for the design language has been added to resources page.

Updated sketch file - UI Kit

The updated UI Kit sketch file has been added to the portal.

Utility colour classes

Utility colour classes has been added to brand colours page.

Meta Titles

Meta titles on the Design Language website now reflect the current page.

Card Type B

The order of information on card type B is now correct in the example on the Design Language website.

Image zoom

Zoom on landscape oriented pictures is now centred and image zoom can now be closed on mouse leave.

Size Selectors

Radio buttons are now in size order with none disabled.

Hero Image Carousel

Images are no longer blurred on mobile devices.

Carousel Swipe

Added the ability to swipe on copy content as well as image area on mobile.

Micro Form

Long text is no longer hidden behind the submit button.

Slider

Red line behind dot has been removed so movement is clearer for user.

Number input

When focussing on number picker the zero now disappears leaving a blank input.

Updates

Further documentation added for the number picker and exceptions to button rules.

Lazy-loading Components

Components are now only loaded when they are in or enter the viewport. This eases CPU usage on page load and runs for the shorted amount of time possible.

Master PDP & Vet Services Global Template

Within the new template section there are the first two master templates. More documentation on there usage will be available soon.

Mobile accordion/Desktop tabs component

We’ve added a new data attribute that converts an accordion to tabs on desktop.

Box radio button

A new radio button style has been added to better suit commerce usage

XL spacer size

XL size spacing for mobile and desktop.

Number picker variation

Version of number picker without buttons has been added to design language.

Template page classes

We have added a template page specific class (rc-template--pdp) that gives use case specific layout enhancements.

Product image max height set in Product Image Carousel

A max-height of 500px has been added to the product image in the product image carousel to stop images scaling too far when supplied at large sizes.

Carousel card count

After a UX review we have now set the card carousel has a new max limit of four cards, this has reduced from six.

New tabs style variant

There is now a new class adding a full width bottom border to tabs (rc-tabs__controller--border--full-width).

Icon button bug

Bugs that was causing overwriting of utility, mobile visibility class has been fixed now.

Select mobile issue

Problem with un-clickable select input on mobile devices, has now been solved.

Card grid height match bug on IE11

Bug that was causing incorrect card height calculation on IE11, has now been fixed.

Button hover on contact us page

Bug that was causing incorrect hover behaviour on icon buttons, has now been fixed.

Number picker variation

Number picker is using specific class (rc-input__number-picker-wrapper) for styling instead of role. But we have kept the old role selector for compatibility, this will be removed in version 9.

Prototypes/Templates

We have removed the prototype from the Design Language website as they were only intended to be temporary until we start supplying global templates. The new product description and vet services global templates are the first items in the new templates area.

Image zoom

New image zoom functionality has been added. It’s allowing user to zoom in the product image in product image carousel.

Webpack contenthash

Contenthash have been added to website specific javascript for improved caching.

Picture images on Internet Explorer

To ensure correct working of background images on IE browsers, adding additional class .rc-bg-responsive-image--contain to rc-bg-responsive-image is now required.

Fix mobile navigation item list padding

Bug that was causing incorrect padding on mobile navigation list has now been fixed.

Logo version

A bug where the RC logo version was permanently stuck to 8-5-11 has been fixed. Now the logo is always up to date with the current release version.

Single breadcrumb targeted by progress bar javascript

A bug where single breadcrumb items triggered a progress bar method resulting in a string of ‘%null’ being appended to the page, has been fixed.

Breadcrumbs without links

Any breadcrumb that isn’t a link should now me a span not an a tag. These span breadcrumbs are styled the same but have no rollover state.

Border-none class

Documentation including a markup example, has been added for rc-border-none class.

Prototype pages banner

A banner for prototype pages has been created. It highlights that the user is on a prototype page and includes a back to ui-framework link and download html link.

Prototype pages image optimisation

Prototype pages images have been optimised.

New icons

New icons - payment, confirmation and delivery has been added to DL.

Full width inputs not full width

Max-width property being applied to full width inputs has been fixed.

Forms prototype page custom select

The custom select on the forms prototype page has been fixed.

Card grid prototype image urls replaced

Card grid prototype image urls changed from http to https, images were blocked on Firefox.

Video icon bug

Bug that was causing incorrect rendering of extra small video icon has been fixed.

List bullet points - IE/Edge

Bug that was causing columns list bullet points to disappear has been fixed.

View control tabs bug - IE/Edge

Correct focus state style, has been added to view control tab.

Card Type A - Product

Product card img element now wrapped in picture element with updated classes, product listing prototype includes updated product card.

Tabs buttons

Tabs buttons are now wrapped into nav element for better semantics.

Tabs bottom border

New modification of tabs (with bottom border) has been added to DL.

Full width input class added

The class ‘.rc-input--full-width’ has been added to the Design Language.

Choose cards number in cards carousel

An option to define cards number in cards carousel has been added.

Featured card images

Featured card images are now stretched to 100% of their parent container on mobile devices.

Card issues on Internet Explorer 10/11

Multiple bugs with displaying cards on IE10/11 has now been fixed.

Pager bug on Internet Explorer 10/11

A bug that was causing incorrect render of pager component on IE10/11 has now been fixed.

Content with list in accordion

A bug that was causing incorrect list styling in accordion component has now been fixed.

Multi-select input

A bug that was causing incorrect working of multi-select input on mobile devices, has now been fixed

Icon buttons on Internet Explorer 10/11

A bug that was causing incorrect styling of icon buttons, has now been fixed.

Images tabs on Firefox

A bug that was causing incorrect styling of image tabs has now been fixed.

New card carousel example

New card carousel example has been added to carousels page.

Data visualisation mobile tooltips

Bug which was causing incorrect rendering of mobile tooltips has been fixed.

Map tooltip mobile

Correct markup and styles has been added to map tooltip.

Filters headings

Filters headings alignment on IE, Edge and Firefox has been fixed.

Register modal form

Classes added to markup to fix layout on desktop and mobile.

Modal close icon alignment

Close icon for modals is now right aligned.

Custom select inputs

Bug where custom select inputs were broken on IE11 and Edge browsers is now fixed.

Sortable tables

New data sorting methods has been added. Also developer can add his own, custom sorting method as well.

New image sizes and shapes

New, default size has been added. Also new square shape image has been added.

Visited hyperlinks

New border-bottom-color added for visited hyperlinks.

Image gallery

Variation of carousel - image gallery, has been added to DL.

Number picker

A number picking component has been added to DL.

New icons added

Icons list-view, grid-view and pin have been added at the default, small and x-small sizes.

Spacing in layout containers

Documentation on how to use spacing utility classes in layout container, has been added.

New card example

New product card example has been added to cards section.

Form success input

Documentation on success visual indication on form inputs and its styling, has been added.

Data visualisation component

A new data visualisation component has been added to design language.

Card carousel on Edge/IE browsers

A bug that was causing incorrect behaviour of card carousel on Edge/IE browser has been fixed.

List with link header on Edge/IE browsers

A bug that was causing incorrect styling of list with link headers on Edge/IE browser has been fixed.

Accordions with lists

A bug that was causing incorrect styling of accordions with lists, has been fixed.

Gap under image

A bug that was causing weird gap under image in column on mobile view, has been fixed.

Tooltip arrow colour

A bug that was causing incorrect styling of tooltip arrow, has been fixed.

Forms wrap element

All prototype forms are now wrapped in correct form element.

Edge/IE header animation

A bug that was causing incorrect animation of header logotype, has been fixed.

Left image carousel nav center clas

A bug that when the center class applied to the left image carousel nav wasn’t centering, has been fixed.

Slider with label starting value

A bug that was causing to display initial value as undefined instead of 0, has been fixed.

Firefox column max-width

A bug that was causing incorrect width of columns on Firefox browser, has been fixed.

Firefox parallax images

A bug that was causing parallax images to pop out of their wrapper element and sit above elements it should be below on Firefox browser, has been fixed.

Firefox button error

A bug that was causing buttons to behave incorrectly on Firefox, has now been fixed.

Single columns vertical alignment

An utility class for controlling vertical alignment in columns has been added.

Modal element vertical centered

Updated standard modals class to vertically align them centrally.

Button group horizontal alignment

An utility class for controlling horizontal alignment of button groups has been added.

Telephone input validation

Telephone input now checks for numbers and can test the input string against a regular expression pattern if it is supplied as an attribute.

Favicon and images in HTML boilerplate as CDN asset

Favicons and images are now hosted as a CDN asset.

Accordion open on load

A html attribute when set on a accordion item opens it on load.

New utility class for grouping inline inputs

New utility class for grouping inline inputs has been added.

Javascript implementation

Documentation has been added to show how to implement the RC js script via CDN.

Forms

Forms documentation has been updated with new utility classes.

Prototype footer

Prototype footer markup updated as to render more in line with the UI kit on mobile and desktop. Footer documented and boilerplate files updated.

Cart icon

To meet the demand for a more US friendly checkout icon, we've added a new cart icon to accompany the shopping basket icon.

Select script

Bugs that was causing multiple re rendering of select component was fixed.

Tags

Bugs with tags hover effect have been fixed.

Password toggle

The password toggle button is now aligned flush with the edge of inputs in order to prevent it bleeding off the edge of the screen or container..

Header shadow

The header shadow is now applied to the header styles at the correct breakpoints.

Buttons bottom cropped

Bug that was causing bottom of buttons being cropped on iOS, has now been fixed.

Header shadow

rc-shadow--none is no longer required in the header markup.

Mega menu

Markup for mega menu has been changed to better structure navigation items.

Pagination

Aria labels has been added to step pagination, to ensure better accessibility.

Tags

Aria labels has been added to tags, to ensure better accessibility..

Carousel

The card carousel on mobile will now have a maximum of 6 cards, any excess cards will be removed. Tablet breakpoint has been tweaked so that 4 cards show instead of 6, to avoid the layout breaking. The “previous” and “next” arrows are also removed when at the beginning and end of the carousel loop. These arrows now also have the correct “brand1” hover state.

Card grid

The bug that was preventing to setup card grid with fixed cards number, has been fixed.

IE Card images

The bug that was causing card images to stretch horizontally, has been fixed.

Multi select

Few minor bugs in multi select input, have been fixed.

Button and styled link

Documentation explaining how to use button with styled link has been added.

Carousel

Documentation about the dynamically generated JSON card carousel has been removed whilst an improved implementation is introduced.

Mobile devices datepicker

A bug that was causing incorrect datepicker behaviour on mobile devices, has been fixed.

Grid container IE11

A bug that was causing incorrect grid container rendering, has been fixed.

Breadcrumbs hover state

A bug that was causing incorrect hover animation, has been fixed.

IE11 JavaScript console error

A bug that was causing a lot of functional errors on IE11 and Edge browsers, has been fixed.

Multi select input

Bugs that were causing multiple style inconsistencies, have been fixed.

Breakpoint change event

An event for detecting breakpoint changes has been added.

Footer button

Bug with incorrect hover state on footer buttons has been fixed.

List indentation

Bug with line-wrap overflowing to the bullet, that was causing legibility issues was fixed.

Inline icons

Bug with padding around inline icons has been fixed.

Select input sorting

Bug which was causing incorrect numbers sorting in select input has been fixed.

Website ‘jumping’ on load

Bug which was causing website ‘moving’ on the initial load has been fixed.

Header shadow over progress

The class rc-shadow--none has been added to the secondary nav bar so that a shadow doesn’t overlap when there’s a progress bar.

Datepicker

Updated version of datepicker has been implemented.

Stepped progress component

Stepped progress documentation was updated, to be consistent with UI Kit.

Divider

New divider options has been added to documentation.

Stepped progress component

To fully represent the steps, .rc-current should be added to stepped progress component.

Icons hover state

To make sure that icons will have hover state, rc-interactive class needs to be added to element.

Inline inputs

To make sure that inline inputs are aligned correctly, they need to be wrapper in rc-layout-container > .rc-column, with proper alignment utility class.

Header shadow over progress

The class rc-shadow--none has been added to the secondary nav bar so that a shadow doesn’t overlap when there’s a progress bar.

Prototype markup

The markup across all prototypes has been standardised to ensure correct page layout, backgrounds and spacing.

Youtube video container

Problem with maximum width of video container has been fixed.

404 page animation

Bug with ‘unnatural’ animation on 404 page has been fixed

Carousels

Bug with carousel controls misalignment has been fixed.

Featured card

Bug with images on featured card ‘floating’ outside of container has been fixed.

Safari pagination control

Bug with background color on pagination control (Safari) has been fixed.

Hyperlink baseline

Hyperlinks are now properly aligned to the text baseline.

Progress scroll z-index

The progress-bar is now hidden when the mobile navigation is open.

Checked row table

Bug that caused wrong colouring of selected row table has been fixed.

Performance optimisation

Split CSS into critical and non-critical and tweaked bundling for better overall performance.

Shadow utility class

New utility class for defining shadows on element has been added.

Divider utility class

New utility class for defining divider/horizontal rule has been added.

Background image position

New utility class, that controls positioning of background image has been created.

Typography

All typography information was moved to typography tab on DL Portal. Also we add more examples like headers with hyperlinks, meta tags and body intro.

Card titles

Documentation explaining how to use different card title sizes has been added.

Sketch + Invision plugin

Information about Craft plugin for integrating Sketch and Invision was added to resources section.

Tabs

Example of tabs with a content containers has been added.

Progress bar and loader

Showcase of animating progress bar and loader has been added.

New UI KIt and Icon Kit

Updated UI and Icon Kits have been added to portal.

Input label

Input labels will now never wrap onto a second line.

Interactive image icons

Fix bugs with non-clickable icons on interactive images.

Mobile navigation issues.

Border colours have been corrected on mobile navigation, and nested list items now appear in the correct position.

Extra small icons

Bug with xs icons taking up to much space has been fixed.

404 page animation

Animation on 404 page was improved to look more realistic.

Card titles

Bug that was causing overwriting header styles on cards in carousel was fixed.

New utility class for button + styled link

New utility class for wrapping button and styled link in one row.

Updated prototypes

The form prototype has improved markup for better input alignment.

Inline inputs

There is now a utility class for inline inputs, this has fixed the issue where inputs couldn’t be aligned properly to the bottom of a row in a form.

Tabs with single items

Where there is a tab component with only one item, interactivity has been removed but the visual aspects have been retained. There is also now in example in the tabs page.

Interactive image wrapper

Interactive image responsiveness has been improved.

Content in modals

Padding on mobile added to content in modals to ensure there is a gap between the text and edge of screen.

Password fields

Issue where password and confirm password fields hang the browsers has been fixed.

Checkbox lists

Styling has been added to stop checkbox lists moving around when accordion is closed.

Filter primary buttons

Primary buttons on the filter mobile modal are now full width.

Tag icon animation

Issue where the tag icon animation can be seen when loading a page has been fixed.

Card carousel

Issue where card carousels load six cards regardless of device size has now been fixed.

Cards stacked

Cards are now stacked on mobile view.

Icons on card sizing

Card icon button sizing has been updated.

IE11 header logo issue

Fixed bug where logo was being inserted at the start of the page rather than inline.

Accordion animation on close event

Fixed bug where accordion items didn’t have smooth animation on closing.

Header logo animation

Fixed bug where logo wasn’t animating properly on scrolling back to the top.

Contact us

Contact us prototype has been updated with new types of input.

Additional

Additional prototypes added and now listed clearly so that they can be easily found. New prototypes include: Hub Home, Background Types and Loader.

New spacing utility classes

New utility classes for setting paddings and margins on specific breakpoints have been added.

New footer

A new footer has been added to the Design Language site.

Filters

Filters now have an updated layout after a UX review that requires additional classes.

Match Heights

Match height rules have been extended to cover cards with links and an example of this use case has been added.

Royal Canin Header Logo

The issue in IE11 where the header logo was being inserted at the start of the page rather than inline has now been fixed.

Alerts Layout

A close button has been included on alerts. The developer should now add modifier class to rc-alert, this ensures consistency with the UI kit.

Password field prefix

Rc prefix has been added to ‘toggle visibility label’ in password field, to ensure proper styling.

Card stacking on mobile view

Card layout is now stacked on mobile view.

Drop-down

An example of a drop-down select where the input is narrower than the options within has now been added.

Disabled input

Design of disabled input has been changed, to ensure that active state of input will draw more attention than disabled one.

Accordion

Accordion inner paddings and placement of bottom border has been changed.

New prototypes

Additional prototypes have been added.

Loader

Loader is now fixed to the centre of the viewport rather than absolute positioning which meant it was sometimes out of the viewport

Elements

Background and content elements will now always be positioned on the z axis correctly.

Interactive Button Pulse

This has now been centered and is animating correctly.

Breadcrumb Hover State

The issue where the underline spans out too far when hovering over a chevron has now been fixed.

Navigation Links Hover State

The issue where previously visited navigation links didn’t change color when hovering, has now been fixed.

Layout Container Misalignment

The issue where layout container nested in content block was misaligned, has now been fixed.

Card carousel match heights

Rc-match-heights on rc-carousel--cards is now fixed.

Card Carousel Header

The issue where card carousel header was hidden on mobile view, has now been fixed.

Layout Container

Documentation has now been added for container layouts with 6 columns.

Switching Icon/ Text Button

A new button has been added which changes the button’s icon/ text when clicked. This allows for clearer visual feedback of the button’s current state.

Hyperlink Brand Colour

Brand colour for hyperlinks has now been added to the loop generating utility classes for texts, this ensures consistency.

Nested Layout Containers

A new utility class has been added for nested layout so that the margin/ padding can now be collapsed at the mobile breakpoint.

Utility Class For Icons

A new utility class has been added for icons which defines their size and can be used to ensure they are the same size as relevant headers.

Input utility classes

The top margin on rc-input has been omitted and replaced with a utility class which can be used to toggle the space depending on whether the input has a label or not. The bottom margin is now only added when there is input validation.

Attachment icon

There is now a paperclip icon available in the icon set.

Card layouts

The last card in a group will now not exceed the width of the other cards

Layout containers

Layout containers will now align properly when using nested columns. Also "rc-single-column" and "rc-one-column" have now been combined and "rc-one-column" should be used going forward for the sake of consistency. This has been changed in the following markup:

• Content block
• Layout container
• Prototypes

Filter component

The filter component classname has been updated to avoid clashing with an existing icon of the same name.

Breakpoint adjustments

Tablets in portrait mode will now adopt mobile styling where there is limited space for better clarity of content.

Match heights

The utility class ‘rc-match-heights’ can now be added to card carousel

Input

The maximum input width has been increased from 300px to 320px

Centered tabs

A bug where the first tab was not accessible when using centered tabs has been fixed

Stop/ Start Button

Button from testing has been removed and documentation added about what should be used instead.

Card Carousels

The correct padding styles have now been applied so that linked card carousels match standard cards in carousels and an example can now be seen on the portal.

Spacing Around Icons In Lists

Extra padding added to the right of icons on icon lists so that large icons now have space between them and the text.

Navigation Links

Styling updated so that navigation links always retain the same style.

rc-match-heights

“rc-match-heights” has been extended when “rc-card” is wrapped in an “a” tag.

Text Box Layout

Styling added to prevent content overflow on carousels and an example added to show where the new styling takes place.

Wrapping On Footer Button

Boilerplate updated to use a navigation element with an unordered list and a selector has been added so that when a button (with an icon) drops to the next line in the footer it now lines up with the previous row.

Progress Loader

The issue where the progress loader loads indefinitely when it’s hidden/ unhidden has now been fixed.

Double Width Class

The portal has been updated with a new prefix class to fix the issue with “.double-width” class.

Utility Classes

Input full width and tab centre utility classes have been added.

Filter Component and Examples

An example of a product filter component has now been included on the Design Language portal to ensure consistency.

Button label

Styles have been updated to ensure a smooth transition on buttons in the carousel. This will solve the problem where the button label has been moving rather than transitioning when you hover the mouse over it.

Stop/ Start Button

Button from testing has been removed and documentation added about what should be used instead.

Card Carousels

The correct padding styles have now been applied so that linked card carousels match standard cards in carousels and an example can now be seen on the portal.

Spacing Around Icons In Lists

Extra padding added to the right of icons on icon lists so that large icons now have space between them and the text.

Navigation Links

Styling updated so that navigation links always retain the same style.

rc-match-heights

“rc-match-heights” has been extended when “rc-card” is wrapped in an “a” tag.

Text Box Layout

Styling added to prevent content overflow on carousels and an example added to show where the new styling takes place.

Wrapping On Footer Button

Boilerplate updated to use a navigation element with an unordered list and a selector has been added so that when a button (with an icon) drops to the next line in the footer it now lines up with the previous row.

Progress Loader

The issue where the progress loader loads indefinitely when it’s hidden/ unhidden has now been fixed.

Double Width Class

The portal has been updated with a new prefix class to fix the issue with “.double-width” class.

Utility Classes

Input full width and tab centre utility classes have been added.

Advanced sprite generation mechanism

We now have the ability to add separate sprite sheets and generate them in the various brand colours.

Icons

A set of icons have been produced for key facts on breeds.

Animation

Two new classes that developers can use to produce a subtle fade in effect.

WYSIWYG/rich editor classes

Class created which developers can apply to make everything within a container within Royal Canin styling.

IE11 match height fallback

We now have a js fallback for matching heights on layout container cards in ie11.

Loading component causing too many requests

A data attribute has been added to the loading component, this will check against the logo function to ensure there aren’t multiple requests for the remote SVG file.

Carousel Header

Padding applied to the header container so that the header isn’t clipped when the view-all link isn’t rendered

Text Alignment

Rc--text--left is now set to left.

Footer

Padding has been added to align margins.

Card Images

Aspect-ratio mixin has now been removed from the card styling, this means that images can now be supplied by the CMS in the correct aspect ratios.

Submit button on microform

Padding has been added for negative margins. This has fixed the issue where the submit button on microform was out of the container on iPhones.

Placeholder Consistency

Baseline typeface enforced on input placeholders.

Progress Bar

Z-index reduced so that it is below the the search overlay, therefore progress bar isn’t visible when conducting a site search.

Grid Container

When an item is deleted in a layout container, the other items in the container will no longer change the size.

“movementSetting” Function

Issue where the function “movementSetting” was being used without the property to be transitioned has been fixed.

Breakpoint

Breakpoint 800px updated to 768px in JS-files to ensure switch from mobile menu to desktop happens at the right size and is synchronised with CSS.

Utility Class: Royal Canin Font

How to manually re-apply the approved Royal Canin font to an element.

Layout

Documentation on layout container and spacers.

Crucial inline CSS

Added to hide elements before CSS is loaded and to stop the flickering of items that should be hidden.

Layout container

Updated with responsive breakpoints and a fixed column class which now means cards within a grid cannot expand in width and becoming too large on the page

Customisable option for choices.js library

The ability to turn on and off alphabetical order and to dynamically update selects using options from the library

Mobile carousel in the Design Language HTML boilerplate

Padding, previous and next buttons have now been removed and the responsiveness checked

Card carousel

Fixed issue on carousel where plain markup wouldn’t dynamically alter the number of cards in the container based on screen site

Webpacks chunk loader

Function namespaced to stop collisions when multiple instances of Webpack are present

Matched height

Fixed the issue in Internet Explorer 11 where the flexbox properties didn’t respect a container opposite if it had no set width

Page to page navigation

Fixed notable bug from release 8.4.0 that was visible when navigating from page to page

Breakpoint

Breakpoint 800px updated to 768px in JS-files to ensure switch from mobile menu to desktop happens at the right size and is synchronised with CSS.

rc- prefix bugs

Some minor js conflict issues fixed across the new prefixed classes, when using the updated new project cdn asset reference.

New CSS class: clear padding

New global layout class .rc-padding--none to clear padding on a component.

New CSS class: align start

New global layout class .content-block__wrapper > .layout-container.start to align components to the start particularly for multi column horizontal layouts.

New CSS class: align end

New global layout class .content-block__wrapper > .layout-container.start to align components to the end particularly for multi column horizontal layouts.

New CSS class: links in accordion

New class .rc-list__header--content which allows list links to be included in accordion.

New CSS class: full width

New global class .rc-full-width.

Progress bars

Documentation updated to explain setup for latest progress bar elements.

Buttons on mobile

Removed full width modifier on buttons.

List with headers

Fixed issue where list with headers was randomly broken to multiple lines.

Chevron icons

Fixed js prefix issue where chevron icons where showing incorrect icons and not rotating in accordions.

Header bar logo in safari

Fixed issue on logo svg animation with elastic scroll feature in safari browser.

Tooltips

Fixed issue on tooltips loading incorrectly and dark background. This now includes prefix and backwards compatible classes.

Tabs scrollbar

Fixed issue where scroll bar appeared over tabs so the user could not select a tab.

Carousel pager on mobile

Fixed multiple issues with pager dots on mobile view for carousel incl. Too many pagers and overlapping buttons.

rc-prefixes updated

All code markup across developer.royalcanin.com now updated to use only the .rc- prefixed classes.

rc-prefix documentation

Updated documentation on initialisation page to include guides on setting up new/existing projects using our prefixed CSS

Search icon alignment

Search icon is now aligned with input field text on mobile

Button font weight

Fix that only button type one and two should take on a bolder font weight

Carousel hero A 2

Reversed content carousel now stacks vertically on mobile

Layout modifier

Layout modifier reverse-layout-mobile now set to align horizontally on iPad

Search

Fixed bug breaking showing the search box

Carousels

Remove navigation arrows on mobile to increase visible content

Prepended CSS classes

All classes were prepended with .rc- to avoid framework conflicts from dependent third party plugins. All existing non-preended classes remain supported in this update and will be depreciated slowly over time. A new cdn reference will be provided in a coming release for a lightweight version of the Design Language that includes only the prepended classes.

Data tables

Data tables added as per design spec. Providing default, selectable rows and sortable columns.

Maps

Examples for maps presented as per design spec and basic assets for map implementation provided.

Loader

Loader with two versions, infinite and progressive provided for long page/data loading times.

Filter tags

Tags for filter menus and selection options with dismiss button.

Anchor tag for card type A

Anchor tag added to card type A to enable clickable card area and retain styling of internal links.

Page scroll progress

New classes allow background images to be set to left, right half column.

Card outline

Fixed issue with missing outline and spacing on mobile card layouts.

Modal markup

Issue fixed with modal markup showing on page load for main menu overlay.

Footer accordion

Removed standalone example and markup for dark accordion as is only to be used in context of footer component.

Baseline styling

Ability to exclude baseline styles at a global level, exclude low level styles and/or apply baseline styles at a block level on projects. Supporting basic, advanced and hybrid implementation.

Javascript event handlers

Added javascript data attributes to unbind events handlers from styles. Primarily to support integrations that must rely on conflicting frameworks due to API services.

Progress indicators

A selection of progress indicators including options for including markers and tooltips markers.

Page scroll progress

Progress bar iteration which indicates to a user how far down the page they have scrolled. Primarily intended for long read articles.

Sliders

A selection of sliders including single section, snap to selection, throttle range and a visual grade selector.

Animated action button

A CSS pulsating effect added to the existing action button to help draw user attention. Primarily used as markers on images and including a tooltip on click for further content.

Interactive images

Image component where animated action buttons can be positioned absolutely using percentage coordinate values.

Pagination

Includes first and last page detection and jumps to last page in set if a user types a higher number.

Breadcrumb

Includes deep navigation and short link breadcrumb options.

Large icon list

Ability to add a list with large icons

Pager

Updated to include max 3 bullet nav dots and be consistent with design standards.

Background image utility classes

New classes allow background images to be set to left, right half column.

Body line height

Issue fixed where body line height spacing was skewed on certain integrations.

Video wrapper

Issue fixed with full width wrapper for video showing black space on parent wrapper.

css grids

Introduction of CSS grids that will support situation like multiple rows of cards in a product library page

Carousel wrapper for content block

Introduction of a new carousel wrapper containing new css content transitions.

Carousel wrapper for cards

Introduction of a new responsive carousel wrapper for cards.

Breakpoint classes

Updated breakpoints: .max-width--lg [max-width: 1100px;] .max-width--xl [max-width: 1450px;] .max-width--xxl [max-width: 1800px;]. Md breakpoint also updated from 800px to 768px.

Accordion

Issue fixed where accordion tab could not be closed once open.

Buttons hierarchy

Issue fixed with padding between button group hierarchy.

webpack modernizr plugin

Modernizr webpack plugin integrated to enable css classes helpers for older browsers.

javascript error in IE

Resolved issue with a rogue polyfill that wasn't being activated correctly in IE. Affected various issues including known logged issues; dropdown select options not activating and search dialogue not opening in header bar. Resulting issues previously included unhandled promise rejection TypeError:Object doesn't support this action, and occurrence where the word const being used instead of var.

Flexbox for layout container

Flexbox shorthand updated on layout container to support older browsers.

Flexbox for button group

Fallback to text input on IE. Note that IE also does not support out of the box numerical validation for this component.

Tabs colouring

User-agent overriding button text colour, explicitly defined to define and inherit text colour ref than inheriting from the body.

Header logo

Header logo appearing in black on IE fixed by setting SVG fill in CSS.

SVG JS animation

Issue fixed where SVG animation js was inserting the svg in the incorrect place in the DOM. e.g. Logo in the main menu modal was added before HTML tag.

Header bar transition

Issue fixed with header bar transition on scroll not working in IE.

Image gallery options

Fixed issue where providing insufficient options breaks the slider starting with the reference to the dom node containing the gallery.

Picture elements

IE11 issue with picture elements not working as expected, fixed with picture polyfill.

Language picker modal

Fixed issue where hash character was added to the url when opening language picker.

Language picker

Fixed issue with Africa continent appearing in ‘brand1’ red, incorrect round image size and spacing inconsistency with design asset.

Browser standard scroll bars (IE)

Vertical and horizontal scrollbars hidden on IE after 3 seconds hover. Relevant to image galleries, language picker and horizontal image tabs.

SCSS duplicate spacing and margin values

Duplicate property in SCSS generator removed that was creating redundant property/values for spacer and margin.

List item icons

List item icons sitting outside of list - fixed with relative positioning on container.

Global text align centre

Following function removed due to alignment issues; if body has class of no-flexbox layout container inherits class of text-align:center.

Number picker

Fallback to text input on IE. Note that IE also does not support out of the box numerical validation for this component. Also note that inline label active state for Number picker element only does not currently work in IE on v8.1.1

Date input

Fallback fix on datepicker form element in IE and safari.

Ie issues

Two column stacked. Various IE browser issues fixed specifically in relation to assets in the header bar, main logo and HTML template.

Gulp post-build script error

Gulp cli global is now advised to be installed globally via documentation rather than using the post build script.

Inline alerts z-index issue

Now sits under dropdowns etc.

Checkbox & radio button

Fixed filled icon alignment if text label of checkbox or radio is too long and Android + Opera radio button display issue fixed.

Button group spacing

Buttons add spacing between buttons when in a button group. When there are more is more than one button in a button group add spacing between each.

Breakpoints updated

Breakpoints updated to 600, 768, 1100, 1800 and utilities documentation updated to reflect true supported breakpoints.

Round images sizes updated

Large, medium, small and extra small round images sizes have been updated and cascaded across relevant components.

Image tabs

Media round image elements updated and cascaded to image tabs sizes for design consistency.

Button text update

Updated all text weights from 300 to 500 for design consistency

.gitkeep file

Add git keep for missing empty output folder

Spacing

Standardised spacers with specific sizes are now available for use in all projects. These have been implemented across all elements and components and therefore imply many breaking changes across this release. All previous spacer classes have now been deprecated. Classes for sizes have also been updated to the two letter suffixes; sm, md, lg, xl etc.

List styles

Documentation of available list styles added to the website. Including navigation list styles.

Media

Media assets page has been updated with many various media and responsive media types. This also includes options to hide images at resolutions lower than 600px or higher than 1500px by replacing it with a 1x1px transparent gif.

Alerts

Alert styles visually updated for consistency with optional functionality to present static or close for default, success, error and warning messages. Flexibility for visual icons and close icons to be added or removed from alerts. Optional functionality to keep static or close the alert if required. Alerts now available using Tertiary colour palette to signal various `types` of alert such as warnings, success and errors. Full-width alert also defined which can be positioned to sit outside of a container and can be used for full-width notifications.

Header

Header now fully integrated into HTML boilerplate for clarity and ease of setup. Some minor bug fixes included. List styles have also been updated and old list style consolidated and depreciated. Header includes a recommended max of 3 icons that are flexible and replaceable. There is also a presented option for tooltip hover over account and basket for ecommerce type functionality.

Footer

Minor footer updates since previous release included minor updated styles, back to top link. Also added to global HTML boilerplate. Spacing also updated.

Main menu

Responsive main menu component updated to comply with latest Royal Canin design standards. Fully responsive anatomy to ensure both a clean simple desktop experience and a rich enhanced mobile experience. Also seen in action on the HTML template.

Country selector

Country selector updated for better flexibility and to comply with latest Royal Canin design standards. Presented as a standalone component and also seen in action from the footer component and HTML template.

Tabs

Tabs updated to include image tabs and a horizontal container for slide and swipe functionality, particularly for touch screen users. Animation included to give visual cue to users when tab options exceed screen width. Gradient fade also included for visual experience and smoothness. Component implemented on Country selector as an example on cont + container (see tabs and country select page). Tabs have also been altered to reduce the amount of sizes available from 5 to 2 (Large and Small). Spacing and colours are now more consistent and spacing rules between tabs is defined.

Content blocks

Content block available media types have been updated. Content block group wrapper can now be used that reduces unnecessary excess padding between grouped content by removing guttering and spacer between two or more stacked content blocks.

Cards

Cards component structure has been updated with many recommended additional layout options defined. Two different card types now exist to support multiple types of projects.

Breakpoint utilities

Breakpoint utility classes documented for clarity.

HTML template

A complete HTML starting boilerplate is now available that includes the following recommended standard for Design Language components; header navigation bar, main menu, footer, country selector, cookie banner, global Google Tag Manager script.

Cookie banner

Cookie banner updated and deployed to comply with latest Mars GDPR standards. Also seen in action on the HTML template.

Accordion

Standalone accordion component added for collapsing contained content and also used in the footer component.

Icon

Cross icon sizes updated for visual consistency across size options and use in components.

Initialisation

Documentation for developers updated to include additional guidance on initialisation including a download of the HTML template.

Footer

Refinement of a fully responsive global footer component. Compliant with Mars GDPR the footer is to be used as a starting point or complete solution for all Royal Canin web properties.

Header

Overhaul of the global header component with consideration of primary links and icons placement. Particular consideration has been made to support ecommerce type solutions. The header is fully responsive however is currently in beta phase and can be tested for feedback on various markets.

Lists

Added new navigation list style, removed ‘--standard’ modifier from class name.

Icons

New performance focused classes have been introduced. We now split the classes being used by rc-icon utility class, icon name and the colour to be used i.e rc-icon vet iconography

Main menu

The main menu component is a full screen overlay template as designed for the Royal Canin global corporate website. Includes ability for primary and secondary level navigation on desktop and tablet and a push navigation experience down to mobile.

New button styles

New button styles for large and smaller country flag icons and social links.

Badge

Badge element created to help indicate notifications, updates or quantities added. Can be used alongside a basket icon to indicate the quantities of a basket for example. Positioning and various zero, single digit and multi digit badges defined.

Tooltips

Tooltips have had box-shadows removed and now have more emphasis through the use of Interface as a border. Arrow positions of the tooltips now correctly defined.

Modal

Full screen overlay modal added.

Icon sprite

We have refactored the way we generate the SVG sprites for better performance. Icon classes are now a lot clearer.

Modal

Page scrolling fixed so modal content can be larger than full height.

Tabs

The bugs behind the inconsistent behaviour with the tabs has now been resolved.

Webpack

We can now add non-blocking javascript asynchronously on-demand without impacting performance. This opens the door to various opportunities like checking for browser compatibility and using polyfils when needed without bloating the loaded scripts.

Non latin typeface support

A system to detect non-latin characters and dynamically import Roboto typeface. This new feature can easily be extended to cover any change of character sets and languages.

Babel

With the introduction of Babel, developers can now write modern clean javascript risk free with the final output being complied back to older more compatible versions.

Javascript & SCSS linting

Linting rule sets for both project have been vastly improved to ensure any work applied will be to the highest standard.

Contributor documentation

The contribution section has been rewritten so that developers wishing to contribute are now able to get up and running quickly.

Buttons

An overhaul of all button elements including styling, states, functionality as well as rules on hierarchy that help to support visual flow and create a unified consistent brand identity.

Forms

A complete overhaul of all form elements including a slicker simplified styling, alert states and functionality.

Interactive Icons

Icons now have an interactive class which allows them to display a hover state within icon buttons.

Warning colour

We have added a warning colour under the tertiary pallet to support UX for form implementation and alert messages. The error colour has been updated as not to clash with the Brand1 colour.

Icon colours

Update to ensure that default icons inherit the Iconography colour class.

Hyperlinks

A complete overhaul of a better branded link styling with a new external link style coupled with an icon for links that generate new pages and lead to external sites; also a CTA link style for use underneath paragraph text or where additional visual attention is required.

Typography

Complete overhaul to typography styling with some additional modifier classes provided for interactive titles and the removal of legacy bold and uppercase typeface and styles.

Layout container

Removed padding from single column container to enable full width display.

Colour naming conventions

We've had an overhaul of how we name our colours. They're now a lot more logical and abstract.

Content Blocks

Content blocks make up a large proportion of many consumer facing websites. They are one of the most powerful assets we have to create a consistent visual style to landing pages, campaigns and content. This is why we have taken the time to carefully define and develop a collection of ready to use variations of content blocks for use across Royal Canin digital projects.

404 template

Usual page not found but with a nice animated svg image.

Media elements

We've added an array of new media elements. Including items like the element for true responsive image and parallax media elements for when a page needs a bit of extra flare.

Responsive typography

Headings now grow/shrink depending on the device/screen sizes.

Design Language tips/alerts

We've now added tip and alerts across the Design Language to highlight important information.

Vertical Navigation

The vertical navigation component has been removed

New Website

New layout and navigation structure

Implementation Pages

A whole section dedicated to helping you get up and running with the Design Language. Including a downloadable HTML boilerplate.

Readme Documentation in the Project Repository

Our readme file for developers has been updated with improved instructions.

General Layout Improvements

We are working on incremental layout improvements to the portal, the most notable in this release is the removal of the grey background.

Slider Bug Fixes

The slider element has been improved and had some mobile bugs fixed.

Form Element Bug Fixes for Firefox/Safari

Form elements are now showing properly in latest Firefox and Safari.

Bug Fixed on Tabs Element

Fixed bug where tabs were toggling on double click.

Form Elements Update

The "rc-" prefix has been removed from form input classes in order to be consistent with the rest of Design Language. Form elements now also follow BEM class naming convention.

Small 16x16px Icon Set

There is a new iconset designed and optimised at 16x16px.

Search Feature

A search feature has been implemented to make it easier to find what you need.

Copy Code to Clipboard

All code snippets can now be copied instantly via a button.

Responsive Typography

Type scaling has been improved across mobile devices.