Create amazing experiences with the digital design system. This project contains the multitheme setup for the front-end code.

🛠 Install

• Read the instructions on how to install the Orbit Package.

Run the following command, this will install the components in your node_modules folder.

npm i @randstad-design/orbit-multitheme

🔄 Updates

Once a new version has been released, we will update you via our distribution list.

📝 Documentation

Randstad.design is the public environment where all documentation, styleguides and live components can be found. Use this please also to get started as a developer.

• https://randstad.design/getting-started/developers
• https://randstad.design/styleguide
• https://randstad.design/components

Architecture

Depending on the architecture of your project, you can import from the /dist or /src folder. For Randstad, the dist folder has a compiled assets/theme-randstad/orbit-randstad.css and assets/js/human-forward.js file ready to use. If you want to use another brand, for example Spherion, use assets/theme-randstad/orbit-spherion.css, the JS file remains the same. The CSS files contain all the styling. When you only want to load components please read the section CSS component split below.

You can also use the unpkg cdn to bring in the JS file: https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/js/human-forward.js, if you want a specific version, use the following link: https://unpkg.com/@randstad-design/[email protected]/dist/assets/js/human-forward.js (and update the version accordingly). The JS file remains the same for Spherion and Randstad.

Or the CSS file: https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/theme-randstad/orbit-randstad.css For Spherion: https://unpkg.com/@randstad-design/[email protected]/dist/assets/theme-spherion/orbit-spherion.css

Tailwind

From version 1.2.0 on we are using a separate CSS file for the utility classes. Please include 'tailwind.css' found in src/assets/theme-[theme]/tailwind.css or dist/assets/theme-[theme]/tailwind.css into your project. Or use the unpkg cdn https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/theme-[theme]/tailwind.css. The orbit components are making use of the Tailwind utility classes. So it is mandatory to include this into your project. Feel free to use these utility classes in your project too. We are going to expand this with new utility classes later on.

CSS component split

The CSS had been set up in a way that it's not necessary to include all the styling by importing the complete assets/theme-[brand]/orbit-[brand].css files. It's possible to only load the general.css file from the __bundles folder. The components can be found in the __components folder. For more information about the set up please go to https://randstad.design/getting-started/developers/css-component-split/.

Readme for developers

Developers who would like to know more about the choices and architecture of the multitheme setup, feel free to take a look at our confluence page (request access first). https://randstadglobal.atlassian.net/wiki/spaces/ODS/pages/1109721103/Read+me+for+developers

✅ Release notes

7.6.0

7 February 2024

• SVG → Randstad - Job Card(RXPIP-14348) : updates more illustration
• HTML/SCSS → Randstad - Header 404(RXPIP-14351) : updates color and text alignment, removes media
• SCSS → Randstad - Header Text(RXPIP-14423) : updates text alignment
• SCSS → Randstad - CTA Box - Variation 2(RXPIP-14423) : updates text alignment

7.5.0

23 October 2023

• HTML/SCSS → Randstad - Split View(GLODS-912) : add bullet list and non scalable image option
• HTML/SCSS → Randstad - Body Copy(GLODS-933) : add yellow accents for enterprise
• HTML/SCSS → Randstad - Topic Overview(GLODS-932) : add enterprise variant
• HTML/SCSS → Randstad - Side Navigation(GLODS-0930) : add variant for unordered list
• HTML/SCSS → Randstad - Category Overview(GLODS-930) : add new variants
• HTML/SCSS → Randstad - CTA(GLODS-931) : add enterprise version

7.4.2

25 September 2023

• SVG → Randstad - icons(GLODS-1002) : removes fill in X icon

7.4.0

4 September 2023

• SVG → Randstad - icons(GLODS-890) : adds X icon

7.3.0

5 July 2023

• HTML → Randstad - Speech Bubbles(GLODS-715) : removes unused variants
• HTML/JS → Randstad - Charts(GLODS-718) : adds space to charts with horizontal axis label
• SCSS → Randstad - Rating(GLODS-505) : keyboard navigation fix
• HTML/SCSS/JS → Randstad - Autosuggest(GLODS-627) : adds search feature
• HTML/SCSS → Randstad - Jobs(GLODS-708) : fixes image tag positioning for logo

7.2.0

13 March 2023

• SCSS → Randstad - Rating → fix(426) : per star hover indicator
• HTML/SCSS/JS → Randstad - Charts → update(GLODS-166) : Chart improvements
• JS → Randstad/Spherion - Input Password → fix(GLODS-460) : Fix console error on space/enter of visibile toggle button
• HTML → Randstad - Teaser → update(GLODS-165) : Create an 8-column variant of side by side teasers.

7.0.0

10 November 2022

• JS → Randstad/Spherion - Donut/Pie Chart Section Borders → update(RBL-660) : Making borders for sections on pie charts/donut charts white
• HTML/JS → Randstad/Spherion - Enable Decimals (float) Values on Charts → update(RBL-659) : Updating chart value function to allow float values. Added decimal values to the component data for confirmation and testing
• HTML/SCSS → Randstad/Spherion - Check body-copy value rendered for typography → update(RBL-639) : Copy title class styles to be in heading selector rules as well and remove classes from html css/html
• SCSS → Randstad/Spherion - Update font files → update(RBL-638) : Removed old ttf font files and replaced with woff2 for spherion
• HTML/SCSS/JS → Randstad - Switch → new(RBL-634) : Added new switch component with color mixins for light and dark variant
• HTML/SCSS → Randstad/Spherion - Update tooltip → update(RBL-643) : added primary brand color to tool tip

6.0.0

28 September 2022

• SVG → Randstad/Spherion - Icons → update(RBL-590) : update icon-download and icon-download-30
• HTML/CSS → Randstad - Preview → new(RBL-589) : Content preview: create a variant with a simple link
• SCSS → Randstad - Navigation mobile → update(RBL-588) : Fix misalignment with Randstad logo and hamburger menu
• HTML/CSS → Randstad - Navigation → new(RBL-587) : Navigation lang switcher: focus state not visible

