TDS sunset warning added for Core components and Gitbook pages (#1907)

* chore(other): update package-lock.json * chore(other): update package.json * docs(docs): update guide docs * chore(github): update templates * docs(other): update component docs * docs(docs): update component docs * chore(config): update config
telus · Mar 23, 2023 · 7b220c5 · 7b220c5
1 parent 8ddf3d3
commit 7b220c5
Show file tree

Hide file tree

Showing 73 changed files with 1,173 additions and 368 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,19 +4,20 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
+
 > We're sunsetting the maintenance of TDS
-> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system) yet in [UDS / Allium](https://sites.google.com/telus.com/thinkcontentxdesign/about-us-our-products/allium)
-> We encourage everyone to switch to UDS / Allium
-Either way, feel free to fix the issue if you can't switch / pick the corresponding component from Allium.
+> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system/issues) yet in [UDS](https://github.com/telus/universal-design-system)
+> We encourage everyone to switch to UDS
+> Either way, feel free to fix the issue if you can't switch / pick the corresponding component from UDS.
 
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -29,15 +30,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_template.md b/.github/ISSUE_TEMPLATE/feature_template.md
@@ -4,13 +4,12 @@ about: Suggest an idea for tds-core
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 > We're sunsetting the maintenance of TDS
-> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system) yet in [UDS / Allium](https://sites.google.com/telus.com/thinkcontentxdesign/about-us-our-products/allium)
-> We encourage everyone to switch to UDS / Allium
-Either way, feel free to fix the issue if you can't switch / pick the corresponding component from Allium.
+> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system/issues) yet in [UDS](https://github.com/telus/universal-design-system)
+> We encourage everyone to switch to UDS
+> Either way, feel free to fix the issue if you can't switch / pick the corresponding component from UDS.
 
 <!--
   ### IMPORTANT SECURITY NOTE ###

diff --git a/.github/ISSUE_TEMPLATE/icon_template.md b/.github/ISSUE_TEMPLATE/icon_template.md
@@ -4,13 +4,12 @@ about: Request a new icon
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 > We're sunsetting the maintenance of TDS
-> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system) yet in [UDS / Allium](https://sites.google.com/telus.com/thinkcontentxdesign/about-us-our-products/allium)
-> We encourage everyone to switch to UDS / Allium
-Either way, feel free to fix the issue if you can't switch / pick the corresponding component from Allium.
+> Make sure to verify if your bug has [not been fixed](https://github.com/telus/universal-design-system/issues) yet in [UDS](https://github.com/telus/universal-design-system/)
+> We encourage everyone to switch to UDS
+> Either way, feel free to fix the issue if you can't switch / pick the corresponding component from UDS.
 
 <!--
   ### IMPORTANT SECURITY NOTE ###
@@ -22,7 +21,7 @@ Either way, feel free to fix the issue if you can't switch / pick the correspond
   Also, do not include links to sites on staging.
 -->
 
-<!-- 
+<!--
   ### TDS Timeline for releasing icons ###
 
   New icon requests will be released midway in the next month.
@@ -37,7 +36,7 @@ Either way, feel free to fix the issue if you can't switch / pick the correspond
 ## Actions
 
 1. Did you check to see if there are icons available in TDS that can be used instead? Yes/No
-2. Is your proposed icon from the TELUS Brand-approved set from one of the appointed designers*? Yes/No
+2. Is your proposed icon from the TELUS Brand-approved set from one of the appointed designers\*? Yes/No
 3. If your design lead has approved this change, please note their name: [design lead name]
 4. If the art director has approved this change, please have them **comment on this issue**.
 

diff --git a/config/styleguide.config.js b/config/styleguide.config.js
@@ -516,6 +516,10 @@ module.exports = {
           test: /\.(png|jpg|svg)$/,
           use: 'url-loader',
         },
+        {
+          test: /\.html$/i,
+          loader: 'html-loader',
+        },
       ],
     },
   },

