@growth-angels/ds-core 0.0.4 → 1.0.0

package/src/layout/Container/Container.types.ts

@@ -1,9 +1,11 @@
 import { WordpressDefault } from "../../global.types";
 
 export type ContainerSize = 'large' | 'medium' | 'small';
-
+export type ContainerStretch = 'right' | 'left'
 
 export interface ContainerProps extends WordpressDefault {
   size: ContainerSize;
+  stretch?:ContainerStretch
   children: React.ReactNode | React.ReactNode[];
+  style?: React.CSSProperties;
 }

package/src/layout/FlexBlock/FlexBlock.scss

@@ -0,0 +1,4 @@
+.ga-ds-flex-block {
+  display: flex;
+  gap: var(--ga-flex-block-gap, 0);
+}

package/src/layout/FlexBlock/FlexBlock.tsx

@@ -0,0 +1,31 @@
+import { FlexBlockProps } from "./FlexBlock.types"
+
+export const FlexBlock = ({ children, gap, alignItems, justifyContent, flexDirection, extraClassNames }: FlexBlockProps) => {
+  const styles = []
+  if (gap) {
+    styles.push(["gap", `var(--ga-spacings-gap-${gap})`])
+  }
+
+  if (alignItems) {
+    styles.push(["alignItems", alignItems])
+  }
+
+  if (justifyContent) {
+    styles.push(["justifyContent", justifyContent])
+  }
+
+  if (flexDirection) {
+    styles.push(["flexDirection", flexDirection])
+  }
+
+  const classNames = ["ga-ds-flex-block"]
+  if (extraClassNames) {
+    classNames.push(...extraClassNames)
+  }
+
+  return (
+    <div className={classNames.join(" ")} style={Object.fromEntries(styles) as React.CSSProperties}>
+      {children}
+    </div>
+  )
+}

package/src/layout/FlexBlock/FlexBlock.types.ts

@@ -0,0 +1,12 @@
+import { WordpressDefault } from "../../global.types";
+
+export type FlexBlockAttrs = {
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  alignItems?: string;
+  justifyContent?: string;
+  flexDirection?: 'column';
+}
+
+export interface FlexBlockProps extends FlexBlockAttrs, WordpressDefault {
+  children: React.ReactNode;
+}

package/src/layout/FlexCol/FlexCol.scss

@@ -0,0 +1,5 @@
+.ga-ds-flex-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ga-flex-col-gap, 0);
+}

package/src/layout/FlexCol/FlexCol.tsx

