Apply redwood theme (#4018)

Author: cm9361

package-lock.json

@@ -39,7 +39,16 @@
     "extends": "@cerner/stylelint-config-terra",
     "rules": {
       "scss/at-mixin-pattern": "^(terra-)[a-z]+([a-z0-9-]+[a-z0-9]+)?$"
-    }
+    },
+    "overrides": [
+      {
+        "files": ["packages/terra-theme-properties/**/*.scss", "packages/**/redwood-theme/**/*.scss"],
+        "rules": {
+          "terra/custom-property-name": false,
+          "terra/custom-property-namespace": false
+        }
+      }
+    ]
   },
   "devDependencies": {
     "@babel/cli": "^7.5.0",
@@ -66,6 +75,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.2.2",
     "eslint": "^7.19.0",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "gh-pages": "^2.0.1",
     "glob": "^7.1.2",
     "jest": "^27.0.0",
@@ -78,7 +88,7 @@
     "react-test-renderer": "^16.5.2",
     "regenerator-runtime": "^0.13.2",
     "stylelint": "^15.0.0",
-    "terra-application": "^1.48.0",
+    "terra-application": "^1.57.0",
     "terra-disclosure-manager": "^4.9.0",
     "terra-enzyme-intl": "^3.4.0",
     "webpack": "^5.28.0",
@@ -122,7 +132,8 @@
     "wdio-default": "terra wdio",
     "wdio-lowlight": "terra wdio --themes clinical-lowlight-theme",
     "wdio-fusion": "terra wdio --themes orion-fusion-theme",
-    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme",
+    "wdio-redwood": "terra wdio --themes redwood-theme",
+    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme redwood-theme",
     "wdio:docker": "terra wdio --disableSeleniumService=true --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
   }
 }

package.json

@@ -105,9 +105,17 @@ const Badge = ({
     customProps.className,
   );
 
+  let badgeIcon = icon;
+
+  if (icon && theme.className === 'redwood-theme') {
+    badgeIcon = React.cloneElement(icon, {
+      className: classNames(cx('badge-icon')),
+    });
+  }
+
   const textContent = text ? <span className={styles.text}>{text}</span> : null;
   const visuallyHiddenTextContent = visuallyHiddenText ? <VisuallyHiddenText text={visuallyHiddenText} /> : null;
-  const content = isReversed ? [textContent, visuallyHiddenTextContent, icon, customProps.children] : [icon, textContent, visuallyHiddenTextContent, customProps.children];
+  const content = isReversed ? [textContent, visuallyHiddenTextContent, badgeIcon, customProps.children] : [badgeIcon, textContent, visuallyHiddenTextContent, customProps.children];
   return React.createElement('span', { ...customProps, className: badgeClassNames }, ...content);
 };
 

packages/terra-badge/CHANGELOG.md

@@ -4,6 +4,7 @@
 // Themes
 @import './clinical-lowlight-theme/Badge.module';
 @import './orion-fusion-theme/Badge.module';
