@symbo.ls/preview 0.0.47 → 0.0.49

package/src/pages/Fonts/index.js

@@ -1,104 +1,15 @@
 'use strict'
 
-import { Grid, Hoverable, FontObject, FontFamilyObject } from '@symbo.ls/components'
-import { TypeSection } from '../Typography/shared'
+import fontFaces from './fontFaces'
+import fontFamilies from './fontFamilies'
 
 import { state } from './state'
 
-const mapFonts = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { FONT } = el.context.SYSTEM
-  const fontKeys = Object.keys(FONT)
-
-  return fontKeys.map(v => {
-    const font = FONT[v]
-    const weights = Object.keys(font)
-    const weightsLength = weights.length
-    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
-
-    return {
-      title: v,
-      href: `/typography/font-settings/${v}`,
-      scrollToTop: false,
-      labels: [
-        { icon: 'fontVariable', text: fontWeightCaption }
-      ]
-    }
-  })
-}
-
-const FontFaces = {
-  extend: TypeSection,
-  header: {
-    state: {
-      title: 'Document Fonts',
-      p: 'Document @font-face, default and backup fonts',
-      nav: [{
-        icon: 'plus',
-        href: '/typography/upload-font'
-      }]
-    }
-  },
-
-  content: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(2, 1fr)',
-      gap: 'A',
-      margin: '0 -Z'
-    },
-    childExtend: [FontObject, Hoverable],
-    $setStateCollection: mapFonts
-  }
-}
-
-const mapFontFamilies = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { FONT_FAMILY } = el.context.SYSTEM
-  const fontFamilyKeys = Object.keys(FONT_FAMILY)
-
-  return fontFamilyKeys.map(v => {
-    const val = FONT_FAMILY[v]
-    if (v === 'default') return
-    return {
-      title: v,
-      href: `/typography/font-family/${v}`,
-      val
-    }
-  }).filter(v => v)
-}
-
-const FontFamilies = {
-  extend: TypeSection,
-  props: { padding: '0 0 E 0' },
-  header: {
-    state: {
-      title: 'Font Families',
-      p: 'Setup a set and fallback fonts as font families',
-      nav: [{
-        icon: 'plus',
-        href: '/typography/add-font-family',
-        scrollToTop: false
-      }]
-    }
-  },
-  content: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(4, 1fr)',
-      gap: 'A',
-      margin: '0 -Z'
-    },
-
-    childExtend: [FontFamilyObject, Hoverable],
-    $setStateCollection: mapFontFamilies
-  }
-}
-
 export const Fonts = {
   state,
 
-  FontFaces,
-  Line: {},
-  FontFamilies
+  fontFaces,
+  line3: { extend: 'Line' },
+
+  fontFamilies
 }

package/src/pages/MediaQuery/index.js

@@ -2,44 +2,45 @@
 
 import { Flex } from '@symbo.ls/components'
 
