Merge pull request #1317 from Bynder/update/prepend-gui-all-classnames

GC-3526 prepend gui- to all classnames
Bynder · Nov 20, 2023 · 4c84732 · 4c84732
2 parents c940873 + 569d06a
commit 4c84732
Show file tree

Hide file tree

Showing 477 changed files with 3,334 additions and 3,214 deletions.
diff --git a/assets/loading.svg b/assets/loading.svg
diff --git a/lib/Avatar/.specs/Avatar.spec.tsx b/lib/Avatar/.specs/Avatar.spec.tsx
@@ -9,13 +9,13 @@ import AvatarInformation from "../AvatarInformation";
 import AvatarGroup from "../AvatarGroup";
 
 const classList = [
-  "avatar--highlighted",
-  "avatar--offline",
-  "avatar--size-sm",
-  "avatar--bordered",
-  "avatar--animated",
-  "avatar--has-colour",
-  "avatar--is-locked",
+  "gui-avatar--highlighted",
+  "gui-avatar--offline",
+  "gui-avatar--size-sm",
+  "gui-avatar--bordered",
+  "gui-avatar--animated",
+  "gui-avatar--has-colour",
+  "gui-avatar--is-locked",
 ];
 
 describe("Avatar", () => {

diff --git a/lib/Avatar/AvatarGroup/index.tsx b/lib/Avatar/AvatarGroup/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { node, number, string, bool } from "prop-types";
 import cx from "classnames";
 import Dropdown from "../../Dropdown";
 import Avatar from "../index";
@@ -26,33 +25,33 @@ export function AvatarGroup({
     remaining = children.slice(maximum, total);
   }
 
-  const classes = cx(`avatar-group ${className}`, {
-    "avatar-group--small": small,
-    "avatar-group--micro": micro,
-    "avatar-group-stacked": stacked,
+  const classes = cx(`gui-avatar-group ${className}`, {
+    "gui-avatar-group--small": small,
+    "gui-avatar-group--micro": micro,
+    "gui-avatar-group-stacked": stacked,
   });
 
   return (
-    <div data-component="avatar-group" className={classes}>
+    <div data-component="gui-avatar-group" className={classes}>
       {React.Children.map(display, (child: any) => {
         const styles = { zIndex };
         zIndex -= 1;
 
         return (
-          <span className="avatar-group__item" style={styles}>
+          <span className="gui-avatar-group__item" style={styles}>
             {React.cloneElement(child)}
           </span>
         );
       })}
 
       {total > maximum && (
-        <Dropdown id="avatar-group-dropdown" autoPosition>
-          <Dropdown.Trigger triggerClassName="avatar-plus-trigger">
+        <Dropdown id="gui-avatar-group-dropdown" autoPosition>
+          <Dropdown.Trigger triggerClassName="gui-avatar-plus-trigger">
             <Avatar initials={plusLabel} />
           </Dropdown.Trigger>
           <Dropdown.Content noTransform={noTransform}>
             {React.Children.map(remaining, (child: any) => (
-              <div className="h-margin-bottom-half">
+              <div className="gui-h-margin-bottom-half">
                 <Avatar {...child.props}>
                   <AvatarInformation
                     name={child.props.name}

diff --git a/lib/Avatar/AvatarGroup/styles.scss b/lib/Avatar/AvatarGroup/styles.scss
@@ -8,41 +8,41 @@ $avatar-group-size-micro: 20px !default;
 /* ==========================================================================
    Styles
    ========================================================================== */
-.avatar-group {
+.gui-avatar-group {
   display: flex;
   gap: 4px;
 }
 
-.avatar-group-stacked {
+.gui-avatar-group-stacked {
   gap: 0;
   margin-right: $avatar-group-item-spacing;
 
-  .avatar-group__item {
+  .gui-avatar-group__item {
     margin-right: -$avatar-group-item-spacing;
     z-index: 1;
   }
 }
 
-.avatar-group .dropdown__trigger {
+.gui-avatar-group .gui-dropdown__trigger {
   cursor: pointer;
   border-radius: $avatar-border-radius;
 
-  &.avatar-plus-trigger .avatar {
+  &.gui-avatar-plus-trigger .gui-avatar {
     background: none;
   }
 
-  &:hover .avatar,
-  &:focus .avatar,
-  &.is-active .avatar {
+  &:hover .gui-avatar,
+  &:focus .gui-avatar,
+  &.gui-is-active .gui-avatar {
     background: $avatar-highlighted-background;
 
-    .avatar__initials {
+    .gui-avatar__initials {
       color: $avatar-highlighted-color;
     }
   }
 }
 
-.avatar-group .dropdown__content {
+.gui-avatar-group .gui-dropdown__content {
   z-index: 9999;
   max-width: 300px;
   max-height: 300px;
@@ -52,17 +52,17 @@ $avatar-group-size-micro: 20px !default;
    Modifiers
    ========================================================================== */
 
-.avatar-group--small {
-  .avatar,
-  .avatar__initials {
+.gui-avatar-group--small {
+  .gui-avatar,
+  .gui-avatar__initials {
     width: $avatar-group-size-small;
     height: $avatar-group-size-small;
   }
 }
 
-.avatar-group--micro {
-  .avatar,
-  .avatar__initials {
+.gui-avatar-group--micro {
+  .gui-avatar,
+  .gui-avatar__initials {
     width: $avatar-group-size-micro;
     height: $avatar-group-size-micro;
   }

diff --git a/lib/Avatar/AvatarInformation.tsx b/lib/Avatar/AvatarInformation.tsx
@@ -2,16 +2,16 @@ import React from "react";
 
 export function AvatarInformation(props: any) {
   return (
-    <div className={`avatar__information ${props.className}`}>
-      {props.name && <span className="avatar__name">{props.name}</span>}
+    <div className={`gui-avatar__information ${props.className}`}>
+      {props.name && <span className="gui-avatar__name">{props.name}</span>}
 
       {props.email && (
-        <span className="avatar__email" title={props.email}>
+        <span className="gui-avatar__email" title={props.email}>
           {props.email}
         </span>
       )}
       {props.actions && (
-        <span className="avatar__actions">{props.actions}</span>
+        <span className="gui-avatar__actions">{props.actions}</span>
       )}
     </div>
   );

diff --git a/lib/Avatar/AvatarWithPopover.tsx b/lib/Avatar/AvatarWithPopover.tsx
@@ -31,14 +31,14 @@ export function AvatarWithPopover({
       arrow={false}
       placement={overlayPosition}
       trigger="mouseenter focus"
-      className="avatar-tooltip__wrapper"
+      className="gui-avatar-tooltip__wrapper"
     >
       <span id={id} role="button">
         <Avatar
           email={email}
           name={name}
           {...rest}
-          className="avatar--with-toggle"
+          className="gui-avatar--with-toggle"
         />
       </span>
     </Tippy>

diff --git a/lib/Avatar/README.md b/lib/Avatar/README.md
@@ -1,34 +1,39 @@
 # Avatar
+
 An avatar component displays a circled avatar or initials
 
 ### Props
 
-| Name                | Type          | Default   | Required | Description                                                                   |
-| ------------------- |-------------- | --------- | -------- |------------------------------------------------------------------------------ |
-| colour              | String        | ''        | No       | The fixed option.                                                             |
-| name                | String        | ''        | No       | The fixed option.                                                             |
-| url                 | String        | ''        | No       | The fixed option.                                                             |
-| initials            | String        | ''        | No       | The fixed option.                                                             |
-| isOffline           | Boolean       | `false`   | No       | The fixed option.                                                             |
-| isHighlighted       | Boolean       | `false`   | No       | The fixed option.                                                             |
+| Name          | Type    | Default | Required | Description       |
+| ------------- | ------- | ------- | -------- | ----------------- |
+| colour        | String  | ''      | No       | The fixed option. |
+| name          | String  | ''      | No       | The fixed option. |
+| url           | String  | ''      | No       | The fixed option. |
+| initials      | String  | ''      | No       | The fixed option. |
+| isOffline     | Boolean | `false` | No       | The fixed option. |
+| isHighlighted | Boolean | `false` | No       | The fixed option. |
 
 ### Usage
+
 ```
 <Avatar initials="AE" name="Angus Edwardson" color="green" url="img/url" isOffline isHighlighted />
 ```
+
 # AvatarWithPopover
+
 An avatar component which displays a dropdown menu or a tooltip. All above props are passed down to Avatar component
 
 ### Props
 
-| Name                | Type           | Default                  | Required | Description                                                                   |
-| ------------------- |--------------- | ------------------------ | -------- |------------------------------------------------------------------------------ |
-| overlayPosition     | String         | 'bottom'                 | No       | Which direction to show the popover                                           |
-| triggerEvent        | String / Array | `['onHover', 'onClick']` | No       | Can be an array of events or a single string event                            |
-| popoverClass        | String         | ''                       | No       | Classes to be passed down to the popover wrapper                              |
-| caret               | Boolean        | `false`                  | No       | Add caret to the avatar                                                       |
+| Name            | Type           | Default                  | Required | Description                                        |
+| --------------- | -------------- | ------------------------ | -------- | -------------------------------------------------- |
+| overlayPosition | String         | 'bottom'                 | No       | Which direction to show the popover                |
+| triggerEvent    | String / Array | `['onHover', 'onClick']` | No       | Can be an array of events or a single string event |
+| popoverClass    | String         | ''                       | No       | Classes to be passed down to the popover wrapper   |
+| caret           | Boolean        | `false`                  | No       | Add caret to the avatar                            |
 
 ### Usage
+
 ```
 <AvatarWithPopover
   name="Angus Edwardson"
@@ -38,12 +43,12 @@ An avatar component which displays a dropdown menu or a tooltip. All above props
   popoverClass="popover-dropdown"
   caret
 >
-  <ul className="dropdown-menu">
-    <li className="dropdown__item">
-      <a href="#test" className="dropdown__link">
+  <ul className="gui-dropdown-menu">
+    <li className="gui-dropdown__item">
+      <a href="#test" className="gui-dropdown__link">
         Personal Settings
       </a>
     </li>
   </ul>
 </AvatarWithPopover>
-```
+```
diff --git a/lib/Avatar/index.tsx b/lib/Avatar/index.tsx
@@ -44,23 +44,23 @@ export function Avatar({
   const styles = colour ? { color: colour } : {};
 
   const additionalClasses = cx(className, {
-    "avatar--highlighted": isHighlighted,
-    "avatar--offline": isOffline,
-    "avatar--size-sm": smallSize,
-    "avatar--size-lrg": largeSize,
-    "avatar--size-xlrg": extraLargeSize,
-    "avatar--bordered": bordered,
-    "avatar--animated": animate,
-    "avatar--has-colour": colour,
-    "avatar--is-locked": locked,
+    "gui-avatar--highlighted": isHighlighted,
+    "gui-avatar--offline": isOffline,
+    "gui-avatar--size-sm": smallSize,
+    "gui-avatar--size-lrg": largeSize,
+    "gui-avatar--size-xlrg": extraLargeSize,
+    "gui-avatar--bordered": bordered,
+    "gui-avatar--animated": animate,
+    "gui-avatar--has-colour": colour,
+    "gui-avatar--is-locked": locked,
   });
 
-  const wrapperClasses = cx(`avatar__wrapper ${wrapperClassName}`, {
-    "avatar__wrapper--offline": isOffline,
-    "avatar__wrapper--size-sm": smallSize,
-    "avatar__wrapper--size-xlrg": extraLargeSize,
-    "avatar__wrapper--additional": additional,
-    "is-visible": showAdditional && additional,
+  const wrapperClasses = cx(`gui-avatar__wrapper ${wrapperClassName}`, {
+    "gui-avatar__wrapper--offline": isOffline,
+    "gui-avatar__wrapper--size-sm": smallSize,
+    "gui-avatar__wrapper--size-xlrg": extraLargeSize,
+    "gui-avatar__wrapper--additional": additional,
+    "gui-is-visible": showAdditional && additional,
   });
 
   if (children || additional) {
@@ -70,12 +70,16 @@ export function Avatar({
         onMouseEnter={() => setShowAdditional(true)}
         onMouseLeave={() => setShowAdditional(false)}
       >
-        <div style={styles} className={`avatar ${additionalClasses}`} role="figure">
-          {!url && <span className="avatar__initials">{initials}</span>}
+        <div
+          style={styles}
+          className={`gui-avatar ${additionalClasses}`}
+          role="figure"
+        >
+          {!url && <span className="gui-avatar__initials">{initials}</span>}
 
-          {url && <img className="avatar__image" src={url} alt={name} />}
+          {url && <img className="gui-avatar__image" src={url} alt={name} />}
           {locked && (
-            <div className="avatar__locked">
+            <div className="gui-avatar__locked">
               <Icon
                 name="locked"
                 types={["white"]}
@@ -84,28 +88,38 @@ export function Avatar({
             </div>
           )}
           {onRemove && !locked && (
-            <button onClick={onRemove} className="avatar__remove" type="button">
+            <button
+              onClick={onRemove}
+              className="gui-avatar__remove"
+              type="button"
+            >
               <Icon name="cross" types={["white"]} defaultActiveColor={false} />
             </button>
           )}
         </div>
         {children && children}
-        {additional && <div className="avatar__additional">{additional}</div>}
+        {additional && (
+          <div className="gui-avatar__additional">{additional}</div>
+        )}
       </div>
     );
   }
   return (
-    <div style={styles} className={`avatar ${additionalClasses}`}  role="figure">
-      {!url && <span className="avatar__initials">{initials}</span>}
+    <div
+      style={styles}
+      className={`gui-avatar ${additionalClasses}`}
+      role="figure"
+    >
+      {!url && <span className="gui-avatar__initials">{initials}</span>}
 
-      {url && <img className="avatar__image" src={url} alt={name} />}
+      {url && <img className="gui-avatar__image" src={url} alt={name} />}
       {locked && (
-        <div className="avatar__locked">
+        <div className="gui-avatar__locked">
           <Icon name="locked" types={["white"]} defaultActiveColor={false} />
         </div>
       )}
       {onRemove && !locked && (
-        <button onClick={onRemove} className="avatar__remove" type="button">
+        <button onClick={onRemove} className="gui-avatar__remove" type="button">
           <Icon
             name="cross"
             types={["white"]}

diff --git a/lib/Avatar/stories/Avatar.stories.tsx b/lib/Avatar/stories/Avatar.stories.tsx
@@ -60,7 +60,7 @@ export function Avatar(args: any) {
         title="AvatarComponent (with popover)"
         description="An avatar can show a tooltip on hover."
       >
-        <div className="h-display-flex">
+        <div className="gui-h-display-flex">
           <AvatarWithPopover {...props}>
             <ParticipantInfo name={props.name} email={props.email} />
           </AvatarWithPopover>

diff --git a/lib/Avatar/stories/AvatarGroupMock.tsx b/lib/Avatar/stories/AvatarGroupMock.tsx
@@ -35,7 +35,7 @@ function AvatarGroupMock({
             email={email}
             url={avatar}
             colour={color}
-            className={color ? "avatar--has-colour" : ""}
+            className={color ? "gui-avatar--has-colour" : ""}
             {...avatarProps}
             {...overlayProps}
             key={uuid()}