fix: components are not showing correct high contrast colors in Edge chromium, removed hard code value, and add more examples (#2327)

* add disabled and anchor stories, add opt out property to fix components where HC is not showing up

* add function to check for forced-color for hyperlinks, fixed anchor colors on buttons

* create match-media file to test window.matchMedia method in components spec files

* address regressions, delete import mock files from specs, create mock.js file in packages to use for Jest testing

* prettier

* fix dim text for input text and set color value on hypertext so it doesn't get overridden

* run prettier

* combined selectors in call to action primary

Author: khamudom

packages/fast-component-explorer/mock.js

@@ -0,0 +1,7 @@
+// tslint:disable-next-line: typedef
+window.matchMedia = jest.fn().mockImplementation(query => {
+    return {
+        matches: false,
+        media: query,
+    };
+});

packages/fast-component-explorer/package.json

@@ -30,6 +30,7 @@
   },
   "license": "MIT",
   "jest": {
+    "setupFilesAfterEnv": ["./mock.js"],
     "collectCoverage": true,
     "coverageThreshold": {
       "global": {

packages/fast-components-react-msft/mock.js

@@ -0,0 +1,7 @@
+// tslint:disable-next-line: typedef
+window.matchMedia = jest.fn().mockImplementation(query => {
+    return {
+        matches: false,
+        media: query,
+    };
+});

packages/fast-components-react-msft/package.json

@@ -36,6 +36,7 @@
     "watch": "tsc -p ./tsconfig.build.json -w --preserveWatchOutput"
   },
   "jest": {
+    "setupFilesAfterEnv": ["./mock.js"],
     "collectCoverage": true,
     "coverageThreshold": {
       "global": {

packages/fast-components-react-msft/src/accent-button/accent-button.stories.tsx

@@ -5,7 +5,15 @@ import { glyphFactory, SVGGlyph } from "../../assets/svg-element";
 
 storiesOf("Accent button", module)
     .add("Default", () => <AccentButton>Accent button</AccentButton>)
-    .add("Anchor", () => <AccentButton href="#">Anchor button</AccentButton>)
+    .add("Anchor", () => (
+        <AccentButton
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.download)}
+            afterContent={glyphFactory(SVGGlyph.user)}
+        >
+            Anchor button
+        </AccentButton>
+    ))
     .add("Before content", () => (
         <AccentButton beforeContent={glyphFactory(SVGGlyph.download)}>
             With before content

packages/fast-components-react-msft/src/button/button.stories.tsx

@@ -5,7 +5,15 @@ import { glyphFactory, SVGGlyph } from "../../assets/svg-element";
 
 storiesOf("Button", module)
     .add("Default", () => <Button>Button</Button>)
-    .add("Anchor", () => <Button href="#">Anchor button</Button>)
+    .add("Anchor", () => (
+        <Button
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.user)}
+            afterContent={glyphFactory(SVGGlyph.download)}
+        >
+            Anchor button
+        </Button>
+    ))
     .add("Anchor - disabled", () => (
         <Button href="#" disabled={true}>
             Anchor button
@@ -14,6 +22,16 @@ storiesOf("Button", module)
     .add("Primary", () => (
         <Button appearance={ButtonAppearance.primary}>Primary Button</Button>
     ))
+    .add("Primary Anchor", () => (
+        <Button
+            appearance={ButtonAppearance.primary}
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.user)}
+            afterContent={glyphFactory(SVGGlyph.download)}
+        >
+            Primary Anchor
+        </Button>
+    ))
     .add("Primary - disabled", () => (
         <Button appearance={ButtonAppearance.primary} disabled={true}>
             Primary Button
@@ -35,6 +53,21 @@ storiesOf("Button", module)
             Lightweight Button
         </Button>
     ))
+    .add("Lightweight Anchor", () => (
+        <Button
+            appearance={ButtonAppearance.lightweight}
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.user)}
+            afterContent={glyphFactory(SVGGlyph.download)}
+        >
+            Lightweight Button
+        </Button>
+    ))
+    .add("Lightweight Anchor - disabled", () => (
+        <Button appearance={ButtonAppearance.lightweight} href="#" disabled={true}>
+            Lightweight Button
+        </Button>
+    ))
     .add("Justified", () => (
         <Button appearance={ButtonAppearance.justified}>Justified Button</Button>
     ))

packages/fast-components-react-msft/src/call-to-action/call-to-action.stories.tsx

@@ -7,6 +7,11 @@ storiesOf("Call to action", module)
     .add("Primary", () => (
         <CallToAction appearance={CallToActionAppearance.primary}>Buy now</CallToAction>
     ))
+    .add(" Primary Anchor", () => (
+        <CallToAction appearance={CallToActionAppearance.primary} href="#">
+            Buy now
+        </CallToAction>
+    ))
     .add("Justified", () => (
         <CallToAction appearance={CallToActionAppearance.justified}>Buy now</CallToAction>
     ))

packages/fast-components-react-msft/src/checkbox/checkbox.stories.tsx

@@ -62,4 +62,22 @@ storiesOf("Checkbox", module)
             </Label>
         );
         return <Checkbox inputId={id} onChange={action("onChnage")} label={label} />;
+    })
+    .add("Disabled with label", () => {
+        const id: string = uniqueId();
+        const label: (className: string) => React.ReactNode = (
+            className: string
+        ): React.ReactNode => (
+            <Label className={className} htmlFor={id}>
+                Hello render prop
+            </Label>
+        );
+        return (
+            <Checkbox
+                inputId={id}
+                onChange={action("onChnage")}
+                label={label}
+                disabled={true}
+            />
+        );
     });

packages/fast-components-react-msft/src/lightweight-button/lightweight-button.stories.tsx

@@ -5,7 +5,15 @@ import { glyphFactory, SVGGlyph } from "../../assets/svg-element";
 
 storiesOf("Lightweight button", module)
     .add("Default", () => <LightweightButton>Lightweight button</LightweightButton>)
-    .add("Anchor", () => <LightweightButton href="#">Anchor button</LightweightButton>)
+    .add("Anchor", () => (
+        <LightweightButton
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.download)}
+            afterContent={glyphFactory(SVGGlyph.user)}
+        >
+            Anchor button
+        </LightweightButton>
+    ))
     .add("Before content", () => (
         <LightweightButton beforeContent={glyphFactory(SVGGlyph.download)}>
             With before content

packages/fast-components-react-msft/src/neutral-button/neutral-button.stories.tsx

@@ -5,7 +5,15 @@ import { glyphFactory, SVGGlyph } from "../../assets/svg-element";
 
 storiesOf("Neutral button", module)
     .add("Default", () => <NeutralButton>Neutral button</NeutralButton>)
-    .add("Anchor", () => <NeutralButton href="#">Anchor button</NeutralButton>)
+    .add("Anchor", () => (
+        <NeutralButton
+            href="#"
+            beforeContent={glyphFactory(SVGGlyph.download)}
+            afterContent={glyphFactory(SVGGlyph.user)}
+        >
+            Anchor button
+        </NeutralButton>
+    ))
     .add("Before content", () => (
         <NeutralButton beforeContent={glyphFactory(SVGGlyph.download)}>
             With before content