Skip to content

Commit cb8e30f

Browse files
chubara62372chubara62372
committed
save work
1 parent 78b7bf8 commit cb8e30f

File tree

12 files changed

+241
-56
lines changed

12 files changed

+241
-56
lines changed

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
2828
"./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
2929
"./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
30+
"./pf-description-list/pf-description-list.js": "./pf-description-list/pf-description-list.js",
3031
"./pf-dropdown/context.js": "./pf-dropdown/context.js",
3132
"./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.js",
3233
"./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",

‎elements/pf-alert/demo/alternate.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
<section id="alert-variant-alternate">
2-
<pf-alert variant="alternate">
3-
<h3 slot="header">Neutral</h3>
4-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
2+
<pf-alert state="custom" variant="alternate">
3+
<h3 slot="header">Default alert title</h3>
4+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
55
egestas, a sollicitudin mauris tincidunt.</p>
66
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
7-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
7+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
88
</pf-alert>
99

1010
<pf-alert state="info" variant="alternate">
11-
<h3 slot="header">Info</h3>
12-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
11+
<h3 slot="header">Info alert title</h3>
12+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
1313
egestas, a sollicitudin mauris tincidunt.</p>
1414
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
15-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
15+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
1616
</pf-alert>
1717

1818
<pf-alert state="success" variant="alternate">
19-
<h3 slot="header">Success</h3>
20-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
19+
<h3 slot="header">Success alert title</h3>
20+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
2121
egestas, a sollicitudin mauris tincidunt.</p>
2222
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
23-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
23+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
2424
</pf-alert>
2525

2626
<pf-alert state="warning" variant="alternate">
27-
<h3 slot="header">Warning</h3>
28-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
27+
<h3 slot="header">Warning alert title</h3>
28+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
2929
egestas, a sollicitudin mauris tincidunt.</p>
3030
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
31-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
31+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
3232
</pf-alert>
3333

3434
<pf-alert state="danger" variant="alternate">
35-
<h3 slot="header">Danger</h3>
36-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
35+
<h3 slot="header">Danger alert title</h3>
36+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
3737
egestas, a sollicitudin mauris tincidunt.</p>
3838
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
39-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
39+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
4040
</pf-alert>
41-
41+
<!--
4242
<pf-alert state="caution" variant="alternate">
4343
<h3 slot="header">Caution</h3>
4444
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
4545
egestas, a sollicitudin mauris tincidunt.</p>
4646
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
4747
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
48-
</pf-alert>
48+
</pf-alert> -->
4949
</section>
5050

5151

‎elements/pf-alert/demo/inline.html‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,53 @@
11
<section id="alert-variant-inline">
2-
<pf-alert variant="inline">
3-
<h3 slot="header">Default</h3>
4-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
2+
<pf-alert state="custom" variant="inline">
3+
<h3 slot="header">Custom inline alert title</h3>
4+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
55
egestas, a sollicitudin mauris tincidunt.</p>
66
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
7-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
7+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
88
</pf-alert>
99

10-
<pf-alert state="info" variant="inline">
11-
<h3 slot="header">Info</h3>
12-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
10+
<pf-alert state="info" variant="inline">
11+
<h3 slot="header">Info inline alert title</h3>
12+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
1313
egestas, a sollicitudin mauris tincidunt.</p>
1414
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
15-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
15+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
1616
</pf-alert>
1717

1818
<pf-alert state="success" variant="inline">
19-
<h3 slot="header">Success</h3>
20-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
19+
<h3 slot="header">Success inline alert title</h3>
20+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
2121
egestas, a sollicitudin mauris tincidunt.</p>
2222
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
23-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
23+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
2424
</pf-alert>
2525

2626
<pf-alert state="warning" variant="inline">
27-
<h3 slot="header">Warning</h3>
28-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
29-
egestas, a sollicitudin mauris tincidunt.</p>
30-
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
31-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
27+
<h3 slot="header">Warning inline alert title</h3>
28+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
29+
egestas, a sollicitudin mauris tincidunt.</p> -->
30+
<!-- <pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
31+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
3232
</pf-alert>
33-
3433
<pf-alert state="danger" variant="inline">
35-
<h3 slot="header">Danger</h3>
36-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
37-
egestas, a sollicitudin mauris tincidunt.</p>
38-
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
39-
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
34+
<h3 slot="header">Danger inline alert title</h3>
35+
36+
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
37+
egestas, a sollicitudin mauris tincidunt.</p> -->
38+
<!-- <pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
39+
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button> -->
4040
</pf-alert>
4141
</section>
4242

