feat: border slices

devtool/src/_shared/components/Slices/Borders/BorderCard/BorderCard.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import { useStyle, useThemeValue, Border, Color, Size } from '@morfeo/react';
+import { getContrast } from 'polished';
+import { Card } from '../../../Card';
+import { Props as DetailProps } from '../Detail'
+
+export type Props = {
+  clickable?: boolean;
+  detailKey: string;
+  showValues?: boolean;
+  mainSlice: DetailProps['mainSlice'];
+  filters?: Record<'borderWidths' | 'borderStyles' | 'colors', string>
+};
+
+export const BorderCard: React.FC<Props> = ({
+  clickable,
+  detailKey,
+  showValues,
+  mainSlice,
+  filters,
+}) => {
+  const isBorders = mainSlice === 'borders';
+  const themeValue = useThemeValue(mainSlice, detailKey as any);
+  const borderColor = useThemeValue('colors', (isBorders ? themeValue.color : filters?.colors || '') as Color);
+  const style = useStyle({
+    border: detailKey as Border,
+  });
+
+  const contrastRatio = useMemo(() => {
+    if (!borderColor || borderColor === 'none') {
+      return 2;
+    }
+    return getContrast(borderColor || '#000000' as string, '#ffffff');
+  }, [borderColor]);
+
+  const innerCardStyle = useMemo(() => {
+    if (mainSlice === 'borders') {
+      return {
+        border: detailKey
+      }
+    }
+    if (mainSlice === 'borderWidths') {
+      return {
+        borderWidth: detailKey,
+        borderColor: filters?.colors || borderColor || 'var(--colors-dark)',
+        borderStyle: filters?.borderStyles || 'var(--border-styles-solid)'
+      }
+    }
+    if (mainSlice === 'borderStyles') {
+      return {
+        borderStyle: detailKey,
+        borderColor: filters?.colors || borderColor || 'var(--colors-dark)',
+        borderWidth: filters?.borderWidths || 'var(--border-widths-m)'
+      }
+    }
+    return {}
+  }, [borderColor, detailKey, filters?.borderStyles, filters?.borderWidths, filters?.colors, mainSlice]) 
+
+  return (
+    <>
+      <Card
+        className={`${
+          clickable ? 'morfeo-card-primary-clickable' : 'morfeo-card-primary'
+        } ${contrastRatio < 1.95 ? 'bg-black' : 'bg-white'}`}
+      >
+        <Card
+          style={
+            {
+              ...innerCardStyle,
+              size: '100%',
+            } as any
+          }
+        />
+      </Card>
+      {showValues && (
+        <h5 className="morfeo-typography-h5">
+          <span className="font-weight-bold">Value: </span>
+          {style.border}
+        </h5>
+      )}
+    </>
+  );
+};

devtool/src/_shared/components/Slices/Borders/Detail/index.tsx

@@ -1,30 +1,80 @@
-import React from 'react';
-import { Border, morfeo } from '@morfeo/react';
-import { Card } from '../../../Card';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useRouter } from '../../../../hooks';
 import { RouteState } from '../../../../contexts';
+import { BorderCard } from '../BorderCard/BorderCard';
 import styles from './style.module.css';
+import { BorderSlice } from '../index';
+import { capitalCase, noCase } from 'change-case';
+import { morfeo } from '@morfeo/react';
+import { DropDown } from '../../../DropDown';
+import { Grid, Item } from '../../../Grid';
+
+export type Props = {
+  mainSlice: BorderSlice;
+};
+
+const dropDownsMap = {
+  borders: [],
+  borderStyles: ['borderWidths', 'colors'] as const,
+  borderWidths: ['borderStyles', 'colors'] as const,
+};
+
+export const Detail: React.FC<Props> = ({ mainSlice }) => {
+  const [filters, setFilters] = useState({
+    borderStyles: '',
+    borderWidths: '',
+    colors: '',
+  });
 
-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'];
+
+  const onChangeFilter = useCallback(
+    (slice: BorderSlice | 'colors', value: string) => {
+      setFilters(state => ({
+        ...state,
+        [slice]: value,
+      }));
+    },
+    [],
+  );
+
+  const dropdowns = useMemo(() => {
+    return dropDownsMap[mainSlice].map(slice => {
+      const title = capitalCase(noCase(slice));
+      const values = morfeo.getTheme()[slice];
+      const options = Object.keys(values || {}).map(option => ({
+        label: capitalCase(noCase(option)),
+        value: option,
+      }));
+
+      return (
+        <Item key={slice}>
+          <DropDown
+            value={filters[slice]}
+            title={title}
+            options={options}
+            onChange={value => onChangeFilter(slice, value)}
+            inverted
+            placeholder={slice}
+          />
+        </Item>
+      );
+    });
+  }, [filters, mainSlice, onChangeFilter]);
 
   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>
+    <>
+      <Grid>{dropdowns}</Grid>
+      <div className={styles.container}>
+        <BorderCard
+          filters={filters}
+          mainSlice={mainSlice}
+          detailKey={detailKey as string}
+          showValues
+        />
+      </div>
+    </>
   );
 };

