Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #1463 - Add support for icons in clay cards stickers #1475

Merged
merged 12 commits into from
Jan 24, 2019
Merged

Fixes #1463 - Add support for icons in clay cards stickers #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b05669
Fixes #1463 - Add support for icons in clay cards stickers
Jan 22, 2019
8ad271f
Fixes #1463 - Update tests
Jan 22, 2019
c2620de
Fixes #1463 - Update clay cards demos
Jan 22, 2019
98a83b6
Fixes #1463 - Regen snapshots
Jan 22, 2019
197b165
Fixes #1463 - Add support for user color class in ClayUserCard and re…
Jan 22, 2019
10edccf
Fixes #1463 - Update demos
Jan 22, 2019
97be15d
Fixes #1463 - Update tests
Jan 22, 2019
f47290f
Fixes #1463 - Regen snapshots
Jan 22, 2019
e497eda
Fixes #1463 - Regen isomorphic snapshots
Jan 22, 2019
c5903f4
Fixes #1463 - Regen snapshots
Jan 22, 2019
8a4dbbb
Fixes #1463 - SF
Jan 23, 2019
6c438b1
Fixes #1463 - Fix inline items in cards type icon
marcoscv Jan 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/clay-card-grid/src/ClayCardGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ ClayCardGrid.STATE = {
inputNamesMap: Config.object(),
inputValueField: Config.string(),
labelStylesMap: Config.object(),
stickerClassesMap: Config.object(),
stickerIconsMap: Config.object(),
stickerImageAltsMap: Config.object(),
stickerImageSrcsMap: Config.object(),
stickerShapesMap: Config.object(),
Expand Down
22 changes: 22 additions & 0 deletions packages/clay-card-grid/src/ClayCardGrid.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -70,6 +72,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -124,6 +128,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -175,6 +181,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -202,6 +210,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -248,6 +258,8 @@
{param selectable: $selectable /}
{param selected: $item.selected /}
{param spritemap: $spritemap /}
{param stickerClasses: $schema.stickerClassesMap ? $schema.stickerClassesMap[$item[$schema.fieldsMap.stickerClasses]] ?: $schema.stickerClassesMap['*'] : null /}
{param stickerIcons: $schema.stickerIconsMap ? $schema.stickerIconsMap[$item[$schema.fieldsMap.stickerIcon]] ?: $schema.stickerIconsMap['*'] : null /}
{param stickerImageAlt: $schema.stickerImageAltsMap ? $schema.stickerImageAltsMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerImageAltsMap['*'] : null /}
{param stickerImageSrc: $schema.stickerImageSrcsMap ? $schema.stickerImageSrcsMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerImageSrcsMap['*'] : null /}
{param stickerLabel: $item[$schema.fieldsMap.stickerLabel] /}
Expand All @@ -274,6 +286,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -338,6 +352,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down Expand Up @@ -386,6 +402,10 @@
{param selectable: $selectable /}
{param selected: $item.selected /}
{param spritemap: $spritemap /}
{param stickerClasses: $schema.stickerClassesMap ? $schema.stickerClassesMap[$item[$schema.fieldsMap.stickerClasses]] ?: $schema.stickerClassesMap['*'] : null /}
{param stickerIcons: $schema.stickerIconsMap ? $schema.stickerIconsMap[$item[$schema.fieldsMap.stickerIcon]] ?: $schema.stickerIconsMap['*'] : null /}
{param stickerImageAlt: $schema.stickerImageAltsMap ? $schema.stickerImageAltsMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerImageAltsMap['*'] : null /}
{param stickerImageSrc: $schema.stickerImageSrcsMap ? $schema.stickerImageSrcsMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerImageSrcsMap['*'] : null /}
{param stickerLabel: $item[$schema.fieldsMap.stickerLabel] /}
{param stickerShape: $schema.stickerShapesMap ? $schema.stickerShapesMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerShapesMap['*'] : null /}
{param stickerStyle: $schema.stickerStylesMap ? $schema.stickerStylesMap[$item[$schema.fieldsMap.stickerLabel]] ?: $schema.stickerStylesMap['*'] : null /}
Expand All @@ -410,6 +430,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerClassesMap: ?,
stickerIconsMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-type-asset card">
<div class="aspect-ratio card-item-first">
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-circle sticker-danger sticker-xl">
<span class="sticker sticker-circle sticker-primary sticker-xl">
<span class="sticker-overlay">FA</span>
</span>
</div>
Expand Down
23 changes: 18 additions & 5 deletions packages/clay-card/demos/a11y.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ <h2>User card</h2>
<div class="row">
<div class="col-md-4" id="user-card-block"></div>
<div class="col-md-4" id="user-card-image-block"></div>
<div class="col-md-4" id="user-card-icon-block"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -174,7 +175,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
icon: 'camera',
spritemap: spritemap,
Expand Down Expand Up @@ -212,7 +213,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'TT',
stickerIcon: 'camera',
stickerShape: 'circle',
stickerStyle: 'warning',
icon: 'camera',
Expand Down Expand Up @@ -257,7 +258,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
labels: [
{
Expand Down Expand Up @@ -326,7 +327,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
icon: 'camera',
labels: [
Expand Down Expand Up @@ -394,7 +395,7 @@ <h2>Horizontal card</h2>

new metal.ClayFileCard({
actionItems: items,
stickerLabel: 'TXT',
stickerIcon: 'blogs',
stickerStyle: 'warning',
labels: [
{
Expand Down Expand Up @@ -469,6 +470,18 @@ <h2>Horizontal card</h2>
},
'#user-card-image-block');

new metal.ClayUserCard({
actionItems: items,
disabled: true,
name: 'User name',
selectable: true,
selected: true,
spritemap: spritemap,
subtitle: 'Latest Action',
userColorClass: 'sticker-warning',
},
'#user-card-icon-block');

/*
* Horizontal card
*/
Expand Down
23 changes: 18 additions & 5 deletions packages/clay-card/demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ <h2>User card</h2>
<div class="row">
<div class="col-md-4" id="user-card-block"></div>
<div class="col-md-4" id="user-card-image-block"></div>
<div class="col-md-4" id="user-card-icon-block"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -174,7 +175,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
icon: 'camera',
spritemap: spritemap,
Expand Down Expand Up @@ -212,7 +213,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'TT',
stickerIcon: 'camera',
stickerShape: 'circle',
stickerStyle: 'warning',
icon: 'camera',
Expand Down Expand Up @@ -257,7 +258,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
labels: [
{
Expand Down Expand Up @@ -326,7 +327,7 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'SVG',
stickerIcon: 'camera',
stickerStyle: 'warning',
icon: 'camera',
labels: [
Expand Down Expand Up @@ -394,7 +395,7 @@ <h2>Horizontal card</h2>

new metal.ClayFileCard({
actionItems: items,
stickerLabel: 'TXT',
stickerIcon: 'blogs',
stickerStyle: 'warning',
labels: [
{
Expand Down Expand Up @@ -469,6 +470,18 @@ <h2>Horizontal card</h2>
},
'#user-card-image-block');

new metal.ClayUserCard({
actionItems: items,
disabled: true,
name: 'User name',
selectable: true,
selected: true,
spritemap: spritemap,
subtitle: 'Latest Action',
userColorClass: 'sticker-warning',
},
'#user-card-icon-block');

/*
* Horizontal card
*/
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card/src/ClayCardBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,24 @@ ClayCardBase.STATE = {
*/
spritemap: Config.string(),

/**
* CSS classes for the inside the sticker.
* @default undefined
* @instance
* @memberof ClayCardBase
* @type {?(string|undefined)}
*/
stickerClasses: Config.string(),

/**
* Icon to be renderer inside the sticker.
* @default undefined
* @instance
* @memberof ClayCardBase
* @type {?(string|undefined)}
*/
stickerIcon: Config.string(),

/**
* Alternate text of the image to be renderer inside the sticker.
* @default undefined
Expand Down
6 changes: 6 additions & 0 deletions packages/clay-card/src/ClayCardBase.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
{@param? selectable: bool}
{@param? selected: bool}
{@param? spritemap: string}
{@param? stickerClasses: string}
{@param? stickerIcon: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
Expand Down Expand Up @@ -73,6 +75,8 @@
{param imageAlt: $imageAlt /}
{param imageSrc: $imageSrc /}
{param spritemap: $spritemap /}
{param stickerClasses: $stickerClasses /}
{param stickerIcon: $stickerIcon /}
{param stickerImageAlt: $stickerImageAlt /}
{param stickerImageSrc: $stickerImageSrc /}
{param stickerLabel: $stickerLabel /}
Expand Down Expand Up @@ -191,6 +195,8 @@
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerClasses: string}
{@param? stickerIcon: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card/src/ClayFileCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,24 @@ ClayFileCard.STATE = {
*/
spritemap: Config.string().required(),

/**
* CSS classes for the inside the sticker.
* @default undefined
* @instance
* @memberof ClayFileCard
* @type {?(string|undefined)}
*/
stickerClasses: Config.string(),

/**
* Icon to be renderer inside the sticker.
* @default undefined
* @instance
* @memberof ClayFileCard
* @type {?(string|undefined)}
*/
stickerIcon: Config.string(),

/**
* Alternate text of the image to be renderer inside the sticker.
* @default undefined
Expand Down
29 changes: 19 additions & 10 deletions packages/clay-card/src/ClayFileCard.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
{@param? labelStylesMap: ?}
{@param? selectable: bool}
{@param? selected: bool}
{@param? stickerClasses: string}
{@param? stickerIcon: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
Expand Down Expand Up @@ -58,6 +60,8 @@
{param selectable: $selectable /}
{param selected: $selected /}
{param spritemap: $spritemap /}
{param stickerClasses: $stickerClasses /}
{param stickerIcon: $stickerIcon /}
{param stickerImageAlt: $stickerImageAlt /}
{param stickerImageSrc: $stickerImageSrc /}
{param stickerLabel: $stickerLabel /}
Expand All @@ -72,15 +76,17 @@
* Render the visual area of the card.
*/
{deltemplate ClayCardBase.VisualArea variant="'file'"}
{@param? icon: string}
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
{@param? icon: string}
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerClasses: string}
{@param? stickerIcon: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}

{if $icon and $spritemap}
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
Expand All @@ -91,13 +97,16 @@
</div>
{/if}

{if $stickerLabel or $stickerImageSrc}
{if $stickerLabel or $stickerImageSrc or ($stickerIcon and $spritemap)}
{call ClaySticker.render}
{param elementClasses: $stickerClasses /}
{param icon: $stickerIcon /}
{param imageAlt: $stickerImageAlt /}
{param imageSrc: $stickerImageSrc /}
{param label: $stickerLabel /}
{param position: 'bottom-left' /}
{param shape: $stickerShape ?: 'rounded' /}
{param spritemap: $spritemap /}
{param style: $stickerStyle ?: 'primary' /}
{/call}
{/if}
Expand Down
Loading