@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/utils/componentCategories.ts

@@ -0,0 +1,152 @@
+// NYPL Reservoir 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: [
+      "AccessibilityDisplayHelper",
+      "AddressDisplayHelper",
+      "DateDisplayHelper",
+      "HelperErrorText",
+      "HoursDisplayHelper",
+      "OverflowMenu",
+      "StatusBadge",
+    ],
+  },
+  deprecated: {
+    title: "Components/Deprecated",
+    components: ["CardEdition", "Input"],
+  },
+  devguide: {
+    title: "Development Guide",
+    components: ["Autosuggest"],
+  },
+  feedback: {
+    title: "Components/Feedback",
+    components: [
+      "Alert",
+      "InlineLoading",
+      "Notification",
+      "ProgressIndicator",
+      "SkeletonLoader",
+    ],
+  },
+  forms: {
+    title: "Components/Form Elements",
+    components: [
+      "Button",
+      "ButtonGroup",
+      "Checkbox",
+      "CheckboxGroup",
+      "DatePicker",
+      "DateRangePicker",
+      "Dropdown",
+      "Fieldset",
+      "FileUploader",
+      "Form",
+      "Label",
+      "NumberInput",
+      "Radio",
+      "RadioGroup",
+      "SearchBar",
+      "Select",
+      "Slider",
+      "Textarea",
+      "TextInput",
+      "Toggle",
+    ],
+  },
+  hooks: {
+    title: "Hooks",
+    components: ["useCarouselStyles", "useNYPLTheme", "useWindowSize"],
+  },
+  layout: {
+    title: "Components/Page Layout",
+    components: [
+      "StructuredContent",
+      "ContentSwitcher",
+      "Footer",
+      "Header",
+      "HorizontalRule",
+      "Section",
+      "SimpleGrid",
+      "Table",
+      "Template",
+    ],
+  },
+  overlayContentSwitcher: {
+    title: "Components/Overlays & Switchers",
+    components: ["Accordion", "Modal", "Tabs", "Tooltip"],
+  },
+  media: {
+    title: "Components/Media & Icons",
+    components: [
+      "AudioPlayer",
+      "Icon",
+      "Image",
+      "Logo",
+      "Slideshow",
+      "VideoPlayer",
+    ],
+  },
+  navigation: {
+    title: "Components/Navigation",
+    components: [
+      "Breadcrumbs",
+      "Link",
+      "Menu",
+      "Pagination",
+      "SkipNavigation",
+      "Subnavigation",
+    ],
+  },
+  styleguide: {
+    title: "Style Guide",
+    components: [
+      "Bidirectionality",
+      "Breakpoints",
+      "Buttons",
+      "Colors",
+      "Design Tokens",
+      "Forms",
+      "Iconography",
+      "Spacing",
+      "Template Bidirectionality",
+      "Typography",
+    ],
+  },
+  typography: {
+    title: "Components/Typography & Styles",
+    components: ["Heading", "List", "Text"],
+  },
+};
+
+export const getCategory = (component: string) => {
+  let catPath = component;
+  Object.keys(categories).forEach((key: string) => {
+    const t = categories[key as keyof typeof categories].title;
+    const c = categories[key as keyof typeof categories].components;
+    if (c.includes(component)) {
+      catPath = `${t}/${component}`;
+    }
+  });
+  return catPath;
+};

package/src/utils/interfaces.ts

@@ -0,0 +1,5 @@
+export interface AriaAttributes {
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+}

package/src/utils/utils.ts

