From 3cc7c5cb8bbf83fc39a228ecb7f113f9f51cd0ec Mon Sep 17 00:00:00 2001
From: mauroerta <mauro.erta@gmail.com>
Date: Mon, 25 Oct 2021 09:05:17 +0200
Subject: [PATCH] feat: added borders slice

---
 .../CodeSnippets/snippets/general.ts          |  9 ++
 .../src/_shared/components/DropDown/index.tsx |  4 +-
 .../Slices/Borders/Detail/index.tsx           | 30 +++++++
 .../Slices/Borders/Detail/style.module.css    |  4 +
 .../components/Slices/Borders/index.tsx       | 84 +++++++++++++++++++
 .../Slices/Borders/style.module.css           | 11 +++
 .../src/_shared/components/Slices/index.tsx   |  5 +-
 devtool/src/_shared/css/classes.css           | 64 ++++++++++++++
 devtool/src/_shared/css/dark-components.css   | 11 ---
 devtool/src/_shared/css/light-components.css  | 11 ---
 .../_shared/styles/components/typography.ts   |  1 -
 .../src/devtool/pages/Home/style.module.css   |  3 +-
 packages/fonts/src/mountFont.ts               |  2 +-
 13 files changed, 211 insertions(+), 28 deletions(-)
 create mode 100644 devtool/src/_shared/components/Slices/Borders/Detail/index.tsx
 create mode 100644 devtool/src/_shared/components/Slices/Borders/Detail/style.module.css
 create mode 100644 devtool/src/_shared/components/Slices/Borders/index.tsx
 create mode 100644 devtool/src/_shared/components/Slices/Borders/style.module.css

diff --git a/devtool/src/_shared/components/CodeSnippets/snippets/general.ts b/devtool/src/_shared/components/CodeSnippets/snippets/general.ts
index 0df115b1..48cf0c0b 100644
--- a/devtool/src/_shared/components/CodeSnippets/snippets/general.ts
+++ b/devtool/src/_shared/components/CodeSnippets/snippets/general.ts
@@ -5,6 +5,7 @@ import { CodeTab } from '../types';
 type Params = {
   slice: ThemeKey;
   value: string;
+  htmlTag?: string;
   property: string;
   cssProperty?: string;
 };
@@ -12,6 +13,7 @@ type Params = {
 export function general({
   slice,
   value,
+  htmlTag = 'div',
   property,
   cssProperty,
 }: Params): CodeTab[] {
@@ -39,5 +41,12 @@ export function general({
       label: 'CSS',
       language: 'css',
     },
+    {
+      code: `<${htmlTag} class="${paramCase(property)}-${paramCase(
+        value || '',
+      )}" />`,
+      label: 'HTML',
+      language: 'html',
+    },
   ];
 }
diff --git a/devtool/src/_shared/components/DropDown/index.tsx b/devtool/src/_shared/components/DropDown/index.tsx
index ce9bd226..971fcbf1 100644
--- a/devtool/src/_shared/components/DropDown/index.tsx
+++ b/devtool/src/_shared/components/DropDown/index.tsx
@@ -47,7 +47,9 @@ export const DropDown: React.FC<Props> = ({
         className={styles.option}
         onClick={getOnClick(optionValue)}
       >
-        <h4 className="morfeo-typography-h4 ml-xs">{optionLabel}</h4>
+        <h4 className="morfeo-typography-h4 color-text-color ml-xs">
+          {optionLabel}
+        </h4>
       </div>
     ));
   }, [options, getOnClick]);
