Skip to content

Commit

Permalink
cem-icon src attribute replaced by image, EPA-WG/custom-element#79
Browse files Browse the repository at this point in the history
  • Loading branch information
@sashafirsov
sashafirsov committed Dec 26, 2024
1 parent bfb7d27 commit 2c4fce0
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 81 deletions.
4 changes: 2 additions & 2 deletions src/material/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@ <h3>{$head}</h3>
</custom-element>

<demo-list-card head="icon" description="Icons from popular collections">
<cem-icon src="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
<cem-icon image="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
>Material Icon </cem-icon>
<cem-icon src="recycling"
<cem-icon image="recycling"
> Recycling </cem-icon>

</demo-list-card>
Expand Down
64 changes: 53 additions & 11 deletions src/material/components/badge.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,15 @@
line-height: 1;
height: 20px;
z-index: 1;
background-color: var(--cem-badge-color-primary);
color: rgb(255, 255, 255);
background-color: var(--cem-badge-color, --cem-badge-color-primary);
color: var(--cem-badge-text-color,rgb(255, 255, 255));
top: 0;
right: 0;
transform: scale(1) translate(50%, -50%);
transform-origin: 100% 0%;
padding: 0 6px;
border-radius: 10px;
border: var(--cem-badge-border, none);
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
}
&[color="secondary"]>*>dd{ background-color: var(--cem-badge-color-secondary); }
Expand Down Expand Up @@ -127,26 +128,67 @@ <h1>Attributes</h1>

</p>
<template>
<cem-badge text="0" color="secondary"> <cem-icon src="far fa-envelope"></cem-icon> </cem-badge>
<cem-badge text="999+" > <cem-icon src="🛒" vertical="middle"></cem-icon> </cem-badge>
<cem-badge text="999+" dot > <cem-icon src="notifications" vertical="middle"></cem-icon> </cem-badge>
<cem-badge text="0" color="secondary"> <cem-icon image="far fa-envelope"></cem-icon> </cem-badge>
<cem-badge text="999+" > <cem-icon image="🛒" vertical="middle"></cem-icon> </cem-badge>
<cem-badge text="999+" dot > <cem-icon image="notifications" vertical="middle"></cem-icon> </cem-badge>
</template>
</html-demo-element>

<html-demo-element legend="color attribute">
<p slot="description">
<a href="#">Semantic colors</a>
Semantic colors
</p>
<template>
<cem-badge text="0" > <cem-icon src="✉"></cem-icon> </cem-badge>
<cem-badge text="1" color="primary" > <cem-icon src="✉"></cem-icon> </cem-badge>
<cem-badge text="2" color="secondary"> <cem-icon src="✉"></cem-icon> </cem-badge>
<cem-badge text="3" color="success" > <cem-icon src="✉"></cem-icon> </cem-badge>
<cem-badge text="4" color="alert" > <cem-icon src="✉"></cem-icon> </cem-badge>
<cem-badge text="0" > <cem-icon image="✉"></cem-icon> </cem-badge>
<cem-badge text="1" color="primary" > <cem-icon image="✉"></cem-icon> </cem-badge>
<cem-badge text="2" color="secondary"> <cem-icon image="✉"></cem-icon> </cem-badge>
<cem-badge text="3" color="success" > <cem-icon image="✉"></cem-icon> </cem-badge>
<cem-badge text="4" color="alert" > <cem-icon image="✉"></cem-icon> </cem-badge>
</template>
</html-demo-element>

<html-demo-element legend="custom color">
<p slot="description">
Override by CE
</p>
<template>
<custom-element>
<template>
<style>
&
{ --cem-badge-text-color:red;
--cem-badge-color:#FF08;
--cem-badge-border: 1px blue solid;
cem-badge dd{box-shadow: -2px 3px 8px blue;}
}
</style>
<cem-badge text="123"> CUSTOM COLOR </cem-badge>
</template>
</custom-element>
</template>
</html-demo-element>


<html-demo-element legend="invisible attribute">
<p slot="description">
hides badge, animated
</p>
<template>
<custom-element>
<template>
<label><input type="checkbox" slice="invisible"/>
invisible
<cem-badge text="1" color="primary" >
<attribute name="invisible"></attribute>
<div src="🛒" title="🛒" >🛒</div>
<cem-icon image="🛒" title="🛒" >🛒</cem-icon>
</cem-badge>

