Merge pull request #20 from dewen/feature/canvasx-hero-and-card

feat(vital-card): Merge in Vital Card

packages/__vital__/package.json

@@ -48,6 +48,7 @@
     "@bodiless/vital-list": "^1.0.0-beta.9",
     "@bodiless/vital-templates": "^1.0.0-beta.9",
     "@bodiless/vital-youtube": "^1.0.0-beta.9",
+    "@bodiless/vital-card": "^1.0.0-beta.9",
     "lodash": "^4.17.19",
     "tailwindcss": "^3.0.23"
   }

packages/__vital__/src/styleguide/Page/StyleGuideTemplate/Card.tsx

@@ -0,0 +1,92 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { withNodeKey } from '@bodiless/core';
+import {
+  flowHoc, replaceWith, as, Div, H2
+} from '@bodiless/fclasses';
+import { asStyleGuideTemplateToken, vitalStyleGuideTemplate } from '@bodiless/vital-templates';
+import { vitalTypography } from '@bodiless/vital-elements';
+import { asCardToken, CardClean, vitalCard } from '@bodiless/vital-card';
+
+const Subtitle = as(vitalTypography.H2, 'pt-4')(H2);
+
+/**
+ * Default Card component.
+ */
+const DefaultCard = as(
+  vitalCard.Default,
+  withNodeKey('default-card'),
+)(CardClean);
+
+/**
+ * Vertical Card component.
+ */
+const VerticalCard = as(asCardToken({
+  ...vitalCard.Default,
+  Schema: {
+    ...vitalCard.Default.Schema,
+    Wrapper: withNodeKey('vertical-card'),
+  },
+  Spacing: {
+    ...vitalCard.WithVerticalOrientation.Spacing,
+  },
+  Layout: {
+    ...vitalCard.WithVerticalOrientation.Layout,
+  },
+}))(CardClean);
+const HorizontalCard = as(asCardToken({
+  ...vitalCard.Default,
+  Schema: {
+    ...vitalCard.Default.Schema,
+    Wrapper: withNodeKey('horizontal-card'),
+  },
+  Spacing: {
+    ...vitalCard.WithHorizontalOrientation.Spacing,
+  },
+  Layout: {
+    ...vitalCard.WithHorizontalOrientation.Layout,
+  },
+}))(CardClean);
+
+const HeroCard = as(
+  vitalCard.Hero,
+  withNodeKey('hero-card'),
+)(CardClean);
+
+const CardVariations = (props: any) => (
+  <>
+    <Div className="md:w-1/3 mb-8">
+      <Subtitle>Default Card</Subtitle>
+      <DefaultCard />
+      <Subtitle>Vertical Card</Subtitle>
+      <VerticalCard />
+      <Subtitle>Horizontal Card</Subtitle>
+      <HorizontalCard />
+    </Div>
+    <Div className="mb-8">
+      <Subtitle>Hero Card</Subtitle>
+      <HeroCard />
+    </Div>
+  </>
+);
+
+export const Card = asStyleGuideTemplateToken(vitalStyleGuideTemplate.Default, {
+  Meta: flowHoc.meta.term('Token')('Card'),
+  Content: {
+    Title: replaceWith(() => <>Card</>),
+    Examples: replaceWith(CardVariations),
+  },
+});

packages/__vital__/src/styleguide/Page/StyleGuideTemplate/_default.tsx

@@ -46,6 +46,7 @@ const Examples = () => (
       <li><a href="./images">Images</a></li>
       <li><a href="./video">Video</a></li>
       <li><a href="./list">List</a></li>
+      <li><a href="./card">Card</a></li>
     </List>
     <Subtitle>Templates</Subtitle>
     <List>

packages/__vital__/src/styleguide/Page/StyleGuideTemplate/index.tsx

@@ -19,6 +19,7 @@ import { Header } from './Header';
 import { FlowContainer } from './FlowContainer';
 import { Images } from './Images';
 import { Footer } from './Footer';
+import { Card } from './Card';
 import { List } from './List';
 import { _default } from './_default';
 import { Video } from './Video';
@@ -34,5 +35,6 @@ export const __vital__StyleGuideTemplate = {
   FlowContainer,
   Footer,
   Video,
+  Card,
   List,
 };

packages/__vital__/src/styleguide/Page/index.tsx

@@ -28,6 +28,7 @@ const {
   Images,
   Footer,
   Video,
+  Card,
   List,
   _default
 } = __vital__StyleGuideTemplate;
@@ -45,6 +46,7 @@ const Default = asFluidToken({
     Images,
     Footer,
     Video,
+    Card,
     List
   },
 });

packages/vital-card/README.md

@@ -0,0 +1 @@
+See [Card Docs](./doc/Card.md)

packages/vital-card/bodiless.docs.json

@@ -0,0 +1,9 @@
+{
+  "CX_DesignSystem": {
+    "Components": {
+      "Vital_Card": {
+        "README.md": "./README.md"
+      }
+    }
+  }
+}

packages/vital-card/doc/Card.md

@@ -0,0 +1,34 @@
+# Vital Card Component
+
+## Overview
+
+Vital Card is a group of content which typically features a less than full size image alongside supporting content or a call to action (CTA). Cards are commonly used on websites to call out or offer something to the site visitor.
+
+The Vital Card package provides a clean Card component and following Card 
+design variants for quick and easier site build:
+
+- Basic Card Token
+- Hero Card Token
+- Horizontal Card Token
+- Vertical Card Token
+- No Title Card Token
+- No Description Card Token
+
+## Content Editor Details
+
+- Title: Plain Text Editor
+- Description: BasicNoLink RTE
+- Image: Gatsby Image
+- CTA: Button, A
+
+
+## Site Builder Details
+
+### Usage
+
+
+
+## Architectural Details
+
+
+

