Skip to content

Commit

Permalink
Merge pull request #1430 from carloslancha/issue-1429-sticker-in-clay…
Browse files Browse the repository at this point in the history 
…-card

Fixes #1429 - Add sticker image support in clay cards (API ADDED)
  • Loading branch information
@julien
julien authored Jan 10, 2019
2 parents 6765275 + 83fc51d commit 4ae46cf
Show file tree
Hide file tree
Showing 15 changed files with 173 additions and 6 deletions.
2 changes: 2 additions & 0 deletions packages/clay-card-grid/src/ClayCardGrid.js
View file
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(),
stickerImageAltsMap: Config.object(),
stickerImageSrcsMap: Config.object(),
stickerShapesMap: Config.object(),
stickerStylesMap: Config.object(),
userColorsMap: Config.object(),
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card-grid/src/ClayCardGrid.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -68,6 +70,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -120,6 +124,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -169,6 +175,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand All @@ -194,6 +202,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -238,6 +248,8 @@
{param selectable: $selectable /}
{param selected: $item.selected /}
{param spritemap: $spritemap /}
{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 @@ -262,6 +274,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -324,6 +338,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down Expand Up @@ -394,6 +410,8 @@
inputNamesMap: ?,
inputValueField: string,
labelStylesMap: ?,
stickerImageAltsMap: ?,
stickerImageSrcsMap: ?,
stickerShapesMap: ?,
stickerStylesMap: ?,
userColorsMap: ?
Expand Down
6 changes: 4 additions & 2 deletions packages/clay-card/demos/a11y.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,8 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'PNG',
stickerStyle: 'info',
stickerImageSrc: './image2.jpg',
stickerShape: 'circle',
spritemap: spritemap,
subtitle: 'Author Action',
title: 'lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg',
Expand Down Expand Up @@ -436,6 +436,8 @@ <h2>Horizontal card</h2>
selectable: true,
selected: true,
spritemap: spritemap,
stickerImageSrc: './image2.jpg',
stickerShape: 'circle',
subtitle: 'Stevie Ray Vaughn',
title: 'deliverable.doc',
},
Expand Down
6 changes: 4 additions & 2 deletions packages/clay-card/demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,8 @@ <h2>Horizontal card</h2>

