Merge pull request #2583 from bbc/psammead-bulleted-list

Create psammead-bulleted-list component

packages/components/psammead-bulleted-list/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Psammead Bulleted List Changelog
+
+| Version | Description |
+|---------|-------------|
+| 0.1.0-alpha.1 | [PR#2583](https://github.com/BBC-News/psammead/pull/2583) Initial creation of package. |

packages/components/psammead-bulleted-list/README.md

@@ -0,0 +1,69 @@
+# ⛔️ This is an alpha component ⛔️
+
+This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.
+
+# psammead-bulleted-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/psammead-bulleted-list--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-bulleted-list.svg)](https://www.npmjs.com/package/@bbc/psammead-bulleted-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
+
+## Description
+
+The `BulletedList` component is a styled bulleted (unordered) list that works for right-to-left and left-to-right languages.
+
+## Installation
+
+```jsx
+npm install @bbc/psammead-bulleted-list --save
+```
+
+## Props
+
+| Argument  | Type | Required | Default | Example |
+| --------- | ---- | -------- | ------- | ------- |
+| dir | string | No | `'ltr'` | One of `'rtl'` `'ltr'` |
+| script | script | Yes | N/A | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } |
+| service | string | Yes | N/A | `'news'` |
+
+## Usage
+
+Use `BulletedList` in place of a `ul` element with required props. It styles all its direct `li` children.
+
+```jsx
+import BulletedList from "@bbc/psammead-bulleted-list";
+
+const props = {
+  dir: 'ltr',
+  script: latin,
+  service: 'news',
+};
+
+<BulletedList {...props}>
+  <li>A list item</li>
+  <li>Another item</li>
+</BulletedList>
+
+```
+
+### When to use this component
+
+`BulletedList`s can be used wherever you need a standard GEL unordered list.
+
+### When not to use this component
+
+It's not ideal for when you need a custom bullet. Use the standard `<ul>` instead if you need to style your bullets.
+
+### Accessibility notes
+
+The bullets in `psammead-bulleted-lists` are not read by screen readers and are generated using pseudo-elements.
+
+<!-- Roadmap -->
+
+## Contributing
+
+Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).
+
+### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)
+
+We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
+
+### License
+
+Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).

packages/components/psammead-bulleted-list/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bbc/psammead-bulleted-list",
+  "version": "0.1.0-alpha.1",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
+  "description": "React styled component for ordered and unordered lists",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-bulleted-list"
+  },
+  "author": {
+    "name": "Psammead Maintainers",
+    "email": "PsammeadMaintainers@bbc.co.uk"
+  },
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/bbc/psammead/issues"
+  },
+  "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-bulleted-list/README.md",
+  "dependencies": {
+    "@bbc/gel-foundations": "^3.4.1",
+    "@bbc/psammead-styles": "^4.1.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^4.3.2",
+    "react-dom": "^16.12.0"
+  },
+  "publishConfig": {
+    "tag": "alpha"
+  }
+}

packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PsammeadBulletedList should render correctly from ltr 1`] = `
+.c0 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  list-style-type: none;
+}
+
+.c0 > li::before {
+  content: ' ';
+  display: inline-block;
+  width: 2rem;
+  background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
+  margin-left: -2rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c0 {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    font-size: 1rem;
+    line-height: 1.375rem;
+  }
+}
+
+<ul
+  class="c0"
+  dir="ltr"
+>
+  <li>
+    First item on the list
+  </li>
+  <li>
+    Second item on the list
+  </li>
+  <li>
+    Final list item
+  </li>
+</ul>
+`;
+
+exports[`PsammeadBulletedList should render correctly from rtl 1`] = `
+.c0 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-family: "BBC Nassim Arabic",Arial,Verdana,Geneva,Helvetica,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  list-style-type: none;
+}
+
+.c0 > li::before {
+  content: ' ';
+  display: inline-block;
+  width: 2rem;
+  background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
+  margin-right: -2rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c0 {
+    font-size: 1.375rem;
+    line-height: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    font-size: 1.375rem;
+    line-height: 2rem;
+  }
+}
+
+<ul
+  class="c0"
+  dir="rtl"
+>
+  <li>
+    العنصر الأول في القائمة
+  </li>
+  <li>
+    البند الثاني في القائمة
+  </li>
+  <li>
+    عنصر القائمة النهائية
+  </li>
+</ul>
+`;

packages/components/psammead-bulleted-list/src/index.jsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { string, oneOf, shape } from 'prop-types';
+import { getBodyCopy } from '@bbc/gel-foundations/typography';
+import { getSansRegular } from '@bbc/psammead-styles/font-styles';
+import { GEL_SPACING_QUAD } from '@bbc/gel-foundations/spacings';
+import { scriptPropType } from '@bbc/gel-foundations/prop-types';
+
+const BulletedList = styled.ul`
+  ${({ script }) => script && getBodyCopy(script)};
+  ${({ service }) => getSansRegular(service)}
+  list-style-type: none;
+  & > li::before {
+    content: '\u00A0';
+    display: inline-block;
+    width: ${GEL_SPACING_QUAD};
+    background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E")
+      no-repeat center;
+    ${({ dir }) =>
+      dir === 'rtl'
+        ? `margin-right: -${GEL_SPACING_QUAD};`
+        : `margin-left: -${GEL_SPACING_QUAD};`}
+  }
+`;
+
+BulletedList.propTypes = {
+  script: shape(scriptPropType).isRequired,
+  dir: oneOf(['ltr', 'rtl']),
+  service: string.isRequired,
+};
+
+BulletedList.defaultProps = {
+  dir: 'ltr',
+};
+
+export default BulletedList;

packages/components/psammead-bulleted-list/src/index.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
+import notes from '../README.md';
+import BulletedList from './index';
+
+storiesOf('Components|BulletedList', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withServicesKnob())
+  .add(
+    'default',
+    ({ text, script, service, dir }) => (
+      <BulletedList dir={dir} script={script} service={service}>
+        <li>{text}</li>
+        <li>
+          {text} {text}
+        </li>
+        <li>{text.substring(0, 10)}</li>
+        <li>
+          {text} {text} {text} {text}
+        </li>
+      </BulletedList>
+    ),
+    { notes },
+  );

packages/components/psammead-bulleted-list/src/index.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { arabic, latin } from '@bbc/gel-foundations/scripts';
+import BulletedList from './index';
+
+const ltrProps = {
+  dir: 'ltr',
+  script: latin,
+  service: 'news',
+};
+
+const rtlProps = {
+  dir: 'rtl',
+  script: arabic,
+  service: 'arabic',
+};
+
+describe('PsammeadBulletedList', () => {
+  shouldMatchSnapshot(
+    'should render correctly from ltr',
+    <BulletedList {...ltrProps}>
+      <li>First item on the list</li>
+      <li>Second item on the list</li>
+      <li>Final list item</li>
+    </BulletedList>,
+  );
+
+  shouldMatchSnapshot(
+    'should render correctly from rtl',
+    <BulletedList {...rtlProps}>
+      <li>العنصر الأول في القائمة</li>
+      <li>البند الثاني في القائمة</li>
+      <li>عنصر القائمة النهائية</li>
+    </BulletedList>,
+  );
+});