fix(Momentum): remove Momentum ui and create ListSeparator

BenjaminGolya · cipak · commit b30f32b6c385 · 2021-09-08T18:53:59.000+03:00
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,7 +2,6 @@ import React from 'react';
 import mockData from '../src/data';
 import {WebexJSONAdapter} from '../src/adapters';
 import {WebexDataProvider} from '../src/components';
-import '@momentum-ui/core/css/momentum-ui.min.css';
 import '../src/styles/index.scss';
 
 export const decorators = [
diff --git a/README.md b/README.md
@@ -70,51 +70,6 @@ To learn more on the Webex Widgets head to its Github repository at
 https://github.com/webex/widgets.
 
 ## Usage
-
-### Styles
-
-In order to properly style Webex Components, we need to import all the fonts, icons, images and core _CSS_ manually.
-You will need to add [Momentum UI](https://momentum.design) styles in addition to the components' styles.
-[Momentum UI](https://momentum.design) is Webex design system.
-
-#### Momentum UI Styles
-
-Momentum UI should be installed in your application as a peer dependency of the Webex Components. If you followed the command in the [install section](#install) it should already be your dependencies. There are two ways to include Momentum UI in your application:
-
-##### CSS
-
-1. Copy `@momentum-ui/core/fonts` directory to the fonts or assets directory of your app.
-If you don't have a directory, create a public directory from which the fonts to be served
-2. Copy `@momentum-ui/core/css/momentum-ui.min.css` to the styles or assets directory of your app
-3. In the `<head>` of your HTML, reference the location of your `momentum-ui.min.css`
-
-    ```HTML
-    <link rel="stylesheet" type="text/css" href="<path to>/momentum-ui.min.css">
-    ```
-
-##### Sass
-
-1. Copy `@momentum-ui/icons/fonts` directory to the fonts or assets directory of your app
-2. Add `$brand-font-folder`, `$icon-font-path`, and `$images-path` variables to your app's "variables.scss" file
-
-    ```JS
-    $brand-font-folder: '<path to fonts directory>';
-    $icon-font-path: '<path to fonts directory>';
-    $images-path: '<path to images directory>';
-    ```
-
-3. Import `@momentum-ui/core/scss/momentum-ui-components.scss` into your main entry Sass file _after_ the variables
-
-    ```CSS
-    ...
-
-    @import '@momentum-ui/core/scss/momentum-ui-components';
-    ```
-
-4. Compile your Sass using your static compiler or bundler
-
-For more on Momentum UI, you can visit [Momentum UI's repository](https://github.com/momentum-design/momentum-ui/tree/master/core)
-
 #### Webex Components Styles
 
 There are two ways to do this:
@@ -129,27 +84,17 @@ import '@webex/components/dist/css/webex-components.css';
 ...
 ```
 
-> *Important:* Import Momentum UI styles before importing the Webex Component ones.
-> Webex Components may override certain Momentum UI styles
-
 ##### HTML
 
 In the `<head>` of your `index.html`, add the following imports:
 
 ```html
 <head>
   ...
-
-  <!-- If you added Momentum UI via standard CSS -->
-  <link rel="stylesheet" type="text/css" href="<path to>/@momentum-ui/core/css/momentum-ui.min.css" />
-
   <link rel="stylesheet" type="text/css" href="node_modules/@webex/components/dist/css/webex-components.css" />
 </head>
 ```
 
-> *Important:* Import Momentum UI styles before importing the Webex Component ones.
-> Webex Components may override certain Momentum UI styles
-
 ### Adapters
 
 Webex Components are self-updating, meaning, they know how to fetch the data they need.
diff --git a/dependencies.md b/dependencies.md
@@ -10,7 +10,6 @@ This guide describes the dependencies of this repository and their purpose.
   - [date-fns](#date-fns)
   - [Resize Observer](#resize-observer)
 - [Peer Dependencies](#peer-dependencies)
-  - [Momentum UI](#momentum-ui)
   - [React](#react)
   - [RxJS](#rxjs)
 - [Development Dependencies](#development-dependencies)
@@ -70,15 +69,6 @@ Usually peer dependencies are packages that would-be users would already have or
 as part of their own applications, and hence, no need to include them as part of
 the library code.
 
-### Momentum UI
-
-[Momentum UI](https://momentum.design) is Webex design system.
-
-#### Momentum UI Packages
-
-- [@momentum-ui/react](https://www.npmjs.com/package/@momentum-ui/react):
-  Momentum UI's [React](https://reactjs.org)'s component library
-
 ### React
 
 [React](https://reactjs.org) is a library for building component-based user interfaces.
diff --git a/docs/bundle-analysis-esm.html b/docs/bundle-analysis-esm.html
diff --git a/docs/bundle-analysis-umd.html b/docs/bundle-analysis-umd.html
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
   ],
   "peerDependencies": {
     "@babel/runtime": "^7.11.2",
-    "@momentum-ui/react": "^23.17.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/rollup.config.js b/rollup.config.js
@@ -40,11 +40,6 @@ const plugins = [
   }),
   copy({
     targets: [
-      // Copying Momentum's core CSS since there is no hosted version
-      {
-        src: 'node_modules/@momentum-ui/core/css/momentum-ui.min.css',
-        dest: 'dist/css',
-      },
       {
         src: ['src/themes/dark', 'src/themes/light'],
         dest: 'dist/themes',
@@ -59,15 +54,13 @@ const plugins = [
 
 // Peer dependencies to exclude from bundle
 const external = [
-  /^@momentum-ui/,
   /^prop-types/,
   /^react/,
   /^rxjs/,
 ];
 
 // UMD global/window names for peer dependencies
 const globals = {
-  '@momentum-ui/react': 'momentum-ui-react',
   'prop-types': 'PropTypes',
   react: 'React',
   'react-dom': 'ReactDOM',
diff --git a/src/components/WebexActivityStream/TimeRuler.jsx b/src/components/WebexActivityStream/TimeRuler.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ListSeparator} from '@momentum-ui/react';
 import {
   format,
   isSameWeek,
@@ -55,7 +54,9 @@ export default function TimeRuler({className, date, style}) {
   const cssClasses = webexComponentClasses('time-ruler', className);
 
   return (
-    <ListSeparator className={cssClasses} style={style} role="listitem" text={text} />
+    <div className={cssClasses} style={style}>
+      <span className="md-list-separator__text">{text}</span>
+    </div>
   );
 }
 
diff --git a/src/components/WebexActivityStream/TimeRuler.scss b/src/components/WebexActivityStream/TimeRuler.scss
@@ -1,3 +1,17 @@
 .#{$WEBEX_COMPONENTS_CLASS_PREFIX}-time-ruler {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  color: $wxc-gray-20;
+  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;
+    content: '';
+    flex: 1 1 auto;
+  }
 }
diff --git a/src/components/WebexActivityStream/WebexActivityStream.scss b/src/components/WebexActivityStream/WebexActivityStream.scss
@@ -13,8 +13,8 @@
     height: 10px;
     margin: 1rem auto;
     border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
+    background-color: $wxc-black-alpha-20;
+    color: $wxc-black-alpha-20;
     animation: dotFlashing 1s infinite linear alternate;
     animation-delay: .5s;
   }
@@ -31,8 +31,8 @@
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
+    background-color: $wxc-black-alpha-20;
+    color: $wxc-black-alpha-20;
     animation: dotFlashing 1s infinite alternate;
     animation-delay: 0s;
   }
@@ -42,19 +42,19 @@
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
+    background-color: $wxc-black-alpha-20;
+    color: $wxc-black-alpha-20;
     animation: dotFlashing 1s infinite alternate;
     animation-delay: 1s;
   }
 
   @keyframes dotFlashing {
     0% {
-      background-color: $md-gray-30;
+      background-color: $wxc-black-alpha-20;
     }
     50%,
     100% {
-      background-color: $md-gray-10;
+      background-color: $wxc-gray-10;
     }
   }
 }
diff --git a/src/components/WebexActivityStream/__snapshots__/WebexActivityStream.stories.storyshot b/src/components/WebexActivityStream/__snapshots__/WebexActivityStream.stories.storyshot
@@ -538,18 +538,12 @@ Array [
       </div>
     </div>
     <div
-      className="md-list-separator wxc-time-ruler"
-      role="listitem"
+      className="wxc-time-ruler"
     >
       <span
-        className="md-list-separator__container"
+        className="md-list-separator__text"
       >
-        <span
-          className="md-list-separator__text"
-          style={Object {}}
-        >
-          Yesterday
-        </span>
+        Yesterday
       </span>
     </div>
     <div
@@ -603,18 +597,12 @@ Array [
       </div>
     </div>
     <div
-      className="md-list-separator wxc-time-ruler"
-      role="listitem"
+      className="wxc-time-ruler"
     >
       <span
-        className="md-list-separator__container"
+        className="md-list-separator__text"
       >
-        <span
-          className="md-list-separator__text"
-          style={Object {}}
-        >
-          Today
-        </span>
+        Today
       </span>
     </div>
     <div
diff --git a/src/components/WebexMeetingControl/WebexMeetingControl.jsx b/src/components/WebexMeetingControl/WebexMeetingControl.jsx
@@ -39,7 +39,7 @@ function renderButton(action, display, style, showText, asItem) {
   if (asItem) {
     output = (
       /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-      <div onClick={action} title={tooltip} role="button" tabIndex="0">
+      <div onClick={action} title={tooltip} role="button" tabIndex="0" style={style}>
         {icon && <Icon name={icon} size={14} className="item-button-icon" />}
         <span className="item-button-text">{text}</span>
       </div>
diff --git a/src/components/WebexMember/WebexMember.scss b/src/components/WebexMember/WebexMember.scss
@@ -24,7 +24,7 @@
     margin-top: 0.063rem;
 
     .guest {
-      color: $md-gray-70;
+      color: $wxc-gray-70;
     }
   }
 
diff --git a/src/components/generic/_generic.scss b/src/components/generic/_generic.scss
@@ -6,3 +6,19 @@
 @import 'Title/Title';
 @import 'OptionsList/OptionsList';
 @import 'Select/Select';
+
+html, body {
+  height: 100%;
+}
+
+body {
+  @include body-fonts;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  cursor: auto;
+}
+
+img {
+  width: 100%;
+}
diff --git a/src/storyshots.test.js b/src/storyshots.test.js
@@ -9,12 +9,6 @@ jest.mock('./components/hooks/useActivityScroll');
 // useElementDimensions uses Resize Observer API which expects a real Element
 jest.mock('./components/hooks/useElementDimensions');
 
-// Mock react-uid to maintain a fixed ID for Momentum UI buttons
-jest.mock('react-uid', () => ({
-  __esModule: true,
-  UIDConsumer: ({children}) => children('md-button-0', 'md-button-0'),
-}));
-
 /**
  * Returns a mock DOM ref object for use of snapshot tests.
  *
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -5,29 +5,6 @@ $WEBEX_MEETING_MIN_HEIGHT: 25rem;
 $WEBEX_MEETING_MIN_WIDTH: 17rem; // Standard small phone width is 20rem, leaving some padding
 $brand-font-folder: '../assets/fonts';
 
-// Momentum UI Colors
-// See https://momentum.design/tokens/color
-$md-white: #FFFFFF !default;
-
-$md-gray-05: #F7F7F7 !default;
-$md-gray-10: #EDEDED !default;
-$md-gray-20: #DEDEDE !default;
-$md-gray-30: #CCCCCC !default;
-$md-gray-40: #B2B2B2 !default;
-$md-gray-50: #949494 !default;
-$md-gray-60: #707070 !default;
-$md-gray-70: #545454 !default;
-$md-gray-80: #3B3B3B !default;
-$md-gray-90: #292929 !default;
-$md-gray-95: #1C1C1C !default;
-$md-gray-100: #121212 !default;
-$md-yellow-40: #FC9D03 !default;
-
-$md-red-60: #D4371C !default;
-
-$md-black-100: #000000;
-
-// Momentum UI Fonts
 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
 $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
diff --git a/src/themes/dark.scss b/src/themes/dark.scss
@@ -73,7 +73,7 @@
   --wxc-button--default--disabled--color: #{$wxc-white-alpha-40};
 
   --wxc-button--ghost--normal--border: none;
-  --wxc-button--ghost--normal--color: #{$md-white};
+  --wxc-button--ghost--normal--color: #{$wxc-white-alpha-100};
 
   --wxc-button--ghost--hover--background: #{$wxc-white-alpha-07};
 

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`margin-top: 0.063rem;`
`25`	`25`
`26`	`26`	`.guest {`
`27`		`- color: $md-gray-70;`
	`27`	`+ color: $wxc-gray-70;`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`