chore: Add StaticStates wrapper

.storybook/config.js

@@ -35,19 +35,26 @@ addDecorator(FontsDecorator);
 addDecorator(CanvasProviderDecorator);
 
 /** If the string contains a phrase, prefix it. This is useful for making ordering sections */
-const prefix = (phrase, prefix) => value => (value.indexOf(phrase) > -1 ? prefix + value : value);
+const prefix = (phrase, prefix) => (/** @type {string} */ value) => {
+  const index = value.indexOf(phrase);
+  return index > -1 ? value.substr(0, index) + prefix + value.substr(index) : value;
+};
 const pipe = (...fns) => value => fns.reduce((result, fn) => fn(result), value);
 
 function storySort(a, b) {
   const prefixFn = pipe(
     prefix('welcome-', '0'),
-    prefix('getting-started', '0'),
+    prefix('getting-started', 'a'),
     prefix('tokens-', '1'),
     prefix('components-', '2'),
-    prefix('labs-', '3')
+    prefix('labs-', '3'),
+    prefix('default', 'aa'),
+    prefix('states', 'zz')
   );
+
   const left = prefixFn(a[0]);
   const right = prefixFn(b[0]);
+
   return left === right ? 0 : left.localeCompare(right);
 }
 

modules/_labs/core/react/lib/StaticStates.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {useTheme} from './theming/useTheme';
+import CanvasProvider from './CanvasProvider';
+import {CanvasTheme} from './theming';
+
+export const StaticStates: React.FC = ({children}) => {
+  const theme: CanvasTheme & {_staticStates?: boolean} = useTheme();
+  theme._staticStates = true;
+
+  return <CanvasProvider theme={theme}>{children}</CanvasProvider>;
+};

modules/_labs/core/react/lib/theming/styled.ts

@@ -7,21 +7,40 @@ const noop = (styles: any) => styles;
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
 
+export const convertToStaticStates = (obj?: CSSObject): CSSObject | undefined => {
+  if (!obj) {
+    return obj;
+  }
+
+  return Object.keys(obj).reduce((result, key) => {
+    const newKey = key
+      .replace(/^:/, '&:') // handle shorthand like ":focus"
+      .replace(/,(\s+):/g, ',$1&:') // handle selectors like ":focus, :hover"
+      .replace(/:(focus|hover|active)/g, '.$1')
+      .replace(/\[data\-whatinput="?(mouse|touch|keyboard|pointer)"?]/g, '[data-whatinput="noop"]');
+    const value =
+      typeof obj[key] === 'object' ? convertToStaticStates(obj[key] as CSSObject) : obj[key];
+    const newObj = {...result, [newKey]: value};
+    return newObj;
+  }, {});
+};
+
 function styled<Props>(node: any) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (props: Props & {theme: CanvasTheme; direction: ContentDirection}) => {
+      interpolation => (props: Props & {theme: CanvasTheme & {_staticStates?: boolean}}) => {
         props.theme = useTheme(props.theme);
         const direction = props.theme.direction;
         const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
+        const maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
 
         try {
           if (typeof interpolation === 'function') {
-            return maybeFlip(interpolation(props) as CSSObject);
+            return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
           }
-          return maybeFlip(interpolation as CSSObject);
+          return maybeFlip(maybeConvert(interpolation) as CSSObject);
         } catch (e) {
-          return interpolation;
+          return maybeConvert(interpolation);
         }
       }
     );

modules/_labs/core/react/spec/styled.spec.ts

@@ -0,0 +1,134 @@
+import {convertToStaticStates} from '../lib/theming/styled';
+
+describe('changeToStaticStates', () => {
+  it('should convert ":hover" to "&.hover"', () => {
+    const input = {':hover': {display: 'none'}};
+    const expected = {
+      '&.hover': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert ":active" to "&.active"', () => {
+    const input = {':active': {display: 'none'}};
+    const expected = {
+      '&.active': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert ":focus" to "&.focus"', () => {
+    const input = {':focus': {display: 'none'}};
+    const expected = {
+      '&.focus': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert "&:hover" to "&.hover"', () => {
+    const input = {'&:hover': {display: 'none'}};
+    const expected = {
+      '&.hover': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert "&:focus" to "&.focus"', () => {
+    const input = {'&:focus': {display: 'none'}};
+    const expected = {
+      '&.focus': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert "div:focus" to "div.focus"', () => {
+    const input = {'div:focus': {display: 'none'}};
+    const expected = {
+      'div.focus': {
+        display: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert nested object', () => {
+    const input = {
+      div: {
+        span: {
+          ':hover': {
+            display: 'none',
+          },
+        },
+      },
+    };
+    const expected = {
+      div: {
+        span: {
+          '&.hover': {
+            display: 'none',
+          },
+        },
+      },
+    };
+
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should convert multi-selectors', () => {
+    const input = {
+      [`:hover, :focus`]: {
+        display: 'none',
+      },
+    };
+    const expected = {
+      [`&.hover, &.focus`]: {
+        display: 'none',
+      },
+    };
+
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should not convert :not or :disabled', () => {
+    const input = {
+      '&:not(:disabled)': {
+        display: 'none',
+      },
+    };
+    const expected = {
+      '&:not(:disabled)': {
+        display: 'none',
+      },
+    };
+
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+
+  it('should handle falsy objects', () => {
+    expect(convertToStaticStates(undefined)).toEqual(undefined);
+  });
+
+  it('should remove data-whatinput modifiers', () => {
+    const input = {
+      '[data-whatinput="mouse"], [data-whatinput=keyboard], [data-whatinput="pointer"], [data-whatinput="touch"]': {
+        outline: 'none',
+      },
+    };
+    const expected = {
+      '[data-whatinput="noop"], [data-whatinput="noop"], [data-whatinput="noop"], [data-whatinput="noop"]': {
+        outline: 'none',
+      },
+    };
+    expect(convertToStaticStates(input)).toEqual(expected);
+  });
+});