@gobolt/genesis 0.0.7 → 0.0.9

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import { STATE, SIZE } from '../../constants';
+
+export interface ToastProps {
+    state: keyof typeof STATE;
+    message: string;
+    action?: {
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        label: string;
+    };
+    close?: () => void;
+    size?: keyof typeof SIZE;
+}
+declare const Toast: ({ state, message, action, close, size, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export default Toast;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,19 @@
+import "react/jsx-runtime";
+import "../../constants/index.js";
+import "../Badge/styles.js";
+import "../Breadcrumb/styles.js";
+import "../../providers/ThemeProvider.js";
+import { T as g } from "../../Typography-aGoDUl4R.js";
+import "../Button/styles.js";
+import "../Checkbox/styles.js";
+import "../ErrorBoundaryFallback/styles.js";
+import "../Input/styles.js";
+import "../Message/styles.js";
+import "../Notification/styles.js";
+import "react";
+import "../Select/styles.js";
+import "./styles.js";
+import "../../CloseOutlined-ClXDNn82.js";
+export {
+  g as default
+};

package/dist/components/Toast/__stories__/Toast.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Toast } from '../Toast';
+
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Default: Story;
+export declare const ShowToast: Story;
+export declare const SuccessMessage: Story;
+export declare const ErrorMessage: Story;
+export declare const InfoMessage: Story;
+export declare const WarningMessage: Story;
+export declare const GenericMessage: Story;
+export declare const LongWarningMessage: Story;
+export declare const NoAction: Story;
+export declare const NoActionAndNoClose: Story;

package/dist/components/Toast/__tests__/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/__tests__/Toast.test.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { v as m, a as n } from "../../../setup-BvfREoHl.js";
+import { T as a } from "../../../Typography-aGoDUl4R.js";
+describe("<Toast />", () => {
+  let e;
+  beforeEach(() => {
+    e = {
+      message: "Test message",
+      state: "info",
+      close: m.fn()
+    };
+  });
+  const s = () => n(/* @__PURE__ */ r(a, { ...e }));
+  it("should render message correctly", () => {
+    const { getByText: o } = s(), t = o("Test message");
+    expect(t).toBeInTheDocument();
+  });
+});

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Toast';
+export type { ToastProps } from './Toast';

package/dist/components/Toast/index.js

@@ -0,0 +1,4 @@
+import { T as f } from "../../Typography-aGoDUl4R.js";
+export {
+  f as default
+};

package/dist/components/Toast/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const ToastRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    state: string;
+    size: string;
+}>> & string;
+export declare const ToastActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ToastCloseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ToastContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    state: string;
+    size: string;
+}>> & string;

package/dist/components/Toast/styles.js

