feat(skeleton-states): Add Skeleton states

manifest.yml

@@ -3,6 +3,4 @@ applications:
 - name: carbon-storybook
   memory: 64M
   buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
-  routes:
-  - route: carbon-react-storybook.mybluemix.net
-  - route: react.carbondesignsystem.com
+  random-route: true

package.json

@@ -115,7 +115,7 @@
     }
   },
   "peerDependencies": {
-    "carbon-components": "^8.18.15",
+    "carbon-components": "^8.20.0",
     "carbon-icons": "^5.1.2 || ^6.0.0",
     "react": "^15.3.2 || ^16.1.0",
     "react-dom": "^15.3.2 || ^16.1.0"
@@ -148,7 +148,7 @@
     "babel-jest": "^22.1.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "bowser": "^1.6.1",
-    "carbon-components": "^8.18.15",
+    "carbon-components": "^8.20.0",
     "carbon-icons": "^6.1.0",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

src/components/Accordion/Accordion-story.js

@@ -7,66 +7,79 @@ import Accordion from '../Accordion';
 import AccordionItem from '../AccordionItem';
 import Select from '../Select';
 import SelectItem from '../SelectItem';
+import AccordionSkeleton from '../Accordion/Accordion.Skeleton';
 
 const props = {
   onHeadingClick: ({ isOpen }) => {
     console.log(`Is open: ${isOpen}`);
   }, // eslint-disable-line no-console
 };
 
-storiesOf('Accordion', module).addWithInfo(
-  'Default',
-  `
+storiesOf('Accordion', module)
+  .addWithInfo(
+    'Default',
+    `
       Accordions allow users to expand and collapse sections of content.
     `,
-  () => (
-    <Accordion>
-      <AccordionItem title="Section 1 title" {...props}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Section 2 title" open {...props}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Section 3 title" {...props}>
-        <Select
-          onChange={action('onChange')}
-          id="select-1"
-          defaultValue="placeholder-item">
-          <SelectItem
-            disabled
-            hidden
-            value="placeholder-item"
-            text="Choose an option"
-          />
-          <SelectItem value="option-1" text="Option 1" />
-          <SelectItem value="option-2" text="Option 2" />
-          <SelectItem value="option-3" text="Option 3" />
-        </Select>
-      </AccordionItem>
-      <AccordionItem
-        title={
-          <h4>
-            Section 4 title (<em>the title can be a node</em>)
-          </h4>
-        }
-        {...props}>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </AccordionItem>
-    </Accordion>
+    () => (
+      <Accordion>
+        <AccordionItem title="Section 1 title" {...props}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+        <AccordionItem title="Section 2 title" open {...props}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+        <AccordionItem title="Section 3 title" {...props}>
+          <Select
+            onChange={action('onChange')}
+            id="select-1"
+            defaultValue="placeholder-item">
+            <SelectItem
+              disabled
+              hidden
+              value="placeholder-item"
+              text="Choose an option"
+            />
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+            <SelectItem value="option-3" text="Option 3" />
+          </Select>
+        </AccordionItem>
+        <AccordionItem
+          title={
+            <h4>
+              Section 4 title (<em>the title can be a node</em>)
+            </h4>
+          }
+          {...props}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+      </Accordion>
+    )
   )
-);
+  .addWithInfo(
+    'skeleton',
+    `
+    Placeholder skeleton state to use when content is loading.
+  `,
+    () => (
+      <div style={{ width: '500px' }}>
+        <AccordionSkeleton />
+      </div>
+    )
+  );

src/components/Accordion/Accordion-test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Accordion from '../Accordion';
+import AccordionSkeleton from '../Accordion/Accordion.Skeleton';
 import { shallow } from 'enzyme';
 
 describe('Accordion', () => {
@@ -23,3 +24,14 @@ describe('Accordion', () => {
     });
   });
 });
+
+describe('AccordionSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<AccordionSkeleton />);
+
+    it('Has the expected classes', () => {
+      expect(wrapper.hasClass('bx--skeleton')).toEqual(true);
+      expect(wrapper.hasClass('bx--accordion')).toEqual(true);
+    });
+  });
+});

src/components/Accordion/Accordion.Skeleton.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Icon from '../Icon';
+import SkeletonText from '../SkeletonText';
+
+export default class AccordionSkeleton extends React.Component {
+  render() {
+    const item = (
+      <li className="bx--accordion__item">
+        <button type="button" className="bx--accordion__heading">
+          <Icon className="bx--accordion__arrow" name="chevron--right" />
+          <SkeletonText className="bx--accordion__title" />
+        </button>
+      </li>
+    );
+    return (
+      <ul className="bx--accordion bx--skeleton">
+        <li className="bx--accordion__item bx--accordion__item--active">
+          <button type="button" className="bx--accordion__heading">
+            <Icon className="bx--accordion__arrow" name="chevron--right" />
+            <SkeletonText className="bx--accordion__title" />
+          </button>
+          <div className="bx--accordion__content">
+            <SkeletonText width="90%" />
+            <SkeletonText width="80%" />
+            <SkeletonText width="95%" />
+          </div>
+        </li>
+        {item}
+        {item}
+        {item}
+      </ul>
+    );
+  }
+}

src/components/Accordion/index.js

@@ -1 +1,2 @@
+export * from './Accordion.Skeleton';
 export default from './Accordion';

src/components/Breadcrumb/Breadcrumb-story.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import Breadcrumb from '../Breadcrumb';
 import BreadcrumbItem from '../BreadcrumbItem';
+import BreadcrumbSkeleton from '../Breadcrumb/Breadcrumb.Skeleton';
 
 const additionalProps = {
   onClick: () => {
@@ -12,18 +13,26 @@ const additionalProps = {
   className: 'some-class',
 };
 
-storiesOf('Breadcrumb', module).addWithInfo(
-  'Default',
-  `
+storiesOf('Breadcrumb', module)
+  .addWithInfo(
+    'Default',
+    `
       Breadcrumb enables users to quickly see their location within a path of navigation and move up to a parent level if desired.
     `,
-  () => (
-    <Breadcrumb {...additionalProps}>
-      <BreadcrumbItem>
-        <a href="/#">Breadcrumb 1</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
-    </Breadcrumb>
+    () => (
+      <Breadcrumb {...additionalProps}>
+        <BreadcrumbItem>
+          <a href="/#">Breadcrumb 1</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+        <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+      </Breadcrumb>
+    )
   )
-);
+  .addWithInfo(
+    'skeleton',
+    `
+    Placeholder skeleton state to use when content is loading.
+    `,
+    () => <BreadcrumbSkeleton />
+  );

src/components/Breadcrumb/Breadcrumb-test.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Breadcrumb from '../Breadcrumb';
 import BreadcrumbItem from '../BreadcrumbItem';
-import { mount } from 'enzyme';
+import BreadcrumbSkeleton from '../Breadcrumb/Breadcrumb.Skeleton';
+import { mount, shallow } from 'enzyme';
 
 describe('Breadcrumb', () => {
   describe('Renders as expected', () => {
@@ -36,3 +37,14 @@ describe('Breadcrumb', () => {
     });
   });
 });
+
+describe('BreadcrumbSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<BreadcrumbSkeleton />);
+
+    it('Has the expected classes', () => {
+      expect(wrapper.hasClass('bx--skeleton')).toEqual(true);
+      expect(wrapper.hasClass('bx--breadcrumb')).toEqual(true);
+    });
+  });
+});

