Merge pull request #430 from eduzz/develop

Versão 0.62.0

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@eduzz/houston-workspaces",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "workspaces": [
     "src/pages/*",
     "src/dev",

src/dev/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@eduzz/houston-dev",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "private": true,
   "dependencies": {
-    "@eduzz/houston-forms": "0.61.2",
-    "@eduzz/houston-hooks": "0.61.2",
-    "@eduzz/houston-icons": "0.61.2",
-    "@eduzz/houston-ui": "0.61.2",
+    "@eduzz/houston-forms": "0.62.0",
+    "@eduzz/houston-hooks": "0.62.0",
+    "@eduzz/houston-icons": "0.62.0",
+    "@eduzz/houston-ui": "0.62.0",
     "react-dom": "^18",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",

src/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@eduzz/docs",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "private": true,
   "scripts": {
     "start": "next dev",
     "build": "next build && next export"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
-    "@eduzz/houston-forms": "0.61.2",
-    "@eduzz/houston-hooks": "0.61.2",
-    "@eduzz/houston-icons": "0.61.2",
-    "@eduzz/houston-ui": "0.61.2",
+    "@eduzz/houston-forms": "0.62.0",
+    "@eduzz/houston-hooks": "0.62.0",
+    "@eduzz/houston-icons": "0.62.0",
+    "@eduzz/houston-ui": "0.62.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "dokz": "2.0.9",

src/pages/eslint-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/eslint-config-houston",
   "private": false,
-  "version": "0.61.2",
+  "version": "0.62.0",
   "description": "Eduzz Houston Eslint Config",
   "author": "Eduzz Team",
   "license": "MIT",

src/pages/forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/houston-forms",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "description": "Houston Forms",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-hooks": "0.61.2",
+    "@eduzz/houston-hooks": "0.62.0",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2",
     "formik": "^2.2.9",

src/pages/hooks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-hooks",
   "description": "Eduzz Houston Hooks",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-icons",
   "description": "Eduzz Houston Icons",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-styles",
   "description": "Eduzz Houston Style",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-tokens": "0.61.2",
+    "@eduzz/houston-tokens": "0.62.0",
     "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",

src/pages/tokens/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-tokens",
   "description": "Eduzz Houston Tokens",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/ui-components/Showcase/Content/index.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { useContextSelector } from 'use-context-selector';
+
+import styled, { StyledProp } from '@eduzz/houston-styles';
+
+import { ShowcaseContext } from '../context';
+
+const Content = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & StyledProp) => {
+  const currentStep = useContextSelector(ShowcaseContext, context => context.currentStep);
+  const stepSize = useContextSelector(ShowcaseContext, context => context.stepSize);
+  const offset = (currentStep - 1) * -stepSize;
+
+  return (
+    <div {...rest} style={{ transform: `translateX(${offset}px)` }}>
+      {children}
+    </div>
+  );
+};
+
+export default styled(Content, { label: 'hst-showcase-content' })`
+  display: flex;
+  position: relative;
+  top: 0;
+  left: 0;
+  transition: transform ease-in-out 0.5s;
+`;

src/pages/ui-components/Showcase/ControlDots/index.tsx

@@ -0,0 +1,48 @@
+import { useContextSelector } from 'use-context-selector';
+
+import styled, { css, cx, StyledProp } from '@eduzz/houston-styles/styled';
+
+import { ShowcaseContext } from '../context';
+
+const DOTS_DIMENSION_SIZE = 10;
+
+const ControlDots = ({ className }: StyledProp) => {
+  const currentStep = useContextSelector(ShowcaseContext, context => context.currentStep);
+  const controlDots = useContextSelector(ShowcaseContext, context => context.controlDots);
+  const totalSteps = useContextSelector(ShowcaseContext, context => context.totalSteps);
+
+  if (!controlDots) return null;
+
+  const dots = Array(totalSteps).fill(0);
+
+  return (
+    <div className={className}>
+      {dots.map((_, index) => {
+        const activeDot = currentStep - 1 === index;
+
+        return <span key={`dot-${index}`} className={cx('hst-dots', `${activeDot && '--hst-dots-active'}`)} />;
+      })}
+    </div>
+  );
+};
+
+export default styled(ControlDots, { label: 'hst-control-dots' })`
+  ${({ theme }) => css`
+    padding: ${theme.spacing.inset.sm};
+
+    & .hst-dots {
+      height: ${theme.pxToRem(DOTS_DIMENSION_SIZE)}rem;
+      width: ${theme.pxToRem(DOTS_DIMENSION_SIZE)}rem;
+      margin-right: ${theme.pxToRem(DOTS_DIMENSION_SIZE)}rem;
+      background-color: ${theme.neutralColor.high.pure};
+      border: solid ${theme.border.width.xs} ${theme.neutralColor.high.dark};
+      border-radius: ${theme.border.radius.circular};
+      display: inline-block;
+    }
+
+    & .--hst-dots-active {
+      background-color: ${theme.brandColor.primary.pure};
+      border: none;
+    }
+  `}
+`;

src/pages/ui-components/Showcase/Footer/index.tsx

@@ -0,0 +1,22 @@
+import styled, { css, StyledProp } from '@eduzz/houston-styles';
+
+import Modal from '../../Modal';
+import ControlDots from '../ControlDots';
+
+const Footer = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & StyledProp) => {
+  return (
+    <div {...rest}>
+      <ControlDots />
+      <Modal.Footer>{children}</Modal.Footer>
+    </div>
+  );
+};
+
+export default styled(Footer, { label: 'hst-showcase-footer' })`
+  ${({ theme }) => css`
+    background-color: ${theme.neutralColor.high.pure};
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+  `}
+`;

src/pages/ui-components/Showcase/Image/index.tsx

@@ -1,6 +1,31 @@
+import styled, { css, StyledProp } from '@eduzz/houston-styles';
+
 export interface ShowcaseImageProps {
   src: string;
   alt: string;
 }
 
-export default (() => null) as React.FC<ShowcaseImageProps>;
+const IMAGE_HEIGHT = 235;
+
+const Image = ({ src, alt, ...rest }: ShowcaseImageProps & React.HTMLAttributes<HTMLDivElement> & StyledProp) => {
+  return (
+    <div {...rest}>
+      <img src={src} alt={alt} />
+    </div>
+  );
+};
+
+export default styled(Image, { label: 'hst-showcase-image' })`
+  ${({ theme }) => css`
+    width: 100%;
+    height: ${theme.pxToRem(IMAGE_HEIGHT)}rem;
+    border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & img {
+      max-width: 100%;
+    }
+  `}
+`;