fix(fuselage): States Component Font Style (#579)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

packages/fuselage/src/components/Options/Option/Option.tsx

@@ -8,7 +8,7 @@ import OptionIcon from './OptionIcon';
 type OptionProps = {
   is?: ComponentProps<typeof Box>['is'];
   id?: string;
-  children: ReactNode;
+  children?: ReactNode;
   label?: string;
   focus?: boolean;
   selected?: boolean;

packages/fuselage/src/components/States/States.stories.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
 import {
+  States,
+  StatesSubtitle,
+  StatesIcon,
+  StatesTitle,
   StatesSuggestionList,
   StatesSuggestionListItem,
   StatesSuggestion,
@@ -9,7 +13,6 @@ import {
   StatesAction,
 } from '.';
 import { Box } from '..';
-import { States, StatesSubtitle, StatesIcon, StatesTitle } from './States';
 
 export default {
   title: 'States/States',

packages/fuselage/src/components/States/States.styles.scss

@@ -26,13 +26,13 @@
     margin-block-end: lengths.margin(8);
 
     color: colors.foreground(default);
-    @include typography.use-font-scale(h1);
+    @include typography.use-font-scale(h2);
   }
 
   &__subtitle,
   &__list,
   &__suggestion {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(p4);
 
     display: flex;
     flex-direction: column;

packages/fuselage/src/components/States/States.tsx

@@ -1,52 +1,9 @@
-import React, { FC, ComponentProps } from 'react';
+import React, { FC } from 'react';
 
-import { Button } from '..';
-import { ButtonGroup } from '../ButtonGroup';
-import { Icon } from '../Icon';
 import './States.styles.scss';
 
-export const States: FC = ({ children }) => (
+const States: FC = ({ children }) => (
   <div className='rcx-states'>{children}</div>
 );
 
-export const StatesIcon: FC<{
-  name: ComponentProps<typeof Icon>['name'];
-  // variation?: 'danger';
-}> = ({ name }) => (
-  <div className='rcx-states__icon'>
-    <Icon name={name} size='x32' />
-  </div>
-);
-
-export const StatesTitle: FC = ({ children }) => (
-  <div className='rcx-states__title'>{children}</div>
-);
-export const StatesSubtitle: FC = ({ children }) => (
-  <div className='rcx-states__subtitle'>{children}</div>
-);
-
-export const StatesSuggestion: FC = ({ children }) => (
-  <div className='rcx-states__suggestion'>{children}</div>
-);
-export const StatesSuggestionText: FC = ({ children }) => (
-  <div className='rcx-states__suggestion-text'>{children}</div>
-);
-
-export const StatesSuggestionList: FC = ({ children }) => (
-  <ul className='rcx-states__list'>{children}</ul>
-);
-
-export const StatesSuggestionListItem: FC = ({ children }) => (
-  <li className='rcx-states__list-item'>
-    <span className='rcx-states__list-item-wrapper'>{children}</span>
-  </li>
-);
-
-export const StatesActions: FC<ComponentProps<typeof ButtonGroup>> = ({
-  children,
-  ...props
-}) => <ButtonGroup {...props}> {children} </ButtonGroup>;
-
-export const StatesAction: FC<ComponentProps<typeof Button>> = ({
-  ...props
-}) => <Button primary {...props} />;
+export default States;

packages/fuselage/src/components/States/StatesAction.tsx

@@ -0,0 +1,9 @@
+import React, { FC, ComponentProps } from 'react';
+
+import { Button } from '..';
+
+const StatesAction: FC<ComponentProps<typeof Button>> = ({ ...props }) => (
+  <Button primary {...props} />
+);
+
+export default StatesAction;

packages/fuselage/src/components/States/StatesActions.tsx

@@ -0,0 +1,10 @@
+import React, { FC, ComponentProps } from 'react';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+const StatesActions: FC<ComponentProps<typeof ButtonGroup>> = ({
+  children,
+  ...props
+}) => <ButtonGroup {...props}> {children} </ButtonGroup>;
+
+export default StatesActions;

packages/fuselage/src/components/States/StatesIcon.tsx

@@ -0,0 +1,14 @@
+import React, { FC, ComponentProps } from 'react';
+
+import { Icon } from '../Icon';
+
+const StatesIcon: FC<{
+  name: ComponentProps<typeof Icon>['name'];
+  // variation?: 'danger';
+}> = ({ name }) => (
+  <div className='rcx-states__icon'>
+    <Icon name={name} size='x32' />
+  </div>
+);
+
+export default StatesIcon;

packages/fuselage/src/components/States/StatesSubtitle.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+const StatesSubtitle: FC = ({ children }) => (
+  <div className='rcx-states__subtitle'>{children}</div>
+);
+
+export default StatesSubtitle;

packages/fuselage/src/components/States/StatesSuggestion.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+const StatesSuggestion: FC = ({ children }) => (
+  <div className='rcx-states__suggestion'>{children}</div>
+);
+
+export default StatesSuggestion;

packages/fuselage/src/components/States/StatesSuggestionList.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+const StatesSuggestionList: FC = ({ children }) => (
+  <ul className='rcx-states__list'>{children}</ul>
+);
+
+export default StatesSuggestionList;

packages/fuselage/src/components/States/StatesSuggestionListItem.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+const StatesSuggestionListItem: FC = ({ children }) => (
+  <li className='rcx-states__list-item'>
+    <span className='rcx-states__list-item-wrapper'>{children}</span>
+  </li>
+);
+
+export default StatesSuggestionListItem;

packages/fuselage/src/components/States/StatesSuggestionText.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+const StatesSuggestionText: FC = ({ children }) => (
+  <div className='rcx-states__suggestion-text'>{children}</div>
+);
+
+export default StatesSuggestionText;

packages/fuselage/src/components/States/StatesTitle.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+
+const StatesTitle: FC = ({ children }) => (
+  <div className='rcx-states__title'>{children}</div>
+);
+
+export default StatesTitle;

packages/fuselage/src/components/States/index.tsx

@@ -1 +1,23 @@
-export * from './States';
+import States from './States';
+import StatesAction from './StatesAction';
+import StatesActions from './StatesActions';
+import StatesIcon from './StatesIcon';
+import StatesSubtitle from './StatesSubtitle';
+import StatesSuggestion from './StatesSuggestion';
+import StatesSuggestionList from './StatesSuggestionList';
+import StatesSuggestionListItem from './StatesSuggestionListItem';
+import StatesSuggestionText from './StatesSuggestionText';
+import StatesTitle from './StatesTitle';
+
+export {
+  States,
+  StatesAction,
+  StatesActions,
+  StatesIcon,
+  StatesSubtitle,
+  StatesSuggestion,
+  StatesSuggestionList,
+  StatesSuggestionListItem,
+  StatesSuggestionText,
+  StatesTitle,
+};

packages/fuselage/src/components/index.ts

@@ -12,7 +12,6 @@ export * from './Chevron';
 export { default as Chip } from './Chip';
 export * from './Divider';
 export * from './EmailInput';
-export * from './States';
 export * from './Field';
 export * from './FieldGroup';
 export * from './Grid';
@@ -38,6 +37,7 @@ export * from './SelectPaginated';
 export * from './SelectInput';
 export * from './Sidebar';
 export * from './Skeleton';
+export * from './States';
 export * from './Table';
 export * from './Tabs';
 export * from './Tag';