src/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class BreadcrumbSkeleton extends React.Component {
+  render() {
+    const item = (
+      <div className="bx--breadcrumb-item">
+        <a href="/#" class="bx--link">
+          &nbsp;
+        </a>
+      </div>
+    );
+    return (
+      <div className="bx--breadcrumb bx--skeleton">
+        {item}
+        {item}
+        {item}
+      </div>
+    );
+  }
+}

src/components/Breadcrumb/index.js

@@ -1 +1,2 @@
+export * from './Breadcrumb.Skeleton';
 export default from './Breadcrumb';

src/components/Button/Button-story.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import Button from '../Button';
+import ButtonSkeleton from '../Button/Button.Skeleton';
 
 const buttonEvents = {
   onClick: action('onClick'),
@@ -228,4 +229,19 @@ storiesOf('Buttons', module)
         </Button>
       </div>
     )
+  )
+  .addWithInfo(
+    'skeleton',
+    `
+      Placeholder skeleton state to use when content is loading.
+    `,
+    () => (
+      <div>
+        <ButtonSkeleton />
+        &nbsp;
+        <ButtonSkeleton href="#" />
+        &nbsp;
+        <ButtonSkeleton small />
+      </div>
+    )
   );

src/components/Button/Button-test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../Button';
+import ButtonSkeleton from '../Button/Button.Skeleton';
 import { shallow, mount } from 'enzyme';
 
 describe('Button', () => {
@@ -171,7 +172,7 @@ describe('Small Button', () => {
 });
 
 describe('DangerButton', () => {
-  describe('Renders as exptected', () => {
+  describe('Renders as expected', () => {
     const wrapper = shallow(<Button kind="danger" className="extra-class" />);
 
     it('Has the expected classes', () => {
@@ -213,3 +214,40 @@ describe('TertiaryButton', () => {
     });
   });
 });
+
+describe('ButtonSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<ButtonSkeleton />);
+
+    it('Has the expected classes', () => {
+      expect(wrapper.hasClass('bx--skeleton')).toEqual(true);
+      expect(wrapper.hasClass('bx--btn')).toEqual(true);
+    });
+  });
+
+  describe('Renders <a> props as expected', () => {
+    const wrapper = shallow(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+      <ButtonSkeleton href="#" />
+    );
+
+    it('Renders as an <a> element with an href', () => {
+      expect(wrapper.is('a')).toBe(true);
+    });
+
+    it('Should always render with [role="button"] by default', () => {
+      expect(wrapper.props().role).toEqual('button');
+    });
+  });
+});
+
+describe('Small ButtonSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<ButtonSkeleton small />);
+
+    it('Has the expected classes for small', () => {
+      expect(wrapper.hasClass('bx--btn--sm')).toEqual(true);
+      expect(wrapper.hasClass('bx--skeleton')).toEqual(true);
+    });
+  });
+});