Release notes

New component(s):

• Disclaimer demo added

Bug fix(es):

• Questionnaire: Output report as HTML, spacing adjusted on the progress bar

Updated file(s):

• SCSS files
  

Enhancement(s):

• Form validation error banner: Icon updated from a triangle with an exclamation mark to a circle with an exclamation mark
• Secondary navigation: Update the indentation and support additional levels

Bug fix(es):

• Alert banner colour rollback

Updated file(s):

• coc.nav.js
• SCSS files

New release(s):

• New icon added:
  • cicon-triangle-exclamation-solid
  • cicon-circle-exclamation-solid
  • cicon-circle-info-solid
  • cicon-circle-check-solid
  • cicon-briefcase-medical-solid
  • cicon-user-police-tie-solid
  • cicon-square-question-solid
  • cicon-tree-christmas-solid
  • cicon-screwdriver-wrench-solid
  • cicon-person-sign-solid
  • cicon-person-running-solid
  • cicon-flag-pennant-solid
  • cicon-circle-heart-solid
  • cicon-hat-cowboy-side-solid
  • cicon-ellipsis-light
  • cicon-ellipsis-vertical-light
  • cicon-triangle-exclamation-light
  • cicon-circle-exclamation-light
  • cicon-circle-info-light
  • cicon-circle-check-light
  • cicon-wheelchair-light
  • cicon-gear-complex-light
  • cicon-briefcase-medical-light
  • cicon-user-police-tie-light
  • cicon-square-question-light
  • cicon-tree-christmas-light
  • cicon-screwdriver-wrench-light
  • cicon-person-sign-light
  • cicon-person-running-light
  • cicon-flag-pennant-light
  • cicon-circle-heart-light
  • cicon-hat-cowboy-side-light
  • cicon-circle-hashtag-solid
  • cicon-circle-hashtag-light

Enhancement(s):

• Alert banners:
  • Updated the icon, color and adjust the spacing
  • Add the information option for global banner
  • Add warning and success on the inline banner    
• Tabs:  Add ID on tabs

Updated file(s):

• cicon-package.zip

Enhancement(s):

• Card container:  Context title and description text field added 

Bug fix(es):

• Image viewer: Fixed not showing caption on images that have 'show caption' enabled while paging and images sometimes not being scaled correctly.    

Updated file(s):

• SCSS files

New release(s):

• New icon added:  
  • cicon-circle-parking-light
  • cicon-scooter
  • cicon-bicycle-light
  • cicon-chevrons-down-light
  • cicon-chevrons-left-light
  • cicon-chevrons-right-light
  • cicon-chevrons-up-light
• Edge to edge wrapper

Enhancement(s):

• Accordion: Style updated
  • Only when adding the accordion inside of the ‘Edge to edge wrapper’, the accordion background will be changed to white.

Bug fix(es):

• Timeline: Navigation buttons function fixed

Updated file(s):

• cicon-package.zip
• SCSS files

New release(s):

• New icon added:  
  • cimg-safety-o

Bug fix(es):

• Image component: Updating osgi config to allow higher resolution images.

Updated file(s):

• cicon-package.zip

New release(s):

• New icon added:  
  • cicon-solid-database-rotate

Bug fix(es):

• Mini card height fix
• Timeline demo fix

Updated file(s):

• cicon-package.zip

New release(s):

• New icon added:  
  • cicon-cat-solid
  • cicon-clock-solid
  • cicon-search-light
  • cicon-file-pdf-light
  • cicon-file-arrow-down-light
  • cicon-filter-light
  • cicon-bars-light
  • cicon-arrow-up-arrow-down-light
  • cicon-arrow-up-light
  • cicon-arrow-down-light
  • cicon-droplet-light
  • cicon-chevron-left-light
  • cicon-chevron-right-light
  • cicon-chevron-up-light
  • cicon-chevron-down-light
  • cicon-arrow-left-light
  • cicon-arrow-right-light
  • cicon-user-shield-light
  • cicon-user-shield-solid
  • cicon-cart-shopping-light
  • cicon-map-location-dot-light
  • cicon-map-location-dot-solid
  • cicon-location-dot-light
  • cicon-money-check-pen-light
  • cicon-money-check-pen-solid
  • cicon-hand-holding-box-light
  • cicon-hand-holding-box-solid
  • cicon-user-tag-light
  • cicon-user-tag-solid
  • cicon-ctrain-light
  • cicon-ctrain-solid
  • cicon-bus-max-light
  • cicon-bus-max-solid
  • cicon-bus-light
  • cicon-universal-access-light
  • cicon-universal-access-solid
  • cicon-bag-shopping-light
  • cicon-ticket-light
  • cicon-arrows-up-down-light

