media-object

rei · Oct 18, 2024 · f25e4b8 · f25e4b8
1 parent d2bbf3c
commit f25e4b8
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 100 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,6 +1,6 @@
 root = true
 
-[*.{js,css,scss}]
+[*.{js,css,scss,yml}]
 charset = utf-8
 end_of_line = lf
 indent_size = 2

diff --git a/.github/workflows/deploy.js.yml b/.github/workflows/deploy.js.yml
@@ -26,10 +26,3 @@ jobs:
         run: |
           npm install
           npm run build
-      - name: Deploy
-        uses: JamesIves/[email protected]
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: . # The folder the action should deploy.
-          CLEAN: true # Automatically remove deleted files from the deploy branch
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,19 @@
+name: GitHub Pages
+on: [push]
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          npm run pages
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: pages
+          clean: true
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,5 @@ src/**/styles/themes/*
 
 src/**/package-lock\.json
 unmigrated/
+
+pages
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "build:copycss": "node build/copy-css.js",
     "build:umd": "vite build --config vite.umd.config.ts",
     "build:variables": "node build/component-variables-transfer.js",
-    "preview": "vite preview",
+    "pages": "vite build --config vite.pages.config.mts",
+    "preview": "vite preview --config vite.pages.config.mts",
     "unit": "vitest run",
     "watch": "vitest",
     "coverage": "vitest run --coverage",

diff --git a/src/components/card/examples/demo/complexCard.vue b/src/components/card/examples/demo/complexCard.vue
@@ -5,7 +5,7 @@
         <div>
           <cdr-img
             alt="card test image"
-            src="/src/dev/static/test-image.png"
+            :src="testImage"
             modifier="responsive"
           />
         </div>
@@ -14,18 +14,14 @@
             class="cdr-card__link"
             href="#foo"
           >
-            <h2>
-              Complex Card Title
-            </h2>
+            <h2>Complex Card Title</h2>
           </cdr-link>
           <cdr-rating
             rating="4.2"
             count="12"
             size="small"
           />
-          <cdr-text class="cdr-text-dev--body-300">
-            Card content
-          </cdr-text>
+          <cdr-text class="cdr-text-dev--body-300">Card content</cdr-text>
         </div>
       </section>
     </cdr-card>
@@ -34,10 +30,14 @@
 
 <script>
 import * as Components from 'srcdir/lib';
+import testImage from '../../../../dev/static/test-image.png';
 
 export default {
   name: 'ComplexCard',
   components: Components,
+  data() {
+    return { testImage };
+  },
 };
 </script>
 

diff --git a/src/components/card/examples/demo/fluidHeadingCard.vue b/src/components/card/examples/demo/fluidHeadingCard.vue
@@ -5,7 +5,7 @@
         <div>
           <cdr-img
             alt="card test image"
-            src="/src/dev/static/test-image.png"
+            :src="testImage"
             modifier="responsive"
           />
         </div>
@@ -14,13 +14,9 @@
             class="cdr-card__link"
             href="#foo"
           >
-          <CdrTitle tag="p">
-            Fluid title component
-          </CdrTitle>
+            <CdrTitle tag="p">Fluid title component</CdrTitle>
           </cdr-link>
-          <cdr-text class="cdr-text-dev--body-300">
-            Card content
-          </cdr-text>
+          <cdr-text class="cdr-text-dev--body-300">Card content</cdr-text>
         </div>
       </section>
     </cdr-card>
@@ -29,10 +25,14 @@
 
 <script>
 import * as Components from 'srcdir/lib';
+import testImage from '/src/dev/static/test-image.png';
 
 export default {
-    name: 'FluidHeadingCard',
-    components: Components,
+  name: 'FluidHeadingCard',
+  components: Components,
+  data() {
+    return { testImage };
+  },
 };
 </script>
 

diff --git a/src/components/image/examples/Images.vue b/src/components/image/examples/Images.vue
@@ -1,78 +1,72 @@
 <template>
   <div>
-    <h2>
-      Images
-    </h2>
+    <h2>Images</h2>
     <div>
-      <h3>
-        Standard image
-      </h3>
+      <h3>Standard image</h3>
       <cdr-img
-        src="/src/dev/static/test-image.png"
+        :src="testImage"
         alt="A historical photo of a man standing on a tall rock"
       />
       <h3>Image properties</h3>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="16/9"
-        style="background-color: lightskyblue;"
+        style="background-color: lightskyblue"
       />
       <h4>Ratio Without object fit</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="4/1"
