@growth-angels/ds-core 1.5.4 → 1.6.1

package/dist/layout/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { size, children, style, padding, margin, stretch } = props;
+    const { size, children, style, padding, margin, stretch, id } = props;
     const classes = [
         "ga-ds-container",
         `ga-ds-container--${size}`,
@@ -9,5 +9,5 @@ export const Container = (props) => {
         ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
         ...(props.extraClassNames || []),
     ];
-    return (_jsx("div", { className: classes.join(" "), style: style, children: children }));
+    return (_jsx("div", { className: classes.join(" "), style: style, ...(id ? { id } : {}), children: children }));
 };

package/dist/layout/Container/Container.types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.5.4",
+  "version": "1.6.1",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -33,7 +33,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "1.0.0"
+    "@growth-angels/foundation": "1.1.1"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/atoms/Text/Text.scss

@@ -1,3 +1,6 @@
+@use "@growth-angels/foundation/config" as *;
+@use "sass:map";
+
 .ga-ds-text {
   font-size: var(--font-size, 1.6rem);
 }
@@ -19,15 +22,31 @@
   text-align: right;
 }
 
-$sizes: (88, 72, 64, 56, 48, 40, 32, 24, 20, 18, 16, 14, 12);
+$sizes: map.get($fonts, "sizes");
 
 @each $size in $sizes {
   .ga-ds-text--size-#{$size} {
-    font-size: calc(#{$size} / 10 * 1rem);
+    @if $size == 72 {
+      font-size: calc(11.2rem - clamp(4rem, 2.8732rem + 3.0047vw, calc(#{$size} / 10 * 1rem)));
+    }
+    @if $size == 56 {
+      font-size: calc(9.6rem - clamp(4rem, 3.4366rem + 1.5023vw, calc(#{$size} / 10 * 1rem)));
+    }
+    @if $size == 48 {
+      font-size: calc(8.4rem - clamp(3.6rem, 3.1775rem + 1.1268vw, calc(#{$size} / 10 * 1rem)));
+    }
+    @if $size == 40 {
+      font-size: calc(7.2rem - clamp(3.2rem, 2.9183rem + 0.7512vw, calc(#{$size} / 10 * 1rem)));
+    }
+    @if $size == 32 {
+      font-size: calc(6rem - clamp(2.8rem, 2.6592rem + 0.3756vw, calc(#{$size} / 10 * 1rem)));
+    } @else {
+      font-size: calc(#{$size} / 10 * 1rem);
+    }
   }
 }
 
-$weights: (400, 500, 600, 700);
+$weights: map.get($fonts, "weights");
 @each $weight in $weights {
   .ga-ds-text--weight-#{$weight} {
     font-weight: #{$weight};

package/src/layout/Container/Container.tsx

@@ -1,7 +1,7 @@
 import type { ContainerProps } from "./Container.types"
 
 export const Container = (props: ContainerProps) => {
-  const { size, children, style, padding, margin, stretch } = props
+  const { size, children, style, padding, margin, stretch, id } = props
   const classes = [
     "ga-ds-container",
     `ga-ds-container--${size}`,
@@ -10,8 +10,9 @@ export const Container = (props: ContainerProps) => {
     ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
     ...(props.extraClassNames || []),
   ]
+
   return (
-    <div className={classes.join(" ")} style={style}>
+    <div className={classes.join(" ")} style={style} {...(id ? { id } : {})}>
       {children}
     </div>
   )

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

@@ -3,7 +3,7 @@ import { WordpressDefault } from "../../global.types";
 export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
 export type ContainerStretch = 'right' | 'left'
 
-export interface ContainerProps extends WordpressDefault {
+export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<HTMLDivElement> {
   size: ContainerSize;
   stretch?:ContainerStretch
   children: React.ReactNode | React.ReactNode[];