Staging

.github/workflows/develop-release.yml

@@ -0,0 +1,22 @@
+# Trigger jenkins workflow to build webup on 172.16.2.103 using ketchup.zip from branch staging
+
+name: ketchup-outsourcing-release
+
+on:
+  push:
+    branches:
+      - staging
+
+jobs:
+  run-cicd:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Trigger jenkins workflow
+        uses: fjogeleit/http-request-action@v1
+        with:
+          url: 'https://webuptest.smeup.com/jenkins/job/WebupKetchupOutsourcingPipeline/build?token=${{ secrets.JENKINS_WEBHOOK_TOKEN }}'
+          method: 'GET'
+          username: ${{ secrets.JENKINS_WEBHOOK_USERNAME }}
+          password: ${{ secrets.JENKINS_WEBHOOK_PASSWORD }}

.github/workflows/staging.yaml

@@ -6,6 +6,7 @@ on:
       - staging
 
 env:
+  VERSION: TEST-SNAPSHOT
   AWS_REGION: eu-south-1
 
 jobs:
@@ -28,6 +29,12 @@ jobs:
 
     - name: Run Ketchup Showcase build
       run: npm run ksc:build
+
+    - name: Zip artifacts
+      run: |
+        cd packages/ketchup/dist
+        zip -qr /tmp/ketchup.zip *
+        zip -qr /tmp/ketchup-components.zip ketchup/*
 
     - name: Setup AWS
       uses: aws-actions/configure-aws-credentials@v4
@@ -37,4 +44,9 @@ jobs:
         aws-region: ${{ env.AWS_REGION }}
 
     - name: Upload artifacts to AWS S3
+      run: |
+        aws s3 cp /tmp/ketchup.zip s3://smeup-ketchup/npm-pub/ketchup-stencil/${{ env.VERSION }}/zip/ketchup.zip
+        aws s3 cp /tmp/ketchup-components.zip s3://smeup-ketchup/npm-pub/ketchup-stencil/${{ env.VERSION }}/zip/ketchup-components.zip
+
+    - name: Upload showcase to AWS S3
       run: aws s3 sync packages/ketchup-showcase/dist/ s3://smeup-ketchup/staging/ --delete

.gitignore

@@ -5,3 +5,4 @@ packages/ketchup/src/assets/debug.js
 target/
 .yarn/cache
 .yarn/install-state.gz
+.package-lock.json

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
@@ -25,5 +26,8 @@
     },
     "[jsonc]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[scss]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

README.md

@@ -54,7 +54,8 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h
 
 ## Showcase
 
-Go to [Ketchup Showcase](http://ketchup.smeup.com) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
+
+Go to [Ketchup Showcase](https://smeup.github.io/ketchup/) to see our components live.<p align="right">(<a href="#top">back to top</a>)</p>
 
 ## Getting started
 

packages/ketchup-showcase/public/showcase.css

@@ -38,26 +38,24 @@
 }
 
 code.flat {
-  background: none;
-  border-radius: 0;
-  box-shadow: 0 0 2px 0px rgb(128, 128, 128);
-  color: var(--kup-primary-color);
+  background: var(--kup-layer-1);
+  border-radius: var(--kup-radius-00);
+  border: 1px solid var(--kup-border-subtle);
+  color: var(--kup-text-primary);
   display: flex;
   font-family: var(--kup-font-family-monospace);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   margin: auto;
   max-width: 100%;
-  padding: 20px 10px;
+  padding: var(--kup-space-04) var(--kup-space-03);
   width: max-content;
 }
 
 .code-word {
-  color: var(--kup-primary-color);
-  font-family: var(--kup-font-family-monospace);
-  font-size: 1.2em;
+  color: var(--kup-primary-color-60);
+  /* font-family: var(--kup-font-family-monospace); */
   font-weight: 600;
