Skip to content

Commit

Permalink
chore: version 1.0.0-alpha for builder
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Aug 2, 2024
1 parent 70a2946 commit d423e05
Show file tree
Hide file tree
Showing 7 changed files with 204 additions and 33 deletions.
4 changes: 2 additions & 2 deletions builder/ilw-card.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"github": "https://github.com/web-illinois/ilw-card/",
"type": "web component",
"element-name": "ilw-card",
"description": "Description for builder.",
"description": "A card component that can be used as a container for grouping information.",
"toolkit-version": "",
"production-version": "",
"development-version": "1.0.0-alpha"
}
}
150 changes: 145 additions & 5 deletions builder/versions/ilw-card.1.0.0-alpha.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"github": "https://github.com/web-illinois/ilw-card/",
"type": "web component",
"element-name": "ilw-card",
"description": "Description for builder.",
"description": "A card component that can be used as a container for grouping information.",
"version": "1.0.0-alpha",
"date": "07/16/2024",
"date": "08/02/2024",
"css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.css",
"js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.js",
"production": false,
Expand All @@ -15,8 +15,18 @@
"samples": [
{
"name": "default",
"description": "Default information",
"text": "<p>Lorem ipsum</p>"
"description": "Plain card with text",
"text": "<ilw-card><h3>Plain Card</h3><p>A card with just a heading and text.</p></ilw-card>"
},
{
"name": "image",
"description": "Card with an image and a button",
"text": "<ilw-card align=\"center\"><img src=\"https://fastly.picsum.photos/id/159/320/200.jpg?hmac=5rPdtfpYQaZopnmOHhelxv5a6GuLOqcRsxSbZsZIQZY\" alt=\"\" slot=\"image\"><h3>Image Card</h3><p>Card with an image and a footer button.</p><div slot=\"footer\"><a href=\"#\" class=\"ilw-button\">Contact Us</a></div></ilw-card>"
},
{
"name": "clickable",
"description": "Clickable card with an icon",
"text": "<ilw-card clickable><svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51.26 51.26\"><defs><style>.cls-1{fill:#0c1b55;}</style></defs><g id=\"Layer_2\" data-name=\"Layer 2\"><path class=\"cls-1\" d=\"M36.15,22c-.88-1.63-6.33-2-11-2.05-4.71.09-10.15.42-11,2.05S12.31,28.55,12,30.23a6.5,6.5,0,0,0-.12.87c1.52-1.29,5.28-1.41,6.48-1.41a40.8,40.8,0,0,1,6.49.9,1.52,1.52,0,0,0,.6,0,44.82,44.82,0,0,1,6.48-.9c1.91,0,5,.19,6.44,1.34a7.32,7.32,0,0,0-.11-.8C37.92,28.55,37,23.66,36.15,22Z\"/><path class=\"cls-1\" d=\"M31.92,30.69a44.56,44.56,0,0,0-6.29.88,2.36,2.36,0,0,1-1,0,40.54,40.54,0,0,0-6.29-.88c-2.14,0-6.68.43-6.14,2.08,0,0,.39,3,12.91,2.67s12.94-2.67,12.94-2.67C38.6,31.12,34.43,30.69,31.92,30.69Z\"/><path class=\"cls-1\" d=\"M9,27.69a1.69,1.69,0,0,0-1-1.56c-.06-.79-.33-2.43-.54-3.51A27.54,27.54,0,0,1,7,19.69C7,18.79,8,18.43,8.11,18.4a3.71,3.71,0,0,1,1.62-.25l1.81-.77a4.71,4.71,0,0,0-3.86-.15,2.93,2.93,0,0,0-1.95,2.42,23,23,0,0,0,.49,3.21c.17.88.44,2.52.52,3.26a1.68,1.68,0,0,0-.15,3.07,18.65,18.65,0,0,1-.32,4.43,17.54,17.54,0,0,1-1.61,4.45A2.14,2.14,0,0,0,7,39.17,3.53,3.53,0,0,0,9.52,38S9.1,31.54,8.3,29.08A1.69,1.69,0,0,0,9,27.69Z\"/><path class=\"cls-1\" d=\"M5.31,20.56l-1.75.74a.32.32,0,0,0,0,.59l2.09.73C5.52,21.86,5.39,21.15,5.31,20.56Z\"/><path class=\"cls-1\" d=\"M47.66,21.25l-21.4-9a1.62,1.62,0,0,0-1.26,0L12.68,17.43h0L9.81,18.66h0l-2.29,1,0,.1c0,.42.26,1.74.47,2.8.07.33.13.65.19.95l4,1.4a15.46,15.46,0,0,1,1.11-3.32c.93-1.7,4.26-2.42,11.9-2.57,7.67.15,11,.87,11.93,2.57a16.74,16.74,0,0,1,1.19,3.67l9.42-3.3A.36.36,0,0,0,47.66,21.25Z\"/></g></svg><h3><a href=\"#\">Clickable Icon Card</a></h3><p>A card with an icon, and the card is clickable.</p></ilw-card>"
}
],
"attributes-fixed": [],
Expand All @@ -28,14 +38,144 @@
"depreciated": false,
"values": [
"",
"gray",
"blue",
"orange",
"white"
"blue-gradient",
"orange-gradient"
]
},
{
"name": "align",
"description": "Align text inside the card",
"depreciated": false,
"values": ["", "center"]
},
{
"name": "clickable",
"description": "Make the entire card clickable",
"depreciated": false,
"values": ["", "true"]
},
{
"name": "aspectRatio",
"description": "Force image aspect ratio",
"depreciated": false,
"values": ["", "1/1", "2/1", "3/1", "16/10", "1/2", "1/3", "10/16"]
}
],
"classes-fixed": [],
"classes": [],
"css-variables": [
{
"name": "--ilw-card--margin-top",
"depreciated": false,
"description": "Margin above cards"
},
{
"name": "--ilw-card--margin-bottom",
"depreciated": false,
"description": "Margin below cards"
},
{
"name": "--ilw-card--content-padding-top",
"depreciated": false,
"description": "Top padding around text content in the card"
},
{
"name": "--ilw-card--content-padding-right",
"depreciated": false,
"description": "Right padding around text content in the card"
},
{
"name": "--ilw-card--content-padding-bottom",
"depreciated": false,
"description": "Bottom padding around text content in the card"
},
{
"name": "--ilw-card--content-padding-left",
"depreciated": false,
"description": "Left padding around text content in the card"
},
{
"name": "--ilw-card--font-size",
"depreciated": false,
"description": "Card text font size"
},
{
"name": "--ilw-card--icon-width",
"depreciated": false,
"description": "Limit for an icon's width"
},
{
"name": "--ilw-card--icon-height",
"depreciated": false,
"description": "Limit for an icon's height"
},
{
"name": "--ilw-card--border-color",
"depreciated": false,
"description": "Color of the border around the card"
},
{
"name": "--ilw-card--background",
"depreciated": false,
"description": "CSS background for the card"
},
{
"name": "--ilw-card--heading-color",
"depreciated": false,
"description": "Color of the heading in the card"
},
{
"name": "--ilw-card--icon-color",
"depreciated": false,
"description": "Color of an icon in the card"
},
{
"name": "--ilw-card--text-color",
"depreciated": false,
"description": "Color of text in the card"
},
{
"name": "--ilw-card--clickable--heading-color",
"depreciated": false,
"description": "Color of a clickable card heading"
},
{
"name": "--ilw-card--clickable--border",
"depreciated": false,
"description": "Color of the bottom wider border in a clickable card"
},
{
"name": "--ilw-card--clickable--link",
"depreciated": false,
"description": "Link color for links inside a clickable card"
},
{
"name": "--ilw-card--hover--background",
"depreciated": false,
"description": "Background for the hover state of a clickable card"
},
{
"name": "--ilw-card--hover--heading-color",
"depreciated": false,
"description": "Color of the heading for the hover state of a clickable card"
},
{
"name": "--ilw-card--hover--text-color",
"depreciated": false,
"description": "Color of text for the hover state of a clickable card"
},
{
"name": "--ilw-card--hover--clickable-border",
"depreciated": false,
"description": "Color of the bottom wider border for the hover state of a clickable card"
},
{
"name": "--ilw-card--hover--link",
"depreciated": false,
"description": "Link color for links inside the hover state of a clickable card"
}
]
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "One paragraph description of the component.",
"repository": "github:web-illinois/ilw-card",
"private": false,
"version": "0.0.1",
"version": "1.0.0-alpha.0",
"type": "module",
"exports": {
".": {
Expand Down
6 changes: 5 additions & 1 deletion samples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
<h2>Grid 1</h2>

<ilw-grid innerwidth="350px">
<ilw-card>
<h3>Plain Card</h3>
<p>A card with just a heading and text.</p>
</ilw-card>
<ilw-card align="center">
<img src="https://fastly.picsum.photos/id/159/320/200.jpg?hmac=5rPdtfpYQaZopnmOHhelxv5a6GuLOqcRsxSbZsZIQZY"
alt="" slot="image">
Expand Down Expand Up @@ -118,7 +122,7 @@ <h3>
<p>A card with an icon, and the card is clickable.</p>
</ilw-card>
<ilw-card aspectRatio="3/1">
<img src="https://cdn.brand.illinois.edu/icons/solid/blue/alumni.svg" alt="" slot="icon">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.26 51.26"><defs><style>.cls-1{fill:#0c1b55;}</style></defs><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M36.15,22c-.88-1.63-6.33-2-11-2.05-4.71.09-10.15.42-11,2.05S12.31,28.55,12,30.23a6.5,6.5,0,0,0-.12.87c1.52-1.29,5.28-1.41,6.48-1.41a40.8,40.8,0,0,1,6.49.9,1.52,1.52,0,0,0,.6,0,44.82,44.82,0,0,1,6.48-.9c1.91,0,5,.19,6.44,1.34a7.32,7.32,0,0,0-.11-.8C37.92,28.55,37,23.66,36.15,22Z"/><path class="cls-1" d="M31.92,30.69a44.56,44.56,0,0,0-6.29.88,2.36,2.36,0,0,1-1,0,40.54,40.54,0,0,0-6.29-.88c-2.14,0-6.68.43-6.14,2.08,0,0,.39,3,12.91,2.67s12.94-2.67,12.94-2.67C38.6,31.12,34.43,30.69,31.92,30.69Z"/><path class="cls-1" d="M9,27.69a1.69,1.69,0,0,0-1-1.56c-.06-.79-.33-2.43-.54-3.51A27.54,27.54,0,0,1,7,19.69C7,18.79,8,18.43,8.11,18.4a3.71,3.71,0,0,1,1.62-.25l1.81-.77a4.71,4.71,0,0,0-3.86-.15,2.93,2.93,0,0,0-1.95,2.42,23,23,0,0,0,.49,3.21c.17.88.44,2.52.52,3.26a1.68,1.68,0,0,0-.15,3.07,18.65,18.65,0,0,1-.32,4.43,17.54,17.54,0,0,1-1.61,4.45A2.14,2.14,0,0,0,7,39.17,3.53,3.53,0,0,0,9.52,38S9.1,31.54,8.3,29.08A1.69,1.69,0,0,0,9,27.69Z"/><path class="cls-1" d="M5.31,20.56l-1.75.74a.32.32,0,0,0,0,.59l2.09.73C5.52,21.86,5.39,21.15,5.31,20.56Z"/><path class="cls-1" d="M47.66,21.25l-21.4-9a1.62,1.62,0,0,0-1.26,0L12.68,17.43h0L9.81,18.66h0l-2.29,1,0,.1c0,.42.26,1.74.47,2.8.07.33.13.65.19.95l4,1.4a15.46,15.46,0,0,1,1.11-3.32c.93-1.7,4.26-2.42,11.9-2.57,7.67.15,11,.87,11.93,2.57a16.74,16.74,0,0,1,1.19,3.67l9.42-3.3A.36.36,0,0,0,47.66,21.25Z"/></g></svg>
<h3>
Aspect Ratio Icon
</h3>
Expand Down
60 changes: 41 additions & 19 deletions src/ilw-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,18 @@
--ilw-card--font-size: 1.2em;
--ilw-card--icon-width: 120px;
--ilw-card--icon-height: 80px;
--ilw-card--orange-1: #FD890E;
--ilw-card--orange-gradient: linear-gradient(135.14deg, var(--il-harvest) 0%, var(--ilw-card--orange-1) 30.44%, var(--il-orange) 100.75%);
--ilw-card--blue-gradient: linear-gradient(160deg, var(--il-industrial) 20%, var(--il-blue) 100%);
--ilw-card--orange-1: #fd890e;
--ilw-card--orange-gradient: linear-gradient(
135.14deg,
var(--il-harvest) 0%,
var(--ilw-card--orange-1) 30.44%,
var(--il-orange) 100.75%
);
--ilw-card--blue-gradient: linear-gradient(
160deg,
var(--il-industrial) 20%,
var(--il-blue) 100%
);

--ilw-card--border-color: var(--il-blue);
--ilw-card--background: var(--ilw-background--color);
Expand All @@ -35,7 +44,7 @@
--ilw-button--border-color: #fff;
}

ilw-card[theme=gray] {
ilw-card[theme="gray"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--il-storm-lighter-4);
--ilw-card--heading-color: var(--il-altgeld);
Expand All @@ -47,7 +56,7 @@
--ilw-card--clickable--link: var(--ilw-link--color);
}

ilw-card[theme=blue] {
ilw-card[theme="blue"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--il-blue);
--ilw-card--heading-color: var(--il-orange);
Expand All @@ -71,7 +80,7 @@
}
}

