@nypl/design-system-react-components 0.23.4 → 0.25.1

package/dist/theme/components/select.d.ts

@@ -0,0 +1,58 @@
+declare const Select: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        select: {
+            borderRadius: string;
+            borderColor: string;
+            paddingTop: string;
+            paddingRight: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            _hover: {
+                borderColor: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _disabled: {
+                color: string;
+                bg: string;
+                opacity: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchbar: {
+            select: {
+                flex: string;
+                borderRight: string;
+                borderRightRadius: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Select;

package/dist/theme/components/statusBadge.d.ts

@@ -0,0 +1,25 @@
+declare const StatusBadge: {
+    baseStyle: {
+        borderRadius: string;
+        color: string;
+        display: string;
+        fontSize: string;
+        fontStyle: string;
+        py: string;
+        px: string;
+        textAlign: string;
+        width: string;
+    };
+    variants: {
+        low: {
+            bg: string;
+        };
+        medium: {
+            bg: string;
+        };
+        high: {
+            bg: string;
+        };
+    };
+};
+export default StatusBadge;

package/dist/theme/components/tabs.d.ts

@@ -0,0 +1,85 @@
+declare const CustomTabs: {
+    parts: string[];
+    baseStyle: {
+        tab: {
+            color: string;
+            paddingInlineStart: string;
+            paddingLeft: string;
+            background: string;
+            border: string;
+            borderBottom: string;
+            borderColor: string;
+            marginRight: {
+                base: string;
+                md: string;
+            };
+            paddingRight: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            whiteSpace: string;
+            _hover: {
+                bg: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            _selected: {
+                fontWeight: string;
+                bg: string;
+                border: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                paddingBottom: string;
+            };
+            _focus: {
+                boxShadow: string;
+            };
+        };
+        buttonArrows: {
+            border: string;
+            display: {
+                base: string;
+                md: string;
+            };
+            height: string;
+            width: string;
+        };
+        tablistWrapper: {
+            display: string;
+            alignItems: string;
+            borderBottom: {
+                base: string;
+                md: string;
+            };
+            margin: {
+                base: string;
+                md: string;
+            };
+            overflowX: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+            paddingRight: {
+                base: string;
+                md: string;
+            };
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+        };
+    };
+    defaultProps: {};
+};
+export default CustomTabs;

package/dist/theme/components/template.d.ts

@@ -0,0 +1,105 @@
+declare const _default: {
+    Template: {
+        baseStyle: {
+            boxSizing: string;
+            color: string;
+            overflowX: string;
+            "*": {
+                boxSizing: string;
+            };
+            "*::after": {
+                boxSizing: string;
+            };
+            "*::before": {
+                boxSizing: string;
+            };
+        };
+        sizes: {};
+        defaultProps: {};
+    };
+    TemplateHeader: {
+        baseStyle: {
+            marginBottom: number;
+        };
+    };
+    TemplateBreakout: {
+        baseStyle: {
+            width: string;
+            marginBottom: number;
+            marginLeft: string;
+            marginRight: string;
+        };
+    };
+    TemplateContent: {
+        baseStyle: {
+            display: string;
+            marginBottom: number;
+            marginY: number;
+            marginX: string;
+            maxWidth: string;
+            paddingTop: number;
+            paddingBottom: number;
+            paddingRight: number;
+            paddingLeft: number;
+            width: string;
+        };
+        variants: {
+            sidebar: {
+                display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    TemplateContentTop: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+    };
+    TemplateContentPrimary: {
+        baseStyle: {
+            flex: string;
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                display: string;
+                flexFlow: string;
+                order: string;
+                marginRight: {
+                    md: number;
+                };
+                minWidth: {
+                    md: number;
+                };
+            };
+        };
+    };
+    TemplateContentSidebar: {
+        baseStyle: {
+            flex: string;
+            order: {
+                md: string;
+            };
+            marginBottom: number;
+        };
+        variants: {
+            left: {
+                marginRight: {
+                    base: number;
+                    md: number;
+                };
+            };
+            right: {
+                marginLeft: {
+                    base: number;
+                    md: number;
+                };
+            };
+        };
+    };
+};
+export default _default;

package/dist/theme/components/text.d.ts

@@ -0,0 +1,20 @@
+declare const Text: {
+    baseStyle: (props: any) => {
+        fontStyle: string;
+        fontWeight: string;
+        marginBottom: string;
+    };
+    variants: {
+        default: {};
+        caption: {
+            fontSize: string;
+        };
+        tag: {
+            fontSize: string;
+        };
+        mini: {
+            fontSize: string;
+        };
+    };
+};
+export default Text;

package/dist/theme/components/textInput.d.ts

@@ -0,0 +1,105 @@
+declare const TextInput: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        input: {
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+        textarea: {
+            lineheight: string;
+            minHeight: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchBar: {
+            flex: string;
+            input: {
+                borderRightRadius: string;
+            };
+        };
+        searchBarSelect: {
+            flex: string;
+            input: {
+                borderRadius: string;
+            };
+        };
+    };
+};
+export default TextInput;

package/dist/theme/foundations/breakpoints.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+}>;
+/**
+ * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
+ *
+ * Chakra Value |     DS Variable      | EM/PX value
+ * --------------------------------------------------
+ *      sm      | --breakpoint-small   | 20em/320px
+ *      md      | --breakpoint-medium  | 38em/600px
+ *      lg      | --breakpoint-large   | 60em/960px
+ *      xl      | --breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A           | 96em/1536px
+ *
+ * @Note Chakra provides a 2xl option while the DS does not. We don't
+ * recommend using this value until further notice.
+ */
+export default _default;

package/dist/theme/foundations/colors.d.ts

@@ -0,0 +1,3 @@
+import { Colors } from "@chakra-ui/react";
+declare const colors: Colors;
+export default colors;

package/dist/theme/foundations/global.d.ts

@@ -0,0 +1,23 @@
+/**
+ * These rules affect all the global elements on the `body` element of the
+ * page when the `DSProvider` component is used. This means that even if the
+ * `nypl-ds` CSS class name is not used in a consuming application, these
+ * rules will still take effect.
+ */
+declare const global: {
+    body: {
+        bg: string;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    a: {
+        color: string;
+    };
+    svg: {
+        display: string;
+    };
+};
+export default global;

package/dist/theme/foundations/shadows.d.ts

@@ -0,0 +1,4 @@
+declare const shadows: {
+    outline: string;
+};
+export default shadows;

package/dist/theme/foundations/spacing.d.ts

@@ -0,0 +1,77 @@
+/**
+ * This is based on:
+ *   root size of 16px or 1rem
+ *   1 spacing unit is 4px or 0.25rem
+ *
+ * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
+ * That'll give you 10. Then use it in your component.
+ *
+ * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
+ *   --space-xxs = 4px or 0.25rem
+ *   --space-xs = 8px or 0.5rem
+ *   --space-s = 16px or 1rem
+ *   --space-m = 24px or 1.5rem
+ *   --space-l = 32px or 2rem
+ *   --space-xl = 48px or 3rem
+ *   --space-xxl = 64px or 4rem
+ *   --space-xxxl = 96px or 6rem
+ *
+ * @note Even though all the following values are available through Chakra,
+ * we recommend to only use the spacing values that map to the DS values
+ * declared above.
+ *
+ * Chakra Number Value | Chakra Name value | DS Variable
+ * ------------------- | ----------------- | -----------------
+ *        1            |         xxs       |   --space-xxs
+ *        2            |         xs        |   --space-xs
+ *        4            |         s         |   --space-s
+ *        6            |         m         |   --space-m
+ *        8            |         l         |   --space-l
+ *        12           |         xl        |   --space-xl
+ *        16           |         xxl       |   --space-xxl
+ *        24           |         xxxl      |   --space-xxxl
+ */
+export declare const spacing: {
+    px: string;
+    0: string;
+    0.5: string;
+    xxs: string;
+    1: string;
+    1.5: string;
+    xs: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    s: string;
+    4: string;
+    5: string;
+    m: string;
+    6: string;
+    7: string;
+    l: string;
+    8: string;
+    9: string;
+    10: string;
+    xl: string;
+    12: string;
+    14: string;
+    xxl: string;
+    16: string;
+    20: string;
+    xxxl: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+};

package/dist/theme/foundations/typography.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from "../types";
+declare type Typography = {
+    fonts: Dict;
+    fontSizes: Dict;
+    fontWeights: Dict;
+};
+declare const typography: Typography;
+export default typography;

package/dist/theme/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * See Chakra default theme for shape of theme object:
+ * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
+ *
+ * The following are using the default configuration from Chakra:
+ *   - z-indices
+ *   - radii
+ *   - blur
+ *   - shadows
+ *   - borders
+ *   - transitions
+ *
+ * Theme extensions exist for:
+ *   - breakpoints
+ *   - colors
+ *   - typography (font, font size, font weight)
+ *   - spacing
+ */
+declare const theme: Record<string, any>;
+export default theme;

package/dist/theme/provider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const DSProvider: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export default DSProvider;

package/dist/theme/types.d.ts

@@ -0,0 +1 @@
+export declare type Dict<T = any> = Record<string, T>;

package/dist/utils/utils.d.ts

@@ -4,3 +4,9 @@
  * `step` between values.
  */
 export declare const range: (start: number, stop: number, step?: number) => number[];
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
+export declare const getVariant: (variant: any, collection: any, fallback?: any) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.23.4",
+  "version": "0.25.1",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -38,9 +38,15 @@
     "stylelint": "stylelint \"**/*.scss\""
   },
   "dependencies": {
+    "@chakra-ui/react": "1.6.8",
+    "@chakra-ui/system": "1.7.3",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@mdx-js/react": "^1.6.22",
     "cpy-cli": "^3.1.1",
+    "framer-motion": "^4.1.17",
     "he": "^1.2.0",
+    "react-datepicker": "4.1.1",
     "react-uid": "^2.3.0",
     "system-font-css": "^2.0.2",
     "typescript": "^4.3.5",
@@ -82,7 +88,7 @@
     "@storybook/addon-jest": "^6.3.6",
     "@storybook/addon-knobs": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
-    "@storybook/addon-queryparams": "^6.2.9",
+    "@storybook/addon-queryparams": "6.2.9",
     "@storybook/addons": "^6.3.2",
     "@storybook/react": "^6.3.2",
     "@svgr/rollup": "^5.5.0",
@@ -117,6 +123,7 @@
     "node-sass": "^4.14.1",
     "node-sass-glob-importer": "^5.3.2",
     "normalize.css": "^8.0.1",
+    "postcss": "8.3.6",
     "prettier": "2.1.1",
     "pretty-quick": "^3.1.1",
     "react": "16.14.0",