feat!: Stopped design system CSS leaking on to other websites (#855)

* Update css in order to not overwrite other websites own css when imported. * Update stylesheet rules. * Restyled by prettier * Updated bdr and bg to use scoped wmnds class * Headers css have been converted to new class names * All heading classes have been converted to new wmnds- format * CSS updated to be more tightly scoped * Accordion styling is complete. * Starting updating tightly scoped components * Almost got all components working * Updated SCSS * Updated link css to stop a leak * Accordion working * Buttons now working * Disruption indicators now working * breadcrumb and lists is now working * lists now fixed * Lists are now working * Lists is fixed? * Disruption indicators are working * File download is complete * Inset text completed * Header is now working correctly * Message summary complete * Table is complete * Message summary is complete * Update utility classes ahead of pattern scoping * Banners are complete * Cookies is complete * Feedback loop complete * Footer complete * Fixed issue with heading classes * Header is now complete * Journey planner complete * Updated form elements * Question complete * Fix to banner * Fixed a bug with color on branded banner * fix global styles overwriting link colours Co-authored-by: Catia Costa <catia.rodrigues.costa@gmail.com> Co-authored-by: Restyled.io <commits@restyled.io> Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com> Co-authored-by: Gilad Grant <ggrant966@gmail.com>
wmcadigital · Jul 29, 2021 · cc6e153 · cc6e153
1 parent 2dc94d0
commit cc6e153
Show file tree

Hide file tree

Showing 92 changed files with 65,796 additions and 38,647 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -206,7 +206,7 @@ rules:
   no-qualifying-elements:
     - 2
     - allow-element-with-attribute: true
-      allow-element-with-class: false
+      allow-element-with-class: true
       allow-element-with-id: false
 
   # TODO: no-trailing-whitespace

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -117,6 +117,7 @@
     "findandreplacedomtext": "^0.4.6",
     "gulp-sass": "^4.1.0",
     "iframe-resizer": "^4.3.1",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "tfwm-travel-updates-widget": "^1.0.0"
   }
 }
diff --git a/src/wmnds/assets/sass/styles/_general.scss b/src/wmnds/assets/sass/styles/_general.scss
@@ -1,43 +1,55 @@
 .wmnds-html {
   min-width: 320px;
+  margin: 0;
+  padding: 0;
   overflow-y: auto;
+  color: get-color(text);
   background: get-color(background);
+  font-family: $x-font-family;
+  @include type-setting(0);
   scroll-behavior: smooth;
-}
 
-* {
-  box-sizing: border-box;
+  body {
+    margin: 0;
+    padding: 0;
+    color: get-color(text);
+    font-family: $x-font-family;
+    @include type-setting(0);
+  }
 }
 
-li {
-  margin-bottom: $size-xsm;
-}
+[class*="wmnds-"] {
+  box-sizing: border-box;
+  color: get-color(text);
+  font-family: $x-font-family;
+  @include type-setting(0);
 
-// Images
-img {
-  max-width: 100%;
-  height: auto;
-}
+  // Images
+  img {
+    max-width: 100%;
+    height: auto;
+  }
 
-// Text highlighting color
-::-moz-selection {
-  // Code for Firefox
-  color: $white;
-  background: get-color(primary);
-}
+  // Text highlighting color
+  ::-moz-selection {
+    // Code for Firefox
+    color: $white;
+    background: get-color(primary);
+  }
 
-::selection {
-  color: $white;
-  background: get-color(primary);
-}
+  ::selection {
+    color: $white;
+    background: get-color(primary);
+  }
 
-// Controls how elements look when focused (helps with accesibility/keyboard-only users)
-*:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
-}
+  // Controls how elements look when focused (helps with accesibility/keyboard-only users)
+  *:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
+  }
 
-// This gets rid of firefox default focus dash-border
-*::-moz-focus-inner {
-  border: 0;
+  // This gets rid of firefox default focus dash-border
+  *::-moz-focus-inner {
+    border: 0;
+  }
 }
