Img refactor

package.json

@@ -68,7 +68,7 @@
     "autoprefixer": "^10.2.5",
     "c8": "^7.11.0",
     "chalk": "^4.1.0",
-    "chromedriver": "^117.0.0",
+    "chromedriver": "^118.0.0",
     "concat": "^1.0.3",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",

src/components/image/CdrImg.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { useCssModule, computed } from 'vue';
-import mapClasses from '../../utils/mapClasses';
-import propValidator from '../../utils/propValidator';
+import { CdrRadiusSoft, CdrRadiusRound, CdrRadiusSofter } from '@rei/cdr-tokens';
 
 /** Media for capturing attention and communicating messages */
 defineOptions({
   name: 'CdrImg',
-  inheritAttrs: false,
 });
 
 const props = defineProps({
@@ -25,121 +23,77 @@ const props = defineProps({
     default: '',
   },
   /**
-   * Aspect ratio of the media container
-  * @demoSelectMultiple false
-  * @values auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9
-  */
+   * Aspect ratio of the image
+   * @demoSelectMultiple false
+   * @values Valid CSS aspect-ratio property values
+   */
   ratio: {
     type: String,
     default: undefined,
-    validator: (value: string) => ([
-      'auto',
-      'square',
-      '1-2',
-      '2-3',
-      '3-4',
-      '9-16',
-      '2-1',
-      '3-2',
-      '4-3',
-      '16-9'].indexOf(value) >= 0) || false,
   },
   /**
- * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
- * @demoSelectMultiple false
- * @values left, x-center, right, top, y-center, bottom
- */
-  crop: {
+   * Object position of the image
+   * @demoSelectMultiple false
+   * @values Valid CSS object-position values
+   */
+  position: {
     type: String,
+    default: undefined,
   },
   /**
- * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
- */
-  cover: {
-    type: Boolean,
-  },
-  /**
- * Adds a custom class to the cdr-img__ratio container div
- */
-  containerClass: String,
-  /**
- * Sets a border radius to an element {square, top, right, bottom, left}
- * @demoSelectMultiple false
- * @values circle, rounded
- */
-  radius: {
+   * Object fit of the image
+   * @demoSelectMultiple false
+   * @values Valid CSS object-fit values
+   */
+  fit: {
     type: String,
-    validator: (value: string) => ([
-      'circle',
-      'rounded'].indexOf(value) >= 0) || false,
+    default: undefined,
   },
   /**
-   * Modifies the style variant for this component.
+   * Sets border radius
    * @demoSelectMultiple false
-   * @values responsive
+   * @values Accepts shorthand to use cedar radius tokens (soft, softer, round) or a custom value as a valid CSS border-radius values
    */
-  modifier: {
+  radius: {
     type: String,
-    default: '',
-    validator: (value: string) => propValidator(value, ['', 'responsive']),
-  },
+    default: undefined,
+  }
 });
-const style = useCssModule();
-const baseClass = 'cdr-image';
-const ratioClass = 'cdr-image-ratio';
-const coverWrapperClass = 'cdr-image-ratio__cover';
-const modifierClass = computed(() => props.modifier ? `${baseClass}--${props.modifier}` : '');
-const radiusClass = computed(() => props.radius ? `${baseClass}--${props.radius}` : '');
-const cropObject = computed(() => ({ objectPosition: props.crop }));
-const ratioObject = computed(() => {
-  let ratioPct;
-  if (props.ratio === 'square') {
-    ratioPct = '100%';
-  } else if (props.ratio === 'auto') {
-    ratioPct = '0';
-  } else {
-    if (props.ratio) {
-      const [x, y] = props.ratio.split('-');
-      ratioPct = `${(+y / +x) * 100}%`;
-    }
+
+const radiusTokens = 
+  new Map
+    <string | undefined, typeof CdrRadiusSoft | typeof CdrRadiusSofter | typeof CdrRadiusRound>
+      ([
+        ['soft', CdrRadiusSoft],
+        ['softer', CdrRadiusSofter],
+        ['round', CdrRadiusRound]
+      ]); 
+
+const getRadius = computed(() => radiusTokens.get(props.radius)
+  ? `${radiusTokens.get(props.radius)}rem`
+  : props.radius
+);
+
+const imageProperties = computed(() => {
+  return {
+    '--cdr-img-aspect-ratio': props.ratio,
+    '--cdr-img-object-position': props.position,
+    '--cdr-img-object-fit': props.fit,
+    '--cdr-img-border-radius': getRadius.value,
   }
-  return { '--ratio': ratioPct };
 });
-const cropClass = computed(() => props.crop ? `${coverWrapperClass}--crop` : '');
-const coverClass = computed(() => props.cover ? `${coverWrapperClass}--cover`: '');
+
+const baseClass = 'cdr-image';
+const style = useCssModule();
+
 </script>
 
 <template>
-  <div
-    v-if="ratio"
-    :style="ratioObject"
-    :class="[style[ratioClass], containerClass]"
-  >
-    <img
-      :style="cropObject"
-      :class="mapClasses(style,
-                         baseClass,
-                         modifierClass,
-                         radiusClass,
-                         coverWrapperClass,
-                         cropClass,
-                         coverClass,
-      )"
-      :src="src"
-      :alt="alt"
-      v-bind="$attrs"
-    >
-  </div>
   <img
-    v-else
-    :class="mapClasses(style,
-                       baseClass,
-                       modifierClass,
-                       radiusClass,
-    )"
+    :class="style[baseClass]"
+    :style="imageProperties"
     :src="src"
     :alt="alt"
-    v-bind="$attrs"
   >
 </template>
 

src/components/image/__tests__/CdrImg.spec.js

@@ -28,11 +28,11 @@ describe('CdrImg', () => {
     beforeEach(() => {
       wrapper = mount(CdrImg, {
         propsData: {
-          ratio: "square",
-          radius: "rounded",
+          ratio: "1/1",
+          radius: "softer",
           modifier: "responsive",
-          cover: true,
-          crop: "left",
+          fit: "cover",
+          position: "left",
           alt: "crop left",
           src: "/src/dev/static/cedar-1920x1080.jpg",
         }
@@ -44,35 +44,14 @@ describe('CdrImg', () => {
     });
   });
 
-  describe('a media frame', () => {
-    let wrapper;
-    beforeEach(() => {
-      wrapper = shallowMount(CdrImg, {
-        propsData: {
-          src: '/src/dev/static/cedar-350x150.jpg',
-          ratio: 'square',
-          alt: 'test alt',
-        }
-      });
-    });
-
-    it('renders correctly', () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('sets the alt attr correctly', () => {
-      expect(wrapper.find('img').attributes().alt).toBe('test alt');
-    });
-  });
-
   describe('when arbitrary HTML attrs are passed', () => {
     let wrapper;
     beforeEach(() => {
       wrapper = mount(CdrImg, {
         propsData: {
           src: '/src/dev/static/cedar-350x150.jpg',
           loading: 'lazy',
-          ratio: 'square'
+          ratio: '1/1'
         }
       });
     });
@@ -105,52 +84,4 @@ describe('CdrImg', () => {
     })
   });
 
-  describe('image with auto ratio', () => {
-    let wrapper;
-    beforeEach(() => {
-      wrapper = shallowMount(CdrImg, {
-        propsData: {
-          src: 'localhost:8000/nothing-to-see-here.png',
-          ratio: 'auto',
-        },
-      });
-    });
-
-    it('renders correctly', () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('has the expected ratio object value', () => {
-      expect(wrapper.vm.ratioObject['--ratio']).toBe('0');
-    });
-  });
-
-
-  describe('image with 3-2 ratio', () => {
-    let wrapper;
-    let spy;
-    beforeEach(() => {
-      spy = sinon.spy();
-      wrapper = shallowMount(CdrImg, {
-        propsData: {
-          src: 'localhost:8000/nothing-to-see-here.png',
-          ratio: '3-2',
-          onError: spy
-        },
-      });
-    });
-
-    it('renders correctly', () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('has the expected ratio object value', () => {
-      expect(wrapper.vm.ratioObject['--ratio']).toBe('66.66666666666666%');
-    });
-
-    it('emits error event for ratio image', () => {
-      wrapper.find('img').trigger('error');
-      expect(spy.calledOnce).toBeTruthy();
-    })
-  });
 });