new metal.ClayImageCard({
actionItems: items,
stickerLabel: 'PNG',
stickerStyle: 'info',
stickerImageSrc: './image2.jpg',
stickerShape: 'circle',
spritemap: spritemap,
subtitle: 'Author Action',
title: 'lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg',
Expand Down Expand Up @@ -436,6 +436,8 @@ <h2>Horizontal card</h2>
selectable: true,
selected: true,
spritemap: spritemap,
stickerImageSrc: './image2.jpg',
stickerShape: 'circle',
subtitle: 'Stevie Ray Vaughn',
title: 'deliverable.doc',
},
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card/src/ClayCardBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,24 @@ ClayCardBase.STATE = {
*/
spritemap: Config.string(),

/**
* Alternate text of the image to be renderer inside the sticker.
* @default undefined
* @instance
* @memberof ClayCardBase
* @type {?(string|undefined)}
*/
stickerImageAlt: Config.string(),

/**
* Source of the image to be rendered inside the sticker.
* @default undefined
* @instance
* @memberof ClayCardBase
* @type {?(string|undefined)}
*/
stickerImageSrc: Config.string(),

/**
* Label for the sticker represented in the card.
* @instance
Expand Down
6 changes: 6 additions & 0 deletions packages/clay-card/src/ClayCardBase.soy
View file
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? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down Expand Up @@ -71,6 +73,8 @@
{param imageAlt: $imageAlt /}
{param imageSrc: $imageSrc /}
{param spritemap: $spritemap /}
{param stickerImageAlt: $stickerImageAlt /}
{param stickerImageSrc: $stickerImageSrc /}
{param stickerLabel: $stickerLabel /}
{param stickerShape: $stickerShape /}
{param stickerStyle: $stickerStyle /}
Expand Down Expand Up @@ -187,6 +191,8 @@
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card/src/ClayFileCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,24 @@ ClayFileCard.STATE = {
*/
spritemap: Config.string().required(),

/**
* Alternate text of the image to be renderer inside the sticker.
* @default undefined
* @instance
* @memberof ClayFileCard
* @type {?(string|undefined)}
*/
stickerImageAlt: Config.string(),

/**
* Source of the image to be rendered inside the sticker.
* @default undefined
* @instance
* @memberof ClayFileCard
* @type {?(string|undefined)}
*/
stickerImageSrc: Config.string(),

/**
* Label for the sticker represented in the card.
* @default undefined
Expand Down
10 changes: 9 additions & 1 deletion packages/clay-card/src/ClayFileCard.soy
View file
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? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down Expand Up @@ -56,6 +58,8 @@
{param selectable: $selectable /}
{param selected: $selected /}
{param spritemap: $spritemap /}
{param stickerImageAlt: $stickerImageAlt /}
{param stickerImageSrc: $stickerImageSrc /}
{param stickerLabel: $stickerLabel /}
{param stickerShape: $stickerShape /}
{param stickerStyle: $stickerStyle /}
Expand All @@ -72,6 +76,8 @@
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand All @@ -85,8 +91,10 @@
</div>
{/if}

{if $stickerLabel}
{if $stickerLabel or $stickerImageSrc}
{call ClaySticker.render}
{param imageAlt: $stickerImageAlt /}
{param imageSrc: $stickerImageSrc /}
{param label: $stickerLabel /}
{param position: 'bottom-left' /}
{param shape: $stickerShape ?: 'rounded' /}
Expand Down
18 changes: 18 additions & 0 deletions packages/clay-card/src/ClayImageCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,24 @@ ClayImageCard.STATE = {
*/
spritemap: Config.string(),

/**
* Alternate text of the image to be renderer inside the sticker.
* @default undefined
* @instance
* @memberof ClayImageCard
* @type {?(string|undefined)}
*/
stickerImageAlt: Config.string(),

/**
* Source of the image to be rendered inside the sticker.
* @default undefined
* @instance
* @memberof ClayImageCard
* @type {?(string|undefined)}
*/
stickerImageSrc: Config.string(),

/**
* Label for the sticker represented in the card.
* @default undefined
Expand Down
10 changes: 9 additions & 1 deletion packages/clay-card/src/ClayImageCard.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
{@param? selectable: bool}
{@param? selected: bool}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down Expand Up @@ -60,6 +62,8 @@
{param selectable: $selectable /}
{param selected: $selected /}
{param spritemap: $spritemap /}
{param stickerImageAlt: $stickerImageAlt /}
{param stickerImageSrc: $stickerImageSrc /}
{param stickerLabel: $stickerLabel /}
{param stickerShape: $stickerShape /}
{param stickerStyle: $stickerStyle /}
Expand All @@ -76,6 +80,8 @@
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down Expand Up @@ -109,8 +115,10 @@
</div>
{/if}

{if $stickerLabel}
{if $stickerLabel or $stickerImageSrc}
{call ClaySticker.render}
{param imageAlt: $stickerImageAlt /}
{param imageSrc: $stickerImageSrc /}
{param label: $stickerLabel /}
{param position: 'bottom-left' /}
{param shape: $stickerShape ?: 'rounded' /}
Expand Down
2 changes: 2 additions & 0 deletions packages/clay-card/src/ClayUserCard.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,8 @@
{@param? imageAlt: string}
{@param? imageSrc: string}
{@param? spritemap: string}
{@param? stickerImageAlt: string}
{@param? stickerImageSrc: string}
{@param? stickerLabel: string}
{@param? stickerShape: string}
{@param? stickerStyle: string}
Expand Down
11 changes: 11 additions & 0 deletions packages/clay-card/src/__tests__/ClayFileCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,17 @@ describe('ClayFileCard', function() {
expect(component).toMatchSnapshot();
});

it('should render a ClayFileCard with sticker with image', () => {
component = new ClayFileCard({
spritemap: spritemap,
stickerImageAlt: 'my image',
stickerImageSrc: './image.jpg',
title: 'My Title',
});

expect(component).toMatchSnapshot();
});

it('should render a ClayFileCard with href', () => {
component = new ClayFileCard({
href: '#1',
Expand Down
11 changes: 11 additions & 0 deletions packages/clay-card/src/__tests__/ClayImageCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,17 @@ describe('ClayImageCard', function() {
expect(component).toMatchSnapshot();
});

it('should render a ClayImageCard with sticker with image', () => {
component = new ClayImageCard({
spritemap: spritemap,
stickerImageAlt: 'my image',
stickerImageSrc: './image.jpg',
title: 'My Title',
});

expect(component).toMatchSnapshot();
});

it('should render a ClayImageCard with href', () => {
component = new ClayImageCard({
href: '#1',
Expand Down
24 changes: 24 additions & 0 deletions packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,30 @@ exports[`ClayFileCard should render a ClayFileCard with sticker style \`warning
</div>
`;

exports[`ClayFileCard should render a ClayFileCard with sticker with image 1`] = `
<div class="card-type-asset card file-card">
<div class="aspect-ratio card-item-first">
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg class="lexicon-icon lexicon-icon-documents-and-media" focusable="false" role="presentation">
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="sticker sticker-rounded sticker-primary sticker-bottom-left">
<span class="sticker-overlay">
<img alt="my image" class="sticker-img" src="./image.jpg">
</span>
</span>
</div>
<div class="card-body">
<div class="card-row">
<div class="autofit-col autofit-col-expand">
<div class="card-title text-truncate">My Title</div>
</div>
</div>
</div>
</div>
`;

exports[`ClayFileCard should render a ClayFileCard with subtitle 1`] = `
<div class="card-type-asset card file-card">
<div class="aspect-ratio card-item-first">
Expand Down
Loading

0 comments on commit 4ae46cf

Please sign in to comment.