@sk-web-gui/core 0.1.36 → 0.1.38

package/dist/types/toasted-notes/src/Message.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import POSITIONS from './Positions';
+interface MessageCallback {
+    id: string;
+    onClose: () => void;
+}
+export declare type MessageType = 'default' | 'success' | 'error';
+export declare type PositionsType = keyof typeof POSITIONS;
+export declare type MessageProp = React.ReactNode | ((callback: MessageCallback) => React.ReactNode) | string;
+export interface MessageOptions {
+    id: string;
+    duration: number | null;
+    type: MessageType;
+    onRequestRemove: () => void;
+    onRequestClose: () => void;
+    showing: boolean;
+    position: PositionsType;
+}
+interface Props extends MessageOptions {
+    message: MessageProp;
+    zIndex?: number;
+    requestClose?: boolean;
+    position: PositionsType;
+}
+export declare const Message: ({ id, message, position, onRequestRemove, requestClose, duration }: Props) => JSX.Element;
+export {};

package/dist/types/toasted-notes/src/Positions.d.ts

@@ -0,0 +1,9 @@
+declare const POSITIONS: {
+    top: string;
+    'top-left': string;
+    'top-right': string;
+    bottom: string;
+    'bottom-left': string;
+    'bottom-right': string;
+};
+export default POSITIONS;

package/dist/types/toasted-notes/src/Toast.d.ts

@@ -0,0 +1,13 @@
+import { MessageOptionalOptions } from './ToastManager';
+import { MessageProp, PositionsType } from './Message';
+declare class Toaster {
+    createNotification?: Function;
+    removeAll?: Function;
+    closeToast?: Function;
+    constructor();
+    closeAll: () => void;
+    bindNotify: (fn: Function, removeAll: Function, closeToast: Function) => void;
+    notify: (message: MessageProp, options?: MessageOptionalOptions) => any;
+    close: (id: number, position: PositionsType) => void;
+}
+export default Toaster;

package/dist/types/toasted-notes/src/ToastManager.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { PositionsType, MessageType, MessageOptions, MessageProp } from './Message';
+interface Props {
+    notify: (fn: Function, closeAll: Function, close: Function) => void;
+}
+export interface MessageOptionalOptions {
+    type?: MessageType;
+    duration?: number | null;
+    position?: PositionsType;
+}
+interface ToastArgs extends MessageOptions {
+    message: MessageProp;
+}
+declare type State = {
+    top: Array<ToastArgs>;
+    'top-left': Array<ToastArgs>;
+    'top-right': Array<ToastArgs>;
+    'bottom-left': Array<ToastArgs>;
+    bottom: Array<ToastArgs>;
+    'bottom-right': Array<ToastArgs>;
+};
+export default class ToastManager extends React.Component<Props, State> {
+    static idCounter: number;
+    state: State;
+    constructor(props: Props);
+    notify: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        position: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    };
+    closeAll: () => void;
+    createToastState: (message: MessageProp, options: MessageOptionalOptions) => {
+        id: number;
+        message: MessageProp;
+        position: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        showing: boolean;
+        duration: number | null;
+        onRequestRemove: () => void;
+        type: MessageType | undefined;
+    };
+    closeToast: (id: string, position: PositionsType) => void;
+    removeToast: (id: string, position: PositionsType) => void;
+    getStyle: (position: PositionsType) => React.CSSProperties;
+    render(): JSX.Element[];
+}
+export {};

package/dist/types/toasted-notes/src/index.d.ts

@@ -0,0 +1,4 @@
+import Toaster from './Toast';
+declare const toaster: Toaster;
+export { default as Position } from './Positions';
+export { toaster };

package/dist/types/toasted-notes/src/useTimeout.d.ts

@@ -0,0 +1,3 @@
+declare type Callback = () => void;
+export declare function useTimeout(callback: Callback, delay: number | null): void;
+export {};

package/dist/types/user-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/user-menu/src/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { UserMenuProps } from './user-menu';
+declare type UserMenu = React.ForwardRefExoticComponent<UserMenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const UserMenu: UserMenu;
+export type { UserMenuProps };
+export { UserMenu };

package/dist/types/user-menu/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const useUserMenuClass: (args?: any) => string;

package/dist/types/user-menu/src/user-menu.d.ts

