fix(components): fix and standardize typography

webex · Feb 23, 2022 · eb73d21 · eb73d21
1 parent 34b3eda
commit eb73d21
Show file tree

Hide file tree

Showing 37 changed files with 94 additions and 128 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,5 +1,11 @@
 <link rel="preload" href="./video/ongoing-meeting.mp4" as="video" />
 <style>
+  html, body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
   #root {
     display: flex;
     height: 100%;

diff --git a/src/components/WebexActivity/WebexActivity.scss b/src/components/WebexActivity/WebexActivity.scss
@@ -16,7 +16,6 @@ $content-left-margin: 3.5rem; //avatar width + margin
     align-items: flex-start;
     min-width: 15.625rem !important;
     margin-left: $content-left-margin;
-    font-size: 1rem;
     color: var(--wxc-text-color);
     word-wrap: break-word;
     white-space: pre-wrap;

diff --git a/src/components/WebexActivityStream/Greeting.scss b/src/components/WebexActivityStream/Greeting.scss
@@ -9,12 +9,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-greeting;
   text-align: center;
   color: var(--wxc-text-color);
 
-  .#{$C}__header {
-    @include header-fonts;
-  }
-
   .#{$C}__description {
-    @include body-fonts;
     padding: 0 3.125rem;
   }
 }
diff --git a/src/components/WebexActivityStream/TimeRuler.scss b/src/components/WebexActivityStream/TimeRuler.scss
@@ -7,7 +7,6 @@
   width: 100%;
   padding: 0 3rem;
   margin: 0.5rem 0;
