switch to cds prefix

IBM · Aug 3, 2022 · 2a8aff1 · 2a8aff1
1 parent f22577a
commit 2a8aff1
Show file tree

Hide file tree

Showing 55 changed files with 259 additions and 267 deletions.
diff --git a/addon/components/breadcrumbs/template.hbs b/addon/components/breadcrumbs/template.hbs
@@ -1,9 +1,9 @@
 {{import eq from 'ember-truth-helpers/helpers/equal'}}
 
-<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb" ...attributes>
+<nav class="cds--breadcrumb cds--breadcrumb--no-trailing-slash" aria-label="breadcrumb" ...attributes>
     {{#each @crumbs as |crumb|}}
-        <div class="bx--breadcrumb-item">
-            <a href="#" class="bx--link" aria-current="{{if (eq crumb this.lastItem) 'page'}}" >
+        <div class="cds--breadcrumb-item">
+            <a href="#" class="cds--link" aria-current="{{if (eq crumb this.lastItem) 'page'}}" >
                 {{crumb}}
             </a>
         </div>

diff --git a/addon/components/button/component.ts b/addon/components/button/component.ts
@@ -79,7 +79,7 @@ type Args = {
  @class CarbonButton
  @public
  **/
-@classPrefix('bx--btn--')
+@classPrefix('cds--btn--')
 class CarbonButton extends Component<Args> {
   @tracked loading;
   @tracked disabled;

diff --git a/addon/components/button/styles.scoped.scss b/addon/components/button/styles.scoped.scss
@@ -1,5 +1,5 @@
 .namespace {
-  .bx--loading {
+  .cds--loading {
     width: 2rem;
     height: 2rem;
     display: inline-block;

diff --git a/addon/components/button/template.hbs b/addon/components/button/template.hbs
@@ -5,7 +5,7 @@
 
 <button ...attributes
         onclick={{fn this.onButtonClick}}
-        class="bx--btn {{this.bxClassNames}} {{styles.namespace}} {{if (or this.loading @loading) 'bx--btn--ghost'}}"
+        class="cds--btn {{this.bxClassNames}} {{styles.namespace}} {{if (or this.loading @loading) 'cds--btn--ghost'}}"
         aria-label="{{if @danger 'danger'}}"
         disabled={{or @disabled this.loading @loading}}
         type="button">

diff --git a/addon/components/card/template.hbs b/addon/components/card/template.hbs
@@ -7,7 +7,7 @@
       </div>
     {{/if}}
     {{#if @loading}}
-      <div class="bx--skeleton bx--btn" style="width: 100%"></div>
+      <div class="cds--skeleton cds--btn" style="width: 100%"></div>
     {{else}}
       {{yield}}
     {{/if}}

diff --git a/addon/components/checkbox/template.hbs b/addon/components/checkbox/template.hbs
@@ -1,18 +1,18 @@
-<div class="bx--checkbox-wrapper" ...attributes>
+<div class="cds--checkbox-wrapper" ...attributes>
 <label
   tabindex='0'
   {{did-insert this.setup}}
   {{on 'focus' (fn (mut this.isFocus) true)}}
   {{on 'blur' (fn (mut this.isFocus) false)}}
   for="checkbox-{{this.guid}}"
-  class="bx--checkbox-label {{if this.isFocus 'bx--checkbox-label__focus'}}"
+  class="cds--checkbox-label {{if this.isFocus 'cds--checkbox-label__focus'}}"
   data-contained-checkbox-disabled="{{if @disabled 'true' 'false'}}"
   data-contained-checkbox-state="{{if @indeterminate 'mixed' @checked}}">
     <input
             disabled={{if this.disabled true false}}
             id='checkbox-{{this.guid}}'
             readonly={{@readonly}}
-            class="bx--checkbox"
+            class="cds--checkbox"
             type="checkbox"
             name="{{@name}}"
             checked={{if @indeterminate true @checked}}

diff --git a/addon/components/code-snippet/template.hbs b/addon/components/code-snippet/template.hbs
@@ -3,8 +3,8 @@
 {{import set from 'carbon-components-ember/helpers/set'}}
 
 {{#if (eq this.type 'default')}}
-  <div class="bx--snippet bx--snippet--single">
-    <div class="bx--snippet-container" aria-label="Code Snippet Text">
+  <div class="cds--snippet cds--snippet--single">
+    <div class="cds--snippet-container" aria-label="Code Snippet Text">
   <pre>
     <code {{did-insert (set this "carbonElement")}} >
       {{yield}}
@@ -17,26 +17,29 @@
 
 
 {{#if (eq @type 'multiline')}}
-  <div class="bx--snippet bx--snippet--multi {{if this.expanded 'bx--snippet--expand'}}" data-code-snippet>
-    <div class="bx--snippet-container" aria-label="Code Snippet Text">
+  <div class="cds--snippet cds--snippet--multi {{if this.expanded 'cds--snippet--expand'}}" data-code-snippet>
+    <div class="cds--snippet-container" aria-label="Code Snippet Text" style="min-height: 48px; {{unless this.expanded 'max-height: 240px;'}}">
     <pre>
       <code {{did-insert (set this "codeElement")}}>
         {{yield}}
       </code>
     </pre>
     </div>
-    <CopyButton @targetElement={{this.codeElement}} />
-    <Button
-      class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand"
+    <div class="cds--snippet__overflow-indicator--right"></div>
+    <span class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip">
+      <CopyButton @targetElement={{this.codeElement}} />
+    </span>
+    <button onclick={{fn (set this 'expanded') (not this.expanded)}}
+      class="cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand"
       type="button"
     >
-  <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
+  <span class="cds--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
     more</span>
-      <svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
+      <svg class="cds--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
         <title>Show more icon</title>
         <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
       </svg>
-    </Button>
+    </button>
   </div>
 {{/if}}
 

diff --git a/addon/components/copy-button/component.ts b/addon/components/copy-button/component.ts
@@ -1,25 +1,36 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import CopyButton from 'carbon-components/es/components/copy-button/copy-button';
+import { tracked } from '@glimmer/tracking';
 
 
-class MyCopyButton extends CopyButton {
-  constructor(carbonElement: any, options: { targetElementId: string; targetElement: Element }) {
-    super(carbonElement, options)
+type Args = {
+  targetElementId: string;
+  targetElement: Element;
+
+};
+
+export default class CarbonCopyButton extends Component<Args> {
+  carbonElement: any;
+  @tracked didCopy: boolean;
+  get options() {
+    return {
+      targetElement: this.args.targetElement,
+      targetElementId: this.args.targetElementId
+    };
   }
 
-  options: {
-    targetElementId: string;
-    targetElement: Element;
-  };
-  element: Element;
+  @action
+  loadCarbonComponent(carbonElement) {
+    this.carbonElement = carbonElement;
+  }
 
+  @action
   copyToClipboard() {
     let targetElement: any = this.options.targetElement;
     if (!targetElement && this.options.targetElementId) {
       targetElement = document.getElementById(this.options.targetElementId);
     }
-    targetElement = targetElement || this.element;
+    targetElement = targetElement || this.carbonElement;
     const el = document.createElement('textarea'); // Create a <textarea> element
     // Set its value to the string that you want copied
     el.value = targetElement.textContent.trim().split('\n').map(x => x.trim()).join('\n');
@@ -37,41 +48,9 @@ class MyCopyButton extends CopyButton {
       document.getSelection()!.removeAllRanges(); // Unselect everything on the HTML document
       document.getSelection()!.addRange(selected); // Restore the original selection
     }
-  }
-
-  handleClick(...args) {
-    super.handleClick(...args);
-    this.copyToClipboard();
-  }
-}
-
-type Args = {
-  targetElementId: string;
-  targetElement: Element;
-
-};
-
-export default class CarbonCopyButton extends Component<Args> {
-  carbonComponent: any;
-  get options() {
-    return {
-      targetElement: this.args.targetElement,
-      targetElementId: this.args.targetElementId
-    };
-  }
-
-  @action
-  loadCarbonComponent(carbonElement) {
-    this.destroyCarbonComponent();
-    const options = this.options;
-    options.targetElement = options.targetElement || carbonElement;
-    this.carbonComponent = new MyCopyButton(carbonElement, this.options);
-  }
-
-  @action
-  destroyCarbonComponent(element?) {
-    if (element && (!this.carbonComponent || this.carbonComponent.element !== element)) return;
-    this.carbonComponent && this.carbonComponent.release();
-    this.carbonComponent = null;
+    this.didCopy = true;
+    setTimeout(() => {
+      this.didCopy = false
+    }, 3000);
   }
 }
diff --git a/addon/components/copy-button/template.hbs b/addon/components/copy-button/template.hbs
@@ -1,39 +1,50 @@
 {{#if (or @targetElement @targetElementId)}}
   <button
+    onclick={{this.copyToClipboard}}
     {{did-insert this.loadCarbonComponent}}
-    {{will-destroy this.destroyCarbonComponent}}
       data-copy-btn
-      class="{{if @inline 'bx--snippet bx--snippet--inline bx--btn--copy' 'bx--snippet-button'}}"
+      class="{{if @inline 'cds--btn--icon-only cds--snippet cds--snippet--inline cds--copy cds--btn cds--btn--md cds--btn--primary' 'cds--btn--icon-only cds--copy-btn cds--copy cds--btn cds--btn--md cds--btn--primary'}}"
       aria-label="Copy code"
       tabindex="0">
     {{#if (has-block)}}
       <code>{{yield}}</code>
     {{/if}}
     {{#unless @inline}}
-      <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <svg class="cds--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
         <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
         <path d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z" />
       </svg>
     {{/unless}}
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    <EmberTooltip>
+      {{#if this.didCopy}}
+        Copied!
+      {{else}}
+        Copy to clipboard
+      {{/if}}
+    </EmberTooltip>
   </button>
 {{else}}
-  <button
+  <button onclick={{this.copyToClipboard}}
     {{did-insert this.loadCarbonComponent}}
-    {{will-destroy this.destroyCarbonComponent}}
       data-copy-btn
-      class="{{if @inline 'bx--snippet bx--snippet--inline bx--btn--copy' 'bx--snippet-button'}}"
+      class="{{if @inline 'cds--snippet cds--snippet--inline cds--btn--copy' 'cds--btn--icon-only cds--copy-btn cds--copy cds--btn cds--btn--md cds--btn--primary'}}"
       aria-label="Copy code"
       tabindex="0">
     {{#if (has-block)}}
       <code>{{yield}}</code>
     {{/if}}
     {{#unless @inline}}
-      <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <svg class="cds--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
         <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
         <path d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z" />
       </svg>
     {{/unless}}
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    <EmberTooltip>
+      {{#if this.didCopy}}
+        Copied!
+      {{else}}
+        Copy to clipboard
+      {{/if}}
+    </EmberTooltip>
   </button>
 {{/if}}
diff --git a/addon/components/data-table/-header/template.hbs b/addon/components/data-table/-header/template.hbs
@@ -6,27 +6,27 @@
 <thead>
   <tr>
     {{#if @isExpandable}}
-      <th class="bx--table-expand">
+      <th class="cds--table-expand">
         <!-- checkbox th -->
         <!-- sortable th  -->
-        <span class="bx--table-header-label"></span>
+        <span class="cds--table-header-label"></span>
       </th>
     {{/if}}
     {{#if @isCheckable}}
-      <th  class="bx--table-column-checkbox">
+      <th  class="cds--table-column-checkbox">
         <Checkbox @checked={{@table.allChecked}} @onChange={{fn @table.toggleSelectAllItems}} />
       </th>
     {{/if}}
     {{#each @headers as |h|}}
       <th>
         {{#if h.sortable}}
-          <Button class="bx--table-sort" title={{h.label}}>
-            <span class="bx--table-header-label">{{h.label}}</span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
+          <Button class="cds--table-sort" title={{h.label}}>
+            <span class="cds--table-header-label">{{h.label}}</span>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
           </Button>
         {{else}}
-          <span class="bx--table-header-label">{{h.label}}</span>
+          <span class="cds--table-header-label">{{h.label}}</span>
         {{/if}}
       </th>
     {{/each}}

diff --git a/addon/components/data-table/-menu/template.hbs b/addon/components/data-table/-menu/template.hbs
@@ -1,6 +1,6 @@
 {{import Menu from 'carbon-components-ember/components/menu'}}
 
-<td class="bx--table-column-menu" >
+<td class="cds--table-column-menu" >
   <Menu @icon="overflow-menu--vertical" @direction="top" as |Item|>
     {{yield Item}}
   </Menu>

diff --git a/addon/components/data-table/-row/template.hbs b/addon/components/data-table/-row/template.hbs
@@ -3,25 +3,25 @@
 {{import set from 'carbon-components-ember/helpers/set'}}
 {{import has from 'carbon-components-ember/helpers/has'}}
 
-<tr class="{{if (has @table.state.selectedItems @item) 'bx--data-table--selected'}}">
+<tr class="{{if (has @table.state.selectedItems @item) 'cds--data-table--selected'}}">
   {{#if @isExpandable}}
-    <td class="bx--table-expand" data-event="expand">
-      <Button class="bx--table-expand__button" @onClick={{fn (set this 'isExpanded' (not this.isExpanded))}}>
-        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
+    <td class="cds--table-expand" data-event="expand">
+      <Button class="cds--table-expand__button" @onClick={{fn (set this 'isExpanded' (not this.isExpanded))}}>
+        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
       </Button>
     </td>
   {{/if}}
   {{#if @isCheckable}}
-    <td class="bx--table-column-checkbox">
+    <td class="cds--table-column-checkbox">
       <Checkbox @checked={{has @table.state.selectedItems @item}} @onChange={{fn @table.toggleItemSelection @item}} />
     </td>
   {{/if}}
   {{yield}}
 </tr>
 {{#if @isExpanded}}
-  <tr class="bx--expandable-row" data-child-row>
+  <tr class="cds--expandable-row" data-child-row>
     <td colspan="{{@table.headers.length}}">
-      <div class="bx--child-row-inner-container">
+      <div class="cds--child-row-inner-container">
         {{yield}}
       </div>
     </td>

diff --git a/addon/components/data-table/-search-input/styles.scoped.scss b/addon/components/data-table/-search-input/styles.scoped.scss
@@ -1,5 +1,5 @@
 .is-searching {
-  .bx--search-magnifier {
+  .cds--search-magnifier {
     display: none;
   }
 }
diff --git a/addon/components/data-table/-search-input/template.hbs b/addon/components/data-table/-search-input/template.hbs
@@ -3,7 +3,7 @@
 {{import debounce from '@abcum/ember-helpers/helpers/debounce'}}
 {{import styles from './styles.scoped.scss'}}
 
-<div class="bx--toolbar-search-container-persistent {{if this.isSearching styles.is-searching}}">
+<div class="cds--toolbar-search-container-persistent {{if this.isSearching styles.is-searching}}">
   <SearchInput @isLoading={{@isLoading}} @value={{@value}} @onChange={{fn this.doSearch}} />
   <Loading style="position: relative; top: -41px; right: 7px" @inline={{true}} @active={{this.isSearching}} />
 </div>
diff --git a/addon/components/data-table/-skeleton/template.hbs b/addon/components/data-table/-skeleton/template.hbs
@@ -1,9 +1,9 @@
-<section class="bx--structured-list bx--skeleton">
-      <div class="bx--structured-list-tbody">
-        <div class="bx--structured-list-row">
+<section class="cds--structured-list cds--skeleton">
+      <div class="cds--structured-list-tbody">
+        <div class="cds--structured-list-row">
           {{#each @headers as |h|}}
-            <div class="bx--structured-list-td bx--structured-list-content--nowrap">
-              <div class="bx--skeleton__text"></div>
+            <div class="cds--structured-list-td cds--structured-list-content--nowrap">
+              <div class="cds--skeleton__text"></div>
             </div>
           {{/each}}
         </div>

diff --git a/addon/components/data-table/-table/template.hbs b/addon/components/data-table/-table/template.hbs
@@ -1,3 +1,3 @@
-<table class="bx--data-table  {{if @isSortable 'bx--data-table--sort'}} {{if @isLoading 'bx--skeleton'}}" >
+<table class="cds--data-table  {{if @isSortable 'cds--data-table--sort'}} {{if @isLoading 'cds--skeleton'}}" >
   {{yield}}
 </table>