Compare revisions

f3fcefc2 · aea9b5fd · bfb41c5c · 4ba61cd0 · 28ed9d53 · 17f40732
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,7 +15,7 @@ build:
    - npm run build
  after_script:
    - TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
-    - echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
+    - echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
    - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
  artifacts:
    expire_in: 30 min

--- a/LICENSE
+++ b/LICENSE
--- a/README.md
+++ b/README.md
@@ -35,7 +35,6 @@ The `npm` command will install project dependencies and the `npm run develop`
 command builds the project, sets up a local server for the Patternlab UI and
 watches relevant template files to rebuild on any changes.

-
 ### Build

 The build command compiles the styleguide CSS and the Patternlab output but it
@@ -92,3 +91,43 @@ current project settings. Add/modify icons and finally download your new icon
 font. Delete contents of the `source/icons` and put all the content from your
 downloaded font. When finished, run `npm run update-iconset` that will update
 both the style and pattern file automatically.
+
+
+## Developing other websites with pirati-ui
+
+In order to integrate `pirati-ui` with other websites, you will need to include
+at least the CSS source that defines look and feel. Simply place the following
+code in your `<head>`:
+
+
+```html
+<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
+```
+
+If you want to use the JS enahancements as well, you will also need to:
+
+1. Include Vue.js:
+
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+    ```
+
+2. Include `pirati-ui` JS bundle:
+
+    ```html
+    <script src="[ROOT_URL]/js/main.bundle.js"></script>
+    ```
+
+Make sure that Vue.js is included *before* the JS bundle. The best place for
+both of the JS sources is at the end of your HTML document.
+
+The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
+one of official bundles hosted at `https://styleguide.pir-test.eu`:
+
+- https://styleguide.pir-test.eu/latest/
+- https://styleguide.pir-test.eu/1.x.x/
+- ... and so on
+
+Alternatively, you can run the `pirati-ui` locally. In this case, just run
+`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
+Usually, this will be `http://localhost:3000/`.
--- a/gulpfile.js
+++ b/gulpfile.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "edition-node-gulp",
  "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "1.6.0",
+  "version": "2.20.0",
  "dependencies": {
+    "@fullcalendar/core": "^6.1.5",
+    "@fullcalendar/daygrid": "^6.1.5",
+    "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/multimonth": "^6.1.6",
+    "@fullcalendar/vue": "^6.1.5",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "kind-of": "^6.0.3",
@@ -12,7 +17,8 @@
    "styleguidekit-assets-default": "^3.0.0",
    "styleguidekit-mustache-default": "^3.0.0",
    "tailwindcss-elevation": "^0.3.4",
-    "vue": "^2.6.11",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
    "vue2-flip-countdown": "^0.10.0"
  },
  "resolutions": {
@@ -53,10 +59,11 @@
    "@rollup/stream": "^1.0.0",
    "acorn": "^6.4.1",
    "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
    "color": "^3.1.2",
    "gulp-add-src": "^1.0.0",
    "gulp-concat": "^2.6.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "lodash": "^4.17.15",
    "postcss-assets": "^5.0.0",
@@ -69,10 +76,10 @@
    "rollup-plugin-terser": "^6.1.0",
    "rollup-plugin-vue": "^5.1.9",
    "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/typography": "^0.5.10",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
  }
 }
--- a/patternlab-config.json
+++ b/patternlab-config.json
--- a/scripts/postinstall.js
+++ b/scripts/postinstall.js
--- a/source/_annotations/annotations.js
+++ b/source/_annotations/annotations.js
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -4,27 +4,27 @@
  "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
  "img": {
    "avatar": {
-      "src": "http://placeimg.com/100/100/people",
+      "src": "https://picsum.photos/100",
      "alt": "Avatar"
    },
    "square": {
-      "src": "http://placeimg.com/300/300/nature",
+      "src": "https://picsum.photos/300",
      "alt": "Square"
    },
    "rectangle": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
      "alt": "Rectangle"
    },
    "landscape-4x3": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
      "alt": "4x3 Image"
    },
    "landscape-16x9": {
-      "src": "http://placeimg.com/640/360/tech",
+      "src": "https://picsum.photos/640/360",
      "alt": "16x9 Image"
    },
    "landscape-16x9-fullhd": {
-      "src": "https://loremflickr.com/1920/1080",
+      "src": "https://picsum.photos/1920/1080",
      "alt": "16x9 Image Full HD"
    }
  },