5.9.0

15 September 2022

• HTML/CSS → Randstad - Meta-location → update(RBL-550) : Meta-location: show lunch break in office hours
• SCSS → Randstad - Checkbox Focus → update(RBL-520) : Blog filter: checkbox focus ring on checked state

5.8.0

17 Augustus 2022

• SVG → Randstad/Spherion - Icons → new(1360) : added TikTok Icon
• HTML/CSS → Randstad - Carousel Photo Speech Bubble 3 → new(1360) : Carousel photo component with 3 speech bubbles

5.7.0

2 Augustus 2022

• SCSS → Randstad - Secondary Search Link → update(RBL-470) : Accessibility fix with link underline
• SCSS → Randstad/Spherion - Cookie Button → update(1346) : Bottom margin fxed
• JS → Randstad/Spherion - Overlay → update(1356) : Add focus on trigger element after closing video modal with escape
• HTML/JS → Randstad/Spherion - Cards(1359) : Add tabindex -1 to hidden non tabbable items
• HTML/JS → Randstad - Date Picker(1343) : Tab focuses on the actual date picker

5.6.0

5 July 2022

• HTML/CSS → Randstad/Spherion - Secondary Search → update(1330) : Fix tabbing order in secondary search, button is last focused now
• HTML → Randstad - Blog Articles → update(1312) : Update CTA to use body-copy class to support links
• HTML → Randstad - Cookie → update(1311) : Updating cookie with body copy class
• HTML → Randstad - Meta Content → update(1313) : Add link class to button in location component
• HTML → Randstad- Related Jobs → update(1315) : Add link class to tag for related jobs
• HTML → Randstad- Header Text → update(1315) : Add body-copy class for header text
• HTML → Randstad - Track and Trace Timeline → update(1317) : Update track and trace for right link colors
• HTML → Randstad - Pagination → update(1329) : Update pagination numbers to use link class
• CSS → Randstad - List Items → update(1322) : add link styling to text alternative class
• HTML → Randstad - Link Tags → update(1328) : update link color on tag for meta link tags
• CSS → Randstad - Forms - Helper Text → update(1321) : Forms helper texts link affordance
• HTML → Randstad - Modal → update(1344) : Add link and body-copy class for modal to show right link colors
• HTML/JS/CSS → Randstad/Spherion - Password Field → bugfix(1341) : when tabbing through password field it doesn't show the password anymore

5.5.0

10 June 2022

• SCSS → Randstad - Header Selector → update(1301) : Avoid tabbing through closed dropdown items in header selector
• HTML → Randstad/Spherion - Blog Articles → update(1307) : Fix HTML order for tabbing order
• SCSS → Randstad - Photo Carousel / Photo Header / Video Header / Boxed large / Video Full width → update(782) : light font color changed to white
• HTML/SCSS → Randstad - Category Overview → new(1310) : added missing category overview component to prototype

5.4.0

25 May 2022

• HTML/CSS → Randstad/Spherion - Article Overview → update(1294) : Visible focus on interactive carousel elements
• HTML/CSS → Randstad/Spherion - Rating → update(971) : Makes rating component accessible
• HTML/CSS → Randstad - Notice in Page → update(1308) : Updating border color\
• JS → Randstad/Spherion - Video Overlays → update(1298) : Add trap focus to video popover components
• HTML/CSS/JS → Randstad - Tags → update(1287) : adding keyboard focus states to tags for accessibility
• CSS/HTML → Randstad - Input Field → update(1229) : added required asterisk to input field
• CSS → Randstad - My Environment Cards → update(1272) : changed my environment item card header title to brand-secondary color
• HTML → Randstad - Video Boxed Large Speech Bubble → update(1309) : fix mobile version alignment
• HTML/JS → Randstad/Spherion - Maps → update(1320) : Fix missing marker/cluster icons in prototype

5.3.0

11 May 2022

• HTML/CSS → Randstad/Spherion - Rating → update(971) : Makes rating component accessible
• HTML/CSS → Randstad - Jobs Nearby → update(1267) : Links now have the right color on brand-tertiary background
• HTML/JS → Randstad - Navigation → update(212) : Added aria labels that are localizable to mobile menu button
• HTML/CSS → Randstad/Spherion - Logos → update(981) : Making logos tababble and link selectable
• CSS → Randstad - Ghost Button → update(1257) : Updating ghost button on tertiary background
• CSS → Randstad/Spherion - Input with Currency → update(1265) : Updating color contrast of Input with currency
• CSS/HTML → Randstad - Charts Line → update(1268) : Fixing table error and darkening axis legends
• CSS/HTML → Randstad - Notice in Page → update(1269) : Updated links to secondary color
• CSS/HTML → Randstad - Notice Text Only → update(1270) : Updated links to secondary color
• CSS → Randstad/Spherion - Tags → update(1277) : Updating tinted tags to use secondary text
• CSS/HTML → Randstad- Tags → update(1259) : Button--clean class is now color mapped. Removed button-clean--link class
• JS → Randstad/Spherion - Maps → update(1296) : Removed custom road featureType for maps, so that road labels are visible again
• CSS → Randstad - Avatar → update(1261) : Removed transparency from avatar colors
• CSS → Randstad - Popover Large / Avatar → update(765) : Background color change on brand-tertiary
• CSS → Randstad/Spherion - Article/Topic overview → update(773) : changing arrow color to white
• HTML/CSS → Randstad - Cards → update(1275) : background color mapping for brand-tertiary
• CSS → Randstad/Spherion - Image gallery → update(766) : icons to white on modal
• JS → Randstad/Spherion - Video Overlay → update(1297) : accessibility fix closing the modal with escape button or enter is now possible
• HTML/CSS → Randstad - Carousel Photo / Video Boxed Large / Video Full Width → update(1299) : accessibility and SEO fixes for new Rebranded Components
• CSS → Randstad/Spherion - Radio Buttons → update(1273) : changing color contrast for disabled

5.2.0

29 April 2022

