Merge pull request #443 from eduzz/feat/classeNames

Atualização nas classes
eduzz · Sep 14, 2022 · 09a9310 · 09a9310
2 parents 217a5ac + d3dad2c
commit 09a9310
Show file tree

Hide file tree

Showing 123 changed files with 1,030 additions and 1,049 deletions.
diff --git a/src/dev/src/App.tsx b/src/dev/src/App.tsx
@@ -46,10 +46,10 @@ function App() {
               <Topbar.UserMenuItem>Minhas Compras</Topbar.UserMenuItem>
 
               <Topbar.UserMenuGroup label='Contas:'>
-                <Topbar.UserMenuItem href='http://google.com' target='_blank'>
+                <Topbar.UserMenuItem disabled href='http://google.com' target='_blank'>
                   John Doe
                 </Topbar.UserMenuItem>
-                <Topbar.UserMenuItem disabled>John Doe 2</Topbar.UserMenuItem>
+                <Topbar.UserMenuItem>John Doe 2</Topbar.UserMenuItem>
               </Topbar.UserMenuGroup>
 
               <Topbar.UserMenuDivider />

diff --git a/src/pages/ui-components/Accordion/Item/Content/index.tsx b/src/pages/ui-components/Accordion/Item/Content/index.tsx
@@ -16,7 +16,6 @@ const AccordionContent = ({ children, ...rest }: ContentProps) => {
   const expandedItems = useContextSelector(AccordionContext, context => context.expandedItems);
   const destroyOnClose = useContextSelector(AccordionContext, context => context.destroyOnClose);
   const mountOnEnter = useContextSelector(AccordionContext, context => context.mountOnEnter);
-
   const itemId = useContextSelector(ItemContext, context => context.itemId);
 
   const isExpanded = expandedItems.includes(itemId);

diff --git a/src/pages/ui-components/Accordion/Item/Title/index.tsx b/src/pages/ui-components/Accordion/Item/Title/index.tsx
@@ -37,7 +37,8 @@ const AccordionTitle = ({ children, ...rest }: TitleProps) => {
         ) : (
           <>{children}</>
         )}
-        <span className={cx('hst-accordion__icon', { '--isExpanded': expandedItems.includes(itemId) })}>
+
+        <span className={cx('hst-accordion-icon', { 'hst-accordion-expanded': expandedItems.includes(itemId) })}>
           <ChevronIcon />
         </span>
       </div>
@@ -55,12 +56,12 @@ export default styled(AccordionTitle, { label: 'hst-accordion-title' })(({ theme
     transition-duration: 0.5s;
     transition-property: background-color, color;
 
-    .hst-accordion__icon {
+    .hst-accordion-icon {
       line-height: 0;
       margin-left: auto;
       transition: 0.15s linear;
 
-      &.--isExpanded {
+      &.hst-accordion-expanded {
         transform: rotateX(180deg);
       }
     }

diff --git a/src/pages/ui-components/Accordion/Item/index.tsx b/src/pages/ui-components/Accordion/Item/index.tsx
@@ -10,6 +10,7 @@ import { ItemProvider } from './context';
 type ReceivedFromParentProps = {
   index?: number;
 };
+
 export interface ItemProps extends React.HTMLAttributes<HTMLDivElement>, ReceivedFromParentProps {
   children: React.ReactNode;
   disabled?: boolean;
@@ -24,7 +25,7 @@ const AccordionItem = ({ children, className, disabled, index, ...rest }: ItemPr
 
   return (
     <ItemProvider itemId={index as number}>
-      <div className={cx(className, { '--disabled': disabled })} {...rest} onClick={onClick}>
+      <div className={cx(className, { 'hst-accordion-disabled': disabled })} {...rest} onClick={onClick}>
         {children}
       </div>
     </ItemProvider>
@@ -33,7 +34,7 @@ const AccordionItem = ({ children, className, disabled, index, ...rest }: ItemPr
 
 const AccordionItemWrapper = styled(AccordionItem, { label: 'hst-accordion-item' })(({ theme }) => {
   return css`
-    &.--disabled {
+    &.hst-accordion-disabled {
       opacity: ${theme.opacity.level[6]};
       pointer-events: none;
     }

diff --git a/src/pages/ui-components/Accordion/index.mdx b/src/pages/ui-components/Accordion/index.mdx
@@ -6,9 +6,9 @@ import { Playground } from 'dokz';
 
 import Accordion from './';
 
-# Accordions
+# Accordion
 
-O Accordions é um elemento se expande no local para expor informações ocultas.
+O Accordion é um elemento se expande no local para expor informações ocultas.
 
 ### Importação
 
@@ -41,7 +41,7 @@ import Accordion from '@eduzz/houston-ui/Accordion';
   </Accordion>
 </Playground>
 
-### Valor controlado, allowMultiple = false e disabled
+### Valor controlado
 
 <Playground>
   {() => {
@@ -73,14 +73,14 @@ import Accordion from '@eduzz/houston-ui/Accordion';
 
 ### Accordion props
 
-| prop           | tipo                          | obrigatório | padrão  | descrição                                                                                               |
-| -------------- | ----------------------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------- |
-| children       | `React.ReactNode`             | `true`      | -       | -                                                                                                       |
-| values         | `number[]`                    | `false`     | -       | Índices dos items que serão expandidos                                                                  |
-| onChange       | `(values: number[]) => void;` | `false`     | -       | Passa pelo callback os índices dos items que estão expandidos                                           |
-| allowMultiple  | `boolean`                     | `false`     | `true`  | Se false apenas um item poderá ser expandido                                                            |
-| destroyOnClose | `boolean`                     | `false`     | `false` | Se true o componente que está dentro do Accordion.Content será desmontado depois que o item for fechado |
-| mountOnEnter   | `boolean`                     | `false`     | `false` | Se true o componente que está dentro do Accordion.Content só sera montado depois que o item for aberto  |
+| prop           | tipo              | obrigatório | padrão  | descrição                                                                                               |
+| -------------- | ----------------- | ----------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| children       | `React.ReactNode` | `true`      | -       | -                                                                                                       |
+| values         | `number[]`        | `false`     | -       | Índices dos items que serão expandidos                                                                  |
+| onChange       | `function`        | `false`     | -       | Passa pelo callback os índices dos items que estão expandidos                                           |
+| allowMultiple  | `boolean`         | `false`     | `true`  | Se false apenas um item poderá ser expandido                                                            |
+| destroyOnClose | `boolean`         | `false`     | `false` | Se true o componente que está dentro do Accordion.Content será desmontado depois que o item for fechado |
+| mountOnEnter   | `boolean`         | `false`     | `false` | Se true o componente que está dentro do Accordion.Content só sera montado depois que o item for aberto  |
 
 ### Accordion.Item props
 

diff --git a/src/pages/ui-components/Accordion/index.tsx b/src/pages/ui-components/Accordion/index.tsx
@@ -52,7 +52,7 @@ const Accordion = ({
     }
   }, [controlled, values]);
 
-  const mappedChildren = React.Children.map(children, (child, i: number) => {
+  const mappedChildren = React.Children.map(children, (child, i) => {
     return React.cloneElement(child, {
       index: i
     });

diff --git a/src/pages/ui-components/Alert/Alert.tsx b/src/pages/ui-components/Alert/Alert.tsx
@@ -86,39 +86,44 @@ const Alert = React.forwardRef<HTMLDivElement, AlertInterface>(
     }
 
     return (
-      <div {...rest} ref={ref} role='alert' className={cx(className, `--type-${type}`, { '--close-icon': closeIcon })}>
-        <span role='img' className='__icon'>
+      <div
+        {...rest}
+        ref={ref}
+        role='alert'
+        className={cx(className, `hst-alert-type-${type}`, { 'hst-alert-close-icon': closeIcon })}
+      >
+        <span role='img' className='hst-alert-icon'>
           {IconMap[type]}
         </span>
 
-        <div className='__wrapper'>
-          <div className='__content'>
+        <div className='hst-alert-wrapper'>
+          <div className='hst-alert-content'>
             {title && (
               <Typography
                 color='neutralColor.low.pure'
                 weight='semibold'
                 size='md'
                 lineHeight='default'
-                className='__title'
+                className='hst-alert-title'
               >
                 {title}
               </Typography>
             )}
 
-            <Typography.Paragraph color='neutralColor.low.pure' size='sm' lineHeight='lg'>
+            <Typography.Paragraph color='neutralColor.low.pure' size='md' lineHeight='lg'>
               {children}
             </Typography.Paragraph>
           </div>
 
           {!!buttonText && (
-            <div className='__action'>
+            <div className='hst-alert-action'>
               <Button {...buttonProps}>{buttonText}</Button>
             </div>
           )}
         </div>
 
         {closeIcon && (
-          <span role='button' className='__close' onClick={handleClose}>
+          <span role='button' className='hst-alert-close' onClick={handleClose}>
             <Icon.Close />
           </span>
         )}
@@ -127,17 +132,17 @@ const Alert = React.forwardRef<HTMLDivElement, AlertInterface>(
   }
 );
 
-export default styled(Alert, { label: 'houston-alert' })`
+export default styled(Alert, { label: 'hst-alert' })`
   ${({ theme }) => {
     const mobileSpacingCloseIcon = theme.remToPx(theme.cleanUnit(theme.spacing.inline.nano)) + CLOSE_ICON_SIZE;
     const modifiersTypes: CSSInterpolation[] = [];
 
     Object.keys(theme.feedbackColor).forEach(key =>
       modifiersTypes.push(css`
-        &.--type-${key} {
+        &.hst-alert-type-${key} {
           background-color: ${theme.feedbackColor[key].light};
 
-          .__icon svg {
+          .hst-alert-icon svg {
             fill: ${theme.feedbackColor[key].pure};
           }
         }
@@ -157,12 +162,12 @@ export default styled(Alert, { label: 'houston-alert' })`
       }
 
       ${theme.breakpoints.down('md')} {
-        &.--close-icon {
-          .__content {
+        &.hst-alert-close-icon {
+          .hst-alert-content {
             margin-right: ${theme.pxToRem(mobileSpacingCloseIcon)}rem;
           }
 
-          .__close {
+          .hst-alert-close {
             position: absolute;
             top: ${theme.spacing.inset.xs};
             right: ${theme.spacing.inset.xs};
@@ -173,7 +178,7 @@ export default styled(Alert, { label: 'houston-alert' })`
 
       ${modifiersTypes}
 
-      .__icon {
+      .hst-alert-icon {
         line-height: 0;
         margin: ${theme.pxToRem(2)}rem ${theme.spacing.inline.xxxs} 0 0;
 
@@ -182,10 +187,10 @@ export default styled(Alert, { label: 'houston-alert' })`
         }
       }
 
-      .__wrapper {
+      .hst-alert-wrapper {
         flex: 1;
 
-        .__title {
+        .hst-alert-title {
           margin-bottom: ${theme.spacing.stack.xxxs};
 
           ${theme.breakpoints.down('md')} {
@@ -194,20 +199,20 @@ export default styled(Alert, { label: 'houston-alert' })`
           }
         }
 
-        .__action {
+        .hst-alert-action {
           margin-top: ${theme.spacing.stack.xxxs};
 
           ${theme.breakpoints.down('md')} {
             margin-top: ${theme.spacing.stack.xxs};
 
-            button {
+            button.hst-button {
               width: 100%;
             }
           }
         }
       }
 
-      .__close {
+      .hst-alert-close {
         line-height: 0;
         margin: ${theme.pxToRem(4)}rem 0 0 ${theme.spacing.inline.xxxs};
         cursor: pointer;

diff --git a/src/pages/ui-components/Avatar/index.mdx b/src/pages/ui-components/Avatar/index.mdx
@@ -24,16 +24,16 @@ Os tamanhos dísponiveis são: `xs`, `sm`, `md`, `lg `.
 
 <Playground>
   <Row alignItems='center'>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='xs' />
     </Column>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='sm' />
     </Column>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='md' />
     </Column>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='lg' />
     </Column>
   </Row>
@@ -47,56 +47,23 @@ Existem três tipos: ícone (padrão), texto e imagem.
 
 <Playground>
   <Row alignItems='center'>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='lg' />
     </Column>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='lg'>M</Avatar>
     </Column>
-    <Column>
+    <Column xs='auto'>
       <Avatar size='lg' src='https://www.fillmurray.com/100/100' />
     </Column>
   </Row>
 </Playground>
 
 > O tipo texto é considerado se o `children` for do tipo `string` (igual o exemplo acima).
 
-> Use a prop `alt` para espeficiar o texto alternativo para imagem.
-
-### Cores
-
-Há possibilidade de inverter as cores para dar suporte a contextos específicos. As cores dísponiveis são: `primary` (padrão) e `high`.
-
-<Playground>
-  <Row alignItems='center' className='bg-dark' style={{ paddingBottom: 16 }}>
-    <Column>
-      <Avatar size='lg' />
-    </Column>
-    <Column>
-      <Avatar size='lg'>M</Avatar>
-    </Column>
-    <Column>
-      <Avatar size='lg' src='https://www.fillmurray.com/100/100' />
-    </Column>
-    <Column>
-      <Avatar size='lg' color='high' />
-    </Column>
-    <Column>
-      <Avatar size='lg' color='high'>
-        M
-      </Avatar>
-    </Column>
-    <Column>
-      <Avatar size='lg' color='high' src='https://www.fillmurray.com/100/100' />
-    </Column>
-  </Row>
-</Playground>
-
 ## Propriedades
 
-| prop  | tipo           | obrigatório | padrão    | descrição                                   |
-| ----- | -------------- | ----------- | --------- | ------------------------------------------- |
-| src   | `string`       | `false`     | -         | Caminho da imagem.                          |
-| alt   | `string`       | `false`     | -         | Texto alternativo quando não houver imagem. |
-| size  | `IAvatarSize`  | `false`     | `md`      | -                                           |
-| color | `IAvatarColor` | `false`     | `primary` | -                                           |
+| prop | tipo         | obrigatório | padrão | descrição          |
+| ---- | ------------ | ----------- | ------ | ------------------ |
+| src  | `string`     | `false`     | -      | Caminho da imagem. |
+| size | `AvatarSize` | `false`     | `md`   | -                  |