feat(community-pagination): including tests and additional files

telus · Apr 17, 2019 · 5d3c382 · 5d3c382
1 parent 9ffeae9
commit 5d3c382
Show file tree

Hide file tree

Showing 5 changed files with 230 additions and 1 deletion.
diff --git a/packages/Pagination/Pagination.scss b/packages/Pagination/Pagination.scss
@@ -1,3 +1,59 @@
 .container {
   opacity: 1;
 }
+
+.controls {
+  clear: both;
+  display: flex;
+  margin-top: 20px;
+}
+
+.next, .previous {
+  color: #4B286D;
+  padding: 0 8px;
+  font-size: 16px;
+  button {
+    color: #4B286D;
+    background: none;
+    border: none;
+  }
+}
+
+.pagination {
+  display: flex;
+  li {
+    color: #4B286D;
+    background-color: #F2EFF4;
+    width: 24px;
+    height: 24px;
+    list-style: none;
+    margin-right: 4px;
+    text-align: center;
+    line-height: 24px;
+    button {
+      background: none;
+      border: none;
+      color: #4B286D;
+      cursor: pointer;
+    }
+    &:hover {
+      border: 1px solid #4B286D;
+      line-height: 22px;
+    }
+  }
+  li.ellipsis {
+    background-color: inherit;
+    line-height: 15px;
+    &:hover {
+      border: none;
+    }
+  }
+  li.current {
+    color: #ffffff;
+    button {
+      color: #ffffff;
+      cursor: default;
+    }
+    background-color: #4B286D;
+  }
+}
diff --git a/packages/Pagination/Panel/Panel.jsx b/packages/Pagination/Panel/Panel.jsx
@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unused-prop-types */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * Page-able content panels for use with `Pagination`
+ *
+ * _This component can only be accessed as a name-spaced component: `Pagination.Panel` ._
+ */
+const Panel = ({ children }) => <div>{children}</div>
+
+Panel.propTypes = {
+  /**
+   * The content. Can be text, any HTML element, or any component.
+   */
+  children: PropTypes.node.isRequired,
+}
+
+export default Panel
diff --git a/packages/Pagination/Panels.jsx b/packages/Pagination/Panels.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '@tds/shared-safe-rest'
+
+// import styles from './ExpandCollapse.modules.scss'
+
+const generateKey = pre => {
+  return `${pre}_${new Date().getTime()}`
+}
+
+const Panels = ({ children, ...rest }) => (
+  <div {...safeRest(rest)}>
+    {React.Children.toArray(children)
+      .filter(Boolean)
+      .map((panel, i) => {
+        return (
+          <div key={generateKey(i)}>
+            <p>This is panels</p>
+            {panel}
+          </div>
+        )
+      })}
+  </div>
+)
+
+Panels.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default Panels
diff --git a/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap b/packages/Pagination/__tests__/__snapshots__/Pagination.spec.jsx.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination renders 1`] = `
+<Pagination>
+  <div
+    className="container"
+  >
+    <Panels
+      key="1_1552339326738"
+    >
+      <div>
+        <div
+          key="0_1552339326740"
+        >
+          <p>
+            This is panels
+          </p>
+          <Panel
+            key=".0"
+          >
+            <div>
+              Content 1
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </Panels>
+    <div
+      className="controls"
+    >
+      <ul
+        className="pagination"
+      >
+        <li
+          className="current"
+          key="0_1552339326738"
+        >
+          1
+        </li>
+        <li
+          className="regular"
+          key="1_1552339326738"
+        >
+          <button
+            onClick={[Function]}
+            value={2}
+          >
+            2
+          </button>
+        </li>
+        <li
+          className="regular"
+          key="2_1552339326739"
+        >
+          <button
+            onClick={[Function]}
+            value={3}
+          >
+            3
+          </button>
+        </li>
+        <li
+          className="regular"
+          key="3_1552339326739"
+        >
+          <button
+            onClick={[Function]}
+            value={4}
+          >
+            4
+          </button>
+        </li>
+        <li
+          className="ellipsis"
+          key="4_1552339326739"
+        >
+          ...
+        </li>
+        <li
+          className="regular"
+          key="8_1552339326739"
+        >
+          <button
+            onClick={[Function]}
+            value={9}
+          >
+            9
+          </button>
+        </li>
+      </ul>
+      <p
+        className="next"
+      >
+        <button
+          onClick={[Function]}
+          value={2}
+        >
+          Next 
+          <DecorativeIcon
+            size={24}
+            symbol="chevron"
+          >
+            <Icon
+              aria-hidden="true"
+              size={24}
+              symbol="chevron"
+            >
+              <i
+                aria-hidden="true"
+                className="TDS_Icon-modules__iconChevron___u32Fg TDS_Icon-modules__icon___13xYd TDS_Icon-modules__size24___37pQ7"
+              />
+            </Icon>
+          </DecorativeIcon>
+        </button>
+      </p>
+    </div>
+  </div>
+</Pagination>
+`;
diff --git a/packages/Pagination/package.json b/packages/Pagination/package.json
@@ -25,8 +25,11 @@
     "react-dom": ">=15"
   },
   "dependencies": {
-    "@tds/shared-safe-rest": "^1.0.0",
     "pagination": "^0.4.6",
     "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "@tds/shared-safe-rest": "^1.0.0",
+    "airbnb-prop-types": "^2.12.0"
   }
 }