fix(@clayui/card): Remove support for labels in CardWithUser

Author: Carlos Lancha

packages/clay-card/src/CardWithUser.tsx

@@ -7,7 +7,6 @@ import {ClayButtonWithIcon} from '@clayui/button';
 import {ClayDropDownWithItems} from '@clayui/drop-down';
 import {ClayCheckbox} from '@clayui/form';
 import ClayIcon from '@clayui/icon';
-import ClayLabel from '@clayui/label';
 import ClayLayout from '@clayui/layout';
 import ClaySticker, {DisplayType as StickerDisplayType} from '@clayui/sticker';
 import React from 'react';
@@ -45,13 +44,6 @@ interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 */
 	href?: string;
 
-	/**
-	 * List of labels that are applied to the user
-	 */
-	labels?: Array<
-		React.ComponentProps<typeof ClayLabel> & {value: React.ReactText}
-	>;
-
 	/**
 	 * Name of the user
 	 */
@@ -100,7 +92,6 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 	disabled,
 	dropDownTriggerProps = {},
 	href,
-	labels,
 	name,
 	onSelectChange,
 	selected = false,
@@ -162,15 +153,6 @@ export const ClayCardWithUser: React.FunctionComponent<IProps> = ({
 						<ClayCard.Description displayType="subtitle">
 							{description}
 						</ClayCard.Description>
-						{labels && (
-							<ClayCard.Caption>
-								{labels.map(({value, ...others}, i: number) => (
-									<ClayLabel {...others} key={i}>
-										{value}
-									</ClayLabel>
-								))}
-							</ClayCard.Caption>
-						)}
 					</ClayLayout.ContentCol>
 
 					{actions && (

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

@@ -2131,19 +2131,6 @@ exports[`ClayCardWithUser renders as disabled 1`] = `
                 </span>
               </span>
             </p>
-            <div
-              class="card-detail"
-            >
-              <span
-                class="label label-success"
-              >
-                <span
-                  class="label-item label-item-expand"
-                >
-                  Awesome
-                </span>
-              </span>
-            </div>
           </div>
         </div>
       </div>
@@ -2235,19 +2222,6 @@ exports[`ClayCardWithUser renders as selectable 1`] = `
                 </span>
               </span>
             </p>
-            <div
-              class="card-detail"
-            >
-              <span
-                class="label label-success"
-              >
-                <span
-                  class="label-item label-item-expand"
-                >
-                  Awesome
-                </span>
-              </span>
-            </div>
           </div>
         </div>
       </div>
@@ -2326,19 +2300,6 @@ exports[`ClayCardWithUser renders with icon 1`] = `
                 </span>
               </span>
             </p>
-            <div
-              class="card-detail"
-            >
-              <span
-                class="label label-success"
-              >
-                <span
-                  class="label-item label-item-expand"
-                >
-                  Awesome
-                </span>
-              </span>
-            </div>
           </div>
         </div>
       </div>
@@ -2414,19 +2375,6 @@ exports[`ClayCardWithUser renders with image 1`] = `
                 </span>
               </span>
             </p>
-            <div
-              class="card-detail"
-            >
-              <span
-                class="label label-success"
-              >
-                <span
-                  class="label-item label-item-expand"
-                >
-                  Awesome
-                </span>
-              </span>
-            </div>
           </div>
         </div>
       </div>

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

@@ -613,12 +613,6 @@ describe('ClayCardWithUser', () => {
 			<ClayCardWithUser
 				description="Test"
 				href="#"
-				labels={[
-					{
-						displayType: 'success',
-						value: 'Awesome',
-					},
-				]}
 				name="Foo Bar"
 				onSelectChange={onSelectChangeFn}
 				selected={false}
@@ -639,12 +633,6 @@ describe('ClayCardWithUser', () => {
 				description="Test"
 				disabled
 				href="#"
-				labels={[
-					{
-						displayType: 'success',
-						value: 'Awesome',
-					},
-				]}
 				name="Foo Bar"
 				onSelectChange={jest.fn()}
 				selected={false}
@@ -660,12 +648,6 @@ describe('ClayCardWithUser', () => {
 			<ClayCardWithUser
 				description="Test"
 				href="#"
-				labels={[
-					{
-						displayType: 'success',
-						value: 'Awesome',
-					},
-				]}
 				name="Foo Bar"
 				spritemap="/path/to/some/resource.svg"
 			/>
@@ -679,12 +661,6 @@ describe('ClayCardWithUser', () => {
 			<ClayCardWithUser
 				description="Test"
 				href="#"
-				labels={[
-					{
-						displayType: 'success',
-						value: 'Awesome',
-					},
-				]}
 				name="Foo Bar"
 				spritemap="/path/to/some/resource.svg"
 				userImageSrc="/path/to/image.jpg"

packages/clay-card/stories/index.tsx

@@ -246,16 +246,6 @@ storiesOf('Components|ClayCard', module)
 						description="Assistant to the regional manager"
 						disabled={boolean('Disabled', false)}
 						href="#"
-						labels={[
-							{
-								displayType: 'success',
-								value: 'Awesome',
-							},
-							{
-								displayType: 'danger',
-								value: 'Crazy',
-							},
-						]}
 						name="Abraham Kuyper"
 						onSelectChange={() => {}}
 						selected={boolean('selected', false)}
@@ -265,16 +255,6 @@ storiesOf('Components|ClayCard', module)
 					<ClayCardWithUser
 						description="Assistant to the regional manager"
 						disabled={boolean('Disabled', false)}
-						labels={[
-							{
-								displayType: 'success',
-								value: 'Awesome',
-							},
-							{
-								displayType: 'danger',
-								value: 'Crazy',
-							},
-						]}
 						name="Abraham Kuyper"
 						onSelectChange={setValue}
 						selected={value}