@akad/design-system 0.2.0-beta.8 → 1.0.0-alpha.1

package/react/{components → src/components}/organisms/NotificationList/NotificationList.d.ts

@@ -11,7 +11,7 @@ export interface DsNotificationListProps {
 declare const DsNotificationList: {
     ({ className, position, fluid, notifications, removeNotification, }: DsNotificationListProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        position: PropTypes.Requireable<import('./NotificationList.config').Position>;
+        position: PropTypes.Requireable<import('./NotificationList.config').NotificationListPosition>;
         fluid: PropTypes.Requireable<boolean>;
         notifications: PropTypes.Requireable<any[]>;
         removeNotification: PropTypes.Requireable<(...args: any[]) => any>;

package/react/{components → src/components}/organisms/NotificationList/NotificationList.stories.d.ts

@@ -22,6 +22,6 @@ export declare const Default: {
             progressBar?: undefined;
         })[];
         fluid: boolean;
-        position: import('./NotificationList.config').Position;
+        position: import('.').NotificationListPosition;
     };
 };

package/react/src/components/organisms/NotificationList/index.d.ts

@@ -0,0 +1,4 @@
+export * from './NotificationList';
+export * from './NotificationList.config';
+export { default as DsNotificationList } from './NotificationList';
+export { default as notificationListConfig } from './NotificationList.config';

package/react/src/components/templates/SplitLayout/SplitLayout.config.d.ts

@@ -0,0 +1,7 @@
+export interface SplitLayoutConfig {
+    name: string;
+    class: string;
+    props: Record<string, never>;
+}
+declare const splitLayoutConfig: SplitLayoutConfig;
+export default splitLayoutConfig;

package/react/src/components/templates/SplitLayout/SplitLayout.d.ts

@@ -0,0 +1,9 @@
+export interface DsSplitLayoutProps {
+    leftContent: React.ReactNode;
+    rightContent: React.ReactNode;
+    leftBackgroundColor?: string;
+    rightBackgroundColor?: string;
+    reverseOnMobile?: boolean;
+}
+declare const DsSplitLayout: React.FC<DsSplitLayoutProps>;
+export default DsSplitLayout;

package/react/src/components/templates/SplitLayout/index.d.ts

@@ -0,0 +1,5 @@
+import { default as DsSplitLayout, DsSplitLayoutProps } from './SplitLayout';
+
+export { DsSplitLayout };
+export type { DsSplitLayoutProps };
+export default DsSplitLayout;

package/react/{components → src/components}/templates/TwoColumns/TwoColumns.config.d.ts

@@ -3,5 +3,5 @@ export interface TwoColumnsConfig {
     class: string;
     props: Record<string, never>;
 }
-declare const TwoColumnsConfig: TwoColumnsConfig;
-export default TwoColumnsConfig;
+declare const twoColumnsConfig: TwoColumnsConfig;
+export default twoColumnsConfig;

package/react/src/components/templates/TwoColumns/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TwoColumns';
+export * from './TwoColumns.config';
+export { default as DsTwoColumns } from './TwoColumns';
+export { default as twoColumnsConfig } from './TwoColumns.config';

package/react/src/enum/colorProps.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Mapper for color props. Necessary to don't break the old behavior.
+ * It is used on DsCard and DsIcon components.
+ * @example
+ * ColorPropsMapper['primary-darker'] => 'primary--darker'
+ */
+export declare enum ColorPropsMapper {
+    'primary-darker' = "primary--darker",
+    'primary-dark' = "primary--dark",
+    'primary-light' = "primary--light",
+    'primary-lighter' = "primary--lighter",
+    'primary-lightest' = "primary--lightest",
+    'secondary-darker' = "secondary--darker",
+    'secondary-dark' = "secondary--dark",
+    'secondary-light' = "secondary--light",
+    'secondary-lighter' = "secondary--lighter",
+    'secondary-lightest' = "secondary--lightest",
+    'success-dark' = "success--dark",
+    'success-light' = "success--light",
+    'success-lighter' = "success--lighter",
+    'warning-dark' = "warning--dark",
+    'warning-light' = "warning--light",
+    'warning-lighter' = "warning--lighter",
+    'danger-dark' = "danger--dark",
+    'danger-light' = "danger--light",
+    'danger-lighter' = "danger--lighter",
+    'info-dark' = "info--dark",
+    'info-light' = "info--light",
+    'info-lighter' = "info--lighter"
+}

package/scss/core/base/index.scss

@@ -0,0 +1,3 @@
+// Base styles
+@import 'reset';
+@import 'typography';

package/scss/core/base/reset.scss

@@ -0,0 +1,27 @@
+// CSS Reset
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: var(--background__color, #fff);
+  color: var(--text__color, #212121);
+  font-family: var(
+    --font__family--base,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif
+  );
+  line-height: 1.5;
+}

package/scss/core/base/typography.scss

@@ -0,0 +1,18 @@
+// Base Typography (uses CSS vars for theme flexibility)
+// NOTE: h1-h6 styles are in Heading component for DS consistency
+// NOTE: p styles are in Paragraph component for DS consistency
+
+// Global link styles (only if NOT inside components)
+a {
+  color: var(--color__info);
+  text-decoration: none;
+
+  &:visited {
+    color: var(--color__info--dark);
+  }
+
+  &:hover {
+    color: var(--color__info--light);
+    text-decoration: underline;
+  }
+}