@symbo.ls/uikit 1.2.1 → 1.2.2

package/components/Avatar/style.js

@@ -0,0 +1,19 @@
+'use strict'
+
+export const styleUser = {
+  cursor: 'pointer',
+  borderRadius: '100%'
+}
+
+export const styleUserBundle = {
+  display: 'flex',
+  alignItems: 'center',
+  textTransform: 'capitalize',
+  '> div': {
+    display: 'flex',
+    marginRight: '1em',
+    '> img': {
+      marginRight: '-0.5em'
+    }
+  }
+}

package/components/Banner/index.js

@@ -0,0 +1,22 @@
+'use strict'
+
+import { Icon } from '@symbo.ls/icon'
+import { AvatarBundle } from '@symbo.ls/avatar'
+
+import { styleParentMode } from './style'
+
+export const ParentMode = {
+  round: 10,
+  theme: 'purple',
+  style: styleParentMode,
+  icon: {
+    extend: Icon,
+    props: { icon: 'checkMedium' }
+  },
+  h2: 'Welcome to parent Mode',
+  description: {
+    extend: AvatarBundle,
+    users: { ...[{}, {}, {}] },
+    span: 'You\'ll now be able to chat with tutor privately. No other participants will see the messages.'
+  }
+}

package/components/Banner/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/banner",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/avatar": "latest",
+    "@symbo.ls/icon": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Banner/style.js

@@ -0,0 +1,27 @@
+'use strict'
+
+export const styleParentMode = {
+  boxSizing: 'border-box',
+  padding: '3.6em 1.6em 4em 3.6em',
+  position: 'relative',
+  display: 'block',
+  width: '700px',
+  '> svg': {
+    position: 'absolute',
+    top: '1.2em',
+    right: '1.2em',
+    color: 'rgba(215, 100, 185, .2)'
+  },
+  '> div': {
+    alignItems: 'flex-start',
+    '> div': { marginTop: '4px' }
+  },
+  h2: {
+    margin: 0,
+    marginBottom: '10px'
+  },
+  span: {
+    maxWidth: `${314 / 14}em`,
+    lineHeight: '22px'
+  }
+}

package/components/Box/index.js

@@ -0,0 +1,44 @@
+'use strict'
+
+import {
+  Shape,
+  Position,
+  Theme,
+  Block,
+  Text,
+  Overflow,
+  Timing,
+  Transform,
+  Media,
+  Interaction,
+  XYZ,
+  Animation
+} from '@symbo.ls/atoms'
+
+const PropsCSS = {
+  class: {
+    style: ({ props }) => props && props.style
+  }
+}
+
+export const Box = {
+  extend: [
+    PropsCSS,
+    Shape,
+    Position,
+    Theme,
+    Block,
+    Text,
+    Overflow,
+    Timing,
+    Transform,
+    Media,
+    Interaction,
+    XYZ,
+    Animation
+  ],
+  attr: {
+    id: ({ props }) => props.id
+  }
+}
+

package/components/Box/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@symbo.ls/box",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@symbo.ls/atoms": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Button/README.md

@@ -0,0 +1,11 @@
+# `Button`
+
+> TODO: description
+
+## Usage
+
+```
+const button = require('Button');
+
+// TODO: DEMONSTRATE API
+```

package/components/Button/index.js

@@ -0,0 +1,48 @@
+'use strict'
+
+import { FocusableComponent } from '@symbo.ls/atoms'
+import { IconText } from '@symbo.ls/icon'
+
+export const Button = {
+  extend: [FocusableComponent, IconText],
+  tag: 'button',
+  props: {
+    fontSize: 'A',
+    type: 'button',
+    border: 'none',
+    display: 'inline-flex',
+    align: 'center center',
+    textDecoration: 'none',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    padding: 'Z A1',
+    fontFamily: 'inherit',
+    round: 'C2'
+  },
+  attr: {
+    type: ({ props }) => props.type
+  }
+}
+
+export const SquareButton = {
+  extend: Button,
+  props: {
+    fontSize: 'A',
+    width: 'A',
+    padding: 'Z',
+    aspectRatio: '1 / 1',
+    justifyContent: 'center',
+    round: 'Z',
+    style: { boxSizing: 'content-box' }
+  }
+}
+
+export const CircleButton = {
+  extend: SquareButton,
+  props: { round: 'C' }
+}
+
+export const KangorooButton = {
+  extend: Button,
+  childExtend: IconText
+}

package/components/Button/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/button",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/icon": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/ButtonSet/index.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { SquareButton } from '@symbo.ls/button'
+
+export const ButtonSet = {
+  tag: 'nav',
+  extend: Flex,
+  childExtend: SquareButton
+}

