Release notes

New release(s):

• Text label demo
• Election SVG demo

Bug fix(es):

• Accordion accessibility fix: Removing the <a> tag inside <button>
• Card set menu demo fix

Updated file(s):

• SCSS files

New release(s):

• Election icon set added

Updated file(s):

• Icon package

Enhancement(s):

• Video component: Allow Microsoft Stream

Bug fix(es):

• Card: Mini card – Authoring dialog window updated
• Marketing page template: Updated JavaScript to handle window resize

Updated file(s):

• SCSS files
• Icon package

Enhancement(s):

• Mini card: Option to center aligning text

Bug fix(es):

• Range slider component accessibility fix

Updated file(s):

• SCSS files

New release(s):

• Data visualization colours palettes added.

Enhancement(s):

• Radio and checkbox validation message position updated
• Bootstrap was updated from version 4.4.1 to 5.2.3, which impacted the modal.

Bug fix(es):

• Accessibility fix on tab and timeline

Updated file(s):

• bootstrap.5.2.3.min
• coc.modal.js
• coc-modal-sliding.js
• SCSS files

New release(s):

• New SVG icon added:
  • cimg-hockey-sticks-o
  • cimg-skate-o

Bug fix(es):

• Accessibility fix for the timeline: Using a heading tag for the card title.

Updated file(s):

• Icon package
• SCSS files

Bug fix(es):

• Breadcrumb: The focus indicator style has been fixed.

Bug fix(es):

• Timeline demo fix: Be able to display code in a code snippet.

Updated file(s):

• SCSS files

New component(es):

• Badge status

Bug fix(es):

• Card menu demo fix
• Application card demo fix
• Questionnaire: Hide checkbox field in the list.

Updated file(s):

• SCSS files

Enhancement(s):

• Form validations demo page update: Build components for each example instead of using the RTE

Bug fix(es):

• Questionnaire: Minor CSS update 

Component(s) prototype:

• Form validation and form accessibility demo page added in summit site.

Bug fix(es):

• Questionnaire: Progress bar and previous button fix

New release(s):

• New SVG icon added: 
  • cimg-eco-center
  • cimg-household-hazardous-waste-o

Enhancement(s):

• Video: Added "Teams" video support.

Updated file(s):

• Icon package

New release(s):

• New icon added: 
  • cicon-hockey-mask-light
  • cicon-hockey-mask-solid
  • cicon-campground-light
  • cicon-volume-slash-light
  • cicon-volume-slash-solid
     
• New SVG added: 
  • cimg-water-river
  • cimg-water-demand
  • cimg-smoke-hours
  • cimg-riverbank-areas-health-score
  • cimg-people
  • cimg-net-zero-city
  • cimg-nature-and-ecology
  • cimg-natural-asset-valuation
  • cimg-mode-split
  • cimg-mobility
  • cimg-intense-rainfall
  • cimg-installed-solar-capacity
  • cimg-habitat-restoration
  • cimg-environmentally-sustainable-city
  • cimg-environment-signifiant-areas
  • cimg-energy
  • cimg-drought
  • cimg-corporate-governance
  • cimg-corporate-ghg
  • cimg-community-wide-waste-ghgs
  • cimg-community-wide-transportation-ghgs
  • cimg-community-wide-residential-buildings-ghgs
  • cimg-community-wide-non-residential-buildings-ghgs
  • cimg-community-wide-ghgs-per-capita
  • cimg-community-wide-ghg
  • cimg-climate-resilient-city
  • cimg-city-design-and-development
  • cimg-calgarys-flood-risk
  • cimg-buildings-and-homes
  • cimg-tree-mountain
  • cimg-people-cheer
  • cimg-paint-brush
  • cimg-air
  • cimg-wheelchair
  • cimg-water
  • cimg-volume-off
  • cimg-monitor
  • cimg-direction-sign
  • cimg-dine-in
  • cimg-calgary-flames
  • cimg-fire-earth-water-air
  • cimg-feather
  • cimg-door-access

Updated file(s):

• Icon package

Enhancement(s):

• Questionaire: added Adobe Analytics support

Bug fixes(s):

• Timeline: Keyboard accessibility fix

New release(s):

• New icon added: 
  • cicon-disguise-face
  • cicon-hand-heart-pen

