v0.2.0-beta.4

CHANGELOG.md

@@ -1,23 +1,15 @@
 # Changelog
 
-## v0.2.0-beta.3
+## v0.2.0-beta.4
 
-### Added the `Gradient` component
-  - `/components/Gradient/index.tsx`
-  - `/components/Footer/index.tsx`
-  - `/components/Header/index.tsx`
+### Added the `Gradient` component to the `Card`` component
+  - `/components/Card/index.tsx`
   - `/components/Gradient/setup.tsx`
-  - `/components/Footer/setup.tsx`
-  - `/components/Header/setup.tsx`
+  - `/components/Card/setup.tsx`
   - `/routes/index.tsx`
-  - `/src/enums.ts`
-
-### Prepared the `Card` and `Header` componets for the `Gradient` compoennt.
-  - `/components/Card/index.tsx`
-  - `/components/Card/setup.ts`
-  - `/components/Header/index.tsx`
 
 ### Minor updates
+  - `/src/scss/components.scss`
   - `/src/scss/twind.scss`
   - `/static/style.css`
 
@@ -30,6 +22,8 @@
     - Added a `Gradient` component for decoration.
   - **Footer**
     - Added a `Gradient` component for decoration.
+  - **Card**
+    - Added a `Gradient` component for decoration.
 
 ### New components:
   - ✅ Gradient

components/Card/index.tsx

@@ -1,15 +1,30 @@
 import setup, { iCard } from './setup.ts';
 import Panel from '../Panel/index.tsx';
+import Gradient from '../Gradient/index.tsx';
 
 export default function (props: Partial<iCard>) {
-  const { c, fref, fwd, children, ...p } = setup(props);
+  const { c, fref, fwd, children, top_gradient_pattern, bottom_gradient_pattern, ...p } = setup(props);
 
   return (
     <div ref={fwd.wrapper?.ref!} class={c.wrapper}>
+      {top_gradient_pattern ? (
+        <Gradient
+          fref={fwd.top_gradient?.fref}
+          class={c.top_gradient}
+          flip
+          gradient_pattern={top_gradient_pattern}
+        />
+      ) : null}
       <Panel fref={fref} class={c.card} {...p}>
         {children}
       </Panel>
-      {/* <div ref={fwd.gradient?.ref!} class={c.gradient} /> */}
+      {bottom_gradient_pattern ? (
+        <Gradient
+          fref={fwd.bottom_gradient?.fref}
+          class={c.bottom_gradient}
+          gradient_pattern={bottom_gradient_pattern}
+        />
+      ) : null}
     </div>
   );
 }

components/Card/setup.ts

@@ -1,25 +1,35 @@
 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';
 
 export type iCard = iComponent<HTMLDivElement> & {
+  top_gradient_pattern: GRADIENT_PATTERNS | null;
+  bottom_gradient_pattern: GRADIENT_PATTERNS | null;
   fwd: Partial<{
     wrapper: iFwd<HTMLDivElement>;
     gradient: iFwd<HTMLDivElement>;
+    top_gradient: iGradient;
+    bottom_gradient: iGradient;
   }>;
 };
 
 const defaults: iCard = {
+  top_gradient_pattern: null,
+  bottom_gradient_pattern: null,
   fwd: {},
 };
 
 export default (props: Partial<iCard>) => {
   const p = applyDefaults<iCard>(defaults, props);
 
-  const { wrapper, gradient } = p.fwd;
+  const { wrapper, gradient, top_gradient, bottom_gradient } = p.fwd;
 
   const classes = partializeClasses({
     card: opt(cn('comp-card clr-bg-panel'), p.class, p.nostyle),
     wrapper: opt(cn('comp-card_wrapper'), wrapper?.class, wrapper?.nostyle),
+    top_gradient: opt(cn('comp-card_gradient'), top_gradient?.class, top_gradient?.nostyle),
+    bottom_gradient: opt(cn('comp-card_gradient'), bottom_gradient?.class, bottom_gradient?.nostyle),
     gradient: opt(
       cn('comp-card_gradient comp-gradient comp-gradient_zigzag'),
       gradient?.class,

components/Gradient/setup.ts

@@ -20,7 +20,7 @@ export default (props: Partial<iGradient>) => {
       cn(
         'comp-gradient',
         p.gradient_pattern ? `comp-gradient_${p.gradient_pattern}` : null,
-        p.flip ? 'y-flip' : null
+        p.flip ? 'flip' : null
       ),
       p.class,
       p.nostyle

routes/index.tsx

@@ -111,7 +111,7 @@ export default function Home() {
           <Button type={'panel'}>Button</Button>
         </div>
       </Navigation>
-      <Header gradient_pattern="wave" layout_type="left">
+      <Header gradient_pattern="cloud" layout_type="left">
         {TestTinyText('title')}
         <div></div>
         {TestLargeText('paragraph')}
@@ -128,14 +128,14 @@ export default function Home() {
           {TestTinyText('title')}
           <Separator />
           {TestTinyText('display')}
-          <Card>
+          <Card top_gradient_pattern="cloud" bottom_gradient_pattern="cloud">
             {TestSmallText('subheading')}
             {TestLargeText('paragraph')}
           </Card>
           {TestInputs()}
         </>
       </Main>
-      <Footer gradient_pattern="wave" layout_type="left" madeWithFresh>
+      <Footer gradient_pattern="cloud" layout_type="left" madeWithFresh>
         {TestTinyText('subheading')}
         <Text>
           Powered by&nbsp;

src/scss/components.scss

@@ -94,11 +94,13 @@
 }
 
 .comp-card:has(+ .comp-card_gradient) {
-  border-radius: var(--s-quarter) var(--s-quarter) 0 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .comp-card_gradient + .comp-card {
-  border-radius: 0 0 var(--s-quarter) var(--s-quarter);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

src/scss/twind.scss

@@ -18,3 +18,11 @@
 .y-flip {
   transform: scaleY(-1);
 }
+
+.x-flip {
+  transform: scaleX(-1);
+}
+
+.flip {
+  transform: scale(-1);
+}