@brilo/base-blocks 0.1.18 → 0.1.21

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 (7) hide show
  1. package/build/.tsbuildinfo +1 -1
  2. package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts.map +1 -1
  3. package/build/blocks/usp/usp-item/buildPreviewStyle.js +5 -4
  4. package/package.json +1 -1
  5. package/src/blocks/usp/usp-group/editor.scss +0 -5
  6. package/src/blocks/usp/usp-item/buildPreviewStyle.ts +7 -5
  7. package/src/blocks/usp/usp-item/editor.scss +12 -5
package/build/blocks/usp/usp-item/buildPreviewStyle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"buildPreviewStyle.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/buildPreviewStyle.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GAAG,eAAe,CAsCvI"}
1
+ {"version":3,"file":"buildPreviewStyle.d.ts","sourceRoot":"","sources":["../../../../src/blocks/usp/usp-item/buildPreviewStyle.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GAAG,eAAe,CAwCvI"}
package/build/blocks/usp/usp-item/buildPreviewStyle.js CHANGED
@@ -5,7 +5,7 @@ export function buildUspPreviewStyle(shared, resolveHex = (value) => value) {
5
5
  return { rootClassName: '', iconClassName: '', cssVars: {} };
6
6
  }
7
7
  const icon = (_a = shared.icon) !== null && _a !== void 0 ? _a : {};
8
- const rootClassName = clsx(shared.direction && `--direction-${shared.direction}`, shared.align && `--align-${shared.align}`, shared.textAlign && `--body-align-${shared.textAlign}`, shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`, icon.background && '--icon-background', icon.color && '--icon-color', icon.borderColor && '--icon-bordered', shared.backgroundColor && '--background-color', shared.borderColor && '--border', shared.textColor && '--text-color');
8
+ const rootClassName = clsx(shared.direction && `--direction-${shared.direction}`, shared.align && `--align-${shared.align}`, shared.textAlign && `--body-align-${shared.textAlign}`, shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`, icon.background && icon.background !== 'none' && '--icon-background', icon.color && icon.color !== 'none' && '--icon-color', icon.borderColor && '--icon-bordered', shared.backgroundColor && '--background-color', shared.borderColor && '--border', shared.textColor && '--text-color');
9
9
  const iconClassName = clsx(icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`);
10
10
  const cssVars = {};
11
11
  if (shared.borderColor)
@@ -14,14 +14,15 @@ export function buildUspPreviewStyle(shared, resolveHex = (value) => value) {
14
14
  cssVars['--background-color'] = resolveHex(shared.backgroundColor);
15
15
  if (shared.textColor)
16
16
  cssVars['--text-color'] = resolveHex(shared.textColor);
17
- if (icon.background)
17
+ if (icon.background && icon.background !== 'none')
18
18
  cssVars['--icon-background-color'] = resolveHex(icon.background);
19
- if (icon.color)
19
+ if (icon.color && icon.color !== 'none')
20
20
  cssVars['--icon-color'] = resolveHex(icon.color);
21
21
  if (icon.size)
22
22
  cssVars['--icon-size'] = `${icon.size}px`;
23
- if (icon.backgroundSize)
23
+ if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
24
24
  cssVars['--icon-background-size'] = `${icon.backgroundSize}px`;
25
+ }
25
26
  if (icon.borderColor) {
26
27
  cssVars['--icon-outline-color'] = resolveHex(icon.borderColor);
27
28
  cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brilo/base-blocks",
3
- "version": "0.1.18",
3
+ "version": "0.1.21",
4
4
  "author": "Brilo",
5
5
  "main": "./build/index.js",
6
6
  "types": "./build/index.d.ts",
package/src/blocks/usp/usp-group/editor.scss CHANGED
@@ -8,11 +8,6 @@
8
8
  align-items: flex-start;
9
9
  }
10
10
 
11
- &.--card .i-usp__inner {
12
- background: #fff;
13
- border-color: #d0d5dd;
14
- }
15
-
16
11
  &.--shadow-sm .i-usp__inner {
17
12
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
18
13
  }
package/src/blocks/usp/usp-item/buildPreviewStyle.ts CHANGED
@@ -37,8 +37,8 @@ export function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex: (value
37
37
  shared.align && `--align-${shared.align}`,
38
38
  shared.textAlign && `--body-align-${shared.textAlign}`,
39
39
  shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`,
40
- icon.background && '--icon-background',
41
- icon.color && '--icon-color',
40
+ icon.background && icon.background !== 'none' && '--icon-background',
41
+ icon.color && icon.color !== 'none' && '--icon-color',
42
42
  icon.borderColor && '--icon-bordered',
43
43
  shared.backgroundColor && '--background-color',
44
44
  shared.borderColor && '--border',
@@ -53,10 +53,12 @@ export function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex: (value
53
53
  if (shared.borderColor) cssVars['--border-color'] = resolveHex(shared.borderColor)
54
54
  if (shared.backgroundColor) cssVars['--background-color'] = resolveHex(shared.backgroundColor)
55
55
  if (shared.textColor) cssVars['--text-color'] = resolveHex(shared.textColor)
56
- if (icon.background) cssVars['--icon-background-color'] = resolveHex(icon.background)
57
- if (icon.color) cssVars['--icon-color'] = resolveHex(icon.color)
56
+ if (icon.background && icon.background !== 'none') cssVars['--icon-background-color'] = resolveHex(icon.background)
57
+ if (icon.color && icon.color !== 'none') cssVars['--icon-color'] = resolveHex(icon.color)
58
58
  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
59
- if (icon.backgroundSize) cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
59
+ if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
60
+ cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
61
+ }
60
62
  if (icon.borderColor) {
61
63
  cssVars['--icon-outline-color'] = resolveHex(icon.borderColor)
62
64
  cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`
package/src/blocks/usp/usp-item/editor.scss CHANGED
@@ -3,6 +3,13 @@
3
3
  margin-inline: 0;
4
4
  text-align: var(--text-align, left);
5
5
  border-radius: 4px;
6
+ --icon-background-size: 0px;
7
+
8
+ // Background size only reserves space when a background or outline is actually selected.
9
+ &.--icon-background,
10
+ &.--icon-bordered {
11
+ --icon-background-size: 88px;
12
+ }
6
13
 
7
14
  &.--shadow {
8
15
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
@@ -59,7 +66,7 @@
59
66
  }
60
67
 
61
68
  .i-usp__icon {
62
- --icon-box-size: max(var(--icon-background-size, 88px), var(--icon-size, 88px));
69
+ --icon-box-size: max(var(--icon-background-size, 0px), var(--icon-size, 88px));
63
70
 
64
71
  width: var(--icon-box-size);
65
72
  height: var(--icon-box-size);
@@ -73,8 +80,8 @@
73
80
  &::after {
74
81
  content: "";
75
82
  grid-area: pile;
76
- width: var(--icon-background-size, 88px);
77
- height: var(--icon-background-size, 88px);
83
+ width: var(--icon-background-size, 0px);
84
+ height: var(--icon-background-size, 0px);
78
85
  border-radius: inherit;
79
86
  clip-path: var(--icon-background-shape, none);
80
87
  }
@@ -86,8 +93,8 @@
86
93
 
87
94
  &::after {
88
95
  z-index: 1;
89
- width: calc(var(--icon-background-size, 88px) - var(--icon-outline-width, 0px) * 2);
90
- height: calc(var(--icon-background-size, 88px) - var(--icon-outline-width, 0px) * 2);
96
+ width: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
97
+ height: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
91
98
  background-color: var(--icon-background-color, transparent);
92
99
  }
93
100