feat(community-ribbon): adding new ribbon component to tds-community

adding ribbon component for clear way for customers to see sale or special feature items

new: Promo/flag/ribbon/special marker #48

packages/Ribbon/README.md

@@ -0,0 +1 @@
+# TDS Community: Ribbon

packages/Ribbon/Ribbon.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '@tds/shared-safe-rest'
+
+import styles from './Ribbon.scss'
+
+/** Ribbon component for focusing attention onto a sale or special feature.
+ * @version ./package.json
+ */
+const Ribbon = ({ ribbonCopy, ...rest }) => {
+  return (
+    <React.Fragment>
+      {
+        <div {...safeRest(rest)} className={styles.ribbonStyle}>
+          {ribbonCopy}
+        </div>
+      }
+    </React.Fragment>
+  )
+}
+
+Ribbon.propTypes = {
+  ribbonCopy: PropTypes.string,
+}
+
+Ribbon.defaultProps = {
+  ribbonCopy: '',
+}
+
+export default Ribbon

packages/Ribbon/Ribbon.md

@@ -0,0 +1,3 @@
+```jsx
+<Ribbon ribbonCopy="Telus Ribbon" />
+```

packages/Ribbon/Ribbon.scss

@@ -0,0 +1,24 @@
+.ribbonStyle {
+  background: #4B286D;
+  color: #FFFFFF;
+  padding: 8px 30px 8px 15px;
+  margin: 16px 0;
+  position: relative;
+  font-size: 1rem;
+  display: inline-block;
+  max-width: 100%;
+  min-width: 126px;
+  min-height: 40px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-right: 13px solid white;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+  };
+};

packages/Ribbon/__tests__/Ribbon.spec.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Ribbon from '../Ribbon'
+
+describe('Ribbon', () => {
+  const doShallow = (
+    props = {
+      ribbonCopy: 'Prop Text',
+    }
+  ) => shallow(<Ribbon {...props} />)
+
+  it('matches snapshot with ribbonCopy prop', () => {
+    const ribbon = doShallow()
+    expect(ribbon).toMatchSnapshot()
+  })
+
+  it('matches snapshot with empty ribbonCopy prop', () => {
+    const ribbon = doShallow()
+    ribbon.setProps({ ribbonCopy: '' })
+    expect(ribbon).toMatchSnapshot()
+  })
+
+  it('does not allow custom CSS', () => {
+    const ribbon = doShallow({
+      className: 'my-custom-class',
+      style: { color: 'hotpink' },
+    })
+    expect(ribbon).not.toHaveProp('className', 'my-custom-class')
+    expect(ribbon).not.toHaveProp('style')
+  })
+})

packages/Ribbon/__tests__/__snapshots__/Ribbon.spec.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon matches snapshot with empty ribbonCopy prop 1`] = `
+<Fragment>
+  <div
+    className="ribbonStyle"
+  />
+</Fragment>
+`;
+
+exports[`Ribbon matches snapshot with ribbonCopy prop 1`] = `
+<Fragment>
+  <div
+    className="ribbonStyle"
+  >
+    Prop Text
+  </div>
+</Fragment>
+`;

packages/Ribbon/index.cjs.js

@@ -0,0 +1,4 @@
+require('./dist/index.css')
+const Ribbon = require('./dist/index.cjs')
+
+module.exports = Ribbon

packages/Ribbon/index.es.js

@@ -0,0 +1,4 @@
+import './dist/index.css'
+import Ribbon from './dist/index.es'
+
+export default Ribbon

packages/Ribbon/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@tds/community-ribbon",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.cjs.js",
+  "module": "index.es.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/tds-community.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "TELUS digital",
+  "engines": {
+    "node": ">=8"
+  },
+  "bugs": {
+    "url": "https://github.com/telus/tds-community/issues"
+  },
+  "homepage": "http://tds.telus.com",
+  "peerDependencies": {
+    "react": ">=15",
+    "react-dom": ">=15"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "@tds/shared-safe-rest": "^1.0.0"
+  }
+}

packages/Ribbon/rollup.config.js

@@ -0,0 +1,7 @@
+import configure from '../../config/rollup.config'
+import { dependencies } from './package.json'
+
+export default configure({
+  input: './Ribbon.jsx',
+  dependencies,
+})