diff --git a/devtool/src/_shared/components/Slices/Borders/Detail/index.tsx b/devtool/src/_shared/components/Slices/Borders/Detail/index.tsx
new file mode 100644
index 00000000..ad7724de
--- /dev/null
+++ b/devtool/src/_shared/components/Slices/Borders/Detail/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Border, morfeo } from '@morfeo/react';
+import { Card } from '../../../Card';
+import { useRouter } from '../../../../hooks';
+import { RouteState } from '../../../../contexts';
+import styles from './style.module.css';
+
+export const Detail: React.FC = () => {
+  const { route } = useRouter();
+  const { state = {} as RouteState } = route;
+  const { detailKey } = state;
+  const value = morfeo.resolve({ border: detailKey as Border })['border'];
+
+  return (
+    <div className={styles.container}>
+      <Card
+        className="morfeo-card-primary"
+        copyText={detailKey}
+        style={
+          {
+            border: detailKey as Border,
+            size: '200px',
+          } as any
+        }
+      >
+        <h2 className="morfeo-typography-h2">{value}</h2>
+      </Card>
+    </div>
+  );
+};
diff --git a/devtool/src/_shared/components/Slices/Borders/Detail/style.module.css b/devtool/src/_shared/components/Slices/Borders/Detail/style.module.css
new file mode 100644
index 00000000..26e15f15
--- /dev/null
+++ b/devtool/src/_shared/components/Slices/Borders/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/Borders/index.tsx b/devtool/src/_shared/components/Slices/Borders/index.tsx
new file mode 100644
index 00000000..fa08c106
--- /dev/null
+++ b/devtool/src/_shared/components/Slices/Borders/index.tsx
@@ -0,0 +1,84 @@
+import React, { useMemo, useCallback } from 'react';
+import { Border, Borders, useThemeSlice } from '@morfeo/react';
+import clsx from 'clsx';
+import { getValueAndUnit } from 'polished';
+import { Card } from '../../Card';
+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';
+export { Detail } from './Detail';
+
+type Props = {
+  border: Border;
+};
+
+const BorderCard: React.FC<Props> = ({ border }) => {
+  const { navigate } = useRouter();
+
+  const onClick = useCallback(() => {
+    navigate(RouteName.SLICE, {
+      slice: SliceName.BORDERS,
+      detailKey: border,
+    });
+  }, [border, navigate]);
+
+  return (
+    <div className={styles.container} onClick={onClick}>
+      <Card copyText={border} className="morfeo-card-primary-clickable">
+        <Card
+          style={
+            {
+              border,
+              size: 'var(--sizes-xxl)',
+            } as any
+          }
+        />
+      </Card>
+      <h3 className={clsx('morfeo-typography-h2', styles.name)} title={border}>
+        {border}
+      </h3>
+    </div>
+  );
+};
+
+function getSortedBorders(borders: Borders) {
+  const keys = Object.keys(borders) as Border[];
+
+  return keys.sort((first, second) => {
+    const [firstValue] = getValueAndUnit(
+      borders[first].width?.toString() || '0',
+    );
+    const [secondValue] = getValueAndUnit(
+      borders[second].width?.toString() || '0',
+    );
+    if (typeof firstValue !== 'number') {
+      return Infinity;
+    }
+
+    if (typeof secondValue !== 'number') {
+      return -Infinity;
+    }
+
+    return firstValue - secondValue;
+  });
+}
+
+export const BordersSlice: React.FC = () => {
+  const borders = useThemeSlice('borders');
+
+  const keys = useMemo(() => getSortedBorders(borders || {}), [borders]);
+
+  const section = useMemo(() => {
+    return keys.map(key => {
+      return (
+        <Item key={`borders-${key}`}>
+          <BorderCard border={key} />
+        </Item>
+      );
+    });
+  }, [keys]);
+
+  return <Grid>{section}</Grid>;
+};
diff --git a/devtool/src/_shared/components/Slices/Borders/style.module.css b/devtool/src/_shared/components/Slices/Borders/style.module.css
new file mode 100644
index 00000000..149010a7
--- /dev/null
+++ b/devtool/src/_shared/components/Slices/Borders/style.module.css
@@ -0,0 +1,11 @@
+
+.container {
+  width: 100%;
+}
+
+.name {
+  max-width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
\ 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 d27dbc13..f118dd5b 100644
--- a/devtool/src/_shared/components/Slices/index.tsx
+++ b/devtool/src/_shared/components/Slices/index.tsx
@@ -3,6 +3,7 @@ import { RadiiSlice, Detail as RadiusDetail } from './Radii';
 import { Colors, Detail as ColorDetail } from './Colors';
 import { Gradients, Detail as GradientDetail } from './Gradients';
 import { Components, Detail as ComponentDetail } from './Components';
+import { BordersSlice, Detail as BorderDetail } from './Borders';
 
 export type SliceConfig = {
   render: React.FC;
@@ -42,8 +43,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'shadows',
   },
   [SliceName.BORDERS]: {
-    render: () => <></>,
-    renderDetail: () => <></>,
+    render: () => <BordersSlice />,
+    renderDetail: () => <BorderDetail />,
     displayName: 'borders',
   },
   [SliceName.SPACINGS]: {
diff --git a/devtool/src/_shared/css/classes.css b/devtool/src/_shared/css/classes.css
index 4ab78e64..996a3c34 100644
--- a/devtool/src/_shared/css/classes.css
+++ b/devtool/src/_shared/css/classes.css
@@ -1207,6 +1207,14 @@
 .height-xxs {
   height: var(--sizes-xxs);
 }
+.min-size-xxs {
+  min-width: var(--sizes-xxs);
+  min-height: var(--sizes-xxs);
+}
+.max-size-xxs {
+  max-width: var(--sizes-xxs);
+  max-height: var(--sizes-xxs);
+}
 .min-width-xxs {
   min-width: var(--sizes-xxs);
 }
@@ -1250,6 +1258,14 @@
 .height-xs {
   height: var(--sizes-xs);
 }
+.min-size-xs {
+  min-width: var(--sizes-xs);
+  min-height: var(--sizes-xs);
+}
+.max-size-xs {
+  max-width: var(--sizes-xs);
+  max-height: var(--sizes-xs);
+}
 .min-width-xs {
   min-width: var(--sizes-xs);
 }
@@ -1293,6 +1309,14 @@
 .height-s {
   height: var(--sizes-s);
 }
+.min-size-s {
+  min-width: var(--sizes-s);
+  min-height: var(--sizes-s);
+}
+.max-size-s {
+  max-width: var(--sizes-s);
+  max-height: var(--sizes-s);
+}
 .min-width-s {
   min-width: var(--sizes-s);
 }
@@ -1336,6 +1360,14 @@
 .height-m {
   height: var(--sizes-m);
 }
+.min-size-m {
+  min-width: var(--sizes-m);
+  min-height: var(--sizes-m);
+}
+.max-size-m {
+  max-width: var(--sizes-m);
+  max-height: var(--sizes-m);
+}
 .min-width-m {
   min-width: var(--sizes-m);
 }
@@ -1379,6 +1411,14 @@
 .height-l {
   height: var(--sizes-l);
 }
+.min-size-l {
+  min-width: var(--sizes-l);
+  min-height: var(--sizes-l);
+}
+.max-size-l {
+  max-width: var(--sizes-l);
+  max-height: var(--sizes-l);
+}
 .min-width-l {
   min-width: var(--sizes-l);
 }
@@ -1422,6 +1462,14 @@
 .height-xl {
   height: var(--sizes-xl);
 }
+.min-size-xl {
+  min-width: var(--sizes-xl);
+  min-height: var(--sizes-xl);
+}
+.max-size-xl {
+  max-width: var(--sizes-xl);
+  max-height: var(--sizes-xl);
+}
 .min-width-xl {
   min-width: var(--sizes-xl);
 }
@@ -1465,6 +1513,14 @@
 .height-xxl {
   height: var(--sizes-xxl);
 }
+.min-size-xxl {
+  min-width: var(--sizes-xxl);
+  min-height: var(--sizes-xxl);
+}
+.max-size-xxl {
+  max-width: var(--sizes-xxl);
+  max-height: var(--sizes-xxl);
+}
 .min-width-xxl {
   min-width: var(--sizes-xxl);
 }
@@ -1508,6 +1564,14 @@
 .height-none {
   height: var(--sizes-none);
 }
+.min-size-none {
+  min-width: var(--sizes-none);
+  min-height: var(--sizes-none);
+}
+.max-size-none {
+  max-width: var(--sizes-none);
+  max-height: var(--sizes-none);
+}
 .min-width-none {
   min-width: var(--sizes-none);
 }
diff --git a/devtool/src/_shared/css/dark-components.css b/devtool/src/_shared/css/dark-components.css
index 4d279e80..23d6b943 100644
--- a/devtool/src/_shared/css/dark-components.css
+++ b/devtool/src/_shared/css/dark-components.css
@@ -105,18 +105,15 @@
   background-color: var(--colors-success);
 }
 [data-morfeo-theme="dark"] .morfeo-typography {
-  color: var(--colors-text-color);
   font-family: var(--fonts-regular);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-hero {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-l);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h1 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xl);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
@@ -124,48 +121,41 @@
   letter-spacing: var(--letter-spacings-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h2 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h3 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h4 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p1 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p2 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p3 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xs);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p4 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xxs);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
