CSF3 cards (#3148)

* CSF 3 Cards and CardView

Author: snowystinger

package.json

@@ -81,6 +81,7 @@
     "@storybook/api": "^6.5.7",
     "@storybook/components": "^6.5.7",
     "@storybook/react": "^6.5.7",
+    "@storybook/testing-react": "^1.3.0",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.2.0",

packages/@react-spectrum/card/chromatic/Card.chromatic.tsx

@@ -62,7 +62,7 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
     <CardView {...props} items={items} layout={layout} width="800px" height="800px" UNSAFE_style={{background: 'white'}} aria-label="Test CardView" selectionMode="multiple">
       {(item: any) => (
         <Card key={item.title} textValue={item.title} width={item.width} height={item.height}>
-          <Image src={item.src} />
+          <Image src={item.src} data-chromatic="ignore" />
           <Heading>{item.title}</Heading>
           <Text slot="detail">PNG</Text>
           <Content>Description</Content>

packages/@react-spectrum/card/chromatic/CardView.chromatic.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Card} from '../index';
+import {
+  CardStory,
+  Default,
+  DefaultSquare,
+  DefaultTall,
+  LongContent,
+  LongDetail,
+  LongTitle,
+  NoDescription,
+  NoDescriptionSquare,
+  WithIllustration
+} from './Card.chromatic';
+import {ComponentMeta} from '@storybook/react';
+import React from 'react';
+
+export default {
+  title: 'Card/horizontal',
+  component: Card,
+  args: {
+    orientation: 'horizontal'
+  }
+} as ComponentMeta<typeof Card>;
+
+export const Horizontal: CardStory = {
+  ...Default,
+  decorators: [
+    (Story) => (
+      <div style={{height: '90px'}}>
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export const HorizontalSquare: CardStory = {
+  ...DefaultSquare,
+  ...Horizontal,
+  args: {...DefaultSquare.args}
+};
+
+export const HorizontalTall: CardStory = {
+  ...DefaultTall,
+  ...Horizontal,
+  args: {...DefaultTall.args}
+};
+
+export const HorizontalNoDescription: CardStory = {
+  ...NoDescription,
+  ...Horizontal,
+  args: {...NoDescription.args}
+};
+
+export const HorizontalNoDescriptionSquare: CardStory = {
+  ...NoDescriptionSquare,
+  ...Horizontal,
+  args: {...NoDescriptionSquare.args}
+};
+
+export const HorizontalWithIllustration: CardStory = {
+  ...WithIllustration,
+  ...Horizontal,
+  args: {...WithIllustration.args}
+};
+
+export const HorizontalLongTitle: CardStory = {
+  ...LongTitle,
+  ...Horizontal,
+  args: {...LongTitle.args}
+};
+
+export const HorizontalLongDescription: CardStory = {
+  ...LongContent,
+  ...Horizontal,
+  args: {...LongContent.args}
+};
+
+export const HorizontalLongDetail: CardStory = {
+  ...LongDetail,
+  ...Horizontal,
+  args: {...LongDetail.args}
+};

packages/@react-spectrum/card/chromatic/HorizontalCard.chromatic.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Card} from '../index';
+import {
+  CardStory,
+  Default,
+  DefaultSquare,
+  DefaultTall,
+  LongContentPoorWordSize,
+  LongDescription,
+  LongDetail,
+  LongEverything,
+  LongTitle,
+  NoDescription,
+  NoDescriptionSquare,
+  Selected,
+  WithIllustration
+} from './Card.chromatic';
+import {ComponentMeta} from '@storybook/react';
+
+export default {
+  title: 'Card/quiet',
+  component: Card,
+  args: {
+    isQuiet: true
+  }
+} as ComponentMeta<typeof Card>;
+
+export const Quiet: CardStory = {
+  ...Default
+};
+
+export const QuietSquare = {
+  ...DefaultSquare
+};
+
+export const QuietTall = {
+  ...DefaultTall
+};
+
+export const QuietNoDescription = {
+  ...NoDescription
+};
+
+export const QuietNoDescriptionSquare = {
+  ...NoDescriptionSquare
+};
+
+export const QuietWithIllustration = {
+  ...WithIllustration
+};
+
+export const QuietLongTitle = {
+  ...LongTitle
+};
+
+export const QuietLongDescription = {
+  ...LongDescription
+};
+
+export const QuietLongContentPoorWordSize = {
+  ...LongContentPoorWordSize
+};
+
+export const QuietLongDetail = {
+  ...LongDetail
+};
+
+export const QuietLongEverything = {
+  ...LongEverything
+};
+
+export const QuietSelected = {
+  ...Selected,
+  name: 'Selected'
+};