feat: New Box props

packages/fuselage-tokens/typography.js

@@ -26,60 +26,58 @@ const fontMono = [
 ];
 
 export default {
-  h1: {
-    fontFamily: fontSans,
-    fontSize: 22,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 32,
+  fontFamilies: {
+    sans: fontSans,
+    mono: fontMono,
   },
-  s1: {
-    fontFamily: fontSans,
-    fontSize: 16,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 22,
-  },
-  s2: {
-    fontFamily: fontSans,
-    fontSize: 16,
-    fontWeight: 500,
-    letterSpacing: 0,
-    lineHeight: 22,
-  },
-  p1: {
-    fontFamily: fontSans,
-    fontSize: 14,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 20,
-  },
-  p2: {
-    fontFamily: fontSans,
-    fontSize: 14,
-    fontWeight: 500,
-    letterSpacing: 0,
-    lineHeight: 20,
-  },
-  c1: {
-    fontFamily: fontSans,
-    fontSize: 12,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 16,
-  },
-  c2: {
-    fontFamily: fontSans,
-    fontSize: 12,
-    fontWeight: 600,
-    letterSpacing: 0,
-    lineHeight: 16,
-  },
-  micro: {
-    fontFamily: fontSans,
-    fontSize: 10,
-    fontWeight: 600,
-    letterSpacing: 0.2,
-    lineHeight: 12,
+  fontScales: {
+    h1: {
+      fontSize: 22,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 32,
+    },
+    s1: {
+      fontSize: 16,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 22,
+    },
+    s2: {
+      fontSize: 16,
+      fontWeight: 500,
+      letterSpacing: 0,
+      lineHeight: 22,
+    },
+    p1: {
+      fontSize: 14,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 20,
+    },
+    p2: {
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0,
+      lineHeight: 20,
+    },
+    c1: {
+      fontSize: 12,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 16,
+    },
+    c2: {
+      fontSize: 12,
+      fontWeight: 600,
+      letterSpacing: 0,
+      lineHeight: 16,
+    },
+    micro: {
+      fontSize: 10,
+      fontWeight: 600,
+      letterSpacing: 0.2,
+      lineHeight: 12,
+    },
   },
 }

packages/fuselage-tokens/typography.scss

@@ -1,4 +1,4 @@
-$font-sans:
+$-font-sans:
   Inter,
   -apple-system,
   BlinkMacSystemFont,
@@ -15,66 +15,63 @@ $font-sans:
   Arial,
   sans-serif;
 
-$font-mono:
+$-font-mono:
   Menlo,
   Monaco,
   Consolas,
   'Liberation Mono',
   'Courier New',
   monospace;
 
-$typography: (
+$font-families: (
+  sans: $-font-sans,
+  mono: $-font-mono,
+);
+
+$font-scales: (
   h1: (
-    font-family: $font-sans,
     font-size: 22,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 32,
   ),
   s1: (
-    font-family: $font-sans,
     font-size: 16,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 22,
   ),
   s2: (
-    font-family: $font-sans,
     font-size: 16,
     font-weight: 500,
     letter-spacing: 0,
     line-height: 22,
   ),
   p1: (
-    font-family: $font-sans,
     font-size: 14,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 20,
   ),
   p2: (
-    font-family: $font-sans,
     font-size: 14,
     font-weight: 500,
     letter-spacing: 0,
     line-height: 20,
   ),
   c1: (
-    font-family: $font-sans,
     font-size: 12,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 16,
   ),
   c2: (
-    font-family: $font-sans,
     font-size: 12,
     font-weight: 600,
     letter-spacing: 0,
     line-height: 16,
   ),
   micro: (
-    font-family: $font-sans,
     font-size: 10,
     font-weight: 600,
     letter-spacing: 0.2,

packages/fuselage-ui-kit/src/Section.js

@@ -38,7 +38,7 @@ const Fields = ({ fields, parser }) => (
 export const Section = ({ blockId, appId, text, fields, accessory, parser }) => <Block>
   <Grid>
     <Grid.Item>
-      {text && <Box is='span' textStyle='p1' textColor='default'>{parser.text(text)}</Box>}
+      {text && <Box is='span' textStyle='p1' color='default'>{parser.text(text)}</Box>}
       {fields && <Fields fields={fields} parser={parser} />}
     </Grid.Item>
     { accessory && < Flex.Item grow={0}>

packages/fuselage-ui-kit/src/index.js

@@ -124,7 +124,7 @@ class MessageParser extends UiKitParserMessage {
                         ELEMENT_TYPES.PLAIN_TEXT,
                         ELEMENT_TYPES.MARKDOWN,
                       ].includes(element.type) ? (
-                          <Box is='span' textStyle='c1' textColor='info'>
+                          <Box is='span' textStyle='c1' color='info'>
                             {this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
                           </Box>
                         )

packages/fuselage/.storybook/helpers.js

@@ -3,20 +3,20 @@ import React from 'react';
 import { Box, Text } from '../src';
 
 export function PropsVariationSection({ component: Component, common = {}, xAxis = {}, yAxis = {} }) {
-  return <Box is='table' style={{ borderCollapse: 'collapse', margin: '1rem auto' }}>
+  return <Box is='table' marginBlock='x16' marginInline='auto' style={{ borderCollapse: 'collapse' }}>
     <Box is='thead'>
       <Box is='tr'>
         <Box is='th' />
         {Object.keys(xAxis).map((xVariation, key) =>
-          <Box key={key} is='th' textColor='hint' textStyle='c1'>{xVariation}</Box>)}
+          <Box key={key} is='th' color='hint' fontScale='c1'>{xVariation}</Box>)}
       </Box>
     </Box>
     <Box is='tbody'>
       {Object.entries(yAxis).map(([yVariation, yProps], y) => (
         <Box key={y} is='tr'>
-          <Box is='th' textColor='hint' textStyle='c1'>{yVariation}</Box>
-          {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' style={{ margin: 0, padding: '0.5rem 1rem' }}>
-            <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Box is='th' color='hint' fontScale='c1'>{yVariation}</Box>
+          {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' margin='none' paddingBlock='x8' paddingInline='x16'>
+            <Box display='flex' alignItems='center' justifyContent='center'>
               <Component {...common} {...xProps} {...yProps} />
             </Box>
           </Box>)}

packages/fuselage/package.json

@@ -45,7 +45,9 @@
   "dependencies": {
     "@rocket.chat/css-in-js": "^0.8.0",
     "@rocket.chat/fuselage-tokens": "^0.8.0",
-    "@rocket.chat/icons": "^0.8.0"
+    "@rocket.chat/icons": "^0.8.0",
+    "invariant": "^2.2.4",
+    "mem": "^6.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

packages/fuselage/src/components/Accordion/Item.js

@@ -80,18 +80,18 @@ export function Item({
 
   const barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
 
-  return <Box componentClassName='rcx-accordion-item' is='section' className={className} {...props}>
-    {title && <Box componentClassName='rcx-accordion-item__bar' mod-disabled={disabled} {...barProps}>
-      <Box componentClassName='rcx-accordion-item__title' is='h1' id={titleId}>{title}</Box>
+  return <Box is='section' rcx-accordion-item className={className} {...props}>
+    {title && <Box rcx-accordion-item__bar rcx-accordion-item__bar--disabled={disabled} {...barProps}>
+      <Box is='h1' rcx-accordion-item__title id={titleId}>{title}</Box>
       {!noncollapsible && <>
         {(disabled || onToggleEnabled)
-          && <Box componentClassName='rcx-accordion-item__toggle-switch'>
+          && <Box rcx-accordion-item__toggle-switch>
             <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />
           </Box>}
         <Chevron size='x24' up={expanded} />
       </>}
     </Box>}
-    <Box componentClassName='rcx-accordion-item__panel' id={panelId} mod-expanded={panelExpanded} role='region'>
+    <Box rcx-accordion-item__panel rcx-accordion-item__panel--expanded={panelExpanded} id={panelId} role='region'>
       {children}
     </Box>
   </Box>;

packages/fuselage/src/components/Accordion/Item.stories.mdx

@@ -14,7 +14,7 @@ A collapsible panel.
   <Story name='Default'>
     <Accordion>
       <Accordion.Item title='Item'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -28,7 +28,7 @@ A collapsible panel.
   <Story name='Expanded'>
     <Accordion>
       <Accordion.Item title='Item' defaultExpanded>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -40,7 +40,7 @@ A collapsible panel.
   <Story name='Noncollapsible'>
     <Accordion>
       <Accordion.Item title='Item' noncollapsible>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -56,7 +56,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Without Title'>
     <Accordion>
       <Accordion.Item>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -70,7 +70,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Enabled'>
     <Accordion>
       <Accordion.Item title='Item' onToggleEnabled={action('toggleEnabled')}>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -82,7 +82,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Disabled'>
     <Accordion>
       <Accordion.Item title='Item' disabled onToggleEnabled={action('toggleEnabled')}>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>

packages/fuselage/src/components/Accordion/index.js

@@ -5,7 +5,7 @@ import { Item } from './Item';
 import { Box } from '../Box';
 
 export function Accordion(props) {
-  return <Box componentClassName='rcx-accordion' {...props} />;
+  return <Box rcx-accordion {...props} />;
 }
 
 Accordion.propTypes = {

packages/fuselage/src/components/Accordion/stories.mdx

@@ -14,13 +14,13 @@ sections of content.
   <Story name='Default'>
     <Accordion>
       <Accordion.Item title='Item #1' defaultExpanded>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #1</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #1</Box>
       </Accordion.Item>
       <Accordion.Item title='Item #2'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #2</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #2</Box>
       </Accordion.Item>
       <Accordion.Item title='Item #3'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #3</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #3</Box>
       </Accordion.Item>
     </Accordion>
   </Story>