diff --git a/package.json b/package.json
index 62b85307..2e80541e 100644
--- a/package.json
+++ b/package.json
@@ -87,12 +87,12 @@
"styled-components": "^5.3.1",
"styled-system": "^5.1.5",
"swiper": "^6.7.0",
- "themeprovider-storybook": "^1.7.2"
+ "themeprovider-storybook": "^1.7.2",
+ "clsx": "^1.1.1"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
- },
- "dependencies": {}
+ }
}
diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx
index 985fc5c2..f3c229ac 100644
--- a/src/components/Box/Box.jsx
+++ b/src/components/Box/Box.jsx
@@ -1,8 +1,8 @@
import styled from 'styled-components'
import propTypes from '@styled-system/prop-types'
-import { compose, space, layout, typography, color, flexbox, background } from 'styled-system'
+import { compose, space, layout, typography, color, flexbox, background, grid, border } from 'styled-system'
-const props = compose(space, layout, typography, color, flexbox, background)
+const props = compose(space, layout, typography, color, flexbox, background, grid, border)
const Box = styled.div`
margin: 0;
diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx
new file mode 100644
index 00000000..9b7047a5
--- /dev/null
+++ b/src/components/Grid/Grid.jsx
@@ -0,0 +1,17 @@
+import { Box } from '../'
+import clsx from 'clsx'
+import styled from 'styled-components'
+import { parseGridProps, columnsProp } from './Grid.utils'
+
+const containerClassName = 'Saturn_grid-container'
+const itemClassName = 'Saturn_grid-container'
+
+const Grid = styled(({ className: extraClassNames, item, ...rest }) => {
+ const defaultClassName = item ? itemClassName : containerClassName
+ return
+})`
+ ${parseGridProps};
+ ${columnsProp};
+`
+
+export default Grid
diff --git a/src/components/Grid/Grid.utils.jsx b/src/components/Grid/Grid.utils.jsx
new file mode 100644
index 00000000..e3a7ae45
--- /dev/null
+++ b/src/components/Grid/Grid.utils.jsx
@@ -0,0 +1,60 @@
+import { system, style } from 'styled-system'
+
+export const parseGridProps = system({
+ gap: {
+ property: 'gridGap'
+ },
+ columnGap: {
+ property: 'gridColumnGap'
+ },
+ rowGap: {
+ property: 'gridRowGap'
+ },
+ column: {
+ property: 'gridColumn'
+ },
+ row: {
+ property: 'gridRow'
+ },
+ autoFlow: {
+ property: 'gridAutoFlow'
+ },
+ autoColumns: {
+ property: 'gridAutoColumns'
+ },
+ autoRows: {
+ property: 'gridAutoRows'
+ },
+ templateColumns: {
+ property: 'gridTemplateColumns'
+ },
+ templateRows: {
+ property: 'gridTemplateRows'
+ },
+ templateAreas: {
+ property: 'gridTemplateAreas'
+ },
+ area: {
+ property: 'gridArea'
+ },
+ columnStart: {
+ property: 'gridColumnStart'
+ },
+ columnEnd: {
+ property: 'gridColumnEnd'
+ },
+ rowStart: {
+ property: 'gridrowStart'
+ },
+ rowEnd: {
+ property: 'gridrowEnd'
+ }
+})
+const getterColumns = n => `repeat(${n}, 1fr)`
+
+export const columnsProp = style({
+ cssProperty: 'grid-template-columns',
+ prop: 'columns',
+ alias: 'c',
+ transformValue: getterColumns
+})
diff --git a/src/components/Grid/index.js b/src/components/Grid/index.js
new file mode 100644
index 00000000..fde4fbc4
--- /dev/null
+++ b/src/components/Grid/index.js
@@ -0,0 +1,3 @@
+import Grid from './Grid'
+
+export { Grid }
diff --git a/src/components/index.js b/src/components/index.js
index 11fe6e0c..082c2936 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,6 @@
export * from './Box'
export * from './Flex'
+export * from './Grid'
export * from './Typography'
export * from './TextField'
export * from './TextArea'
@@ -24,3 +25,4 @@ export * from './Card'
export * from './SaturnProvider'
export * from './Carousel'
export * from './ProgressBar'
+export * from './Grid'
diff --git a/src/stories/Flex.stories.mdx b/src/stories/Flex.stories.mdx
new file mode 100644
index 00000000..a8acf0a0
--- /dev/null
+++ b/src/stories/Flex.stories.mdx
@@ -0,0 +1,80 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'
+
+import { Flex, Box, Typography, SaturnProvider } from '../components'
+
+
+
+# Flex | Box
+
+O Componente Flex é o componente que encapsula todos os filhos `Box` e os delimita dentro do layout. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado.
+O componente Box é responsável por encapsular uma porção de conteúdo, afim de posicioná-lo na tela. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado. Sua principal diferença está na forma de definir a width do componente, onde um array de larguras pode ser inserido, seguindo os breakpoints disponíveis no `theme` definido.
+
+
+
+### Proptypes Flex
+
+
+
+### Proptypes Box
+
+
diff --git a/src/stories/Grid.stories.mdx b/src/stories/Grid.stories.mdx
index a8acf0a0..c0ffe44e 100644
--- a/src/stories/Grid.stories.mdx
+++ b/src/stories/Grid.stories.mdx
@@ -1,80 +1,77 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'
-import { Flex, Box, Typography, SaturnProvider } from '../components'
+import { Grid, Box, Typography, SaturnProvider } from '../components'
-
+
-# Flex | Box
-
-O Componente Flex é o componente que encapsula todos os filhos `Box` e os delimita dentro do layout. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado.
-O componente Box é responsável por encapsular uma porção de conteúdo, afim de posicioná-lo na tela. Ele recebe qualquer propriedade disponível no [styled-system](https://styled-system.com/api), mas idealmente sua utilização deve ser estritamente a de posicionar o conteúdo dentro do layout desejado. Sua principal diferença está na forma de definir a width do componente, onde um array de larguras pode ser inserido, seguindo os breakpoints disponíveis no `theme` definido.
+Componente primitivo para construção de layout's complexos (onde somente os componentes de Box/Grid nao sao suficientes). O componente possibilita a utilização de qualquer propriedade que envolva grid suportada pelo styled system (https://styled-system.com/api/#grid-layout) além de propriedades customizadas para casos mais simples
+
+# Grid (simples)
+
+Para utilizar a grid com finalidades mais simples (ex.: listagem com colunas) basta utilizar o Grid como Wrapper. Utilizar propriedade `columns` para escrever a quantidade de colunas desejadas (ex.: columns={3} equivale a `templateColumns="repeat(3, 1fr)"`)
+
+
-### Proptypes Flex
+# Grid (uso geral)
-
+Para demais finalidades da Grid, aconselhamos utilizar Grid o mesmo componente grid, passando como prop item. Assim você terá acesso a todas as as funcionalidades relacionadas a grid tanto no Wrapper quanto nos filhos
-### Proptypes Box
+
-
diff --git a/src/theme/Theme.js b/src/theme/Theme.js
index a9973faf..3dcb6202 100644
--- a/src/theme/Theme.js
+++ b/src/theme/Theme.js
@@ -1,6 +1,6 @@
import pallette from './pallette'
-const breakpoints = [0, 600, 960, 1280, 1920]
+const breakpoints = ['0px', '600px', '960px', '1280px', '1920px']
breakpoints.xs = breakpoints[0]
breakpoints.sm = breakpoints[1]
breakpoints.md = breakpoints[2]