diff --git a/src/wmnds/assets/sass/styles/_lists.scss b/src/wmnds/assets/sass/styles/_lists.scss
@@ -2,8 +2,8 @@
 // Included the ol tag too incase dev forgets to add .wmnds-ordered-list class.
 // The ol:not([class*="wmnds-"]) line makes sure we don't target any wmnds components that are using the a tag such as the breadcrumbs
 
-.wmnds-ordered-list,
-.wmnds-html ol:not([class*="wmnds-"]) {
+[class*="wmnds-"].wmnds-ordered-list,
+[class*="wmnds-"] ol:not([class*="wmnds-"]) {
   position: relative;
   counter-reset: item;
   padding-inline-start: $size-lg;
@@ -28,7 +28,8 @@
     line-height: 1.5rem;
   }
 
-  & > li {
+  & > li,
+  ol > li {
     display: block;
     position: relative;
     margin-bottom: $size-xsm;
@@ -58,8 +59,8 @@
 // Included the ol tag too incase dev forgets to add .wmnds-unordered-list class.
 // The ul:not([class*="wmnds-"]) line makes sure we don't target any wmnds components that are using the a tag such as the breadcrumbs
 
-.wmnds-unordered-list,
-.wmnds-html ul:not([class*="wmnds-"]) {
+[class*="wmnds-"].wmnds-unordered-list,
+[class*="wmnds-"] ul:not([class*="wmnds-"]) {
   list-style: none;
   padding-inline-start: $size-lg;
 
@@ -83,7 +84,8 @@
     @include type-setting(0);
   }
 
-  & > li {
+  & > li,
+  ul > li {
     position: relative;
     margin-bottom: $size-xsm;
 

diff --git a/src/wmnds/assets/sass/styles/_styles.scss b/src/wmnds/assets/sass/styles/_styles.scss
@@ -1,8 +1,9 @@
 // Global styles
-@import "utilities";
-@import "typography";
+
 @import "general";
+@import "typography";
 @import "lists";
 
+@import "utilities";
 // Grid
 @import "wmnds-grid/wmnds-grid";
diff --git a/src/wmnds/assets/sass/styles/_typography.scss b/src/wmnds/assets/sass/styles/_typography.scss
@@ -1,140 +1,125 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-  color: get-color(text);
-  font-family: $x-font-family;
-  @include type-setting(0);
-}
-
 // Get rid of margin for the first header item in main content
-* {
-  h1:first-child,
-  h2:first-child,
-  h3:first-child,
-  h4:first-child {
-    margin-top: 0;
+[class*="wmnds-"] {
+  div,
+  span,
+  p,
+  a {
+    @include type-setting(0);
   }
-}
 
-.wmnds-grid h1[class*="wmnds-col"],
-.wmnds-grid .h1[class*="wmnds-col"],
-h1,
-.h1,
-.wmnds-grid h2[class*="wmnds-col"],
-.wmnds-grid .h2[class*="wmnds-col"],
-h2,
-.h2,
-.wmnds-grid h3[class*="wmnds-col"],
-.wmnds-grid .h3[class*="wmnds-col"],
-h3,
-.h3,
-.wmnds-grid h4[class*="wmnds-col"],
-.wmnds-grid .h4[class*="wmnds-col"],
-h4,
-.h4 {
-  font-family: $x-heading-font-family;
-}
+  p,
+  pre,
+  table,
+  blockquote {
+    margin-top: 0;
+    margin-bottom: $base-line-height;
+  }
 
-div,
-span,
-li,
-ul,
-ol,
-p,
-a {
-  @include type-setting(0);
-}
+  // Let's make sure all's aligned
+  sub,
+  sup {
+    position: relative;
+    line-height: 0;
+    vertical-align: baseline;
+  }
 
-h1,
-.h1 {
-  color: get-color(primary);
-  @include type-setting(1, 0.85);
-  // On desktop devices
-  @media all and (min-width: $breakpoint-md) {
-    @include type-setting(1);
+  sup {
+    top: -0.5em;
   }
-}
 
-h2,
-.h2 {
-  color: get-color(primary);
-  @include type-setting(2, 0.85);
-  font-weight: bold;
-  // On desktop devices
-  @media all and (min-width: $breakpoint-md) {
-    @include type-setting(2);
+  sub {
+    bottom: -0.25em;
   }
-}
 
-h3,
-.h3 {
-  color: inherit;
-  @include type-setting(3);
-  font-weight: bold;
-}
+  // Set heading font for heading elements
+  h1,
+  h1[class*="wmnds-col"],
+  h2,
+  h2[class*="wmnds-col"],
+  h3,
+  h3[class*="wmnds-col"],
+  h4,
+  h4[class*="wmnds-col"] {
+    font-family: $x-heading-font-family;
+  }
 
-h4,
-.h4 {
-  color: inherit;
-  @include type-setting(4);
-  font-weight: bold;
+  h1,
+  &.wmnds-h1 {
+    color: get-color(primary);
+    @include type-setting(1, 0.85);
+    // On desktop devices
+    @media all and (min-width: $breakpoint-md) {
+      @include type-setting(1);
+    }
+  }
 
-  &.wmnds-weight-400 {
-    font-weight: normal;
+  h2,
+  &.wmnds-h2 {
+    color: get-color(primary);
+    @include type-setting(2, 0.85);
+    font-weight: bold;
+    // On desktop devices
+    @media all and (min-width: $breakpoint-md) {
+      @include type-setting(2);
+    }
   }
-}
 
-h5,
-.h5 {
-  @include type-setting(5);
-  font-weight: bold;
-}
+  h3,
+  &.wmnds-h3 {
+    color: inherit;
+    @include type-setting(3);
+    font-weight: bold;
+  }
 
-h6,
-.h6 {
-  @include type-setting(5);
-  font-weight: normal;
-}
+  h4,
+  &.wmnds-h4 {
+    color: inherit;
+    @include type-setting(4);
+    font-weight: bold;
 
-.h2 > *,
-.h3 > *,
-.h4 > *,
-.h5 > * {
-  color: initial;
-  font-weight: initial;
-}
+    &.wmnds-weight-400 {
+      font-weight: normal;
+    }
+  }
 
-p,
-ul,
-ol,
-pre,
-table,
-blockquote {
-  margin-top: 0;
-  margin-bottom: $base-line-height;
-}
+  h5,
+  &.wmnds-h5 {
+    @include type-setting(5);
+    font-weight: bold;
+  }
 
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-  margin-top: 0;
-  margin-bottom: 0;
-}
+  h6,
+  &.wmnds-h6 {
+    @include type-setting(5);
+    font-weight: normal;
+  }
 
-// Let's make sure all's aligned
-sub,
-sup {
-  position: relative;
-  line-height: 0;
-  vertical-align: baseline;
+  &.wmnds-h2 > *,
+  &.wmnds-h3 > *,
+  &.wmnds-h4 > *,
+  &.wmnds-h5 > * {
+    color: initial;
+    font-weight: initial;
+  }
 }
 
-sup {
-  top: -0.5em;
+// Set heading font for heading elements
+.wmnds-h1[class*="wmnds-"],
+.wmnds-h2[class*="wmnds-"],
+.wmnds-h3[class*="wmnds-"],
+.wmnds-h4[class*="wmnds-"] {
+  font-family: $x-heading-font-family;
 }
 
-sub {
-  bottom: -0.25em;
+* {
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h1:first-child[class*="wmnds-"],
+  h2:first-child[class*="wmnds-"],
+  h3:first-child[class*="wmnds-"],
+  h4:first-child[class*="wmnds-"] {
+    margin-top: 0;
+  }
 }