devtool/src/_shared/components/Slices/Borders/index.tsx

@@ -2,42 +2,47 @@ 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';
+import { BorderCard } from './BorderCard/BorderCard';
+import { getSortedSliceValues } from '../../../utils/getSortedSliceValues';
 export { Detail } from './Detail';
 
+export const borderSlices = [
+  'borders',
+  'borderWidths',
+  'borderStyles',
+] as const;
+
+export type BorderSlice = typeof borderSlices[number];
+
 type Props = {
-  border: Border;
+  value: Border;
 };
 
-const BorderCard: React.FC<Props> = ({ border }) => {
-  const { navigate } = useRouter();
+const BorderListItem: React.FC<Props> = ({ value }) => {
+  const { navigate, route } = useRouter();
+  const { state } = route;
 
   const onClick = useCallback(() => {
     navigate(RouteName.SLICE, {
-      slice: SliceName.BORDERS,
-      detailKey: border,
+      slice: state?.slice as SliceName,
+      detailKey: value,
     });
-  }, [border, navigate]);
+  }, [navigate, state?.slice, value]);
 
   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}
+      <BorderCard
+        mainSlice={state?.slice as BorderSlice}
+        detailKey={value}
+        clickable
+      />
+      <h3 className={clsx('morfeo-typography-h2', styles.name)} title={value}>
+        {value}
       </h3>
     </div>
   );
@@ -65,16 +70,25 @@ function getSortedBorders(borders: Borders) {
   });
 }
 
-export const BordersSlice: React.FC = () => {
-  const borders = useThemeSlice('borders');
+type BorderSliceProps = {
+  mainSlice: BorderSlice;
+};
 
-  const keys = useMemo(() => getSortedBorders(borders || {}), [borders]);
+export const BordersSlice: React.FC<BorderSliceProps> = ({ mainSlice }) => {
+  const slice = useThemeSlice(mainSlice);
+
+  const keys = useMemo(() => {
+    if (mainSlice === 'borders') {
+      return getSortedBorders((slice as Borders) || {});
+    }
+    return getSortedSliceValues(slice);
+  }, [mainSlice, slice]);
 
   const section = useMemo(() => {
     return keys.map(key => {
       return (
         <Item key={`borders-${key}`}>
-          <BorderCard border={key} />
+          <BorderListItem value={key} />
         </Item>
       );
     });

devtool/src/_shared/components/Slices/index.tsx

@@ -48,8 +48,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'shadows',
   },
   [SliceName.BORDERS]: {
-    render: () => <BordersSlice />,
-    renderDetail: () => <BorderDetail />,
+    render: () => <BordersSlice mainSlice="borders" />,
+    renderDetail: () => <BorderDetail mainSlice="borders" />,
     displayName: 'borders',
   },
   [SliceName.SPACINGS]: {
@@ -98,8 +98,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'transitions',
   },
   [SliceName.BORDER_WIDTHS]: {
-    render: () => <></>,
-    renderDetail: () => <></>,
+    render: () => <BordersSlice mainSlice="borderWidths" />,
+    renderDetail: () => <BorderDetail mainSlice="borderWidths" />,
     displayName: 'borderWidths',
   },
   [SliceName.MEDIA_QUERIES]: {
@@ -108,8 +108,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'mediaQueries',
   },
   [SliceName.BORDER_STYLES]: {
-    render: () => <></>,
-    renderDetail: () => <></>,
+    render: () => <BordersSlice mainSlice="borderStyles" />,
+    renderDetail: () => <BorderDetail mainSlice="borderStyles" />,
     displayName: 'borderStyles',
   },
   [SliceName.LETTER_SPACINGS]: {

devtool/src/_shared/constants/index.ts

@@ -38,6 +38,4 @@ export const COMING_SOON_SLICES: ThemeKey[] = [
   'zIndices',
   'transitions',
   'breakpoints',
-  'borderWidths',
-  'borderStyles',
 ];

devtool/src/_shared/css/dark-components.css

@@ -151,6 +151,12 @@
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
+[data-morfeo-theme="dark"] .morfeo-typography-h5 {
+  font-size: var(--font-sizes-l);
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-heading);
+}
 [data-morfeo-theme="dark"] .morfeo-typography-p1 {
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);

devtool/src/_shared/css/light-components.css

@@ -151,6 +151,12 @@
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
+[data-morfeo-theme="light"] .morfeo-typography-h5 {
+  font-size: var(--font-sizes-l);
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weights-regular);
+  line-height: var(--line-heights-heading);
+}
 [data-morfeo-theme="light"] .morfeo-typography-p1 {
   font-size: var(--font-sizes-m);
   font-family: var(--fonts-regular);

devtool/src/_shared/styles/components/typography.ts

@@ -46,6 +46,14 @@ export const Typography: ComponentConfig = {
         fontWeight: 'bold',
       },
     },
+    h5: {
+      tag: 'h4',
+      style: {
+        fontSize: 'l',
+        lineHeight: 'heading',
+        fontWeight: 'regular',
+      },
+    },
     p1: {
       tag: 'p',
       style: {