Updated file(s):

• cicon-package.zip

New release(s):

• New icon added:  
  • cicon-syringe-regular
  • cicon-face-hand-over-mouth
  • cicon-head-side-cough-slash
  • cicon-spray-can-solid
  • cicon-arrows-left-right-light
  • cicon-arrow-right-arrow-left-light

Enhancement(s):

• Card: Rounded edges update on card
• Tab: 
  • Updating tab component to have ID's based on the title of each tab,
  • Automatically opening tabs on load based on location hash

Updated file(s):

• SCSS files
• cicon-package.zip

New release(s):

• New icon added:  
  • cicon-clipboard-user

Enhancement(s):

• The form input border colour was updated from #b7b9bb to  #939599

Updated file(s):

• cicon-package.zip

Enhancement(s):

Card:  Add the 'Background size' option on authoring mode when choosing the mini card SVG image.

Enhancement(s):

Card set: Add the option to display horizontal card on mobile

Update file(s)

• SCSS files

Enhancement(s):

Twitter icon updated 

Update file(s)

• cicon-package.zip

Update file(s)

• SCSS files ( Wrap division operations inside a calc() expression )

Enhancements(s)

Content Block: Added video support and duration block display in the component

Bug fix(es):

Card: Authoring view card layout fix

Timeline: Code cleanup and date format fix

Updated file(s):

• SCSS files

New component (s):

Timeline: Web components are interactive UI elements that organize chronological information on web pages.

Updated file(s):

• SCSS files

Bug fix(es):

• Image viewer gallery: Broken filter fixed

Updated file(s):

• SCSS files

Enhancement(s):

• Hero banner:
  • Add the context title field to the standard option
  • Standardize the description field across the standard and adaptable options
• List:
  • Adjust the spacing under the ordered and unordered list
• Footer:
  • Add the 'Additional resources' heading above the privacy policy section             

Updated file(s):

• SCSS files

Enhancement(s):

• Card set and card slider:
  • Heading option added
  • Enables switching between heading tag and paragraph tag for card title

Updated file(s):

• SCSS files

New release(s):

• New icon added:
  • cicon-dumbbell-solid

Updated file(s):

• cicon-package.zip

New release(s):

• New icons added:
  • cicon-bike-rack
  • cicon-stage
  • cicon-dumbbell-in
  •  cicon-laptop-arrow-down-solid
  • cicon-trophy-star-solid
  • cicon-octagon-exclamation-solid

Updated file(s):

• cicon-package.zip

Enhancement(s):

• Heading demo regroup
• Breadcrumb demo: single-level display added
• Wordmark demo: New layout options added
• Primary navigation demo: Complex curated dropdowns added  
• Accordion demo: Heading options added

Updated file(s):

• SCSS files

New release(s):

• New icons added
  • cicon-map-pen
  • cicon-people-group-solid
  • cicon-chart-mixed-solid
  • cicon-arrows-turn-to-dots-solid
  • cicon-helmet-safety-solid
  • cicon-hand-heart-solid
  • cicon-hammer-solid
  • cicon-sack-dollar-solid
  • cicon-cash-register-solid
• New SVGS added
  • cimg-person-vaping-o
  • cimg-vape-hand-o
  • cimg-vape-o

Updated file(s):

• SCSS files
• cicon-package.zip

Enhancement(s):

• The YouTube video can be started and stopped at a specific time across different components.

Bug fix(es):

• Table V2: Fixed a bug that would make some links disappear inside the table.

Enhancement(s):

• Block banner: Add the 'Start' and 'End' options on video setup
• Do`s and dont`s block: Add the addition label.

Enhancement(s):

• Alert banner: Update the colour based on the semantic colour palette.

