add Card

fibo · May 20, 2024 · 886f92f · 886f92f
1 parent 227f421
commit 886f92f
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Notice that you should also have React installed, minimum version supported is 1
 
 Components are documented inline with TSDocs. You can configure your editor to display documentation and examples.
 
-<img src="./media/inline-docs.png" width="350"/>
+<img src="./media/inline-docs.png"/>
 
 Almost all `trunx` components have a `bulma` prop that accepts:
 
@@ -74,6 +74,13 @@ You can use the `bulma` prop in case you need to add more Bulma classes that has
   - `Button`
   - `Buttons`
   - `ButtonDelete`
+  - `Card`
+    - `CardContent`
+    - `CardFooter`
+    - `CardHeader`
+    - `CardHeaderIcon`
+    - `CardHeaderTitle`
+    - `CardImage`
   - `Cell`
   - `Checkbox`
   - `Column`

diff --git a/src/doc_snippets.tsx b/src/doc_snippets.tsx
@@ -6,12 +6,20 @@
 //////////////////////////////////////////////////////////////////////
 
 import { FC, PropsWithChildren, ButtonHTMLAttributes } from "react"
+import type { Bulma } from "./index.js"
 import {
-  Bulma,
+  A,
   Button,
   Buttons,
   ButtonDelete,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardHeaderIcon,
+  CardHeaderTitle,
   Cell,
+  Checkbox,
   Container,
   Content,
   Control,
@@ -94,6 +102,24 @@ export const Snippets: FC = () => (
       Login
     </Button>
 
+    <Card>
+      <CardHeader>
+        <CardHeaderTitle>Title</CardHeaderTitle>
+        <CardHeaderIcon>
+          <Icon>
+            <i className="fas fa-angle-down" aria-hidden="true" />
+          </Icon>
+        </CardHeaderIcon>
+      </CardHeader>
+      <CardContent>Lorem ipsum...</CardContent>
+      <CardFooter>
+        <A bulma="card-footer-item">Save</A>
+        <A bulma="card-footer-item">Delete</A>
+      </CardFooter>
+    </Card>
+
+    <Checkbox disabled>Save my preferences</Checkbox>
+
     <Container isFluid>
       <Notification color="primary">
         This container is <strong>fluid</strong>

diff --git a/src/react.tsx b/src/react.tsx
@@ -234,6 +234,142 @@ export const Cell: FC<PropsWithChildren<CellProps>> = ({
 )
 export type CellProps = HTMLAttributes<HTMLDivElement> & BulmaProp
 
+/**
+ * An all-around flexible and composable component.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardHeaderTitle>Title</CardHeaderTitle>
+ *     <CardHeaderIcon>
+ *       <Icon><i className="fas fa-angle-down" aria-hidden="true" /></Icon>
+ *     </CardHeaderIcon>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Lorem ipsum...
+ *   </CardContent>
+ *   <CardFooter>
+ *     <A bulma="card-footer-item">Save</A>
+ *     <A bulma="card-footer-item">Delete</A>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ *
+ * @see [bulma docs](https://bulma.io/documentation/components/card/)
+ */
+export const Card: FC<PropsWithChildren<CardProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <div
+    className={classnames<Bulma>(className as Bulma, "card", bulma)}
+    {...props}
+  >
+    {children}
+  </div>
+)
+export type CardProps = HTMLAttributes<HTMLDivElement> & BulmaProp
+
+/** @see {@link Card} */
+export const CardContent: FC<PropsWithChildren<CardContentProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <div
+    className={classnames<Bulma>(className as Bulma, "card-content", bulma)}
+    {...props}
+  >
+    {children}
+  </div>
+)
+export type CardContentProps = HTMLAttributes<HTMLDivElement> & BulmaProp
+
+/** @see {@link Card} */
+export const CardFooter: FC<PropsWithChildren<CardFooterProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <footer
+    className={classnames<Bulma>(className as Bulma, "card-footer", bulma)}
+    {...props}
+  >
+    {children}
+  </footer>
+)
+export type CardFooterProps = HTMLAttributes<HTMLElement> & BulmaProp
+
+/** @see {@link Card} */
+export const CardHeader: FC<PropsWithChildren<CardHeaderProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <footer
+    className={classnames<Bulma>(className as Bulma, "card-header", bulma)}
+    {...props}
+  >
+    {children}
+  </footer>
+)
+export type CardHeaderProps = HTMLAttributes<HTMLElement> & BulmaProp
+
+/** @see {@link Card} */
+export const CardHeaderIcon: FC<PropsWithChildren<CardHeaderIconProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <button
+    className={classnames<Bulma>(className as Bulma, "card-header-icon", bulma)}
+    {...props}
+  >
+    {children}
+  </button>
+)
+export type CardHeaderIconProps = HTMLAttributes<HTMLButtonElement> & BulmaProp
+
+/** @see {@link Card} */
+export const CardHeaderTitle: FC<PropsWithChildren<CardHeaderTitleProps>> = ({
+  bulma,
+  className,
+  children,
+  ...props
+}) => (
+  <p
+    className={classnames<Bulma>(
+      className as Bulma,
+      "card-header-title",
+      bulma,
+    )}
+    {...props}
+  >
+    {children}
+  </p>
+)
+export type CardHeaderTitleProps = HTMLAttributes<HTMLParagraphElement> &
+  BulmaProp
+
+/**
+ * The 2-state checkbox in its native format
+ *
+ * @example
+ *
+ * ```tsx
+ * <Checkbox disabled>Save my preferences</Checkbox>
+ * ```
+ *
+ * @see [bulma docs](https://bulma.io/documentation/form/checkbox/)
+ */
 export const Checkbox: FC<PropsWithChildren<CheckboxProps>> = ({
   children,
   ...props