-import { mediaValuesList, screenSizingList } from './lists'
+import { mediaQueryList, screenSizingList } from './lists'
 
 const content = {
   extend: Flex,
-  childExtend: {
-    props: {
+
+  props: {
+    justifyContent: 'space-between',
+    margin: '0 -Z',
+    gap: 'C1',
+
+    childProps: {
       heading: {
         color: 'white',
         padding: '0 0 A1 Z1',
         fontWeight: '700'
       }
+    },
+
+    mediaQueries: {
+      flex: 1
     }
   },
 
-  ...[{
-    heading: { props: { text: 'Media Value' } },
-    mediaValuesList
-  }, {
-    heading: { props: { text: 'Screen Sizing Sheet' } },
+  mediaQueries: {
+    heading: { text: 'Media Queries' },
+    mediaQueryList
+  },
+
+  screensSheet: {
+    heading: { text: 'Screen Sizing Sheet' },
     screenSizingList
-  }]
+  }
 }
 
-const props = {
+export const MediaQuery = {
   SectionHeader: {
     title: 'Responsive',
     p: 'A Design System is the single source of truth that defines all design elements and allows the crews to assemble components and compose them into more complex apps.'
   },
 
-  content: {
-    justifyContent: 'space-between',
-    gap: 'A2'
-  }
-}
-
-export const MediaQuery = {
-  props,
-
-  SectionHeader: {},
   content
 }

package/src/pages/MediaQuery/lists.js

@@ -1,8 +1,6 @@
 'use strict'
 
-import { IconText, Flex, SquareButton, Grid, Select, Input } from '@symbo.ls/components'
-import style from '@symbo.ls/components/src/UserAccount/style'
-import { state } from '@symbo.ls/icons'
+import { IconText, Flex, SquareButton, Select, Input, ClickableItem } from '@symbo.ls/components'
 import { BREAKPOINTS_DATA, DEVICE_SIZE_DATA } from './state'
 
 const stateCom = {
@@ -14,8 +12,6 @@ const listProps = {
   round: 'A',
   fontSize: 'Z1',
   style: { overflow: 'hidden' }
-  // padding: '- - - A'
-  // border: '2px solid red'
 }
 
 const valueItemProps = {
@@ -56,50 +52,47 @@ const BreakpointItem = {
     props: valueItemProps
   },
 
-  container: {
-    props: {
-      padding: '0 X2',
-      background: 'gray1'
-    },
-    property: {
-      extend: Select,
-      props: ({ state }) => ({
-        background: 'transparent',
-        color: 'white'
-      }),
+  select: {
+    extend: Select,
+    props: ({ state }) => ({
+      background: 'transparent',
+      color: 'white'
+    }),
 
-      // on: {
-      //   click: (event, element, state) => {
-      //     state.offers
-      //       ? state.update({ offers: false })
-      //       : state.update({ offers: true })
-      //   }
-      // }
+    on: {
+      change: (ev, el, s) => {
+        const { value } = el.node
+        const exact = value === 'exact'
+        s.update({ type: value }, { preventUpdate: true })
+        console.log(s.parent.parent)
+        s.parent.update({
+          exact,
+          breakpoints: {
+            [s.__element.key]: { type: value }
+          }
+        })
+      }
+    },
 
-      on: {
-        change: (ev, el, s) => {
-          s.update({ value: el.node.value })
-        }
-      },
-      $setCollection: () => MEDIA_TYPES.map(props => ({ props }))
-    }
+    $setCollection: () => MEDIA_TYPES.map(props => ({ props }))
   },
 
   value: {
     extend: Input,
     props: ({ state }) => ({
       placeholder: state.placeholder,
+      value: state.value,
       round: 'Y',
       maxWidth: 'C2',
       padding: '0',
       style: { textAlign: 'center' }
     })
   },
+
   value2: {
     extend: Input,
     props: ({ state }) => ({
-      hide: state.value !== 'exact',
-      // value: state.value,
+      hide: state.type !== 'exact',
       placeholder: '728px',
       round: 'Y',
       maxWidth: 'C1',
@@ -123,21 +116,20 @@ const screenIconText = {
   })
 }
 
-const MediaValuesRow = {
+const MediaQueryRow = {
   extend: Flex,
   props: {
     gap: 'D',
     align: 'center',
-    minHeight: 'C2',
-    padding: '- - - A',
+    minHeight: 'D',
+    padding: '- A - B',
     childProps: { minWidth: 'E' },
     ':not(:last-child)': {
       border: 'dashed, white 0.05',
-      borderWidth: '0 0 1.5px'
+      borderWidth: '0 0 1px'
     },
     ':hover': {
-      background: 'gray2',
-      cursor: 'pointer'
+      background: 'gray2'
     },
     ':hover > div > button': { opacity: 1 }
   },
@@ -146,20 +138,18 @@ const MediaValuesRow = {
 
   columnBreakPoints: {
     extend: Flex,
-    props: { gap: 'A2' },
+    props: { gap: 'D' },
+
     childExtend: BreakpointItem,
     $setStateCollection: ({ state }) => state.breakpoints
   },
 
-  plusButtonContainer: {
-    // props: { style: { border: '2px solid red' } },
+  plusButton: {
     button: {
       extend: SquareButton,
-      props: {
-        style: {
-          border: '1px solid rgba(255, 255, 255, .1)'
-        },
 
+      props: ({ state }) => ({
+        hide: Object.keys(state.breakpoints).length > 2,
         icon: { name: 'plus' },
         padding: 'X2',
         round: '100%',
@@ -167,7 +157,7 @@ const MediaValuesRow = {
         borderWidth: '1px',
         color: 'gray6',
         background: 'transparent'
-      },
+      }),
 
       on: {
         click: (ev, el, s) => {
@@ -187,26 +177,20 @@ const MediaValuesRow = {
       margin: '- - - auto'
     },
     childExtend: {
-      extend: SquareButton,
+      extend: [ClickableItem, SquareButton],
       props: {
-        background: 'transparent',
-        color: 'gray5',
         style: { opacity: '0' }
       }
     },
     ...[
       { props: { icon: 'eyeOpen' } },
       { props: { icon: 'arrowAngleMirroringHorizontal' } },
-      {
-        props: { icon: 'trashAlt' },
+      { props: { icon: 'trashAlt' },
         on: {
           click: (event, element, state) => {
             const { key } = element.parent.parent
-            state.parent.update({
-              data: {
-                [key]: { name: 'asd' }
-              }
-            })
+            delete state.parent.data[key]
+            state.parent.update()
           }
         }
       }
@@ -214,14 +198,11 @@ const MediaValuesRow = {
   }
 }
 
-export const mediaValuesList = {
+export const mediaQueryList = {
   state: BREAKPOINTS_DATA,
-  props: {
-    ...listProps,
-    minWidth: 'I2'
-  },
+  props: listProps,
 
-  childExtend: MediaValuesRow,
+  childExtend: MediaQueryRow,
   $setStateCollection: ({ state }) => state.data
 }
 
@@ -275,11 +256,8 @@ const DefaultScreensRow = {
   values: {
     extend: Flex,
     props: {
-      // minWidth: '100px',
       alignItems: 'center',
       gap: 'X1'
-      // maxWidth: 'fit-content',
-      // border: '2px solid green'
     },
 
     valueX: {

package/src/pages/Shapes/index.js

@@ -7,7 +7,10 @@ import {
   circle,
   toolTip,
   tagShape,
-  bubble
+  bubble,
+  chevron,
+  tv,
+  hexagon
 } from './shapeSet'
 
 export const Shapes = {
@@ -16,43 +19,57 @@ export const Shapes = {
     flow: 'column'
   },
 
-  childExtend: {
+  state: {
+    props: {}
+  },
+
+  content: {
     extend: Flex,
     props: {
-      gap: 'A',
-      flow: 'column',
-      header: {
-        margin: '- - A2'
-      },
-      section: {
-        flow: 'row wrap',
-        gap: 'A2'
-      }
+      flow: 'column'
     },
-    section: { extend: Flex }
-  },
 
-  htmlShapes: {
-    SectionHeader: {
-      title: 'HTML Shapes',
-      p: 'All ungrouped document icons'
+    childExtend: {
+      extend: Flex,
+      props: {
+        gap: 'A2',
+        flow: 'column',
+        SectionHeader: {
+          margin: '- - A2'
+        },
+        section: {
+          flow: 'row wrap',
+          gap: 'A2'
+        }
+      },
+      section: { extend: Flex }
     },
 
-    section: {
-      rectangle,
-      circle,
-      toolTip,
-      tagShape,
-      bubble
-    }
-  },
+    htmlShapes: {
+      SectionHeader: {
+        title: 'HTML Shapes',
+        p: 'All ungrouped document icons'
+      },
 
-  line: { extend: Line },
+      section: {
+        rectangle,
+        circle,
+        toolTip,
+        tagShape,
+        bubble,
+        tv,
+        chevron,
+        hexagon
+      }
+    },
+
+    line: { extend: Line },
 
-  svgShapes: {
-    SectionHeader: {
-      title: 'SVG Shapes',
-      p: 'TBA'
+    svgShapes: {
+      SectionHeader: {
+        title: 'SVG Shapes',
+        p: 'TBA'
+      }
     }
   }
 }

package/src/pages/Shapes/shapeSet.js

@@ -8,69 +8,126 @@ export const rectangle = {
     text: 'Rectangle ',
     span: 'with rounds'
   },
-  nav: [
-    { _shape: { round: '0' } },
-    { _shape: { round: 'X' } },
-    { _shape: { round: 'Y' } },
-    { _shape: { round: 'Z' } },
-    { _shape: { round: 'A' } },
-    { _shape: { round: 'B' } },
-    { _shape: { round: 'C' } }
-  ].map(props => ({ props }))
+  list: {
+    $setStateCollection: () => [
+      { borderRadius: '0' },
+      { borderRadius: 'X' },
+      { borderRadius: 'Y' },
+      { borderRadius: 'Z' },
+      { borderRadius: 'A' },
+      { borderRadius: 'B' },
+      { borderRadius: 'C' }
+    ]
+  }
 }
 
 export const circle = {
   extend: ShapeSet,
   label: { text: 'Circle' },
-  nav: [{
-    _shape: { props: { shape: 'circle' } }
-  }]
+  list: {
+    $setStateCollection: () => [
+      { shape: 'circle' }
+    ]
+  }
 }
 
 export const toolTip = {
   extend: ShapeSet,
   label: { text: 'Tooltip' },
-  nav: {
+  list: {
     childExtend: {
-      childExtend: { props: { round: 'Y1' } }
+      props: {
+        childProps: { borderRadius: 'Y1' }
+      }
     },
 
-    ...[
-      { _shape: { shape: 'tooltip', shapeDirection: 'top' } },
-      { _shape: { shape: 'tooltip', shapeDirection: 'right' } },
-      { _shape: { shape: 'tooltip', shapeDirection: 'bottom' } },
-      { _shape: { shape: 'tooltip', shapeDirection: 'left' } }
-    ].map(props => ({ props }))
+    $setStateCollection: () => [
+      { shape: 'tooltip', shapeDirection: 'top' },
+      { shape: 'tooltip', shapeDirection: 'right' },
+      { shape: 'tooltip', shapeDirection: 'bottom' },
+      { shape: 'tooltip', shapeDirection: 'left' }
+    ]
   }
 }
 
 export const tagShape = {
   extend: ShapeSet,
   label: { text: 'Tag' },
-  nav: {
+  list: {
     childExtend: {
-      childExtend: { props: { round: 6 } }
+      props: {
+        padding: 'B C2+W',
+        childProps: { borderRadius: 6 }
+      }
     },
-    ...[
-      { _shape: { shape: 'tag', shapeDirection: 'left' } },
-      { _shape: { shape: 'tag', shapeDirection: 'top' } },
-      { _shape: { shape: 'tag', shapeDirection: 'right' } },
-      { _shape: { shape: 'tag', shapeDirection: 'bottom' } }
-    ].map(props => ({ props }))
+    $setStateCollection: () => [
+      { shape: 'tag', shapeDirection: 'left' },
+      { shape: 'tag', shapeDirection: 'right' }
+    ]
   }
 }
 
 export const bubble = {
   extend: ShapeSet,
   label: { text: 'Bubble' },
-  nav: [
-    { _shape: { round: 'X B B X' } },
-    { _shape: { round: 'B X X B' } },
-    { _shape: { round: 'X X B B' } },
-    { _shape: { round: 'B B X X' } },
-    { _shape: { round: 'B X X X' } },
-    { _shape: { round: 'X B X X' } },
-    { _shape: { round: 'X X B X' } },
-    { _shape: { round: 'X X X B' } }
-  ].map(props => ({ props }))
+
+  list: {
+    $setStateCollection: () => [
+      { borderRadius: 'X B B X' },
+      { borderRadius: 'B X X B' },
+      { borderRadius: 'X X B B' },
+      { borderRadius: 'B B X X' },
+      { borderRadius: 'B X X X' },
+      { borderRadius: 'X B X X' },
+      { borderRadius: 'X X B X' },
+      { borderRadius: 'X X X B' }
+    ]
+  }
+}
+
+export const chevron = {
+  extend: ShapeSet,
+  label: { text: 'Chevron' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B C2+W'
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'chevron', shapeDirection: 'left' },
+      { shape: 'chevron', shapeDirection: 'right' }
+    ]
+  }
+}
+
+export const tv = {
+  extend: ShapeSet,
+  label: { text: 'TV' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B B2',
+        childProps: { minWidth: 'D' }
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'tv' }
+    ]
+  }
+}
+
+export const hexagon = {
+  extend: ShapeSet,
+  label: { text: 'Hexagon' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B C2+W'
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'hexagon' }
+    ]
+  }
 }