• JS → Randstad - Chat → update(1228): the chat is now fully accessible with a keyboard
• HTML/CSS → Randstad/Spherion - Forms → update(969): all form elements have a focus state and are accessible with a keyboard
• HTML/CSS → Randstad/Spherion - Tooltip → update(976): the tooltip is now accessible with a keyboard
• HTML/CSS → Randstad - Tooltip → update(769): changed the color contrast of the tooltip for accessibility
• HTML → Randstad/Spherion - Data Table → update(968): sorting is now accessible in the data table
• HTML/JS → Randstad/Spherion - Input Password → update(1289): adding dynamic amount of mandatory characters for password, with a fallback to 8
• HTML/JS → Randstad/Spherion - Input → update(1260): Optional labels for input fields have now a sufficient color contrast
• CSS → Randstad/Spherion - Job Cards → update(1266): Changed the color contrast of the description on the job cards for accessibility
• HTML/CSS → Randstad - Chat → update(1263): changed the contrast of the links in the speech bubble made by the bot for accessibility

5.1.0

14 April 2022

• HTML → Randstad/Spherion - Tags → update(975) : added tabindex to tags
• JS → Randstad/Spherion - Header Selector / Toast / Popover / Modal → update(979) : made header selector keyboard accessible, made trapfocus a global function
• HTML → Randstad/Spherion - Video Full Width / Video Boxed Large → update(984) : added aria-labels
• HTML → Randstad/Spherion - Video Small→ update(985) : added aria-labels
• HTML → Randstad/Spherion - Meta Content Location → update(982): made the collapsible link accessible with keyboard
• SVG → Randstad/Spherion - Icon → new(1291): cookie icon
• HTML/CSS → Randstad/Spherion - Body Copy → update(1274): links in body copy have now an underline
• HTML/CSS → Randstad- Charts → update(1274): links in charts have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
• HTML/CSS → Randstad/Spherion - Content Table → update(1279): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
• HTML/CSS → Randstad - Filter → update(1280): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
• CSS → Randstad/Spherion - Accordion → update(1281): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary

5.0.0

14 March 2022

• HTML/CSS → Randstad → Carousel Photo → update(1232) - Brand refresh
• HTML/CSS → Randstad → Video Full Width → update(1237) - Brand refresh
• HTML/CSS → Randstad → Video Boxed Large → update(1239) - Brand refresh
• HTML/CSS → Randstad → Header Illustration → update(1233) - Brand refresh
• HTML/CSS → Randstad → Meta Sharing → update(1234) - Brand refresh
• HTML/CSS → Randstad → Header Multiple CTA → update(1235) - Brand refresh
• HTML/CSS → Randstad → Split View Illustration → feature(1238) - Brand refresh
• HTML/CSS → Randstad → Carousel Photo → update(1245) - Brand refresh optimizations
• HTML/CSS → Randstad → Input Fields → bugfix(1249) - Removed nowrap on form label and fixed the password field with a tailwind utility
• CSS → Randstad → Tab bar → bugfix(1244) - when using the 'bg-variant-{color}' background colors this component now also shows the right link colors

4.11.0

14 February 2022

• CSS → Randstad/Spherion → Popover Large→ bugfix(1224) - Removed the overflow hidden, so autosuggest box will overflow over the popover
• HTML/CSS → Randstad/Spherion → Input Field → bugfix(1225) - Forget password now has a flexible width, while the label has a fixed width
• JS → Randstad/Spherion → Navigation→ bugfix(1226) - Removed the icon-toggler__active class on every collapsible item when closing the mobile navigation
• HTML/CSS→ Randstad/Spherion → Tab bar → bugfix(1227) - made the clickable area of the tab bigger
• HTML → Randstad/Spherion → Content Items Preview → chore(977) - Fixed button to make it accessible with a keyboard
• JS → Randstad/Spherion → Toast → feature(973) - Accessibility: Tabindex for toast

4.10.0

26 January 2022

• JS/HTML→ Randstad/Spherion → Popover/Modal → chore(947) - Popover and Modal are now fully accessible with keyboard
• JS → Randstad/Spherion → Collapsible → chore(1175) - Overrides fix for FFW
• JS → Randstad/Spherion → Carousel → chore(1168) - Overrides fix for FFW
• JS/HTML → Randstad → Character Count → chore(1170) - Fix overrides for FFW
• JS/HTML → Randstad → Chat → feature(1219) - Selectable tags with a new input dialog and refactored some code for overrides FFW
• SVG → Randstad→ Icons → new(1220) - Factory Icon

4.9.1

6 January 2022

• JS/HTML/CSS → Randstad → Audio Box → bugfix(1223) - Audio Box not collapsing anymore because previous accessibility fixes

4.9.0

3 January 2022

• JS → Randstad/Spherion - Maps → update(1152) : added maximum zoom level for clusters, so there are no clusters on the lowest zoom level
• HTML → Randstad/Spherion - Tooltip → bugfix(1012) : it's possible to open the tooltip now on an iOS device
• HTML → Randstad/Spherion - Image gallery → bugfix(1207) : Align arrows on bottom at image gallery for mobile
• HTML → Randstad/Spherion - Split View Illustration → update(993) : Removed top padding of the illustration
• CSS → Randstad/Spherion - Forms Input Field → update(1136) : Removed truncation at form group action link (e.g. password forgotten link)
• CSS/HTML → Randstad/Spherion - Text Source → new(1218) : text source is now a separate component from body copy
• CSS/HTML → Spherion - Content Table → new(1217) : content table component is now also available for Spherion
• CSS/HTML → Randstad/Spherion - Body Copy → update(1215) : Fix heading sizes h3 and h4 for body copy
• HTML/JS → Randstad/Spherion - Accordion → update(966) : Made accessible with a keyboard
• CSS/HTML → Randstad/Spherion - Cards → update(983) : Made accessible with a keyboard

4.8.0

6 December 2021