@@ -0,0 +1,84 @@
+import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { AriaAttributes } from "./interfaces";
+
+// Utility functions to use throughout the codebase
+
+/**
+ * range
+ * Get an array of values from `start` to `stop` - 1 with an optional
+ * `step` between values.
+ */
+export const range = (start: number, stop: number, step = 1): number[] => {
+  if (!start) {
+    return [];
+  }
+
+  return Array(Math.ceil((stop - start) / step))
+    .fill(start)
+    .map((x, y) => x + y * step);
+};
+
+/**
+ * Given a pagination's pageCount, this will return (1) a page number,
+ * derived from the current URL, and (2) a function that, when passed to
+ * Pagination component, makes the URL change and refreshes the page.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export const getStorybookHrefProps = (pageCount: number) => {
+  // This uses the `addon-queryparams` Storybook addon.
+  const urlParams = new URLSearchParams(document.location.search);
+  const pageParam = urlParams.get("page");
+
+  const getPageNumber = (page: number, pageCount: number) => {
+    return page > 0 && page <= pageCount ? page : 1;
+  };
+  const computedCurrentPage =
+    pageParam &&
+    Number(pageParam) &&
+    getPageNumber(Number(pageParam), pageCount);
+  const location = window.location;
+  // Passing this function into `Pagination` makes the URL to change
+  // and refreshes the page.
+  const getPageHref = (selectedPage: number) => {
+    return `${location.href}&page=${selectedPage}`;
+  };
+
+  return { computedCurrentPage, getPageHref };
+};
+
+interface GetAriaAttrsProps {
+  footnote: HelperErrorTextType;
+  id: string;
+  labelText: HelperErrorTextType;
+  name: string;
+  showLabel: boolean;
+}
+/**
+ * Get aria-* attributes for input components. This sets the `aria-label` and
+ * `aria-describedby` attributes, based on the label and footnote values.
+ */
+export const getAriaAttrs = ({
+  footnote,
+  id,
+  labelText,
+  name,
+  showLabel,
+}: GetAriaAttrsProps): AriaAttributes => {
+  let ariaAttributes: AriaAttributes = {};
+
+  if (!showLabel) {
+    if (typeof labelText !== "string") {
+      console.warn(
+        `NYPL Reservoir ${name}: \`labelText\` must be a string when \`showLabel\` is false.`
+      );
+    }
+    ariaAttributes["aria-label"] =
+      labelText && footnote
+        ? `${labelText} - ${footnote}`
+        : (labelText as string);
+  } else if (footnote) {
+    ariaAttributes["aria-describedby"] = `${id}-helperText`;
+  }
+
+  return ariaAttributes;
+};

package/lib/components/Button/Button.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-export interface ButtonProps {
-    /** The action to perform on the <button>'s onClick function */
-    callback: (event: React.MouseEvent) => void;
-    content?: string | JSX.Element;
-    className?: string;
-    disabled?: boolean;
-    type?: string;
-    mouseDown?: boolean;
-}
-export default class Button extends React.Component<ButtonProps, {}> {
-    static defaultProps: {
-        mouseDown: boolean;
-    };
-    constructor(props: ButtonProps);
-    render(): JSX.Element;
-}

package/lib/components/Button/Button.js

@@ -1,42 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-class Button extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const _a = this.props, { content, className, type, disabled, mouseDown, callback } = _a, rest = __rest(_a, ["content", "className", "type", "disabled", "mouseDown", "callback"]);
-        let btnContent = content || "Submit";
-        let btnClassName = `button${className ? ` ${className}` : ""}`;
-        let btnProps = {
-            type: (type || "submit"),
-            className: btnClassName,
-            disabled: (disabled || null),
-        };
-        let btnCallback = mouseDown ? { onMouseDown: callback } : { onClick: callback };
-        return React.createElement("button", Object.assign(Object.assign(Object.assign({}, btnProps), btnCallback), rest), btnContent);
-    }
-}
-exports.default = Button;
-Button.defaultProps = {
-    mouseDown: false
-};

package/lib/index.d.ts

@@ -1 +0,0 @@
-export * from "./components/Button/Button";

package/lib/index.js

@@ -1,6 +0,0 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./components/Button/Button"));

package/lib/stories/0-Welcome.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("@storybook/react");
-react_1.storiesOf("Home", module)
-    .add("introduction", () => React.createElement("div", null,
-    React.createElement("h2", null, "NYPL Design System React Components"),
-    React.createElement("p", null, "Welcome to the documentation for the NYPL Design System React Components")), {
-    info: {
-        disable: true
-    }
-});

package/lib/stories/1-Button.stories.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const filled: () => JSX.Element;
-export declare const outline: () => JSX.Element;

package/lib/stories/1-Button.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Button_1 = __importDefault(require("../components/Button/Button"));
-const addon_actions_1 = require("@storybook/addon-actions");
-exports.default = {
-    title: "Button",
-};
-exports.filled = () => React.createElement(Button_1.default, { className: "button", callback: addon_actions_1.action("clicked") });
-exports.outline = () => (React.createElement(Button_1.default, { className: "button button--outline", callback: addon_actions_1.action("clicked") }));