Skip to content

Commit

Permalink
Merge pull request #463 from carloslancha/pr-454
Browse files Browse the repository at this point in the history 
Fix icon markup on ClayHorizontalCard | Fixes #462
  • Loading branch information
@jbalsas
jbalsas authored Jan 25, 2018
2 parents 0ba86ea + 5a0773f commit b0c188b
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 115 deletions.
32 changes: 18 additions & 14 deletions packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">Photos</div>
</div>
Expand All @@ -31,14 +33,16 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">Videos</div>
</div>
Expand Down
18 changes: 8 additions & 10 deletions packages/clay-card/src/ClayHorizontalCard.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,15 @@

<div class="card-body">
<div class="card-row">
{let $classesDescription kind="text"}
autofit-col autofit-col-expand autofit-col-gutters
{/let}

{call ClaySticker.render}
{param icon: $icon ?: 'folder' /}
{param spritemap: $spritemap /}
{param style: 'unstyled' /}
{/call}
<div class="autofit-col">
{call ClaySticker.render}
{param icon: $icon ?: 'folder' /}
{param spritemap: $spritemap /}
{param style: 'unstyled' /}
{/call}
</div>

<div class="{$classesDescription}">
<div class="autofit-col autofit-col-expand autofit-col-gutters">
{if $href}
{call ClayLink.render}
{param elementClasses: 'card-title text-truncate' /}
Expand Down
176 changes: 99 additions & 77 deletions packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with a different
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<title>list</title>
<use xlink:href="icons.svg#list"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
<title>list</title>
<use xlink:href="icons.svg#list"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -24,14 +26,16 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand Down Expand Up @@ -64,14 +68,16 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with classes 1`]
<div class="card-type-directory card card-horizontal my-custom-class">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -84,14 +90,16 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with href 1`] = `
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<a class=" card-title text-truncate" href="#1">My Title</a>
</div>
Expand All @@ -104,14 +112,16 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with id 1`] = `
<div class="card-type-directory card card-horizontal" id="myId">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -129,14 +139,16 @@ exports[`ClayHorizontalCard should render a disabled ClayHorizontalCard 1`] = `
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -157,14 +169,16 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard 1`] =
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -185,14 +199,16 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -213,14 +229,16 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -241,14 +259,16 @@ exports[`ClayHorizontalCard should render a selected ClayHorizontalCard 1`] = `
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand All @@ -264,14 +284,16 @@ exports[`ClayHorizontalCard should render the default markup 1`] = `
<div class="card-type-directory card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">My Title</div>
</div>
Expand Down
32 changes: 18 additions & 14 deletions packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2813,14 +2813,16 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../../../node_modules/clay/build/images/icons/icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../../../node_modules/clay/build/images/icons/icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">Photos</div>
</div>
Expand Down Expand Up @@ -2850,14 +2852,16 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../../../node_modules/clay/build/images/icons/icons.svg#folder"></use>
</svg>
<div class="autofit-col">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="../../../node_modules/clay/build/images/icons/icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate">Videos</div>
</div>
Expand Down

0 comments on commit b0c188b

Please sign in to comment.