-  font-family: "CiscoSansTT Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
 
   &::after, &::before {
     border-top: 0.06rem solid currentColor;

diff --git a/...ponents/WebexInterstitialMeeting/__snapshots__/WebexInterstitialMeeting.stories.storyshot b/...ponents/WebexInterstitialMeeting/__snapshots__/WebexInterstitialMeeting.stories.storyshot
@@ -66,11 +66,12 @@ Array [
       <div
         className="wxc wxc-meeting-info wxc-interstitial-meeting__info"
       >
-        <h2
-          className="wxc-meeting-info__title"
+        <h5
+          className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+          style={Object {}}
         >
           Video Disabled
-        </h2>
+        </h5>
       </div>
       <div
         className="wxc-interstitial-meeting__interstitial-media-container"
@@ -152,11 +153,12 @@ Array [
       <div
         className="wxc wxc-meeting-info wxc-interstitial-meeting__info"
       >
-        <h2
-          className="wxc-meeting-info__title"
+        <h5
+          className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+          style={Object {}}
         >
           Interstitial
-        </h2>
+        </h5>
       </div>
       <div
         className="wxc-interstitial-meeting__interstitial-media-container"

diff --git a/src/components/WebexMediaAccess/WebexMediaAccess.jsx b/src/components/WebexMediaAccess/WebexMediaAccess.jsx
@@ -1,7 +1,7 @@
 import React, {JSX, useContext} from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../generic/Icon/Icon';
-import {Button} from '../generic';
+import {Button, Title} from '../generic';
 import webexComponentClasses from '../helpers';
 import {useMeeting} from '../hooks';
 import {AdapterContext} from '../hooks/contexts';
@@ -57,7 +57,7 @@ export default function WebexMediaAccess({
     <div className={cssClasses} style={style}>
       {logo && <div className={sc('logo-container')}>{logo}</div>}
       <Icon name={screen.icon} size={48} ariaLabel={screen.iconLabel} />
-      <h2 className={sc('title')}>{screen.title}</h2>
+      <Title type="subsection" className={sc('title')}>{screen.title}</Title>
       <p className={sc('body')}>
         Select
         {' '}

diff --git a/src/components/WebexMediaAccess/WebexMediaAccess.scss b/src/components/WebexMediaAccess/WebexMediaAccess.scss
@@ -7,18 +7,14 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-media-access;
   justify-content: center;
   background: var(--wxc-primary-background);
   color: var(--wxc-text-color);
-  font-family: $brand-font-regular;
 
   .#{$C}__logo-container {
     position: absolute;
     top: 0;
     left: 0;
   }
   .#{$C}__title {
-    margin-top: 0.688rem;
-    font-size: 1rem;
-    font-weight: normal;
-    font-family: #{$brand-font-medium};
+    margin-top: 0.5rem;
   }
 
   .#{$C}__body {

diff --git a/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot b/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot
@@ -24,11 +24,12 @@ Array [
         d="M43.5779 13.9478C43.1434 13.6776 42.6468 13.5236 42.1358 13.5006C41.6247 13.4775 41.1162 13.5861 40.6592 13.8159C40.613 13.8394 40.5684 13.8643 40.5244 13.8921L36.0039 16.7672V15.001C36.0016 13.0126 35.2106 11.1063 33.8046 9.70026C32.3986 8.29424 30.4923 7.50331 28.5039 7.50098H10.5039C8.5155 7.50331 6.6092 8.29424 5.20319 9.70026C3.79717 11.1063 3.00624 13.0126 3.00391 15.001V33.001C3.00624 34.9894 3.79717 36.8957 5.20318 38.3017C6.6092 39.7077 8.5155 40.4986 10.5039 40.501H28.5039C30.4923 40.4986 32.3986 39.7077 33.8046 38.3017C35.2106 36.8957 36.0016 34.9894 36.0039 33.001V31.2338L40.5244 34.107C40.5676 34.1348 40.6123 34.1597 40.6577 34.1832C41.115 34.4121 41.6233 34.5203 42.1342 34.4975C42.6451 34.4747 43.1417 34.3217 43.5768 34.0529C44.012 33.7842 44.3711 33.4087 44.6203 32.962C44.8694 32.5154 45.0002 32.0125 45.0002 31.501V16.4995C45.002 15.9879 44.8722 15.4844 44.6231 15.0375C44.374 14.5906 44.014 14.2153 43.5779 13.9478ZM33.0039 33.001C33.0026 34.1941 32.5281 35.3379 31.6844 36.1815C30.8408 37.0252 29.697 37.4997 28.5039 37.501H10.5039C9.31083 37.4997 8.167 37.0252 7.32336 36.1815C6.47973 35.3379 6.00521 34.1941 6.00391 33.001V15.001C6.00521 13.8079 6.47973 12.6641 7.32336 11.8204C8.167 10.9768 9.31083 10.5023 10.5039 10.501H28.5039C29.697 10.5023 30.8408 10.9768 31.6844 11.8204C32.5281 12.6641 33.0026 13.8079 33.0039 15.001V33.001ZM36.0039 27.6794V20.3222L42.0002 16.5083L42.001 31.4907L36.0039 27.6794Z"
       />
     </svg>
-    <h2
-      className="wxc-media-access__title"
+    <h5
+      className="wxc wxc-title wxc-media-access__title wxc-title--subsection"
+      style={Object {}}
     >
       Allow access to camera
-    </h2>
+    </h5>
     <p
       className="wxc-media-access__body"
     >
@@ -106,11 +107,12 @@ Array [
         d="M36.0039 41.9996H33.0354C31.2654 42.0434 29.5395 41.4436 28.178 40.3117C26.8165 39.1797 25.9119 37.5923 25.6318 35.844C27.699 35.4611 29.5672 34.3674 30.9128 32.7522C32.2585 31.1369 32.9969 29.102 33.0002 26.9996V11.9996C33.0002 9.61269 32.052 7.3235 30.3642 5.63567C28.6764 3.94785 26.3872 2.99963 24.0002 2.99963C21.6133 2.99963 19.3241 3.94785 17.6363 5.63567C15.9485 7.3235 15.0002 9.61269 15.0002 11.9996V26.9996C15.0039 29.1419 15.7712 31.2126 17.1642 32.8401C18.5572 34.4676 20.4847 35.5452 22.6007 35.8795C22.8833 38.1993 23.9408 40.3558 25.6018 41.9996H12.0039C11.6061 41.9996 11.2246 42.1577 10.9432 42.439C10.6619 42.7203 10.5039 43.1018 10.5039 43.4996C10.5039 43.8975 10.6619 44.279 10.9432 44.5603C11.2246 44.8416 11.6061 44.9996 12.0039 44.9996H36.0039C36.4017 44.9996 36.7833 44.8416 37.0646 44.5603C37.3459 44.279 37.5039 43.8975 37.5039 43.4996C37.5039 43.1018 37.3459 42.7203 37.0646 42.439C36.7833 42.1577 36.4017 41.9996 36.0039 41.9996ZM18.0002 26.9996V11.9996C18.0002 10.4083 18.6324 8.88217 19.7576 7.75695C20.8828 6.63173 22.4089 5.99959 24.0002 5.99959C25.5915 5.99959 27.1177 6.63173 28.2429 7.75695C29.3681 8.88217 30.0002 10.4083 30.0002 11.9996V26.9996C30.0002 28.5909 29.3681 30.117 28.2429 31.2422C27.1177 32.3674 25.5915 32.9996 24.0002 32.9996C22.4089 32.9996 20.8828 32.3674 19.7576 31.2422C18.6324 30.117 18.0002 28.5909 18.0002 26.9996Z"
       />
     </svg>
-    <h2
-      className="wxc-media-access__title"
+    <h5
+      className="wxc wxc-title wxc-media-access__title wxc-title--subsection"
+      style={Object {}}
     >
       Allow access to microphone
-    </h2>
+    </h5>
     <p
       className="wxc-media-access__body"
     >

diff --git a/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot b/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
@@ -696,11 +696,12 @@ Array [
           <div
             className="wxc wxc-meeting-info wxc-interstitial-meeting__info"
           >
-            <h2
-              className="wxc-meeting-info__title"
+            <h5
+              className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+              style={Object {}}
             >
               Interstitial
-            </h2>
+            </h5>
           </div>
           <div
             className="wxc-interstitial-meeting__interstitial-media-container"
@@ -1211,11 +1212,12 @@ Array [
           <div
             className="wxc wxc-meeting-info wxc-interstitial-meeting__info"
           >
-            <h2
-              className="wxc-meeting-info__title"
+            <h5
+              className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+              style={Object {}}
             >
               Password required
-            </h2>
+            </h5>
           </div>
           <div
             className="wxc-interstitial-meeting__interstitial-media-container"
@@ -1639,11 +1641,12 @@ Array [
         <div
           className="wxc wxc-meeting-info wxc-waiting-for-host__info"
         >
-          <h2
-            className="wxc-meeting-info__title"
+          <h5
+            className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+            style={Object {}}
           >
             Waiting for host
-          </h2>
+          </h5>
         </div>
         <div
           className="wxc-waiting-for-host__content"

diff --git a/src/components/WebexMeetingControl/WebexMeetingControl.scss b/src/components/WebexMeetingControl/WebexMeetingControl.scss
@@ -3,7 +3,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-control;
 .#{$C} {
   display: inline-block;
   color: var(--wxc-text-color);
-  font-family: $brand-font-regular;
 
   &--as-item {
     display: flex;
@@ -17,7 +16,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-control;
     .#{$C}__item-button-text {
       flex: 1;
       margin-left: 0.75rem;
-      font-size: 1rem;
       line-height: 150%;
     }
   }

diff --git a/src/components/WebexMeetingGuestAuthentication/WebexMeetingGuestAuthentication.scss b/src/components/WebexMeetingGuestAuthentication/WebexMeetingGuestAuthentication.scss
@@ -27,6 +27,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-guest-authentication;
   }
 
   .#{$C}__title {
+    font-family: $brand-font-medium;
     font-size: 1.25rem;
     line-height: 1.875rem;
     max-width: 100%;

diff --git a/src/components/WebexMeetingHostAuthentication/WebexMeetingHostAuthentication.scss b/src/components/WebexMeetingHostAuthentication/WebexMeetingHostAuthentication.scss
@@ -27,6 +27,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-host-authentication;
   }
 
   .#{$C}__title {
+    font-family: $brand-font-medium;
     font-size: 1.25rem;
     line-height: 1.875rem;
     max-width: 100%;

diff --git a/src/components/WebexMeetingInfo/WebexMeetingInfo.jsx b/src/components/WebexMeetingInfo/WebexMeetingInfo.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {format} from 'date-fns';
 import Spinner from '../generic/Spinner/Spinner';
+import {Title} from '../generic';
 
 import webexComponentClasses from '../helpers';
 import {TABLET, DESKTOP} from '../breakpoints';
@@ -57,7 +58,7 @@ export default function WebexMeetingInfo({className, meetingID, style}) {
 
     infoComponent = (
       <>
-        <h2 className={sc('title')}>{displayTitle}</h2>
+        <Title type="subsection" className={sc('title')}>{displayTitle}</Title>
         {
           startTime
           && endTime

diff --git a/src/components/WebexMeetingInfo/WebexMeetingInfo.scss b/src/components/WebexMeetingInfo/WebexMeetingInfo.scss
@@ -6,10 +6,8 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-info;
   justify-content: center;
   flex-direction: column;
   color: var(--wxc-text-color);
-  font-family: $brand-font-regular;
 
   .#{$C}__title {
-    font-size: 1rem;
     text-align: center;
     margin: 0;
   }

diff --git a/src/components/WebexMeetingInfo/__snapshots__/WebexMeetingInfo.stories.storyshot b/src/components/WebexMeetingInfo/__snapshots__/WebexMeetingInfo.stories.storyshot
@@ -5,11 +5,12 @@ Array [
   <div
     className="wxc wxc-meeting-info"
   >
-    <h2
-      className="wxc-meeting-info__title"
+    <h5
+      className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+      style={Object {}}
     >
       Barbara German
-    </h2>
+    </h5>
   </div>,
   <video
     autoPlay={true}
@@ -39,11 +40,12 @@ Array [
   <div
     className="wxc wxc-meeting-info"
   >
-    <h2
-      className="wxc-meeting-info__title"
+    <h5
+      className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+      style={Object {}}
     >
       No Meeting Information
-    </h2>
+    </h5>
   </div>,
   <video
     autoPlay={true}
@@ -111,11 +113,12 @@ Array [
   <div
     className="wxc wxc-meeting-info"
   >
-    <h2
-      className="wxc-meeting-info__title"
+    <h5
+      className="wxc wxc-title wxc-meeting-info__title wxc-title--subsection"
+      style={Object {}}
     >
       In meeting
-    </h2>
+    </h5>
   </div>,
   <video
     autoPlay={true}

diff --git a/src/components/WebexMember/WebexMember.scss b/src/components/WebexMember/WebexMember.scss
@@ -19,7 +19,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-member;
   }
 
   .#{$C}__name {
-    @include body-fonts;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/components/WebexMemberRoster/WebexMemberRoster.scss b/src/components/WebexMemberRoster/WebexMemberRoster.scss
@@ -11,9 +11,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-member-roster;
 
 
   .#{$C}__section-title {
-    @include body-fonts;
     color: var(--wxc-secondary-text-color);
-    font-family: $brand-font-regular;
     font-size: 0.875rem;
     line-height: 1.375rem;
     margin: 0;
@@ -25,7 +23,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-member-roster;
     color: var(--wxc-warning-color);
     display: flex;
     align-items: flex-start;
-    font-family: $brand-font-regular;
     font-size: 0.875rem;
     line-height: 1.375rem;
     margin-top: 0.75rem;
@@ -46,8 +43,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-member-roster;
 
     .#{$C}__title {
       font-family: $brand-font-bold;
-      font-size: 1rem;
-      line-height: 1.5rem;
       margin: 0;
       flex: 1;
     }

diff --git a/src/components/WebexNoMedia/WebexNoMedia.jsx b/src/components/WebexNoMedia/WebexNoMedia.jsx
@@ -62,7 +62,7 @@ export default function WebexNoMedia({className, style, media}) {
   return (
     <div className={cssClasses} style={style}>
       <Icon className={sc('icon-media-issue')} name={screen.icon} />
-      <Title type="subsection" className={sc('title')}>{screen.title}</Title>
+      <Title type="section" className={sc('title')}>{screen.title}</Title>
       <div className={sc('body')}>
         {screen.message}
       </div>

diff --git a/src/components/WebexNoMedia/WebexNoMedia.scss b/src/components/WebexNoMedia/WebexNoMedia.scss
@@ -6,11 +6,9 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-no-media;
   align-items: center;
   font-size: 0.875rem;
   color: var(--wxc-text-color);
-  font-family: $brand-font-regular;
 
   .#{$C}__icon-media-issue {
     fill: transparent;
-    margin-bottom: 1.25rem;
   }
 
   .#{$C}__title {

diff --git a/src/components/WebexNoMedia/__snapshots__/WebexNoMedia.stories.storyshot b/src/components/WebexNoMedia/__snapshots__/WebexNoMedia.stories.storyshot
@@ -41,7 +41,7 @@ Array [
       </defs>
     </svg>
     <h5
-      className="wxc wxc-title wxc-no-media__title wxc-title--subsection"
+      className="wxc wxc-title wxc-no-media__title wxc-title--section"
       style={Object {}}
     >
       Can't access camera
@@ -150,7 +150,7 @@ Array [
       </defs>
     </svg>
     <h5
-      className="wxc wxc-title wxc-no-media__title wxc-title--subsection"
+      className="wxc wxc-title wxc-no-media__title wxc-title--section"
       style={Object {}}
     >
       Can't access microphone

diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.scss b/src/components/WebexRemoteMedia/WebexRemoteMedia.scss
@@ -10,7 +10,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-remote-media;
   align-items: center;
 
   .#{$C}__media-error {
-    font-family: $brand-font-bold;
+    font-family: $brand-font-medium;
     font-size: 0.875rem;
     line-height: 1.3125rem;
     color: var(--wxc-text-color);

diff --git a/src/components/WebexSettings/Tabs.scss b/src/components/WebexSettings/Tabs.scss
@@ -14,7 +14,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-tabs;
         color: var(--wxc-tab--normal--color);
         border: var(--wxc-tab--normal--border);
         cursor: pointer;
-        font-family: $brand-font-bold;
+        font-family: $brand-font-medium;
         font-size: 0.875rem;
         line-height: 1.375rem;
         padding: 0.1875rem 1rem;