ilw-card[theme=orange] {
ilw-card[theme="orange"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--il-orange);
--ilw-card--heading-color: #fff;
Expand Down Expand Up @@ -100,7 +109,7 @@
}
}

ilw-card[theme=blue-gradient] {
ilw-card[theme="blue-gradient"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--ilw-card--blue-gradient);

Expand All @@ -119,15 +128,15 @@
--ilw-card--hover--link: var(--ilw-card--hover--text-color);

--ilw-button--background-color: transparent;
--ilw-button--border-color: #fff;
--ilw-button--border-color: #fff;

&[clickable]:hover {
--ilw-button--background-color: var(--il-blue);
--ilw-button--border-color: var(--il-blue);
}
}

ilw-card[theme=orange-gradient] {
ilw-card[theme="orange-gradient"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--ilw-card--orange-gradient);
--ilw-card--heading-color: #fff;
Expand All @@ -151,7 +160,6 @@
--ilw-button--focused-foreground-color: var(--il-orange);
--ilw-button--focused-border-color: var(--il-orange);


&[clickable]:hover {
--ilw-button--background-color: var(--il-orange);
}
Expand All @@ -164,11 +172,15 @@
margin-bottom: var(--ilw-card--margin-bottom);
color: var(--ilw-card--text-color);

&[align=center] {
&[align="center"] {
text-align: center;
}

& > h2, & > h3, & > h4, & > h5, & > h6 {
& > h2,
& > h3,
& > h4,
& > h5,
& > h6 {
color: var(--ilw-card--heading-color);

&:first-of-type {
Expand All @@ -184,7 +196,11 @@
color: var(--ilw-card--clickable--link);
}

& > h2, & > h3, & > h4, & > h5, & > h6 {
& > h2,
& > h3,
& > h4,
& > h5,
& > h6 {
a {
color: var(--ilw-card--clickable--heading-color);
text-decoration: none;
Expand Down Expand Up @@ -217,7 +233,11 @@
color: var(--ilw-card--hover--link);
}

& > h2, & > h3, & > h4, & > h5, & > h6 {
& > h2,
& > h3,
& > h4,
& > h5,
& > h6 {
a {
color: var(--ilw-card--hover--heading-color);
}
Expand All @@ -227,14 +247,16 @@
}
}


ilw-card[clickable] {
a.ilw-button, button.ilw-button, ul.ilw-buttons a, ul.ilw-buttons button {
a.ilw-button,
button.ilw-button,
ul.ilw-buttons a,
ul.ilw-buttons button {
transition-duration: 0s;
}
}

/* Make il icons color currentColor in clickable cards */
ilw-card[clickable] path.cls-1 {
/* Make il icons color currentColor in cards */
ilw-card path.cls-1 {
fill: currentColor;
}
}
5 changes: 4 additions & 1 deletion src/ilw-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ class Card extends LitElement {
<article class=${classMap(classes)} style=${styleMap(styles)}>
<div class="card-graphic">
<div class="card-image">
<slot name="image" @slotchange=${this._slotsChanged}></slot>
<slot
name="image"
@slotchange=${this._slotsChanged}
></slot>
</div>
<div class="card-icon">
<slot
Expand Down
Loading

0 comments on commit d423e05

Please sign in to comment.