@hig/banner - npm Package Compare versions

Comparing version 0.2.0-alpha.2cdf05db to 0.2.0-alpha.38ffe77b

package.json

 {
   "name": "@hig/banner",
-  "version": "0.2.0-alpha.2cdf05db",
+  "version": "0.2.0-alpha.38ffe77b",
   "description": "HIG Banner",
@@ -11,4 +11,5 @@ "author": "Autodesk Inc.",
   "devDependencies": {
-    "@hig/scripts": "0.2.0-alpha.2cdf05db",
-    "@hig/styles": "0.1.0-alpha.2cdf05db"
+    "@hig/eslint-config": "0.2.0-alpha.38ffe77b",
+    "@hig/scripts": "0.2.0-alpha.38ffe77b",
+    "@hig/styles": "0.1.0-alpha.38ffe77b"
   },
@@ -20,7 +21,15 @@ "peerDependencies": {
   "scripts": {
-    "build": "hig-scripts-build"
+    "build": "hig-scripts-build",
+    "lint": "eslint ./src/**/*"
   },
   "dependencies": {
-    "hig-react": "0.29.0-alpha.2cdf05db"
-  }
+    "hig-react": "0.29.0-alpha.38ffe77b"
+  },
+  "eslintConfig": {
+    "extends": "@hig"
+  },
+  "eslintIgnore": [
+    "*.scss",
+    "*.json"
+  ]
 }

src/__stories__/Banner.stories.js

@@ -5,7 +5,32 @@ import React from "react";
 import { action } from "@storybook/addon-actions";
-import { text, select } from "@storybook/addon-knobs/react";
+import { text, select, boolean } from "@storybook/addon-knobs/react";
+import { withInfo } from "@storybook/addon-info";
+import { makeSelectOptions, translate as t } from "@hig/storybook/utils";
+import { Button } from "hig-react";
 
-import { Button } from "hig-react";
 import Banner from "../Banner";
+import * as languages from "./i18n";
 
+const typeOptions = makeSelectOptions(Banner.types);
+const placementOptions = makeSelectOptions(Banner.placements);
+
+const knobGroupIds = {
+  basic: "Basic",
+  animation: "Animation",
+  a11y: "Accessibility",
+  actions: "Actions",
+  i18n: "i18n"
+};
+
+const knobLabels = {
+  type: "Style",
+  children: "Message",
+  placement: "Placement",
+  isVisible: "Visible",
+  label: "Label",
+  dismissButtonTitle: "Dismiss title",
+  onDismiss: "Banner dismissed",
+  language: "Language"
+};
+
 function getBannerKnobs(props) {
@@ -15,6 +40,7 @@ const {
     placement,
+    children,
+    isVisible = true,
     label,
     dismissButtonTitle,
     onDismiss,
-    children,
     ...otherProps
@@ -24,41 +50,48 @@ } = props;
   return {
-    type: select("Type", Banner.AVAILABLE_TYPES, type),
-    placement: select("Placement", Banner.AVAILABLE_PLACEMENTS, placement),
-    label: text("Label", label),
-    labelledBy: "unique-id",
-    dismissButtonTitle: text("Dismiss title", dismissButtonTitle),
-    onDismiss: action("Banner dismissed", onDismiss),
-    isVisible: true,
-    children: text("Message", children),
-    ...otherProps
+    ...otherProps,
+    type: select(knobLabels.type, typeOptions, type, knobGroupIds.basic),
+    children: text(knobLabels.children, children, knobGroupIds.basic),
+    placement: select(
+      knobLabels.placement,
+      placementOptions,
+      placement,
+      knobGroupIds.animation
+    ),
+    isVisible: boolean(knobLabels.isVisible, isVisible, knobGroupIds.animation),
+    label: text(knobLabels.label, label, knobLabels.a11y),
+    dismissButtonTitle: text(
+      knobLabels.dismissButtonTitle,
+      dismissButtonTitle,
+      knobGroupIds.a11y
+    ),
+    onDismiss: action(knobLabels.onDismiss, onDismiss, knobGroupIds.actions)
   };
 }
 