@@ -181,7 +171,6 @@
   color: var(--colors-primary-lightest);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-caption {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xxs);
   font-style: italic;
   font-family: var(--fonts-regular);
diff --git a/devtool/src/_shared/css/light-components.css b/devtool/src/_shared/css/light-components.css
index f8c23b30..151c5032 100644
--- a/devtool/src/_shared/css/light-components.css
+++ b/devtool/src/_shared/css/light-components.css
@@ -105,18 +105,15 @@
   background-color: var(--colors-success);
 }
 [data-morfeo-theme="light"] .morfeo-typography {
-  color: var(--colors-text-color);
   font-family: var(--fonts-regular);
 }
 [data-morfeo-theme="light"] .morfeo-typography-hero {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-l);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h1 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xl);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
@@ -124,48 +121,41 @@
   letter-spacing: var(--letter-spacings-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h2 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h3 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h4 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p1 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p2 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p3 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xs);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p4 {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xxs);
   font-family: var(--fonts-regular);
   line-height: var(--line-heights-body);
@@ -181,7 +171,6 @@
   color: var(--colors-primary-lightest);
 }
 [data-morfeo-theme="light"] .morfeo-typography-caption {
-  color: var(--colors-text-color);
   font-size: var(--font-sizes-xxs);
   font-style: italic;
   font-family: var(--fonts-regular);
diff --git a/devtool/src/_shared/styles/components/typography.ts b/devtool/src/_shared/styles/components/typography.ts
index e15995b1..6bb551c9 100644
--- a/devtool/src/_shared/styles/components/typography.ts
+++ b/devtool/src/_shared/styles/components/typography.ts
@@ -3,7 +3,6 @@ import { ComponentConfig } from '@morfeo/react';
 export const Typography: ComponentConfig = {
   style: {
     fontFamily: 'regular',
-    color: 'textColor',
   },
   variants: {
     hero: {
diff --git a/devtool/src/devtool/pages/Home/style.module.css b/devtool/src/devtool/pages/Home/style.module.css
index 8eef3140..a439b208 100644
--- a/devtool/src/devtool/pages/Home/style.module.css
+++ b/devtool/src/devtool/pages/Home/style.module.css
@@ -24,7 +24,7 @@
 }
 
 .valuesContainer.comingSoon {
-  background-color: var(--colors-primary-darker);
+  background-color: var(--colors-primary);
   font-weight: bold;
 }
 
@@ -54,6 +54,7 @@
   max-width: 0;
   position: absolute;
   margin-left: var(--spacings-xxs);
+  margin-right: var(--spacings-xxs);
   transition: var(--transitions-medium);
 }
 
diff --git a/packages/fonts/src/mountFont.ts b/packages/fonts/src/mountFont.ts
index eee1df3c..2bbb7fa0 100644
--- a/packages/fonts/src/mountFont.ts
+++ b/packages/fonts/src/mountFont.ts
@@ -92,7 +92,7 @@ export function mountFont(font: MountFontParams) {
   }
 
   const newFontStyle = `
-    <style id="font-${font.name}">
+    <style class="morfeo-font" id="font-${font.name}">
       ${newFontFaceContent}
     </style>
   `;