feat: Tile component (#85)

packages/fuselage/babel.config.js

@@ -5,6 +5,14 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
-    'babel-plugin-styled-components',
+    [
+      'babel-plugin-styled-components',
+      {
+        displayName: false,
+        fileName: false,
+        minify: false,
+        transpileTemplateLiterals: false,
+      },
+    ],
   ],
 };

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

@@ -1,34 +1,42 @@
-import { useClassName, useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { useTheme } from '../../hooks/useTheme';
+import { createStyledComponent } from '../../styles';
 import { Icon } from '../Icon';
 import { ToggleSwitch } from '../ToggleSwitch';
-import { StyledAccordionItem, Bar, Title, Panel } from './styles';
+import styles from './styles';
+
+const ItemContainer = createStyledComponent(styles, 'rcx-accordion-item', 'section');
+const ItemBar = createStyledComponent(styles, 'rcx-accordion-item__bar');
+const ItemTitle = createStyledComponent(styles, 'rcx-accordion-item__title', 'h1');
+const ItemPanel = createStyledComponent(styles, 'rcx-accordion-item__panel');
 
 export const Item = React.forwardRef(function Item({
   children,
   className,
   defaultExpanded,
   disabled,
-  expanded,
+  expanded: propExpanded,
   tabIndex = 0,
   title,
   noncollapsible = !title,
   onToggle,
   onToggleEnabled,
   ...props
 }, ref) {
-  const classNames = {
-    container: useClassName('rcx-accordion-item', {}, className),
-    bar: useClassName('rcx-accordion-item__bar'),
-    title: useClassName('rcx-accordion-item__title'),
-    toggleBtn: useClassName('rcx-accordion-item__toggle-button'),
+  const [stateExpanded, toggleStateExpanded] = useToggle(defaultExpanded);
+  const expanded = propExpanded || stateExpanded;
+  const toggleExpanded = () => {
+    if (onToggle) {
+      onToggle.call(event.currentTarget, event);
+      return;
+    }
+
+    toggleStateExpanded();
   };
-  const theme = useTheme();
 
-  const [internalExpanded, toggleExpanded] = useToggle(defaultExpanded);
+  const panelExpanded = noncollapsible || expanded;
 
   const titleId = useUniqueId();
   const panelId = useUniqueId();
@@ -39,12 +47,6 @@ export const Item = React.forwardRef(function Item({
     }
 
     event.currentTarget.blur();
-
-    if (onToggle) {
-      onToggle.call(event.currentTarget, event);
-      return;
-    }
-
     toggleExpanded();
   };
 
@@ -60,11 +62,6 @@ export const Item = React.forwardRef(function Item({
         return;
       }
 
-      if (onToggle) {
-        onToggle.call(event.currentTarget, event);
-        return;
-      }
-
       toggleExpanded();
     }
   };
@@ -75,7 +72,7 @@ export const Item = React.forwardRef(function Item({
 
   const collapsibleProps = {
     'aria-controls': panelId,
-    'aria-expanded': expanded || internalExpanded ? 'true' : 'false',
+    'aria-expanded': expanded ? 'true' : 'false',
     tabIndex: !disabled ? tabIndex : undefined,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -87,33 +84,21 @@ export const Item = React.forwardRef(function Item({
     'aria-labelledby': titleId,
   };
 
-  return <StyledAccordionItem className={classNames.container} theme={theme} {...props}>
-    {title && <Bar
-      className={classNames.bar}
-      disabled={disabled}
-      expanded={expanded || internalExpanded}
-      noncollapsible={noncollapsible}
-      ref={ref}
-      theme={theme}
-      {...(noncollapsible ? nonCollapsibleProps : collapsibleProps)}
-    >
-      <Title className={classNames.bar} id={titleId} theme={theme}>{title}</Title>
+  const barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
+
+  return <ItemContainer className={className} {...props}>
+    {title && <ItemBar modifiers={{ disabled, expanded }} ref={ref} {...barProps}>
+      <ItemTitle id={titleId}>{title}</ItemTitle>
       {!noncollapsible && <>
         {(disabled || onToggleEnabled)
           && <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />}
         <Icon name={'arrow-down'} />
       </>}
-    </Bar>}
-    <Panel
-      className={classNames.panel}
-      expanded={noncollapsible || expanded || internalExpanded}
-      id={panelId}
-      role='region'
-      theme={theme}
-    >
+    </ItemBar>}
+    <ItemPanel id={panelId} modifiers={{ expanded: panelExpanded }} role='region'>
       {children}
-    </Panel>
-  </StyledAccordionItem>;
+    </ItemPanel>
+  </ItemContainer>;
 });
 
 Item.defaultProps = {
@@ -127,8 +112,12 @@ Item.propTypes = {
   defaultExpanded: PropTypes.bool,
   disabled: PropTypes.bool,
   expanded: PropTypes.bool,
+  /** Is this component visible? */
+  invisible: PropTypes.bool,
   tabIndex: PropTypes.number,
   title: PropTypes.string,
   onToggle: PropTypes.func,
   onToggleEnabled: PropTypes.func,
 };
+
+Item.styled = ItemContainer;

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

@@ -1,18 +1,14 @@
-import { useClassName } from '@rocket.chat/fuselage-hooks';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { useTheme } from '../../hooks/useTheme';
+import { createStyledComponent } from '../../styles';
 import { Item } from './Item';
-import { StyledAccordion } from './styles';
+import styles from './styles';
 
-export const Accordion = React.forwardRef(function Accordion({
-  className,
-  ...props
-}, ref) {
-  const compoundClassName = useClassName('rcx-accordion', {}, className);
-  const theme = useTheme();
-  return <StyledAccordion className={compoundClassName} ref={ref} theme={theme} {...props} />;
+const Container = createStyledComponent(styles, 'rcx-accordion');
+
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
+  return <Container ref={ref} {...props} />;
 });
 
 Accordion.displayName = 'Accordion';
@@ -22,3 +18,5 @@ Accordion.propTypes = {
 };
 
 Accordion.Item = Item;
+
+Accordion.styled = Container;

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

@@ -1,13 +1,14 @@
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import styled, { css } from 'styled-components';
 
-import box from '../../styles/box';
+import box from '../../styles/utilities/box';
 import { clickable } from '../../styles/utilities/interactivity';
 import { truncate, subtitleBold, subtitle } from '../../styles/utilities/typography';
-import { StyledIcon } from '../Icon/styles';
-import { toRem } from '../../styles/helpers';
+import { toRem } from '../../styles/utilities/common';
+import { Icon } from '../Icon';
+import { ToggleSwitch } from '../ToggleSwitch';
 
-export const StyledAccordion = styled.div`
+const Container = styled.div`
   ${ box }
 
   display: flex;
@@ -17,50 +18,37 @@ export const StyledAccordion = styled.div`
   border-bottom-color: ${ colors.dark300 };
 `;
 
-export const StyledAccordionItem = styled.div`
+const ItemContainer = styled.div`
   ${ box }
 
   display: flex;
   flex-flow: column nowrap;
 `;
 
-export const Bar = styled.div`
+const ItemBar = styled.div`
   ${ box }
 
   display: flex;
-  flex-flow: row nowrap;
-
-  ${ ({ theme }) => css`
-    min-height: calc(2 * ${ theme.spaces.x32 } + ${ theme.sizes.x24 });
-  ` }
 
-  border-width: ${ ({ theme }) => theme.borders.width.x2 };
-  border-color: ${ colors.dark300 } transparent transparent;
-  ${ ({ theme }) => css`
-    padding:
-      calc(${ theme.spaces.x32 } - ${ theme.borders.width.x2 })
-      calc(${ theme.spaces.x8 } - ${ theme.borders.width.x2 });
-  ` }
+  min-height: calc(2 * ${ ({ theme }) => theme.spaces.x32 } + ${ ({ theme }) => theme.sizes.x24 });
+  padding:
+    calc(${ ({ theme }) => theme.spaces.x32 } - ${ ({ theme }) => theme.borders.width.x2 })
+    calc(${ ({ theme }) => theme.spaces.x8 } - ${ ({ theme }) => theme.borders.width.x2 });
+  padding-block: calc(${ ({ theme }) => theme.spaces.x32 } - ${ ({ theme }) => theme.borders.width.x2 });
+  padding-inline: calc(${ ({ theme }) => theme.spaces.x8 } - ${ ({ theme }) => theme.borders.width.x2 });
 
   text-align: left;
+  text-align: start;
 
-  ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
-    ${ clickable }
-  ` }
-
-  & > .rcx-toggle-switch {
-    margin: 0 ${ ({ theme }) => theme.sizes.x24 };
-  }
+  color: ${ ({ theme }) => theme.textColors.default };
 
-  & > ${ StyledIcon } {
-    font-size: ${ ({ theme }) => theme.sizes.x24 };
+  border-width: ${ ({ theme }) => theme.borders.width.x2 };
+  border-color: ${ colors.dark300 } transparent transparent;
+  flex-flow: row nowrap;
 
-    ${ ({ expanded }) => expanded && css`
-      transform: rotate(-180deg);
-    ` }
-  }
+  &[tabindex] {
+    ${ clickable }
 
-  ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
     &.hover,
     &:hover {
       background-color: ${ colors.dark100 };
@@ -71,42 +59,70 @@ export const Bar = styled.div`
       border-color: ${ colors.blue500 };
       box-shadow: 0 0 0 ${ toRem(6) } ${ colors.blue100 };
     }
+  }
+
+  & > ${ ToggleSwitch.styled } {
+    margin: 0 ${ ({ theme }) => theme.sizes.x24 };
+    margin-block: 0;
+    margin-inline: ${ ({ theme }) => theme.sizes.x24 };
+  }
+
+  & > ${ Icon.styled } {
+    font-size: ${ ({ theme }) => theme.sizes.x24 };
+  }
+
+  ${ ({ modifiers }) => modifiers.expanded && css`
+    & > ${ Icon.styled } {
+      transform: rotate(-180deg);
+    }
   ` }
 
-  ${ ({ disabled, theme }) => disabled && css`
+  ${ ({ modifiers, theme }) => modifiers.disabled && css`
+    cursor: not-allowed;
+
     color: ${ theme.textColors.disabled };
     background-color: ${ colors.dark100 };
   ` }
 `;
 
-export const Title = styled.h2`
+const ItemTitle = styled.h2`
   ${ box }
 
   flex: 1 1 0;
 
-  ${ ({ disabled, theme }) => disabled && css`
-    color: ${ theme.textColors.disabled };
-  ` }
-
   ${ ({ theme }) => subtitle(theme) }
   ${ ({ theme }) => subtitleBold(theme) }
   ${ truncate }
 `;
 
-export const Panel = styled.div`
+const ItemPanel = styled.div`
   ${ box }
 
+  visibility: hidden;
+
   overflow: hidden;
 
   height: 0;
-  ${ ({ theme }) => css`
-    padding: 0 ${ theme.spaces.x8 };
-    visibility: hidden;
-  ` }
+  padding: 0 ${ ({ theme }) => theme.spaces.x8 };
+  padding-block: 0;
+  padding-inline: ${ ({ theme }) => theme.spaces.x8 };
 
-  ${ ({ expanded, theme }) => expanded && css`
-    height: auto;
-    padding: ${ theme.spaces.x32 } ${ theme.spaces.x8 };
+  ${ ({ modifiers, theme }) => modifiers.expanded && css`
     visibility: visible;
+
+    height: auto;
+    padding:
+      ${ theme.spaces.x32 }
+      ${ theme.spaces.x8 };
+    padding-block: ${ theme.spaces.x32 };
+    padding-inline: ${ theme.spaces.x8 };
   ` }
 `;
+
+export default {
+  'rcx-accordion': Container,
+  'rcx-accordion-item': ItemContainer,
+  'rcx-accordion-item__bar': ItemBar,
+  'rcx-accordion-item__title': ItemTitle,
+  'rcx-accordion-item__panel': ItemPanel,
+};