Updated file(s):

• Icon package

New release(s):

• New icon added: 
  • cicon-circle-radiation
  • cicon-circle-radiation-light
  • cicon-laptop-mobile
  • cicon-laptop-mobile-light 

Bug fix(es):

Card container: Fixed the cards that were broken after the filter was applied.

Updated file(s):

• Icon package

Enhancement(s):

• Do's and Don'ts: 'Equal height' function added 

Bug fix(es):

• Accordion: Fix the colour contrast on iPhone
• Inline alert banner: Fix icon alignment

Updated file(s):

• SCSS files

Enhancement(s):

• Line graph: Add data point "markers" on the line graph component.

Bug fix(es):

• Accessibility fix for the card component: A simple card is enhanced into a selectable card by adding the class 'block-link' along with the class 'card' on the div. When this combination is present, the 'block-link' class adds styling, and JavaScript will make any div with the classes 'cui' and 'card' function as a block link if it contains either an 'h3' element with an 'a' child or a 'p' element with the class 'card-title' that contains an 'a' child.

Updated file(s):

• SCSS files
• coc-card-item.js

New release(s):

• New icon added: 
  • cicon-briefcase-light
  • cicon-newspaper-light
  • cicon-users-line-light
  • cicon-users-line-solid
  • cicon-clipboard-list-light
  • cicon-arrow-up-right-from-square-light
  • cicon-train-tunnel-light
  • cicon-train-tunnel-solid
  • cicon-person-to-door-light
  • cicon-person-to-door-solid
  • cicon-water-light
  • cicon-water-solid
  • cicon-palette-light
  • cicon-palette-solid
  • cicon-grip-lines-vertical-light
  • cicon-grip-lines-vertical-solid
  • cicon-train-track-light
  • cicon-train-track-solid
  • cicon-bridge-light
  • cicon-bridge-solid
  • cicon-escalator-light
  • cicon-escalator-solid
  • cicon-person-walking-light
  • cicon-grip-lines-light

• Updated file(s):
  • cicon-package.zip

Enhancement(s):

Questionnaire:  Add the toggle for the progress container and question number in the configuration.

New component(s):

Before and after slider demo added

Bug fix(es):

Card: Fixed the video play icon not displaying.

Updated file(s):

• SCSS files

Bug fix(es):

Content block: Fixed the image display issue on Edge.  

Updated file(s):

• SCSS files

Enhancement(s):

• Global inline notification banner: Limiting the call-to-action links to two.

Bug fix(es):

• Interactive bar / chart: Update the color to increase the contrast.

Updated file(s):

• SCSS files

Bug fix(es):

• Timeline:
  • Removed the vertical scrollbar that appeared in the horizontal timeline.   
  •  Remove the swiper buttons in the vertical timeline.

• Alert banner: 
  • Updated the alignment of the icon and the top header text.
  • Renamed inline notification banner to inline alert banner.
    

Updated file(s):

• SCSS files

Enhancement(s):

• Alert banner demo updated: 
  • Add global inline notification banner
  • The colour of the icon display on small alert banner turns to black
• Timeline demo updated: Remove the swiper buttons

Updated file(s):

• SCSS files

Bug fix(es)

• Button:
  • Removed the legacy code
  • Fixed the icon alignment
  • Corrected different button sizes
• CTA block, Block banner, Hero banner, Text on image: Updated primary button HTML markup.
•  Esri map and Questionnaire: Updated utility button HTML markup.
• Timeline: Fixed navigation button to allow the current card to be focused.

Updated file(s):

• SCSS files

New release(s):

• New icon added: cicon-bus-ct

Enhancement(s)

• Timeline: Make short description optional

Updated file(s):

• cicon-package.zip

Enhancement(s)

• Grid: Add the visibility toggle to hide the grid on the publish view

Bug fix(es):

• Card
  • Accessibility fix: Add the card-header-wrapper to wrap up the card title and card context title. 
  • Fixed body text is hidden when changing from heading to paragraph tag
  • Remove the body text required, and update the field label.
• Questionnaire: Print version fixes
  

Updated file(s):

• SCSS files
  

Bug fix(es):

• Questionnaire: Print version fixes

Updated file(s):

• SCSS files
  

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.