43+
4344
<style>
44-
#alert-variant-inline {
45+
/* #alert-variant-inline {
4546
display: grid;
4647
grid-template-columns: repeat(auto-fit, minmax(300px, max(40vh, 40%)));
4748
grid-auto-rows: min-content;
4849
gap: var(--pf-space-lg, 16px);
49-
}
50+
} */
5051
</style>
5152

5253
<script type="module">

‎elements/pf-alert/pf-alert.css‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -93,29 +93,35 @@ footer ::slotted(pf-button[variant='link' i]) {
9393
}
9494
}
9595

96-
#container.neutral {
96+
#custom.neutral {
9797
--_border-color: var(--pf-global--palette--black-800,
98-
#3c3f42);
98+
#009596);
9999
--_icon-color: var(--pf-global--palette--black-800,
100-
#3c3f42);
100+
#009596);
101+
--_title-color: var(--pf-global--palette--black-800,
102+
#003737);
101103
--_background-color: var(--pf-global--palette--black-200,
102-
#f0f0f0);
104+
#f2f9f9);
103105
}
104106

105107
#container.info {
106108
--_border-color: var(--pf-global--palette--purple-500,
107-
#6753ac);
109+
#2b9af3);
108110
--_icon-color: var(--pf-global--palette--purple-500,
109-
#6753ac);
111+
#2b9af3);
112+
--title--Color: var(--pf-global--palette--purple-500,
113+
#002952);
110114
--_background-color: var(--pf-global--palette--purple-50,
111-
#f2f0fc);
115+
#def3ff);
112116
}
113117

114118
#container.success {
115119
--_border-color: var(--pf-global--success-color--100,
116120
#3e8635);
117121
--_icon-color: var(--pf-global--success-color--100,
118122
#3e8635);
123+
--title--Color: var(--pf-global--palette--purple-500,
124+
#1e4f18);
119125
--_background-color: var(--pf-global--palette--green-50,
120126
#f3faf2);
121127
}
@@ -125,6 +131,8 @@ footer ::slotted(pf-button[variant='link' i]) {
125131
#f0ab00);
126132
--_icon-color: var(--pf-global--warning-color--100,
127133
#f0ab00);
134+
--title--Color: var(--pf-global--palette--purple-500,
135+
#795600);
128136
--_background-color: var(--pf-global--palette--gold-50,
129137
#fdf7e7);
130138
}
@@ -139,9 +147,11 @@ footer ::slotted(pf-button[variant='link' i]) {
139147

140148
#container.danger {
141149
--_border-color: var(--pf-global--danger-color--200,
142-
#a30000);
150+
#c9190b);
143151
--_icon-color: var(--pf-global--danger-color--200,
144-
#a30000);
152+
#c9190b);
153+
--title--Color: var(--pf-global--palette--purple-500,
154+
#a30000);
145155
--_background-color: var(--pf-global--palette--red-50,
146156
#faeae8);
147157
}

‎elements/pf-alert/pf-alert.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const ICONS = new Map(Object.entries({
2828
neutral: 'minus-circle',
2929
info: 'info-circle',
3030
success: 'check-circle',
31-
caution: 'exclamation-circle',
31+
custom: 'bell',
3232
warning: 'exclamation-triangle',
33-
danger: 'ban',
33+
danger: 'exclamation-circle',
3434
close: 'times',
3535
}));
3636

@@ -111,7 +111,7 @@ export class PfAlert extends LitElement {
111111
@property({ reflect: true })
112112
state:
113113
| 'warning'
114-
| 'caution'
114+
| 'custom'
115115
| 'neutral'
116116
| 'info'
117117
| 'success' =
@@ -139,7 +139,7 @@ export class PfAlert extends LitElement {
139139
// the following are DPO-approved status names
140140
case 'danger':
141141
case 'warning':
142-
case 'caution':
142+
case 'custom':
143143
case 'neutral':
144144
case 'info':
145145
case 'success':
@@ -172,7 +172,8 @@ export class PfAlert extends LitElement {
172172
</footer>`;
173173
return html`
174174
<section id="container"
175-
class=${classMap({
175+
class=
176+
${classMap({
176177
hasBody,
177178
light: true,
178179
[state]: true,

‎elements/pf-description-list/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Description List
2+
Add a description of the component here.
3+
4+
## Usage
5+
Describe how best to use this web component along with best practices.
6+
7+
```html
8+
<pf-description-list>
9+
10+
</pf-description-list>
11+
```

‎elements/pf-description-list/demo/pf-description-list.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!-- <pf-description-list>
2+
<pf-description-list-group term="Term">
3+
Description
4+
</pf-description-list-group>
5+
<pf-description-list-group>
6+
<span slot="term">Term 2</span>
7+
Description
8+
</pf-description-list-group>
9+
</pf-description-list> -->
10+
<dl class="pf-c-description-list">
11+
<div class="pf-c-description-list__group">
12+
<dt class="pf-c-description-list__term">
13+
<span class="pf-c-description-list__text">Name</span>
14+
</dt>
15+
<dd class="pf-c-description-list__description">
16+
<div class="pf-c-description-list__text">example</div>
17+
</dd>
18+
</div>
19+
<div class="pf-c-description-list__group">
20+
<dt class="pf-c-description-list__term">
21+
<span class="pf-c-description-list__text">Namespace</span>
22+
</dt>
23+
<dd class="pf-c-description-list__description">
24+
<div class="pf-c-description-list__text">
25+
<a href="#">mary-test</a>
26+
</div>
27+
</dd>
28+
</div>
29+
<div class="pf-c-description-list__group">
30+
<dt class="pf-c-description-list__term">
31+
<span class="pf-c-description-list__text">Labels</span>
32+
</dt>
33+
<dd class="pf-c-description-list__description">
34+
<div class="pf-c-description-list__text">example</div>
35+
</dd>
36+
</div>
37+
<div class="pf-c-description-list__group">
38+
<dt class="pf-c-description-list__term">
39+
<span class="pf-c-description-list__text">Pod selector</span>
40+
</dt>
41+
<dd class="pf-c-description-list__description">
42+
<div class="pf-c-description-list__text">
43+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
44+
<span class="pf-c-button__icon pf-m-start">
45+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
46+
</span>
47+
app=MyApp
48+
</button>
49+
</div>
50+
</dd>
51+
</div>
52+
<div class="pf-c-description-list__group">
53+
<dt class="pf-c-description-list__term">
54+
<span class="pf-c-description-list__text">Annotation</span>
55+
</dt>
56+
<dd class="pf-c-description-list__description">
57+
<div class="pf-c-description-list__text">2 Annotations</div>
58+
</dd>
59+
</div>
60+
</dl>
61+
<script type="module">
62+
import '@patternfly/elements/pf-description-list/pf-description-list.js';
63+
</script>
64+
65+
<style>
66+
pf-description-list {
67+
/* insert demo styles */
68+
}
69+
</style>
70+

‎elements/pf-description-list/docs/pf-description-list.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% renderOverview %}
2+
<pf-description-list></pf-description-list>
3+
{% endrenderOverview %}
4+
5+
{% band header="Usage" %}{% endband %}
6+
7+
{% renderSlots %}{% endrenderSlots %}
8+
9+
{% renderAttributes %}{% endrenderAttributes %}
10+
11+
{% renderMethods %}{% endrenderMethods %}
12+
13+
{% renderEvents %}{% endrenderEvents %}
14+
15+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
16+
17+
{% renderCssParts %}{% endrenderCssParts %}

‎elements/pf-description-list/pf-description-list.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎elements/pf-description-list/pf-description-list.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { LitElement, html, type TemplateResult } from 'lit';
2+
import { customElement } from 'lit/decorators/custom-element.js';
3+
4+
import styles from './pf-description-list.css';
5+
6+
/**
7+
* Description List
8+
* @slot - Place element content here
9+
*/
10+
@customElement('pf-description-list')
11+
export class PfDescriptionList extends LitElement {
12+
static readonly styles: CSSStyleSheet[] = [styles];
13+
14+
render(): TemplateResult<1> {
15+
return html`
16+
<slot></slot>
17+
`;
18+
}
19+
}
20+
21+
declare global {
22+
interface HTMLElementTagNameMap {
23+
'pf-description-list': PfDescriptionList;
24+
}
25+
}

0 commit comments

Comments
 (0)