diff --git a/devtool/src/_shared/components/Card/style.module.css b/devtool/src/_shared/components/Card/style.module.css index 465d09ab..be36422b 100644 --- a/devtool/src/_shared/components/Card/style.module.css +++ b/devtool/src/_shared/components/Card/style.module.css @@ -4,7 +4,7 @@ align-items: center; flex-direction: column; justify-content: center; - width: 10rem; + width: 100%; height: 10rem; } diff --git a/devtool/src/_shared/components/Grid/Item/index.tsx b/devtool/src/_shared/components/Grid/Item/index.tsx new file mode 100644 index 00000000..9041d1dc --- /dev/null +++ b/devtool/src/_shared/components/Grid/Item/index.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import styles from './style.module.css'; + +export const Item: React.FC = ({ children }) => { + return (
{children}
) +} \ No newline at end of file diff --git a/devtool/src/_shared/components/Grid/Item/style.module.css b/devtool/src/_shared/components/Grid/Item/style.module.css new file mode 100644 index 00000000..1c4ddbac --- /dev/null +++ b/devtool/src/_shared/components/Grid/Item/style.module.css @@ -0,0 +1,34 @@ +.item { + display: flex; + align-items: flex-start; + flex-direction: column; + padding: var(--spacings-xs); + min-width: 25%; + box-sizing: border-box; + position: relative; +} + +@media screen and (min-width: 375px) { + .item { + min-width: 50%; + } +} + +@media screen and (min-width: 768px) { + .item { + min-width: 33.3%; + } +} + + +@media screen and (min-width: 1366px) { + .item { + min-width: 25%; + } +} + +@media screen and (min-width: 1920px) { + .item { + min-width: 20%; + } +} \ No newline at end of file diff --git a/devtool/src/_shared/components/Grid/index.tsx b/devtool/src/_shared/components/Grid/index.tsx new file mode 100644 index 00000000..81b770b8 --- /dev/null +++ b/devtool/src/_shared/components/Grid/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import styles from './style.module.css'; +export { Item } from './Item/index'; + +export const Grid: React.FC = ({ children }) => { + return
{children}
+} \ No newline at end of file diff --git a/devtool/src/_shared/components/Grid/style.module.css b/devtool/src/_shared/components/Grid/style.module.css new file mode 100644 index 00000000..21949bf2 --- /dev/null +++ b/devtool/src/_shared/components/Grid/style.module.css @@ -0,0 +1,6 @@ +.section { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + position: relative; +} \ No newline at end of file diff --git a/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx b/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx new file mode 100644 index 00000000..4bbfe09a --- /dev/null +++ b/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx @@ -0,0 +1,26 @@ +import React, { useMemo } from 'react'; +import { Card } from '../../../Card'; +import { useRouter } from '../../../../hooks/useRouter'; +import { Color, useTheme } from '@morfeo/react'; +import styles from './style.module.css'; + +export const Detail: React.FC = () => { + const { route } = useRouter(); + const { state } = route; + + const theme = useTheme(); + const colorSlice = useMemo(() => (theme || {})['colors'] || {}, [theme]); + console.log({ state, theme, colorSlice }); + const bgColor = useMemo( + () => + (state?.detailKey && (colorSlice || {})[state.detailKey as Color]) || + 'white', + [colorSlice, state?.detailKey], + ); + + return ( +
+ +
+ ); +}; diff --git a/devtool/src/_shared/components/Slices/Colors/Detail/style.module.css b/devtool/src/_shared/components/Slices/Colors/Detail/style.module.css new file mode 100644 index 00000000..26e15f15 --- /dev/null +++ b/devtool/src/_shared/components/Slices/Colors/Detail/style.module.css @@ -0,0 +1,4 @@ +.container { + padding-left: var(--spacings-xs); + padding-right: var(--spacings-xs); +} \ No newline at end of file diff --git a/devtool/src/_shared/components/Slices/Colors/index.tsx b/devtool/src/_shared/components/Slices/Colors/index.tsx index 7f8ac911..9ec16b25 100644 --- a/devtool/src/_shared/components/Slices/Colors/index.tsx +++ b/devtool/src/_shared/components/Slices/Colors/index.tsx @@ -7,6 +7,8 @@ import styles from './style.module.css'; import { useRouter } from '../../../hooks/useRouter'; import { RouteName } from '../../../contexts'; import { SliceName } from '../../../contexts/Routing/types'; +import { Grid, Item } from '../../Grid'; +export { Detail } from './Detail'; export const Colors: React.FC = () => { const theme = useTheme(); @@ -26,45 +28,47 @@ export const Colors: React.FC = () => { const contrastRatio = getContrast(slice[key], '#fff'); return ( -
- navigate(RouteName.SLICE, { - slice: SliceName.COLORS, - detailKey: key, - }) - } - > - +
+ navigate(RouteName.SLICE, { + slice: SliceName.COLORS, + detailKey: key, + }) + } > -

- {slice[key]} -

- -

- {key} -

-
+

+ {slice[key]} +

+ +

+ {key} +

+
+ ); }); }, [navigate, slice, sliceKeys]); - return <>{section}; + return {section}; }; diff --git a/devtool/src/_shared/components/Slices/Colors/style.module.css b/devtool/src/_shared/components/Slices/Colors/style.module.css index 92abb758..623d575f 100644 --- a/devtool/src/_shared/components/Slices/Colors/style.module.css +++ b/devtool/src/_shared/components/Slices/Colors/style.module.css @@ -1,8 +1,6 @@ + .colorContainer { - display: flex; - align-items: flex-start; - flex-direction: column; - padding: var(--spacings-xs); + width: 100%; } .colorName { @@ -10,4 +8,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; +} + +.colorSection { + display: flex; + flex-wrap: wrap; + justify-content: stretch; + box-sizing: border-box; } \ No newline at end of file diff --git a/devtool/src/_shared/components/Slices/index.tsx b/devtool/src/_shared/components/Slices/index.tsx index 1eda1744..1de90610 100644 --- a/devtool/src/_shared/components/Slices/index.tsx +++ b/devtool/src/_shared/components/Slices/index.tsx @@ -1,6 +1,5 @@ import { SliceName } from '../../contexts'; -import { ColorDetail } from './Color'; -import { Colors } from './Colors/index'; +import { Colors, Detail as ColorDetail } from './Colors/index'; export const slices = { [SliceName.COLORS]: { diff --git a/devtool/src/_shared/css/dark-components.css b/devtool/src/_shared/css/dark-components.css index c137d7aa..4d279e80 100644 --- a/devtool/src/_shared/css/dark-components.css +++ b/devtool/src/_shared/css/dark-components.css @@ -8,6 +8,15 @@ flex-direction: column; } [data-morfeo-theme="dark"] .morfeo-card-primary { + color: var(--colors-text-color); + cursor: pointer; + display: flex; + box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest); + align-items: center; + border-radius: var(--radii-s); + flex-direction: column; +} +[data-morfeo-theme="dark"] .morfeo-card-primary-clickable { color: var(--colors-text-color); cursor: pointer; display: flex; @@ -17,7 +26,7 @@ border-radius: var(--radii-s); flex-direction: column; } -[data-morfeo-theme="dark"] .morfeo-card-primary:hover { +[data-morfeo-theme="dark"] .morfeo-card-primary-clickable:hover { transform: translateY(-5px); box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter); } diff --git a/devtool/src/_shared/css/light-components.css b/devtool/src/_shared/css/light-components.css index 08cd7706..f8c23b30 100644 --- a/devtool/src/_shared/css/light-components.css +++ b/devtool/src/_shared/css/light-components.css @@ -8,6 +8,15 @@ flex-direction: column; } [data-morfeo-theme="light"] .morfeo-card-primary { + color: var(--colors-text-color); + cursor: pointer; + display: flex; + box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest); + align-items: center; + border-radius: var(--radii-s); + flex-direction: column; +} +[data-morfeo-theme="light"] .morfeo-card-primary-clickable { color: var(--colors-text-color); cursor: pointer; display: flex; @@ -17,7 +26,7 @@ border-radius: var(--radii-s); flex-direction: column; } -[data-morfeo-theme="light"] .morfeo-card-primary:hover { +[data-morfeo-theme="light"] .morfeo-card-primary-clickable:hover { transform: translateY(-5px); box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter); } diff --git a/devtool/src/_shared/styles/components/card.ts b/devtool/src/_shared/styles/components/card.ts index 7273c5a5..a20e129c 100644 --- a/devtool/src/_shared/styles/components/card.ts +++ b/devtool/src/_shared/styles/components/card.ts @@ -12,6 +12,11 @@ export const Card: ComponentConfig = { }, variants: { primary: { + style: { + shadow: 'light', + }, + }, + 'primary.clickable': { style: { shadow: 'light', transition: 'fast', @@ -20,7 +25,7 @@ export const Card: ComponentConfig = { transform: 'translateY(-5px)', }, }, - }, + } }, meta: { tags: ['container', 'ui'], diff --git a/devtool/src/_shared/template/Page/index.tsx b/devtool/src/_shared/template/Page/index.tsx index 9f6b6a0f..fe2bab0e 100644 --- a/devtool/src/_shared/template/Page/index.tsx +++ b/devtool/src/_shared/template/Page/index.tsx @@ -22,7 +22,7 @@ export const Page: React.FC = ({ children, title, breadcrumb }) => { )} -
{children}
+ {children} ); }; diff --git a/devtool/src/_shared/template/Page/page.module.css b/devtool/src/_shared/template/Page/page.module.css index 3b57d042..ed7b8a5f 100644 --- a/devtool/src/_shared/template/Page/page.module.css +++ b/devtool/src/_shared/template/Page/page.module.css @@ -12,10 +12,4 @@ .breadcrumb { color: var(--colors-gray-light) !important; -} - -.section { - display: flex; - flex-wrap: wrap; - justify-content: space-between; } \ No newline at end of file diff --git a/devtool/src/devtool/pages/Home/index.tsx b/devtool/src/devtool/pages/Home/index.tsx index efe2c511..ac082ca7 100644 --- a/devtool/src/devtool/pages/Home/index.tsx +++ b/devtool/src/devtool/pages/Home/index.tsx @@ -8,6 +8,7 @@ import { SliceName } from '../../../_shared/contexts/Routing/types'; import { IconName } from '../../../_shared/components/Icon/icons'; import styles from './style.module.css'; import clsx from 'clsx'; +import { Grid, Item } from '../../../_shared/components/Grid/index'; export const Home: React.FC = () => { const themeSlices = useThemeSlices(); @@ -16,22 +17,28 @@ export const Home: React.FC = () => { const renderedSlices = useMemo( () => themeSlices.map(slice => ( -
- - navigate(RouteName.SLICE, { slice: slice as SliceName }) - } - > - - -

- {capitalCase(noCase(slice))} -

-
+ +
+ + navigate(RouteName.SLICE, { slice: slice as SliceName }) + } + > + + +

+ {capitalCase(noCase(slice))} +

+
+ )), [navigate, themeSlices], ); - return {renderedSlices}; + return ( + + {renderedSlices} + + ); }; diff --git a/devtool/src/devtool/pages/Home/style.module.css b/devtool/src/devtool/pages/Home/style.module.css index d9ce86a1..2948eb79 100644 --- a/devtool/src/devtool/pages/Home/style.module.css +++ b/devtool/src/devtool/pages/Home/style.module.css @@ -1,10 +1,7 @@ -.sliceContainer { - display: flex; - flex-direction: column; - margin: var(--spacings-xs); +.sliceCard { + width: 100%; } -.sliceCard { - width: 180px; - height: 180px; +.sliceContainer { + width: 100%; } \ No newline at end of file diff --git a/devtool/src/devtool/pages/Slice/index.tsx b/devtool/src/devtool/pages/Slice/index.tsx index 4d36ae9d..1aa791e2 100644 --- a/devtool/src/devtool/pages/Slice/index.tsx +++ b/devtool/src/devtool/pages/Slice/index.tsx @@ -15,6 +15,7 @@ export const Slice: React.FC = () => { const renderContent = useMemo(() => { if (state?.detailKey) { + console.log('renderDetail', slices[state.slice].renderDetail) return slices[state.slice].renderDetail || <>; }