slippers-ui 0.14.12 → 0.14.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -10
- package/dist/slippersComponents.common.js +22 -10
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -8,9 +8,9 @@ We're always looking for feedback to improve the experience of working with Slip
|
|
|
8
8
|
We happily accept contributions, no matter how small.
|
|
9
9
|
Feel free to submit an issue or open a merge request!
|
|
10
10
|
|
|
11
|
-
## Get Started Here!
|
|
11
|
+
## Get Started Here!
|
|
12
12
|
|
|
13
|
-
Slippers is build with [VueCLI](https://cli.vuejs.org/guide/), [Storybook](https://storybook.js.org/), and [TailwindCSS](https://tailwindcss.com/). TailwindCSS has been configured as [PostCSS plugin](https://postcss.org/).
|
|
13
|
+
Slippers is build with [VueCLI](https://cli.vuejs.org/guide/), [Storybook](https://storybook.js.org/), and [TailwindCSS](https://tailwindcss.com/). TailwindCSS has been configured as [PostCSS plugin](https://postcss.org/).
|
|
14
14
|
|
|
15
15
|
### Local Development Instructions
|
|
16
16
|
|
|
@@ -35,21 +35,20 @@ This article is a good practical example on how [Storybook works and how to use
|
|
|
35
35
|
|
|
36
36
|
Gotchas: [Args in Storybook](https://storybook.js.org/docs/vue/writing-stories/args) vs Props in Vue
|
|
37
37
|
|
|
38
|
-
## Slippers Documentation
|
|
38
|
+
## Slippers Documentation
|
|
39
39
|
|
|
40
|
-
You can find our documentation in the [Storybook instance for this repository](https://gitlab-com.gitlab.io/marketing/
|
|
40
|
+
You can find our documentation in the [Storybook instance for this repository](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui?path=/story/get-started--page).
|
|
41
41
|
|
|
42
42
|
Keeping documentation in Storybook allows us to keep a [single source of truth](https://about.gitlab.com/company/culture/all-remote/handbook-first-documentation/#creating-a-home-for-a-single-source-of-truth-ssot) for this repository's documentation, alongside the code-based stories as well.
|
|
43
43
|
|
|
44
|
-
1. [Get Started](https://gitlab-com.gitlab.io/marketing/
|
|
45
|
-
1. [Releases](https://gitlab-com.gitlab.io/marketing/
|
|
46
|
-
1. [Tailwind CSS](https://gitlab-com.gitlab.io/marketing/
|
|
47
|
-
1. [Storybook](https://gitlab-com.gitlab.io/marketing/
|
|
48
|
-
|
|
44
|
+
1. [Get Started](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui?path=/story/get-started--page)
|
|
45
|
+
1. [Releases](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui?path=/story/releases--page)
|
|
46
|
+
1. [Tailwind CSS](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui?path=/story/tailwind-css--page)
|
|
47
|
+
1. [Storybook](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui?path=/story/storybook--page)
|
|
49
48
|
|
|
50
49
|
## Tailwind Config Viewer
|
|
51
50
|
|
|
52
|
-
A key idea that we want to reinforce about styling in Slippers is that we _heavily_ modify the [default TailwindCSS configuration](https://unpkg.com/browse/tailwindcss@2.0.4/stubs/defaultConfig.stub.js). While the [TailwindCSS docs page](https://tailwindcss.com/docs) is still helpful, much of it does not reflect our configuration for this repository. To help with this, we have added a page that displays the existing utility classes within our current TailwindCSS configuration. URL: [https://gitlab-com.gitlab.io/marketing/
|
|
51
|
+
A key idea that we want to reinforce about styling in Slippers is that we _heavily_ modify the [default TailwindCSS configuration](https://unpkg.com/browse/tailwindcss@2.0.4/stubs/defaultConfig.stub.js). While the [TailwindCSS docs page](https://tailwindcss.com/docs) is still helpful, much of it does not reflect our configuration for this repository. To help with this, we have added a page that displays the existing utility classes within our current TailwindCSS configuration. URL: [https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/tailwind/](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-uitailwind/). To run locally, run `yarn serve:tailwind-viewer`
|
|
53
52
|
|
|
54
53
|
## Building for production
|
|
55
54
|
|
|
@@ -642,12 +642,12 @@ if (typeof window !== 'undefined') {
|
|
|
642
642
|
// Indicate to webpack that this file can be concatenated
|
|
643
643
|
/* harmony default export */ var setPublicPath = (null);
|
|
644
644
|
|
|
645
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3c05d7d8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ComparisonInfographic/comparison-infographic.vue?vue&type=template&id=
|
|
646
|
-
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"slp-bg-white slp-relative slp-pt-60"},[_c('div',{staticClass:"slp-comparison-infographic__bg"}),_c('div',{staticClass:"slp-comparison-infographic"},[_c('header',{staticClass:"slp-comparison-infographic__header"},[_c('SlpComparisonInfographicGlitter',{staticClass:"slp-comparison-infographic__header__glitter"}),_c('h2',{staticClass:"slp-comparison-infographic__header-h2"},[_vm._v(" GitLab vs "+_vm._s(_vm.competitorName)+" ")]),_c('p',{staticClass:"slp-comparison-infographic__header-p"},[_vm._v(" Feature maturity comparison against set of industry standards ")]),_c('p',{staticClass:"slp-comparison-infographic__header-a"},[(_vm.methodologyLink)?_c('a',{attrs:{"href":_vm.methodologyLink}},[_vm._v("Learn more about our scoring methodology "),_c('slp-arrow-right',{staticClass:"slp-inline-block"})],1):_vm._e()])],1),_c('SlpComparisonInfographicChart',{attrs:{"left":true,"logo":_vm.gitlabLogo,"name":'GitLab',"percentage":_vm.gitlabPercentage,"score":_vm.gitlabScore,"max":_vm.max}}),_c('SlpComparisonInfographicChart',{attrs:{"left":false,"logo":_vm.competitorLogo,"name":_vm.competitorName,"percentage":_vm.competitorPercentage,"score":_vm.competitorScore,"max":_vm.max}})],1),_c('div',{staticClass:"slp-comparison-infographic md:slp-pt-32"},[_c('table',{staticClass:"slp-comparison-infographic__table"},[_c('thead',{staticClass:"slp-comparison-infographic__table__head"},[_c('tr',{staticClass:"slp-comparison-infographic__table__headers"},[_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-2"}),_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-4"},[_c('img',{staticClass:"slp-block slp-mx-auto",attrs:{"src":_vm.gitlabLogo,"alt":"GitLab logo to represent the GitLab score columns","width":"35","height":"32"}})]),_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-4"},[_c('img',{staticClass:"slp-block slp-mx-auto",attrs:{"src":_vm.competitorLogo,"alt":(_vm.competitorName + " logo to represent the " + _vm.competitorName + " score columns"),"width":"35","height":"32"}})])])]),_c('tbody',{staticClass:"md:slp-col-span-full"},_vm._l((_vm.sortedCategories),function(category){return _c('tr',{key:((category.label) + "TableRow"),class:_vm.computedTableRowClass(category.key)},[_c('td',{staticClass:"slp-comparison-infographic__table__cell--icon"},[_c('SlpComparisonInfographicIcon',{staticClass:"slp-comparison-infographic__table__icon",attrs:{"icon":category.key}}),_c('span',{staticClass:"slp-comparison-infographic__table__icon__label"},[_vm._v(_vm._s(category.label))])],1),_c('td',{staticClass:"slp-comparison-infographic__table__cell--bar"},[_c('SlpComparisonInfographicBar',{attrs:{"active":true,"categoryData":_vm.gitlabData[category.key]}})],1),_c('td',{staticClass:"slp-comparison-infographic__table__cell--bar"},[_c('SlpComparisonInfographicBar',{attrs:{"active":!_vm.singleTool || _vm.singleToolCategory === category.key,"categoryData":_vm.competitorData[category.key]}})],1)])}),0)])])])}
|
|
645
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3c05d7d8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ComparisonInfographic/comparison-infographic.vue?vue&type=template&id=4b7dd8f1&
|
|
646
|
+
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"slp-bg-white slp-relative slp-pt-60"},[_c('div',{staticClass:"slp-comparison-infographic__bg"}),_c('div',{staticClass:"slp-comparison-infographic"},[_c('header',{staticClass:"slp-comparison-infographic__header"},[_c('SlpComparisonInfographicGlitter',{staticClass:"slp-comparison-infographic__header__glitter"}),_c('h2',{staticClass:"slp-comparison-infographic__header-h2"},[_vm._v(" GitLab vs "+_vm._s(_vm.competitorName)+" ")]),_c('p',{staticClass:"slp-comparison-infographic__header-p"},[_vm._v(" Feature maturity comparison against set of industry standards ")]),_c('p',{staticClass:"slp-comparison-infographic__header-a"},[(_vm.methodologyLink)?_c('a',{attrs:{"href":_vm.methodologyLink,"data-ga-name":_vm.dataGaName,"data-ga-location":_vm.dataGaLocation}},[_vm._v("Learn more about our scoring methodology "),_c('slp-arrow-right',{staticClass:"slp-inline-block"})],1):_vm._e()])],1),_c('SlpComparisonInfographicChart',{attrs:{"left":true,"logo":_vm.gitlabLogo,"name":'GitLab',"percentage":_vm.gitlabPercentage,"score":_vm.gitlabScore,"max":_vm.max}}),_c('SlpComparisonInfographicChart',{attrs:{"left":false,"logo":_vm.competitorLogo,"name":_vm.competitorName,"percentage":_vm.competitorPercentage,"score":_vm.competitorScore,"max":_vm.max}})],1),_c('div',{staticClass:"slp-comparison-infographic md:slp-pt-32"},[_c('table',{staticClass:"slp-comparison-infographic__table"},[_c('thead',{staticClass:"slp-comparison-infographic__table__head"},[_c('tr',{staticClass:"slp-comparison-infographic__table__headers"},[_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-2"}),_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-4"},[_c('img',{staticClass:"slp-block slp-mx-auto",attrs:{"src":_vm.gitlabLogo,"alt":"GitLab logo to represent the GitLab score columns","width":"35","height":"32"}})]),_c('th',{staticClass:"slp-comparison-infographic__table__header md:slp-col-span-4"},[_c('img',{staticClass:"slp-block slp-mx-auto",attrs:{"src":_vm.competitorLogo,"alt":(_vm.competitorName + " logo to represent the " + _vm.competitorName + " score columns"),"width":"35","height":"32"}})])])]),_c('tbody',{staticClass:"md:slp-col-span-full"},_vm._l((_vm.sortedCategories),function(category){return _c('tr',{key:((category.label) + "TableRow"),class:_vm.computedTableRowClass(category.key)},[_c('td',{staticClass:"slp-comparison-infographic__table__cell--icon"},[_c('SlpComparisonInfographicIcon',{staticClass:"slp-comparison-infographic__table__icon",attrs:{"icon":category.key}}),_c('span',{staticClass:"slp-comparison-infographic__table__icon__label"},[_vm._v(_vm._s(category.label))])],1),_c('td',{staticClass:"slp-comparison-infographic__table__cell--bar"},[_c('SlpComparisonInfographicBar',{attrs:{"active":true,"categoryData":_vm.gitlabData[category.key]}})],1),_c('td',{staticClass:"slp-comparison-infographic__table__cell--bar"},[_c('SlpComparisonInfographicBar',{attrs:{"active":!_vm.singleTool || _vm.singleToolCategory === category.key,"categoryData":_vm.competitorData[category.key]}})],1)])}),0)])])])}
|
|
647
647
|
var staticRenderFns = []
|
|
648
648
|
|
|
649
649
|
|
|
650
|
-
// CONCATENATED MODULE: ./src/components/ComparisonInfographic/comparison-infographic.vue?vue&type=template&id=
|
|
650
|
+
// CONCATENATED MODULE: ./src/components/ComparisonInfographic/comparison-infographic.vue?vue&type=template&id=4b7dd8f1&
|
|
651
651
|
|
|
652
652
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3c05d7d8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/icons/arrow-right.vue?vue&type=template&id=f323232c&
|
|
653
653
|
var arrow_rightvue_type_template_id_f323232c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"width":"9","height":"6","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"slp-fill-current group-hover:slp-text-ui-secondary group-focus:slp-text-ui-secondary",attrs:{"d":"M6.685.683L9 3 6.685 5.317a.624.624 0 11-.883-.884l.808-.808H.624a.625.625 0 010-1.25H6.61l-.808-.808a.625.625 0 01.883-.884z","fill":"none"}})])}
|
|
@@ -1893,6 +1893,10 @@ var comparison_infographic_icon_component = normalizeComponent(
|
|
|
1893
1893
|
//
|
|
1894
1894
|
//
|
|
1895
1895
|
//
|
|
1896
|
+
//
|
|
1897
|
+
//
|
|
1898
|
+
//
|
|
1899
|
+
//
|
|
1896
1900
|
|
|
1897
1901
|
|
|
1898
1902
|
|
|
@@ -1977,6 +1981,14 @@ var comparison_infographic_icon_component = normalizeComponent(
|
|
|
1977
1981
|
singleToolCategory: {
|
|
1978
1982
|
type: String,
|
|
1979
1983
|
required: false
|
|
1984
|
+
},
|
|
1985
|
+
dataGaName: {
|
|
1986
|
+
type: String,
|
|
1987
|
+
required: true
|
|
1988
|
+
},
|
|
1989
|
+
dataGaLocation: {
|
|
1990
|
+
type: String,
|
|
1991
|
+
required: true
|
|
1980
1992
|
}
|
|
1981
1993
|
},
|
|
1982
1994
|
|
|
@@ -2218,12 +2230,12 @@ var free_trial_banner_component = normalizeComponent(
|
|
|
2218
2230
|
)
|
|
2219
2231
|
|
|
2220
2232
|
/* harmony default export */ var free_trial_banner = (free_trial_banner_component.exports);
|
|
2221
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3c05d7d8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HeaderBanner/header-banner.vue?vue&type=template&id=
|
|
2222
|
-
var
|
|
2223
|
-
var
|
|
2233
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3c05d7d8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HeaderBanner/header-banner.vue?vue&type=template&id=f6f9970c&
|
|
2234
|
+
var header_bannervue_type_template_id_f6f9970c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"slp-sticky slp-z-50 slp-w-full slp-flex slp-items-center slp-justify-center slp-top-28",staticStyle:{"background":"#9b51e0"}},[_vm._m(0),_c('button',{staticClass:"slp-absolute slp-right-4 slp-p-16 slp-outline-none slp-border-none"},[_c('slp-close',{staticClass:"slp-text-white slp-fill-current"})],1)])}
|
|
2235
|
+
var header_bannervue_type_template_id_f6f9970c_staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',{staticClass:"md:slp-text-lg slp-text-md slp-p-16 slp-pr-60 slp-text-center slp-text-white slp-mb-0"},[_vm._v(" What happened when DevOps met Covid? Find out in our 2021 survey. "),_c('a',{staticClass:"slp-underline slp-text-white",attrs:{"href":"/"}},[_vm._v("Read our results")])])}]
|
|
2224
2236
|
|
|
2225
2237
|
|
|
2226
|
-
// CONCATENATED MODULE: ./src/components/HeaderBanner/header-banner.vue?vue&type=template&id=
|
|
2238
|
+
// CONCATENATED MODULE: ./src/components/HeaderBanner/header-banner.vue?vue&type=template&id=f6f9970c&
|
|
2227
2239
|
|
|
2228
2240
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HeaderBanner/header-banner.vue?vue&type=script&lang=js&
|
|
2229
2241
|
//
|
|
@@ -2249,7 +2261,7 @@ var header_bannervue_type_template_id_df7939c6_staticRenderFns = [function () {v
|
|
|
2249
2261
|
/**
|
|
2250
2262
|
* Use this comment block to generate documentation for your component.
|
|
2251
2263
|
*
|
|
2252
|
-
* Whatever you write here turns into Storybook documentation, [as seen here, in the "Docs" tab](https://gitlab-com.gitlab.io/marketing/
|
|
2264
|
+
* Whatever you write here turns into Storybook documentation, [as seen here, in the "Docs" tab](https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/?path=/docs/components-youtube-embed--default).
|
|
2253
2265
|
*
|
|
2254
2266
|
* You can use markdown syntax in this block comment.
|
|
2255
2267
|
*/
|
|
@@ -2272,8 +2284,8 @@ var header_bannervue_type_template_id_df7939c6_staticRenderFns = [function () {v
|
|
|
2272
2284
|
|
|
2273
2285
|
var header_banner_component = normalizeComponent(
|
|
2274
2286
|
HeaderBanner_header_bannervue_type_script_lang_js_,
|
|
2275
|
-
|
|
2276
|
-
|
|
2287
|
+
header_bannervue_type_template_id_f6f9970c_render,
|
|
2288
|
+
header_bannervue_type_template_id_f6f9970c_staticRenderFns,
|
|
2277
2289
|
false,
|
|
2278
2290
|
null,
|
|
2279
2291
|
null,
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "slippers-ui",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.13",
|
|
4
4
|
"description": "GitLab Marketing Design System",
|
|
5
|
-
"homepage": "https://gitlab-com.gitlab.io/marketing/
|
|
5
|
+
"homepage": "https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui",
|
|
6
6
|
"bugs": {
|
|
7
|
-
"url": "https://gitlab.com/gitlab-com/marketing/
|
|
7
|
+
"url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui-/issues"
|
|
8
8
|
},
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"author": "GitLab",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://gitlab.com/gitlab-com/marketing/
|
|
25
|
+
"url": "https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.git"
|
|
26
26
|
},
|
|
27
27
|
"scripts": {
|
|
28
28
|
"start": "concurrently --kill-others \"yarn storybook:quiet\" \"yarn watch:css\" -p \"[{name}]\" -n \"Storybook,PostCSS\" -c \"bgBlue.bold,bgMagenta.bold\"",
|