@@ -0,0 +1,21 @@
+import { DefaultProps } from '@sk-web-gui/theme';
+import * as React from 'react';
+export interface MenuItemGroup {
+    label: string;
+    showLabel: boolean;
+    showOnDesktop: boolean;
+    showOnMobile: boolean;
+    elements: {
+        label: string;
+        element: (active: boolean) => JSX.Element;
+    }[];
+}
+interface IUserMenuProps extends DefaultProps {
+    menuTitle: string;
+    menuSubTitle: string;
+}
+export interface UserMenuProps extends React.HTMLAttributes<HTMLDivElement>, IUserMenuProps {
+    menuGroups: MenuItemGroup[];
+}
+export declare const UserMenu: React.ForwardRefExoticComponent<UserMenuProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/user-menu/stories/announcement.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Announcement: ({ color, size, ...rest }: {
+    [x: string]: any;
+    color?: string | undefined;
+    size?: number | undefined;
+}) => JSX.Element;

package/dist/types/user-menu/stories/user-menu.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/utils/src/assertion.d.ts

@@ -0,0 +1,4 @@
+import { Dict } from './types';
+export declare function isArray<T>(value: any): value is Array<T>;
+export declare function isObject(value: any): value is Dict;
+export declare const __DEV__: boolean;

package/dist/types/utils/src/children.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/types/utils/src/color.d.ts

@@ -0,0 +1,9 @@
+import type { Color } from 'color-string';
+export declare function hsl2rgb(h: number, s: number, l: number): [number, number, number];
+export declare function hwb2rgb(h: number, w: number, b: number): [number, number, number];
+export declare function toRGBA(color: string): Color | undefined;
+export declare function toRGB(color: string): number[] | undefined;
+export declare function toColor(colorStr: string): {
+    color: string;
+    opacity: string;
+};

package/dist/types/utils/src/index.d.ts

@@ -0,0 +1,10 @@
+import cx from 'clsx';
+export * from './types';
+export * from './color';
+export * from './assertion';
+export * from './walk-object';
+export * from './object';
+export * from './children';
+export * from './refs';
+export * from './slug';
+export { cx };

package/dist/types/utils/src/object.d.ts

@@ -0,0 +1,6 @@
+import type { Dict } from './types';
+export declare function omit<T extends Dict, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
+export declare function pick<T extends Dict, K extends keyof T>(object: T, keys: K[]): { [P in K]: T[P]; };
+export declare function deepmerge<T1, T2>(target: Partial<T1>, source: Partial<T2>, options?: {
+    clone: boolean;
+}): Partial<T1>;

package/dist/types/utils/src/refs.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
+export declare function setRef<T = any>(ref: ReactRef<T> | undefined, value: T): void;
+export declare function useForkRef<T = any>(refA: ReactRef<T> | undefined, refB: ReactRef<T> | undefined): ((refValue: T) => void) | null;
+export {};

package/dist/types/utils/src/slug.d.ts

@@ -0,0 +1 @@
+export declare const toSlug: (str: string) => string;

package/dist/types/utils/src/types.d.ts

@@ -0,0 +1,13 @@
+export declare type Dict<T = any> = Record<string, T>;
+export declare type CSSMap = Dict<{
+    value: string;
+    var: string;
+    varRef: string;
+}>;
+export declare type WithCSSVar<T> = T & {
+    __cssVars: Dict;
+    __cssMap: CSSMap;
+};
+export declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};

package/dist/types/utils/src/walk-object.d.ts

@@ -0,0 +1,5 @@
+export declare type WalkObjectPredicate<Leaf = unknown> = (value: unknown, path: string[]) => Leaf;
+export declare type MappedLeavesObject<Obj, LeafType> = {
+    [Prop in keyof Obj]: Obj[Prop] extends Array<any> ? MappedLeavesObject<Obj[Prop][number], LeafType>[] : Obj[Prop] extends object ? MappedLeavesObject<Obj[Prop], LeafType> : LeafType;
+};
+export declare function walkObject<Target, LeafType>(target: Target, predicate: WalkObjectPredicate<LeafType>): MappedLeavesObject<Target, ReturnType<WalkObjectPredicate<LeafType>>>;