package/components/ButtonSet/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/buttonset",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Datepicker/index.js

@@ -0,0 +1,156 @@
+'use strict'
+
+import style from './style'
+
+import { SquareButton, Button } from '@symbo.ls/button'
+import { Flex, Grid } from '@symbo.ls/atoms'
+
+const buttonProps = {
+  theme: 'transparent',
+  color: '--theme-quinary-dark-color',
+  ':hover': {
+    theme: 'quinary .child'
+  }
+}
+
+const aside = {
+  props: {
+    gap: 'X2',
+    margin: '-Z - -Z -X2',
+    padding: 'Z - Z X2',
+    minHeight: '100%',
+    height: '100%',
+    width: '--spacing-D'
+  },
+
+  cnt: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      overflow: 'hidden auto',
+      boxSize: '100% --spacing-D',
+      top: '0',
+      position: 'absolute',
+      maxHeight: '100%',
+      justifyContent: 'flex-end'
+    },
+
+    childExtend: {
+      extend: Button,
+      props: {
+        ...buttonProps,
+        fontSize: 'Z1'
+      },
+      text: ({ state }) => state.value
+    }
+  }
+
+}
+
+const main = {
+  extend: Flex,
+
+  props: {
+    flex: 1,
+    gap: 'X2',
+    flow: 'column',
+
+    header: {
+      align: 'center space-between'
+    }
+  },
+
+  header: {
+    extend: Flex,
+    left: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleLeft'
+      }
+    },
+    month: {
+      tag: 'span',
+      text: 'December'
+    },
+    right: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleRight'
+      }
+    }
+  },
+  days: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      gap: 'X2'
+    },
+    childExtend: {
+      extend: Grid,
+      props: {
+        columns: 'repeat(7, 1fr)',
+        gap: 'X2'
+      }
+    },
+    weekDays: {
+      childExtend: {
+        extend: Button,
+        props: {
+          ...buttonProps,
+          fontSize: 'Z1',
+          padding: 'X2'
+        }
+      },
+      ...[
+        { text: 'Mo' },
+        { text: 'Tu' },
+        { text: 'We' },
+        { text: 'Th' },
+        { text: 'Fr' },
+        { text: 'Sa' },
+        { text: 'Su' }
+      ]
+    },
+
+    cnt: {
+      childExtend: {
+        extend: SquareButton,
+
+        props: ({ key, state }) => ({
+          ...buttonProps,
+          theme: 'quaternary',
+          active: key === '18',
+          '.active': {
+            theme: 'quinary'
+          }
+        })
+      },
+
+      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
+    }
+  }
+}
+
+export const DatePicker = {
+  style,
+  extend: Flex,
+
+  props: {
+    position: 'relative',
+    theme: 'quinary',
+    transition: 'A all',
+    round: 'Z',
+    padding: 'Z Z2 Z X2',
+    gap: 'X2',
+    depth: 16,
+    minHeight: '0',
+    align: 'stretch center'
+  },
+
+  aside,
+  main
+}

package/components/Datepicker/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@symbo.ls/datepicker",
+  "version": "1.2.2",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/block": "latest",
+    "@symbo.ls/icon": "latest",
+    "@symbo.ls/shape": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Datepicker/style.js

@@ -0,0 +1,18 @@
+'use strict'
+
+export default {
+  main: {
+    'section > header span:nth-child(6)': {
+      opacity: 0.5
+    },
+    'section > header span:nth-child(7)': {
+      opacity: 0.5
+    },
+    'section > div button:nth-child(7n)': {
+      opacity: 0.5
+    },
+    'section > div button:nth-child(7n - 1)': {
+      opacity: 0.5
+    }
+  }
+}

package/components/Dropdown/index.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Button } from '@symbo.ls/button'
+
+export const DropdownList = {
+  extend: Flex,
+
+  props: {
+    padding: '0 Y',
+    maxHeight: 'G',
+    flow: 'column',
+    theme: 'quaternary',
+    overflow: 'hidden auto',
+    style: { listStyleType: 'none' }
+  },
+
+  childExtend: {
+    extend: Button,
+
+    props: (el, s) => ({
+      active: s.active === el.key,
+      position: 'relative',
+      round: '0',
+      align: 'center flex-end',
+      flow: 'row-reverse',
+      padding: 'Z2 C Z2 Y2',
+      margin: '0',
+      gap: 'Y2',
+      theme: 'quaternary .child',
+
+      ':hover': {
+        style: {
+          svg: { opacity: '0.5' }
+        }
+      },
+
+      icon: {
+        active: s.active === el.key,
+        name: 'checkmark',
+        opacity: '0.1',
+        '.active': { opacity: '1' }
+      },
+
+      ':not(:first-child)': {
+        '@dark': { border: 'gray4 .65, solid' },
+        '@light': { border: 'gray11, solid' },
+        borderWidth: '1px 0 0'
+      }
+    })
+  }
+}

