patternfly · evwilkin · Apr 9, 2020 · Apr 7, 2020 · Apr 7, 2020 · Apr 7, 2020
diff --git a/packages/gatsby-theme-patternfly-org/index.js b/packages/gatsby-theme-patternfly-org/index.js
@@ -16,6 +16,7 @@ exports.mdxTypeDefs = `
     coreComponentName: String
     showTitle: Boolean
     releaseNoteTOC: Boolean
+    hideSource: Boolean
   }
   type MdxFields @dontInfer {
     slug: String!

diff --git a/packages/gatsby-theme-patternfly-org/templates/mdx.js b/packages/gatsby-theme-patternfly-org/templates/mdx.js
@@ -40,7 +40,7 @@ const MDXTemplate = ({ data, location, pageContext }) => {
         katacodaId={location.state.katacodaId} />
     );
   }
-  const { cssPrefix, hideTOC, beta, optIn, hideDarkMode, showTitle, releaseNoteTOC } = data.doc.frontmatter;
+  const { cssPrefix, hideTOC, beta, optIn, hideDarkMode, showTitle, releaseNoteTOC, hideSource } = data.doc.frontmatter;
   const { componentName, navSection } = data.doc.fields;
   const { title, source, tableOfContents, htmlExamples, propComponents = [''], showBanner, showGdprBanner, sourceLink } = pageContext;
   const props = data.props && data.props.nodes && propComponents
@@ -88,9 +88,11 @@ const MDXTemplate = ({ data, location, pageContext }) => {
       )}
       {!hideTOC && (
         <React.Fragment>
-          <label id="source-label" className="ws-framework-title pf-c-title" aria-hidden>
-            {getSourceTitle(source)}
-          </label>
+          {!hideSource && (
+            <label id="source-label" className="ws-framework-title pf-c-title" aria-hidden>
+              {getSourceTitle(source)}
+            </label>
+          )}
           <Title headingLevel="h1" id="component-title" size="4xl" className="ws-page-title" aria-labelledby="source-label component-title">{title}</Title>
           {optIn && (
             <Alert
@@ -275,6 +277,7 @@ export const pageQuery = graphql`
         hideDarkMode
         showTitle
         releaseNoteTOC