• HTML/CSS → Randstad - Filter → chore(1042) : color mapped
• HTML/CSS → Randstad/Spherion - Avatar → bugfix(1142) : aspect ratio images fix
• JS/CSS → Randstad/Spherion - Filter → bugfix(1118) : Accordion not collapsing when initially expanded. Fixed the initially expanded functionality
• HTML/CSS → Randstad - Job Card → feature(988) : added tabbing for accessibility on job cards
• JS → Randstad / Spherion - Maps → feature(1127) : added position option to the datepicker
• CSS → Randstad / Spherion - Buttons → bugfix(652) : minor color fixes to button in chat button group and datatable
• CSS → Randstad/Spherion - Other → chore(1144) : fixed w3.org CSS validation errors
• CSS → Randstad - My Environment→ chore(1210) : color mapped
• HTML/CSS → Randstad - Buttons → feature(937) : added new focus state to buttons

4.7.0

22 November 2021

• CSS → Spherion - Social icons → bugfix(1153) : fix hover color header/meta
• HTML/CSS → Randstad - Filter → chore(1042) : color mapped
• HTML/CSS → Randstad - Meta Content → chore(1047) : color mapped
• HTML → Randstad - Secondary Search → chore(1054) : color mapped
• HTML/CSS → Randstad - Show More → chore(1056) : color mapped
• HTML → Randstad - Related Jobs → chore(1053) : color mapped
• HTML/CSS → Randstad - Video → chore(1058) : color mapped
• HTML/CSS → Randstad - Footer → chore(1043) : color mapped
• HTML → Randstad/Spherion - Form Groups → feature(1140) : accessibility update grouped checkboxes and input fields
• CSS → Randstad/Spherion - SVG → chore(1151) : new disabled icon
• HTML/CSS → Randstad - Accessibility → new(1143) : skip content link
• SVG → Randstad/Spherion → new(1154) : half-filled star icon
• CSS → Randstad - Modal → bugfix(1135) : mobile view color map fix
• HTML → Randstad - Content table → chore(1133) : added content

4.6.0

8 November 2021

• HTML → Randstad/Spherion - Accessibility → chore(1137) : add aria-label and/or role properties to icon buttons
• HTML/CSS → Randstad - Notification in page → feature(1005) : new variant 'subtle'
• HTML/CSS → Randstad - Button → chore(917) : deprecate button--l
• CSS → Randstad/Spherion - Autosuggest → chore(991) : adjust vertical spacing autosuggest options
• CSS → Randstad - Navigation → bugfix(1132) : fix breadcrumb icon color
• CSS → Randstad - Cards → bugfix(1105) : fix Cards background dependencies for old and new color map
• CSS → Randstad - Cards → bugfix(1148) : fix gradient of backside
• CSS → Randstad - Navigation → bugfix(1147) : Fixed height issue in top navigation at My Randstad service link

4.5.0

26 October 2021

• HTML/CSS → Randstad - Button Filled → bugfix(905) : SVG color fix
• HTML/CSS → Randstad - My Environment → chore(1049) : color mapped
• HTML/CSS → Randstad - Person Profile → chore(1040) : color mapped
• HTML/CSS → Randstad - Call To Action → chore(1036) : color mapped
• HTML/CSS → Randstad - Carousels → chore(1038) : color mapped
• HTML/CSS → Randstad - Promotional Text → chore(1052) : color mapped
• HTML/CSS → Randstad - Cards → chore(1037) : color mapped
• HTML/CSS → Randstad - Charts → chore(1039) : color mapped
• HTML/CSS → Randstad - Content Items → chore(1041) : color mapped

4.4.0

11 October 2021

• HTML/JS/SVG → Randstad/Spherion - Maps → update(1114) : addition of cluster and new svg markers
• CSS → Randstad/Spherion - Category Overview → update(1108): added a line clamp mixin
• HTML/CSS → Randstad - Link list → update(1087) : added a card version
• HTML/CSS/JS → Randstad - Chapter Navigation → new(1086) : navigation for chapters on content page, makes use of selector component (header). Which is a separate component now too.
• HTML/CSS → Randstad - Content Table → new(1010) : new content table component
• HTML/CSS → Randstad - Teaser → update(1007) : small version
• CSS → Randstad - Icon → bugfix(1123) : hover fix when color overrides are applied
• HTML/CSS → Randstad - Link List - Location → bugfix(1125) : fix on color of icon

4.3.0

27 September 2021

• Other → Randstad/Spherion → chore(1101) : addition of a license fill since Orbit is now public
• HTML/CSS → Randstad - Data Table → chore(1023) : color mapped
• HTML/CSS → Randstad - Sortbar → chore(1030) : color mapped
• HTML/CSS → Randstad - Tab Bar → chore(1031) : color mapped
• HTML/CSS → Randstad - Link Lists → chore(1044) : color mapped
• HTML/CSS → Randstad - Split View → chore(1057) : color mapped
• HTML/CSS → Randstad - Headers → chore(1021) : color mapped

4.2.1

1 September 2021

• CSS → Randstad/Spherion - Badge → bugfix(1099) : icon shrink fix
• CSS → Randstad/Spherion - Carousel → bugfix(1111) : lower z-index for dots
• CSS → Randstad/Spherion - Tailwind → chore(1107) : Add gap-0 to tailwind and responsive width
• CSS → Randstad - Masked SVG → bugfix(1110) : no repeat fix

4.2.0

30 August 2021

• HTML/CSS → Randstad - Badge → chore(1026) : Background Variant color mapping
• HTML/CSS → Randstad - Forms → bugfix(1078) : removed line-height 0 from form-group, fixed with flexbox
• HTML/CSS → Randstad/Spherion - Avatar → chore(1074) : Background Variant color mapping
• CSS → Randstad/Spherion - Indicator → chore(1024) : Background Variant color mapping
• CSS → Randstad/Spherion - Track & Trace Timeline → chore(1077) : Background Variant color mapping
• HTML/CSS → Randstad/Spherion - Location details → chore(1026) : Background Variant color mapping
• HTML/CSS → Randstad - Notifications/toast → chore(1028) : Background Variant color mapping
• HTML/CSS → Randstad - Tags → chore(1032) : Background Variant color mapping
• CSS → Randstad - Checkbox → bugfix(1091) : Fix overflow text with hyphenation when used in meta content.
• CSS → Randstad - Modal → bugfix(1106) : fixed missing comment symbol and class

