Merge pull request morfeojs#94 from VLK-STUDIO/feat/93

Feat/93
VLK-STUDIO · Oct 30, 2021 · 727d683 · 727d683
2 parents d021562 + 066639a
commit 727d683
Show file tree

Hide file tree

Showing 56 changed files with 301 additions and 386 deletions.
diff --git a/devtool/public/_locales/en/messages.json b/devtool/public/_locales/en/messages.json
@@ -42,9 +42,6 @@
   "headerMyThemesPlaceholder": {
     "message": "Select..."
   },
-  "sliceCodeTitle": {
-    "message": "Code snippet"
-  },
   "sidebarDocs": {
     "message": "Docs"
   },

diff --git a/devtool/public/_locales/it/messages.json b/devtool/public/_locales/it/messages.json
@@ -45,9 +45,6 @@
   "headerMyThemesPlaceholder": {
     "message": "Seleziona..."
   },
-  "sliceCodeTitle": {
-    "message": "Snippet di codice"
-  },
   "sidebarDocs": {
     "message": "Docs"
   },

diff --git a/devtool/src/_shared/components/Accordion/index.tsx b/devtool/src/_shared/components/Accordion/index.tsx
@@ -37,12 +37,12 @@ export const Accordion: React.FC<Props> = ({
               className={styles.icon}
             />
           )}
-          <h4
-            className="morfeo-typography-h1"
+          <h2
+            className="morfeo-typography-h2"
             style={{ color: 'var(--color-inverted-text-color)' }}
           >
             {label}
-          </h4>
+          </h2>
         </div>
       </div>
       <div className={styles.content}>{children}</div>

diff --git a/devtool/src/_shared/components/CodeSnippets/index.tsx b/devtool/src/_shared/components/CodeSnippets/index.tsx
@@ -4,7 +4,6 @@ import { Code } from '../Code';
 import styles from './style.module.css';
 import { ThemeKey } from '@morfeo/react';
 import { getCodeSnippets } from './snippets';