Updated file(s)

• SCSS files

Enhancement(s):

• Semantic colour palette updated:
  • CSS class  ‘coc-secondary-red ‘ updated to  ‘coc-danger ‘ and  ‘coc-error ‘
  • CSS class  ‘coc-secondary-blue-access ‘ updated to  ‘coc-information ‘
  • New CSS classes added:  ‘coc-caution ‘,  ‘coc-success’

Updated file(s)

• SCSS files

Bug fix(es):

• Modal: modal window height fix with long contents

Updated file(s)

• SCSS files
• coc.modal.js

Enhancement(s):

• Image: Add the caption and caption alignment options
• Image viewer - Single image: Add cation alignment options
  
• Modal demo: Removed the 'Enable full screen on mobile' option

Updated file(s)

• SCSS files

Bug fix(es):

• Vertical tab: Spacing between components
• Modal: Modal window position
  

Updated file(s)

• SCSS files

Bug fix(es):

• Vertical tab: Height of the content area
• Modal: Modal window position
  

Updated file(s)

• SCSS files

Bug fix(es):

• Modal: Fullscreen display
  

Updated file(s)

• SCSS files

Bug fix(es):

• Card container - scrolling: authoring card width reset
• Modal: Close modal clicking above and below on backdrop

Updated file(s)

• SCSS files

Enhancement(s):

• The animation library version updated
  • GSAP 2.0.1 to GSAP 3.11.3
  • scrollMagic updated from 2.0.5 to 2.0.7

Bug fix(es):

• Card container - scrolling: Refresh card set on resizing browser window 

Updated file(s)

• coc.animations.js

New release(s):

• Icon library updated: cicon-person-skating-solid added 

Component enhancement(s):

• Tabs: Vertical layout option added
• Service line bar chat: Remove link for single service line

Bug fix(es):

• Tab accessibility fix: Add the missing aria-selected attribute 

Updated file(s)

• SCSS files
• cicon-package.zip
• coc-accordion-tabs.js

New release(s):

• New SVGS added
  • cimg-hand-saying-stop
  • cimg-cannabis-marijuana-leaf
  • cimg-respectful-workplace-policy-people
  • cimg-weigh-scale        

Component enhancement(s):

• Mega nav: Add a "context phrase" to the single-level dropdown mega nav drawer

Updated file(s)

• SCSS files
• cicon-package.zip

Component enhancement(s)

• Icon with label: Allow to add SVG image

Custom component enhancement(s):

• Service lines and budgets bar chart: Extended component, content types, lists and single service line filter

Bug fix(es)

• Tooltip demo accessiblity fix
• Bar graph does not support multiple layouts on same page

Custom component enhancement(s):

• Horizontal bar graph: Add the layout option to display the label to the left or label above
• Service lines and budgets bar chart:
  • refactor and optimize the code so that the component is reusable
  • enable sorting by value
  • enable order of the bars
  • resolve the delimiter issues with the data
  • data bar style update to help visualized if the value becomes 0

Updated file(s)

• SCSS files

Custom component bug fix(es)

• Horizontal bar graph data display fixed

Custom component(s)

• Horizontal bar graph
• Service plan and budget bar chart

Bug fix(es)

Table: Fixed the RTE link to an asset and makes it relative.

Updated file(s)

• SCSS files

Enhancement(s)

Content block with image: Additional button option added.

Bug fix(es)

Utility navigation menu fixes on the header

Updated file(s)

• SCSS files

Bug fix(es)

Link button: Demo fix

Enhancement(s)

Header: New configuration options added

• With utility menu and related links
• With single level mega menu
• With curated mega menu

Enhancement(s)

Footer: Expand on footer functionality,  group links layout added

Updated file(s)

• SCSS files

Bug Fixes(s)

Icon only button: Fixed the bug with the icon not displaying correctly

Page Indexing: Fixed the bug where Design System pages were showing in Calgary.ca search results 

Enhancement(s)

Mega Menu: Added proof of concepts for single level mega nav and curated mega nav content

Removal(s)

Parallax Scrolling: Removed the Parallax scrolling component from the design system

Updated file(s)

• SCSS files

August 25, 2022 release

Enhancement(s)

