Layout (#187)

- CdrLayout component - Refactor SurfaceSelection to use CdrLayout - Refactor FulfillmentTile to use CdrLayout - Cleanup all unit test errors and some image URL issues found in the dev site - Adds the demo which is deployed at at every push of any branch
rei · Nov 25, 2024 · 2a1bade · 2a1bade
1 parent e2ff836
commit 2a1bade
Show file tree

Hide file tree

Showing 57 changed files with 1,303 additions and 673 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/github-pages-deploy-action@3.7.1
-        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,23 @@
+name: GitHub Pages
+on: [push]
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Node version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - 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/README.md b/README.md
@@ -1,8 +1,8 @@
 # REI Cedar Style Framework!
+
 [![codecov](https://codecov.io/gh/rei/rei-cedar/branch/master/graph/badge.svg)](https://codecov.io/gh/rei/rei-cedar)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-
 Welcome to REI's style framework! The overall goals of this project are to provide a common scaffolding for UI elements,
 and a set of themes that build on this scaffolding. We started this project in 2015 as a fork of
 [Bootstrap](http://getbootstrap.com/).
@@ -57,8 +57,13 @@ Publishes package to npm with a prerelease tag. You must increment the component
 
 ## Commits
 
-This project is Commitizen friendly.  To install: `npm install -g commitizen`
+This project is Commitizen friendly. To install: `npm install -g commitizen`
 When creating a pull request run `git cz` rather than `git commit` and follow the prompts.
 
 This projects Changelogs are generated.
+
 - Generate the Changelog: `npm run changelog`
+
+## Developer demo
+
+The main documentation site for Cedar is our separate [Cedar docs](https://cedar.rei.com) website. With that in mind, we also have a playground for developing components and sharing ideas with others and within our team. The Cedar team produces this *developer demo* through GitHub Pages that can be accessed at [https://rei.github.io/rei-cedar/](https://rei.github.io/rei-cedar/), but we do not guarantee it will always be up to date or be an accurate representation of the Cedar library.
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/examples.js b/src/components/examples.js
@@ -17,8 +17,10 @@ import images from 'componentsdir/image/examples/Images.vue';
 import inputs from 'componentsdir/input/examples/Inputs.vue';
 import kicker from 'componentsdir/kicker/examples/Kicker.vue';
 import landingLead from 'componentsdir/landingLead/examples/LandingLead.vue';
+import layout from 'componentsdir/layout/examples/Layout.vue';
 import links from 'componentsdir/link/examples/Links.vue';
 import list from 'componentsdir/list/examples/Lists.vue';
+// import mediaObject from 'componentsdir/mediaObject/examples/MediaObject.vue';
 import modal from 'componentsdir/modal/examples/Modal.vue';
 import pagination from 'componentsdir/pagination/examples/Pagination.vue';
 import picture from 'componentsdir/picture/examples/Picture.vue';
@@ -62,8 +64,10 @@ export default {
   inputs,
   kicker,
   landingLead,
+  layout,
   links,
   list,
+  // mediaObject,
   modal,
   pagination,
   picture,

diff --git a/src/components/fulfillmentTile/CdrFulfillmentTile.vue b/src/components/fulfillmentTile/CdrFulfillmentTile.vue
@@ -2,8 +2,8 @@
 import { useCssModule, computed } from 'vue';
 import mapClasses from '../../utils/mapClasses';
 import { surfaceSelection } from '../../types/interfaces';
-import { getSurfaceSelectionProps } from '../../utils/surface';
-import CdrFulfillmentTileLayout from './CdrFulfillmentTileLayout.vue';
+import { getSurfaceSelectionProps, getDefaultLayout } from '../../utils/surface';
+import CdrLayout from '../layout/CdrLayout.vue';
 import CdrFulfillmentTileHeader from './CdrFulfillmentTileHeader.vue';
 import CdrFulfillmentTileContent from './CdrFulfillmentTileContent.vue';
 import CdrSkeleton from '../skeleton/CdrSkeleton.vue';
@@ -20,25 +20,33 @@ const props = withDefaults(defineProps<surfaceSelection>(), {
   checked: false,
   disabled: false,
   loading: false,
-  orientation: 'vertical',
+  layout: () => getDefaultLayout({ flow: 'row' }),
 });
 
 const style = useCssModule();
 const baseClass = 'cdr-fulfillment-tile';
 
 // Manages the props passed along to CdrSurface
 const rootProps = computed(() => {
-  const { classes, ...additionalProps } = getSurfaceSelectionProps(props, baseClass);  
+  const { classes, ...additionalProps } = getSurfaceSelectionProps(props, baseClass);
   return { ...additionalProps, class: mapClasses(style, ...classes) || undefined };
 });
+
+// Merge layout props
+const layoutProps = computed(() =>
+  Object.assign(getDefaultLayout({ flow: 'row', rows: [1] }), props.layout),
+);
 </script>
 
 <template>
   <component
     :is="tag"
     v-bind="rootProps"
   >
-    <div :class="style['cdr-fulfillment-tile__inner']">
+    <CdrLayout
+      :rows="['auto', 1]"
+      :class="style['cdr-fulfillment-tile__inner']"
+    >
       <CdrFulfillmentTileHeader>
         <template
           v-if="$slots['icon-left']"
@@ -60,23 +68,21 @@ const rootProps = computed(() => {
         </template>
       </CdrFulfillmentTileHeader>
       <div :class="style['cdr-fulfillment-tile__main']">
-        <CdrFulfillmentTileLayout
-          :orientation="orientation"
+        <CdrLayout
+          v-bind="layoutProps"
           :class="style['cdr-fulfillment-tile__layout']"
         >
-          <template v-if="$slots['body']">
-            <CdrFulfillmentTileContent :stretch="true">
-              <!-- @slot Default font size is a step down. Placed just below the header. -->
-              <slot name="body" />
-            </CdrFulfillmentTileContent>
-          </template>
+          <CdrFulfillmentTileContent>
+            <!-- @slot Default font size is a step down. Placed just below the header. -->
+            <slot name="body" />
+          </CdrFulfillmentTileContent>
           <template v-if="$slots['footer']">
             <CdrFulfillmentTileContent scale="-1">
               <!-- @slot Footer content will be at the bottom of the component. -->
               <slot name="footer" />
             </CdrFulfillmentTileContent>
           </template>
-        </CdrFulfillmentTileLayout>
+        </CdrLayout>
         <div :class="style['cdr-fulfillment-tile__loading']">
           <!-- @slot Custom content when component is loading. -->
           <slot name="loading">
@@ -86,7 +92,7 @@ const rootProps = computed(() => {
           </slot>
         </div>
       </div>
-    </div>
+    </CdrLayout>
   </component>
 </template>
 

diff --git a/src/components/fulfillmentTile/CdrFulfillmentTileContent.vue b/src/components/fulfillmentTile/CdrFulfillmentTileContent.vue
@@ -8,7 +8,6 @@ import { fulfillmentTileContent } from '../../types/interfaces';
 defineOptions({ name: 'CdrFulfillmentTileContent' });
 
 const props = withDefaults(defineProps<fulfillmentTileContent>(), {
-  stretch: false,
   scale: '-2',
 });
 
@@ -19,10 +18,7 @@ const rootProps = computed(
   (): bodyTextProps => ({
     tag: 'div',
     scale: props.scale,
-    class: {
-      [style[baseClass]]: true,
-      [style[`${baseClass}--stretch`]]: props.stretch,
-    },
+    class: [style[baseClass]],
   }),
 );
 </script>

diff --git a/src/components/fulfillmentTile/CdrFulfillmentTileHeader.vue b/src/components/fulfillmentTile/CdrFulfillmentTileHeader.vue
@@ -1,26 +1,16 @@
 <script setup lang="ts">
-import { useCssModule, computed } from 'vue';
+import { useCssModule } from 'vue';
 import CdrSubheadingSans from '../text/presets/CdrSubheadingSans.vue';
-import CdrFulfillmentTileLayout from './CdrFulfillmentTileLayout.vue';
-import { surfaceSelectionLayout } from '../../types/interfaces';
 
 /** Header component with icon slot for fulfillment tile */
 
 defineOptions({ name: 'CdrFulfillmentTileHeader' });
 
 const style = useCssModule();
-const baseClass = 'cdr-fulfillment-tile-header';
-
-const rootProps = computed(
-  (): surfaceSelectionLayout => ({
-    orientation: 'horizontal',
-    class: { [style[baseClass]]: true },
-  }),
-);
 </script>
 
 <template>
-  <CdrFulfillmentTileLayout v-bind="rootProps">
+  <div :class="[style['cdr-fulfillment-tile-header']]">
     <span
       v-if="$slots['icon-left']"
       :class="style['cdr-fulfillment-tile-header__icon']"
@@ -44,7 +34,7 @@ const rootProps = computed(
       <!-- @slot Place an icon to the right of the header content -->
       <slot name="icon-right" />
     </span>
-  </CdrFulfillmentTileLayout>
+  </div>
 </template>
 
 <style lang="scss" module src="./styles/CdrFulfillmentTileHeader.module.scss"></style>
diff --git a/src/components/fulfillmentTile/CdrFulfillmentTileLayout.vue b/src/components/fulfillmentTile/CdrFulfillmentTileLayout.vue
diff --git a/src/components/fulfillmentTile/__tests__/CdrFulfillmentTile.spec.js b/src/components/fulfillmentTile/__tests__/CdrFulfillmentTile.spec.js
@@ -86,7 +86,7 @@ describe('CdrFulfillmentTile', () => {
       },
     });
     expect(wrapper.element).toMatchSnapshot();
-    expect(wrapper.find('.cdr-fulfillment-tile-content--stretch').text()).toBe('Body slot');
+    expect(wrapper.find('.cdr-fulfillment-tile-content').text()).toBe('Body slot');
   });
 
   it('shows footer', () => {
@@ -97,7 +97,7 @@ describe('CdrFulfillmentTile', () => {
         footer: 'Footer slot',
       },
     });
-    expect(wrapper.find('.cdr-fulfillment-tile-content').text()).toBe('Footer slot');
+    expect(wrapper.find('.cdr-fulfillment-tile-content:nth-child(2)').text()).toBe('Footer slot');
     expect(wrapper.element).toMatchSnapshot();
   });
 

diff --git a/src/components/fulfillmentTile/__tests__/CdrFulfillmentTileContent.spec.js b/src/components/fulfillmentTile/__tests__/CdrFulfillmentTileContent.spec.js
@@ -23,10 +23,6 @@ describe('CdrFulfillmentTileContent', () => {
       },
     });
     expect(wrapper.element).toMatchSnapshot();
-    expect(wrapper.classes()).toEqual([
-      'cdr-body',
-      'cdr-fulfillment-tile-content',
-      'cdr-fulfillment-tile-content--stretch',
-    ]);
+    expect(wrapper.classes()).toEqual(['cdr-body', 'cdr-fulfillment-tile-content']);
   });
 });