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

package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -0,0 +1,544 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
+<nav
+  aria-label="Pagination"
+  className="css-1xdhyk6"
+  id="firstPage"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="firstPage-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="css-1eo4rk2"
+        href="page=1"
+        id="firstPage-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 2"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="firstPage-2"
+        rel={null}
+        target={null}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 3"
+        className="css-1xdhyk6"
+        href="page=3"
+        id="firstPage-3"
+        rel={null}
+        target={null}
+      >
+        3
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="firstPage-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 5"
+        className="css-1xdhyk6"
+        href="page=5"
+        id="firstPage-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="firstPage-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="firstPage-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
+<nav
+  aria-label="Pagination"
+  className="css-1xdhyk6"
+  id="lastPage"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="lastPage-list"
+  >
+    <li>
+      <a
+        aria-label="Previous page"
+        className="css-1xdhyk6"
+        href="page=9"
+        id="lastPage-Previous"
+        rel={null}
+        target={null}
+      >
+        Previous
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 1"
+        className="css-1xdhyk6"
+        href="page=1"
+        id="lastPage-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 6"
+        className="css-1xdhyk6"
+        href="page=6"
+        id="lastPage-6"
+        rel={null}
+        target={null}
+      >
+        6
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 7"
+        className="css-1xdhyk6"
+        href="page=7"
+        id="lastPage-7"
+        rel={null}
+        target={null}
+      >
+        7
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 8"
+        className="css-1xdhyk6"
+        href="page=8"
+        id="lastPage-8"
+        rel={null}
+        target={null}
+      >
+        8
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 9"
+        className="css-1xdhyk6"
+        href="page=9"
+        id="lastPage-9"
+        rel={null}
+        target={null}
+      >
+        9
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 10"
+        className="css-1eo4rk2"
+        href="page=10"
+        id="lastPage-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
+<nav
+  aria-label="Pagination"
+  className="css-1xdhyk6"
+  id="middlePage"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="middlePage-list"
+  >
+    <li>
+      <a
+        aria-label="Previous page"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="middlePage-Previous"
+        rel={null}
+        target={null}
+      >
+        Previous
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 1"
+        className="css-1xdhyk6"
+        href="page=1"
+        id="middlePage-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="middlePage-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 5"
+        className="css-1eo4rk2"
+        href="page=5"
+        id="middlePage-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 6"
+        className="css-1xdhyk6"
+        href="page=6"
+        id="middlePage-6"
+        rel={null}
+        target={null}
+      >
+        6
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="middlePage-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=6"
+        id="middlePage-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 4`] = `
+<nav
+  aria-label="Pagination"
+  className="css-kle7zy"
+  id="chakra"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="chakra-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="css-1eo4rk2"
+        href="page=1"
+        id="chakra-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 2"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="chakra-2"
+        rel={null}
+        target={null}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 3"
+        className="css-1xdhyk6"
+        href="page=3"
+        id="chakra-3"
+        rel={null}
+        target={null}
+      >
+        3
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="chakra-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 5"
+        className="css-1xdhyk6"
+        href="page=5"
+        id="chakra-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="chakra-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="chakra-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 5`] = `
+<nav
+  aria-label="Pagination"
+  className="css-1xdhyk6"
+  data-testid="props"
+  id="props"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="props-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="css-1eo4rk2"
+        href="page=1"
+        id="props-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 2"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="props-2"
+        rel={null}
+        target={null}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 3"
+        className="css-1xdhyk6"
+        href="page=3"
+        id="props-3"
+        rel={null}
+        target={null}
+      >
+        3
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="props-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 5"
+        className="css-1xdhyk6"
+        href="page=5"
+        id="props-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="props-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="props-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

package/src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface PlaceholderProps {
+  /** Modifier string for the classname. */
+  variant?: string;
+}
+
+/** Creates a gray box with an editable string for dropping in spaces
+ * within components or on templates where a component will be but
+ * that hasn't been created yet
+ */
+export default function Placeholder({
+  children,
+  variant,
+}: React.PropsWithChildren<PlaceholderProps>) {
+  return (
+    <div className={`placeholder placeholder--${variant}`}>{children}</div>
+  );
+}