@@ -0,0 +1,12 @@
+import { FlexColAttrs } from "./FlexCol.types"
+
+export const FlexCol = ({ children, gap }: { children: React.ReactNode; gap?: FlexColAttrs["gap"] }) => {
+  return (
+    <div
+      className="ga-ds-flex-col"
+      style={{ "--ga-flex-col-gap": `var(--ga-spacings-gap-${gap || "xs"})` } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/FlexCol/FlexCol.types.ts

@@ -0,0 +1,3 @@
+export type FlexColAttrs = {
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

package/src/layout/Grid/Grid.scss

@@ -1,7 +1,11 @@
-@use './GridItem/GridItem.scss';
+@use "@growth-angels/foundation/config" as *;
+@use "sass:map";
+@use "./GridItem/GridItem.scss";
 
 .ga-ds-grid {
-  display: grid;
-  gap: var(--ga-grid-gutter);
-  grid-template-columns: repeat(var(--ga-grid-columns), 1fr);
+  display: flex;
+  margin-left: calc(-1 * map.get($ga-grid, "gutter-width") / 2);
+  margin-right: calc(-1 * map.get($ga-grid, "gutter-width") / 2);
+  margin-bottom: calc(-1 * map.get($ga-grid, "gutter-width") / 2);
+  flex-wrap: wrap;
 }

package/src/layout/Grid/Grid.tsx

@@ -1,10 +1,14 @@
-import type { JSX } from 'react/jsx-runtime'
-import { GridProps } from './Grid.types'
+import { GridProps } from "./Grid.types"
 export const Grid = (props: GridProps): JSX.Element => {
-  const { children, alignItems, justifyContent, extraClassNames } = props
-  const classNames = ['ga-ds-grid', ...(extraClassNames || [])]
+  const { children, alignItems, justifyContent, extraClassNames, padding } = props
+  const classNames = ["ga-ds-grid", ...(padding ? [`ga-ds-util-padding--${padding}`] : []), ...(extraClassNames || [])]
 
-  return <div className={classNames.join(' ')} style={{ alignItems, justifyContent }}>
-    {children}
-  </div>
-}
+  return (
+    <div
+      className={classNames.join(" ")}
+      style={{ ...(alignItems !== "none" && { alignItems }), ...(justifyContent !== "none" && { justifyContent }) }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/Grid/Grid.types.ts

@@ -1,10 +1,10 @@
 import { WordpressDefault } from "../../global.types";
 
-export interface Attributes {
-  alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
-  justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'
+export interface GridAttributes {
+  alignItems: 'flex-start' | 'center' | 'flex-end' | 'none'
+  justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none'
 }
 
-export interface GridProps extends WordpressDefault, Attributes {
+export interface GridProps extends WordpressDefault, GridAttributes {
   children: React.ReactNode | React.ReactNode[];
 }

package/src/layout/Grid/GridItem/GridItem.scss

@@ -1,17 +1,30 @@
-@use "@ga/foundation/config" as *;
+@use "@growth-angels/foundation/config" as *;
+@use "sass:map";
 
 .ga-ds-grid-item {
-  grid-column: span var(--ga-ds-grid-item-size-xs);
+  --flex-size: var(--ga-ds-grid-item-size-xs);
+  flex: 0 0 calc(100% * var(--flex-size) / map.get($ga-grid, "columns"));
+  padding-left: calc(map.get($ga-grid, "gutter-width") / 2);
+  padding-right: calc(map.get($ga-grid, "gutter-width") / 2);
+  margin-bottom: map.get($ga-grid, "gutter-width");
 
   @include bp-up(sm) {
-    grid-column: span var(--ga-ds-grid-item-size-sm);
+    --flex-size: var(--ga-ds-grid-item-size-sm);
   }
 
   @include bp-up(md) {
-    grid-column: span var(--ga-ds-grid-item-size-md);
+    --flex-size: var(--ga-ds-grid-item-size-md);
   }
 
   @include bp-up(lg) {
-    grid-column: span var(--ga-ds-grid-item-size-lg);
+    --flex-size: var(--ga-ds-grid-item-size-lg);
+  }
+
+  > figure {
+    width: 100%;
+    img {
+      width: 100%;
+      height: auto;
+    }
   }
 }

package/src/layout/Grid/GridItem/GridItem.tsx

@@ -1,15 +1,30 @@
-import type { JSX } from 'react/jsx-runtime'
-import { GridItemProps } from './GridItem.types'
+import type { JSX } from "react/jsx-runtime"
+import { GridItemProps } from "./GridItem.types"
 export const GridItem = (props: GridItemProps): JSX.Element => {
-  const { children, sizes = {
-    xs: 12,
-    sm: 12,
-    md: 12,
-    lg: 12,
-  } } = props
+  const {
+    children,
+    sizes = {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12,
+    },
+    style: givenStyle,
+    extraClassNames,
+  } = props
 
-  const style = Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`]))
-  return <div className="ga-ds-grid-item" style={style}>
-    {children}
-  </div>
-}
+  const style = {
+    ...Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`])),
+    ...givenStyle,
+  }
+
+  const classNames = ["ga-ds-grid-item"]
+  if (extraClassNames) {
+    classNames.push(...extraClassNames)
+  }
+  return (
+    <div className={classNames.join(" ")} style={style}>
+      {children}
+    </div>
+  )
+}

package/src/layout/Grid/GridItem/GridItem.types.ts

@@ -2,7 +2,7 @@ import { WordpressDefault } from "../../../global.types";
 
 export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
 
-export interface Attributes {
+export interface GridItemAttributes {
   sizes: {
     xs: ColumnSize;
     sm: ColumnSize;
@@ -11,6 +11,7 @@ export interface Attributes {
   }
 }
 
-export interface GridItemProps extends WordpressDefault, Attributes {
+export interface GridItemProps extends WordpressDefault, GridItemAttributes {
   children: React.ReactNode | React.ReactNode[];
+  style?: React.CSSProperties;
 }

package/src/layout/layout.scss

@@ -1,3 +1,5 @@
-@use './Container/Container.scss';
-@use './Grid/Grid.scss';
-@use './Grid/GridItem/GridItem.scss';
+@use "./Container/Container.scss";
+@use "./Grid/Grid.scss";
+@use "./Grid/GridItem/GridItem.scss";
+@use "./FlexCol/FlexCol.scss";
+@use "./FlexBlock/FlexBlock.scss";

package/src/layout/layout.ts

@@ -1,3 +1,10 @@
 export * from './Container/Container'
+export * from './Container/Container.types'
 export * from './Grid/Grid'
-export * from './Grid/GridItem/GridItem'
+export * from './Grid/Grid.types'
+export * from './Grid/GridItem/GridItem'
+export * from './Grid/GridItem/GridItem.types'
+export * from './FlexCol/FlexCol'
+export * from './FlexCol/FlexCol.types'
+export * from './FlexBlock/FlexBlock'
+export * from './FlexBlock/FlexBlock.types'

package/src/molecules/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,5 @@
+.ga-ds-btn-group {
+  display: flex;
+  gap: 0.8rem;
+  justify-content: var(--alignment, flex-start);
+}

package/src/molecules/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,23 @@
+import { ButtonGroupProps } from "./ButtonGroup.types"
+
+export const ButtonGroup = ({ alignment, children, extraClassNames }: ButtonGroupProps) => {
+  const style = {} as React.CSSProperties & Record<string, string | number | undefined>
+  const cssAlignmentsMap = {
+    center: "center",
+    right: "flex-end",
+  }
+  if (alignment && cssAlignmentsMap[alignment]) {
+    style["--alignment"] = cssAlignmentsMap[alignment] as string
+  }
+
+  const classes = ["ga-ds-btn-group"]
+  if (extraClassNames) {
+    classes.push(...extraClassNames)
+  }
+
+  return (
+    <div className={classes.join(" ")} {...(Object.entries(style).length ? { style } : {})}>
+      {children}
+    </div>
+  )
+}

package/src/molecules/ButtonGroup/ButtonGroup.types.ts

@@ -0,0 +1,6 @@
+import { WordpressDefault } from "../../global.types";
+
+export interface ButtonGroupProps extends WordpressDefault {
+  alignment?: 'center' | 'right';
+  children?: React.ReactNode;
+}

package/src/molecules/Spoiler/Spoiler.scss

@@ -0,0 +1,47 @@
+.ga-ds-spoiler {
+  overflow: hidden;
+
+  &__summary {
+    cursor: pointer;
+    font-weight: var(--ga-ds-spoiler--summary-weight, 500);
+    padding: var(--ga-ds-spoiler--summary-padding, 0rem);
+    font-size: var(--ga-ds-spoiler--summary-font-size, 1.6rem);
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    outline: none;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.4s ease;
+    overflow: hidden;
+  }
+
+  &__indicator {
+    transition: transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1 / 1;
+    width: var(--indicator-size, 2.8rem);
+    height: var(--indicator-size, 2.8rem);
+    transform: rotate(-90deg);
+    transform-origin: center center;
+  }
+
+  &__body {
+    overflow: hidden;
+  }
+
+  &.is-open {
+    .ga-ds-spoiler__indicator {
+      transform: rotate(90deg);
+    }
+    .ga-ds-spoiler__content {
+      grid-template-rows: 1fr;
+    }
+  }
+}

package/src/molecules/Spoiler/Spoiler.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Spoiler } from "./Spoiler"
+import { SpoilerProvider } from "../../context/SpoilerContext"
+
+const meta: Meta<typeof Spoiler> = {
+  title: "Molecules/Spoiler",
+  component: Spoiler,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <SpoilerProvider>
+        <Story />
+      </SpoilerProvider>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Spoiler>
+
+export const Default: Story = {
+  args: {
+    summary: "Click to reveal the spoiler content",
+    children: (
+      <>
+        <p>This is the hidden spoiler content.</p>
+        <p>It can include any React nodes.</p>
+      </>
+    ),
+  },
+}
+
+export const OpenByDefault: Story = {
+  args: {
+    summary: "This spoiler is open by default",
+    children: (
+      <>
+        <p>The spoiler content is visible on load.</p>
+        <p>You can still toggle it closed.</p>
+      </>
+    ),
+    defaultOpen: true,
+  },
+}

package/src/molecules/Spoiler/Spoiler.tsx

@@ -0,0 +1,30 @@
+import { SpoilerProps } from "./Spoiler.types"
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+import { Icon } from "../../atoms/Icon/Icon"
+import { useSpoilerContext } from "../../context/SpoilerContext"
+
+export const Spoiler = (props: SpoilerProps) => {
+  const { summary, children, defaultOpen = false, index } = props
+  const { activeIndex, setActiveIndex } = useSpoilerContext()
+  const isOpen = activeIndex === index ? true : defaultOpen
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setActiveIndex(index)
+  }
+
+  return (
+    <div className={`ga-ds-spoiler ${isOpen ? "is-open" : ""}`}>
+      <div className="ga-ds-spoiler__separator"></div>
+      <div className="ga-ds-spoiler__summary" onClick={handleToggle} role="button" tabIndex={0}>
+        {summary}
+        <span className="ga-ds-spoiler__indicator">
+          <Icon name={"chevron-right"} size="sm" />
+        </span>
+      </div>
+      <div className="ga-ds-spoiler__content">
+        <div className="ga-ds-spoiler__body">{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/molecules/Spoiler/Spoiler.types.ts

@@ -0,0 +1,6 @@
+export interface SpoilerProps {
+  summary: string;
+  children: React.ReactNode | React.ReactNode[];
+  defaultOpen?: boolean;
+  index: number;
+}

package/src/molecules/molecules.scss

@@ -0,0 +1,2 @@
+@use "./ButtonGroup/ButtonGroup.scss";
+@use "./Spoiler/Spoiler.scss";

package/src/molecules/molecules.ts

@@ -0,0 +1,2 @@
+export * from './ButtonGroup/ButtonGroup';
+export * from './Spoiler/Spoiler';

package/src/organisms/Card/Card.scss

@@ -1,16 +1,21 @@
 .ga-ds-card {
   --card-spacing: var(--ga-card-spacing);
   width: 100%;
+  height: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--ga-card-gap);
-  border-radius: var(--ga-card-radius, 0);
-  overflow: hidden;
+  gap: var(--ga-card-gap-global);
 
   &__header {
     overflow: hidden;
   }
 
+  &__content {
+    gap: var(--ga-card-gap-content);
+    display: flex;
+    flex-direction: column;
+  }
+
   &__title,
   &__content,
   &__footer {
@@ -22,14 +27,19 @@
     padding-bottom: var(--card-spacing);
   }
 
-  &--primary {
-    background-color: var(--ga-card-background-primary);
-    color: var(--ga-card-background-primary-reverted);
-  }
+  &:not(.ga-ds-card--editorial) {
+    border-radius: var(--ga-card-radius, 0);
+    overflow: hidden;
+    &:not(:has(.ga-ds-card__footer)) {
+      padding-bottom: var(--card-spacing);
+    }
+    &:not(:has(.ga-ds-card__header)):not(.ga-ds-card--background-image) {
+      padding-top: var(--card-spacing);
+    }
 
-  &--secondary {
-    background-color: var(--ga-card-background-secondary);
-    color: var(--ga-card-background-secondary-reverted);
+    &.ga-ds-card--primary {
+      background-color: var(--ga-card-background-primary);
+    }
   }
 }
 
@@ -50,11 +60,41 @@
       object-position: center;
     }
   }
+  .ga-ds-card--primary {
+    background-color: var(--ga-card-background-primary);
+    color: var(--ga-card-background-primary-reverted);
+  }
+
+  .ga-ds-card--secondary {
+    background-color: var(--ga-card-background-secondary);
+    color: var(--ga-card-background-secondary-reverted);
+  }
 }
 
 .ga-ds-card--editorial {
+  --ga-card-spacing: 0;
+}
+
+.ga-ds-card--icon {
+  border-radius: var(--ga-card-radius, 0);
+  overflow: hidden;
   .ga-ds-card__header {
     padding-top: var(--card-spacing);
     padding-left: var(--card-spacing);
+    padding-right: var(--card-spacing);
+  }
+}
+
+.ga-ds-card--background-image {
+  position: relative;
+  padding-top: var(--card-background-image-height, 17.3rem);
+  z-index: 1;
+  > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: -1;
+    height: auto;
   }
 }

package/src/organisms/Card/Card.tsx

@@ -1,8 +1,19 @@
-import { JSX } from 'react/jsx-runtime'
-import type { CardProps } from './Card.types'
+import { JSX } from "react/jsx-runtime"
+import type { CardProps } from "./Card.types"
 
-export const Card = ({ children, variant = 'primary', extraClassNames, type = 'default' }: CardProps): JSX.Element => {
-  const classNames = ['ga-ds-card', `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])]
-
-  return <div className={classNames.join(' ')}>{children}</div>
+export const Card = ({
+  children,
+  variant = "primary",
+  extraClassNames,
+  type = "image",
+  style,
+  backgroundImage,
+}: CardProps): JSX.Element => {
+  const classNames = ["ga-ds-card", `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])]
+  return (
+    <div {...(style && { style })} className={classNames.join(" ")}>
+      {backgroundImage && <img src={backgroundImage.sizes?.full?.url} alt={backgroundImage?.alt} />}
+      {children}
+    </div>
+  )
 }

package/src/organisms/Card/Card.types.ts

@@ -1,8 +1,17 @@
-export type Variant = 'primary' | 'secondary'
-export type CardType = 'default' | 'editorial' | 'image' | 'icon'
+export type CardVariant = 'primary' | 'secondary'
+export type CardType = 'editorial' | 'image' | 'icon' | 'background-image'
 export interface CardProps {
   children: React.ReactNode | React.ReactNode[] | JSX.Element
-  variant: Variant
+  variant: CardVariant
   type?: CardType
+  backgroundImage?: {
+    alt?: string;
+    sizes: {
+      full: {
+        url: string
+      }
+    }
+  },
   extraClassNames?: string[]
+  style?: React.CSSProperties
 }