Skip to content

Commit 287baef

Browse files
author
Carlos Lancha
committed
fix: flush and fluid should not be used together in CardWithInfo
1 parent 4312342 commit 287baef

File tree

3 files changed

+189
-1
lines changed

3 files changed

+189
-1
lines changed

‎packages/clay-card/src/CardWithInfo.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,11 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
155155
{imgProps && (
156156
<img
157157
className={classNames(
158-
'aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid',
158+
'aspect-ratio-item aspect-ratio-item-center-middle',
159159
typeof imgProps !== 'string' && imgProps.className,
160160
{
161+
['aspect-ratio-item-fluid']:
162+
!flushHorizontal && !flushVertical,
161163
['aspect-ratio-item-flush']: flushHorizontal,
162164
['aspect-ratio-item-vertical-flush']: flushVertical,
163165
}

‎packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1955,6 +1955,160 @@ exports[`ClayCardWithInfo renders as image card specifying the displayType and n
19551955
</div>
19561956
`;
19571957

1958+
exports[`ClayCardWithInfo renders as image card with flush horizontal 1`] = `
1959+
<div>
1960+
<div
1961+
class="card-type-asset form-check form-check-card form-check-top-left image-card"
1962+
>
1963+
<div
1964+
class="card"
1965+
>
1966+
<div
1967+
class="custom-control custom-checkbox"
1968+
>
1969+
<label>
1970+
<input
1971+
class="custom-control-input"
1972+
type="checkbox"
1973+
/>
1974+
<span
1975+
class="custom-control-label"
1976+
/>
1977+
<div
1978+
class="card-item-first aspect-ratio"
1979+
>
1980+
<img
1981+
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-flush"
1982+
src="path/to/an/image"
1983+
/>
1984+
<span
1985+
class="sticker sticker-primary sticker-bottom-left"
1986+
>
1987+
<span
1988+
class="sticker-overlay"
1989+
>
1990+
<svg
1991+
class="lexicon-icon lexicon-icon-document-image"
1992+
role="presentation"
1993+
>
1994+
<use
1995+
xlink:href="/path/to/some/resource.svg#document-image"
1996+
/>
1997+
</svg>
1998+
</span>
1999+
</span>
2000+
</div>
2001+
</label>
2002+
</div>
2003+
<div
2004+
class="card-body"
2005+
>
2006+
<div
2007+
class="card-row"
2008+
>
2009+
<div
2010+
class="autofit-col autofit-col-expand"
2011+
>
2012+
<p
2013+
class="card-title"
2014+
title="Foo Bar"
2015+
>
2016+
<span
2017+
class="text-truncate-inline"
2018+
>
2019+
<a
2020+
class="text-truncate"
2021+
href="#"
2022+
>
2023+
Foo Bar
2024+
</a>
2025+
</span>
2026+
</p>
2027+
</div>
2028+
</div>
2029+
</div>
2030+
</div>
2031+
</div>
2032+
</div>
2033+
`;
2034+
2035+
exports[`ClayCardWithInfo renders as image card with flush vertical 1`] = `
2036+
<div>
2037+
<div
2038+
class="card-type-asset form-check form-check-card form-check-top-left image-card"
2039+
>
2040+
<div
2041+
class="card"
2042+
>
2043+
<div
2044+
class="custom-control custom-checkbox"
2045+
>
2046+
<label>
2047+
<input
2048+
class="custom-control-input"
2049+
type="checkbox"
2050+
/>
2051+
<span
2052+
class="custom-control-label"
2053+
/>
2054+
<div
2055+
class="card-item-first aspect-ratio"
2056+
>
2057+
<img
2058+
class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-vertical-flush"
2059+
src="path/to/an/image"
2060+
/>
2061+
<span
2062+
class="sticker sticker-primary sticker-bottom-left"
2063+
>
2064+
<span
2065+
class="sticker-overlay"
2066+
>
2067+
<svg
2068+
class="lexicon-icon lexicon-icon-document-image"
2069+
role="presentation"
2070+
>
2071+
<use
2072+
xlink:href="/path/to/some/resource.svg#document-image"
2073+
/>
2074+
</svg>
2075+
</span>
2076+
</span>
2077+
</div>
2078+
</label>
2079+
</div>
2080+
<div
2081+
class="card-body"
2082+
>
2083+
<div
2084+
class="card-row"
2085+
>
2086+
<div
2087+
class="autofit-col autofit-col-expand"
2088+
>
2089+
<p
2090+
class="card-title"
2091+
title="Foo Bar"
2092+
>
2093+
<span
2094+
class="text-truncate-inline"
2095+
>
2096+
<a
2097+
class="text-truncate"
2098+
href="#"
2099+
>
2100+
Foo Bar
2101+
</a>
2102+
</span>
2103+
</p>
2104+
</div>
2105+
</div>
2106+
</div>
2107+
</div>
2108+
</div>
2109+
</div>
2110+
`;
2111+
19582112
exports[`ClayCardWithInfo renders as not selectable 1`] = `
19592113
<div>
19602114
<div

‎packages/clay-card/src/__tests__/index.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -915,6 +915,38 @@ describe('ClayCardWithInfo', () => {
915915
expect(container).toMatchSnapshot();
916916
});
917917

918+
it('renders as image card with flush horizontal', () => {
919+
const {container} = render(
920+
<ClayCardWithInfo
921+
flushHorizontal
922+
href="#"
923+
imgProps="path/to/an/image"
924+
onSelectChange={jest.fn()}
925+
selected={false}
926+
spritemap="/path/to/some/resource.svg"
927+
title="Foo Bar"
928+
/>
929+
);
930+
931+
expect(container).toMatchSnapshot();
932+
});
933+
934+
it('renders as image card with flush vertical', () => {
935+
const {container} = render(
936+
<ClayCardWithInfo
937+
flushVertical
938+
href="#"
939+
imgProps="path/to/an/image"
940+
onSelectChange={jest.fn()}
941+
selected={false}
942+
spritemap="/path/to/some/resource.svg"
943+
title="Foo Bar"
944+
/>
945+
);
946+
947+
expect(container).toMatchSnapshot();
948+
});
949+
918950
it('renders with custom sticker', () => {
919951
const {container} = render(
920952
<ClayCardWithInfo

0 commit comments

Comments
 (0)