From 0bf8d1aa43ee8f3acd9392ed47a8b39cf4c9ef33 Mon Sep 17 00:00:00 2001 From: Jamie Halvorson Date: Wed, 27 Jun 2018 11:48:11 +0100 Subject: [PATCH 01/23] Style updates --- src/components/tab/index.js | 4 +++- src/components/tabs/index.js | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/tab/index.js b/src/components/tab/index.js index 109e099..483ad67 100644 --- a/src/components/tab/index.js +++ b/src/components/tab/index.js @@ -15,10 +15,12 @@ export default class Tab extends Component { render() { const { title, tabIndex, isActive } = this.props; + console.log('CLASS: ', this.props.activeClassName); + return (
  • -
    - { - children[tabIndex] && - children[tabIndex].props.children - } -
    - - ) + +
    + { + children[tabIndex] && + children[tabIndex].props.children + } +
    + + ) + } } - } - )); + )); } render() { @@ -131,14 +130,14 @@ export default class Tabs extends Component {
    - { - !this.state.isMobile && -
      - {this.renderTabs()} -
    - } + { + !this.state.isMobile && +
      + {this.renderTabs()} +
    + } {this.renderActiveTabs()} From 47495235efb87be532425e1802970837986b1a63 Mon Sep 17 00:00:00 2001 From: Jamie Halvorson Date: Wed, 11 Jul 2018 14:07:58 +0100 Subject: [PATCH 03/23] Updated docs --- README.md | 1 + src/components/tabs/index.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a0550d4..2fda457 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ There are a number of options available for targeting styles and providing data | `className` | `` | | | `activeClassName` | `` | | | `title` | `` | | +| `toggleClassName` | `` | | ## Development diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js index 4a9ad7e..06d06e9 100644 --- a/src/components/tabs/index.js +++ b/src/components/tabs/index.js @@ -87,7 +87,7 @@ export default class Tabs extends Component { // to control its visibility when on Desktop. When on mobile however we remove the hidden attribute // and default to using classes for styling. renderActiveTabs = () => { - const { children, contentClassName } = this.props; + const { children, contentClassName, toggleClassName } = this.props; return React.Children.map(children, (child, index) => ( @@ -101,10 +101,10 @@ export default class Tabs extends Component { role="tab" tabIndex="-1" id={`sigTabs${index}`} - className={['sig-tabs__content', this.props.contentClassName || ''].join(' ')} + className={['sig-tabs__content', contentClassName || ''].join(' ')} >
    { From e86c657308e747bc381a2926f99381c3dbe62471 Mon Sep 17 00:00:00 2001 From: Jamie Halvorson Date: Wed, 11 Jul 2018 16:28:22 +0100 Subject: [PATCH 05/23] Remove flow from , bump version --- package.json | 4 ++-- src/components/tabs/index.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9725602..16f5d6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cellosignal/react-tabs", - "version": "0.0.1", + "version": "0.0.2", "description": "Acessible react tabs that collapse into an accordion on mobile", "publishConfig": { "registry": "http://npm.i.blonde.net:4873/" @@ -50,4 +50,4 @@ "webpack-cli": "^2.0.10", "webpack-merge": "^4.1.2" } -} +} \ No newline at end of file diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js index b3063b0..b5d6916 100644 --- a/src/components/tabs/index.js +++ b/src/components/tabs/index.js @@ -1,4 +1,3 @@ -/* @flow */ import React, { Component, Fragment } from 'react'; import { arrayOf, shape, string } from 'prop-types'; import Provider from '../../provider'; From 9847c5be36ce9d159982547cfa61ab2a1ab8b48c Mon Sep 17 00:00:00 2001 From: Jamie Halvorson Date: Wed, 11 Jul 2018 16:35:34 +0100 Subject: [PATCH 06/23] Adds descriptions to the docs --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 2fda457..7114068 100644 --- a/README.md +++ b/README.md @@ -37,12 +37,12 @@ There are a number of options available for targeting styles and providing data | Prop | Component | Description | |------|-----------|-------------| -| `className` | `` | | -| `contentClassName` | `` | | -| `className` | `` | | -| `activeClassName` | `` | | -| `title` | `` | | -| `toggleClassName` | `` | | +| `className` | `` | Add your classNames for styling, this adds it at the **top** level | +| `contentClassName` | `` | className for wrapping your content | +| `className` | `` | className to add to **each** tab | +| `activeClassName` | `` | className added to the active tab | +| `title` | `` | *String*, the title of the Tab | +| `toggleClassName` | `` | className added to the button, only on **mobile** | ## Development From 4422dc02bdd610a11ee459b2bf1fc2ff4af5bf74 Mon Sep 17 00:00:00 2001 From: Jamie Halvorson Date: Wed, 11 Jul 2018 16:45:55 +0100 Subject: [PATCH 07/23] Rename mobile breakpoint prop to make it clearer --- README.md | 1 + src/components/tabs/index.js | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7114068..90f45d8 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ There are a number of options available for targeting styles and providing data | `activeClassName` | `` | className added to the active tab | | `title` | `` | *String*, the title of the Tab | | `toggleClassName` | `` | className added to the button, only on **mobile** | +| `mobileBreakpoint` | `` | Mobile breakpoint in `px` | ## Development diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js index b5d6916..c92438d 100644 --- a/src/components/tabs/index.js +++ b/src/components/tabs/index.js @@ -7,7 +7,6 @@ import OpenIcon from '../../assets/open-icon'; import CloseIcon from '../../assets/close-icon'; export default class Tabs extends Component { - constructor(props) { super(props); @@ -66,8 +65,8 @@ export default class Tabs extends Component { // If user goes from mobile with all tabs closed we want to reset all tabs checkMobile = (props) => { - const { mobile } = props; - const mobileBp = mobile ? mobile : '768'; + const { mobileBreakpoint } = props; + const mobileBp = mobileBreakpoint ? mobileBreakpoint : '768'; this.setState({ isMobile: window.matchMedia(`(max-width: ${mobileBp}px)`).matches }); From cdf43fbd3cf640c55f228b5efcb143a758a298c1 Mon Sep 17 00:00:00 2001 From: Andrea Kereliuk Date: Thu, 12 Jul 2018 15:49:33 +0100 Subject: [PATCH 08/23] Fix safari breaking missing bracket in provider.js --- src/provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/provider.js b/src/provider.js index 64302dd..3f37e0b 100644 --- a/src/provider.js +++ b/src/provider.js @@ -9,7 +9,7 @@ export default class Provider extends Component { }; componentDidMount() { - this.panels = document.querySelectorAll('[id^="sigTabs"'); + this.panels = document.querySelectorAll('[id^="sigTabs"]'); this.tabs = document.querySelectorAll('a'); } From b141fb93ade0530a271c9826a4cd2d50b9cf7350 Mon Sep 17 00:00:00 2001 From: Andrea Kereliuk Date: Thu, 12 Jul 2018 16:44:39 +0100 Subject: [PATCH 09/23] Add more aria support to existing elements --- src/components/tab/index.js | 3 +++ src/components/tabs/index.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/tab/index.js b/src/components/tab/index.js index 91d27c3..96617b6 100644 --- a/src/components/tab/index.js +++ b/src/components/tab/index.js @@ -27,6 +27,9 @@ export default class Tab extends Component { href="#" onKeyDown={e => this.props.handleKeyPress(e)} tabIndex={!isActive ? "-1" : "0"} + role="tab" + aria-controls={`sigTabs${tabIndex}`} + id={`sigTabsTitle${tabIndex}`} > {title} diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js index c92438d..c2569ab 100644 --- a/src/components/tabs/index.js +++ b/src/components/tabs/index.js @@ -106,9 +106,9 @@ export default class Tabs extends Component { return (