Merge pull request #5 from AnaRangel/zyruks/feature/simple-cards

Zyruk: Simple cards

src/components/Button/Button.astro

@@ -1,7 +1,6 @@
 ---
 import { ButtonSize, ButtonVariant, HtmlType, type ColorVariants } from '@common';
-import Icon from '../Icon/Icon.astro';
-import { IconCatalog, IconSize, IconStyle } from '../Icon/Icons';
+import { Icon, IconCatalog, IconSize, IconStyle } from '@components';
 
 interface Props {
   /**

src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.astro';

src/components/Cards/CardWrapper/CardWrapper.astro

@@ -0,0 +1,66 @@
+---
+import { CardVariant } from '@components';
+
+interface Props {
+  /**
+   * The class name for the card wrapper.
+   */
+  className?: string;
+
+  /**
+   * The variant of the card.
+   */
+  variant?: CardVariant;
+
+  /**
+   * Determines whether the card has a border or not.
+   */
+  hasBorder?: boolean;
+
+  /**
+   * Determines whether the card should take up the full width or not.
+   */
+  isFullWidth?: boolean;
+}
+
+const { className, variant = CardVariant.primary, hasBorder } = Astro.props;
+
+function getBorderAttributes() {
+  return hasBorder ? { 'data-has-border': true } : {};
+}
+---
+
+<article {...getBorderAttributes()} class:list={[className]} data-variant={variant}>
+  <slot />
+</article>
+
+<style>
+  article {
+    border: 1px solid hsl(0deg 0% 16%);
+    border-radius: 1.5rem;
+  }
+
+  article:not([data-has-border]) {
+    border: none;
+  }
+
+  /***********************************************
+										VARIANTS
+  ***********************************************/
+
+  article[data-variant='primary'] {
+    background: hsl(240deg 2% 9%);
+  }
+
+  article[data-variant='secondary'] {
+    background: linear-gradient(
+      127.36deg,
+      rgb(46 88 255 / 30%) 5.98%,
+      rgb(148 82 255 / 30%) 90.92%
+    );
+  }
+
+  article[data-variant='tertiary'] {
+    background: linear-gradient(90deg, rgb(48 183 202 / 30%) 0%, rgb(33 212 155 / 30%) 100.01%);
+  }
+</style>

src/components/Cards/CardWrapper/index.ts

@@ -0,0 +1 @@
+export { default as CardWrapper } from './CardWrapper.astro';

src/components/Cards/Cards.type.ts

@@ -0,0 +1,5 @@
+export enum CardVariant {
+  primary = 'primary',
+  secondary = 'secondary',
+  tertiary = 'tertiary',
+}

src/components/Cards/SimpleCard/SimpleCard.astro