</label>
</template>
</custom-element>
</template>
</html-demo-element>
</main>
<footer>
<hr/>
Expand Down
128 changes: 64 additions & 64 deletions src/material/components/icon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<body>
<template id="cem-icon">
<attribute name="src"
<attribute name="image"
aria-description="defines the icon in one of the libraries or URL. The selection algorithm
if value is single symbol, it is treated as unicode or emoji image
if value has a slash symbol (/), it is treated as URL for img< element
Expand Down Expand Up @@ -74,10 +74,10 @@
</style>

<choose>
<when test="string-length($src) &lt; 3"><b class="icon unicode">{$src}</b></when>
<when test="contains($src,'/')"><img alt="icon" class="icon" src="{$src}"/></when>
<when test="contains($src,'fa-')"><i class="icon {$src}"></i></when>
<when test="$src"><span class="icon material-icons">{$src}</span></when>
<when test="string-length($image) &lt; 3"><b class="icon unicode">{$image}</b></when>
<when test="contains($image,'/')"><img alt="icon" class="icon" src="{$image}"/></when>
<when test="contains($image,'fa-')"><i class="icon {$image}"></i></when>
<when test="$image"><span class="icon material-icons">{$image}</span></when>
</choose>
<slot></slot>

Expand All @@ -96,7 +96,7 @@
Icons are small symbols to easily identify actions and categories
</p>
<h1>Attributes</h1>
<div> <code>src</code> attribute defines the icon in one of the libraries or URL. The selection algorithm
<div> <code>image</code> attribute defines the icon in one of the libraries or URL. The selection algorithm
<ol>
<li>if value is single symbol, it is treated as <var>unicode</var> or <var>emoji</var> image </li>
<li>if value has a slash symbol (<code>/</code>), it is treated as <var>URL</var> for <code>img</code> element </li>
Expand All @@ -113,9 +113,9 @@ <h1>Attributes</h1>
Defines the text position next to icon. Uses CSS <code>flex-direction</code> values.
</p>
<template>
<cem-icon src="»"> default is row </cem-icon>
<cem-icon src="home" direction="column"> column </cem-icon>
<cem-icon src="fas fa-bone" direction="row"> row </cem-icon>
<cem-icon image="»"> default is row </cem-icon>
<cem-icon image="home" direction="column"> column </cem-icon>
<cem-icon image="fas fa-bone" direction="row"> row </cem-icon>
</template>
</html-demo-element>

Expand All @@ -125,86 +125,86 @@ <h1>Attributes</h1>
Defines the icon size.
</p>
<template>
<cem-icon src="fas fa-heart" size="small"> small </cem-icon>
<cem-icon src="fas fa-heart" size="normal"> normal </cem-icon>
<cem-icon src="fas fa-heart" size="large"> large </cem-icon>
<cem-icon image="fas fa-heart" size="small"> small </cem-icon>
<cem-icon image="fas fa-heart" size="normal"> normal </cem-icon>
<cem-icon image="fas fa-heart" size="large"> large </cem-icon>
</template>
</html-demo-element>

</section>

