added yml file to create test storybook app on pr

edited name

updated name of the job

chanfed

copying css files

added right path

added links

added global

ad

asd

import

added impor

.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml

@@ -0,0 +1,47 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - task/avn-253/create-test-app-on-pr
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - task/avn-253/create-test-app-on-pr
+
+jobs:
+  # Run when a pull request is created or updated
+  build_and_deploy_pull_request:
+    if: github.event_name == 'pull_request' && github.event.action != 'closed'
+    runs-on: ubuntu-latest
+    name: Build and Deploy Pull Request
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN  }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: 'upload'
+          app_location: '/'
+          output_location: 'storybook-static'
+          app_build_command: 'npm run build-storybook'
+          ###### End of Repository/Build Configurations ######
+          close_pull_request_job:
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+          action: 'close'

.storybook/main.ts

@@ -1,5 +1,11 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
+const globalCSSPath = process.env.NODE_ENV === 'production' ? '/assets/global.css' : '../src/styles/global.css';
+
+const varsomCSSPath = process.env.NODE_ENV === 'production' ? '/assets/varsom.css' : '../../../build/css/varsom.css';
+
+// we have to add another styling files after they will be in use
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
@@ -9,8 +15,10 @@ const config: StorybookConfig = {
   },
   previewHead: (head) => `
   ${head}
-  <link rel="stylesheet" href="../src/styles/global.css" />
-  <link rel="stylesheet" href="../../../build/css/varsom.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
+  <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/source-sans-pro" />
+  <link rel="stylesheet" href="${varsomCSSPath}" />
+  <link rel="stylesheet" href="${globalCSSPath}" />
 `,
   docs: {
     autodocs: 'tag',

package.json

@@ -7,13 +7,14 @@
     "preview": "vite preview",
     "lint": "eslint \"**/*.{js,ts}\"",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build  && npm run copy-files-storybook",
     "build:light": "node transform.js light",
     "build:dark": "node transform.js dark",
     "build:varsom_light": "node transform.js varsom",
     "build:varsom_dark": "node transform.js varsom_dark",
     "tokenbuild": "npm run build:light && npm run build:dark && npm run build:varsom_light && npm run build:varsom_dark",
-    "copy-files": "cpy \"./build/css/*\" dist/css/"
+    "copy-files": "cpy \"./build/css/*\" dist/css/",
+    "copy-files-storybook": "cpy \"./build/css/*\" \"./src/styles/*\" storybook-static/assets"
   },
   "dependencies": {
     "@shoelace-style/shoelace": "^2.11.2",
@@ -40,6 +41,6 @@
     "vite": "^5.0.0"
   },
   "overrides": {
-      "prettier": "^3.1.0"
+    "prettier": "^3.1.0"
   }
 }

src/main.ts

@@ -1,6 +1,8 @@
 // main.ts (or main.js if using JavaScript)
 import { html, render } from 'lit';
+import './styles/imports.css';
 import './styles/global.css';
+
 const app = html`<table>
   <hr />
   <th>Variant</th>
@@ -18,9 +20,7 @@ const app = html`<table>
       <nve-button size="medium" variant="default">I'm a NVE-butotn</nve-button>
     </td>
     <td>
-      <nve-button size="medium" variant="neutral" outline
-        >I'm a NVE-butotn</nve-button
-      >
+      <nve-button size="medium" variant="neutral" outline>I'm a NVE-butotn</nve-button>
     </td>
     <td>
       <nve-button size="medium" variant="neutral">I'm a NVE-butotn</nve-button>
@@ -35,9 +35,7 @@ const app = html`<table>
       <nve-button size="large" variant="default">I'm a NVE-butotn</nve-button>
     </td>
     <td>
-      <nve-button size="large" variant="neutral" outline
-        >I'm a NVE-butotn</nve-button
-      >
+      <nve-button size="large" variant="neutral" outline>I'm a NVE-butotn</nve-button>
     </td>
     <td>
       <nve-button size="large" variant="neutral">I'm a NVE-butotn</nve-button>
@@ -52,9 +50,7 @@ const app = html`<table>
       <nve-button size="small" variant="default">I'm a NVE-butotn</nve-button>
     </td>
     <td>
-      <nve-button size="small" variant="neutral" outline
-        >I'm a NVE-butotn</nve-button
-      >
+      <nve-button size="small" variant="neutral" outline>I'm a NVE-butotn</nve-button>
     </td>
     <td>
       <nve-button size="small" variant="neutral">I'm a NVE-butotn</nve-button>

src/styles/global.css

@@ -1,2 +1,54 @@
-@import '@shoelace-style/shoelace/dist/themes/light.css';
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
+:root {
+  --sl-focus-ring-color: var(--interactive-links-focus);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: 2px;
+  --sl-focus-ring-offset: -1px;
+  --sl-border-radius-medium: var(--border-radius-small);
+  --sl-border-radius-small: var(--border-radius-small);
+  --sl-input-height-small: var(--sizing-small);
+  --sl-input-height-medium: var(--sizing-medium);
+  --sl-input-height-large: var(--sizing-large);
+
+  --sl-input-background-color: var(--neutrals-background-primary, #fff);
+  --sl-input-background-color-focus: var(--neutrals-background-primary, #fff);
+  --sl-input-background-color-hover: var(--neutrals-background-primary, #fff);
+  --sl-input-background-color-disabled: var(--neutrals-background-primary, #fff);
+  --sl-input-color: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-color-focus: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-color-hover: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-color-disabled: var(--interactive-secondary-foreground-disabled, #00131c);
+  --sl-input-icon-color: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-icon-color-hover: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-icon-color-focus: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-placeholder-color: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color-disabled: var(--interactive-secondary-foreground-disabled, #00131c);
+  --sl-input-focus-ring-color: var(--interactive-links-focus);
+  --sl-input-border-color: var(--neutrals-border-default, #878c94);
+  --sl-input-border-color-focus: var(--interactive-links-focus);
+  --sl-input-border-color-hover: var(--neutrals-border-subtle, #c8eaf9);
+  --sl-input-border-color-disabled: var(--neutrals-border-disabled, #878c94);
+  --sl-input-focus-ring-offset: -1px;
+
+  --sl-input-filled-background-color: var(--neutrals-background-primary-contrast, #eff8fc);
+  --sl-input-filled-background-color-hover: var(--neutrals-background-primary-contrast, #eff8fc);
+  --sl-input-filled-background-color-focus: var(--neutrals-background-primary-contrast, #eff8fc);
+  --sl-input-filled-background-color-disabled: var(--neutrals-background-primary-contrast, #eff8fc);
+  --sl-input-filled-color: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-filled-color-hover: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-filled-color-focus: var(--neutrals-foreground-primary, #00131c);
+  --sl-input-filled-color-disabled: var(--interactive-secondary-foreground-disabled, #00131c);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+}
+
+/*
+focus ring color is the same all over the application.
+we use only border-radius-small size on all shoelace border radius tokens. (--sl-border-radius-large and --sl-border-radius-x-large are 
+not actively used in any of the sl components, therefore they are not reassigned here).
+input fonts and spacing isn't assigned yet since we use it a bit differently in ds (gaps on spacing instead of padding)
+*/

src/styles/imports.css

@@ -0,0 +1,2 @@
+@import '@shoelace-style/shoelace/dist/themes/light.css';
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');