@orange-halo/components 2.2.0 → 3.1.0
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.
- package/custom-elements.json +565 -328
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +7 -0
- package/dist/base.js.map +1 -1
- package/dist/index.d.ts +2 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.d.ts +53 -8
- package/dist/oh-accordion.d.ts.map +1 -1
- package/dist/oh-accordion.js +83 -21
- package/dist/oh-accordion.js.map +1 -1
- package/dist/oh-alert.d.ts +26 -8
- package/dist/oh-alert.d.ts.map +1 -1
- package/dist/oh-alert.js +32 -14
- package/dist/oh-alert.js.map +1 -1
- package/dist/oh-badge.d.ts +32 -13
- package/dist/oh-badge.d.ts.map +1 -1
- package/dist/oh-badge.js +35 -16
- package/dist/oh-badge.js.map +1 -1
- package/dist/oh-breadcrumb.d.ts +39 -12
- package/dist/oh-breadcrumb.d.ts.map +1 -1
- package/dist/oh-breadcrumb.js +43 -21
- package/dist/oh-breadcrumb.js.map +1 -1
- package/dist/oh-button.d.ts +50 -24
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.js +66 -47
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts +47 -19
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +110 -82
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts +56 -12
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.js +87 -45
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts +55 -18
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +91 -59
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-cluster.d.ts +19 -14
- package/dist/oh-cluster.d.ts.map +1 -1
- package/dist/oh-cluster.js +19 -19
- package/dist/oh-cluster.js.map +1 -1
- package/dist/oh-container.d.ts +19 -16
- package/dist/oh-container.d.ts.map +1 -1
- package/dist/oh-container.js +26 -33
- package/dist/oh-container.js.map +1 -1
- package/dist/oh-drawer.d.ts +36 -14
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +57 -26
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-footer.d.ts +37 -18
- package/dist/oh-footer.d.ts.map +1 -1
- package/dist/oh-footer.js +38 -19
- package/dist/oh-footer.js.map +1 -1
- package/dist/oh-grid.d.ts +27 -14
- package/dist/oh-grid.d.ts.map +1 -1
- package/dist/oh-grid.js +27 -19
- package/dist/oh-grid.js.map +1 -1
- package/dist/oh-icon.d.ts +21 -5
- package/dist/oh-icon.d.ts.map +1 -1
- package/dist/oh-icon.js +28 -5
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +105 -21
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.js +207 -68
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts +42 -19
- package/dist/oh-link.d.ts.map +1 -1
- package/dist/oh-link.js +56 -34
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +29 -6
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +37 -16
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts +42 -19
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +44 -21
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts +26 -7
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +32 -13
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts +55 -13
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.js +84 -44
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts +56 -18
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +93 -60
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +58 -16
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +72 -36
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts +33 -15
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +39 -26
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-stack.d.ts +17 -14
- package/dist/oh-stack.d.ts.map +1 -1
- package/dist/oh-stack.js +18 -20
- package/dist/oh-stack.js.map +1 -1
- package/dist/oh-tabs.d.ts +56 -30
- package/dist/oh-tabs.d.ts.map +1 -1
- package/dist/oh-tabs.js +89 -70
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +37 -6
- package/dist/oh-textarea.d.ts.map +1 -1
- package/dist/oh-textarea.js +40 -9
- package/dist/oh-textarea.js.map +1 -1
- package/dist/oh-toggle.d.ts +45 -12
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +68 -33
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.d.ts.map +1 -1
- package/dist/styles/typography.js +1 -2
- package/dist/styles/typography.js.map +1 -1
- package/package.json +3 -7
- package/dist/oh-button.figma.d.ts +0 -2
- package/dist/oh-button.figma.d.ts.map +0 -1
- package/dist/oh-button.figma.js +0 -18
- package/dist/oh-button.figma.js.map +0 -1
- package/dist/oh-checkbox-group.figma.d.ts +0 -2
- package/dist/oh-checkbox-group.figma.d.ts.map +0 -1
- package/dist/oh-checkbox-group.figma.js +0 -24
- package/dist/oh-checkbox-group.figma.js.map +0 -1
- package/dist/oh-hero.d.ts +0 -33
- package/dist/oh-hero.d.ts.map +0 -1
- package/dist/oh-hero.js +0 -248
- package/dist/oh-hero.js.map +0 -1
- package/dist/oh-input.figma.d.ts +0 -2
- package/dist/oh-input.figma.d.ts.map +0 -1
- package/dist/oh-input.figma.js +0 -36
- package/dist/oh-input.figma.js.map +0 -1
- package/dist/oh-radio-group.figma.d.ts +0 -2
- package/dist/oh-radio-group.figma.d.ts.map +0 -1
- package/dist/oh-radio-group.figma.js +0 -22
- package/dist/oh-radio-group.figma.js.map +0 -1
package/dist/oh-toggle.js
CHANGED
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-toggle
|
|
3
3
|
*
|
|
4
|
-
* A
|
|
4
|
+
* A switch for binary on/off settings.
|
|
5
5
|
*
|
|
6
6
|
* DESIGN DECISIONS:
|
|
7
7
|
* ─────────────────
|
|
8
|
-
* 1.
|
|
9
|
-
* -
|
|
10
|
-
* -
|
|
11
|
-
*
|
|
8
|
+
* 1. LOOK FROM TOKENS
|
|
9
|
+
* - Track: shape.pill, color.surface.raised off, color.brand.primary on
|
|
10
|
+
* - Thumb: color.surface.base with a stroke.control border in
|
|
11
|
+
* color.border.emphasis, and a shadow offset by elevation.offset.*
|
|
12
|
+
* (elevation.color.secondary off, elevation.color.primary on). The shadow's horizontal
|
|
13
|
+
* offset flips when checked; hover and press move the thumb by
|
|
14
|
+
* lift.hoverSm / lift.pressSm
|
|
12
15
|
*
|
|
13
16
|
* 2. VISUAL STATES
|
|
14
|
-
* - Off:
|
|
15
|
-
* - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
|
|
17
|
+
* - Off: thumb at the start of the track; on: thumb at the end
|
|
16
18
|
*
|
|
17
19
|
* 3. ACCESSIBILITY
|
|
18
|
-
* -
|
|
20
|
+
* - role="switch" with aria-checked on a focusable track
|
|
19
21
|
* - Keyboard: Space/Enter to toggle
|
|
20
|
-
* - Focus
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* @element oh-toggle
|
|
24
|
-
*
|
|
25
|
-
* @fires oh-change - Fired when the toggle state changes
|
|
22
|
+
* - Focus: a solid outline in focus.ringColor (focus.glowColor adds a
|
|
23
|
+
* glow around it, as decoration)
|
|
24
|
+
* - Named by its visible label (aria-labelledby) or accessible-label
|
|
26
25
|
*/
|
|
27
26
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
28
27
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -33,6 +32,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
33
32
|
import { html, css, nothing } from "lit";
|
|
34
33
|
import { customElement, property } from "lit/decorators.js";
|
|
35
34
|
import { OhElement, baseStyles } from "./base.js";
|
|
35
|
+
/**
|
|
36
|
+
* A switch that turns a setting on or off.
|
|
37
|
+
*
|
|
38
|
+
* **Use it for** a setting that takes effect straight away, such as turning
|
|
39
|
+
* notifications on. **Don't use it for** a choice that's only applied when a
|
|
40
|
+
* form is submitted, or one that must be agreed to (use `oh-checkbox`), or
|
|
41
|
+
* a choice between more than two options (use `oh-radio-group`).
|
|
42
|
+
*
|
|
43
|
+
* **States:** off, on, hover, active, focus.
|
|
44
|
+
*
|
|
45
|
+
* **Behaviour:** clicking the switch or its label, or pressing Space or
|
|
46
|
+
* Enter while it's focused, flips `checked` and fires `oh-change` with
|
|
47
|
+
* `{ checked }`. `name` and `value` are stored but it isn't form-associated,
|
|
48
|
+
* so it doesn't submit with a native form: listen for `oh-change`. It has no
|
|
49
|
+
* `disabled` property. Under `prefers-reduced-motion` it doesn't animate.
|
|
50
|
+
*
|
|
51
|
+
* **Accessibility:** `role="switch"` with `aria-checked`, in the tab order.
|
|
52
|
+
* Set `label` (a visible label, linked with `aria-labelledby`), or
|
|
53
|
+
* `accessible-label` when there's no visible label (not `aria-label`, which
|
|
54
|
+
* isn't forwarded into the shadow root). Focus is a solid outline in
|
|
55
|
+
* `focus.ringColor`.
|
|
56
|
+
*
|
|
57
|
+
* **Look:** set by tokens — `shape.pill` (track), `color.surface.raised` /
|
|
58
|
+
* `color.brand.primary` (track off / on), `color.surface.base`,
|
|
59
|
+
* `stroke.control` and `color.border.emphasis` (thumb),
|
|
60
|
+
* `elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (thumb
|
|
61
|
+
* shadow off / on), `lift.hoverSm` / `lift.pressSm` (movement on hover and
|
|
62
|
+
* press), `focus.ringColor` and `focus.glowColor` (focus),
|
|
63
|
+
* `typography.body.*` (label).
|
|
64
|
+
*
|
|
65
|
+
* @element oh-toggle
|
|
66
|
+
*
|
|
67
|
+
* @fires oh-change - Fired when the toggle state changes. detail: { checked }
|
|
68
|
+
*/
|
|
36
69
|
let OhToggle = class OhToggle extends OhElement {
|
|
37
70
|
constructor() {
|
|
38
71
|
super(...arguments);
|
|
@@ -55,7 +88,7 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
55
88
|
|
|
56
89
|
/* ═══════════════════════════════════════════════════════════════
|
|
57
90
|
TOGGLE TRACK
|
|
58
|
-
|
|
91
|
+
shape.pill corners
|
|
59
92
|
═══════════════════════════════════════════════════════════════ */
|
|
60
93
|
|
|
61
94
|
.toggle__track {
|
|
@@ -79,68 +112,70 @@ let OhToggle = class OhToggle extends OhElement {
|
|
|
79
112
|
box-shadow: 0 0 0 4px var(--oh-focus-glow-color);
|
|
80
113
|
}
|
|
81
114
|
|
|
82
|
-
/* Checked
|
|
115
|
+
/* Checked: track in color.brand.primary */
|
|
83
116
|
.toggle__track--checked {
|
|
84
117
|
background-color: var(--oh-color-brand-primary);
|
|
85
118
|
}
|
|
86
119
|
|
|
87
120
|
/* ═══════════════════════════════════════════════════════════════
|
|
88
121
|
TOGGLE THUMB
|
|
89
|
-
|
|
90
|
-
|
|
122
|
+
Circle overlapping the track edge, with an offset shadow
|
|
123
|
+
(elevation.offset.*). The shadow's horizontal offset flips when
|
|
124
|
+
checked
|
|
91
125
|
═══════════════════════════════════════════════════════════════ */
|
|
92
126
|
|
|
93
127
|
.toggle__thumb {
|
|
94
128
|
position: absolute;
|
|
95
129
|
top: -3px;
|
|
96
|
-
|
|
130
|
+
inset-inline-start: -3px;
|
|
97
131
|
width: 26px;
|
|
98
132
|
height: 26px;
|
|
99
133
|
background-color: var(--oh-color-surface-base);
|
|
100
134
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
101
135
|
border-radius: 50%;
|
|
102
136
|
box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
|
|
103
|
-
0 0 var(--oh-
|
|
137
|
+
0 0 var(--oh-elevation-color-secondary);
|
|
104
138
|
transition:
|
|
105
139
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
|
|
106
140
|
box-shadow var(--oh-motion-snappy) ease;
|
|
107
141
|
}
|
|
108
142
|
|
|
109
|
-
/* Checked: thumb moves
|
|
143
|
+
/* Checked: thumb moves to the end of the track; shadow offset flips
|
|
144
|
+
horizontally, in elevation.color.primary */
|
|
110
145
|
.toggle__track--checked .toggle__thumb {
|
|
111
|
-
transform: translateX(30px);
|
|
146
|
+
transform: translateX(calc(30px * var(--_oh-dir)));
|
|
112
147
|
box-shadow: calc(-1 * var(--oh-elevation-offset-md))
|
|
113
|
-
var(--oh-elevation-offset-md) 0 0 var(--oh-
|
|
148
|
+
var(--oh-elevation-offset-md) 0 0 var(--oh-elevation-color-primary);
|
|
114
149
|
}
|
|
115
150
|
|
|
116
|
-
/* Hover
|
|
151
|
+
/* Hover: thumb moves by lift.hoverSm; shadow offset elevation.offset.lg */
|
|
117
152
|
.toggle__track:hover .toggle__thumb {
|
|
118
153
|
transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
|
|
119
154
|
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
120
|
-
0 0 var(--oh-
|
|
155
|
+
0 0 var(--oh-elevation-color-secondary);
|
|
121
156
|
}
|
|
122
157
|
|
|
123
|
-
/* Checked hover
|
|
158
|
+
/* Checked + hover: flipped shadow at elevation.offset.lg */
|
|
124
159
|
.toggle__track--checked:hover .toggle__thumb {
|
|
125
|
-
transform: translateX(30px)
|
|
160
|
+
transform: translateX(calc(30px * var(--_oh-dir)))
|
|
126
161
|
translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
|
|
127
162
|
box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
|
|
128
|
-
var(--oh-elevation-offset-lg) 0 0 var(--oh-
|
|
163
|
+
var(--oh-elevation-offset-lg) 0 0 var(--oh-elevation-color-primary);
|
|
129
164
|
}
|
|
130
165
|
|
|
131
|
-
/* Active
|
|
166
|
+
/* Active: thumb moves by lift.pressSm; shadow offset elevation.offset.xs */
|
|
132
167
|
.toggle__track:active .toggle__thumb {
|
|
133
168
|
transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
|
|
134
169
|
box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
|
|
135
|
-
0 0 var(--oh-
|
|
170
|
+
0 0 var(--oh-elevation-color-secondary);
|
|
136
171
|
}
|
|
137
172
|
|
|
138
|
-
/* Checked active
|
|
173
|
+
/* Checked + active: flipped shadow at elevation.offset.xs */
|
|
139
174
|
.toggle__track--checked:active .toggle__thumb {
|
|
140
|
-
transform: translateX(30px)
|
|
175
|
+
transform: translateX(calc(30px * var(--_oh-dir)))
|
|
141
176
|
translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
|
|
142
177
|
box-shadow: calc(-1 * var(--oh-elevation-offset-xs))
|
|
143
|
-
var(--oh-elevation-offset-xs) 0 0 var(--oh-
|
|
178
|
+
var(--oh-elevation-offset-xs) 0 0 var(--oh-elevation-color-primary);
|
|
144
179
|
}
|
|
145
180
|
|
|
146
181
|
/* ═══════════════════════════════════════════════════════════════
|
package/dist/oh-toggle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,eAAO,MAAM,gBAAgB,yBA0N5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,QAA2B,CAAC"}
|
|
@@ -126,8 +126,7 @@ export const typographyStyles = css `
|
|
|
126
126
|
.oh-link::after {
|
|
127
127
|
content: "";
|
|
128
128
|
position: absolute;
|
|
129
|
-
|
|
130
|
-
right: 0;
|
|
129
|
+
inset-inline: 0;
|
|
131
130
|
bottom: 0;
|
|
132
131
|
height: var(--oh-decoration-underline-thickness);
|
|
133
132
|
background: repeating-linear-gradient(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NlC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orange-halo/components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Web Components for Orange Halo Design System",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -63,10 +63,6 @@
|
|
|
63
63
|
"types": "./dist/oh-grid.d.ts",
|
|
64
64
|
"import": "./dist/oh-grid.js"
|
|
65
65
|
},
|
|
66
|
-
"./oh-hero.js": {
|
|
67
|
-
"types": "./dist/oh-hero.d.ts",
|
|
68
|
-
"import": "./dist/oh-hero.js"
|
|
69
|
-
},
|
|
70
66
|
"./oh-icon.js": {
|
|
71
67
|
"types": "./dist/oh-icon.d.ts",
|
|
72
68
|
"import": "./dist/oh-icon.js"
|
|
@@ -133,12 +129,12 @@
|
|
|
133
129
|
"lit": "^3.2.1"
|
|
134
130
|
},
|
|
135
131
|
"peerDependencies": {
|
|
136
|
-
"@orange-halo/tokens": "^
|
|
132
|
+
"@orange-halo/tokens": "^3.0.0",
|
|
137
133
|
"@orange-halo/utils": "^1.1.0"
|
|
138
134
|
},
|
|
139
135
|
"devDependencies": {
|
|
140
136
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
141
|
-
"@orange-halo/tokens": "
|
|
137
|
+
"@orange-halo/tokens": "3.0.0",
|
|
142
138
|
"@orange-halo/utils": "1.1.0"
|
|
143
139
|
},
|
|
144
140
|
"publishConfig": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-button.figma.d.ts","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":""}
|
package/dist/oh-button.figma.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import figma, { html } from "@figma/code-connect/html";
|
|
2
|
-
/**
|
|
3
|
-
* Code Connect for oh-button
|
|
4
|
-
*/
|
|
5
|
-
figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-21", {
|
|
6
|
-
props: {
|
|
7
|
-
variant: figma.enum("Variant", {
|
|
8
|
-
Primary: "primary",
|
|
9
|
-
Secondary: "secondary",
|
|
10
|
-
Accent: "accent",
|
|
11
|
-
}),
|
|
12
|
-
label: figma.string("Label"),
|
|
13
|
-
},
|
|
14
|
-
example: (props) => html `
|
|
15
|
-
<oh-button variant="${props.variant}"> ${props.label} </oh-button>
|
|
16
|
-
`,
|
|
17
|
-
});
|
|
18
|
-
//# sourceMappingURL=oh-button.figma.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-button.figma.js","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;GAEG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;4BACA,KAAK,CAAC,OAAO,MAAM,KAAK,CAAC,KAAK;KACrD;CACF,CACF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-checkbox-group.figma.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":""}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import figma, { html } from "@figma/code-connect/html";
|
|
2
|
-
/**
|
|
3
|
-
* Code Connect for oh-checkbox-group
|
|
4
|
-
*
|
|
5
|
-
* Replace the Figma URL below with your actual component URL.
|
|
6
|
-
*/
|
|
7
|
-
figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-77", {
|
|
8
|
-
props: {
|
|
9
|
-
legend: figma.string("Legend"),
|
|
10
|
-
required: figma.boolean("Required"),
|
|
11
|
-
error: figma.boolean("Error"),
|
|
12
|
-
errorMessage: figma.string("Error Message"),
|
|
13
|
-
},
|
|
14
|
-
example: (props) => html `
|
|
15
|
-
<oh-checkbox-group
|
|
16
|
-
legend="${props.legend}"
|
|
17
|
-
?required="${props.required}"
|
|
18
|
-
?error="${props.error}"
|
|
19
|
-
errormessage="${props.errorMessage}"
|
|
20
|
-
.options="\${options}"
|
|
21
|
-
></oh-checkbox-group>
|
|
22
|
-
`,
|
|
23
|
-
});
|
|
24
|
-
//# sourceMappingURL=oh-checkbox-group.figma.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEV,KAAK,CAAC,MAAM;qBACT,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;wBACL,KAAK,CAAC,YAAY;;;KAGrC;CACF,CACF,CAAC"}
|
package/dist/oh-hero.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* oh-hero
|
|
3
|
-
*
|
|
4
|
-
* A prominent hero section for page headers.
|
|
5
|
-
*
|
|
6
|
-
* BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
|
|
7
|
-
* it from @orange-halo/brand-orange-halo; importing it from components is
|
|
8
|
-
* deprecated and stops working in components 3.0, when this file moves to
|
|
9
|
-
* the brand package (brand plan phase 8).
|
|
10
|
-
*
|
|
11
|
-
* @element oh-hero
|
|
12
|
-
*/
|
|
13
|
-
import { LitElement } from "lit";
|
|
14
|
-
import "./oh-progress.js";
|
|
15
|
-
export type HeroVariant = "content" | "journey";
|
|
16
|
-
export type HeroSize = "sm" | "md" | "lg" | "xl";
|
|
17
|
-
export declare class OhHero extends LitElement {
|
|
18
|
-
static styles: import("lit").CSSResult;
|
|
19
|
-
variant: HeroVariant;
|
|
20
|
-
size: HeroSize;
|
|
21
|
-
heading: string;
|
|
22
|
-
subtitle: string;
|
|
23
|
-
journeyName: string;
|
|
24
|
-
currentStep: number;
|
|
25
|
-
totalSteps: number;
|
|
26
|
-
render(): import("lit").TemplateResult<1>;
|
|
27
|
-
}
|
|
28
|
-
declare global {
|
|
29
|
-
interface HTMLElementTagNameMap {
|
|
30
|
-
"oh-hero": OhHero;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
//# sourceMappingURL=oh-hero.d.ts.map
|
package/dist/oh-hero.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA8ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-hero.js
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* oh-hero
|
|
3
|
-
*
|
|
4
|
-
* A prominent hero section for page headers.
|
|
5
|
-
*
|
|
6
|
-
* BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
|
|
7
|
-
* it from @orange-halo/brand-orange-halo; importing it from components is
|
|
8
|
-
* deprecated and stops working in components 3.0, when this file moves to
|
|
9
|
-
* the brand package (brand plan phase 8).
|
|
10
|
-
*
|
|
11
|
-
* @element oh-hero
|
|
12
|
-
*/
|
|
13
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
14
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
15
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
16
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
17
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
18
|
-
};
|
|
19
|
-
import { html, css, LitElement, nothing } from "lit";
|
|
20
|
-
import { customElement, property } from "lit/decorators.js";
|
|
21
|
-
import "./oh-progress.js";
|
|
22
|
-
let OhHero = class OhHero extends LitElement {
|
|
23
|
-
constructor() {
|
|
24
|
-
super(...arguments);
|
|
25
|
-
this.variant = "content";
|
|
26
|
-
this.size = "lg";
|
|
27
|
-
this.heading = "";
|
|
28
|
-
this.subtitle = "";
|
|
29
|
-
this.journeyName = "";
|
|
30
|
-
this.currentStep = 1;
|
|
31
|
-
this.totalSteps = 1;
|
|
32
|
-
}
|
|
33
|
-
static { this.styles = css `
|
|
34
|
-
:host {
|
|
35
|
-
display: block;
|
|
36
|
-
background-color: var(--oh-color-brand-primary);
|
|
37
|
-
color: var(--oh-color-text-on-brand);
|
|
38
|
-
font-family: var(--oh-typography-body-font-family);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.hero {
|
|
42
|
-
padding: var(--oh-spacing-12) 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.hero--journey {
|
|
46
|
-
padding: var(--oh-spacing-8) 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/* Container styles - matches oh-container */
|
|
50
|
-
.hero__container {
|
|
51
|
-
width: 100%;
|
|
52
|
-
max-width: var(--hero-max-width, var(--oh-layout-container-lg));
|
|
53
|
-
margin-left: auto;
|
|
54
|
-
margin-right: auto;
|
|
55
|
-
padding-left: var(--oh-spacing-4);
|
|
56
|
-
padding-right: var(--oh-spacing-4);
|
|
57
|
-
box-sizing: border-box;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Size variants */
|
|
61
|
-
:host([size="sm"]) {
|
|
62
|
-
--hero-max-width: var(--oh-layout-container-sm);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
:host([size="md"]) {
|
|
66
|
-
--hero-max-width: var(--oh-layout-container-md);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host([size="lg"]) {
|
|
70
|
-
--hero-max-width: var(--oh-layout-container-lg);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([size="xl"]) {
|
|
74
|
-
--hero-max-width: var(--oh-layout-container-xl);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.hero__heading {
|
|
78
|
-
font-size: var(--oh-typography-heading-h1-font-size);
|
|
79
|
-
font-weight: var(--oh-typography-heading-h1-font-weight);
|
|
80
|
-
line-height: var(--oh-typography-heading-h1-line-height);
|
|
81
|
-
margin: 0 0 var(--oh-spacing-4) 0;
|
|
82
|
-
color: var(--oh-color-text-on-brand);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.hero__subtitle {
|
|
86
|
-
font-size: var(--oh-typography-body-xl-font-size);
|
|
87
|
-
font-weight: var(--oh-typography-body-xl-font-weight);
|
|
88
|
-
line-height: var(--oh-typography-body-xl-line-height);
|
|
89
|
-
margin: 0 0 var(--oh-spacing-6) 0;
|
|
90
|
-
color: var(--oh-color-text-on-brand);
|
|
91
|
-
max-width: 65ch;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.hero__actions {
|
|
95
|
-
display: flex;
|
|
96
|
-
flex-wrap: wrap;
|
|
97
|
-
gap: var(--oh-spacing-4);
|
|
98
|
-
margin-top: var(--oh-spacing-6);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.hero__journey-heading {
|
|
102
|
-
font-size: var(--oh-typography-heading-h2-font-size);
|
|
103
|
-
font-weight: var(--oh-typography-heading-h2-font-weight);
|
|
104
|
-
line-height: var(--oh-typography-heading-h2-line-height);
|
|
105
|
-
margin: 0 0 var(--oh-spacing-6) 0;
|
|
106
|
-
color: var(--oh-color-text-on-brand);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.hero__journey-name {
|
|
110
|
-
display: block;
|
|
111
|
-
font-family: var(--oh-typography-eyebrow-font-family);
|
|
112
|
-
font-size: var(--oh-typography-eyebrow-font-size);
|
|
113
|
-
font-weight: var(--oh-typography-eyebrow-font-weight);
|
|
114
|
-
text-transform: uppercase;
|
|
115
|
-
letter-spacing: var(--oh-typography-eyebrow-letter-spacing);
|
|
116
|
-
color: var(--oh-color-text-on-brand);
|
|
117
|
-
margin-bottom: var(--oh-spacing-2);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.hero__page-name {
|
|
121
|
-
display: block;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.hero__progress-wrapper {
|
|
125
|
-
margin-top: var(--oh-spacing-4);
|
|
126
|
-
max-width: var(--oh-layout-container-sm);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/* Responsive container padding - matches oh-container */
|
|
130
|
-
@media (min-width: 640px) {
|
|
131
|
-
.hero__container {
|
|
132
|
-
padding-left: var(--oh-spacing-6);
|
|
133
|
-
padding-right: var(--oh-spacing-6);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
@media (min-width: 1024px) {
|
|
138
|
-
.hero__container {
|
|
139
|
-
padding-left: var(--oh-spacing-8);
|
|
140
|
-
padding-right: var(--oh-spacing-8);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
@media (max-width: 768px) {
|
|
145
|
-
.hero {
|
|
146
|
-
padding: var(--oh-spacing-8) 0;
|
|
147
|
-
}
|
|
148
|
-
.hero__heading {
|
|
149
|
-
font-size: var(--oh-typography-heading-h2-font-size);
|
|
150
|
-
}
|
|
151
|
-
.hero__subtitle {
|
|
152
|
-
font-size: var(--oh-typography-body-lg-font-size);
|
|
153
|
-
}
|
|
154
|
-
.hero--journey {
|
|
155
|
-
padding: var(--oh-spacing-6) 0;
|
|
156
|
-
}
|
|
157
|
-
.hero__journey-heading {
|
|
158
|
-
font-size: var(--oh-typography-heading-h3-font-size);
|
|
159
|
-
}
|
|
160
|
-
.hero__progress-wrapper {
|
|
161
|
-
max-width: 100%;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
@media (max-width: 480px) {
|
|
166
|
-
.hero__heading {
|
|
167
|
-
font-size: var(--oh-typography-heading-h3-font-size);
|
|
168
|
-
}
|
|
169
|
-
.hero__journey-heading {
|
|
170
|
-
font-size: var(--oh-typography-heading-h4-font-size);
|
|
171
|
-
}
|
|
172
|
-
.hero__actions {
|
|
173
|
-
flex-direction: column;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
`; }
|
|
177
|
-
render() {
|
|
178
|
-
if (this.variant === "journey") {
|
|
179
|
-
const progressLabel = `Step ${this.currentStep} of ${this.totalSteps}`;
|
|
180
|
-
return html `
|
|
181
|
-
<div class="hero hero--journey">
|
|
182
|
-
<div class="hero__container">
|
|
183
|
-
<h1 class="hero__journey-heading">
|
|
184
|
-
${this.journeyName
|
|
185
|
-
? html `<span class="hero__journey-name"
|
|
186
|
-
>${this.journeyName}</span
|
|
187
|
-
>`
|
|
188
|
-
: nothing}
|
|
189
|
-
<span class="hero__page-name">${this.heading}</span>
|
|
190
|
-
</h1>
|
|
191
|
-
<div class="hero__progress-wrapper">
|
|
192
|
-
<oh-progress
|
|
193
|
-
.value=${this.currentStep}
|
|
194
|
-
.max=${this.totalSteps}
|
|
195
|
-
label=${progressLabel}
|
|
196
|
-
size="md"
|
|
197
|
-
inverse
|
|
198
|
-
show-value
|
|
199
|
-
></oh-progress>
|
|
200
|
-
</div>
|
|
201
|
-
<slot></slot>
|
|
202
|
-
</div>
|
|
203
|
-
</div>
|
|
204
|
-
`;
|
|
205
|
-
}
|
|
206
|
-
return html `
|
|
207
|
-
<div class="hero">
|
|
208
|
-
<div class="hero__container">
|
|
209
|
-
${this.heading
|
|
210
|
-
? html `<h1 class="hero__heading">${this.heading}</h1>`
|
|
211
|
-
: nothing}
|
|
212
|
-
${this.subtitle
|
|
213
|
-
? html `<p class="hero__subtitle">${this.subtitle}</p>`
|
|
214
|
-
: nothing}
|
|
215
|
-
<div class="hero__actions">
|
|
216
|
-
<slot></slot>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
220
|
-
`;
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
__decorate([
|
|
224
|
-
property({ type: String, reflect: true })
|
|
225
|
-
], OhHero.prototype, "variant", void 0);
|
|
226
|
-
__decorate([
|
|
227
|
-
property({ type: String, reflect: true })
|
|
228
|
-
], OhHero.prototype, "size", void 0);
|
|
229
|
-
__decorate([
|
|
230
|
-
property({ type: String })
|
|
231
|
-
], OhHero.prototype, "heading", void 0);
|
|
232
|
-
__decorate([
|
|
233
|
-
property({ type: String })
|
|
234
|
-
], OhHero.prototype, "subtitle", void 0);
|
|
235
|
-
__decorate([
|
|
236
|
-
property({ type: String, attribute: "journey-name" })
|
|
237
|
-
], OhHero.prototype, "journeyName", void 0);
|
|
238
|
-
__decorate([
|
|
239
|
-
property({ type: Number, attribute: "current-step" })
|
|
240
|
-
], OhHero.prototype, "currentStep", void 0);
|
|
241
|
-
__decorate([
|
|
242
|
-
property({ type: Number, attribute: "total-steps" })
|
|
243
|
-
], OhHero.prototype, "totalSteps", void 0);
|
|
244
|
-
OhHero = __decorate([
|
|
245
|
-
customElement("oh-hero")
|
|
246
|
-
], OhHero);
|
|
247
|
-
export { OhHero };
|
|
248
|
-
//# sourceMappingURL=oh-hero.js.map
|
package/dist/oh-hero.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IAgDjB,CAAC;aApNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I3B,AA/IqB,CA+IpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA;uBACC,IAAI,CAAC,WAAW;oBACnB;gBACJ,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AAjED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AArKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAqNlB"}
|
package/dist/oh-input.figma.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.figma.d.ts","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":""}
|
package/dist/oh-input.figma.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import figma, { html } from "@figma/code-connect/html";
|
|
2
|
-
/**
|
|
3
|
-
* Code Connect for oh-input
|
|
4
|
-
*
|
|
5
|
-
* Figma Properties:
|
|
6
|
-
* - Label (text): Field label
|
|
7
|
-
* - Value (text): Input content
|
|
8
|
-
* - Show Placeholder (boolean): Whether to show placeholder
|
|
9
|
-
* - Placeholder (text): Placeholder text when empty
|
|
10
|
-
* - Helper Text (text): Help text below input
|
|
11
|
-
* - Error Text (text): Error message (triggers error styling when set)
|
|
12
|
-
* - Required (boolean): Shows asterisk on label
|
|
13
|
-
* - State (variant): Default, Hover, Focus
|
|
14
|
-
*/
|
|
15
|
-
figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-40", {
|
|
16
|
-
props: {
|
|
17
|
-
label: figma.string("Label"),
|
|
18
|
-
value: figma.string("Value"),
|
|
19
|
-
showPlaceholder: figma.boolean("Show Placeholder"),
|
|
20
|
-
placeholder: figma.string("Placeholder"),
|
|
21
|
-
required: figma.boolean("Required"),
|
|
22
|
-
helperText: figma.string("Helper Text"),
|
|
23
|
-
errorText: figma.string("Error Text"),
|
|
24
|
-
},
|
|
25
|
-
example: (props) => html `
|
|
26
|
-
<oh-input
|
|
27
|
-
label="${props.label}"
|
|
28
|
-
value="${props.value}"
|
|
29
|
-
placeholder="${props.showPlaceholder ? props.placeholder : ""}"
|
|
30
|
-
?required="${props.required}"
|
|
31
|
-
helpertext="${props.helperText}"
|
|
32
|
-
errortext="${props.errorText}"
|
|
33
|
-
></oh-input>
|
|
34
|
-
`,
|
|
35
|
-
});
|
|
36
|
-
//# sourceMappingURL=oh-input.figma.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;sBACb,KAAK,CAAC,UAAU;qBACjB,KAAK,CAAC,SAAS;;KAE/B;CACF,CACF,CAAC"}
|