-  word-break: break-word;
 }
 
 .sample-section .code-word {

packages/ketchup-showcase/src/App.vue

@@ -130,7 +130,7 @@ export default {
     ) {
       dom.ketchupInit = {
         ...dom.ketchupInit,
-        theme: { name: 'dark' },
+        theme: { name: 'octane' },
       };
     }
     document.addEventListener('kup-theme-change', () => {
@@ -161,9 +161,9 @@ export default {
   methods: {
     changeTheme(e: CustomEvent<KupSwitchEventPayload>): void {
       if (e.detail.value === 'on') {
-        dom.ketchup.theme.set('dark');
+        dom.ketchup.theme.set('darkOctaneGray');
       } else {
-        dom.ketchup.theme.set('ketchup');
+        dom.ketchup.theme.set('octane');
       }
     },
     drawerReady(): void {
@@ -197,7 +197,7 @@ export default {
     },
     removeSpinner(): void {
       setTimeout(() => {
-        if (dom.ketchup.theme.name === 'dark') {
+        if (dom.ketchup.theme.name === 'darkOctaneGray') {
           theme.checked = true;
         }
         spinnerLabel.innerHTML = 'Ready!';
@@ -897,6 +897,16 @@ export default {
             value: 'KupTheme',
             visible: true,
           },
+          {
+            cells: {
+              ROUTE: {
+                value: 'kup-token',
+              },
+            },
+            icon: 'dns',
+            value: 'KupToken',
+            visible: true,
+          },
           {
             cells: {
               ROUTE: {
@@ -1105,7 +1115,7 @@ label {
 }
 
 .version {
-  border-top: 1px solid var(--kup-border-color);
+  border-top: 1px solid var(--kup-border-subtle);
   box-sizing: border-box;
   font-weight: 600;
   margin-top: auto;
@@ -1205,7 +1215,7 @@ a.footer__icon--trailing {
 #rasterize-viewer {
   background: var(--kup-background-color);
   bottom: 0;
-  border: 1px solid var(--kup-border-color);
+  border: 1px solid var(--kup-border-subtle);
   height: 30vh;
   overflow: auto;
   position: fixed;

packages/ketchup-showcase/src/plugins/router.ts

@@ -347,6 +347,11 @@ const frameworkRoutes = [
     name: 'kup-theme',
     component: () => import(`@/views/framework/kup-theme/KupTheme.vue`),
   },
+  {
+    path: `/kup-token`,
+    name: 'kup-token',
+    component: () => import(`@/views/framework/kup-token/KupToken.vue`),
+  },
   {
     path: `/kup-toolbar`,
     name: 'kup-toolbar',

packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue

@@ -138,7 +138,7 @@ export default {
             ],
           },
         ],
-        color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
+        color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
         image: [
           {
             data: [

packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue

@@ -313,7 +313,7 @@ export default {
             ],
           },
         ],
-        color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
+        color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
         combobox: [
           {
             data: {

packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue

@@ -1164,7 +1164,7 @@ export default {
             ],
           },
         ],
-        color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
+        color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'],
         combobox: [
           {
             data: {

packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue

@@ -241,7 +241,7 @@ export default {
 }
 
 .login-box {
-  border: 1px solid var(--kup-border-color);
+  border: 1px solid var(--kup-border-subtle);
   box-shadow: var(--kup-box-shadow);
   margin: 4px;
   padding: 8px;

packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue

@@ -15,6 +15,21 @@
     <template v-slot:4>
       <chip-input></chip-input>
     </template>
+    <template v-slot:5>
+      <chip-size></chip-size>
+    </template>
+    <template v-slot:6>
+      <chip-variant></chip-variant>
+    </template>
+    <template v-slot:7>
+      <chip-color></chip-color>
+    </template>
+    <template v-slot:8>
+      <chip-structure></chip-structure>
+    </template>
+    <template v-slot:9>
+      <chip-combination></chip-combination>
+    </template>
   </comp>
 </template>
 
@@ -24,6 +39,11 @@ import ChipBasic from '@/views/components/basic/chip/examples/ChipBasic';
 import ChipChoice from '@/views/components/basic/chip/examples/ChipChoice';
 import ChipFilter from '@/views/components/basic/chip/examples/ChipFilter';
 import ChipInput from '@/views/components/basic/chip/examples/ChipInput';
+import ChipSize from '@/views/components/basic/chip/examples/ChipSize';
+import ChipVariant from '@/views/components/basic/chip/examples/ChipVariant';
+import ChipColor from '@/views/components/basic/chip/examples/ChipColor';
+import ChipStructure from '@/views/components/basic/chip/examples/ChipStructure';
+import ChipCombination from '@/views/components/basic/chip/examples/ChipCombination';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
@@ -32,6 +52,11 @@ export default {
     ChipChoice,
     ChipFilter,
     ChipInput,
+    ChipSize,
+    ChipVariant,
+    ChipColor,
+    ChipStructure,
+    ChipCombination,
     Comp,
   },
   data() {
@@ -45,6 +70,11 @@ export default {
         'Choice chips',
         'Filter chips',
         'Input chips',
+        'Chip Size',
+        'Chip Variant',
+        'Chip Color',
+        'Chip Structure',
+        'Chip Combination',
       ],
     };
   },

packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">kup-primary</span> class to set
+        the color of the chip. The default is
+        <span class="code-word">neutral</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default color 'neutral'</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" class="kup-primary"></kup-chip>
+        </div>
+        <p class="centered">Set color to 'primary'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip class="kup-primary"></kup-chip>',
+    };
+  },
+};
+</script>