Merge pull request #73 from merative/ab/update-prefix

Rename bx -> cds
merative · Jun 14, 2024 · b1d1682 · b1d1682
2 parents fe48d0e + f110837
commit b1d1682
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 249 deletions.
diff --git a/cookbook/gatsby-browser.js b/cookbook/gatsby-browser.js
diff --git a/cookbook/src/styles/index.scss b/cookbook/src/styles/index.scss
diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Example from "../../../examples/images/sample-logo.jpg";
 import Logo from "./Logo";
+import settings from "../../core/settings";
 
 export default {
   title: "Logo",
@@ -37,25 +38,25 @@ Large.args = {
 export const All = () => {
   return (
     <div className="spm-custom-component">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col">
+      <div className={`${settings.prefix}--grid`}>
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>small</h2>
             <Logo size="small">
               <img src={Example} alt="small logo" />
             </Logo>
           </div>
         </div>
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>medium</h2>
             <Logo size="medium">
               <img src={Example} alt="medium logo" />
             </Logo>
           </div>
         </div>
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>large</h2>
             <Logo size="large">
               <img src={Example} alt="large logo" />

diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js
@@ -50,7 +50,7 @@ describe("Logo tests", () => {
     expect(Object.keys(divAtts).length).toBe(3);
 
     expect(logoDiv.at(0).props().className).toBe(
-      "bx--logo bx--logo--large settings.prefix--logo--extraextra",
+      `${settings.prefix}--logo ${settings.prefix}--logo--large settings.prefix--logo--extraextra`,
     );
     expect(logoDiv.at(0).props().id).toBe("logo_123");
     // this is the child nodes not an attribute

diff --git a/packages/carbon-addons-devenv/src/react/core/settings.js b/packages/carbon-addons-devenv/src/react/core/settings.js
@@ -1,5 +1,5 @@
 const settings = {
-  prefix: "bx",
+  prefix: "cds",
 };
 
 module.exports = settings;
diff --git a/packages/carbon-addons-devenv/src/scss/logo.scss b/packages/carbon-addons-devenv/src/scss/logo.scss
diff --git a/packages/carbon-addons-devenv/src/scss/personfolio.scss b/packages/carbon-addons-devenv/src/scss/personfolio.scss
diff --git a/packages/carbon-addons-devenv/src/scss/prefix.scss b/packages/carbon-addons-devenv/src/scss/prefix.scss
@@ -1 +1 @@
-$prefix: "bx";
+$prefix: "cds";
diff --git a/packages/carbon-addons-devenv/stories/PersonFolio.stories.js b/packages/carbon-addons-devenv/stories/PersonFolio.stories.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PersonFolio from "../src/react/addons_samples/PersonFolio/PersonFolio";
+import settings from "../src/react/core/settings";
 
 // 👇 We create a “template” of how args map to rendering
 const Template = (args) => (
@@ -38,27 +39,27 @@ Senior.args = {
 export const PersonFolioStory = () => {
   return (
     <div className="spm-custom-component">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col">
+      <div className={`${settings.prefix}--grid`}>
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Dave" surname="Bloggs" age="12" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Mary" surname="Bloggs" age="24" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Ann" surname="Bloggs" age="47" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Peter" surname="Smith" age="73" />
           </div>
         </div>