Merge pull request #939 from DTS-STN/release

Release

.github/ISSUE_TEMPLATE/bugs.yml

@@ -1,4 +1,4 @@
-name: DECD Bug Report for tracking issues
+name: SEDD Bug Report for tracking issues
 description: File a bug report
 title: "[Bug]: "
 labels: ["bug", "triage"]

.github/workflows/inspection.yml

@@ -0,0 +1,34 @@
+name: Bump PR & NPM Dev Publish
+on:
+  pull_request:
+    types: [closed, merged, opened]
+    branches: [toronto, montreal, vancouver, winnipeg]
+jobs:
+  build-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install
+        run: npm ci
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Create Folder
+        run: |
+          FOLDER_NAME=$(echo ${{ github.event.pull_request.base.ref }} | sed 's/\//-/g')
+          mkdir -p ${{ github.workspace }}/$GITHUB_REPOSITORY/gh-pages/$FOLDER_NAME
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          target-folder: ${{ github.event.pull_request.base.ref }}
+          branch: gh-pages
+          folder: storybook-static
+          clean: true

.github/workflows/test.yml

@@ -1,7 +1,7 @@
 name: "Test"
 on:
   pull_request:
-    branches: [ main, release, develop ]
+    branches: [ main, release, develop, inspect1, inspect2, inspect3 ]
 jobs:
   checkout-and-test:
     runs-on: ubuntu-latest

README.md

@@ -2,9 +2,9 @@
 ![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)
 [![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)
 
-# DECD Design System Component Library
+# SEDD Design System Component Library
 
-This repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.
+This repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.
 
 ## Install
 
@@ -22,7 +22,7 @@ import { Component } from "@dts-stn/service-canada-design-system";
 
 **Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.
 
-To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.
+To see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.
 
 ## Contribution
 

config-plugins/checkboxes-plugin.js

@@ -6,7 +6,7 @@ const checkboxes = plugin(function ({ addUtilities, theme }) {
       width: "44px",
       // borderColor: theme("colors.multi.neutrals.grey85a"),
       borderRadius: "4px",
-      borderWidth: "1.5px",
+      borderWidth: "2px",
     },
     ".example64": {
       borderRadius: "4px",

config-plugins/datepicker-plugin.js

@@ -4,7 +4,7 @@ const datepicker = plugin(function ({ addUtilities, theme }) {
     // default
     ".date-style": {
       borderColor: theme("colors.multi.neutrals.grey50"),
-      borderWidth: "1.5px",
+      borderWidth: "2px",
       borderRadius: "4px",
       borderStyle: "solid",
       paddingLeft: "4px",

config-plugins/typography-plugin.js

@@ -3,71 +3,87 @@ const typography = plugin(function ({ addUtilities, theme }) {
   const newUtilities = {
     ".display": {
       fontSize: theme("fontSize.mobiledisplay"),
+      lineHeight: theme("lineHeight.displaym"),
       fontWeight: theme("fontWeight.regular"),
       fontFamily: theme("fontFamily.display"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserdisplay"),
+        lineHeight: theme("lineHeight.display"),
       },
     },
     ".heading1": {
       fontSize: theme("fontSize.mobileh1"),
-      lineHeight: theme("lineHeight.header"),
+      lineHeight: theme("lineHeight.heading1m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
+      paddingBottom: theme("paddingBottom.8px"),
       color: theme("colors.multi.neutrals.grey100"),
       borderBottom: theme("outline.heading-solid"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh1"),
+        lineHeight: theme("lineHeight.heading1"),
+        paddingBottom: theme("paddingBottom.8px"),
       },
     },
     ".heading2": {
       fontSize: theme("fontSize.mobileh2"),
+      lineHeight: theme("lineHeight.heading2m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh2"),
+        lineHeight: theme("lineHeight.heading2"),
       },
     },
     ".heading3": {
       fontSize: theme("fontSize.mobileh3"),
+      lineHeight: theme("lineHeight.heading3m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh3"),
+        lineHeight: theme("lineHeight.heading3"),
       },
     },
     ".heading4": {
       fontSize: theme("fontSize.mobileh4"),
+      lineHeight: theme("lineHeight.heading4m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh4"),
+        lineHeight: theme("lineHeight.heading4"),
       },
     },
     ".heading5": {
       fontSize: theme("fontSize.mobileh5"),
+      lineHeight: theme("lineHeight.heading5m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh5"),
+        lineHeight: theme("lineHeight.heading5"),
       },
     },
     ".heading6": {
       fontSize: theme("fontSize.mobileh6"),
+      lineHeight: theme("lineHeight.heading6m"),
       fontWeight: theme("fontWeight.regular"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh6"),
+        lineHeight: theme("lineHeight.heading6"),
       },
     },
     ".body": {
       fontSize: theme("fontSize.mobilebody"),
+      lineHeight: theme("lineHeight.body"),
       fontWeight: theme("fontWeight.regular"),
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey100"),
@@ -77,6 +93,7 @@ const typography = plugin(function ({ addUtilities, theme }) {
     },
     ".body-bold": {
       fontSize: theme("fontSize.mobilebodybold"),
+      lineHeight: theme("lineHeight.bodybold"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey100"),
@@ -87,35 +104,47 @@ const typography = plugin(function ({ addUtilities, theme }) {
 
     ".card-title-non-link": {
       fontSize: theme("fontSize.card_nonlink"),
+      lineHeight: theme("lineHeight.card_nonlink"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
       color: theme("colors.multi.neutrals.grey100"),
     },
     ".card-body-text": {
       fontSize: theme("fontSize.card_bodytext"),
-      fontWeight: theme("fontWeight.regular"),
+      lineHeight: theme("lineHeight.card_bodytext"),
+      fontWeight: theme("fontWeight.medium"),
       fontFamily: theme("fontFamily.body"),
-      color: theme("colors.multi.neutrals.grey100"),
+      color: theme("colors.multi.neutrals.grey90"),
     },
 
     ".caption-large": {
       fontSize: theme("fontSize.caption_large"),
+      lineHeight: theme("lineHeight.caption_large"),
       fontWeight: theme("fontWeight.medium"),
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey85a"),
     },
     ".caption-regular": {
       fontSize: theme("fontSize.caption_regular"),
+      lineHeight: theme("lineHeight.caption_regular"),
       fontWeight: theme("fontWeight.medium"),
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey85a"),
     },
     ".caption-small": {
       fontSize: theme("fontSize.caption_small"),
+      lineHeight: theme("lineHeight.caption_small"),
       fontWeight: theme("fontWeight.medium"),
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey85a"),
     },
+    ".caption-heading1": {
+      fontSize: theme("fontSize.caption_heading1"),
+      lineHeight: theme("lineHeight.caption_heading1"),
+      fontWeight: theme("fontWeight.regular"),
+      fontFamily: theme("fontFamily.body"),
+      color: theme("colors.multi.neutrals.grey85a"),
+    },
 
     ".form-date": {
       fontSize: theme("fontSize.mobileh5"),