diff --git a/docs/Lists.md b/docs/Lists.md
@@ -6,10 +6,10 @@
     </Paragraph>
     <Paragraph>
       We encourage you to use our new component{' '}
-      <Link href="https://telus.github.io/allium-design-system/components/components/list">
+      <Link href="https://telus.github.io/universal-design-system/components/allium/web/list">
         List
       </Link>{' '}
-      from Allium
+      from UDS
     </Paragraph>
   </Box>
 </Notification>

diff --git a/docs/Typography.md b/docs/Typography.md
@@ -6,10 +6,10 @@
     </Paragraph>
     <Paragraph>
       We encourage you to use our new component{' '}
-      <Link href="https://telus.github.io/allium-design-system/components/components/typography">
+      <Link href="https://telus.github.io/universal-design-system/components/allium/web/typography">
         Typography
       </Link>{' '}
-      from Allium
+      from UDS
     </Paragraph>
   </Box>
 </Notification>

diff --git a/docs/components/overrides/StyleGuide/StyleGuideRenderer.js b/docs/components/overrides/StyleGuide/StyleGuideRenderer.js
@@ -8,6 +8,7 @@ import Markdown from 'rsg-components/Markdown'
 import FlexGrid from '../../../../packages/FlexGrid/FlexGrid'
 import CSSReset from '../../../../packages/css-reset'
 import GlobalStyleGuide from './GlobalStyleGuide'
