new(Card): Adding two props 'noShadow' and 'selected' for Card (#396)

* add noShadow and selected

* comments resolved

* fix lint

Co-authored-by: Monica Ma <monica.ma@airbnb.com>

packages/core/src/components/Card/index.tsx

@@ -8,17 +8,32 @@ export { Content };
 export type CardProps = {
   /** List of `Content`s blocks to contain content. */
   children: NonNullable<React.ReactNode>;
+  /** Hide shadow. */
+  noShadow?: boolean;
   /** Set overflow to be visible. */
   overflow?: boolean;
+  /** Whether the card is selected or not. */
+  selected?: boolean;
   /** Custom style sheet. */
   styleSheet?: StyleSheet;
 };
 
 /**
  * An abstract layout to use as a base for cards.
  */
-export default function Card({ children, overflow, styleSheet }: CardProps) {
+export default function Card({ children, noShadow, overflow, selected, styleSheet }: CardProps) {
   const [styles, cx] = useStyles(styleSheet ?? styleSheetCard);
 
-  return <div className={cx(styles.card, overflow && styles.card_overflow)}>{children}</div>;
+  return (
+    <div
+      className={cx(
+        styles.card,
+        overflow && styles.card_overflow,
+        noShadow && styles.card_noShadow,
+        selected && styles.card_selected,
+      )}
+    >
+      {children}
+    </div>
+  );
 }

packages/core/src/components/Card/story.tsx

@@ -326,6 +326,38 @@ asCompact.story = {
   name: 'As compact.',
 };
 
+export function noShadow() {
+  return (
+    <Card noShadow>
+      <Content>
+        <Text>
+          <LoremIpsum />
+        </Text>
+      </Content>
+    </Card>
+  );
+}
+
+noShadow.story = {
+  name: 'No shadow.',
+};
+
+export function selected() {
+  return (
+    <Card selected>
+      <Content>
+        <Text>
+          <LoremIpsum />
+        </Text>
+      </Content>
+    </Card>
+  );
+}
+
+selected.story = {
+  name: 'Selected.',
+};
+
 export function cardAsAButtonWithMiddleAlignment() {
   return (
     <Card>

packages/core/src/components/Card/styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from '../../hooks/useStyles';
 
-export const styleSheetCard: StyleSheet = ({ color, pattern }) => ({
+export const styleSheetCard: StyleSheet = ({ color, pattern, ui }) => ({
   card: {
     ...pattern.box,
     background: color.accent.bg,
@@ -10,6 +10,15 @@ export const styleSheetCard: StyleSheet = ({ color, pattern }) => ({
   card_overflow: {
     overflow: 'visible',
   },
+
+  card_noShadow: {
+    boxShadow: 'none',
+  },
+
+  card_selected: {
+    border: ui.borderThick,
+    borderColor: color.core.primary[3],
+  },
 });
 
 export const styleSheetContent: StyleSheet = ({ color, pattern, ui, unit }) => ({

packages/core/test/components/Card.test.tsx

@@ -18,4 +18,36 @@ describe('<Card />', () => {
 
     expect(withoutOverflow.prop('className')).not.toBe(withOverflow.prop('className'));
   });
+
+  it('renders different styles for `noShadow`', () => {
+    const withoutNoShadow = shallow(
+      <Card>
+        <Content>Foo</Content>
+      </Card>,
+    );
+
+    const withNoShadow = shallow(
+      <Card noShadow>
+        <Content>Foo</Content>
+      </Card>,
+    );
+
+    expect(withoutNoShadow.prop('className')).not.toBe(withNoShadow.prop('className'));
+  });
+
+  it('renders different styles for `selected`', () => {
+    const withoutSelected = shallow(
+      <Card>
+        <Content>Foo</Content>
+      </Card>,
+    );
+
+    const withSelected = shallow(
+      <Card selected>
+        <Content>Foo</Content>
+      </Card>,
+    );
+
+    expect(withoutSelected.prop('className')).not.toBe(withSelected.prop('className'));
+  });
 });