-        style="background-color: lightskyblue;"
+        style="background-color: lightskyblue"
       />
       <h4>Ratio with object fit contain</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="4/1"
         fit="contain"
-        style="background-color: lightskyblue;"
+        style="background-color: lightskyblue"
       />
       <h4>Ratio with object fit cover</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="4/1"
         fit="cover"
       />
       <h4>Object positioning (10% 75%)</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="4/1"
         position="10% 75%"
         fit="cover"
       />
       <h4>Object positioning (bottom left)</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/cedar-1920x1080.jpg"
+        :src="cedarImage"
         ratio="4/1"
         position="bottom left"
         fit="cover"
       />
       <h4>Border radius (token shorthand "soft")</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/test-image.png"
+        :src="cedarImage"
         radius="soft"
       />
       <h4>Border radius (custom "33%")</h4>
       <cdr-img
         alt=""
-        src="/src/dev/static/test-image.png"
+        :src="cedarImage"
         radius="33%"
       />
     </div>
     <div data-backstop="image-error">
-      <h3>
-        Image With Error
-      </h3>
+      <h3>Image With Error</h3>
       <cdr-img
         src="/not-here.png"
         @error="handleError"
@@ -85,6 +79,8 @@
 
 <script>
 import * as Components from 'srcdir/lib';
+import testImage from '../../../dev/static/test-image.png';
+import cedarImage from '../../../dev/static/cedar-1920x1080.jpg';
 
 export default {
   name: 'Images',
@@ -94,6 +90,8 @@ export default {
   data() {
     return {
       hasError: false,
+      testImage,
+      cedarImage,
     };
   },
   methods: {

diff --git a/src/components/landingLead/examples/LandingLead.vue b/src/components/landingLead/examples/LandingLead.vue
@@ -1,17 +1,16 @@
 <template>
   <div style="min-height: 100vh">
-    <CdrToggleGroup v-model="palettes" style="max-width: clamp(300px, 25vw, 30vw)">
-      <CdrToggleButton toggle-value="default">
-        Default
-      </CdrToggleButton>
-      <CdrToggleButton toggle-value="sandstone">
-        Sandstone
-      </CdrToggleButton>
+    <CdrToggleGroup
+      v-model="palettes"
+      style="max-width: clamp(300px, 25vw, 30vw)"
+    >
+      <CdrToggleButton toggle-value="default">Default</CdrToggleButton>
+      <CdrToggleButton toggle-value="sandstone">Sandstone</CdrToggleButton>
     </CdrToggleGroup>
     <h2>Static landing lead composition</h2>
     <CdrLandingLead
       :class="`theme-${palettes}`"
-      img-src="src/dev/static/lead-static.jpg"
+      :img-src="leadImage"
       heading="Camp with no reservations."
       subheading="We have the know-how to equip you to camp in the middle of nowhere."
     />
@@ -28,6 +27,7 @@
 
 <script>
 import * as Components from 'srcdir/lib';
+import leadImage from '../../../dev/static/lead-static.jpg';
 
 export default {
   name: 'Lead',
@@ -36,9 +36,10 @@ export default {
   },
   data() {
     return {
-      palettes: 'default'
-    }
-  }
+      palettes: 'default',
+      leadImage,
+    };
+  },
 };
 </script>
 

diff --git a/src/components/picture/examples/Picture.vue b/src/components/picture/examples/Picture.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
 import { CdrPicture } from '../../../lib';
+import cedarSm from '../../../dev/static/cedar-1920x1080.jpg';
+import cedarXs from '../../../dev/static/cedar-350x150.jpg';
+import testImage from '../../../dev/static/test-image.png';
 
 const sourceObj = {
   xs: {
     media: '(max-width: 768px)',
-    srcset: '/src/dev/static/cedar-350x150.jpg',
+    srcset: cedarXs,
     width: '300',
   },
   sm: {
     media: '(min-width: 768px)',
-    srcset: '/src/dev/static/cedar-1920x1080.jpg',
-  }
-}
+    srcset: cedarSm,
+  },
+};
 </script>
 
-
-
 <template>
   <div>
     <h2>picture</h2>
-    <cdr-picture 
-      src="/src/dev/static/test-image.png"
+    <cdr-picture
+      :src="testImage"
       loading="eager"
       :sources="sourceObj"
     />
   </div>
 </template>
 
-<style>
-</style>
+<style></style>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,3 +50,5 @@ src/*/styles/themes/

		src/**/package-lock\.json
		unmigrated/

		pages