@illinois-toolkit/ilw-quote 1.0.0 → 1.2.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/README.md +12 -5
- package/builder/ilw-quote.json +2 -2
- package/builder/versions/ilw-quote.1.1.json +80 -0
- package/builder/versions/ilw-quote.1.2.json +74 -0
- package/dist/cdn/ilw-quote.css +1 -0
- package/dist/cdn/ilw-quote.js +565 -0
- package/dist/ilw-quote.css +1 -1
- package/dist/ilw-quote.d.ts +16 -0
- package/dist/ilw-quote.d.ts.map +1 -0
- package/dist/ilw-quote.js +30 -596
- package/package.json +26 -7
- package/src/ilw-quote.css +72 -47
- package/src/ilw-quote.styles.css +26 -0
- package/src/ilw-quote.ts +43 -0
- package/dist/ilw-quote.cjs +0 -62
- package/dist/ilw-quote.umd.cjs +0 -62
- package/src/ilw-quote.js +0 -32
- package/src/ilw-quote.styles.js +0 -41
package/README.md
CHANGED
|
@@ -8,12 +8,18 @@ Links: **[ilw-quote in Builder](https://builder3.toolkit.illinois.edu/component/
|
|
|
8
8
|
|
|
9
9
|
This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
An open quotation mark is added automatically before the quote.
|
|
12
12
|
|
|
13
13
|
This component should not contain a heading element.
|
|
14
14
|
|
|
15
15
|
The quote should be contained within a paragraph element with the slot attribute set to "content". The author should be contained within a paragraph element with the slot attribute set to "author". The source should be contained within a cite element with the slot attribute set to "source".
|
|
16
16
|
|
|
17
|
+
The following attributes can be used to control the display of the quote:
|
|
18
|
+
|
|
19
|
+
- `font="sans"` will display the quote text with a sans-serif font.
|
|
20
|
+
- `size="medium"` and `size="large"` will increase the font sizes and spacing.
|
|
21
|
+
- `align="left"` and `align="right"` will align the text left or right, respectively. The default alignment is `center`. Note that right-aligned text should be used sparingly for better accessibility.
|
|
22
|
+
|
|
17
23
|
## Code Examples
|
|
18
24
|
|
|
19
25
|
```html
|
|
@@ -25,11 +31,12 @@ The quote should be contained within a paragraph element with the slot attribute
|
|
|
25
31
|
<cite slot="source">Director of Digital Content Development, University of California Press, profiled in Against the Grain</cite>
|
|
26
32
|
</ilw-quote>
|
|
27
33
|
```
|
|
34
|
+
|
|
28
35
|
## Upgrade Process
|
|
29
|
-
* Rename
|
|
30
|
-
* For the content, place it inside a
|
|
31
|
-
* for the author, change
|
|
32
|
-
* for the source, change
|
|
36
|
+
* Rename `il-quote` to `ilw-quote`
|
|
37
|
+
* For the content, place it inside a `p` tag with a slot attribute `slot="content"`
|
|
38
|
+
* for the author, change `slot="attributed"` to `slot="author"`
|
|
39
|
+
* for the source, change `p` tag to `cite` tag and change `slot="secondary"` to `slot="source"`
|
|
33
40
|
|
|
34
41
|
## External References
|
|
35
42
|
|
package/builder/ilw-quote.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"element-name": "ilw-quote",
|
|
7
7
|
"description": "Displays a quote or testimonial, with optional attribution of author and source.",
|
|
8
8
|
"purpose": "Highlight a quote or testimonial.",
|
|
9
|
-
"toolkit-version": "1.
|
|
10
|
-
"production-version": "1.
|
|
9
|
+
"toolkit-version": "1.1",
|
|
10
|
+
"production-version": "1.2",
|
|
11
11
|
"development-version": "1.0-beta"
|
|
12
12
|
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Quote",
|
|
3
|
+
"tag": "ilw-quote",
|
|
4
|
+
"github": "https://github.com/web-illinois/ilw-quote/",
|
|
5
|
+
"type": "web component",
|
|
6
|
+
"element-name": "ilw-quote",
|
|
7
|
+
"description": "This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.",
|
|
8
|
+
"builder-version": "1.1",
|
|
9
|
+
"version": "1.1.0",
|
|
10
|
+
"date": "2/18/2025",
|
|
11
|
+
"css": "https://cdn.toolkit.illinois.edu/ilw-quote/1.1.0/ilw-quote.css",
|
|
12
|
+
"js": "https://cdn.toolkit.illinois.edu/ilw-quote/1.1.0/ilw-quote.js",
|
|
13
|
+
"production": true,
|
|
14
|
+
"notes": "",
|
|
15
|
+
"parent-style": "",
|
|
16
|
+
"samples": [
|
|
17
|
+
{
|
|
18
|
+
"name": "default",
|
|
19
|
+
"description": "Default information",
|
|
20
|
+
"text": "<p slot=\"content\">Either university presses will embrace new technology and offer scholarly content in new forms\n to researchers and under new business models, or they will follow the music industry and spend\n all of their resources on trying to protect their territory — unsuccessfully.</p>\n <p slot=\"author\">Laura Cerruti</p>\n <cite slot=\"source\">Director of Digital Content Development, University of California Press, profiled in Against the Grain</cite>"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "no author or source",
|
|
24
|
+
"description": "No author or source",
|
|
25
|
+
"text": "<p slot=\"content\">Lastly, she pictured to herself how this same little sister of hers would, in the after-time, be herself a grown woman; and how she would keep, through all her riper years, the simple and loving heart of her childhood: and how she would gather about her other little children, and make their eyes bright and eager with many a strange tale, perhaps even with the dream of Wonderland of long ago: and how she would feel with all their simple sorrows, and find a pleasure in all their simple joys, remembering her own child-life, and the happy summer days.</p>"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "no source",
|
|
29
|
+
"description": "No source",
|
|
30
|
+
"text": "<p slot=\"content\">There never is a happy ending because nothing ever ends.</p>\n <p slot=\"author\">Peter S. Beagle, The Last Unicorn</p>"
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"attributes-fixed": [],
|
|
34
|
+
"attributes-text": [],
|
|
35
|
+
"attributes": [
|
|
36
|
+
{
|
|
37
|
+
"name": "theme",
|
|
38
|
+
"description": "Color theme used",
|
|
39
|
+
"depreciated": false,
|
|
40
|
+
"values": [
|
|
41
|
+
"",
|
|
42
|
+
"blue",
|
|
43
|
+
"gray"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "align",
|
|
48
|
+
"description": "Alignment of the quote",
|
|
49
|
+
"depreciated": false,
|
|
50
|
+
"values": [
|
|
51
|
+
"",
|
|
52
|
+
"left",
|
|
53
|
+
"right"
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "size",
|
|
58
|
+
"description": "Font size used",
|
|
59
|
+
"depreciated": false,
|
|
60
|
+
"values": [
|
|
61
|
+
"",
|
|
62
|
+
"medium",
|
|
63
|
+
"large"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "font",
|
|
68
|
+
"description": "Style of font used",
|
|
69
|
+
"depreciated": false,
|
|
70
|
+
"values": [
|
|
71
|
+
"",
|
|
72
|
+
"sans"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"classes-fixed": [],
|
|
77
|
+
"classes": [],
|
|
78
|
+
"css-variables": [
|
|
79
|
+
]
|
|
80
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Quote",
|
|
3
|
+
"tag": "ilw-quote",
|
|
4
|
+
"github": "https://github.com/web-illinois/ilw-quote/",
|
|
5
|
+
"type": "web component",
|
|
6
|
+
"element-name": "ilw-quote",
|
|
7
|
+
"description": "This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.",
|
|
8
|
+
"builder-version": "1.2",
|
|
9
|
+
"version": "1.2.0",
|
|
10
|
+
"date": "11/17/2025",
|
|
11
|
+
"css": "https://cdn.toolkit.illinois.edu/ilw-quote/1.2/ilw-quote.css",
|
|
12
|
+
"js": "https://cdn.toolkit.illinois.edu/ilw-quote/1.2/ilw-quote.js",
|
|
13
|
+
"production": false,
|
|
14
|
+
"notes": "",
|
|
15
|
+
"parent-style": "",
|
|
16
|
+
"samples": [
|
|
17
|
+
{
|
|
18
|
+
"name": "default",
|
|
19
|
+
"description": "Default information",
|
|
20
|
+
"text": "<p slot=\"content\">Either university presses will embrace new technology and offer scholarly content in new forms\n to researchers and under new business models, or they will follow the music industry and spend\n all of their resources on trying to protect their territory — unsuccessfully.</p>\n <p slot=\"author\">Laura Cerruti</p>\n <cite slot=\"source\">Director of Digital Content Development, University of California Press, profiled in Against the Grain</cite>"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "no author or source",
|
|
24
|
+
"description": "No author or source",
|
|
25
|
+
"text": "<p slot=\"content\">Lastly, she pictured to herself how this same little sister of hers would, in the after-time, be herself a grown woman; and how she would keep, through all her riper years, the simple and loving heart of her childhood: and how she would gather about her other little children, and make their eyes bright and eager with many a strange tale, perhaps even with the dream of Wonderland of long ago: and how she would feel with all their simple sorrows, and find a pleasure in all their simple joys, remembering her own child-life, and the happy summer days.</p>"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "no source",
|
|
29
|
+
"description": "No source",
|
|
30
|
+
"text": "<p slot=\"content\">There never is a happy ending because nothing ever ends.</p>\n <p slot=\"author\">Peter S. Beagle, The Last Unicorn</p>"
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"attributes-fixed": [],
|
|
34
|
+
"attributes-text": [],
|
|
35
|
+
"attributes": [
|
|
36
|
+
{
|
|
37
|
+
"name": "theme",
|
|
38
|
+
"description": "Color theme used",
|
|
39
|
+
"depreciated": false,
|
|
40
|
+
"values": [
|
|
41
|
+
"",
|
|
42
|
+
"blue",
|
|
43
|
+
"orange",
|
|
44
|
+
"blue-gradient",
|
|
45
|
+
"orange-gradient",
|
|
46
|
+
"gray"
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "size",
|
|
51
|
+
"description": "Size of quote",
|
|
52
|
+
"depreciated": false,
|
|
53
|
+
"values": [
|
|
54
|
+
"",
|
|
55
|
+
"small",
|
|
56
|
+
"medium",
|
|
57
|
+
"large"
|
|
58
|
+
]
|
|
59
|
+
}, {
|
|
60
|
+
"name": "font",
|
|
61
|
+
"description": "Font used",
|
|
62
|
+
"depreciated": false,
|
|
63
|
+
"values": [
|
|
64
|
+
"",
|
|
65
|
+
"sans",
|
|
66
|
+
"serif"
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"classes-fixed": [],
|
|
71
|
+
"classes": [],
|
|
72
|
+
"css-variables": [
|
|
73
|
+
]
|
|
74
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer base{:root{--ilw-quote--margin: 1rem 0;--ilw-quote--padding: 0 0 1em 0;--ilw-quote--base-font-size: .875rem;--ilw-quote--font: var(--il-font-sans);--ilw-quote--font-serif: var(--il-font-serif);--ilw-quote--font-weight: 600;--ilw-quote--font-size: 1.625em;--ilw-quote--line-height: 1.35;--ilw-quote--author-font-weight: 700;--ilw-quote--author-font-size: 1.625em;--ilw-quote--author-line-height: 1.1;--ilw-quote--source-font-weight: 400;--ilw-quote--source-font-size: 1.428em;--ilw-quote--source-line-height: 1.35;--ilw-quote--mark-font: 9.5em/0 var(--il-font-serif);--ilw-quote--mark-height: .4em;--ilw-quote--mark-top: -10px;--ilw-quote--mark-content-before: "“";--ilw-quote--mark-content-after: "”";--ilw-quote--max-width: 620px;--ilw-quote--border: 6px solid var(--ilw-color--control-accent)}ilw-quote{font-family:var(--ilw-quote--font);font-size:var(--ilw-quote--base-font-size);text-align:center;margin:var(--ilw-quote--margin);padding:var(--ilw-quote--padding)}ilw-quote[align=left]{text-align:left;border-left:var(--ilw-quote--border);--ilw-quote--max-width: none;padding-left:3.125em}ilw-quote[align=right]{text-align:right;border-right:var(--ilw-quote--border);--ilw-quote--max-width: none;padding-right:3.125em}ilw-quote[size=medium]{--ilw-quote--base-font-size: 1rem}ilw-quote[size=large]{--ilw-quote--base-font-size: 1.154rem}}.ilw-quote--exclude-marks{--ilw-quote--mark-content-before: none;--ilw-quote--mark-content-after: none}ilw-quote *[slot=content]{font-weight:var(--ilw-quote--font-weight);font-size:var(--ilw-quote--font-size);line-height:var(--ilw-quote--line-height)}ilw-quote[font=serif] *[slot=content]{font-family:var(--ilw-quote--font-serif);--ilw-quote--font-weight: 400}ilw-quote *[slot=author]{margin-top:1.8em;margin-bottom:.5em;color:var(--ilw-color--control-accent);font-weight:var(--ilw-quote--author-font-weight);font-size:var(--ilw-quote--author-font-size);line-height:var(--ilw-quote--author-line-height)}ilw-quote *[slot=source]{margin:0;color:var(--ilw-color--heading);font-style:inherit;font-weight:var(--ilw-quote--source-font-weight);font-size:var(--ilw-quote--source-font-size);line-height:var(--ilw-quote--source-line-height);display:block}
|