v0.2.0-beta.5

CHANGELOG.md

@@ -1,18 +1,12 @@
 # Changelog
 
-## v0.2.0-beta.4
+## v0.2.0-beta.5
 
-### Added the `Gradient` component to the `Card`` component
+### Added a title to the `Card` component.
   - `/components/Card/index.tsx`
-  - `/components/Gradient/setup.tsx`
   - `/components/Card/setup.tsx`
   - `/routes/index.tsx`
 
-### Minor updates
-  - `/src/scss/components.scss`
-  - `/src/scss/twind.scss`
-  - `/static/style.css`
-
 ## Changes so far
 
 - Added the `ìComponent` type.
@@ -23,6 +17,7 @@
   - **Footer**
     - Added a `Gradient` component for decoration.
   - **Card**
+    - Added a `card_title` prop.
     - Added a `Gradient` component for decoration.
 
 ### New components:
@@ -42,7 +37,7 @@
     - [ ] Link
   - [ ] Create an organized collection of island functions
   - [ ] Update component features
-    - [ ] **Card**: Add text, image, gradient spacers, and linkmap feature.
+    - [ ] **Card**: Add text, image, gradient spacers, and chips feature.
     - [ ] **Navigation**: Add appear/disappear when scrolling interaction on a fixed navigation.
     - [ ] **Code**: Add copy to clipboard.
     - [ ] **Separator**: Add gradient separators.

components/Card/index.tsx

@@ -1,9 +1,12 @@
 import setup, { iCard } from './setup.ts';
 import Panel from '../Panel/index.tsx';
 import Gradient from '../Gradient/index.tsx';
+import Text from '../Text/index.tsx';
+import Linkmap from '../Linkmap/index.tsx';
 
 export default function (props: Partial<iCard>) {
-  const { c, fref, fwd, children, top_gradient_pattern, bottom_gradient_pattern, ...p } = setup(props);
+  const { c, fref, fwd, children, card_title, top_gradient_pattern, bottom_gradient_pattern, ...p } =
+    setup(props);
 
   return (
     <div ref={fwd.wrapper?.ref!} class={c.wrapper}>
@@ -16,7 +19,8 @@ export default function (props: Partial<iCard>) {
         />
       ) : null}
       <Panel fref={fref} class={c.card} {...p}>
-        {children}
+        {card_title ? <Text type="subheading">{card_title}</Text> : null}
+        <div class="comp-card_content">{children}</div>
       </Panel>
       {bottom_gradient_pattern ? (
         <Gradient

components/Card/setup.ts

@@ -1,9 +1,10 @@
 import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iComponent, iFwd } from '../../src/types.ts';
-import { iGradient } from '../Gradient/setup.ts';
 import { GRADIENT_PATTERNS } from '../../src/enums.ts';
+import { iGradient } from '../Gradient/setup.ts';
 
 export type iCard = iComponent<HTMLDivElement> & {
+  card_title: string | null;
   top_gradient_pattern: GRADIENT_PATTERNS | null;
   bottom_gradient_pattern: GRADIENT_PATTERNS | null;
   fwd: Partial<{
@@ -15,6 +16,7 @@ export type iCard = iComponent<HTMLDivElement> & {
 };
 
 const defaults: iCard = {
+  card_title: null,
   top_gradient_pattern: null,
   bottom_gradient_pattern: null,
   fwd: {},

routes/index.tsx

@@ -128,8 +128,10 @@ export default function Home() {
           {TestTinyText('title')}
           <Separator />
           {TestTinyText('display')}
-          <Card top_gradient_pattern="cloud" bottom_gradient_pattern="cloud">
-            {TestSmallText('subheading')}
+          <Card
+            card_title="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            bottom_gradient_pattern="cloud"
+          >
             {TestLargeText('paragraph')}
           </Card>
           {TestInputs()}