✨ Add examples for card components

Author: Frontendland

src/components/Card/Card.astro

@@ -12,7 +12,7 @@ const {
     element = 'section',
     title,
     titleTag = 'span',
-    compact = true,
+    compact,
     className,
     secondary,
     ...rest
@@ -37,7 +37,7 @@ const Title = titleTag
         <Title class="card-title">{title}</Title>
     )}
     <div class="card-body" class:list={[compact && 'compact']}>
-        {compact ? (
+        {compact && !secondary ? (
             <div class="card-wrapper"><slot /></div>
         ) : (
             <slot />

src/pages/button.astro

@@ -16,13 +16,13 @@ import { Button as ReactButton } from '@components/Button/Button.tsx'
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteButton theme="alert" onClick={() => console.log('👋')} client:load>
+            <SvelteButton theme="alert">
                 Button in Svelte
             </SvelteButton>
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactButton theme="info" onClick={() => console.log('👋')} client:load>
+            <ReactButton theme="info">
                 Button in React
             </ReactButton>
         </ComponentWrapper>

src/pages/card.astro

@@ -0,0 +1,67 @@
+---
+import Layout from '@static/Layout.astro'
+
+import AstroCard from '@components/Card/Card.astro'
+import SvelteButton from '@components/Button/Button.svelte'
+import { Button as ReactButton } from '@components/Button/Button.tsx'
+---
+
+<Layout>
+    <h1>Card</h1>
+    
+    <div class="grid md-2 lg-3">
+        <AstroCard compact={true}>
+            Card component using <span class="a">Astro</span>
+        </AstroCard>
+
+        <AstroCard compact={true}>
+            Card component using <span class="s">Svelte</span>
+        </AstroCard>
+
+        <AstroCard compact={true}>
+            Card component using <span class="r">React</span>
+        </AstroCard>
+
+        <AstroCard title="Titled card" compact={true}>
+            Card with title
+        </AstroCard>
+
+        <AstroCard title="Spacious">
+            Spacious card with title
+        </AstroCard>
+
+        <AstroCard>
+            Spacious card without title
+        </AstroCard>
+
+        <AstroCard title="Secondary" secondary={true}>
+            Secondary card with title
+        </AstroCard>
+
+        <AstroCard secondary={true}>
+            Secondary card without title
+        </AstroCard>
+
+        <AstroCard title="Bolded" titleTag="strong">
+            Card with bold title using <code>strong</code> tag.
+        </AstroCard>
+    </div>
+</Layout>
+
+<style lang="scss">
+    .a {
+        background: #B545ED;
+        background: linear-gradient(to right, #505FFF, #B545ED);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+    
+    .s {
+        color: #FF3E00;
+    }
+    
+    .r {
+        color: #61DAFB;
+    }
+</style>

src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
 import Layout from '@static/Layout.astro'
+import CardWrapper from '@static/CardWrapper.astro'
 
 import Button from '@components/Button/Button.astro'
-import Card from '@components/Card/Card.astro'
 import Accordion from '@components/Accordion/Accordion.astro'
 ---
 
@@ -27,7 +27,7 @@ import Accordion from '@components/Accordion/Accordion.astro'
         </Button>
     </div>
     <div class="grid md-2 lg-3">
-        <Card title="Accordion" element="a" href="/accordion">
+        <CardWrapper title="Accordion" href="/accordion">
             <Accordion
                 items={[{
                     title: 'Do you offer support?',
@@ -40,11 +40,14 @@ import Accordion from '@components/Accordion/Accordion.astro'
                     content: 'Hopefully.'
                 }]}
             />
-        </Card>
-        <Card title="Button" element="a" href="/button">
+        </CardWrapper>
+        <CardWrapper title="Button" href="/button">
             <Button>Primary</Button>
             <Button theme="secondary">Secondary</Button>
-        </Card>
+        </CardWrapper>
+        <CardWrapper title="Card" href="/card">
+            <p>Paragraph inside a card</p>  
+        </CardWrapper>
     </div>
 </Layout>
 

src/scss/global.scss

@@ -1 +1,2 @@
+@import './global/elements.scss';
 @import './global/utility.scss';

src/scss/global/elements.scss

@@ -0,0 +1,11 @@
+@import '../config';
+
+@mixin Elements() {
+    code {
+        display: inline-block;
+        padding: 2px 10px;
+        border-radius: 5px;
+        border: 1px solid #252525;
+        font-size: 14px;
+    }
+}

src/scss/setup.scss

@@ -2,7 +2,8 @@
 
 $config: (
     includeResets: true,
-    includeHelperClasses: true
+    includeHelperClasses: true,
+    includeElementStyles: true
 );
 
 @function config($key) {
@@ -19,4 +20,8 @@ $config: (
     @if (config('includeHelperClasses')) {
         @include Utility();
     }
+
+    @if (config('includeElementStyles')) {
+        @include Elements();
+    }
 }

src/static/CardWrapper.astro

@@ -0,0 +1,12 @@
+---
+import Card from '@components/Card/Card.astro'
+
+const {
+    title,
+    href
+} = Astro.props
+---
+
+<Card title={title} element="a" href={href} compact={true}>
+    <slot />
+</Card>

src/static/ComponentWrapper.astro

@@ -11,7 +11,6 @@ const {
     title={title || type}
     className={type && type.slice(0, 1).toLocaleLowerCase()}
     titleTag="strong"
-    compact={false}
 >
     <slot />
 </Card>