package/dist/types/visually-hidden/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/visually-hidden/src/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Welcome to @reach/visually-hidden!
+ *
+ * Provides text for screen readers that is visually hidden.
+ * It is the logical opposite of the `aria-hidden` attribute.
+ *
+ * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ * @see https://a11yproject.com/posts/how-to-hide-content/
+ * @see Docs     https://reach.tech/visually-hidden
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
+ */
+import * as React from 'react';
+/**
+ * VisuallyHidden
+ *
+ * Provides text for screen readers that is visually hidden.
+ * It is the logical opposite of the `aria-hidden` attribute.
+ */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>>;
+/**
+ * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props
+ */
+interface VisuallyHiddenProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children
+     */
+    children?: React.ReactNode;
+    as?: React.ElementType;
+}
+export type { VisuallyHiddenProps };
+export { VisuallyHidden };
+export default VisuallyHidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "80e01b53645bbd5e24bb9d61dae4f18b54920e6d"
+  "gitHead": "b01dc14993c6053602b39cc6d081e3670b0d5aad"
 }

package/src/components/dropdown-filter.js

@@ -0,0 +1,73 @@
+module.exports = DropdownFilter = () => ({
+    ".DropdownFilter": {
+        position: "relative",
+        height: 44,
+        border: "1px solid #939393",
+        maxWidth: 291,
+        display: "flex",
+        background: "#fff",
+        borderRadius: 2,
+        
+        ".dropdown-button": {
+            justifyContent: "space-between",
+            display: "flex",
+            flexGrow: 1,
+            alignItems: "center",
+            padding: "0 1rem",
+
+            ".arrow-icon": {
+                transform: "rotate(180deg)",
+
+                "&.open": {
+                    transform: "rotate(0)"
+                }
+            }
+        },
+
+        ".fitler-container": {
+            position: "absolute",
+            top: "100%",
+            left: "-1px",
+            index: 10,
+            width: "calc(100% + 2px)",
+            background: "#fff",
+            border: "1px solid #939393",
+            padding: "1rem",
+            borderRadius: 2,
+
+            ".filter-controls": {
+                display: "flex",
+                justifyContent: "flex-end",
+                padding: "0 1rem",
+                paddingBottom: 12,
+
+                "button": {
+                    marginLeft: "1rem",
+                    textDecoration: "underline"
+                }
+            },
+
+            ".FilterItem": {
+                height: 48,
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderBottom: "1px solid #939393",
+                padding: "0 1rem",
+                
+                "&.disabled": {
+                    color: "#939393"
+                },
+
+                "&:first-of-type": {
+                    borderTop: "1px solid #939393",
+                }, 
+
+                "&:last-child": {
+                    borderBottom: "none",
+                }
+            }
+        }
+    }
+});
+  

package/src/components/menu.js

@@ -0,0 +1,171 @@
+module.exports = Menu = () => ({
+    ".Menu": {
+        width: "440px",
+        border: "1px solid #939393",
+        borderRadius: "2px",
+        overflow: "hidden",
+
+        ".menu-header": {
+            padding: "3rem 1rem 1.8rem", 
+            backgroundColor: "#005595",
+            padding: "2rem 1rem",
+
+            "label": {
+                fontSize: "20px",
+                fontWeight: 700,
+                color: "#fff"
+            },
+
+            ".label-header": {
+                display: "flex",
+                alignItems: "center",
+
+
+                "span": {
+                    marginLeft: "auto"
+                }
+            },
+
+            ".select-header": {
+                paddingBottom: "6rem",
+
+                "label": {
+                    marginBottom: "10px",
+                    display: "block"
+                }
+            }
+        },
+
+        
+        ".MenuItem": {
+            borderTop: "1px solid #939393",
+            transition: "500ms ease",
+            
+            ".wrapper": {
+                minHeight: "64px",
+                display: "flex",
+                alignItems: "center",
+                
+                "a, button": {
+                    all: "unset",
+                    cursor: "pointer",
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    verticalAlign: "middle",
+                    alignItems: "center", 
+                    paddingRight: '15px'
+                },
+
+                "&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10": {
+                    minHeight: "56px",
+                },
+
+                "&.open": {
+                    boxShadow: "inset 6px 0 0 0 #005595",
+                },
+
+                "&.lvl-0": {
+                    backgroundColor: "#fff",
+                    "> a, > button": {
+                        paddingLeft: "1rem"
+                    }
+                },
+
+                "&.lvl-1": {
+                    backgroundColor: "#F9F9F9",
+                    "> a, > button": {
+                        paddingLeft: "2rem"
+                    }
+                },
+
+                "&.lvl-2": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "3rem"
+                    }
+                },
+
+                "&.lvl-3": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "4rem"
+                    }
+                },
+
+                "&.lvl-4": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "5rem"
+                    }
+                },
+
+                "&.lvl-5": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "6rem"
+                    }
+                },
+
+                "&.lvl-6": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "7rem"
+                    }
+                },
+
+                "&.lvl-7": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "8rem"
+                    }
+                },
+                
+                "&.lvl-8": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "9rem"
+                    }
+                },
+
+                "&.lvl-9": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "10rem"
+                    }
+                },
+
+                "&.lvl-10": {
+                    backgroundColor: "#ECECEC",
+                    "> a, > button": {
+                        paddingLeft: "11rem"
+                    }
+                },
+
+                "label": {
+                    
+                },
+                
+                ".expand": {
+                    width: "50px",
+                    height: "64px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    marginLeft: "auto",
+                    padding: 0,
+                    
+                    "span": {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderLeft: "1px solid",
+                        height: '24px',
+                        width: '45px'
+                    }
+                }
+            }
+        }
+    },
+});
+  

