@symbo.ls/preview 3.1.1 → 3.1.2

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 (13) hide show
  1. package/articles/Colors.js +15 -12
  2. package/articles/Icons.js +9 -6
  3. package/articles/Shadows.js +9 -6
  4. package/articles/Shapes.js +9 -6
  5. package/articles/Spacing.js +9 -6
  6. package/articles/Themes.js +6 -14
  7. package/articles/Typography.js +9 -6
  8. package/blocks/color.js +2 -2
  9. package/blocks/icon.js +1 -2
  10. package/package.json +2 -2
  11. package/pages/Component.js +7 -4
  12. package/pages/Components.js +1 -1
  13. package/pages/Styleguide.js +9 -2
package/articles/Colors.js CHANGED
@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
4
4
 
5
5
  export const Colors = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  props: {
10
10
  margin: 'auto',
@@ -23,13 +23,17 @@ export const Colors = {
23
23
  Flex: {
24
24
  props: {},
25
25
  Title: {},
26
- Paragraph: [{
27
- props: { text: 'Brand color pallete' }
28
- }, {
29
- props: { text: 'Semantic colors' }
30
- }, {
31
- props: { text: 'Theming' }
32
- }]
26
+ Paragraph: [
27
+ {
28
+ props: { text: 'Brand color pallete' }
29
+ },
30
+ {
31
+ props: { text: 'Semantic colors' }
32
+ },
33
+ {
34
+ props: { text: 'Theming' }
35
+ }
36
+ ]
33
37
  }
34
38
  }
35
39
  },
