@nypl/design-system-react-components 0.25.12 → 0.25.13

package/src/theme/components/toggle.ts

@@ -1,4 +1,5 @@
 import { helperTextMargin } from "./global";
+import { cssVar } from "@chakra-ui/theme-tools";
 
 const baseStyle = {
   label: { alignItems: "start", display: "flex", width: "fit-content" },
@@ -7,16 +8,18 @@ const baseStyle = {
     marginLeft: "xxs",
   },
 };
+const $width = cssVar("switch-track-width");
+const $height = cssVar("switch-track-height");
 
 const Switch = {
-  baseStyle: ({ size }) => {
+  baseStyle: ({ size }: { size: string }) => {
     return {
       alignItems: "start",
       opacity: 0.4,
       track: {
         border: "1px solid",
         borderColor: "ui.gray.medium",
-        p: "4px",
+        p: "1px",
         _checked: {
           bg: "ui.link.primary",
           borderColor: "ui.link.primary",
@@ -46,7 +49,7 @@ const Switch = {
       label: {
         fontSize: "label.default",
         marginLeft: "xs",
-        marginTop: size === "lg" ? "6px" : null,
+        marginTop: size === "lg" ? "xxxs" : null,
         _disabled: { fontStyle: "italic" },
       },
       thumb: {
@@ -56,6 +59,26 @@ const Switch = {
       },
     };
   },
+  sizes: {
+    sm: {
+      container: {
+        // Chakra defaults for `sm`:
+        // width: 1.375rem
+        // height: 0.75rem
+        [$width.variable]: "2.25rem",
+        [$height.variable]: "1rem",
+      },
+    },
+    lg: {
+      container: {
+        // Chakra defaults for `lg`:
+        // width: 2.875rem
+        // height: 1.5rem
+        [$width.variable]: "3.25rem",
+        [$height.variable]: "1.5rem",
+      },
+    },
+  },
   defaultProps: {
     colorScheme: "white",
   },

package/src/utils/componentCategories.ts

@@ -1,10 +1,24 @@
 // NYPL Design System Component Categories
 
 const categories = {
+  accessibility: {
+    title: "Accessibility Guide",
+    components: ["Skip Navigation"],
+  },
   basicContent: {
     title: "Components/Basic Elements",
     components: ["Card", "Hero", "Promo", "Sponsor"],
   },
+  chakra: {
+    title: "Components/Chakra Exports/Layout",
+    components: [
+      "Box",
+      "Flex",
+      "Grid",
+      "Center, Circle, Square",
+      "Stack, HStack, VStack",
+    ],
+  },
   contentDisplay: {
     title: "Components/Content Display",
     components: [
@@ -21,6 +35,10 @@ const categories = {
     title: "Components/Deprecated",
     components: ["CardEdition", "Input"],
   },
+  devguide: {
+    title: "Development Guide",
+    components: ["Autosuggest"],
+  },
   feedback: {
     title: "Components/Feedback",
     components: [
@@ -55,6 +73,10 @@ const categories = {
       "Toggle",
     ],
   },
+  hooks: {
+    title: "Hooks",
+    components: ["useCarouselStyles", "useNYPLTheme", "useWindowSize"],
+  },
   layout: {
     title: "Components/Page Layout",
     components: [
@@ -89,26 +111,8 @@ const categories = {
     title: "Components/Navigation",
     components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
   },
-  chakra: {
-    title: "Chakra/Chakra COmponent/Layout",
-    components: [
-      "Box",
-      "Flex",
-      "Grid",
-      "Center, Circle, Square",
-      "Stack, HStack, VStack",
-    ],
-  },
-  typography: {
-    title: "Components/Typography & Styles",
-    components: ["Heading", "List", "Text"],
-  },
-  devguide: {
-    title: "Documentation/Development Guide",
-    components: ["Autosuggest"],
-  },
   styleguide: {
-    title: "Documentation/Style Guide",
+    title: "Style Guide",
     components: [
       "Bidirectionality",
       "Breakpoints",
@@ -122,6 +126,10 @@ const categories = {
       "Typography",
     ],
   },
+  typography: {
+    title: "Components/Typography & Styles",
+    components: ["Heading", "List", "Text"],
+  },
 };
 
 export const getCategory = (component) => {

package/dist/components/Card/CardTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum CardLayouts {
-    Row = "row",
-    Column = "column"
-}

package/dist/components/CheckboxGroup/CheckboxGroupLayoutTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum CheckboxGroupLayoutTypes {
-    Column = "column",
-    Row = "row"
-}

package/dist/components/RadioGroup/RadioGroupLayoutTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum RadioGroupLayoutTypes {
-    Column = "column",
-    Row = "row"
-}

package/src/components/CheckboxGroup/CheckboxGroupLayoutTypes.tsx

@@ -1,4 +0,0 @@
-export enum CheckboxGroupLayoutTypes {
-  Column = "column",
-  Row = "row",
-}

package/src/components/RadioGroup/RadioGroupLayoutTypes.tsx

@@ -1,4 +0,0 @@
-export enum RadioGroupLayoutTypes {
-  Column = "column",
-  Row = "row",
-}