4.1.2

16 August 2021

• HTML/CSS → Randstad - Audio Box → new(707) : audio component
• HTML/CSS → Randstad/Spherion - Badge → new(1015) : XL version for job card & color classes
• HTML/CSS → Spherion - Split View Photo → update(1008) : add caption
• HTML/CSS → Randstad/Spherion - Popup → new(622) : Form popup
• HTML/CSS → Randstad - Notifications → chore(1050): Background Variant color mapping

4.0.2

6 August 2021

• HTML/CSS → Randstad - Overlays → bugfix(1070) : fix the transparent background

4.0.1

3 August 2021

• HTML/CSS → Randstad - Overlays → bugfix(1070) : fix the transparent background
• CSS → Randstad - Buttons → bugfix(1067) : fix the hover state of the filled button

4.0.0

2 August 2021

• HTML/CSS → Randstad/Spherion - Forms → chore(1022) : Background Variant color mapping
• HTML/CSS/JS → Randstad/Spherion - Overlays → chore(1051) : Background Variant color mapping
• HTML/CSS → Randstad/Spherion - Pagination → chore(1029) : Background Variant color mapping
• HTML/CSS → Randstad - Body Copy → chore(1035) : Background Variant color mapping
• HTML/CSS → Randstad - Buttons → chore(1063) : Background Variant color mapping
• HTML/CSS → Randstad/Spherion - Content Items / Overviews → chore(1024) : Background Variant color mapping
• JS → Randstad / Spherion - carousel.js → update(1062) : Update loading order of slick elements

3.0.0

12 July 2021

• HTML/CSS/JS → Randstad/Spherion - Carousel photo → update(654) : Make carousel dot color dependent on text color per slide
• HTML/CSS → Randstad/Spherion - Notifications/Toast → update(940) : style spacing and buttons
• HTML → Randstad - Sticky Nav → update(948) : Added extra padding when used in combination with content item (tailwind class)
• HTML/CSS → Randstad - Navigation - Popover Account only → update(1000) : Class added navigation\_\_service--minimal so popover points to account when service nav does not include language toggle
• SVG → Randstad/Spherion → new(1006) : wechat filled icon
• HTML/CSS/JS → Randstad - Chatbot → update(933) : bubble on enter, removed and reordered data attributes, fixed spelling mistakes
• HTML/CSS/JS → Randstad - Chatbot → update(997) : settings section for both embedded and normal chat
• CSS → Randstad/Spherion - chore(840) : SCSS folder structure adjusted, removed one layer /theme to fix scss font issue with external compilers
• HTML/CSS/JS → Randstad/Spherion - Carousel Photo & Quote → bugfix(1016) : fixed spacing issues and height of dots

2.3.0

28 June 2021

• HTML/CSS → Randstad - Accordion → chore(914) : Implementation of new color map base and accordion
• HTML/CSS/JS → Randstad - SEO Teaser → new(934) : Teaser cards for SEO
• HTML/CSS → Randstad - 404, Article Overview, Author, Account Settings (ME) → chore(989) : Implementation of new color map
• CSS → Spherion - chore(880) : Implementation of Tailwind for Spherion

2.2.1

14 June 2021

• CSS → Randstad - Job Card → feature(952) : Fix color bug for favorites icon
• HTML/CSS → Randstad/Spherion - Avatar → feature(615) : Unified approach to Avatar HTML & CSS throughout Orbit
• HTML → Randstad/Spherion → feature(928/615) - Avatar : Implement Avatar HTML on: modal, popover-large, author, carousel quote, contact-person, meet-the-team, my-environment-profile, RCE-header, RCE-Speech-bubble.
• HTML → Randstad/Spherion - Image → update(954) : remove HTML to serve second image .This component now has 1 image and 1 aspect ratio
• HTML/CSS → Randstad/Spherion → deprecate(827) : Deprecate Blog Article Items: image, quote, video. Blog-Article items is replaced by Content Items (image, quote, video, author, download, meta, related).
• HTML/CSS → Randstad - My Environment → update(963) : remove title--L HTML/CSS for My Environment - account settings and replaced with title--M

2.1.1

04 June 2021

• HTML → Randstad - Infographic → new(935) : infographic component with optional title and content. Example PNGs included

2.1.0

31 May 2021

• HTML/CSS/JS → Randstad - Sticky navigation → new(926/805) : sticky side/top navigation Table of Contents with scrolling functionality
• HTML/CSS → Randstad - Chatbot embedded → update(922) : Create HTML chatbot embedded version. Embedded on destkop, controlled by button on mobile.
• HTML/CSS → Randstad/Spherion - Content-item video → update(942) : adjust fontsize for video subscripts with new CSS class
• CSS → Randstad/Spherion - Card & My Environment meta items → update(946) : add word wrap CSS rules for links in meta items & timeline

2.0.0

17 May 2021

This is a major version upgrade, since there is a breaking change, please read https://randstad.design/getting-started/developers/releases/ for more information.

• HTML → Randstad/Spherion - SVG renaming/delete → update(916) : rename SVG's and delete unused ones.
• CSS → Randstad/Spherion - Button → bugfix(927) : Safari and iphone alignment of the icons on the button tag
• CSS → Randstad - modal color mapping → bugfix(920) : adjust CSS so the text color setting within a modal is restricted to the modal color setting, not to the color setting of its parent page.

1.6.0

07 May 2021

• HTML/CSS/JS → Randstad → feature(858/931) : Randstad Conversation Engine (RCE)

1.5.0

03 May 2021

