chore(ui-top-nav-bar): integrate useStyle into SubNav to aid testing

Author: joyenjoyer

packages/ui-top-nav-bar/src/SubNav/index.tsx

@@ -23,9 +23,9 @@
  */
 
 /** @jsx jsx */
-import { jsx, withFunctionalStyle } from '@instructure/emotion'
+import { jsx, useStyle, withFunctionalStyle } from '@instructure/emotion'
 
-import { generateStyles } from './styles'
+import { generateStyle } from './styles'
 import { Link } from '@instructure/ui-link'
 import { SubNavProps, MenuItem } from './props'
 
@@ -34,11 +34,13 @@ import { SubNavProps, MenuItem } from './props'
 category: components
 ---
  **/
-const SubNav = ({ menuItems, styles }: SubNavProps) => {
+const SubNav = ({ menuItems }: SubNavProps) => {
+  const styles = useStyle({ generateStyle, params: {} })
+
   return (
-    <div style={styles.container}>
+    <div css={styles.container}>
       {menuItems.map((item: MenuItem) => (
-        <div style={styles.linkContainer(item)} key={item.title}>
+        <div css={styles.linkContainer(item)} key={item.title}>
           <Link
             key={item.title}
             href={item.href}
@@ -54,9 +56,5 @@ const SubNav = ({ menuItems, styles }: SubNavProps) => {
   )
 }
 
-const SC: any = withFunctionalStyle(generateStyles)(SubNav)
-
-SC.displayName = 'SubNav'
-
-export { SC as SubNav }
-export default SC
+export { SubNav }
+export default SubNav

packages/ui-top-nav-bar/src/SubNav/styles.tsx

@@ -21,9 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { SubNavProps } from './props'
 
-const generateStyles = (_props: SubNavProps, theme: any) => {
+import { ComponentStyle } from '@instructure/emotion'
+
+type SubNavStyle = ComponentStyle
+
+const generateStyle = (theme: any, params: any): SubNavStyle => {
   return {
     container: {
       marginLeft: '20px',
@@ -57,4 +60,4 @@ const generateStyles = (_props: SubNavProps, theme: any) => {
   }
 }
 
-export { generateStyles }
+export { generateStyle }