Traffic line icons: Updated the colour values of the traffic line icons

Updated file(s)

• SCSS files

Bug fix(es)

Data display: The side-scrolling fix

Table: The side-scrolling on the table demo fix

The linear footer:  Did not Permit links without extensions .html fix

Video: YouTube Videos were not displaying correctly fix

Enhancement(s)

Data display

1. Allow the data display component to display on the 'content block' component ( Without image layout )
2. New options for the table display:
   • Table width: Default, 100% width
   • Table text alignment: Center, Top

Updated file(s)

• SCSS files

Bug fix(es)

Video: Typo and  JS error fix

Enhancement(s)

Video: Add Wistia and Webcast

Form button: Remove the 'Mega' button and add the 'Disabled' and 'Icon only' buttons

Table: Add SVG illustrations to the table

SVG Library: Demo updated to include all the new SVGs

Bug fix(es)

Marketing banner: Accessibility fix

Updated file(s)

• SCSS files

Bug fix(es)

Adaptable banner: Text colour fix on mobile

Updated file(s)

• SCSS files

New release(s)

Do`s and dont`s block: uses simple and matched visual elements and list view to advise rules in a particular situation.

New icons added:

• cicon-store-solid
• cicon-restroom-solid
• cicon-glass-water-droplet-solid
• cicon-campground-solid
• cicon-person-circle-question-solid

Bug fix(es)

Design system colour component: Spacing fix on CPS brand page

Enhancement(s)

Image: Provide authoring control for the image to be 100% on the small screen

Updated file(s)

• SCSS files
• cicon-package.zip

New release(s)

New SVG images added

Bug fix(es)

Application card: Fixed the card layout when the 'status' is hidden

Slogan banner - without text: Fixed the mobile image display 

Enhancement(s)

Text on image: Removed the scroll bar on the content body

Updated file(s)

• SCSS files

New release(s)

Application card: Used to summarize items in a list that share similar information properties (and should only be used for items that would be intended for a list).

Enhancement(s)

Modal: added sliding modal

Updated file(s)

• SCSS files
• coc-modal-sliding.js

Enhancement(s)

Marketing block: added video option

Updated file(s)

• SCSS files

Enhancement(s)

Adaptable Hero Banner: Add the white text option

Updated file(s)

• SCSS files

Enhancement(s)

Background image block: Component level policy updated to allow the video component

Secondary navigation: Demo updated

Bug fix(es)

<pre> tag: Font family update to "Open Sans"

Updated file(s)

• coc.nav.js
• SCSS files

Bug fix(es)

Secondary navigation: Add the `active` class to the appropriate menu list item.

Updated file(s)

• coc.nav.js

Bug fix(es)

White background overlay does not appear on various components

• Hero banner - standard
• Block banner
• Background image block

Data display: Button style fix

Updated package(s)

• SCSS files

Enhancement(s)

Marketing block:

• added column widths option
• added the image height option

Updated package(s)

• SCSS files:
  • renamed following output files:
    • 'coc-styles.css' to 'coc-styles-designSystem-bundle.css'
    • 'coc-styles-cps.css' to 'coc-styles-designSystem-cps-bundle.css'
    • 'coc-styles-election.css' to 'coc-styles-designSystem-election-bundle.css'
  • removed 'coc-styles-form.css': form style included inside of the new output files

Bug fix(es)

• cicon-kiwi-bird-solid
• cicon-crow-solid
• cicon-dove-solid
• cicon-feather-pointed-solid
• cicon-feather-solid

Updated package(s)

• cicon-package.zip

New release(s)

New icons added:

• cicon-kiwi-bird-solid
• cicon-crow-solid
• cicon-dove-solid
• cicon-feather-pointed-solid
• cicon-feather-solid

Enhancement(s)

Horizontal rule:

• added option to remove the top space

Marketing banner:

• added "contain" option for the background image
• added option to remove border
• set up max-width on the subtitle line length to match the standard paragraph line length

New release(s)

New icons added:

• cicon-menu-open
• cicon-menu-collapse

New release(s)

Marketing banner component

Enhancement(s)

Primary navigation component:

• added functionality to close sub navigation when user clicks off the menu to prevent layering issues with other links.