• CSS → Randstad/Spherion - images → update(692) : replaced prototype images in repo with updated ones (names of image assets are unchanged), added CSS rules to better enforce aspect ratios for image related components
• HTML/CSS → Randstad - color variables + badge → update(814) : CSS color blue-10 changed to blue-7. This changes TW class in badge.html
• HTML → Randstad - notifications/toast → fix(837) : minor content change: lowercase letter to uppercase letter
• HTML/CSS → Randstad/Spherion - notifications/notice-in-page → update(870) : Add warning variation to notification-in-page components, introducing 2 new yellow warning colors in CSS setup

1.4.0

19 April 2021

• HTML/CSS → Randstad/Spherion - Extensive Link List, Navigation, Data Table, Accordion → update(468) : removed collapsible__button class, replaced with toggle-arrow class, use chevron.svg. Added 'chevron-30.svg' to Accordion for larger screens.
• CSS → Randstad → update(774) : removed color for text--emphasis class for dark blue backgrounds
• HTML/CSS → Randstad/Spherion - Tag → update(815) : introducing new tag--s. Uses icon close-8.svg. Tailwind class for text size.
• CSS → Randstad - Tailwind → update(894) : added !important tags to Tailwind classes for higher specificity.
• HTML → Randstad - Modal - Version 2 → update(883) : adjusted two margin utilities on person and button-group components.
• HTML/CSS → Randstad - My Environment → update(884) : fixes specificity issue with Tailwind. Adds Tailwind margin utilities to HTML. Removes CSS for My Environment that is now handled with Tailwind.
• HTML/CSS → Randstad/Spherion - Indicator - track-and-trace-timeline → new(709) : new Track and Trace Timeline component. New img ‘clock.svg'. Component created on full width, can be placed on page using grid utilities from Tailwind.
• HTML → Randstad/Spherion - Button → update(862) : adds small versions of button--plain in button library (with and without icon).
• CSS → Randstad - Contact Component → bugfix(733) : undo color rule for icons so they are now dark-blue.
• HTML/CSS → Randstad - Badges → update(796) : removed red and turquoise badges.
• HTML/CSS → Randstad/Spherion - Badges → update(797) : adds blue-10 positive and negative as color versions.
• CSS → Randstad - Card → bugfix(614) : CSS change to prevent icon from moving outside of parent in Card component.
• SVG → Randstad/Spherion → update(836) : adds new SVG's, update thumb-up.svg
• CSS → Spherion - Navigation → update(911) : relate grey separator to bottom-nav and breadcrumb instead of top-nav, so it does not show when only top nav is visible.

1.3.0

02 April 2021

• HTML/CSS → Randstad/Spherion - Forms - Input field currency → update(799) : Remove obsolete css classes and add one new in HTML for currency Input field. Changed CSS to enable character field for currency. Also accommodates icons.
• HTML/CSS → Randstad/Spherion - Content Items - Content Video → new(858) : Allows to have content over background image with a video modal trigger button. NOTE: On dekstop, the image is a background URL with content
• HTML/CSS → Randstad/Spherion - Content Items - Content Video → new(858) : Allow for content over image with video modal trigger button. On small viewports image and content are separated. NOTE: On dekstop, the image is a background URL with content over it. Image changeable directly in the HTML
• HTML/CSS → Randstad/Spherion - Accordion → update(848) : Add optional <p> to idle accordion title, creates standalone version without header change. Collapsible button from a plus to a chevron
• HTML/CSS → Randstad - Content Items - track-and-trace-card → new(664) : job-card variation for track and trace content. Logo version included. Same structure as job-card, but with less options/functionalities. over it. Image changeable directly in the HTML
• JS → Randstad/Spherion → update(891) : added tailwind.config to the NPM package
• SVG → Randstad/Spherion → add(889) : added thumbs up and thumps down icon
• CSS → Randstad/Spherion → update(794) : New font size of 14px added to SCSS files
• CSS → Randstad → update(745) : changed the positive5 and negative5 color
• CSS → Randstad → update(861) : Font sizes, font colors, border radius, grid, width and text-align added to Tailwind

1.2.1

22 March 2021

• HTML → Randstad/Spherion → Content Items - Preview → class update in HTML
• HTML → Randstad → My Environment - Profile → class update in HTML
• HTML → Randstad → My Environment - Edit Badge → class update in HTML
• HTML → Randstad → My Environment - Job Preferences → class update in HTML

1.2.0

Introduction of Tailwind.css!

22 March 2021

• CSS → Randstad → add(DF909-877) : Flexbox utilities to Tailwind
• CSS → Randstad → My Environment → add(DF909-803) : a smaller view for the block__content(block__content--xs) to realise 3/7/2 grid
• HTML/CSS → Randstad/Spherion - Content Item - Highlight → new(DF909-851) : New Highlight component. Added .title--xs for main title in body copy. Added bg-brand-tertiary for off-white background. Ranstad component uses Tailwind, Spherion component does not.
• HTML/CSS → Randstad/Spherion - Content Item - Quote → update(DF909-852) : HTML based on existing Quote HTML, introducing new .title-xs class for main content. Ranstad component uses Tailwind, Spherion component does not.
• HTML/CSS → Randstad/Spherion - Content Item - Image → update(DF909-853) : HTML based on existing article item Image HTML. Note: Two images are served depending on aspect ratio needed per viewport. Ranstad component uses Tailwind, Spherion component does not.
• HTML/CSS → Randstad/Spherion - Content Item - Video → update(DF909-854) : HTML based on existing article item video HTML, HTML tags SEO approved. Note: Two images are served depending on aspect ratio needed per viewport. Playing video opens a modal. Ranstad component uses Tailwind, Spherion component does not.
• CSS → Randstad → new(DF909-850) : additional stylesheet (tailwind.css) with utilities for spacing, background colors and position
• HTML/CSS → Randstad - My Environment → bugfix(DF909-859) : Assign block__title HTML and CSS to standalone H2 headers in My Environment. (currently present in: dashboard, overview empty, overview filled). Component uses Tailwind.
• CSS/HTML → Spherion → new(DF909-843) : addition of purple gradient sub brand color to call to action box, link list categories, split view photo and link list featured
• CSS → Randstad/Spherion → add(DF909-863) : CSS for placeholder pseudo element so AA color is compatible with default Firefox browser placeholder.
• HTML/CSS → Randstad/Spherion - Content Item - Section Title → new(DF909-855) : New HTML, new CSS class title--xs for paragraph header. Ranstad component uses Tailwind, Spherion component does not.
• HTML/CSS → Randstad/Spherion - Content Item - Preview → new(DF909-856) : New component HTML and CSS media preview. Image is optional. Randstad component uses Tailwind, Spherion component does not. Note: different version for modal link and regular link.
• HTML/CSS → Randstad - Content Items - Tailwind → update(DF909-867) : Implemented Tailwind classes for Randstad Content Item components within this release. Spherion uses Orbit CSS, but naming structure equal to Tailwind to enable possible future Tailwind integration Spherion.