@@ -32,6 +32,9 @@
    "short": "Lorizzle pimpin' dolizzle sit amet I",
    "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
  },
+  "list": {
+    "item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
+  },
  "excerpt": {
    "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
    "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
@@ -98,6 +101,7 @@
    "label": "Název políčka",
    "placeholder": "Placeholder"
  },
+  "calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
  "greyColors": [
    {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
    {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
@@ -118,11 +122,27 @@
        {"cls": "white", "name": "White", "hex": "#ffffff"}
      ]
    },
+    {
+      "name": "Olive",
+      "variants": [
+        {"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
+      ]
+    },
    {
      "name": "Green",
      "variants": [
-        {"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
-        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
+        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
+        {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
+        {"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
+      ]
+    },
+    {
+      "name": "Yellow",
+      "variants": [
+        {"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
+        {"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
+        {"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
+        {"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
      ]
    },
    {
@@ -166,6 +186,12 @@
      "variants": [
        {"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
      ]
+    },
+    {
+      "name": "Pirati",
+      "variants": [
+        {"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
+      ]
    }
  ]
 }
--- a/source/_data/listitems.json
+++ b/source/_data/listitems.json
--- a/source/_meta/_00-head.mustache
+++ b/source/_meta/_00-head.mustache
--- a/source/_meta/_01-foot.mustache
+++ b/source/_meta/_01-foot.mustache
--- a/source/_patterns/.gitkeep
+++ b/source/_patterns/.gitkeep
--- a/source/_patterns/00-atoms/01-text/text-shadow.mustache
+++ b/source/_patterns/00-atoms/01-text/text-shadow.mustache
+<div>
+  <h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
+</div>
--- a/source/_patterns/00-atoms/02-icons/icons.mustache
+++ b/source/_patterns/00-atoms/02-icons/icons.mustache
--- a/source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
+++ b/source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
-<button class="btn {{ classes }}">
+<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
  <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
 </button>
--- a/source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
+++ b/source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
-<button class="btn btn--icon {{ classes }}">
+<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
  <div class="btn__body-wrap">
    <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
    <div class="btn__icon {{ iconClasses }}">

--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -7,10 +7,27 @@
    {{> atoms-basic-button(classes: "btn--white") }}
    {{> atoms-basic-button(classes: "btn--blue-300") }}
    {{> atoms-basic-button(classes: "btn--cyan-200") }}
-    {{> atoms-basic-button(classes: "btn--green-200") }}
+    {{> atoms-basic-button(classes: "btn--green-400") }}
+    {{> atoms-basic-button(classes: "btn--green-300") }}
    {{> atoms-basic-button(classes: "btn--orange-300") }}
    {{> atoms-basic-button(classes: "btn--violet-400") }}
    {{> atoms-basic-button(classes: "btn--violet-500") }}
+    {{> atoms-basic-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
  </div>
  <div class="inline-flex flex-col space-y-2">
    {{> atoms-icon-button(classes: "btn--black") }}
@@ -20,9 +37,26 @@
    {{> atoms-icon-button(classes: "btn--white") }}
    {{> atoms-icon-button(classes: "btn--blue-300") }}
    {{> atoms-icon-button(classes: "btn--cyan-200") }}
-    {{> atoms-icon-button(classes: "btn--green-200") }}
+    {{> atoms-icon-button(classes: "btn--green-400") }}
+    {{> atoms-icon-button(classes: "btn--green-300") }}
    {{> atoms-icon-button(classes: "btn--orange-300") }}
    {{> atoms-icon-button(classes: "btn--violet-400") }}
    {{> atoms-icon-button(classes: "btn--violet-500") }}
+    {{> atoms-icon-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-icon-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
  </div>
 </div>
--- a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+++ b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
@@ -7,7 +7,8 @@
    {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
    {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
@@ -20,7 +21,8 @@
    {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
    {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
No results found