Merge branch 'main' of github.com:Codecademy/gamut into vo_en-2344_ra…

…dial-progress-outline

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.339](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-04)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+
+
+
+
 ### [0.6.338](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-02)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

packages/gamut-kit/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.338",
+  "version": "0.6.339",
   "author": "Codecademy Engineering <[email protected]>",
   "repository": {
     "type": "git",
     "url": "[email protected]:Codecademy/gamut.git"
   },
   "dependencies": {
-    "@codecademy/gamut": "55.2.1",
+    "@codecademy/gamut": "55.2.2",
     "@codecademy/gamut-icons": "9.3.5",
     "@codecademy/gamut-illustrations": "0.39.0",
     "@codecademy/gamut-patterns": "0.9.7",

packages/gamut-labs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [35.15.12](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-04)
+
+**Note:** Version bump only for package @codecademy/gamut-labs
+
+
+
+
+
 ### [35.15.11](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-02)
 
 **Note:** Version bump only for package @codecademy/gamut-labs

packages/gamut-labs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-labs",
   "description": "Brand and experimental component library for Codecademy",
-  "version": "35.15.11",
+  "version": "35.15.12",
   "author": "Codecademy Engineering <[email protected]>",
   "sideEffects": [
     "*.css",
@@ -25,7 +25,7 @@
     "react-dom": "^17.0.2 || ^18.2.0"
   },
   "dependencies": {
-    "@codecademy/gamut": "55.2.1",
+    "@codecademy/gamut": "55.2.2",
     "@codecademy/gamut-icons": "9.3.5",
     "@codecademy/gamut-illustrations": "0.39.0",
     "@codecademy/gamut-patterns": "0.9.7",

packages/gamut/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [55.2.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-04)
+
+
+### Bug Fixes
+
+* Refactor Shimmer styles for SWC compatibility ([735dd81](https://github.com/Codecademy/gamut/commit/735dd81ea213c386b522856f4e18658bceef88ed))
+
+
+
 ### [55.2.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-02)
 
 **Note:** Version bump only for package @codecademy/gamut

packages/gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "55.2.1",
+  "version": "55.2.2",
   "author": "Codecademy Engineering <[email protected]>",
   "sideEffects": [
     "**/*.css",

packages/gamut/src/Loading/Shimmer.tsx

@@ -1,26 +1,27 @@
-import { css } from '@codecademy/gamut-styles';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
 import { Box, BoxProps } from '../Box';
 
-const shimmer = keyframes`
-0% { left: -500px; opacity: 0;  }
-50% { left: 0px; opacity: 1; }
-100% {  left: 500px; opacity: 0; }
-`;
+const slide = keyframes({
+  from: { left: -500 },
+  to: { left: 500 },
+});
+const fade = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
 
-const ShimmerForeground = styled.div(
-  css({
-    position: 'absolute',
-    height: 1,
-    width: 500,
-    animation: `${shimmer} 2s infinite linear`,
-    background:
-      'linear-gradient(to right, rgba(0,0,0,0) 20%, rgb(0,0,0, 0.2) 50%, rgb(0,0,0, 0) 80%)',
-  })
-);
+const ShimmerForeground = styled(Box)`
+  animation: ${slide} 2s linear infinite, ${fade} 1s linear infinite alternate;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 20%,
+    rgba(0, 0, 0, 0.2) 50%,
+    rgba(0, 0, 0, 0) 80%
+  );
+`;
 
 export const Shimmer: React.FC<BoxProps> = (props) => {
   return (
@@ -32,7 +33,7 @@ export const Shimmer: React.FC<BoxProps> = (props) => {
         opacity={0.5}
         overflow="hidden"
       >
-        <ShimmerForeground />
+        <ShimmerForeground height={1} width={500} position="absolute" />
       </Box>
     </Box>
   );

packages/styleguide/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [66.1.23](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-04)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
+
+
+
+
 ### [66.1.22](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2023-08-03)
 
 

packages/styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "66.1.22",
+  "version": "66.1.23",
   "author": "Codecademy Engineering",
   "scripts": {
     "start": "yarn storybook",
@@ -14,7 +14,7 @@
     "url": "[email protected]:Codecademy/gamut.git"
   },
   "dependencies": {
-    "@codecademy/gamut": "55.2.1",
+    "@codecademy/gamut": "55.2.2",
     "@codecademy/gamut-icons": "9.3.5",
     "@codecademy/gamut-illustrations": "0.39.0",
     "@codecademy/gamut-patterns": "0.9.7",