+import tdsSunsetWarning from '../../../../guide/tds-sunset.html'
 
 const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({
   root: {
@@ -78,6 +79,7 @@ const TdsGrid = ({ children }) => (
 export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc, hasSidebar }) {
   const main = (
     <main className={cx(hasSidebar && classes.content)}>
+      <div dangerouslySetInnerHTML={{ __html: tdsSunsetWarning }} />
       {children}
       <footer className={classes.footer}>
         <Markdown text={`Generated with [React Styleguidist](${homepageUrl})`} />

diff --git a/docs/icons.md b/docs/icons.md
@@ -6,10 +6,10 @@
     </Paragraph>
     <Paragraph>
       We encourage you to use our new component{' '}
-      <Link href="https://telus.github.io/allium-design-system/components/components/icon">
+      <Link href="https://telus.github.io/universal-design-system/components/allium/web/icon">
         Icons
       </Link>{' '}
-      from Allium
+      from UDS
     </Paragraph>
   </Box>
 </Notification>

diff --git a/guide/README.md b/guide/README.md
@@ -1,27 +1,31 @@
 # TELUS Design System
 
-<div style="display: flex; flex-direction: row; wrap: nowrap; padding: 1rem; background-color: rgb(255, 249, 238); margin-bottom: 1rem;">
+<div
+  style="display: flex; flex-direction: row; wrap: nowrap; padding: 1rem; background-color: rgb(255, 248, 230); margin-bottom: 1rem; border: 1px solid rgb(230, 167, 0); border-radius: 6px;">
   <div style="margin-right: 1rem; height: 100%;">
     <svg style="display: inline-block; vertical-align: middle;" width="20" height="20">
-      <path
-        fill="#8C5415"
-        fill-rule="evenodd"
-        d="M10.878 1.61l8.315 15.244a1 1 0 0 1-.878 1.48H1.685a1 1 0 0 1-.878-1.48L9.122 1.61a1 1 0 0 1 1.756 0zM10 16.794c.46 0 .833-.402.833-.898 0-.495-.373-.897-.833-.897-.46 0-.833.402-.833.897 0 .496.373.898.833.898zm-.022-2.885c.347 0 .63-.297.64-.67l.179-6.698c.01-.388-.28-.709-.64-.709h-.35c-.361 0-.65.32-.64.708l.171 6.699c.01.373.294.67.64.67z"
-      />
+      <path fill="#8C5415" fill-rule="evenodd"
+        d="M10.878 1.61l8.315 15.244a1 1 0 0 1-.878 1.48H1.685a1 1 0 0 1-.878-1.48L9.122 1.61a1 1 0 0 1 1.756 0zM10 16.794c.46 0 .833-.402.833-.898 0-.495-.373-.897-.833-.897-.46 0-.833.402-.833.897 0 .496.373.898.833.898zm-.022-2.885c.347 0 .63-.297.64-.67l.179-6.698c.01-.388-.28-.709-.64-.709h-.35c-.361 0-.65.32-.64.708l.171 6.699c.01.373.294.67.64.67z" />
     </svg>
   </div>
   <div>
     <p>
-      The evolution of the TELUS brand continues! The brand new <a href="https://telus.github.io/allium-design-system/">Allium Design System</a> is now available and all teams are encouraged to transition their applications to Allium components in order to better reflect the latest vision of the TELUS brand.
+      The evolution of the TELUS brand continues! The brand new <a
+        href="https://telus.github.io/universal-design-system/">Universal Design System</a> is now available and all
+      teams are
+      encouraged to transition their applications to UDS components in order to better reflect the latest vision of
+      the TELUS brand.
     </p>
     <p>TDS Core and TDS Community will continue with limited support and restrict new feature requests.</p>
     <p>While diving into this documentation, you’ll notice some new updates:</p>
     <ul>
-      <li>We’ll provide direct links to corresponding Allium component from either tds-core / tds-community</li>
-      <li>We’ll provide notice about deprecated components (that may not be implemented on Allium in the near future)</li>
+      <li>We’ll provide direct links to corresponding UDS components from either tds-core / tds-community</li>
+      <li>We’ll provide notice about deprecated components (that may not be implemented on UDS in the near future)
+      </li>
     </ul>
     <p style="margin-bottom: 0;">
-      <a href="/contact.html">Contact us</a> for more information on how to get support. And <a href="https://telusdigital.slack.com/archives/C2WK9TP5F">join our TELUS Slack channel</a> for updates.
+      <a href="/contact.html">Contact us</a> for more information on how to get support. And <a
+        href="https://telusdigital.slack.com/archives/C2WK9TP5F">join our TELUS Slack channel</a> for updates.
     </p>
   </div>
 </div>

diff --git a/guide/SUMMARY.md b/guide/SUMMARY.md
@@ -1,3 +1,5 @@
+!INCLUDE "tds-sunset.html"
+
 ## TELUS Design System
 
 - [Home](README.md)

diff --git a/guide/accessibility/accessibility.md b/guide/accessibility/accessibility.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Accessibility
 
 The TDS documentation is a starting point for accessibility information.

diff --git a/guide/accessibility/colour-contrast.md b/guide/accessibility/colour-contrast.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Colour and contrast
 
 ## Overview

diff --git a/guide/accessibility/content.md b/guide/accessibility/content.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Content
 
 ## Overview

diff --git a/guide/accessibility/keyboard-nav.md b/guide/accessibility/keyboard-nav.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Keyboard Navigation
 
 ## Overview

diff --git a/guide/accessibility/responsive-content.md b/guide/accessibility/responsive-content.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Responsive content
 
 When coding page content for all users, we consider the following:

diff --git a/guide/accessibility/screen-readers.md b/guide/accessibility/screen-readers.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Screen Readers
 
 ## Overview
@@ -12,5 +14,5 @@ See the [TELUS Standards site](https://digitalstandards.telus.com/accessibility)
 
 ## Governance
 
-The TELUS digital accessibility is managed by Operations: Security and Accessibility. If you have any questions or concerns 
+The TELUS digital accessibility is managed by Operations: Security and Accessibility. If you have any questions or concerns
 regarding designing or developing in an accessible manner please contact Oskar Westin.
diff --git a/guide/announcements.md b/guide/announcements.md
@@ -1,3 +1,5 @@
+!INCLUDE "tds-sunset.html"
+
 # TDS Announcement Board 📣
 
 Welcome to the TDS Announcement Board! Check back here regularly for the latest updates on TDS!

diff --git a/guide/book.json b/guide/book.json
@@ -1,7 +1,14 @@
 {
   "title": "TELUS Design System",
   "gitbook": "3.2.2",
-  "plugins": ["otherlink", "collapsible-menu", "insert-logo-link", "-sharing", "edit-link"],
+  "plugins": [
+    "otherlink",
+    "collapsible-menu",
+    "insert-logo-link",
+    "-sharing",
+    "edit-link",
+    "include-html"
+  ],
   "pluginsConfig": {
     "edit-link": {
       "base": "https://github.com/telus/tds-core/tree/master/guide",

diff --git a/guide/contact.md b/guide/contact.md
@@ -1,6 +1,8 @@
+!INCLUDE "tds-sunset.html"
+
 # Contact us
 
-<div style="display: flex; flex-direction: row; wrap: nowrap; padding: 1rem; background-color: rgb(255, 249, 238); margin-bottom: 1rem;">
+<div style="display: flex; flex-direction: row; wrap: nowrap; padding: 1rem; background-color: rgb(255, 248, 230); margin-bottom: 1rem; border: 1px solid rgb(230, 167, 0); border-radius: 6px;">
   <div style="margin-right: 1rem; height: 100%;">
     <svg style="display: inline-block; vertical-align: middle;" width="20" height="20">
       <path

diff --git a/guide/contributing/codebase-overview.md b/guide/contributing/codebase-overview.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Codebase overview
 
 A description of the structure of the codebase, conventions being followed, and patterns.

diff --git a/guide/contributing/contributing-standards.md b/guide/contributing/contributing-standards.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Contributing standards
 
 The TELUS Design System maintains a set of standards and practices for core components and community components.

diff --git a/guide/contributing/contributing.md b/guide/contributing/contributing.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Contributing to TDS
 
 Role-specific guides and resources:

diff --git a/guide/contributing/designer-guide.md b/guide/contributing/designer-guide.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Contributing to TDS - designer guide
 
 Guidelines & Standards

diff --git a/guide/contributing/developer-guide.md b/guide/contributing/developer-guide.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Contributing to TDS - developer guide
 
 ## Contents

diff --git a/guide/design/colour.md b/guide/design/colour.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Colour
 
 ## Overview

diff --git a/guide/design/depth.md b/guide/design/depth.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Depth
 
 Coming soon...

diff --git a/guide/design/dividers.md b/guide/design/dividers.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Dividers
 
 ## Overview

diff --git a/guide/design/heuristics.md b/guide/design/heuristics.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # TELUS Usability Heuristics
 
 Usability heuristics are a list of design principles against which the usability of an interface can be assessed.

diff --git a/guide/design/iconography.md b/guide/design/iconography.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Iconography
 
 ## Overview

diff --git a/guide/design/imagery.md b/guide/design/imagery.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Imagery
 
 ## Overview

diff --git a/guide/design/layout.md b/guide/design/layout.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Layout
 
 ## Overview

diff --git a/guide/design/motion.md b/guide/design/motion.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Motion Principles
 
 Check out the Motion principles on [The Brand Resource Centre (BRC)](https://www.telus.com/en/brand-resources/design/motion-principles)
diff --git a/guide/design/principles.md b/guide/design/principles.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Design Principles
 
 The TELUS design principles are a simple set of rules that enable teams to craft great digital experiences. All experiences

diff --git a/guide/design/typography.md b/guide/design/typography.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Typography
 
 ## Overview

diff --git a/guide/design/writing.md b/guide/design/writing.md
@@ -1,3 +1,5 @@
+!INCLUDE "../tds-sunset.html"
+
 # Writing
 
 ## Overview

diff --git a/guide/faq.md b/guide/faq.md
@@ -1,3 +1,5 @@
+!INCLUDE "tds-sunset.html"
+
 # FAQs
 
 ## A TDS component does not do what I need. What do I do?