diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-29 00:07:10 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-29 00:07:10 +0300 |
commit | a955f4024d40663f4b1affd74a346ffc96a92371 (patch) | |
tree | 7ed63c2c6451791b95cef89a49e33852b4c310ea /app/assets | |
parent | 0e08747b3d348b6c0effae19fe7050af327c05e2 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js | 35 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue | 44 |
2 files changed, 79 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js new file mode 100644 index 00000000000..0576e9796fc --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js @@ -0,0 +1,35 @@ +import HelpPageLink from './help_page_link.vue'; + +export default { + component: HelpPageLink, + title: 'vue_shared/help_page_link', +}; + +const Template = (args, { argTypes }) => ({ + components: { HelpPageLink }, + props: Object.keys(argTypes), + template: '<help-page-link v-bind="$props">link</help-page-link>', +}); + +export const Default = Template.bind({}); +Default.args = { + href: 'user/usage_quotas', +}; + +export const LinkWithAnAnchor = Template.bind({}); +LinkWithAnAnchor.args = { + ...Default.args, + anchor: 'namespace-storage-limit', +}; + +export const LinkWithAnchorInPath = Template.bind({}); +LinkWithAnchorInPath.args = { + ...Default.args, + href: 'user/usage_quotas#namespace-storage-limit', +}; + +export const CustomAttributes = Template.bind({}); +CustomAttributes.args = { + ...Default.args, + target: '_blank', +}; diff --git a/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue new file mode 100644 index 00000000000..11b269855ad --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue @@ -0,0 +1,44 @@ +<script> +import { GlLink } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +/** + * Component to link to GitLab docs. + * + * @example + * <help-page-link href="user/usage_quotas"> + * Usage Quotas help. + * <help-page-link> + */ +export default { + name: 'HelpPageLink', + components: { + GlLink, + }, + props: { + href: { + type: String, + required: true, + }, + anchor: { + type: String, + required: false, + default: null, + }, + }, + computed: { + compiledHref() { + return helpPagePath(this.href, { anchor: this.anchor }); + }, + attributes() { + const { href, anchor, ...attrs } = this.$attrs; + return attrs; + }, + }, +}; +</script> +<template> + <gl-link v-bind="attributes" :href="compiledHref" v-on="$listeners"> + <slot></slot> + </gl-link> +</template> |