1.1.6

8 March 2021

• SVG → Randstad/Spherion - Icons → new(DF909-833) : eye strikethrough icon added
• HTML → Randstad/Spherion → Uploads → update(DF909-528) : added uploaded state, removed read-only limit reached and error exhausted state
• JS/HTML/CSS → Randstad/Spherion → datepicker → update(DF909-793) : added data-attribute for localisation of 'clear' and CSS fix for the width of the box of the calendar month
• HTML/CSS → Randstad - My Environment → update(DF909-832) : removable-cards component closable updated, created My Environment page examples in _06/pages folder
• HTML/CSS → Randstad - My Environment → update(DF909-829) : randstad logged in variant of the navigation my-environment/navigation.html.
• HTML → Randstad - My Environment → new(DF909-830) : example of Randstad homepage logged out/logged in state 06_pages/my-environment.
• HTML/CSS → Randstad/Spherion → My Randstad → deprecate(DF909-727) : removed My Randstad HTML and added deprecate notification for related CSS and images
• HTML/CSS → Randstad/Spherion → popover large initials/video → update(DF909-844) : removed CSS and added custom greeting to eyebrow
• HTML/CSS → Randstad → secondary search → bugfix(DF909-846) : add (existing) classnames for button color in secondary search HTML
• CSS → Randstad → modal / popover → bugfix(DF909-834) : fixed the font color issue in the button
• CSS → Randstad/Spherion → datepicker → bugfix(DF909-835) : upgrade of flatpickr and removed default html5 calendar icon from input type="date"

1.1.5

22 February 2021

• HTML/CSS → Randstad - My Environment → new: Edit Avatar component for My Environment
• HTML/CSS → Randstad - My Environment - Dashboard → new: dashboard card component
• HTML/CSS → Randstad - My Environment - Job Alerts → update: New HTML / CSS for Job Alerts component
• HTML/CSS → Randstad/Spherion → Overlays → added: photo and buttons to modal
• HTML/CSS → Randstad/Spherion - Notifications → update: Notice Text-only component (readonly, closable and closable + icon)
• HTML/CSS → Randstad/Spherion Notice → rename: notice-text-only to notice-alert
• HTML/CSS → Randstad/Spherion - Related Jobs → update: add tooltip text to related jobs component
• SVG → Randstad/Spherion - Icons → new: 8 new icons added

1.1.4

9 February 2021

• orbit.randstad.scss hotfix

1.1.3

8 February 2021

• HTML/SVG → Randstad/Spherion → Icons → update/bugfix : update icons for aligment + update icon name
• HTML/CSS → Randstad - My Environment → new Edit Avatar component for My Environment
• HTML/CSS → Randstad - My Environment → Editable list component for Rating content My Environment
• HTML/CSS → Randstad - My Environment → Editable list component for Link content My Environment
• HTML/CSS → Randstad - Tab Bar → new: Tab bar with icons
• HTML/CSS → Randstad - Tab Bar → update: now available with three background color options (this, grey and off-white)
• HTML/CSS → Randstad - My Environment - Settings → update : change current account delete component My Randstad to new HTML & CSS for My Environment
• HTML/CSS → Randstad - My Environment - settings → new: component for Consent in My Environment Settings page
• HTML/CSS → Randstad - My Environment - Removable card → new component for My Environment
• HTML/CSS → Randstad - My Environment → Editable list component for Badge content My Environment
• HTML/CSS → Randstad - My Environment → HTML and CSS for My Environment listed content plus header
• HTML/CSS → Randstad overlays - Poll → bugfix: enable color scheme for all poll variants
• SCSS → Randstad/Spherion → Fixed scss deprecations and extend loops
• CSS → Randstad/Spherion → Font size and padding adjustments to the button small
• JS → Accessibility → Tooling for test automation on Accessibility added

1.1.2

25 January 2021

• JS → gulpfile → fixed some issues in the gulpfile and improved the performance
• JS → backstop → upgraded backstopjs package and improved backstopjs setup for testing on Apple M1 machines

1.1.1

18 January 2021

• CSS → multitheme → banner → update → increased the column width of the content by 1 for default and small modifier
• CSS → multitheme → banner → update → long words will not break anymore by adding an overflow wrap to it
• CSS → multitheme → header → update → increased the column width of the content by 1
• CSS → multitheme → header → update → long words will not break anymore by adding an overflow wrap to it
• CSS → multitheme → video → update → video boxed large has now a smaller font size
• CSS → multitheme → header → fix → when header was used in combination with full width media block and small modifier the picture was cut in half
• CSS → multitheme → cards → bugfix : padding
• HTML/CSS → multitheme → fix → fixed the line-heights of the button text for all buttons
• HTML/CSS → multitheme → Button Small → Added a button small for all themes
• HTML/CSS → multitheme → footer → update : new content + styling
• CSS → Spherion → modal-cookie → updatex → enable cookie for spherion and adjust styling
• HTML/CSS → Randstad → general → update → AA accessibility update for Randstad Designs, HTML button, toast, upload, list-items classname changes

1.1.0

22 December 2020

