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

Author: shahzaibkhalid

.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.

.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 ###

.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**.
 

config/styleguide.config.js

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

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>

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>

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})`} />

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>

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>

guide/SUMMARY.md

@@ -1,3 +1,5 @@
+!INCLUDE "tds-sunset.html"
+
 ## TELUS Design System
 
 - [Home](README.md)