Make LiveIcon subcomponent of Tag (#5352)

* Initial commit * Update import * Changeset: Version packages (#5351) * version packages * chore(eslint): ignore changelogs --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Cassandra Tam <[email protected]> * chore(prettier): lint MD and MDX files (#5353) * chore(prettier): ignore changelogs and lock files * chore(prettier): check md, mdx, cjs files * style: prettier fixes * chore(deps): update dependency turbo to ^2.3.3 (#5307) Co-authored-by: Cassandra Tam <[email protected]> * Fix import, fix formatting * Fix story import * Attempt fix * Fix imports * Extraced LiveIcon from Story to own component * Fix formatting * Fix export * Fix export * Imports * Fix import * Add changeset * PR Feedback * Removed reused code * Add displayName * Update Migration Guide * Fix import/export * Add displayName, update Migration docs --------- Co-authored-by: Christian Moore <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Cassandra Tam <[email protected]> Co-authored-by: cultureamp-renovate[bot] <89962466+cultureamp-renovate[bot]@users.noreply.github.com>
cultureamp · Dec 10, 2024 · 5339698 · 5339698
1 parent d3ae52d
commit 5339698
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 193 deletions.
diff --git a/.changeset/empty-pots-remain.md b/.changeset/empty-pots-remain.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Converted LiveIcon into a subcomponent of Tag
diff --git a/packages/components/src/Tag/Tag.module.scss b/packages/components/src/Tag/Tag.module.scss
@@ -211,95 +211,3 @@ $small: $spacing-md;
   background-color: $color-blue-100;
   color: $color-purple-800;
 }
-
-.liveIcon {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin-inline-start: 0.25rem;
-  color: $color-green-500;
-}
-
-.liveIcon_base {
-  opacity: 30%;
-  display: block;
-}
-
-.liveIcon_1,
-.liveIcon_2,
-.liveIcon_3 {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
-
-.liveIcon_1 {
-  clip-path: circle(16%);
-}
-
-.liveIcon_2,
-.liveIcon_3 {
-  animation-duration: 3s;
-  animation-iteration-count: 3;
-  animation-delay: 1s;
-}
-
-.liveIcon_2 {
-  clip-path: circle(32%);
-  animation-name: pulse-inner;
-}
-
-.liveIcon_3 {
-  clip-path: circle(50%);
-  animation-name: pulse-outer;
-}
-
-@keyframes pulse-inner {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 100%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
-
-@keyframes pulse-outer {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 0%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
diff --git a/packages/components/src/Tag/Tag.tsx b/packages/components/src/Tag/Tag.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Avatar, AvatarProps } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
 import { Icon } from '~components/__future__/Icon'
+import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon'
 import { TagVariants } from './types'
 import styles from './Tag.module.scss'
 
@@ -130,42 +130,7 @@ export const Tag = (props: TagProps): JSX.Element => {
               </button>
             </>
           )}
-          {variant === 'statusLive' && (
-            <span className={styles.liveIcon}>
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_base}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_1}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_2}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_3}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-            </span>
-          )}
+          {variant === 'statusLive' && <LiveIcon />}
         </>
       </div>
     </div>

diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css
@@ -0,0 +1,91 @@
+.liveIcon {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: 0.25rem;
+  color: var(--color-green-500);
+}
+
+.liveIcon_base {
+  opacity: 0.3;
+  display: block;
+}
+
+.liveIcon_1,
+.liveIcon_2,
+.liveIcon_3 {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.liveIcon_1 {
+  clip-path: circle(16%);
+}
+
+.liveIcon_2,
+.liveIcon_3 {
+  animation-duration: 3s;
+  animation-iteration-count: 3;
+  animation-delay: 1s;
+}
+
+.liveIcon_2 {
+  clip-path: circle(32%);
+  animation-name: pulse-inner;
+}
+
+.liveIcon_3 {
+  clip-path: circle(50%);
+  animation-name: pulse-outer;
+}
+
+@keyframes pulse-inner {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-outer {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx
@@ -0,0 +1,48 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from 'react'
+import { SVG } from '~components/Icon/subcomponents/SVG'
+import styles from './LiveIcon.module.css'
+
+type LiveIconSvgProps = { classNameOverride: string }
+
+const LiveIconSvg = ({ classNameOverride }: LiveIconSvgProps): JSX.Element => (
+  <SVG
+    role="presentation"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    classNameOverride={classNameOverride}
+  >
+    <path
+      stroke="currentColor"
+      d="M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+    <path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
+    <path
+      stroke="currentColor"
+      d="M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+  </SVG>
+)
+
+LiveIconSvg.displayName = 'LiveIconSvg'
+
+export const LiveIcon = (): JSX.Element => (
+  <span className={styles.liveIcon}>
+    <LiveIconSvg classNameOverride={styles.liveIcon_base} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_1} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_2} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_3} />
+  </span>
+)
+
+LiveIcon.displayName = 'LiveIcon'
diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/index.ts b/packages/components/src/Tag/subcomponents/LiveIcon/index.ts
@@ -0,0 +1 @@
+export * from './LiveIcon'
diff --git a/packages/components/src/Tag/subcomponents/index.ts b/packages/components/src/Tag/subcomponents/index.ts
@@ -0,0 +1 @@
+export * from './LiveIcon'