@symbo.ls/preview 0.0.86 → 0.0.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Aside.js +53 -31
  3. package/src/pages/DesignSystem/index.js +18 -18
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symbo.ls/preview",
3
3
  "description": "",
4
4
  "author": "",
5
- "version": "0.0.86",
5
+ "version": "0.0.87",
6
6
  "repository": "https://github.com/rackai/editor",
7
7
  "main": "src/index.js",
8
8
  "scripts": {
package/src/components/Aside.js CHANGED
@@ -3,6 +3,22 @@
3
3
  import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
4
4
  import { Flex, SquareButton } from 'smbls'
5
5
 
6
+ const setTooltipPosition = (el, s, options = {}) => {
7
+ const key = parseInt(el.key)
8
+ const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
9
+ const translateY = `calc(${rowHeight} * ${key} + var(--spacing-X))`
10
+ const transform = `translate3d(0%, ${translateY}, 1px)`
11
+ const Tooltip = el.lookup('Tooltip')
12
+ if (Tooltip.setProps) {
13
+ Tooltip.setProps({
14
+ opacity: options.visible && '1',
15
+ visibility: options.visible && 'visible',
16
+ text: s.title,
17
+ transform
18
+ })
19
+ }
20
+ }
21
+
6
22
  export const NavbarButton = {
7
23
  extend: [ClickableItem, Link, SquareButton, TooltipParent],
8
24
 
@@ -11,16 +27,22 @@ export const NavbarButton = {
11
27
  active: window.location.pathname.includes(state.href),
12
28
  isActive: window.location.pathname.includes(state.href),
13
29
  theme: null,
14
- position: 'relative',
15
- style: {
16
- '&:hover, &:focus-visible': {
17
- '& [tooltip]': {
18
- transform: 'translate3d(0%,-50%,0)'
19
- }
20
- }
21
- }
22
- })
30
+ position: 'relative'
31
+ }),
23
32
 
33
+ on: {
34
+ initUpdate: (el, s) => {
35
+ const active = window.location.pathname.includes(s.href)
36
+ if (active) setTooltipPosition(el, s)
37
+ },
38
+ mouseover: (ev, el, s) => setTooltipPosition(el, s, { visible: true }),
39
+ mouseleave: (ev, el, s) => {
40
+ el.lookup('Tooltip').setProps({
41
+ opacity: '0',
42
+ visibility: 'hidden'
43
+ })
44
+ }
45
+ }
24
46
  }
25
47
 
26
48
  export const DesignSystemNavbar = {
@@ -29,6 +51,7 @@ export const DesignSystemNavbar = {
29
51
  props: {
30
52
  position: 'sticky',
31
53
  top: 'E',
54
+ zIndex: 1001,
32
55
 
33
56
  nav: {
34
57
  gap: 'B1',
@@ -44,27 +67,26 @@ export const DesignSystemNavbar = {
44
67
  childExtend: NavbarButton
45
68
  },
46
69
 
47
- Tooltip: ({ state }) => ({
48
- background: 'gray0 .95',
49
- position: 'absolute',
50
- pointerEvents: 'none',
51
- top: '50%',
52
- left: '100%',
53
- shape: 'rectangle',
54
- shapeDirection: null,
55
- padding: 'X2 Z1',
56
- transform: 'translate3d(5%, -50%, 0)',
57
- opacity: '0',
58
- visibility: 'hidden',
59
- transition: 'B defaultBezier',
60
- transitionProperty: 'opacity, transform',
61
- textAlign: 'start',
62
- zIndex: 9999,
63
- lineHeight: 1,
64
- title: {
65
- fontSize: 'Z',
66
- text: state.tooltip
70
+ Tooltip: {
71
+ props: {
72
+ background: 'gray0 .95',
73
+ position: 'absolute',
74
+ pointerEvents: 'none',
75
+ top: '0',
76
+ left: '100%',
77
+ shape: 'rectangle',
78
+ shapeDirection: null,
79
+ padding: 'X2 Z1',
80
+ transform: 'translate3d(5%, -50%, 0)',
81
+ opacity: '0',
82
+ visibility: 'hidden',
83
+ transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
84
+ transitionProperty: 'opacity, visibility, transform',
85
+ textAlign: 'start',
86
+ zIndex: 99999,
87
+ lineHeight: 1,
88
+ title: { fontSize: 'Z' }
67
89
  },
68
- p: { text: null }
69
- })
90
+ p: null
91
+ }
70
92
  }
package/src/pages/DesignSystem/index.js CHANGED
@@ -25,16 +25,16 @@ import {
25
25
 
26
26
  const NAV = [{
27
27
  state: {
28
- href: '/colors',
29
- tooltip: 'Colors'
28
+ title: 'Colors',
29
+ href: '/colors'
30
30
  },
31
31
  props: {
32
32
  icon: { name: 'color outline colored' }
33
33
  }
34
34
  }, {
35
35
  state: {
36
- href: '/typography',
37
- tooltip: 'Typography'
36
+ title: 'Typography',
37
+ href: '/typography'
38
38
  },
39
39
  props: {
40
40
  icon: { name: 'typography outline' },
@@ -42,8 +42,8 @@ const NAV = [{
42
42
  }
43
43
  }, {
44
44
  state: {
45
- href: '/space',
46
- tooltip: 'Spacing'
45
+ title: 'Spacing',
46
+ href: '/space'
47
47
  },
48
48
  props: {
49
49
  icon: { name: 'space outline' },
@@ -51,16 +51,16 @@ const NAV = [{
51
51
  }
52
52
  }, {
53
53
  state: {
54
- href: '/shape',
55
- tooltip: 'Shapes'
54
+ title: 'Shapes',
55
+ href: '/shape'
56
56
  },
57
57
  props: {
58
58
  icon: { name: 'shape outline colored' }
59
59
  }
60
60
  }, {
61
61
  state: {
62
- href: '/icons',
63
- tooltip: 'Icons'
62
+ title: 'Icons',
63
+ href: '/icons'
64
64
  },
65
65
  props: {
66
66
  icon: { name: 'icons outline colored' },
@@ -70,8 +70,8 @@ const NAV = [{
70
70
  }
71
71
  }, {
72
72
  state: {
73
- href: '/media-query',
74
- tooltip: 'Responsive'
73
+ title: 'Responsive',
74
+ href: '/media-query'
75
75
  },
76
76
  props: {
77
77
  icon: { name: 'device mobile half fill' },
@@ -79,8 +79,8 @@ const NAV = [{
79
79
  }
80
80
  }, {
81
81
  state: {
82
- href: '/fonts',
83
- tooltip: 'Fonts'
82
+ title: 'Fonts',
83
+ href: '/fonts'
84
84
  },
85
85
  props: {
86
86
  icon: { name: 'fontFace colored' },
@@ -88,16 +88,16 @@ const NAV = [{
88
88
  }
89
89
  }, {
90
90
  state: {
91
- href: '/timing',
92
- tooltip: 'Timing'
91
+ title: 'Timing',
92
+ href: '/timing'
93
93
  },
94
94
  props: {
95
95
  icon: { name: 'clock colored' }
96
96
  }
97
97
  }, {
98
98
  state: {
99
- href: '/sequence',
100
- tooltip: 'Sequence'
99
+ title: 'Sequence',
100
+ href: '/sequence'
101
101
  },
102
102
  props: {
103
103
  icon: { name: 'sequence colored' }