@@ -50,7 +54,8 @@ export const Colors = {
50
54
  Paragraph: {
51
55
  children: ({ context }) => {
52
56
  const { COLOR } = context.designSystem
53
- return Object.keys(COLOR).filter(v => COLOR[v].value)
57
+ return Object.keys(COLOR)
58
+ .filter(v => COLOR[v].value)
54
59
  .map(v => ({
55
60
  Color: { background: v },
56
61
  Description: {
@@ -69,9 +74,7 @@ export const Colors = {
69
74
  props: {
70
75
  childProps: { theme: 'dialog' }
71
76
  },
72
- ...[
73
- {}, {}, {}, {}, {}, {}, {}, {}
74
- ]
77
+ ...[{}, {}, {}, {}, {}, {}, {}, {}]
75
78
  }
76
79
  }
77
80
  }
package/articles/Icons.js CHANGED
@@ -4,7 +4,7 @@ import { icon } from '../blocks'
4
4
 
5
5
  export const Icons = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  Header: {
10
10
  tag: 'header',
@@ -15,11 +15,14 @@ export const Icons = {
15
15
  Flex: {
16
16
  Title: {},
17
17
  Paragraph: {
18
- ...[{
19
- props: { text: 'Brand font' }
20
- }, {
21
- props: { text: 'Functional font' }
22
- }]
18
+ ...[
19
+ {
20
+ props: { text: 'Brand font' }
21
+ },
22
+ {
23
+ props: { text: 'Functional font' }
24
+ }
25
+ ]
23
26
  }
24
27
  }
25
28
  }
package/articles/Shadows.js CHANGED
@@ -4,7 +4,7 @@ import { shadow } from '../blocks'
4
4
 
5
5
  export const Shadows = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  Header: {
10
10
  tag: 'header',
@@ -16,11 +16,14 @@ export const Shadows = {
16
16
  Flex: {
17
17
  Title: {},
18
18
  Paragraph: {
19
- ...[{
20
- props: { text: 'Brand font' }
21
- }, {
22
- props: { text: 'Functional font' }
23
- }]
19
+ ...[
20
+ {
21
+ props: { text: 'Brand font' }
22
+ },
23
+ {
24
+ props: { text: 'Functional font' }
25
+ }
26
+ ]
24
27
  }
25
28
  }
26
29
  }
package/articles/Shapes.js CHANGED
@@ -4,7 +4,7 @@ import { shape } from '../blocks'
4
4
 
5
5
  export const Shapes = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  Header: {
10
10
  tag: 'header',
@@ -21,11 +21,14 @@ export const Shapes = {
21
21
  Flex: {
22
22
  Title: {},
23
23
  Paragraph: {
24
- ...[{
25
- props: { text: 'Brand font' }
26
- }, {
27
- props: { text: 'Functional font' }
28
- }]
24
+ ...[
25
+ {
26
+ props: { text: 'Brand font' }
27
+ },
28
+ {
29
+ props: { text: 'Functional font' }
30
+ }
31
+ ]
29
32
  }
30
33
  }
31
34
  }
package/articles/Spacing.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  export const Spacing = {
4
4
  tag: 'article',
5
- extends: 'Flex',
5
+ display: 'flex',
6
6
 
7
7
  Header: {
8
8
  tag: 'header',
@@ -19,11 +19,14 @@ export const Spacing = {
19
19
  Flex: {
20
20
  Title: {},
21
21
  Paragraph: {
22
- ...[{
23
- props: { text: 'Brand font' }
24
- }, {
25
- props: { text: 'Functional font' }
26
- }]
22
+ ...[
23
+ {
24
+ props: { text: 'Brand font' }
25
+ },
26
+ {
27
+ props: { text: 'Functional font' }
28
+ }
29
+ ]
27
30
  }
28
31
  }
29
32
  }
package/articles/Themes.js CHANGED
@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
4
4
 
5
5
  export const Themes = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  Banner: {
10
10
  Title: { props: { text: 'Themes' } },
@@ -15,10 +15,7 @@ export const Themes = {
15
15
  list: {
16
16
  Title: { text: 'What you’ll find' },
17
17
  Paragraph: {
18
- ...[
19
- { text: 'Dark theme' },
20
- { text: 'Light theme' }
21
- ]
18
+ ...[{ text: 'Dark theme' }, { text: 'Light theme' }]
22
19
  }
23
20
  },
24
21
  P: {
@@ -45,24 +42,21 @@ export const Themes = {
45
42
  }
46
43
  },
47
44
  childExtends: {
48
- extends: 'Flex',
45
+ display: 'flex',
49
46
  props: {
50
47
  flow: 'column',
51
48
  align: 'flex-start space-between',
52
49
  padding: 'Z1 Z2'
53
50
  },
54
51
  icons: {
55
- extends: 'Flex',
52
+ display: 'flex',
56
53
  props: {
57
54
  gap: 'B',
58
55
  align: 'center space-between',
59
56
  minWidth: '100%'
60
57
  },
61
58
  childExtends: 'Icon',
62
- children: [
63
- { name: 'sun' },
64
- { name: 'moon' }
65
- ]
59
+ children: [{ name: 'sun' }, { name: 'moon' }]
66
60
  },
67
61
  title: {
68
62
  tag: 'h6',
@@ -75,15 +69,13 @@ export const Themes = {
75
69
  },
76
70
  ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
77
71
  }
78
-
79
72
  },
80
73
  ...[
81
74
  {
82
75
  Hgroup: {
83
76
  Title: { props: { text: 'Dark Theme' } }
84
77
  },
85
- Grid: {
86
- }
78
+ Grid: {}
87
79
  }
88
80
  ]
89
81
  }
package/articles/Typography.js CHANGED
@@ -4,7 +4,7 @@ import { FontsBlock } from '../blocks'
4
4
 
5
5
  export const Typography = {
6
6
  tag: 'article',
7
- extends: 'Flex',
7
+ display: 'flex',
8
8
 
9
9
  Header: {
10
10
  tag: 'header',
@@ -20,11 +20,14 @@ export const Typography = {
20
20
  Flex: {
21
21
  Title: {},
22
22
  Paragraph: {
23
- ...[{
24
- props: { text: 'Brand font' }
25
- }, {
26
- props: { text: 'Functional font' }
27
- }]
23
+ ...[
24
+ {
25
+ props: { text: 'Brand font' }
26
+ },
27
+ {
28
+ props: { text: 'Functional font' }
29
+ }
30
+ ]
28
31
  }
29
32
  }
30
33
  }
package/blocks/color.js CHANGED
@@ -3,7 +3,7 @@
3
3
  import { DefaultBlock } from './section'
4
4
 
5
5
  const ColorTemplate = {
6
- extends: 'Flex',
6
+ display: 'flex',
7
7
  props: {
8
8
  gap: 'A'
9
9
  },
@@ -16,7 +16,7 @@ const ColorTemplate = {
16
16
  },
17
17
 
18
18
  Description: {
19
- extends: 'Flex',
19
+ display: 'flex',
20
20
  props: { gap: 'X', flow: 'column' },
21
21
  Title: { color: 'title' },
22
22
  Value: { margin: 'X - -', color: 'paragraph' },
package/blocks/icon.js CHANGED
@@ -23,7 +23,7 @@ export const icon = {
23
23
  // padding: 'E D E2 D'
24
24
  },
25
25
  childExtends: {
26
- extends: 'Flex',
26
+ display: 'flex',
27
27
  props: {
28
28
  align: 'center',
29
29
  aspectRatio: '1/1',
@@ -48,6 +48,5 @@ export const icon = {
48
48
  Icon: { name }
49
49
  }))
50
50
  }
51
-
52
51
  }
53
52
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@symbo.ls/preview",
3
- "version": "3.1.1",
3
+ "version": "3.1.2",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
6
+ "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
7
7
  "source": "src/index.js"
8
8
  }
package/pages/Component.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict'
2
2
 
3
3
  export const Component = {
4
- extends: 'Flex',
4
+ display: 'flex',
5
5
  props: {
6
6
  align: 'center center',
7
7
  minHeight: '100vh'
@@ -12,7 +12,7 @@ export const Component = {
12
12
  const urlParams = new URLSearchParams(window.location.search)
13
13
  return !urlParams.get('hideUi') || !urlParams.get('fullsize')
14
14
  },
15
- extends: 'Flex',
15
+ display: 'flex',
16
16
  props: {
17
17
  align: 'center space-between',
18
18
  position: 'absolute',
@@ -20,7 +20,10 @@ export const Component = {
20
20
  background: 'black 0.15',
21
21
  padding: 'Z A'
22
22
  },
23
- 'Link+SquareButton': { Icon: { name: 'symbols', fontSize: 'B' }, href: '/' },
23
+ 'Link+SquareButton': {
24
+ Icon: { name: 'symbols', fontSize: 'B' },
25
+ href: '/'
26
+ },
24
27
  OpenInSymbols: () => {
25
28
  const urlParams = new URLSearchParams(window.location.search)
26
29
  const key = urlParams.get('key') || 'Logo'
@@ -49,7 +52,7 @@ export const Component = {
49
52
  const schema = ctx.schema[factory][key]
50
53
  return {
51
54
  key,
52
- extends: 'Flex',
55
+ display: 'flex',
53
56
  state: schema.state,
54
57
  props: () => ({
55
58
  class: 'component',
package/pages/Components.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict'
2
2
 
3
3
  export const ComponentsPage = {
4
- extends: 'Flex',
4
+ display: 'flex',
5
5
  state: {
6
6
  globalTheme: 'dark',
7
7
  value: ''
package/pages/Styleguide.js CHANGED
@@ -1,9 +1,16 @@
1
1
  'use strict'
2
2
 
3
- import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
3
+ import {
4
+ Colors,
5
+ Typography,
6
+ Shadows,
7
+ Icons,
8
+ Spacing,
9
+ Shapes
10
+ } from '../articles'
4
11
 
5
12
  export const Styleguide = {
6
- extends: 'Flex',
13
+ display: 'flex',
7
14
  tag: 'main',
8
15
 
9
16
  props: {