@@ -0,0 +1,122 @@
+---
+import { CardVariant, CardWrapper, Icon, IconCatalog, IconSize, IconStyle } from '@components';
+
+interface Props {
+  /**
+   * The variant of the card.
+   */
+  variant?: CardVariant;
+
+  /**
+   * Determines whether the card has a border or not.
+   */
+  hasBorder?: boolean;
+
+  /**
+   * Determines whether the card is inverted or not.
+   */
+  isInverted?: boolean;
+
+  /**
+   * The text content of the card.
+   */
+  cardText?: string;
+
+  /**
+   * The image URL for the card.
+   */
+  cardImage?: string;
+
+  /**
+   * The URL to navigate to when the card is clicked.
+   */
+  url?: string;
+}
+const {
+  variant = CardVariant.primary,
+  hasBorder = true,
+  isInverted = false,
+  cardText,
+  cardImage,
+  url,
+} = Astro.props;
+---
+
+<CardWrapper hasBorder={hasBorder} variant={variant}>
+  {
+    // TODO: Look for a better way to render this
+    !isInverted ? (
+      <div class="card-container">
+        <img class="logo-img" src={cardImage} alt="hey" slot="header" />
+        <p class="card-text" slot="content">
+          {cardText}
+        </p>
+      </div>
+    ) : (
+      <a href={url}>
+        <div class="card-container">
+          <div slot="header" class="card-header--with-icon">
+            <h3 class="card-text">{cardText}</h3>
+
+            <Icon
+              classes="card-icon"
+              icon={IconCatalog.arrowRight}
+              size={IconSize['7xl']}
+              iconStyle={IconStyle.bold}
+            />
+          </div>
+          <img src={cardImage} alt="hey" slot="content" />
+        </div>
+      </a>
+    )
+  }
+</CardWrapper>
+
+<style>
+  .card-container {
+    block-size: 26rem;
+    max-inline-size: 38rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    padding-block: 3rem 0;
+    padding-inline: 3rem;
+  }
+
+  .card-container:has(p) {
+    padding-block: 3rem;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 2.25rem;
+    line-height: 2.25rem;
+  }
+
+  p {
+    font-weight: 500;
+    font-size: 2.25rem;
+    font-family: Inter, sans-serif;
+    line-height: 3.375rem;
+  }
+
+  .logo-img {
+    inline-size: 100%;
+    max-inline-size: 14rem;
+    max-block-size: 5rem;
+  }
+
+  .card-header--with-icon {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-container:hover {
+    --icon-color: var(--color-primary-400);
+    --icon-transform: 0.4rem;
+  }
+</style>

src/components/Cards/index.ts

@@ -0,0 +1,3 @@
+export * from './Cards.type';
+export * from './CardWrapper';
+export { default as SimpleCard } from './SimpleCard/SimpleCard.astro';

src/components/Icon/Icon.astro

@@ -47,11 +47,6 @@ interface Props extends HTMLAttributes<'svg'> {
    */
   iconStyle?: IconStyle;
 
-  /**
-   * Whether to apply hover effects to the icon.
-   */
-  hover?: boolean;
-
   /**
    * The size of the icon. Required.
    */
@@ -60,11 +55,11 @@ interface Props extends HTMLAttributes<'svg'> {
 
 const {
   classes,
-  color,
-  hover,
+
   icon = IconCatalog.arrowDownTray,
   iconStyle = IconStyle.thin,
   size = IconSize.sm,
+  style,
 } = Astro.props;
 
 const strokeWidth = IconStyles[iconStyle];
@@ -73,19 +68,17 @@ const iconPath = iconStyle === IconStyle.solid ? iconPaths.solid : iconPaths.out
 const sizes = IconSizes[size];
 const fill = iconStyle === IconStyle.solid ? `currentColor` : 'none';
 const stroke = iconStyle === IconStyle.solid ? 'none' : `currentColor`;
-
-const fillHover = hover === true && iconStyle === IconStyle.solid ? `currentColor` : `none`;
-const strokeHover = hover === true && iconStyle === IconStyle.solid ? `none` : `currentColor`;
 ---
 
 <svg
-  class:list={[classes, { hover: hover }]}
+  class:list={[classes]}
   data-testid="Icon"
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
   stroke-width={strokeWidth}
   focusable="false"
   aria-hidden="true"
+  style={style}
 >
   <path
     fill-rule="evenodd"
@@ -100,17 +93,16 @@ const strokeHover = hover === true && iconStyle === IconStyle.solid ? `none` : `
     fill,
     stroke,
     sizes,
-    'fill-hover': fillHover,
-    'stroke-hover': strokeHover,
-    color,
   }}
 >
   svg {
-    color: var(--color, hsl(0deg 0% 100%));
+    color: var(--icon-color, currentColor);
+
+    transform: translateX(var(--icon-transform, 0));
 
-    transition-timing-function: var(--ease-in-3);
-    transition-duration: 200ms;
-    transition-property: fill stroke;
+    transition-timing-function: var(--ease-elastic-in-out-3);
+    transition-duration: 300ms;
+    transition-property: fill stroke transform;
     inline-size: var(--sizes);
     block-size: var(--sizes);
   }
@@ -119,9 +111,4 @@ const strokeHover = hover === true && iconStyle === IconStyle.solid ? `none` : `
     fill: var(--fill);
     stroke: var(--stroke);
   }
-
-  .hover:hover {
-    fill: var(--fill-hover);
-    stroke: var(--stroke-hover);
-  }
 </style>

src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.astro';
+export * from './Icons';

src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button/Button.astro';
+export * from './Cards';
+export * from './Icon';

src/pages/_Sections/Hero/Hero.astro

@@ -1,6 +1,5 @@
 ---
-import Button from '@components/Button/Button.astro';
-import { IconCatalog } from '@components/Icon/Icons';
+import { Button, IconCatalog } from '@components';
 ---
 
 <section>

src/pages/_Sections/Profession/Profession.astro

@@ -1,9 +1,8 @@
 ---
-import Button from '@components/Button/Button.astro';
-import { IconCatalog } from '@components/Icon/Icons';
+import { Button, IconCatalog } from '@components';
 ---
 
-<section>
+<article>
   <div class="figmaicaza | even-columns">
     <div class="DHardySD">
       <h3>Diseño, testeo, liderazgo,<span> programacion </span>, estrategia</h3>
@@ -15,9 +14,13 @@ import { IconCatalog } from '@components/Icon/Icons';
     </div>
     <img class="odraciRdev" src="/svg/interface-description.svg" alt="" />
   </div>
-</section>
+</article>
 
 <style>
+  article {
+    margin-block-end: 2rem;
+  }
+
   .figmaicaza {
     justify-content: space-between;
 
@@ -62,12 +65,16 @@ import { IconCatalog } from '@components/Icon/Icons';
   span {
     position: relative;
 
+    display: inline-block;
+
     color: hsl(0deg 0% 24%);
   }
 
   span::before {
     position: absolute;
 
+    z-index: 1;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -77,13 +84,16 @@ import { IconCatalog } from '@components/Icon/Icons';
 
     color: hsl(0deg 0% 100%);
     font-size: 0.7rem;
+    text-wrap: nowrap;
 
     background-color: hsl(248deg 98% 66%);
-    transform: translateX(220%) translateY(80%) rotate(-15deg);
+    transform: rotate(-15deg);
 
     content: 'En progreso';
 
-    inline-size: 4.4rem;
-    block-size: 1.4rem;
+    inset: 0;
+
+    max-inline-size: 5.5rem;
+    max-block-size: 1.5rem;
   }
 </style>

src/pages/_Sections/Ripley/Ripley.astro

@@ -1,6 +1,5 @@
 ---
-import Icon from '@components/Icon/Icon.astro';
-import { IconCatalog, IconSize } from '@components/Icon/Icons';
+import { Icon, IconCatalog, IconSize } from '@components';
 ---
 
 <section>