+        hideSource
       }
       fields {
         navSection

diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.css b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.css
@@ -0,0 +1,37 @@
+/* Specificity YAY */
+.pf-c-accordion__toggle-icon.ws-color-family-toggle-icon {
+  font-size: var(--pf-global--FontSize--xs);
+  margin-right: var(--pf-c-accordion__toggle--PaddingLeft)
+}
+
+/* Specificity YAY */
+.pf-c-accordion__toggle.ws-color-family-content {
+  font-size: var(--pf-global--FontSize--xs);
+  display: inline-block;
+  padding-bottom: var(--pf-global--spacer--lg);
+}
+
+/* Specificity YAY */
+.pf-c-accordion__toggle.ws-color-family-content:hover,
+.pf-c-accordion__toggle.ws-color-family-accordion-toggle:hover {
+  background-color: unset;
+}
+
+.ws-color-family-accordion-toggle {
+  cursor: pointer;
+}
+
+.pf-c-accordion__toggle > .ws-color-family-label {
+  display: inline-block;
+  font-size: var(--pf-global--FontSize--sm);
+  font-weight: bold;
+  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-global--spacer--sm);
+}
+
+/* Specificity YAY */
+.ws-color-family-toggle.pf-c-accordion__toggle::before,
+.ws-color-family-accordion-toggle.pf-c-accordion__toggle::before {
+  content: none;
+  width: 0;
+}
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.js b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import tokens from '@patternfly/react-tokens/dist/variables/esm/patternfly_variables';
+import AngleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-right-icon';
+import { css } from '@patternfly/react-styles';
+import { normalizeColor, getContrastRatio } from './helpers';
+import './ColorFamily.css';
+
+const palettePrefix = '--pf-global--palette--';
+
+export function ColorFamily({
+  title,
+  family
+}) {
+  const [expanded, setExpanded] = React.useState([]);
+
+  const familyTokens = family === 'shadows'
+    ? tokens[':root'].filter(token => /--pf-global--BoxShadow--(sm|md|lg)$/.test(token.property))
+    : tokens[':root'].filter(token => token.property.includes(`${palettePrefix}${family}`));
+  if (family === 'black') {
+    const whiteToken = tokens[':root'].find(token => token.property === '--pf-global--palette--white');
+    familyTokens.unshift(whiteToken);
+  }
+
+  const expandAll = () => {
+    if (expanded.length > 0) {
+      setExpanded([]);
+    } else {
+      setExpanded(familyTokens.map(token => token.property));
+    }
+  };
+
+  const expand = name => {
+    if (expanded.includes(name)) {
+      setExpanded(expanded.filter(token => token !== name));
+    } else {
+      setExpanded(expanded.concat(name));
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <dl className="pf-c-accordion pf-u-p-0">
+        <dt
+          className={css(
+            'pf-c-accordion__toggle',
+            'ws-color-family-accordion-toggle',
+            expanded.length === familyTokens.length && 'pf-m-expanded'
+          )}
+          onClick={expandAll}
+        >
+          <h3 className="pf-c-title pf-m-xl">
+            <AngleRightIcon className="pf-c-accordion__toggle-icon ws-color-family-toggle-icon" />
+            {title}
+          </h3>
+        </dt>
+        {familyTokens.map(token => {
+          const isExpanded = expanded.includes(token.property);
+          const isShadows = family === 'shadows';
+          const tokenClass = css(
+            'pf-c-accordion__toggle',
+            'ws-color-family-toggle',
+            isExpanded && 'pf-m-expanded'
+          );
+          const itemStyle = { background: `var(${token.property})`, fontSize: 'var(--pf-global--FontSize--sm)' };
+          if (isShadows) {
+            itemStyle.marginBottom = '1rem';
+            itemStyle.boxShadow = `var(${token.property})`;
+          }
+          else if (getContrastRatio(token.value, '#151515') <= 4.5) {
+            itemStyle.color = '#fafafa';
+          }
+          const expandedStyle = {};
+          if (isExpanded && !isShadows) {
+            const borderLeftWidth = 'var(--pf-c-accordion__toggle--m-expanded--BorderWidth)';
+            const borderColor = `var(${token.property})`;
+            const borderStyle = 'solid';
+            itemStyle.borderLeftWidth = borderLeftWidth;
+            itemStyle.borderColor = borderColor;
+            itemStyle.borderStyle = borderStyle;
+            expandedStyle.borderLeftWidth = borderLeftWidth;
+            expandedStyle.borderColor = borderColor;
+            expandedStyle.borderStyle = borderStyle;
+          }
+
+          return (
+            <React.Fragment key={token.property}>
+              <dt
+                className={`${tokenClass} ws-color-family-accordion-toggle`}
+                style={itemStyle}
+                onClick={() => expand(token.property)}
+                id={!isShadows ? token.value.replace('#', 'color-') : token.property.replace('--pf-global--BoxShadow--', '')}
+              >
+                <div>
+                  <AngleRightIcon className="pf-c-accordion__toggle-icon ws-color-family-toggle-icon" />
+                  {token.property
+                    .replace(palettePrefix, '')
+                    .replace('--pf-global--BoxShadow--', 'box shadow ')}
+                </div>
+                {!isShadows && (
+                  <div className="ws-color-family-color">
+                    #{normalizeColor(token.value.toUpperCase())}
+                  </div>
+                )}
+              </dt>
+              {isExpanded && (
+                <dd className={`${tokenClass} ws-color-family-content`} style={expandedStyle}>
+                  <label className="ws-color-family-label">CSS variables</label>
+                  {tokens[':root']
+                    .filter(t => t.value === token.value)
+                    .map(t => t.property)
+                    .sort()
+                    .map(tokenName => 
+                      <div key={tokenName}>{tokenName}</div>
+                    )}
+                </dd>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </dl>
+    </React.Fragment>
+  );
+}
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.css b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.css
@@ -0,0 +1,52 @@
+.ws-color-swatch {
+  display: flex;
+  margin-top: var(--pf-global--spacer--md);
+}
+
+.ws-color-swatch > svg {
+  flex: 0 0 44px;
+  margin-right: var(--pf-global--spacer--md);
+  border-radius: 50%;
+}
+
+.ws-color-swatch > svg:hover {
+  cursor: pointer;
+  box-shadow: var(--pf-global--BoxShadow--lg);
+  /* box-shadow: 0 0 0 0.0625rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06); */
+}
+
+.ws-color-swatch-description {
+  display: flex;
+  flex-direction: column;
+  align-content: space-between;
+}
+
+.ws-color-swatch-description-label {
+  font-size: var(--pf-global--FontSize--xs);
+  font-weight: bold;
+}
+
+.ws-color-swatch-description-code {
+  display: inline-block;
+  font-size: var(--pf-global--FontSize--xs);
+  padding-left: var(--pf-global--spacer--sm);
+  padding-right: var(--pf-global--spacer--sm);
+  border: 2px solid #d1d1d1;
+  background: var(--pf-global--palette--black-150);
+}
+
+.ws-color-swatch-popover {
+  font-size: var(--pf-global--FontSize--sm);
+}
+
+.ws-color-swatch-popover-label {
+  display: inline-block;
+  padding-top: var(--pf-global--spacer--md);
+  padding-bottom: var(--pf-global--spacer--xs);
+  font-weight: bold;
+}
+
+.ws-color-swatch-popover-code {
+  white-space: nowrap;
+  margin-bottom: var(--pf-global--spacer--md);
+}
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.js b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import tokens from '@patternfly/react-tokens/dist/variables/esm/patternfly_variables';
+import { Popover } from '@patternfly/react-core';
+import { normalizeColor } from './helpers';
+import './ColorSwatch.css';
+
+const handSVG = (
+  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(22, 22)">
+      <g transform="translate(-108.000000, -493.000000)">
+          <g transform="translate(80.000000, 465.000000)">
+              <g transform="translate(28.000000, 28.000000)">
+                <path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" fill="#FFFFFF" fillRule="nonzero"></path>
+                <path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" stroke="#000000" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round"></path>
+                <line x1="11.6" y1="12.7" x2="11.6" y2="9.3" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+                <line x1="9.6" y1="12.7" x2="9.5" y2="9.3" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+                <line x1="7.6" y1="9.3" x2="7.6" y2="12.7" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+              </g>
+          </g>
+      </g>
+  </g>
+);
+
+export function ColorSwatch({
+  label,
+  color,
+  caption,
+  children
+}) {
+  const isBoxShadow = color.includes('BoxShadow');
+  const token = tokens[":root"].find(token => token.property === color);
+  const popoverContent = (
+    <div className="ws-color-swatch-popover">
+      <label className="ws-color-swatch-popover-label">Global CSS variable</label>
+      <code className="ws-color-swatch-description-code ws-color-swatch-popover-code">
+        {color}
+      </code>
+      <p>
+        <a href={token.value.replace('#', '#color-')}>
+          See all global CSS color variables
+        </a>
+      </p>
+      {token && (
+        <React.Fragment>
+          <label className="ws-color-swatch-popover-label">
+            {isBoxShadow ? 'Value' : 'Hex value'}
+          </label>
+          <p>
+            {isBoxShadow ? token.value : `#${normalizeColor(token.value)}`}
+          </p>
+        </React.Fragment>
+      )}
+      <label className="ws-color-swatch-popover-label">Usage</label>
+      <p>{children}</p>
+    </div>
+  );
+
+  return (
+    <div className="ws-color-swatch">
+      <Popover
+        position="right"
+        aria-label="Global CSS variable"
+        bodyContent={popoverContent}
+      >
+        <svg
+          width="44px"
+          height="44px"
+          viewBox="0 0 44 44"
+          style={isBoxShadow ? { boxShadow: `var(${color})` } : {}}
+        >
+          <circle cx="22" cy="22" r="22" style={{ fill: isBoxShadow ? 'white' : `var(${color})`, stroke: 'var(--pf-global--palette--black-300)' }} />
+          {label === 'Hover' && handSVG}
+        </svg>
+      </Popover>
+      <div className="ws-color-swatch-description">
+        <label className="ws-color-swatch-description-label">
+          {label || token && `#${normalizeColor(token.value)}`} {caption && `(${caption})`}
+        </label>
+        <code className="ws-color-swatch-description-code">
+          {color}
+        </code>
+      </div>
+    </div>
+  );
+}