package/components/Dropdown/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/dropdown",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Field/index.js

@@ -0,0 +1,43 @@
+'use strict'
+
+import { Focusable } from '@symbo.ls/atoms'
+import { IconText } from '@symbo.ls/icon'
+import { Input } from '@symbo.ls/input'
+
+export const Field = {
+  extend: [IconText],
+
+  props: (el, s) => ({
+    value: s[el.key],
+
+    depth: 16,
+    placeholder: '',
+    padding: 'A B',
+    round: 'C',
+    type: 'text',
+    position: 'relative',
+    width: '16em',
+
+    style: {
+      appearance: 'none',
+      outline: 0,
+      border: 'none',
+      cursor: 'pointer',
+      fontFamily: 'inherit',
+      boxSizing: 'border-box'
+    },
+
+    input: {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    },
+
+    svg: {
+      position: 'absolute',
+      right: '1em'
+    }
+  }),
+
+  input: { extend: [Focusable, Input] }
+}

package/components/Field/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@symbo.ls/field",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/icon-text": "latest",
+    "@symbo.ls/input": "latest",
+    "@symbo.ls/scratch": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Field/style.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { TYPOGRAPHY } from '@symbo.ls/scratch'
+
+const primaryFont = Object.keys(TYPOGRAPHY)[0]
+const defaultFont = primaryFont || '--system-default' // eslint-disable-line
+
+export default {
+  appearance: 'none',
+  outline: 0,
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit',
+  boxSizing: 'border-box',
+  position: 'relative',
+  padding: 0,
+
+  width: '16em',
+
+  input: {
+    width: '100%',
+    height: '100%',
+    border: 'none'
+  },
+
+  svg: {
+    position: 'absolute',
+    right: '1em'
+  }
+}

package/components/Icon/index.js

@@ -0,0 +1,50 @@
+'use strict'
+
+import { Flex, SVG } from '@symbo.ls/atoms'
+
+export const Icon = {
+  extend: SVG,
+  props: ({ key, props, parent, context }) => {
+    const { ICONS } = context && context.system
+    const iconName = props.inheritedString || props.name || props.icon || key
+    const camelCase = toCamelCase(iconName)
+
+    const isArray = camelCase.split(/([a-z])([A-Z])/g)
+
+    let activeIconName
+    if (props.active) {
+      activeIconName = props['.active'].name || props['.active'].icon
+    }
+    if (parent.props.active && parent.props['.active'] && parent.props['.active'].icon) {
+      activeIconName = parent.props['.active'].icon.name || parent.props['.active'].icon.icon || parent.props['.active'].icon
+    }
+
+    const iconFromLibrary = ICONS[activeIconName] || ICONS[camelCase] || (ICONS[isArray[0] + isArray[1]]) || ICONS[isArray[0]] || ICONS['noIcon']
+
+    return {
+      width: 'A',
+      height: 'A',
+      display: 'inline-block',
+      src: iconFromLibrary,
+      style: { fill: 'currentColor' }
+    }
+  },
+  attr: { viewBox: '0 0 24 24' }
+}
+
+export const IconText = {
+  extend: Flex,
+
+  props: {
+    align: 'center center',
+    lineHeight: 1
+  },
+
+  icon: {
+    extend: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: 'match'
+  },
+
+  text: ({ props }) => props.text
+}

package/components/Icon/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@symbo.ls/icon",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "dependencies": {
+    "@symbo.ls/svg": "latest"
+  },
+  "source": "src/index.js"
+}

package/components/Icon/style.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  display: 'inline-block'
+}

package/components/IconText/index.js

@@ -0,0 +1,16 @@
+'use strict'
+
+import { Box } from '@symbo.ls/box'
+import { Icon } from '@symbo.ls/icon'
+
+export const IconText = {
+  props: {
+    flexAlign: 'center center',
+    display: 'flex',
+    lineHeight: 1
+  },
+
+  icon: { extend: Icon, if: ({ props }, s) => props.icon },
+
+  text: ({ props }) => props.text
+}

package/components/IconText/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@symbo.ls/icon-text",
+  "version": "1.2.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@symbo.ls/block": "latest",
+    "@symbo.ls/direction": "latest",
+    "@symbo.ls/icon": "latest",
+    "@symbo.ls/text": "latest"
+  },
+  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
+  "source": "src/index.js"
+}