package/src/components/search-bar.js

@@ -0,0 +1,45 @@
+module.exports = SearchBar = () => ({
+    ".SearchBar": {
+        position: "relative",
+        border: "1px solid #939393",
+        borderRadius: 200,
+        overflow: "hidden",
+        height: 44,
+        
+        "input": {
+            border: "none",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            flexGrow: 1,
+            width: "100%",
+            height: "inherit",
+            fontFamily: "Arial",
+            fontStyle: "normal",
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: 20,
+            color: "#4B4B4B",
+            padding: "0px 44px 0px 16px"
+        },
+        
+        ".search-icon": {
+            border: "none",
+            display: "flex",
+            height: 42,
+            width: 44,
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
+            top: 0,
+            right: 0,
+
+            "svg.small": {
+                height: 13,
+                width: 13
+            }
+        }
+
+    }
+})
+  

package/src/components/tab-menu.js

@@ -0,0 +1,37 @@
+module.exports = TabMenu = () => ({
+    ".TabMenu": {
+        
+        ".tab-wrapper": {
+            display: "flex",
+            flexDirection: "row"
+        },
+
+        ".TabItem": {
+            all: 'unset',
+            height: 65,
+            display: "flex",
+            padding: "0 1rem",
+            marginRight: "5rem",
+            alignItems: "center",
+            position: "relative",
+
+            "&.active::after": {
+                content: '""',
+                display: "block",
+                position: "absolute",
+                width: "100%",
+                height: 6,
+                background: "#005595",
+                top: "100%",
+                left: 0,
+            }
+        },
+
+        ".underline": {
+            width: "100%",
+            height: 6,
+            background: "#F4F4F4"
+        }
+    },
+});
+  

package/src/index.js

@@ -30,13 +30,19 @@ const Modal = require('./components/modal');
 const CookieConsent = require('./components/cookie-consent');
 const Divider = require('./components/divider');
 
+const Menu = require('./components/menu');
+const TabMenu = require('./components/tab-menu');
 const UserMenu = require('./components/user-menu');
 
+const DropdownFilter = require('./components/dropdown-filter');
+
 const Tag = require('./components/tag');
 const Pagination = require('./components/pagination');
 const Footer = require('./components/footer');
 const Header = require('./components/header');
 
+const SearchBar = require('./components/search-bar');
+
 const components = [
   Alert,
   Breadcrumb,
@@ -63,7 +69,13 @@ const components = [
   Card,
   Divider,
 
+  Menu,
+  TabMenu,
   UserMenu,
+  
+  DropdownFilter,
+
+  SearchBar,
 
   Tag,
   Pagination,
@@ -122,10 +134,6 @@ module.exports = plugin.withOptions(
           '.text-content': {
             '@apply max-w-[80rem]': {},
 
-            '.ingress': {
-              '@apply text-xl leading-[1.5]': {},
-            },
-
             h1: {
               '@apply mb-md': {},