feat(curriculum): Learn CSS Transforms by Building a Penguin - Support CSS rotate property use case (#48929)

* feat(step): add css rotate prop use case

* feat(step): add support to css rotate prop use case in step 23

* refactor(step): make use of the leftFoot and righFoot objects on asserts

* feat(step): add support to css rotate prop use case

* feat(step): add support to css rotate prop on step 91

* feat(step): add support to css rotate prop use case in step 97

* feat(step): add support to css rotate prop use case in step 98

* feat(step): add support to css rotate prop use case in step 99

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md

@@ -14,13 +14,25 @@ Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left`
 You should use the `transform` property to rotate the element.
 
 ```js
-assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform);
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
 ```
 
 You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)');
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
 ```
 
 You should give `.back-mountain` a `left` property.

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md

@@ -14,13 +14,25 @@ To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`
 You should give `.foot.left` a `transform` of `rotate(80deg)`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)');
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
 ```
 
 You should give `.foot.right` a `transform` of `rotate(-80deg)`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)');
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md

@@ -14,7 +14,14 @@ To keep the linear gradient on the correct side of the penguin's left arm, first
 You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
 ```
 
 # --seed--
@@ -281,7 +288,6 @@ body {
   top: 35%;
   left: 5%;
   transform-origin: top left; 
-
 }
 --fcc-editable-region--
 

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md

@@ -14,7 +14,13 @@ Rotate the right arm by `45deg` counterclockwise.
 You should give `.arm.right` a `transform` of `rotate(-45deg)`.
 
 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)');
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
 ```
 
 # --seed--
@@ -287,7 +293,6 @@ body {
 .arm.right {
   top: 0%;
   right: -5%;
-
 }
 --fcc-editable-region--
 

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md

@@ -14,7 +14,16 @@ Within the first waypoint, rotate to `110deg`, and retain the scaling of the lef
 You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)');
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md

@@ -14,7 +14,16 @@ Within the second waypoint, rotate to `130deg`, and retain the scaling of the le
 You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)');
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md

@@ -14,13 +14,31 @@ For the third and fourth waypoints, repeat the `transform` pattern once more.
 You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)');
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
 ```
 
 You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
 
 ```js
-assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)');
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
 ```
 
 # --seed--