@nice-digital/nds-alphabet 0.2.0-alpha.0 → 0.3.0-alpha.0

package/README.md

@@ -0,0 +1,149 @@
+# `@nice-digital/nds-alphabet`
+
+> Alphabet component for the NICE Design System
+
+## Installation
+
+Install Node, and then:
+
+```sh
+npm i @nice-digital/nds-alphabet --save
+```
+
+## Usage
+
+### React
+
+Import the `Alphabet` and `Letter` components from the package and use within JSX:
+
+```jsx
+import React from "react";
+import { Alphabet, Letter } from "@nice-digital/nds-alphabet";
+
+const allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
+
+<Alphabet>
+	{allLetters.map(letter => (
+		<Letter key={letter} to={`#${letter}`} label={`Letter ${letter}`}>
+			{letter.toUpperCase()}
+		</Letter>
+	))}
+</Alphabet>
+
+```
+
+> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
+
+#### Props (Alphabet)
+
+##### chunky
+
+- Type `boolean` (default: false)
+
+Whether to render the alphabet in its chunky (i.e. large) variant. This will
+get passed to its children as a modifier.
+
+```js
+<Alphabet chunky>
+	{children}
+</Alphabet>
+```
+
+##### id 
+
+- Type `string` (default: "a-to-z")
+
+The id to give the generated `<ol>` element. Defaults to "a-to-z" if not specified
+
+```js
+<Alphabet id="test-id">
+	{children}
+</Alphabet>
+```
+
+##### children
+
+- Type: `React.ReactNode`
+
+As the Alphabet component renders an `ol` element, it must have at least one `<li>`
+child.
+
+```js
+<Alphabet>
+	<li>Item one</li>
+	<li>Item two</li>
+	<li>Item three</li>
+</Alphabet>
+```
+
+#### Props (Letter)
+
+##### to
+
+- Type: `string`
+
+If specified, the link destination. If not specified, a span is rendered instead.
+
+##### label
+
+- Type: `string`
+
+Creates an `aria-label` attribute on the generated element.
+
+##### elementType
+
+- Type: `Element` (default: `a`)
+
+The element type used to render the component; can be a React component.
+
+### SCSS
+
+If you're not using [React](#react), then import the SCSS directly into your application by:
+
+```scss
+@import "~@nice-digital/nds-alphabet/scss/alphabet";
+```
+
+### HTML
+
+If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:
+
+
+#### Standard variant
+```html
+<ol class="alphabet" id="a-to-z">
+  <li class="alphabet__letter"><a href="#a" aria-label="Letter a">A</a></li>
+  <li class="alphabet__letter"><a href="#b" aria-label="Letter b">B</a></li>
+  <li class="alphabet__letter"><a href="#c" aria-label="Letter c">C</a></li>
+    ...
+  <li class="alphabet__letter"><a href="#x" aria-label="Letter x">X</a></li>
+  <li class="alphabet__letter"><a href="#y" aria-label="Letter y">Y</a></li>
+  <li class="alphabet__letter"><a href="#z" aria-label="Letter z">Z</a></li>
+</ol>
+```
+
+#### Chunky variant
+```html
+<ol class="alphabet alphabet--chunky" id="a-to-z">
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#a" aria-label="Letter a">A</a></li>
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#b" aria-label="Letter b">B</a></li>
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#c" aria-label="Letter c">C</a></li>
+    ...
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#x" aria-label="Letter x">X</a></li>
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#y" aria-label="Letter y">Y</a></li>
+  <li class="alphabet__letter alphabet__letter--chunky"><a href="#z" aria-label="Letter z">Z</a></li>
+</ol>
+```
+
+#### No links
+```html
+<ol class="alphabet" id="a-to-z">
+  <li class="alphabet__letter"><span aria-label="Letter a">A</span></li>
+  <li class="alphabet__letter"><span aria-label="Letter b">B</span></li>
+  <li class="alphabet__letter"><span aria-label="Letter c">C</span></li>
+    ...
+  <li class="alphabet__letter"><span aria-label="Letter x">X</span></li>
+  <li class="alphabet__letter"><span aria-label="Letter y">Y</span></li>
+  <li class="alphabet__letter"><span aria-label="Letter z">Z</span></li>
+</ol>
+```

package/lib/Alphabet.js

@@ -18,7 +18,7 @@ require("../scss/alphabet.scss");
 var _excluded = ["children", "id", "chunky"],
     _excluded2 = ["children", "label", "to", "chunky", "elementType"];
 
-var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-alphabet\\src\\Alphabet.js",
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-alphabet\\src\\Alphabet.js",
     _this = void 0;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/__tests__/nds-alphabet.test.js

@@ -8,7 +8,7 @@ var _enzyme = require("enzyme");
 
 var _Alphabet = require("../Alphabet");
 
-var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-alphabet\\src\\__tests__\\nds-alphabet.test.js",
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-alphabet\\src\\__tests__\\nds-alphabet.test.js",
     _this = void 0;
 
 describe("Alphabet", function () {

package/nds-alphabet.d.ts

@@ -15,4 +15,7 @@ declare module "@nice-digital/nds-alphabet" {
 		to?: string | false;
 		[key: string]: unknown;
 	}
+
+	export const Alphabet: React.FC<AlphabetProps>;
+	export const Letter: React.FC<LetterProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-digital/nds-alphabet",
-  "version": "0.2.0-alpha.0",
+  "version": "0.3.0-alpha.0",
   "description": "Alphabet component for the NICE Design System",
   "main": "lib/Alphabet.js",
   "module": "es/Alphabet.js",
@@ -27,8 +27,8 @@
     "url": "https://github.com/nice-digital/nice-design-system/issues"
   },
   "keywords": [
-    "column",
-    "list"
+    "alphabet",
+    "a to z"
   ],
   "author": "Chris Barker <chris.barker@nice.org.uk>",
   "homepage": "https://design-system.nice.org.uk/",
@@ -36,5 +36,5 @@
   "dependencies": {
     "prop-types": "^15.8.1"
   },
-  "gitHead": "fc384b7fb39d7d1d39e3029fb010e40c257c13f4"
+  "gitHead": "281c966b380ead58f34ec045c8f296ff11303e0f"
 }