-function BannerDemo({ children, ...props }) {
-  return (
-    <div style={{ marginBottom: "15px" }}>
-      <Banner {...getBannerKnobs(props)}>{children}</Banner>
-    </div>
-  );
-}
+const bannerStories = storiesOf("Banner", module);
 
-function BannerStory({ props }) {
-  return <BannerDemo {...props} />;
-}
+bannerStories.add(
+  "default",
+  withInfo({
+    propTables: [Banner]
+  })(() => {
+    const { children, ...otherProps } = getBannerKnobs({});
+    return <Banner {...otherProps}>{children}</Banner>;
+  })
+);
 
-const bannerStories = storiesOf("Banner", module);
-
-const stories = [
-  {
-    description: "default",
-    props: {}
-  },
-  {
-    description: "verbose, with interactions",
-    props: {
+bannerStories.add(
+  "verbose, with interactions",
+  withInfo({
+    propTables: [Banner]
+  })(() => {
+    const chosenLanguage = select(
+      knobLabels.language,
+      languages.languageOptions,
+      "en",
+      knobGroupIds.i18n
+    );
+    const props = {
       type: Banner.types.WARNING,
-      label: "PROCESS COMPLETE",
-      // eslint-disable-next-line max-len
-      children:
-        "Changes have been made to you document. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.",
+      children: t(languages, chosenLanguage, "BANNER_MESSAGE"),
       /** @todo Cleanup/refactor */
@@ -72,3 +105,6 @@ actions: ({ isWrappingActions }) => (
               width={isWrappingActions ? "grow" : "shrink"}
-              title={text("Resolve text", "Accept Changes")}
+              title={text(
+                "Resolve text",
+                t(languages, chosenLanguage, "BANNER_RESOLVE_BUTTON_TEXT")
+              )}
             />
@@ -81,3 +117,6 @@ </Banner.Action>
               width={isWrappingActions ? "grow" : "shrink"}
-              title={text("Reject text", "Reject Changes")}
+              title={text(
+                "Reject text",
+                t(languages, chosenLanguage, "BANNER_REJECT_BUTTON_TEXT")
+              )}
             />
@@ -87,8 +126,6 @@ </Banner.Action>
       )
-    }
-  }
-];
-
-stories.forEach(({ description, props }) => {
-  bannerStories.add(description, () => <BannerStory props={props} />);
-});
+    };
+    const { children, ...otherProps } = getBannerKnobs(props);
+    return <Banner {...otherProps}>{children}</Banner>;
+  })
+);

src/BannerPresenter/BannerPresenter.js

@@ -11,3 +11,2 @@ import React from "react";
   InteractionsWrapper,
-  Label,
   Message,
@@ -50,8 +49,6 @@ Notification,
     refInteractionsWrapper,
-    children: message,
+    children: message
   } = props;
 
-  const hasLabel = !!label;
   const hasActions = React.Children.count(actions) > 0;
-  const wrapperLabelledBy = hasLabel ? labelledBy : undefined;
 
@@ -63,3 +60,4 @@ return (
       isWrappingContent={isWrappingContent}
-      labelledBy={wrapperLabelledBy}
+      label={label}
+      labelledBy={labelledBy}
     >
@@ -66,0 +64,0 @@ <Icon type={type} />

src/index.js

 import "./external.scss";
+
 export { default } from "./Banner";
@@ -3,0 +4,0 @@ export { default as BannerAction } from "./BannerAction";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46739

increased by5.61%

Number of package files

36

increased by16.13%

Lines of code

981

increased by6.05%

Worsened metrics

Dev dependency count

3

increased by50%

Dependency changes

• + Addedhig-interface@0.2.0-alpha.38ffe77b(transitive)

• + Addedhig-react@0.29.0-alpha.38ffe77b(transitive)

• + Addedhig-vanilla@0.2.0-alpha.38ffe77b(transitive)

• - Removedhig-interface@0.2.0-alpha.2cdf05db(transitive)

• - Removedhig-react@0.29.0-alpha.2cdf05db(transitive)

• - Removedhig-vanilla@0.2.0-alpha.2cdf05db(transitive)

• Updatedhig-react@0.29.0-alpha.38ffe77b