@@ -0,0 +1,54 @@
+import { d as e } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { SIZE as r } from "../../constants/index.js";
+const d = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: t }) => t.sizing.Size4}px;
+  padding: ${({ theme: t }) => t.sizing.Size3}px;
+  background-color: ${({ theme: t, state: o }) => t.colors.surface.default};
+  border-left: ${({ theme: t, state: o }) => `2px solid ${t.colors.status[o].default}`};
+  pointer-events: none;
+  cursor: default;
+  border-radius: ${({ theme: t }) => t.borderRadius.BorderRadiusXs}px;
+  height: 56px;
+  width: ${({ theme: t, state: o, size: i }) => i === "standard" ? "340px" : "240px"};
+  background-color: ${({ theme: t, state: o }) => t.colors.surface.default};
+  box-shadow: 0px 4px 16px 0px #00000026;
+`, s = e.button`
+  border: ${({ theme: t }) => `1px solid ${t.colors.interactive.utility.border}`};
+  background: none;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${({ theme: t }) => t.colors.interactive.utility.onsurface};
+  border-radius: ${({ theme: t }) => t.borderRadius.BorderRadiusSm}px;
+  padding: ${({ theme: t }) => `${t.components.utilityButton.padding.verPadding}px ${t.components.utilityButton.padding.horPadding}px`};
+`, p = e.button`
+  text-decoration: underline;
+  border: none;
+  background: none;
+  cursor: pointer;
+  pointer-events: all;
+`, l = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: t }) => t.sizing.Size2}px;
+  flex: 1;
+  max-width: ${({ theme: t, state: o, size: i }) => i === "standard" ? "340px" : "240px"};
+
+  .ant-typography {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 16px;
+    font-family: ${({ theme: t }) => t.typography.fontFamily};
+    line-height: ${({ theme: t, size: o }) => o === r.standard ? t.typography.lineHeight : "16px"};
+  }
+`;
+export {
+  s as ToastActionButton,
+  p as ToastCloseButton,
+  l as ToastContent,
+  d as ToastRow
+};

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { TYPE, TYPOGRAPHY_VARIANT, STATE } from '../../constants';
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5;
+export interface TypographyProps {
+    children: React.ReactNode;
+    variant?: keyof typeof TYPOGRAPHY_VARIANT;
+    themeType?: keyof typeof TYPE;
+    state?: keyof typeof STATE;
+    color?: string;
+    level?: HeadingLevel;
+    isText?: boolean;
+}
+declare const Typography: ({ children, themeType, variant, state, color, isText, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/dist/components/Typography/Typography.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "./styles.js";
+import "../../providers/ThemeProvider.js";
+import { a } from "../../Typography-aGoDUl4R.js";
+import "../../constants/index.js";
+export {
+  a as default
+};

package/dist/components/{atoms/typography → Typography}/__stories__/Typography.stories.d.ts

@@ -10,3 +10,4 @@ export declare const Heading: Story;
 export declare const Body: Story;
 export declare const Message: Story;
 export declare const Digits: Story;
+export declare const DefaultParagraphVsText: Story;

package/dist/components/Typography/__tests__/Typography.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Typography/__tests__/Typography.test.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as a, i, c, a as p, g as m, s as n } from "../../../setup-BvfREoHl.js";
+import { a as y } from "../../../Typography-aGoDUl4R.js";
+import { TYPE as d, TYPOGRAPHY_VARIANT as f } from "../../../constants/index.js";
+a("Typography", () => {
+  i("renders type and variant correctly", () => {
+    const e = Object.keys(d), s = Object.keys(f);
+    e.forEach((t) => {
+      s.forEach((r) => {
+        c(), p(
+          /* @__PURE__ */ o(
+            y,
+            {
+              themeType: t,
+              variant: r,
+              children: "Logistics, Simplified."
+            }
+          )
+        ), m(n.getByText("Logistics, Simplified.")).toBeInTheDocument();
+      });
+    });
+  });
+});

package/dist/components/Typography/index.js

@@ -0,0 +1,4 @@
+import { a as f } from "../../Typography-aGoDUl4R.js";
+export {
+  f as default
+};

package/dist/components/Typography/styles.d.ts

@@ -0,0 +1,21 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+import { TYPE, STATE } from '../../constants';
+
+interface TypographyStyledProps {
+    theme: GenesisTheme;
+    $themeType?: keyof typeof TYPE;
+    variant?: string;
+    state?: keyof typeof STATE;
+    breakpoint?: string;
+    color?: string;
+}
+export declare const Headline: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Title').TitleProps & import('react').RefAttributes<HTMLElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Title').TitleProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const Paragraph: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Paragraph').ParagraphProps & import('react').RefAttributes<HTMLElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Paragraph').ParagraphProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Text').TextProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLSpanElement>;
+}, TypographyStyledProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd/es/typography/Text').TextProps & import('react').RefAttributes<HTMLSpanElement>>, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Typography/styles.js