+@import './redwood-theme/Badge.module';
 
 :local {
   .badge {

packages/terra-badge/src/Badge.jsx

@@ -0,0 +1,142 @@
+:local {
+  .redwood-theme {
+    --terra-badge-border: none;
+    --terra-badge-font-weight: var(--badge-font-weight);
+
+    --terra-badge-tiny-font-size: var(--badge-small-font-size);
+    --terra-badge-small-font-size: var(--badge-small-font-size);
+    --terra-badge-medium-font-size: var(--badge-medium-font-size);
+    --terra-badge-large-font-size: var(--badge-large-font-size);
+    --terra-badge-huge-font-size: var(--badge-huge-font-size);
+
+    --terra-badge-background-color-default: var(--badge-neutral-background-color);
+    --terra-badge-color-default: var(--badge-neutral-font-color);
+
+    --terra-badge-background-color-primary:  var(--badge-information-background-color);
+    --terra-badge-color-primary: var(--badge-information-font-color);
+
+    --terra-badge-background-color-secondary: var(--badge-positive-background-color);
+    --terra-badge-color-secondary: var(--badge-positive-font-color);
+
+    --terra-badge-background-color-positive: var(--badge-positive-background-color);
+    --terra-badge-color-positive: var(--badge-positive-font-color);
+
+    --terra-badge-background-color-negative: var(--badge-negative-background-color);
+    --terra-badge-color-negative: var(--badge-negative-font-color);
+
+    --terra-badge-background-color-warning: var(--badge-warning-background-color);
+    --terra-badge-color-warning: var(--badge-warning-font-color);
+    
+    --terra-badge-background-color-info: var(--badge-information-background-color);
+    --terra-badge-color-info: var(--badge-information-font-color);
+
+    &.badge {
+      font-family: var(--badge-font-family);
+    }
+
+    &.tiny {
+      border-radius: var(--badge-tiny-radius);
+      padding-bottom: var(--badge-tiny-padding-bottom);
+      padding-left: var(--badge-tiny-padding-left);
+      padding-right: var(--badge-tiny-padding-right);
+      padding-top: var(--badge-tiny-padding-top);
+
+      &.is-reversed.has-icon .text {
+        margin-right: var(--badge-tiny-horizontal-gap-padding);
+      }
+    
+      &.has-icon:not(.is-reversed) .text {
+        margin-left: var(--badge-tiny-horizontal-gap-padding);
+      }
+
+      .badge-icon {
+        width: var(--badge-tiny-icon-size) !important;
+        height: var(--badge-tiny-icon-size) !important;
+      }
+    }
+  
+    &.small {
+      border-radius: var(--badge-small-radius);
+      padding-bottom: var(--badge-small-padding-bottom);
+      padding-left: var(--badge-small-padding-left);
+      padding-right: var(--badge-small-padding-right);
+      padding-top: var(--badge-small-padding-top);
+
+      &.is-reversed.has-icon .text {
+        margin-right: var(--badge-small-horizontal-gap-padding);
+      }
+    
+      &.has-icon:not(.is-reversed) .text {
+        margin-left: var(--badge-small-horizontal-gap-padding);
+      }
+
+      .badge-icon {
+        width: var(--badge-small-icon-size) !important;
+        height: var(--badge-small-icon-size) !important;
+      }
+    }
+  
+    &.medium {
+      border-radius: var(--badge-medium-radius);
+      padding-bottom: var(--badge-medium-padding-bottom);
+      padding-left: var(--badge-medium-padding-left);
+      padding-right: var(--badge-medium-padding-right);
+      padding-top: var(--badge-medium-padding-top);
+
+      &.is-reversed.has-icon .text {
+        margin-right: var(--badge-medium-horizontal-gap-padding);
+      }
+    
+      &.has-icon:not(.is-reversed) .text {
+        margin-left: var(--badge-medium-horizontal-gap-padding);
+      }
+
+      .badge-icon {
+        width: var(--badge-medium-icon-size) !important;
+        height: var(--badge-medium-icon-size) !important;
+      }
+    }
+  
+    &.large {
+      border-radius: var(--badge-large-radius);
+      padding-bottom: var(--badge-large-padding-bottom);
+      padding-left: var(--badge-large-padding-left);
+      padding-right: var(--badge-large-padding-right);
+      padding-top: var(--badge-large-padding-top);
+
+      &.is-reversed.has-icon .text {
+        margin-right: var(--badge-large-horizontal-gap-padding);
+      }
+    
+      &.has-icon:not(.is-reversed) .text {
+        margin-left: var(--badge-large-horizontal-gap-padding);
+      }
+
+      .badge-icon {
+        width: var(--badge-large-icon-size) !important;
+        height: var(--badge-large-icon-size) !important;
+      }
+    }
+  
+    &.huge {
+      border-radius: var(--badge-huge-radius);
+      padding-bottom: var(--badge-huge-padding-bottom);
+      padding-left: var(--badge-huge-padding-left);
+      padding-right: var(--badge-huge-padding-right);
+      padding-top: var(--badge-huge-padding-top);
+
+      &.is-reversed.has-icon .text {
+        margin-right: var(--badge-huge-horizontal-gap-padding);
+      }
+    
+      &.has-icon:not(.is-reversed) .text {
+        margin-left: var(--badge-huge-horizontal-gap-padding);
+      }
+
+      .badge-icon {
+        width: var(--badge-huge-icon-size) !important;
+        height: var(--badge-huge-icon-size) !important;
+      }
+    }
+  }
+}

packages/terra-badge/src/Badge.module.scss

@@ -1,6 +1,7 @@
 // Themes
 @import './clinical-lowlight-theme/Base';
 @import './orion-fusion-theme/Base';
+@import './redwood-theme/Base';
 
 html {
   background-attachment: var(--terra-base-background-attachment);

packages/terra-badge/src/redwood-theme/Badge.module.scss

@@ -0,0 +1,9 @@
+:global {
+  .redwood-theme {
+    --terra-base-background-color: var(--base-background-color);
+    --terra-base-font-family: var(--base-font-family);
+    --terra-base-font-size: var(--base-font-size);
+    --terra-base-color: var(--base-text-color);
+    --terra-base-line-height: var(--base-line-height);
+  }
+}

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_medium/badge-spec/default.png

@@ -1,6 +1,7 @@
 //Themes
 @import './clinical-lowlight-theme/Card.module';
 @import './orion-fusion-theme/Card.module';
+@import './redwood-theme/Card.module';
 
 :local {
   .card {

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_medium/badge-spec/icons.png

@@ -1,6 +1,7 @@
 // Themes
 @import './orion-fusion-theme/CardBody.module';
 @import './clinical-lowlight-theme/CardBody.module';
+@import './redwood-theme/CardBody.module';
 
 :local {
   .vertical-padding {

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_medium/badge-spec/intent.png

@@ -0,0 +1,9 @@
+:local {
+  .redwood-theme {
+    --terra-card-background-color: var(--card-background-color);
+    --terra-card-border-radius: var(--card-border-radius);
+    --terra-card-border: var(--card-border);
+    --terra-card-color: inherit;
+    --terra-card-raised-box-shadow: var(--card-box-shadow);
+  }
+}

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_medium/badge-spec/size.png

@@ -0,0 +1,8 @@
+:local {
+  .redwood-theme {
+    --terra-card-padding-bottom: var(--card-padding-bottom);
+    --terra-card-padding-left: var(--card-padding-left);
+    --terra-card-padding-right: var(--card-padding-right);
+    --terra-card-padding-top: var(--card-padding-top);
+  }
+}

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_medium/badge-spec/visually_hidden_text.png

@@ -1,6 +1,7 @@
 // Themes
 @import './clinical-lowlight-theme/Divider.module';
 @import './orion-fusion-theme/Divider.module';
+@import './redwood-theme/Divider.module';
 
 :local {
   @mixin terra-divider {

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_tiny/badge-spec/default.png

@@ -0,0 +1,13 @@
+:local {
+  .redwood-theme {
+    --terra-divider-border-color: var(--divider-border-color);
+    --terra-divider-border-top-width: var(--divider-border-size);
+    --terra-divider-text-color: var(--divider-text-color);
+    --terra-divider-text-font-size: var(--divider-font-size);
+    --terra-divider-text-font-weight: var(--divider-font-weight);
+    --terra-divider-text-line-height: 1.231;
+    --terra-divider-text-padding-left: var(--divider-padding-left);
+    --terra-divider-text-padding-right: var(--divider-padding-right);
+  }
+}
+

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_tiny/badge-spec/icons.png

@@ -1,6 +1,7 @@
 // Themes
 @import './clinical-lowlight-theme/Hyperlink.module';
 @import './orion-fusion-theme/Hyperlink.module';
+@import './redwood-theme/Hyperlink.module';
 
 :local {
   .hyperlink {

packages/terra-badge/tests/wdio/__snapshots__/reference/redwood-theme/en/chrome_tiny/badge-spec/intent.png

@@ -0,0 +1,47 @@
+@import 'terra-theme-properties/lib/scss/redwood-mixins';
+
+:local {
+  .redwood-theme {
+    --terra-hyperlink-color: var(--link-color);
+    --terra-hyperlink-text-decoration: var(--hyperlink-text-decoration);
+    --terra-hyperlink-visited-color: var(--link-visited-color);
+    --terra-hyperlink-visited-focus-color: var(--link-visited-color);
+    --terra-hyperlink-hover-background-color: transparent;
+    --terra-hyperlink-hover-color: var(--link-hover-color);
+    --terra-hyperlink-hover-text-decoration: underline;
+    --terra-hyperlink-focus-background-color: var(--hyperlink-text-decoration);
+    --terra-hyperlink-focus-border-radius: 0;
+    --terra-hyperlink-focus-box-shadow: none;
+    --terra-hyperlink-focus-color: var(--link-color);
+    --terra-hyperlink-focus-text-decoration: var(--hyperlink-text-decoration);
+    --terra-hyperlink-active-color: var(--link-active-color);
+    --terra-hyperlink-disabled-color: var(--link-disabled-color);
+    --terra-hyperlink-disabled-text-decoration: none;
+    --terra-hyperlink-underline-hidden-color: var(--link-color);
+    --terra-hyperlink-underline-hidden-focus-color: var(--link-color);
+    --terra-hyperlink-underline-hidden-hover-color: var(--link-hover-color);
+    --terra-hyperlink-underline-hidden-visited-color: var(--link-visited-color);
+    --terra-hyperlink-underline-hidden-visited-focus-color: var(--link-visited-color);
+    --terra-hyperlink-icon-font-size: var(--hyperlink-icon-size);
+    --terra-hyperlink-icon-margin-left: var(--hyperlink-horizontal-gap-padding);
+    --terra-hyperlink-audio-icon-font-size: var(--hyperlink-icon-size);
+    --terra-hyperlink-document-icon-margin-left:  var(--hyperlink-horizontal-gap-padding);
+    --terra-hyperlink-external-icon-bottom: 0;
+    --terra-hyperlink-external-icon-font-size: var(--hyperlink-icon-size);
+    --terra-hyperlink-external-icon-margin-left:  var(--hyperlink-horizontal-gap-padding);
+    --terra-hyperlink-image-icon-bottom: -0.08333em;
+    --terra-hyperlink-video-icon-bottom: -0.08333em;
+
+    &.hyperlink {
+      font-size: var(--hyperlink-font-size);
+      padding-bottom: var(--hyperlink-padding-bottom);
+      padding-left: var(--hyperlink-padding-left);
+      padding-right: var(--hyperlink-padding-right);
+      padding-top: var(--hyperlink-padding-top);
+
+      &:focus {
+        @include terra-focus-indicator();
+      }
+    }
+  }
+}