Added component PFooterHelp

Author: dv-hulkapps

package-lock.json

@@ -18,7 +18,7 @@
     "component library"
   ],
   "license": "MIT",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package.json

@@ -0,0 +1,6 @@
+PLink example:
+
+Internal Link
+```vue
+  <PFooterHelp>Learn more about fulfilling orders</PFooterHelp>
+```

src/components/PFooterHelp/PFooterHelp.md

@@ -0,0 +1,45 @@
+<template>
+  <div :class="className">
+    <div class="Polaris-FooterHelp__Content">
+      <slot name="icon">
+        <div class="Polaris-FooterHelp__Icon">
+          <PIcon color="teal" source="CircleInformationMajorMonotone" />
+        </div>
+      </slot>
+      <div class="Polaris-FooterHelp__Text">
+        <slot/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Prop} from 'vue-property-decorator';
+import {classNames, variationName} from '@/utilities/css';
+import {PIcon} from '@/components/PIcon';
+
+@Component({
+  components: { PIcon },
+})
+
+export default class PFooterHelp extends Vue {
+
+  @Prop(String) public id!: string;
+  @Prop(String) public url!: string;
+  @Prop(String) public to!: string;
+  @Prop(Boolean) public external!: boolean;
+  @Prop(Boolean) public monochrome!: boolean;
+
+  public get isStringSlot() {
+
+    const slots = (this.$slots.default || []);
+    return this.external && slots.length === 1 && slots[0].text;
+  }
+
+  public get className() {
+    return classNames(
+        'Polaris-FooterHelp',
+    );
+  }
+}
+</script>

src/components/PFooterHelp/PFooterHelp.vue

@@ -0,0 +1,2 @@
+import PFooterHelp from './PFooterHelp.vue';
+export { PFooterHelp };

src/components/PFooterHelp/index.ts

@@ -52,6 +52,7 @@ import { PDatePicker } from './PDatePicker';
 import { PMediaCard } from './PMediaCard';
 import { PChart } from './PChart';
 import { PEmptyState } from './PEmptyState';
+import { PFooterHelp } from './PFooterHelp';
 import VTooltip from 'v-tooltip'
 
 import '@/scss/main.scss';
@@ -111,6 +112,7 @@ const Components = {
   PMediaCard,
   PChart,
   PEmptyState,
+  PFooterHelp
 };
 
 const PolarisVue = {

src/components/index.js

@@ -0,0 +1,66 @@
+
+.Polaris-FooterHelp {
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
+  width: 100%;
+}
+
+@media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em) {
+  [data-has-navigation] .Polaris-FooterHelp {
+    margin: 2rem;
+    width: auto;
+  }
+}
+
+@media (min-width: 30.625em) {
+  .Polaris-FooterHelp {
+    margin: 2rem;
+    width: auto;
+  }
+}
+
+.Polaris-FooterHelp__Content {
+  display: inline-flex;
+  align-items: center;
+  padding: 2rem 2rem 2rem 1.6rem;
+  border-top: var(--p-override-none, 0.1rem solid var(--p-border-subdued));
+  border-bottom: var(--p-override-none, 0.1rem solid var(--p-border-subdued));
+  width: 100%;
+  justify-content: center;
+}
+
+@media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em) {
+  [data-has-navigation] .Polaris-FooterHelp__Content {
+    width: auto;
+    border: var(--p-override-none, 0.1rem solid var(--p-border-subdued));
+    border-radius: var(--p-override-none, 999px);
+  }
+}
+
+@media (min-width: 30.625em) {
+  .Polaris-FooterHelp__Content {
+    width: auto;
+    border: var(--p-override-none, 0.1rem solid var(--p-border-subdued));
+    border-radius: var(--p-override-none, 999px);
+  }
+}
+
+.Polaris-FooterHelp__Icon {
+  margin-right: 0.8rem;
+}
+
+.Polaris-FooterHelp__Text {
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.4rem;
+  border: none;
+  text-transform: initial;
+  letter-spacing: initial;
+}
+
+@media (min-width: 40em) {
+  .Polaris-FooterHelp__Text {
+    font-size: 1.4rem;
+  }
+}

src/css/footer_help.scss

@@ -33,4 +33,5 @@
 @import 'general';
 @import 'link';
 @import 'page';
-@import 'emptystate';
+@import 'emptystate';
+@import 'footer_help';