packages/vital-card/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@bodiless/vital-card",
+  "version": "1.0.0-beta.9",
+  "description": "Card component to display information through an image,text or other media content",
+  "author": "Dewen Li <dli94@its.jnj.com>",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "sideEffects": false,
+  "typings": "lib/index.d.ts",
+  "files": [
+    "/lib",
+    "/bodiless.docs.json",
+    "/doc",
+    "tailwind.config.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/johnsonandjohnson/bodiless-js.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc",
+    "build:watch": "npm run build -- --watch",
+    "build:api-doc": "typedoc --out doc/api src",
+    "lint": "tslint ./src/**/*.ts?x",
+    "clean": "rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"",
+    "copy": "copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""
+  },
+  "dependencies": {
+    "@bodiless/core": "^1.0.0-beta.9",
+    "@bodiless/components": "^1.0.0-beta.9",
+    "@bodiless/components-ui": "^1.0.0-beta.9",
+    "@bodiless/fclasses": "^1.0.0-beta.9",
+    "@bodiless/hydration": "^1.0.0-beta.9",
+    "@bodiless/vital-editors": "^1.0.0-beta.9",
+    "@bodiless/vital-elements": "^1.0.0-beta.9",
+    "@bodiless/vital-image": "^1.0.0-beta.9",
+    "@bodiless/vital-link": "^1.0.0-beta.9",
+    "lodash": "^4.17.19",
+    "tailwindcss": "^3.0.23",
+    "uuid": "^3.3.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

packages/vital-card/src/components/Card/CardClean.tsx

@@ -0,0 +1,129 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC, ComponentType, HTMLProps } from 'react';
+import {
+  designable,
+  DesignableComponentsProps,
+  Div,
+  A,
+  Img,
+  H3,
+  StylableProps,
+  DesignableProps,
+  Fragment,
+  as,
+} from '@bodiless/fclasses';
+import { withNode } from '@bodiless/core';
+import { asVitalTokenSpec } from '@bodiless/vital-elements';
+import { LinkClean } from '@bodiless/vital-link';
+import { withoutHydration } from '@bodiless/hydration';
+
+export type CardComponents = {
+  Wrapper: ComponentType<StylableProps>,
+  ImageWrapper: ComponentType<StylableProps>,
+  Image: ComponentType<StylableProps>,
+  EyebrowWrapper: ComponentType<StylableProps>,
+  Eyebrow: ComponentType<StylableProps>,
+  ContentWrapper: ComponentType<StylableProps>,
+  TitleWrapper: ComponentType<StylableProps>,
+  Title: ComponentType<StylableProps>,
+  DescriptionWrapper: ComponentType<StylableProps>,
+  Description: ComponentType<StylableProps>,
+  RatingWrapper: ComponentType<StylableProps>,
+  Rating: ComponentType<StylableProps>,
+  CTAWrapper: ComponentType<StylableProps>,
+  CTALink: ComponentType<StylableProps>,
+  CTAText: ComponentType<StylableProps>,
+};
+
+const cardComponentStart: CardComponents = {
+  Wrapper: A,
+  ImageWrapper: Div,
+  Image: Img,
+  EyebrowWrapper: Div,
+  Eyebrow: Fragment,
+  ContentWrapper: Div,
+  TitleWrapper: H3,
+  Title: Fragment,
+  DescriptionWrapper: Fragment,
+  Description: Div,
+  Rating: Fragment,
+  RatingWrapper: Fragment,
+  CTAText: Fragment,
+  // @todo: use LinkClean without as throws ts type error.
+  CTALink: as()(LinkClean),
+  CTAWrapper: Div,
+};
+
+export type CardProps = DesignableProps<CardComponents> & HTMLProps<HTMLElement>;
+type CardBaseProps = DesignableComponentsProps<CardComponents> & HTMLProps<HTMLElement>;
+
+const CardBase: FC<CardBaseProps> = ({ components, ...rest }) => {
+  const {
+    Wrapper,
+    Image,
+    ImageWrapper,
+    ContentWrapper,
+    EyebrowWrapper,
+    Eyebrow,
+    TitleWrapper,
+    Title,
+    DescriptionWrapper,
+    Description,
+    RatingWrapper,
+    Rating,
+    CTAWrapper,
+    CTALink,
+    CTAText,
+  } = components;
+
+  return (
+    <Wrapper {...rest}>
+      <ImageWrapper>
+        <Image />
+      </ImageWrapper>
+      <ContentWrapper>
+        <EyebrowWrapper>
+          <Eyebrow />
+        </EyebrowWrapper>
+        <TitleWrapper>
+          <Title />
+        </TitleWrapper>
+        <DescriptionWrapper>
+          <Description />
+        </DescriptionWrapper>
+        <RatingWrapper>
+          <Rating />
+        </RatingWrapper>
+        <CTAWrapper>
+          <CTALink>
+            <CTAText />
+          </CTALink>
+        </CTAWrapper>
+      </ContentWrapper>
+    </Wrapper>
+  );
+};
+
+const CardClean = as(
+  designable(cardComponentStart, 'Card'),
+  withNode,
+)(CardBase);
+
+const asCardToken = asVitalTokenSpec<CardComponents>();
+
+export default CardClean;
+export const CardStatic: ComponentType<CardProps> = withoutHydration()(CardClean);
+export { CardClean, asCardToken };

packages/vital-card/src/components/Card/index.bl-edit.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright © 2022 Johnson & Johnson
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardStatic } from './CardClean';
+import vitalCardStatic from './tokens';
+
+export { CardStatic, vitalCardStatic };