From d423e055254699d661548fe7ec481422fea39b78 Mon Sep 17 00:00:00 2001 From: Mikael Arvola Date: Fri, 2 Aug 2024 13:49:28 -0500 Subject: [PATCH] chore: version 1.0.0-alpha for builder --- builder/ilw-card.json | 4 +- builder/versions/ilw-card.1.0.0-alpha.json | 150 ++++++++++++++++++++- package.json | 2 +- samples/index.html | 6 +- src/ilw-card.css | 60 ++++++--- src/ilw-card.js | 5 +- src/ilw-card.styles.js | 10 +- 7 files changed, 204 insertions(+), 33 deletions(-) diff --git a/builder/ilw-card.json b/builder/ilw-card.json index 473a93f..924f70c 100644 --- a/builder/ilw-card.json +++ b/builder/ilw-card.json @@ -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" -} \ No newline at end of file +} diff --git a/builder/versions/ilw-card.1.0.0-alpha.json b/builder/versions/ilw-card.1.0.0-alpha.json index 964a982..2921387 100644 --- a/builder/versions/ilw-card.1.0.0-alpha.json +++ b/builder/versions/ilw-card.1.0.0-alpha.json @@ -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, @@ -15,8 +15,18 @@ "samples": [ { "name": "default", - "description": "Default information", - "text": "

Lorem ipsum

" + "description": "Plain card with text", + "text": "

Plain Card

A card with just a heading and text.

" + }, + { + "name": "image", + "description": "Card with an image and a button", + "text": "\"\"

Image Card

Card with an image and a footer button.

Contact Us
" + }, + { + "name": "clickable", + "description": "Clickable card with an icon", + "text": "

Clickable Icon Card

A card with an icon, and the card is clickable.

" } ], "attributes-fixed": [], @@ -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" + } ] } diff --git a/package.json b/package.json index efd21b8..daf9f7d 100644 --- a/package.json +++ b/package.json @@ -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": { ".": { diff --git a/samples/index.html b/samples/index.html index 30deff4..a607768 100644 --- a/samples/index.html +++ b/samples/index.html @@ -80,6 +80,10 @@

Grid 1

+ +

Plain Card

+

A card with just a heading and text.

+ @@ -118,7 +122,7 @@

A card with an icon, and the card is clickable.

- +

Aspect Ratio Icon

diff --git a/src/ilw-card.css b/src/ilw-card.css index 1b5bd02..cfc59f9 100644 --- a/src/ilw-card.css +++ b/src/ilw-card.css @@ -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); @@ -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); @@ -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); @@ -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; @@ -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); @@ -119,7 +128,7 @@ --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); @@ -127,7 +136,7 @@ } } - 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; @@ -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); } @@ -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 { @@ -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; @@ -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); } @@ -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; -} \ No newline at end of file +} diff --git a/src/ilw-card.js b/src/ilw-card.js index cf2bf1a..3404e2d 100644 --- a/src/ilw-card.js +++ b/src/ilw-card.js @@ -77,7 +77,10 @@ class Card extends LitElement {
- +