-import { t } from '../../utils';
 
 type Props = {
   slice: ThemeKey;
@@ -56,7 +55,6 @@ export const CodeSnippets: React.FC<Props> = ({
 
   return (
     <>
-      <h1 className="morfeo-typography-h1">{t('sliceCodeTitle')}</h1>
       <div className={styles.header}>{renderedHeaders}</div>
       <div>{currentCode}</div>
     </>

diff --git a/devtool/src/_shared/components/DropDown/index.tsx b/devtool/src/_shared/components/DropDown/index.tsx
@@ -65,7 +65,7 @@ export const DropDown: React.FC<Props> = ({
       )}
     >
       {title && (
-        <h3 className={clsx('morfeo-typography-h3', styles.title)}>{title}</h3>
+        <h4 className={clsx('morfeo-typography-h4', styles.title)}>{title}</h4>
       )}
       <div className={styles.buttonContainer}>
         <button

diff --git a/devtool/src/_shared/components/DropDown/style.module.css b/devtool/src/_shared/components/DropDown/style.module.css
@@ -25,6 +25,7 @@
   align-items: center;
   justify-content: space-between;
   background-color: var(--colors-background) !important;
+  font-size: var(--font-sizes-s) !important;
 }
 
 .inverted .button {

diff --git a/devtool/src/_shared/components/Slices/Borders/BorderCard/BorderCard.tsx b/devtool/src/_shared/components/Slices/Borders/BorderCard/BorderCard.tsx
@@ -4,14 +4,16 @@ import { getContrast } from 'polished';
 import { Card } from '../../../Card';
 import { Props as DetailProps } from '../Detail';
 import { BorderSlice } from '../index';
-import { DetailLabel } from '../../../DetailLabel';
+import { DetailLabel } from '../../_shared/DetailLabel';
+import { ListItemCard } from '../../_shared/ListItemCard';
 
 export type Props = {
   clickable?: boolean;
   detailKey: string;
   showValues?: boolean;
   mainSlice: DetailProps['mainSlice'];
   filters?: Record<'borderWidths' | 'borderStyles' | 'colors', string>;
+  showTitle?: boolean;
 };
 
 const propertiesMap: Record<BorderSlice, keyof React.CSSProperties> = {
@@ -26,6 +28,7 @@ export const BorderCard: React.FC<Props> = ({
   showValues,
   mainSlice,
   filters,
+  showTitle,
 }) => {
   const isBorders = mainSlice === 'borders';
   const themeValue = useThemeValue(mainSlice, detailKey as any);
@@ -76,20 +79,21 @@ export const BorderCard: React.FC<Props> = ({
 
   return (
     <>
-      <Card
-        className={`${
-          clickable ? 'morfeo-card-primary-clickable' : 'morfeo-card-primary'
-        } ${contrastRatio < 1.95 ? 'bg-black' : 'bg-white'}`}
+      <ListItemCard
+        title={showTitle ? detailKey : ''}
+        clickable={clickable}
+        mode={contrastRatio < 1.95 ? 'dark' : 'light'}
+        copyText={detailKey}
       >
         <Card
           style={
             {
               ...innerCardStyle,
-              size: '100%',
+              size: '100px',
             } as any
           }
         />
-      </Card>
+      </ListItemCard>
       {showValues && (
         <DetailLabel value={(style as any)[propertiesMap[mainSlice]]} />
       )}

diff --git a/devtool/src/_shared/components/Slices/Borders/index.tsx b/devtool/src/_shared/components/Slices/Borders/index.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
 import { Border, Borders, useThemeSlice } from '@morfeo/react';
-import clsx from 'clsx';
 import { getValueAndUnit } from 'polished';
 import { useRouter } from '../../../hooks/useRouter';
 import { RouteName } from '../../../contexts';
@@ -37,13 +36,11 @@ const BorderListItem: React.FC<Props> = ({ value }) => {
   return (
     <div className={styles.container} onClick={onClick}>
       <BorderCard
+        showTitle
         mainSlice={state?.slice as BorderSlice}
         detailKey={value}
         clickable
       />
-      <h3 className={clsx('morfeo-typography-h2', styles.name)} title={value}>
-        {value}
-      </h3>
     </div>
   );
 };

diff --git a/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx b/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx
@@ -3,7 +3,7 @@ import { Color, useStyle } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import styles from './style.module.css';
-import { DetailLabel } from '../../../DetailLabel';
+import { DetailLabel } from '../../_shared/DetailLabel';
 
 function hex2rgba(code: string) {
   let hex = code.replace(/[^0-9a-fA-F]/g, '');

diff --git a/devtool/src/_shared/components/Slices/Colors/Detail/style.module.css b/devtool/src/_shared/components/Slices/Colors/Detail/style.module.css
@@ -6,7 +6,5 @@
 .colorsCodesContainer {
   display: flex;
   align-items: center;
-  margin-top: var(--spacings-xs);
-  margin-bottom: var(--spacings-xs);
   justify-content: space-between;
 }
diff --git a/devtool/src/_shared/components/Slices/Colors/index.tsx b/devtool/src/_shared/components/Slices/Colors/index.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from 'react';
 import { Color, useTheme } from '@morfeo/react';
-import clsx from 'clsx';
 import { getContrast } from 'polished';
-import { Card } from '../../Card';
-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';
+import { ListItemCard } from '../_shared/ListItemCard';
 export { Detail } from './Detail';
 
 export const Colors: React.FC = () => {
@@ -29,42 +27,32 @@ export const Colors: React.FC = () => {
 
       return (
         <Item key={`colors-${key}`}>
-          <div
-            key={`colors-${key}`}
-            className={styles.colorContainer}
+          <ListItemCard
             onClick={() =>
               navigate(RouteName.SLICE, {
                 slice: SliceName.COLORS,
                 detailKey: key,
               })
             }
+            title={key}
+            clickable
+            style={{
+              bg: key as Color
+            }}
+            copyText={key}
           >
-            <Card
-              copyText={key}
-              className="morfeo-card-primary-clickable"
+            <h3
+              className="morfeo-typography-h3"
               style={{
-                bg: key,
+                color:
+                  contrastRatio < 1.95
+                    ? 'var(--colors-gray-darkest)'
+                    : 'var(--colors-gray-lightest)',
               }}
             >
-              <h2
-                className="morfeo-typography-h2"
-                style={{
-                  color:
-                    contrastRatio < 1.95
-                      ? 'var(--colors-gray-darkest)'
-                      : 'var(--colors-gray-lightest)',
-                }}
-              >
-                {slice[key]}
-              </h2>
-            </Card>
-            <h3
-              className={clsx('morfeo-typography-h2', styles.colorName)}
-              title={key}
-            >
-              {key}
+              {slice[key]}
             </h3>
-          </div>
+          </ListItemCard>
         </Item>
       );
     });

diff --git a/devtool/src/_shared/components/Slices/Colors/style.module.css b/devtool/src/_shared/components/Slices/Colors/style.module.css
diff --git a/devtool/src/_shared/components/Slices/Components/Preview.tsx b/devtool/src/_shared/components/Slices/Components/Preview.tsx
@@ -22,14 +22,14 @@ const Info: React.FC<Props> = ({ name, variant }) => {
   return (
     <div className={styles.infoContainer}>
       <div className={styles.infoHeader}>
-        <h2
-          className={clsx('morfeo-typography-h2', styles.componentName)}
+        <h3
+          className={clsx('morfeo-typography-h3', styles.componentName)}
           title={variant || name}
         >
           {variant || name}
-        </h2>
+        </h3>
         {numberOfVariants > 0 && !variant && (
-          <p className={clsx('morfeo-typography-p1', styles.componentName)}>
+          <p className={clsx('morfeo-typography-p2', styles.componentName)}>
             {numberOfVariants} variants
           </p>
         )}

diff --git a/devtool/src/_shared/components/Slices/Components/Tags/index.tsx b/devtool/src/_shared/components/Slices/Components/Tags/index.tsx
@@ -14,7 +14,7 @@ export const Tags: React.FC<Props> = ({ name, variant }) => {
 
   return (
     <div className={styles.infoTags}>
-      <p className={clsx('morfeo-typography-p1', styles.tag)}>
+      <p className={clsx('morfeo-typography-p2', styles.tag)}>
         {tags.length > 0 ? `#${tags.join(' #')}` : ''}
       </p>
     </div>

diff --git a/devtool/src/_shared/components/Slices/Components/style.module.css b/devtool/src/_shared/components/Slices/Components/style.module.css
@@ -11,6 +11,8 @@
   width: 100%;
   height: 125px;
   box-shadow: none;
+  max-width: 100%;
+  overflow: hidden;  
 }
 
 .infoContainer {

diff --git a/devtool/src/_shared/components/Slices/Fonts/Detail/index.tsx b/devtool/src/_shared/components/Slices/Fonts/Detail/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { morfeo, useStyle } from '@morfeo/react';
+import { morfeo, useStyle, useThemeSlice, Font } from '@morfeo/react';
 import { capitalCase, noCase, paramCase } from 'change-case';
 import clsx from 'clsx';
 import { Card } from '../../../Card';
@@ -9,7 +9,7 @@ import styles from './style.module.css';
 import { Input } from '../../../Input';
 import { DropDown } from '../../../DropDown';
 import { t } from '../../../../utils';
-import { DetailLabel } from '../../../DetailLabel';
+import { DetailLabel } from '../../_shared/DetailLabel';
 
 const fontSlices = [
   'fonts',
@@ -19,7 +19,7 @@ const fontSlices = [
   'lineHeights',
 ] as const;
 
-const propertiesMap = {
+export const propertiesMap = {
   fonts: 'fontFamily',
   fontSizes: 'fontSize',
   fontWeights: 'fontWeight',
@@ -45,6 +45,12 @@ export const Detail: React.FC<Props> = ({ main = 'fonts' }) => {
   );
   const { state = {} as RouteState } = route;
   const { detailKey } = state;
+  const themeFonts = useThemeSlice('fonts')
+
+  const firstFont = useMemo(() => {
+    const fontArray = Object.keys(themeFonts)
+    return fontArray[0] as Font
+  }, [themeFonts])
 
   const filteredFontSlices = useMemo(
     () => fontSlices.filter(slice => slice !== main),
@@ -54,11 +60,15 @@ export const Detail: React.FC<Props> = ({ main = 'fonts' }) => {
     [propertiesMap[main]]: detailKey,
     ...filteredFontSlices.reduce((acc, curr) => {
       if (filtersState[curr]) {
-        return { ...acc, [propertiesMap[curr]]: filtersState[curr] };
+        return { 
+          ...acc, 
+          [propertiesMap[curr]]: filtersState[curr],
+        };
       }
 
       return acc;
     }, {}),
+    ...firstFont && main !== 'fonts' && { fontFamily: firstFont as Font }
   };
   const fontStyle = useStyle(style);
 

diff --git a/devtool/src/_shared/components/Slices/Fonts/General.tsx b/devtool/src/_shared/components/Slices/Fonts/General.tsx
@@ -1,11 +1,11 @@
 import React, { useMemo, useCallback } from 'react';
-import { Font, useStyle, ThemeKey, useThemeSlice } from '@morfeo/react';
-import { Card } from '../../Card';
+import { Font, useStyle, ThemeKey, useThemeSlice, Fonts, useTheme } from '@morfeo/react';
 import { useRouter } from '../../../hooks/useRouter';
 import { RouteName } from '../../../contexts';
 import { SliceName } from '../../../contexts/Routing/types';
 import { Grid, Item } from '../../Grid';
 import styles from './style.module.css';
+import { ListItemCard } from '../_shared/ListItemCard';
 
 export { Detail } from './Detail';
 
@@ -20,8 +20,16 @@ type Props = {
 
 const ItemCard: React.FC<ItemProps> = ({ property, value }) => {
   const { navigate, route } = useRouter();
+  const themeFonts = useTheme().fonts;
+
+  const firstFont = useMemo(() => {
+    const fontArray = Object.keys(themeFonts)
+    return fontArray[0] as keyof Fonts
+  }, [themeFonts])
+
   const fontStyle = useStyle({
     [property]: value,
+    ...firstFont && property !== 'fontFamily' && { fontFamily: firstFont }
   });
 
   const onClick = useCallback(() => {
@@ -32,14 +40,11 @@ const ItemCard: React.FC<ItemProps> = ({ property, value }) => {
   }, [navigate, route.state?.slice, value]);
 
   return (
-    <div className={styles.container} onClick={onClick}>
-      <Card copyText={value} className="morfeo-card-primary-clickable">
-        <h1 className={styles.name} title={value} style={fontStyle as any}>
+    <ListItemCard title={value} onClick={onClick} mode='light' clickable>
+      <h1 className={styles.name} title={value} style={fontStyle as any}>
           Aa
-        </h1>
-      </Card>
-      <h2 className="morfeo-typography-h2">{value}</h2>
-    </div>
+      </h1>
+    </ListItemCard>
   );
 };