@growth-angels/ds-core 0.0.5 → 1.0.0

package/src/organisms/Card/CardDefault.stories.tsx

@@ -1,55 +1,58 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Card } from './Card'
-import { Button } from '../../atoms/atoms';
-import CardDefaultHeader600x400 from '../../../assets/600x400.svg'
-import CardDefaultHeader50x50 from '../../../assets/50x50.svg'
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Card } from "./Card"
+import { Button } from "../../atoms/atoms"
+import CardDefaultHeader600x400 from "../../../assets/600x400.svg"
+import CardDefaultHeader50x50 from "../../../assets/50x50.svg"
 
 const meta: Meta<typeof Card> = {
-  title: 'Organisms/Card/Default',
+  title: "Organisms/Card/Default",
   component: Card,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 }
 
 export default meta
 type Story = StoryObj<typeof Card>
 
-const CardChildren = ({ image } : {
-  image: string
-}) => {
+const CardChildren = ({ image }: { image: string }) => {
   const images = {
-    '400x600': CardDefaultHeader600x400,
-    '50x50': CardDefaultHeader50x50
+    "400x600": CardDefaultHeader600x400,
+    "50x50": CardDefaultHeader50x50,
   }
-  return <>
-    <div className="ga-ds-card__header">
-      <img src={images[image as keyof typeof images]} alt="Card header" />
-    </div>
-    <div className="ga-ds-card__title">
-      <h2>Card title</h2>
-    </div>
-    <div className='ga-ds-card__content'>
-      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla.
-      </p>
-    </div>
-    <div className="ga-ds-card__footer">
-      <Button as="a" variant='primary'>Read more</Button>
-    </div>
-  </>
+  return (
+    <>
+      <div className="ga-ds-card__header">
+        <img src={images[image as keyof typeof images]} alt="Card header" />
+      </div>
+      <div className="ga-ds-card__title">
+        <h2>Card title</h2>
+      </div>
+      <div className="ga-ds-card__content">
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam
+          quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla.
+        </p>
+      </div>
+      <div className="ga-ds-card__footer">
+        <Button as="a" variant="primary">
+          Read more
+        </Button>
+      </div>
+    </>
+  )
 }
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
-    type: 'default',
-    children: <CardChildren image={'400x600'} />
-  }
+    variant: "primary",
+    type: "image",
+    children: <CardChildren image={"400x600"} />,
+  },
 }
 
 export const Secondary: Story = {
   args: {
-    variant: 'secondary',
-    type: 'default',
-    children: <CardChildren image={'400x600'} />
-  }
-}
+    variant: "secondary",
+    type: "image",
+    children: <CardChildren image={"400x600"} />,
+  },
+}

package/src/organisms/Carousel/Carousel.scss

@@ -36,6 +36,9 @@
     @include bp-up(md) {
       --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-lg);
     }
+    @include bp-up(lg) {
+      --ga-ds-slides-per-view: var(--ga-ds-slides-per-view-xl);
+    }
   }
 
   &__slide {

package/src/organisms/Carousel/Carousel.tsx

@@ -84,8 +84,14 @@ export const Carousel = (props: CarouselProps) => {
     setActiveSlideIndex(nextIndex)
   }
 
+  const classes = ["ga-ds-carousel"]
+
+  if (props.extraClassNames) {
+    classes.push(...props.extraClassNames)
+  }
+
   return (
-    <div className="ga-ds-carousel" style={style}>
+    <div className={classes.join(" ")} style={style}>
       {navigation?.positionY === "top" && hasNavigation && (
         <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
       )}

package/src/organisms/Carousel/Carousel.types.ts

@@ -1,3 +1,5 @@
+import { WordpressDefault } from "../../global.types"
+
 export type Attributes = {
   context?: 'wp-editor'
   slidesPerView?: {
@@ -15,6 +17,6 @@ export type Attributes = {
     positionY: 'bottom' | 'top';
   }
 }
-export interface CarouselProps extends Attributes {
+export interface CarouselProps extends Attributes, WordpressDefault {
   children: React.ReactNode | React.ReactNode[]
 }

package/src/organisms/SpoilerList/SpoilerList.scss

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

package/src/organisms/SpoilerList/SpoilerList.tsx

@@ -0,0 +1,19 @@
+import { SpoilerProvider } from "../../context/SpoilerContext"
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+import { SpoilerListProps } from "./SpoilerList.types"
+
+export const SpoilerList = ({ children, extraClassNames }: SpoilerListProps) => {
+  const { Children, cloneElement } = useReactAdapter()
+
+  const classes = ["ga-ds-spoiler-list"]
+  if (extraClassNames) {
+    classes.push(...extraClassNames)
+  }
+  return (
+    <div className={classes.join(" ")}>
+      <SpoilerProvider>
+        {Children.toArray(children).map((child, index) => cloneElement(child as React.ReactElement, { index }))}
+      </SpoilerProvider>
+    </div>
+  )
+}

package/src/organisms/SpoilerList/SpoilerList.types.ts

@@ -0,0 +1,5 @@
+import { WordpressDefault } from "../../global.types";
+
+export interface SpoilerListProps extends WordpressDefault {
+  children?: React.ReactNode
+}

package/src/organisms/organisms.scss

@@ -1,2 +1,3 @@
-@use './Card/Card.scss';
-@use './Carousel/Carousel.scss';
+@use "./Card/Card.scss";
+@use "./Carousel/Carousel.scss";
+@use "./SpoilerList/SpoilerList.scss";

package/src/organisms/organisms.ts

@@ -1,2 +1,4 @@
 export * from './Card/Card'
-export * from './Carousel/Carousel'
+export * from './Card/Card.types'
+export * from './Carousel/Carousel'
+export * from './SpoilerList/SpoilerList'

package/src/scss.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/styles.ts

@@ -0,0 +1 @@
+import './index.scss'

package/src/utils/_spacings.scss

@@ -0,0 +1,17 @@
+$spacingsMap: ("xsmall", "small", "medium", "large", "xlarge");
+
+@each $value in $spacingsMap {
+  .ga-ds-util-padding--#{$value} {
+    padding-top: var(--ga-spacings-padding-#{$value});
+    padding-bottom: var(--ga-spacings-padding-#{$value});
+  }
+}
+
+$marginsMap: ("small", "medium", "large");
+
+@each $value in $marginsMap {
+  .ga-ds-util-margin--#{$value} {
+    margin-top: var(--ga-spacings-margin-#{$value});
+    margin-bottom: var(--ga-spacings-margin-#{$value});
+  }
+}

package/src/utils/utils.scss

@@ -0,0 +1 @@
+@use "spacings";

package/dist/utils.js

@@ -1 +0,0 @@
-"use strict";