@@ -0,0 +1,48 @@
+import { d as i } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { T as a } from "../../index-C0SmxWLS.js";
+const l = (t, e, n) => `
+        font-size: ${t[n][e].fontSize}px !important;
+        line-height: ${t[n][e].lineHeight};
+        letter-spacing: ${t[n][e].letterSpacing}px;
+        font-weight: ${t[n][e].fontWeight};
+      `, f = (t, e, n) => t || e[n].active.color, $ = (t) => `
+    ${t.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
+  `, g = ({ colors: t, typography: e }, n, o, s, r, c) => `
+    &.ant-typography {
+      font-family: ${$(o)};
+      color: ${f(c, t, n)} !important;
+      ${l(e, o, r)}
+    } 
+`, u = i(a.Title)`
+  ${({ theme: t, $themeType: e, variant: n, state: o, breakpoint: s, color: r }) => g(
+  t,
+  e,
+  n,
+  o,
+  s,
+  r
+)}
+`, h = i(a.Paragraph)`
+  ${({ theme: t, $themeType: e, variant: n, state: o, breakpoint: s, color: r }) => g(
+  t,
+  e,
+  n,
+  o,
+  s,
+  r
+)}
+`, T = i(a.Text)`
+  ${({ theme: t, $themeType: e, variant: n, state: o, breakpoint: s, color: r }) => g(
+  t,
+  e,
+  n,
+  o,
+  s,
+  r
+)}
+`;
+export {
+  u as Headline,
+  h as Paragraph,
+  T as Text
+};

package/dist/components/index.d.ts