<html-demo-element legend="Unicode or Emoji">
<p slot="description">
<cem-icon src="https://unicodeplus.com/favicon.ico"
<cem-icon image="https://unicodeplus.com/favicon.ico"
><a href="https://unicodeplus.com/search">Search Unicode</a> </cem-icon>
<cem-icon src="https://emojipedia.org/images/favicon-32x32.png"
<cem-icon image="https://emojipedia.org/images/favicon-32x32.png"
><a href="https://emojipedia.org/search?q=heart">Search Emoji</a></cem-icon>
</p>
<template>
<cem-icon src="🚀" > Rocket emoji </cem-icon>
<cem-icon src="👁" > Eye unicode </cem-icon>
<cem-icon image="🚀" > Rocket emoji </cem-icon>
<cem-icon image="👁" > Eye unicode </cem-icon>
<hr/>
<cem-icon src="🎄" ></cem-icon>
<cem-icon src="😭" ></cem-icon>
<cem-icon src="🔥" ></cem-icon>
<cem-icon src="💀" ></cem-icon><br/>
<cem-icon src="🛒" ></cem-icon>
<cem-icon src="✨" ></cem-icon>
<cem-icon src="😊" ></cem-icon>
<cem-icon src="😂" ></cem-icon><br/>
<cem-icon src="⭐" ></cem-icon>
<cem-icon src="🫶" ></cem-icon>
<cem-icon src="🎁" ></cem-icon>
<cem-icon src="✅" ></cem-icon>
<cem-icon image="🎄" ></cem-icon>
<cem-icon image="😭" ></cem-icon>
<cem-icon image="🔥" ></cem-icon>
<cem-icon image="💀" ></cem-icon><br/>
<cem-icon image="🛒" ></cem-icon>
<cem-icon image="✨" ></cem-icon>
<cem-icon image="😊" ></cem-icon>
<cem-icon image="😂" ></cem-icon><br/>
<cem-icon image="⭐" ></cem-icon>
<cem-icon image="🫶" ></cem-icon>
<cem-icon image="🎁" ></cem-icon>
<cem-icon image="✅" ></cem-icon>
</template>
</html-demo-element>

<html-demo-element legend="Google Material icon font">
<p slot="description">
<cem-icon src="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
<cem-icon image="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/favicon.svg"
>Material Icon &bull; <a href="https://fonts.google.com/icons">Search all</a></cem-icon>
</p>
<template>
<cem-icon src="recycling" > recycling</cem-icon>
<cem-icon src="shopping_cart" > shopping_cart</cem-icon>
<cem-icon image="recycling" > recycling</cem-icon>
<cem-icon image="shopping_cart" > shopping_cart</cem-icon>
<hr/>
<cem-icon src="search" ></cem-icon>
<cem-icon src="home" ></cem-icon>
<cem-icon src="menu" ></cem-icon>
<cem-icon src="close" ></cem-icon><br/>
<cem-icon src="check_circle" ></cem-icon>
<cem-icon src="favorite" ></cem-icon>
<cem-icon src="add" ></cem-icon>
<cem-icon src="star" ></cem-icon><br/>
<cem-icon src="chevron_right" ></cem-icon>
<cem-icon src="logout" ></cem-icon>
<cem-icon src="add_circle" ></cem-icon>
<cem-icon src="cancel" ></cem-icon>
<cem-icon image="search" ></cem-icon>
<cem-icon image="home" ></cem-icon>
<cem-icon image="menu" ></cem-icon>
<cem-icon image="close" ></cem-icon><br/>
<cem-icon image="check_circle" ></cem-icon>
<cem-icon image="favorite" ></cem-icon>
<cem-icon image="add" ></cem-icon>
<cem-icon image="star" ></cem-icon><br/>
<cem-icon image="chevron_right" ></cem-icon>
<cem-icon image="logout" ></cem-icon>
<cem-icon image="add_circle" ></cem-icon>
<cem-icon image="cancel" ></cem-icon>
</template>
</html-demo-element>

