feat(experimental): add POC for experimental button and badge

packages/patternfly-4/react-core/src/experimental/components/Badge/Badge.md

@@ -0,0 +1,32 @@
+---
+title: 'Badge'
+cssPrefix: 'pf-c-badge'
+typescript: true 
+propComponents: ['Badge']
+section: 'experimental'
+---
+import { Badge as ExperimentalBadge } from '@patternfly/react-core/dist/esm/experimental';
+import { Alert } from '@patternfly/react-core';
+
+<Alert variant="danger" title="Warning">
+  Please don't use this component, it's only an example of what an experimental component could be
+  and likely going away in our next release.
+  Use our <a href="../../components/badge">actual Badge instead.</a>
+</Alert>
+<br />
+
+## Badge
+```js
+import React from 'react';
+import { Badge as ExperimentalBadge } from '@patternfly/react-core/dist/esm/experimental';
+
+ReadBadge = () => (
+  <React.Fragment>
+    <ExperimentalBadge isRead>7</ExperimentalBadge>
+    <ExperimentalBadge isRead>24</ExperimentalBadge>
+    <ExperimentalBadge isRead>240</ExperimentalBadge>
+    <ExperimentalBadge isRead>999+</ExperimentalBadge>
+  </React.Fragment>
+);
+```
+

packages/patternfly-4/react-core/src/experimental/components/Badge/Badge.test.tsx

@@ -0,0 +1,10 @@
+import { Badge } from './Badge';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+Object.values([true, false]).forEach(isRead => {
+  test(`${isRead} Badge`, () => {
+    const view = shallow(<Badge isRead={isRead}>{isRead ? 'read' : 'unread'} Badge</Badge>);
+    expect(view).toMatchSnapshot();
+  });
+});

packages/patternfly-4/react-core/src/experimental/components/Badge/Badge.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
+import { BadgeProps as StandardBadgeProps } from '../../../components/Badge';
+
+export interface BadgeProps extends StandardBadgeProps {
+  /**  Adds styling to the badge to indicate it has been read */
+  testThing?: boolean;
+}
+
+export const Badge: React.FunctionComponent<BadgeProps> = ({ 
+  isRead = false, 
+  className = '', 
+  children = '', 
+  ...props }: BadgeProps) => (
+  <span {...props} className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}>
+    Im experimental!
+    {children}
+  </span>
+);

packages/patternfly-4/react-core/src/experimental/components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`false Badge 1`] = `
+<span
+  className="pf-c-badge pf-m-unread"
+>
+  Im experimental!
+  unread
+   Badge
+</span>
+`;
+
+exports[`true Badge 1`] = `
+<span
+  className="pf-c-badge pf-m-read"
+>
+  Im experimental!
+  read
+   Badge
+</span>
+`;

packages/patternfly-4/react-core/src/experimental/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

packages/patternfly-4/react-core/src/experimental/components/Button/Button.md

@@ -0,0 +1,26 @@
+---
+title: 'Button'
+cssPrefix: 'pf-c-button'
+typescript: true
+propComponents: ['Button']
+section: 'experimental'
+---
+
+
+import { Button as ExperimentalButton } from '@patternfly/react-core/dist/esm/experimental';
+import { Alert } from '@patternfly/react-core';
+
+<Alert variant="danger" title="Warning">
+  Please don't use this component, it's only an example of what an experimental component could be
+  and likely going away in our next release.
+  Use our <a href="../../components/button">actual Button instead.</a>
+</Alert>
+<br />
+
+## Render button
+```js
+import React from 'react';
+import { Button as ExperimentalButton } from '@patternfly/react-core/dist/esm/experimental';
+
+RenderButton = () => <ExperimentalButton render={false}>Block level button</ExperimentalButton>;
+```

packages/patternfly-4/react-core/src/experimental/components/Button/Button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Button/button';
+import { css, getModifier } from '@patternfly/react-styles';
+import { ButtonProps as StandardButtonProps } from '../../../components/Button';
+
+export interface ButtonProps extends StandardButtonProps {
+  /** Dangerous prop to use at own risk */
+  render?: boolean;
+}
+
+export const Button: React.FunctionComponent<ButtonProps> = ({
+  children = null, 
+  className = '', 
+  component = 'button', 
+  isActive = false, 
+  isBlock = false,
+  isDisabled = false,
+  isFocus = false,
+  isHover = false,
+  isInline = false,
+  type = 'button',
+  variant = 'primary',
+  'aria-label': ariaLabel = null, 
+  icon = null,
+  render = true,
+  ...props
+}: ButtonProps) => {
+  if (!render) {
+    return <p>no render</p>;
+  }
+  const Component = component as any;
+  const isButtonElement = Component === 'button';
+  return (
+    <Component
+      {...props}
+      aria-disabled={isButtonElement ? null : isDisabled}
+      aria-label={ariaLabel}
+      className={css(
+        styles.button,
+        getModifier(styles.modifiers, variant),
+        isBlock && styles.modifiers.block,
+        isDisabled && styles.modifiers.disabled,
+        isActive && styles.modifiers.active,
+        isFocus && styles.modifiers.focus,
+        isHover && styles.modifiers.hover,
+        isInline && variant === 'link' && styles.modifiers.inline,
+        className
+      )}
+      disabled={isButtonElement ? isDisabled : null}
+      tabIndex={isDisabled && !isButtonElement ? -1 : null}
+      type={isButtonElement ? type : null}
+    >
+      {(icon && variant === 'link') && <span className="pf-c-button__icon">{icon}</span>}
+      {children}
+    </Component>
+  );
+}

packages/patternfly-4/react-core/src/experimental/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

packages/patternfly-4/react-core/src/experimental/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Badge';

packages/patternfly-4/react-core/src/experimental/index.ts

@@ -0,0 +1 @@
+export * from './components';

packages/patternfly-4/react-docs/gatsby-node.js

@@ -69,7 +69,8 @@ exports.createPages = ({ graphql, actions }) => {
             title: node.frontmatter.title,
             typescript: node.frontmatter.typescript, // For a badge
             fileAbsolutePath: node.fileAbsolutePath, // Helps us get the markdown
-            propComponents: node.frontmatter.propComponents || [] // Helps us get the docgenned props
+            propComponents: node.frontmatter.propComponents || [], // Helps us get the docgenned props
+            pathRegex: node.frontmatter.section === 'experimental' ? '/.*/experimental/.*/' : '/^((?!experimental).)*$/' // Since experimental components have same class names
           }
         });
       }

packages/patternfly-4/react-docs/src/templates/mdxTemplate.js

@@ -64,7 +64,7 @@ MdxTemplate.propTypes = {
 // We want the markdown from gatsby-mdx
 // We want component metadata from gatsby-transformer-react-docgen-typescript
 export const pageQuery = graphql`
-  query GetComponent($fileAbsolutePath: String!, $propComponents: [String]!) {
+  query GetComponent($fileAbsolutePath: String!, $propComponents: [String]!, $pathRegex: String!) {
     mdx(fileAbsolutePath: { eq: $fileAbsolutePath }) {
       code {
         body
@@ -75,7 +75,7 @@ export const pageQuery = graphql`
         cssPrefix
       }
     }
-    props: allComponentMetadata(filter: { name: { in: $propComponents } }) {
+    props: allComponentMetadata(filter: { name: { in: $propComponents }, path: { regex: $pathRegex } }) {
       nodes {
         name
         props {