fix(dashboardeditor): pass mergedi18n, use dotted border for selected

carbon-design-system · Oct 19, 2020 · 030a00e · 030a00e
1 parent 67fcf68
commit 030a00e
Show file tree

Hide file tree

Showing 8 changed files with 372 additions and 131 deletions.
diff --git a/src/components/Card/CardToolbar.jsx b/src/components/Card/CardToolbar.jsx
@@ -49,6 +49,22 @@ const propTypes = {
    * i.e. { thisWeek: 'This week', lastWeek: 'Last week'}
    */
   timeRangeOptions: TimeRangeOptionsPropTypes, // eslint-disable-line react/require-default-props
+  i18n: PropTypes.shape({
+    last24Hours: PropTypes.string,
+    last7Days: PropTypes.string,
+    lastMonth: PropTypes.string,
+    lastQuarter: PropTypes.string,
+    lastYear: PropTypes.string,
+    thisWeek: PropTypes.string,
+    thisMonth: PropTypes.string,
+    thisQuarter: PropTypes.string,
+    thisYear: PropTypes.string,
+    overflowMenuDescription: PropTypes.string,
+    cloneCardLabel: PropTypes.string,
+    deleteCardLabel: PropTypes.string,
+    closeLabel: PropTypes.string,
+    expandLabel: PropTypes.string,
+  }),
 };
 
 const defaultProps = {
@@ -57,6 +73,22 @@ const defaultProps = {
   renderExpandIcon: Popup16,
   className: null,
   timeRangeOptions: null,
+  i18n: {
+    last24Hours: 'Last 24 hours',
+    last7Days: 'Last 7 days',
+    lastMonth: 'Last month',
+    lastQuarter: 'Last quarter',
+    lastYear: 'Last year',
+    thisWeek: 'This week',
+    thisMonth: 'This month',
+    thisQuarter: 'This quarter',
+    thisYear: 'This year',
+    overflowMenuDescription: 'Card actions menu',
+    cloneCardLabel: 'Clone card',
+    deleteCardLabel: 'Delete card',
+    closeLabel: 'Close',
+    expandLabel: 'Expand',
+  },
 };
 
 const CardToolbar = ({
@@ -71,56 +103,47 @@ const CardToolbar = ({
   onCardAction,
   className,
 }) => {
+  const mergedI18n = { ...defaultProps.i18n, ...i18n };
   // maps the timebox internal label to a translated string
   // Need the default here in case that the CardToolbar is used by multiple different components
   // Also needs to reassign itself if i18n changes
   const timeRangeOptions = useMemo(
     () =>
       timeRangeOptionsProp || {
-        last24Hours: i18n.last24HoursLabel,
-        last7Days: i18n.last7DaysLabel,
-        lastMonth: i18n.lastMonthLabel,
-        lastQuarter: i18n.lastQuarterLabel,
-        lastYear: i18n.lastYearLabel,
-        thisWeek: i18n.thisWeekLabel,
-        thisMonth: i18n.thisMonthLabel,
-        thisQuarter: i18n.thisQuarterLabel,
-        thisYear: i18n.thisYearLabel,
+        last24Hours: mergedI18n.last24HoursLabel,
+        last7Days: mergedI18n.last7DaysLabel,
+        lastMonth: mergedI18n.lastMonthLabel,
+        lastQuarter: mergedI18n.lastQuarterLabel,
+        lastYear: mergedI18n.lastYearLabel,
+        thisWeek: mergedI18n.thisWeekLabel,
+        thisMonth: mergedI18n.thisMonthLabel,
+        thisQuarter: mergedI18n.thisQuarterLabel,
+        thisYear: mergedI18n.thisYearLabel,
       },
     [
-      i18n.last24HoursLabel,
-      i18n.last7DaysLabel,
-      i18n.lastMonthLabel,
-      i18n.lastQuarterLabel,
-      i18n.lastYearLabel,
-      i18n.thisMonthLabel,
-      i18n.thisQuarterLabel,
-      i18n.thisWeekLabel,
-      i18n.thisYearLabel,
+      mergedI18n.last24HoursLabel,
+      mergedI18n.last7DaysLabel,
+      mergedI18n.lastMonthLabel,
+      mergedI18n.lastQuarterLabel,
+      mergedI18n.lastYearLabel,
+      mergedI18n.thisMonthLabel,
+      mergedI18n.thisQuarterLabel,
+      mergedI18n.thisWeekLabel,
+      mergedI18n.thisYearLabel,
       timeRangeOptionsProp,
     ]
   );
 
   return isEditable ? (
     <div className={classnames(className, `${iotPrefix}--card--toolbar`)}>
-      {(availableActions.edit ||
-        availableActions.clone ||
-        availableActions.delete) && (
-        <OverflowMenu flipped title={i18n.overflowMenuDescription}>
-          {availableActions.edit && (
-            <OverflowMenuItem
-              onClick={() => {
-                onCardAction(CARD_ACTIONS.EDIT_CARD);
-              }}
-              itemText={i18n.editCardLabel}
-            />
-          )}
+      {(availableActions.clone || availableActions.delete) && (
+        <OverflowMenu flipped title={mergedI18n.overflowMenuDescription}>
           {availableActions.clone && (
             <OverflowMenuItem
               onClick={() => {
                 onCardAction(CARD_ACTIONS.CLONE_CARD);
               }}
-              itemText={i18n.cloneCardLabel}
+              itemText={mergedI18n.cloneCardLabel}
             />
           )}
           {availableActions.delete && (
@@ -129,7 +152,7 @@ const CardToolbar = ({
               onClick={() => {
                 onCardAction(CARD_ACTIONS.DELETE_CARD);
               }}
-              itemText={i18n.deleteCardLabel}
+              itemText={mergedI18n.deleteCardLabel}
             />
           )}
         </OverflowMenu>
@@ -140,7 +163,7 @@ const CardToolbar = ({
       {availableActions.range ? (
         <CardRangePicker
           width={width}
-          i18n={i18n}
+          i18n={mergedI18n}
           timeRange={timeRange}
           timeRangeOptions={timeRangeOptions}
           onCardAction={onCardAction}
@@ -151,18 +174,18 @@ const CardToolbar = ({
         <>
           {isExpanded ? (
             <ToolbarSVGWrapper
-              title={i18n.closeLabel}
+              title={mergedI18n.closeLabel}
               onClick={() => onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)}
-              iconDescription={i18n.closeLabel}
+              iconDescription={mergedI18n.closeLabel}
               renderIcon={Close16}
             />
           ) : (
             <ToolbarSVGWrapper
-              title={i18n.expandLabel}
+              title={mergedI18n.expandLabel}
               onClick={() => {
                 onCardAction(CARD_ACTIONS.OPEN_EXPANDED_CARD);
               }}
-              iconDescription={i18n.expandLabel}
+              iconDescription={mergedI18n.expandLabel}
               renderIcon={renderExpandIcon}
             />
           )}