• JS → flatpickr version update
• REPO → icons → new : two new icons have been added: 'shield' and 'whatsapp'
• HTML/CSS → footer, meta-content, contact-person, meet-the-team → new : social icons have been renamed to --filled
• CSS → meta location → update : updated styling to fit US time notation

1.0.0

14 December 2020

• CSS → multitheme → forms - selection control → update : Multitheme CSS adjustment for alignment of form elements like checkboxes and labels
• CSS → multitheme → forms - labels → update : remove ellipsis from styling
• CSS → Randstad → my Randstad - profile → update: 2 to 3 column width
• CSS → Spherion → footer → update : CSS change text--alternative value
• HTML/CSS → Spherion → assets → update : provide new favicons on central location assets/image/favicons for developers

0.9.0

7 December 2020

• HTML/CSS → Randstad/Spherion Image gallery → update: add close button in html and rename stylesheet
• HTML/CSS → Spherion → colors → update: classname change and add HTML for each bg color
• HTML/CSS → Spherion → colors → update: CSS color change for button classes
• HTML/CSS → Spherion → Notification - notice-text-only → update: class name change + css color mapping
• HTML/CSS → Randstad/Spherion → navigation - logo → update: replace class name logo-randstad with logo
• HTML → Spherion → Split view - illustration → update: class name change + illustration change
• HTML → Spherion → Accordion → update: remove class name button
• HTML → Spherion → Notifications - Toast → update: class name change
• HTML → Spherion → headers - photo, carousels - photo, call-to-action - variation-2, promotional-text → update: class name change
• CSS → Spherion → colors → update: new color hex for ultra dark grey
• CSS → Spherion → fonts → update: add fallback font to css

0.8.0

30 November 2020

• REPO → BackstopJS → update : multi-theme changes
• HTML → Spherion badge group → update: class name change
• HTML/CSS → Spherion button white → update - class name change
• CSS → Spherion/Randstad color mapping theme folder → update: remove redundant specific background colors which are not applicable for that theme
• CSS → Randstad → update - CSS merge old Orbit 5.2 release into Multitheme 0.8.0
• CSS → show more → update : add component CSS
• CSS → tags → update : add component CSS
• CSS → tag group → update : add component CSS
• CSS → rating → update : add component CSS
• CSS → Spherion modal → update - css variable update
• CSS → Spherion popover → update - css variable update

0.7.0

23 November 2020

• HTML/CSS → Spherion header photo → update - class name change
• HTML/CSS → Spherion header video → update - class name change
• HTML/CSS → Spherion video full width → update - class name change
• HTML/CSS → Spherion video boxed large → update - class name change
• HTML/CSS → Spherion carousel photo → update - gradient and class name change
• HTML/CSS → Spherion jobs nearby → update : class name change
• HTML/CSS → Spherion notification - notice action → update : class name change
• HTML/CSS → Spherion carousels quote → update : class name change
• REPO → .editorconfig → update : add/refactor settings
• CSS → Spherion/Randstad color mapping atoms + molecules → update : mixins for specific background colors
• CSS → Spherion/Randstad color mapping organisms → update : mixins for specific background colors

0.6.0

15 November 2020

• HTML → Spherion extensive link list → update : class name change
• CSS → Spherion cards jobs → update : class name change
• CSS → Spherion color mapping → new : class name change
• HTML/CSS → Spherion blogs - topic overview : class name change
• HTML/CSS → Spherion cards - events : class name change
• HTML/CSS → Spherion header compact text → update: class name change
• HTML/CSS → Spherion header multiple CTA → update: class name change
• HTML/CSS → Spherion header selector → update: class name change
• HTML/CSS → Spherion header text → update: class name change
• HTML/CSS → Spherion indicators - rating → update : class name change
• HTML/CSS → Spherion list item - location → update : class name change
• HTML/CSS → Spherion notifications - notice in page → update : class name change
• HTML/CSS → Spherion notification - notice confirmed → update : class name change
• HTML/CSS → Spherion popups - cta → update : class name change
• HTML/CSS → Spherion popups - poll → update : class name change
• HTML/CSS → Spherion secondary search → update : class name change

0.5.0

10 November 2020

• HTML → Spherion headers → update: html navigation outside the html of the header
• HTML/CSS - Spherion CTA box variation 1 and 2 - class name change
• HTML/CSS → Spherion show more → update : class name change
• HTML/CSS → Spherion link list - featured → update : class name change
• HTML/CSS → Spherion data table → update : class name change
• HTML/CSS → Spherion video - boxed small → update : class name change
• HTML/CSS → Spherion header 404 → update: class name change
• HTML/CSS → Spherion header Meta → update: class name change
• HTML/CSS → Spherion indicators - strength → update : sentence casing + class name changes
• HTML/CSS → Spherion notification - text only → update : class name change
• HTML/CSS → Spherion charts → update : class name change
• HTML/CSS → Spherion meta-content → update : class name change
• HTML/CSS → Spherion blog components → update : class name change
• HTML/CSS → Spherion pagination → update : class name change
• HTML → Spherion popover - small → update : sentence casing of content
• CSS → Spherion color scheme → update
• CSS → Spherion tooltip → update
• CSS → Spherion indicator - step → update
• CSS → Spherion filter (all variations) → update
• CSS → Spherion sortbar → update
• NONE → Spherion indicators - percentage
• REPO → Spherion favicon → update
• REPO → Spherion logo → update
• REPO → Spherion maps → update : new marker.png
• REPO → Spherion blog components → update : new images

0.4.0

2 November 2020

• Meta content
• Color mapping
• Footer
• Form elements
• Popover large
• Modals
• Link list
• Promotional text
• Badges
• Contact person
• Notification toast

0.3.0

26 October 2020

• Meet the Team

0.2.0

23 October 2020

• Colors
• Buttons
• Navigation
• Blocks
• Image assets
• Typography and Fonts
• Body Copy
• Meta content location
• Accordion
• Blogs - article overview
• Cards - job
• Related jobs
• Split view - photo

💙 Shout out

A large shout out to the team who created this package with ultimate care, 'gewoon keigoed & skoftig mooi'! 🤗