@warp-ds/elements 2.10.1-next.1 → 2.11.0-next.1
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/dist/custom-elements.json +9 -5
- package/dist/docs/card/api.md +0 -8
- package/dist/docs/card/card.md +56 -11
- package/dist/docs/card/styling.md +51 -0
- package/dist/docs/card/usage.md +4 -2
- package/dist/docs/index.md +1 -1
- package/dist/index.d.ts +2 -8
- package/dist/packages/card/card.d.ts +2 -9
- package/dist/packages/card/card.js +151 -20
- package/dist/packages/card/card.js.map +4 -4
- package/dist/packages/card/card.react.stories.d.ts +1 -1
- package/dist/packages/card/card.stories.d.ts +1 -0
- package/dist/packages/card/card.stories.js +44 -1
- package/dist/packages/card/styles.js +132 -2
- package/dist/web-types.json +3 -4
- package/eik/index.js +9 -9
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
import { Card } from "./react";
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
|
-
render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "flat" | "keypressed" | "selected" | "clickable"
|
|
6
|
+
render(args: Omit<React.HTMLAttributes<import("./card").WarpCard>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "flat" | "keypressed" | "selected" | "clickable"> & {} & Partial<Omit<import("./card").WarpCard, keyof HTMLElement>> & React.RefAttributes<import("./card").WarpCard>): React.JSX.Element;
|
|
7
7
|
component: import("@lit/react").ReactWebComponent<import("./card").WarpCard, {}>;
|
|
8
8
|
};
|
|
9
9
|
export default _default;
|
|
@@ -68,7 +68,7 @@ export const PropertyExample = {
|
|
|
68
68
|
},
|
|
69
69
|
render(args) {
|
|
70
70
|
return html `
|
|
71
|
-
<w-card ${spread(prespread(args))}
|
|
71
|
+
<w-card ${spread(prespread(args))}>
|
|
72
72
|
<img
|
|
73
73
|
style="width: 100%; height: 200px; object-fit: cover;"
|
|
74
74
|
src="https://unsplash.it/300/200?random"
|
|
@@ -92,3 +92,46 @@ export const PropertyExample = {
|
|
|
92
92
|
`;
|
|
93
93
|
},
|
|
94
94
|
};
|
|
95
|
+
export const StylingApi = {
|
|
96
|
+
args: {
|
|
97
|
+
clickable: false,
|
|
98
|
+
selected: false,
|
|
99
|
+
flat: false,
|
|
100
|
+
},
|
|
101
|
+
render(args) {
|
|
102
|
+
return html `
|
|
103
|
+
<pre>
|
|
104
|
+
<code>
|
|
105
|
+
<style>
|
|
106
|
+
w-card::part(base) {
|
|
107
|
+
padding: 48px;
|
|
108
|
+
background: rebeccapurple;
|
|
109
|
+
color: cyan;
|
|
110
|
+
}
|
|
111
|
+
w-card::part(border) {
|
|
112
|
+
border-color: magenta;
|
|
113
|
+
border-width: 8px;
|
|
114
|
+
}
|
|
115
|
+
</style>
|
|
116
|
+
</code>
|
|
117
|
+
</pre>
|
|
118
|
+
<style>
|
|
119
|
+
w-card::part(base) {
|
|
120
|
+
padding: 48px;
|
|
121
|
+
background: rebeccapurple;
|
|
122
|
+
color: cyan;
|
|
123
|
+
}
|
|
124
|
+
w-card::part(border) {
|
|
125
|
+
border-color: magenta;
|
|
126
|
+
border-width: 8px;
|
|
127
|
+
}
|
|
128
|
+
</style>
|
|
129
|
+
<w-card ${spread(prespread(args))}>
|
|
130
|
+
<div style="padding: 16px;">
|
|
131
|
+
<h3>Card Title</h3>
|
|
132
|
+
<p>This is card content with some example text.</p>
|
|
133
|
+
</div>
|
|
134
|
+
</w-card>
|
|
135
|
+
`;
|
|
136
|
+
},
|
|
137
|
+
};
|
|
@@ -1,2 +1,132 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export const styles =
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
--_background-color: var(
|
|
5
|
+
--w-c-card-bg,
|
|
6
|
+
var(--w-s-color-surface-elevated-200)
|
|
7
|
+
);
|
|
8
|
+
--_background-color-active: var(
|
|
9
|
+
--w-c-card-bg-active,
|
|
10
|
+
var(--w-s-color-background-active)
|
|
11
|
+
);
|
|
12
|
+
--_background-color-hover: var(
|
|
13
|
+
--w-c-card-bg-hover,
|
|
14
|
+
var(--w-s-color-background-hover)
|
|
15
|
+
);
|
|
16
|
+
--_border-color: var(--w-c-card-border-color, transparent);
|
|
17
|
+
--_border-color-active: var(
|
|
18
|
+
--w-c-card-border-color-active,
|
|
19
|
+
var(--w-s-color-border-active)
|
|
20
|
+
);
|
|
21
|
+
--_border-color-hover: var(
|
|
22
|
+
--w-c-card-border-color-hover,
|
|
23
|
+
var(--w-s-color-border-hover)
|
|
24
|
+
);
|
|
25
|
+
--_border-radius: var(--w-c-card-border-radius, 8px);
|
|
26
|
+
--_border-width: var(--w-c-card-border-width, 2px);
|
|
27
|
+
--_box-shadow: var(
|
|
28
|
+
--w-c-card-box-shadow,
|
|
29
|
+
var(--w-s-shadow-surface-elevated-200)
|
|
30
|
+
);
|
|
31
|
+
--_box-shadow-active: var(
|
|
32
|
+
--w-c-card-box-shadow-active,
|
|
33
|
+
var(--w-s-shadow-surface-elevated-200-active)
|
|
34
|
+
);
|
|
35
|
+
--_box-shadow-hover: var(
|
|
36
|
+
--w-c-card-box-shadow-hover,
|
|
37
|
+
var(--w-s-shadow-surface-elevated-200-hover)
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host([flat]) {
|
|
42
|
+
--_border-color: var(--w-c-card-border-color, var(--w-s-color-border));
|
|
43
|
+
--_border-width: var(--w-c-card-border-width, 2px);
|
|
44
|
+
--_border-radius: var(--w-c-card-border-radius, 4px);
|
|
45
|
+
--_box-shadow: none;
|
|
46
|
+
--_box-shadow-active: none;
|
|
47
|
+
--_box-shadow-hover: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:host([selected]) {
|
|
51
|
+
--_background-color: var(
|
|
52
|
+
--w-c-card-bg,
|
|
53
|
+
var(--w-s-color-background-selected)
|
|
54
|
+
);
|
|
55
|
+
--_background-color-active: var(
|
|
56
|
+
--w-c-card-bg-active,
|
|
57
|
+
var(--w-s-color-background-selected-active)
|
|
58
|
+
);
|
|
59
|
+
--_background-color-hover: var(
|
|
60
|
+
--w-c-card-bg-hover,
|
|
61
|
+
var(--w-s-color-background-selected-hover)
|
|
62
|
+
);
|
|
63
|
+
--_border-color: var(
|
|
64
|
+
--w-c-card-border-color,
|
|
65
|
+
var(--w-s-color-border-selected)
|
|
66
|
+
);
|
|
67
|
+
--_border-color-active: var(
|
|
68
|
+
--w-c-card-border-color-active,
|
|
69
|
+
var(--w-s-color-border-selected-active)
|
|
70
|
+
);
|
|
71
|
+
--_border-color-hover: var(
|
|
72
|
+
--w-c-card-border-color-hover,
|
|
73
|
+
var(--w-s-color-border-selected-hover)
|
|
74
|
+
);
|
|
75
|
+
--_border-width: var(--w-c-card-border-width, 2px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[part="base"] {
|
|
79
|
+
background-color: var(--_background-color);
|
|
80
|
+
border-radius: var(--_border-radius);
|
|
81
|
+
box-shadow: var(--_box-shadow);
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
display: block;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
position: relative;
|
|
86
|
+
transition-property: all;
|
|
87
|
+
transition-duration: 0.15s;
|
|
88
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
[part="base"]:hover {
|
|
92
|
+
background-color: var(--_background-color-hover);
|
|
93
|
+
box-shadow: var(--_box-shadow-hover);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
[part="base"]:active {
|
|
97
|
+
background-color: var(--_background-color-active);
|
|
98
|
+
box-shadow: var(--_box-shadow-active);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
[part="border"] {
|
|
102
|
+
border-radius: var(--_border-radius);
|
|
103
|
+
border-color: var(--_border-color);
|
|
104
|
+
border-width: var(--_border-width);
|
|
105
|
+
position: absolute;
|
|
106
|
+
inset: 0px;
|
|
107
|
+
transition-property: all;
|
|
108
|
+
transition-duration: 0.15s;
|
|
109
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([flat]) [part="base"]:hover [part="border"],
|
|
113
|
+
:host([selected]) [part="base"]:hover [part="border"] {
|
|
114
|
+
border-color: var(--_border-color-hover);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
[part="base"]:active [part="border"] {
|
|
118
|
+
border-color: var(--_border-color-active);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.sr-only {
|
|
122
|
+
position: absolute;
|
|
123
|
+
width: 1px;
|
|
124
|
+
height: 1px;
|
|
125
|
+
padding: 0;
|
|
126
|
+
margin: -1px;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
clip: rect(0, 0, 0, 0);
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
border-width: 0;
|
|
131
|
+
}
|
|
132
|
+
`;
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@warp-ds/elements",
|
|
4
|
-
"version": "2.10.
|
|
4
|
+
"version": "2.10.1-next.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -953,7 +953,7 @@
|
|
|
953
953
|
},
|
|
954
954
|
{
|
|
955
955
|
"name": "w-card",
|
|
956
|
-
"description": "Card is a layout component used for
|
|
956
|
+
"description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)\n---\n",
|
|
957
957
|
"doc-url": "",
|
|
958
958
|
"attributes": [
|
|
959
959
|
{
|
|
@@ -989,8 +989,7 @@
|
|
|
989
989
|
"name": "clickable",
|
|
990
990
|
"description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.",
|
|
991
991
|
"type": "boolean"
|
|
992
|
-
}
|
|
993
|
-
{ "name": "buttonText" }
|
|
992
|
+
}
|
|
994
993
|
],
|
|
995
994
|
"events": []
|
|
996
995
|
}
|