<html-demo-element legend="Fontawesome">
<p slot="description">
<cem-icon src="https://fontawesome.com/images/favicon/icon.svg"
<cem-icon image="https://fontawesome.com/images/favicon/icon.svg"
>Fontawesome Icon &bull; <a href="https://fontawesome.com/icons/">Search all</a></cem-icon>
</a>
</p>
<template>
<cem-icon src="fab fa-github"> GitHub</cem-icon>
<cem-icon src="fas fa-bookmark"> Bookmark</cem-icon>
<cem-icon src="fab fa-discord"></cem-icon><hr/>
<cem-icon src="fab fa-android"></cem-icon>
<cem-icon src="fab fa-apple"></cem-icon>
<cem-icon src="far fa-user"></cem-icon>
<cem-icon src="far fa-envelope"></cem-icon><br/>
<cem-icon src="fas fa-thumbs-up"></cem-icon>
<cem-icon src="far fa-thumbs-down"></cem-icon>
<cem-icon src="far fa-star"></cem-icon>
<cem-icon src="fas fa-star"></cem-icon><br/>
<cem-icon src="fas fa-location-arrow"></cem-icon>
<cem-icon src="fas fa-map-marker"></cem-icon>
<cem-icon src="fas fa-map-marked-alt"></cem-icon>
<cem-icon src="fas fa-globe"></cem-icon>
<cem-icon image="fab fa-github"> GitHub</cem-icon>
<cem-icon image="fas fa-bookmark"> Bookmark</cem-icon>
<cem-icon image="fab fa-discord"></cem-icon><hr/>
<cem-icon image="fab fa-android"></cem-icon>
<cem-icon image="fab fa-apple"></cem-icon>
<cem-icon image="far fa-user"></cem-icon>
<cem-icon image="far fa-envelope"></cem-icon><br/>
<cem-icon image="fas fa-thumbs-up"></cem-icon>
<cem-icon image="far fa-thumbs-down"></cem-icon>
<cem-icon image="far fa-star"></cem-icon>
<cem-icon image="fas fa-star"></cem-icon><br/>
<cem-icon image="fas fa-location-arrow"></cem-icon>
<cem-icon image="fas fa-map-marker"></cem-icon>
<cem-icon image="fas fa-map-marked-alt"></cem-icon>
<cem-icon image="fas fa-globe"></cem-icon>

</template>
</html-demo-element>
Expand All @@ -216,8 +216,8 @@ <h1>Attributes</h1>
<custom-element>
<template>
<module-url slice="logo-url" src="@epa-wg/custom-element/demo/wc-square.svg"></module-url>
<cem-icon src="{//logo-url}"> custom-element</cem-icon>
<cem-icon src="https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world/1.svg">
<cem-icon image="{//logo-url}"> custom-element</cem-icon>
<cem-icon image="https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world/1.svg">
bulbasaur
</cem-icon>
</template>
Expand All @@ -231,9 +231,9 @@ <h1>Attributes</h1>
For font based icons the color is inherited from CSS text <code>color</code>.
</p>
<template>
<cem-icon src="fas fa-heart" style="color:red" > red </cem-icon>
<cem-icon src="fas fa-heart" style="color:green" > green </cem-icon>
<cem-icon src="fas fa-heart" style="color:blue" > blue </cem-icon>
<cem-icon image="fas fa-heart" style="color:red" > red </cem-icon>
<cem-icon image="fas fa-heart" style="color:green" > green </cem-icon>
<cem-icon image="fas fa-heart" style="color:blue" > blue </cem-icon>
</template>
</html-demo-element>

Expand Down
8 changes: 4 additions & 4 deletions src/material/components/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h1>Slots</h1>
<label>
<slot name="leading">
<if test="$leading">
<cem-icon src="{$leading}"></cem-icon>
<cem-icon image="{$leading}"></cem-icon>
</if>
</slot>
<div class="entry">
Expand Down Expand Up @@ -228,7 +228,7 @@ <h1>Slots</h1>
</div>
<slot name="trailing">
<if test="$trailing">
<cem-icon src="{$trailing}"></cem-icon>
<cem-icon image="{$trailing}"></cem-icon>
</if>
</slot>
</label>
Expand Down Expand Up @@ -347,8 +347,8 @@ <h1>Slots</h1>
</p>
<template>
<cem-input label="slots sample" type="text" placeholder="Enter the fruit name">
<div slot="leading"><cem-icon src="edit"></cem-icon></div>
<div slot="trailing"><cem-icon src="👁"></cem-icon>️<cem-icon src="close"></cem-icon>️</div>
<div slot="leading"><cem-icon image="edit"></cem-icon></div>
<div slot="trailing"><cem-icon image="👁"></cem-icon>️<cem-icon image="close"></cem-icon>️</div>
</cem-input>
</template>
</html-demo-element>
Expand Down
1 change: 1 addition & 0 deletions src/material/theme/semantic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@
--cem-badge-color-secondary: var(--ng-magenta-50);
--cem-badge-color-success: var(--ng-cyan-60);
--cem-badge-color-alert: var(--ng-error-50);
--cem-badge-color: var(--cem-badge-color-primary);

}

Expand Down

0 comments on commit 2c4fce0

Please sign in to comment.