@growth-angels/ds-core 1.0.0 → 1.1.0

package/dist/atoms/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react/jsx-runtime';
-import type { ButtonProps } from './Button.types';
-import React from 'react';
+import { JSX } from "react/jsx-runtime";
+import type { ButtonProps } from "./Button.types";
+import React from "react";
 export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => JSX.Element;

package/dist/atoms/Button/Button.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Icon } from '../Icon/Icon';
+import React from "react";
+import { Icon } from "../Icon/Icon";
 export const Button = (props) => {
     const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props;
     let customVariant = variant;
     if (icon) {
-        customVariant = 'icon';
+        customVariant = "icon";
     }
-    const classNames = ['ga-ds-btn', `ga-ds-btn--${customVariant}`, ...(extraClassNames || [])];
+    const classNames = ["ga-ds-button", `ga-ds-button--${customVariant}`, ...(extraClassNames || [])];
     const handleClick = (e) => {
         if (preventDefault)
             e.preventDefault();
         props?.onClick?.(e);
     };
-    return React.createElement(as || 'button', {
+    return React.createElement(as || "button", {
         ...restProps,
-        className: classNames.join(' '),
-        onClick: handleClick
-    }, _jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: 'sm' }), children && children] }));
+        className: classNames.join(" "),
+        onClick: handleClick,
+    }, _jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: "sm" }), children && children] }));
 };

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

@@ -1,5 +1,5 @@
 import { WordpressDefault } from "../../global.types";
-export type ContainerSize = 'large' | 'medium' | 'small';
+export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
 export type ContainerStretch = 'right' | 'left';
 export interface ContainerProps extends WordpressDefault {
     size: ContainerSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/atoms/Button/Button.scss

@@ -1,4 +1,5 @@
-.ga-ds-button > * {
+.ga-ds-button > *,
+button.ga-ds-button {
   padding: var(--ga-button-padding);
   border: none;
   font-size: var(--ga-font-sizes-base);
@@ -8,22 +9,26 @@
   cursor: pointer;
 }
 
-.ga-ds-button--primary > * {
+.ga-ds-button--primary > *,
+button.ga-ds-button--primary {
   background-color: var(--ga-button-background-primary, #eee);
   color: var(--ga-button-color-primary, #000);
 }
 
-.ga-ds-button--secondary > * {
+.ga-ds-button--secondary > *,
+button.ga-ds-button--secondary {
   background-color: var(--ga-button-background-secondary, #424242);
   color: var(--ga-button-color-secondary, #fff);
 }
 
-.ga-ds-button--link > * {
+.ga-ds-button--link > *,
+button.ga-ds-button--link {
   color: var(--ga-button-color-link, purple);
   padding: 0;
 }
 
-.ga-ds-button--icon > * {
+.ga-ds-button--icon > *,
+button.ga-ds-button--icon {
   --ga-button-padding: 0.8rem 1.2rem;
   justify-content: center;
   align-items: center;

package/src/atoms/Button/Button.tsx

@@ -1,25 +1,29 @@
-import { JSX } from 'react/jsx-runtime'
-import type { ButtonProps } from './Button.types'
-import React from 'react'
-import { Icon } from '../Icon/Icon'
+import { JSX } from "react/jsx-runtime"
+import type { ButtonProps } from "./Button.types"
+import React from "react"
+import { Icon } from "../Icon/Icon"
 
 export const Button = <T extends React.ElementType = "button">(props: ButtonProps<T>): JSX.Element => {
   const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props
   let customVariant = variant
-  if(icon) {
-    customVariant = 'icon'
+  if (icon) {
+    customVariant = "icon"
   }
-  const classNames = ['ga-ds-btn', `ga-ds-btn--${customVariant}`, ...(extraClassNames || [])]
-   const handleClick: React.MouseEventHandler<React.ElementRef<T>> = (e) => {
+  const classNames = ["ga-ds-button", `ga-ds-button--${customVariant}`, ...(extraClassNames || [])]
+  const handleClick: React.MouseEventHandler<React.ElementRef<T>> = (e) => {
     if (preventDefault) e.preventDefault()
     props?.onClick?.(e)
   }
-  return React.createElement(as || 'button', {
-    ...restProps,
-    className: classNames.join(' '),
-    onClick: handleClick
-  }, <>
-    {icon && <Icon name={icon} size='sm' />}
-    {children && children}
-  </>)
+  return React.createElement(
+    as || "button",
+    {
+      ...restProps,
+      className: classNames.join(" "),
+      onClick: handleClick,
+    },
+    <>
+      {icon && <Icon name={icon} size="sm" />}
+      {children && children}
+    </>
+  )
 }

package/src/layout/Container/Container.scss

@@ -5,8 +5,11 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  padding-left: var(--ga-container-safe-zone, 2.4rem);
-  padding-right: var(--ga-container-safe-zone, 2.4rem);
+
+  &:not(.ga-ds-container--full) {
+    padding-left: var(--ga-container-safe-zone, 2.4rem);
+    padding-right: var(--ga-container-safe-zone, 2.4rem);
+  }
 
   &.ga-ds-container-stretch--right {
     @include bp-up("lg") {

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

@@ -1,6 +1,6 @@
 import { WordpressDefault } from "../../global.types";
 
-export type ContainerSize = 'large' | 'medium' | 'small';
+export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
 export type ContainerStretch = 'right' | 'left'
 
 export interface ContainerProps extends WordpressDefault {