@@ -1,14 +1,26 @@
-export { default as Button } from './atoms/button';
-export type { ButtonProps } from './atoms/button';
-export { default as Input } from './atoms/input';
-export type { InputProps } from './atoms/input';
-export { default as Select } from './atoms/select';
-export type { SelectProps } from './atoms/select';
-export { default as Checkbox } from './atoms/checkbox';
-export type { CheckboxProps } from './atoms/checkbox';
-export { default as Typography } from './atoms/typography';
-export type { TypographyProps } from './atoms/typography';
-export { default as Form } from './molecules/form';
-export type { FormProps } from './molecules/form';
-export { default as ErrorBoundaryFallback } from './molecules/error-boundary-fallback';
-export type { ErrorBoundaryFallbackProps } from './molecules/error-boundary-fallback';
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+export { default as Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb';
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { default as ErrorBoundaryFallback } from './ErrorBoundaryFallback';
+export type { ErrorBoundaryFallbackProps } from './ErrorBoundaryFallback';
+export { default as Form } from './Form';
+export type { FormProps } from './Form';
+export { default as Input } from './Input';
+export type { InputProps } from './Input';
+export { default as Message } from './Message';
+export type { MessageProps } from './Message';
+export { default as Notification } from './Notification';
+export type { NotificationProps } from './Notification';
+export { default as RadioGroup } from './Radio';
+export type { RadioGroupProps } from './Radio';
+export { default as Select } from './Select';
+export type { SelectProps } from './Select';
+export { default as Toast } from './Toast';
+export type { ToastProps } from './Toast';
+export { default as Typography } from './Typography';
+export type { TypographyProps } from './Typography';

package/dist/components/index.js

@@ -1,16 +1,26 @@
-import { default as a } from "./atoms/button/Button.js";
-import { default as e } from "./atoms/input/Input.js";
-import { default as p } from "./atoms/select/Select.js";
-import { default as u } from "./atoms/checkbox/Checkbox.js";
-import { default as x } from "./atoms/typography/Typography.js";
-import { F as s } from "../Form-Cylpi4M4.js";
-import { default as n } from "./molecules/error-boundary-fallback/ErrorBoundaryFallback.js";
+import { default as r } from "./Badge/Badge.js";
+import { default as t } from "./Breadcrumb/Breadcrumb.js";
+import { default as s } from "./Button/Button.js";
+import { default as u } from "./Checkbox/Checkbox.js";
+import { default as l } from "./ErrorBoundaryFallback/ErrorBoundaryFallback.js";
+import { F as x, T as c, a as i } from "../Typography-aGoDUl4R.js";
+import { default as B } from "./Input/Input.js";
+import { default as g } from "./Message/Message.js";
+import { default as F } from "./Notification/Notification.js";
+import { default as h } from "./Radio/RadioGroup.js";
+import { default as C } from "./Select/Select.js";
 export {
-  a as Button,
+  r as Badge,
+  t as Breadcrumb,
+  s as Button,
   u as Checkbox,
-  n as ErrorBoundaryFallback,
-  s as Form,
-  e as Input,
-  p as Select,
-  x as Typography
+  l as ErrorBoundaryFallback,
+  x as Form,
+  B as Input,
+  g as Message,
+  F as Notification,
+  h as RadioGroup,
+  C as Select,
+  c as Toast,
+  i as Typography
 };

package/dist/constants/index.d.ts

@@ -14,6 +14,14 @@ export declare const STATE: {
     pressed: string;
     focussed: string;
     disabled: string;
+    error: string;
+    success: string;
+    warning: string;
+    progress: string;
+    info: string;
+    filled: string;
+    generic: string;
+    removed: string;
 };
 export declare const TYPOGRAPHY_VARIANT: {
     display1: string;
@@ -49,3 +57,99 @@ export declare const BUTTON_VARIANT: {
     secondary: string;
     tertiary: string;
 };
+export declare const SIZE: {
+    small: string;
+    medium: string;
+    large: string;
+    standard: string;
+};
+export declare const BADGE: {
+    appointment: string;
+    asn: string;
+    inventory: string;
+    parcel: string;
+    product: string;
+    route: string;
+    shipment: string;
+    shoppingCart: string;
+    system: string;
+};
+declare const _default: {
+    TYPE: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    BREAKPOINTS: {
+        wide: string;
+        medium: string;
+        narrow: string;
+    };
+    STATE: {
+        active: string;
+        hover: string;
+        pressed: string;
+        focussed: string;
+        disabled: string;
+        error: string;
+        success: string;
+        warning: string;
+        progress: string;
+        info: string;
+        filled: string;
+        generic: string;
+        removed: string;
+    };
+    TYPOGRAPHY_VARIANT: {
+        display1: string;
+        display2: string;
+        display3: string;
+        heading1: string;
+        heading2: string;
+        heading3: string;
+        subHeading1: string;
+        subHeading2: string;
+        subHeading3: string;
+        body1: string;
+        body2: string;
+        body3: string;
+        body4: string;
+        body5: string;
+        message: string;
+        overline1: string;
+        overline2: string;
+        overline3: string;
+        label1: string;
+        label2: string;
+        label3: string;
+        link1: string;
+        link2: string;
+        link3: string;
+        digits1: string;
+        digits2: string;
+        digits3: string;
+    };
+    BUTTON_VARIANT: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    SIZE: {
+        small: string;
+        medium: string;
+        large: string;
+        standard: string;
+    };
+    BADGE: {
+        appointment: string;
+        asn: string;
+        inventory: string;
+        parcel: string;
+        product: string;
+        route: string;
+        shipment: string;
+        shoppingCart: string;
+        system: string;
+    };
+};
+export default _default;

package/dist/constants/index.js

@@ -6,13 +6,21 @@ const e = {
   wide: "wide",
   medium: "medium",
   narrow: "narrow"
-}, d = {
+}, s = {
   active: "active",
   hover: "hover",
   pressed: "pressed",
   focussed: "focus",
-  disabled: "disabled"
-}, a = {
+  disabled: "disabled",
+  error: "error",
+  success: "success",
+  warning: "warning",
+  progress: "progress",
+  info: "info",
+  filled: "filled",
+  generic: "generic",
+  removed: "removed"
+}, r = {
   display1: "display1",
   display2: "display2",
   display3: "display3",
@@ -40,15 +48,41 @@ const e = {
   digits1: "digits1",
   digits2: "digits2",
   digits3: "digits3"
-}, s = {
+}, a = {
   primary: "primary",
   secondary: "secondary",
   tertiary: "tertiary"
+}, d = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  standard: "standard"
+}, n = {
+  appointment: "appointment",
+  asn: "asn",
+  inventory: "inventory",
+  parcel: "parcel",
+  product: "product",
+  route: "route",
+  shipment: "shipment",
+  shoppingCart: "shopping cart",
+  system: "system"
+}, o = {
+  TYPE: e,
+  BREAKPOINTS: i,
+  STATE: s,
+  TYPOGRAPHY_VARIANT: r,
+  BUTTON_VARIANT: a,
+  SIZE: d,
+  BADGE: n
 };
 export {
+  n as BADGE,
   i as BREAKPOINTS,
-  s as BUTTON_VARIANT,
-  d as STATE,
+  a as BUTTON_VARIANT,
+  d as SIZE,
+  s as STATE,
   e as TYPE,
-  a as TYPOGRAPHY_VARIANT
+  r as TYPOGRAPHY_VARIANT,
+  o as default
 };