Added Link component #19

README.md

@@ -73,6 +73,10 @@ Take a look at the [Component Progress Issue](https://github.com/s-bauer/office-
 - [Toggle](https://developer.microsoft.com/en-us/fabric#/components/toggle)
     - Model: :checked / @change 
     - Props: label, onText, offText, disabled
+- [Link](https://developer.microsoft.com/en-us/fabric#/components/link)
+    - Props: disabled, href
+    - Info: `<button>` or `<a>` is exposed, so all events and props can be used
+
 
 ## CI / CD
 

src/components/Link/OfficeLink.styles.ts

@@ -0,0 +1,95 @@
+import {IOfficeLinkStyleProps, IOfficeLinkStyles} from "@/components/Link/OfficeLink.types";
+import {HighContrastSelector, HighContrastSelectorBlack, HighContrastSelectorWhite} from "@/styling";
+import {IsFocusVisibleClassName} from "@/styling/styles/getFocusStyle";
+import {getGlobalClassNames} from "@/styling/styles/getGlobalClassNames";
+
+const GlobalClassNames = {
+  root: "ms-Link"
+};
+
+export const getStyles = (props: IOfficeLinkStyleProps): IOfficeLinkStyles => {
+  const { className, isButton, isDisabled, theme } = props;
+  const { semanticColors } = theme;
+
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  return {
+    root: [
+      classNames.root,
+      theme.fonts.medium,
+      {
+        color: semanticColors.link,
+        outline: "none",
+        fontSize: "inherit",
+        fontWeight: "inherit",
+        selectors: {
+          [`.${IsFocusVisibleClassName} &:focus`]: {
+            // Can't use getFocusStyle because it doesn't support wrapping links
+            // https://github.com/OfficeDev/office-ui-fabric-react/issues/4883#issuecomment-406743543
+            outline: `1px solid ${theme.palette.neutralSecondary}`
+          }
+        }
+      },
+      isButton && {
+        background: "none",
+        backgroundColor: "transparent",
+        border: "none",
+        cursor: "pointer",
+        display: "inline",
+        margin: 0,
+        overflow: "inherit",
+        padding: 0,
+        textAlign: "left",
+        textOverflow: "inherit",
+        userSelect: "text",
+        borderBottom: "1px solid transparent", // For Firefox high contrast mode
+        selectors: {
+          [HighContrastSelectorBlack]: {
+            color: "#FFFF00"
+          },
+          [HighContrastSelectorWhite]: {
+            color: "#00009F"
+          },
+          "@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)": {
+            // For IE high contrast mode
+            borderBottom: "none"
+          }
+        }
+      },
+      !isButton && {
+        textDecoration: "none"
+      },
+      isDisabled && [
+        "is-disabled",
+        {
+          color: semanticColors.disabledText,
+          cursor: "default"
+        },
+        {
+          selectors: {
+            "&:link, &:visited": {
+              pointerEvents: "none"
+            }
+          }
+        }
+      ],
+      !isDisabled && {
+        selectors: {
+          "&:active, &:hover, &:active:hover": {
+            color: semanticColors.linkHovered,
+            selectors: {
+              [HighContrastSelector]: {
+                textDecoration: "underline"
+              }
+            }
+          },
+          "&:focus": {
+            color: semanticColors.link
+          }
+        }
+      },
+      classNames.root,
+      className
+    ]
+  };
+};

src/components/Link/OfficeLink.types.ts

@@ -0,0 +1,43 @@
+import {ITheme} from "@/styling";
+import {IStyle} from "@uifabric/merge-styles";
+
+export interface IOfficeLinkHTMLAttributes<T> {
+  // Shared
+  type?: string;
+
+  // Anchor
+  download?: any;
+  href?: string;
+  hrefLang?: string;
+  media?: string;
+  rel?: string;
+  target?: string;
+
+  // Button
+  autoFocus?: boolean;
+  disabled?: boolean;
+  form?: string;
+  formAction?: string;
+  formEncType?: string;
+  formMethod?: string;
+  formNoValidate?: boolean;
+  formTarget?: string;
+  name?: string;
+  value?: string | string[] | number;
+}
+
+export interface IOfficeLinkProps {
+  disabled?: boolean;
+  href?: string;
+}
+
+export interface IOfficeLinkStyleProps {
+  className?: string;
+  isButton?: boolean;
+  isDisabled?: boolean;
+  theme: ITheme;
+}
+
+export interface IOfficeLinkStyles {
+  root: IStyle;
+}

src/components/Link/OfficeLink.vue

@@ -0,0 +1,46 @@
+<template>
+    <component :is="rootType" v-bind="rootProps" @click="onClick">
+        <slot/>
+    </component>
+</template>
+
+<script lang="ts">
+    import {getStyles} from "@/components/Link/OfficeLink.styles";
+    import {IOfficeLinkProps} from "@/components/Link/OfficeLink.types";
+    import {loadTheme} from "@/styling";
+    import {mergeStyleSets} from "@uifabric/merge-styles";
+    import {Component, Prop, Vue} from "vue-property-decorator";
+
+    @Component
+    export default class OfficeLink extends Vue implements IOfficeLinkProps {
+        @Prop({type: Boolean}) public disabled!: boolean;
+        @Prop({type: String, default: null}) public href?: string;
+
+        private get rootType() {
+            return this.href ? "a" : "button";
+        }
+
+        private get rootProps() {
+            return {
+                "class": this.classNames.root,
+                "href": this.href ? this.href : undefined
+            };
+        }
+
+        private onClick(evnt: MouseEvent) {
+            if (this.disabled) {
+                evnt.preventDefault();
+            } else {
+                this.$emit("click", evnt);
+            }
+        }
+
+        private get classNames() {
+            return mergeStyleSets(getStyles({
+                theme: loadTheme({}),
+                isButton: !this.href,
+                isDisabled: this.disabled
+            }));
+        }
+    }
+</script>

src/components/Overview.vue

@@ -78,6 +78,15 @@ import {ImageFit} from "./Image/OfficeImage.types";
             <OfficeToggle :disabled="disabled" label="Normal Toggle" onText="on" offText="off" v-model="toggleChecked"></OfficeToggle>
             <OfficeLabel :disabled="disabled" :required="required">Toggle: {{ toggleChecked ? 'on' : 'off' }}</OfficeLabel>
         </div>
+
+        <div class="card">
+            <h5>Links</h5>
+            A Link to <OfficeLink href="https://google.com">Google</OfficeLink>
+            <br>
+            Another link without href <OfficeLink @click="linkClicked">IS HERE</OfficeLink>
+            <br>
+            And a <OfficeLink disabled>Disabled Link!</OfficeLink>
+        </div>
     </div>
 </template>
 
@@ -88,6 +97,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
     import {ImageFit} from "@/components/Image/OfficeImage.types";
     import OfficeImage from "@/components/Image/OfficeImage.vue";
     import OfficeLabel from "@/components/Label/OfficeLabel.vue";
+    import OfficeLink from "@/components/Link/OfficeLink.vue";
     import OfficeToggle from "@/components/Toggle/OfficeToggle.vue";
 
     import {Component, Prop, Vue} from "vue-property-decorator";
@@ -97,6 +107,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
 
     @Component({
         components: {
+            OfficeLink,
             OfficeToggle,
             OfficeChoiceGroupOption,
             OfficeChoiceGroup,
@@ -124,6 +135,10 @@ import {ImageFit} from "./Image/OfficeImage.types";
         private required: boolean = false;
 
         private checkboxChecked: boolean = false;
+
+        private linkClicked() {
+            alert("clicked!");
+        }
     }
 </script>