@hig/banner - npm Package Compare versions

Comparing version 0.2.0-alpha.6c9fc4ae to 0.2.0-alpha.7472a049

package.json

 {
   "name": "@hig/banner",
-  "version": "0.2.0-alpha.6c9fc4ae",
+  "version": "0.2.0-alpha.7472a049",
   "description": "HIG Banner",
@@ -11,4 +11,5 @@ "author": "Autodesk Inc.",
   "devDependencies": {
-    "@hig/scripts": "0.2.0-alpha.6c9fc4ae",
-    "@hig/styles": "0.1.0-alpha.6c9fc4ae"
+    "@hig/eslint-config": "0.2.0-alpha.7472a049",
+    "@hig/scripts": "0.2.0-alpha.7472a049",
+    "@hig/styles": "0.1.0-alpha.7472a049"
   },
@@ -20,7 +21,19 @@ "peerDependencies": {
   "scripts": {
-    "build": "hig-scripts-build"
+    "build": "hig-scripts-build",
+    "lint": "eslint ./src/**/*"
   },
   "dependencies": {
-    "hig-react": "0.29.0-alpha.6c9fc4ae"
-  }
+    "@hig/icon": "0.1.0-alpha.7472a049",
+    "@hig/icon-button": "0.1.0-alpha.7472a049",
+    "@hig/icons": "0.1.0-alpha.7472a049",
+    "@hig/typography": "0.1.0-alpha.7472a049"
+  },
+  "eslintConfig": {
+    "extends": "@hig"
+  },
+  "eslintIgnore": [
+    "*.scss",
+    "*.json",
+    "*.js.snap"
+  ]
 }

src/__stories__/Banner.stories.js

@@ -5,11 +5,39 @@ 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, RichText } from "hig-react";
+import readme from "../../README.md";
 
-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) {
   const {
     type,
+    placement,
     children,
+    isVisible = true,
     label,
@@ -23,36 +51,49 @@ dismissButtonTitle,
     ...otherProps,
-    type: select("Type", Banner.AVAILABLE_TYPES, type),
-    children: text("Message", children),
-    label: text("Label", label),
-    dismissButtonTitle: text("Dismiss title", dismissButtonTitle),
-    onDismiss: action("Banner dismissed", onDismiss)
+    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(props) {
-  const { children, ...otherProps } = getBannerKnobs(props);
+const bannerStories = storiesOf("Banner", module);
 
-  return (
-    <div style={{ marginBottom: "15px" }}>
-      <Banner {...otherProps}>{children}</Banner>
-    </div>
-  );
-}
+bannerStories.add(
+  "default",
+  withInfo({
+    propTables: [Banner],
+    text: <RichText dangerouslySetInnerHTML={{ __html: readme }} />
+  })(() => {
+    const { children, ...otherProps } = getBannerKnobs({});
+    return <Banner {...otherProps}>{children}</Banner>;
+  })
+);
 
-function BannerStory({ props }) {
-  return <BannerDemo {...props} />;
-}
-
-const stories = [
-  {
-    description: "default",
-    props: {}
-  },
-  {
-    description: "verbose, with interactions",
-    props: {
+bannerStories.add(
+  "verbose, with interactions",
+  withInfo({
+    propTables: [Banner],
+    text: <RichText dangerouslySetInnerHTML={{ __html: readme }} />
+  })(() => {
+    const chosenLanguage = select(
+      knobLabels.language,
+      languages.languageOptions,
+      "en",
+      knobGroupIds.i18n
+    );
+    const props = {
       type: Banner.types.WARNING,
-      children:
-        // eslint-disable-next-line max-len
-        "PROCESS COMPLETE: 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 */
@@ -66,3 +107,6 @@ actions: ({ isWrappingActions }) => (
               width={isWrappingActions ? "grow" : "shrink"}
-              title={text("Resolve text", "Accept Changes")}
+              title={text(
+                "Resolve text",
+                t(languages, chosenLanguage, "BANNER_RESOLVE_BUTTON_TEXT")
+              )}
             />
@@ -75,3 +119,6 @@ </Banner.Action>
               width={isWrappingActions ? "grow" : "shrink"}
-              title={text("Reject text", "Reject Changes")}
+              title={text(
+                "Reject text",
+                t(languages, chosenLanguage, "BANNER_REJECT_BUTTON_TEXT")
+              )}
             />
@@ -81,10 +128,6 @@ </Banner.Action>
       )
-    }
-  }
-];
-
-const bannerStories = storiesOf("Banner", module);
-
-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,3 +49,3 @@ Notification,
     refInteractionsWrapper,
-    children: message,
+    children: message
   } = props;
@@ -53,0 +52,0 @@

src/BannerPresenter/presenters.js

@@ -6,3 +6,5 @@ /* eslint-disable react/prop-types */
 
-import { Icon as BasicIcon, IconButton, Text } from "hig-react";
+import BasicIcon, { names as iconNames, sizes as iconSizes } from "@hig/icon";
+import IconButton, { types as iconButtonTypes } from "@hig/icon-button";
+import { Text } from "@hig/typography";
 
@@ -15,5 +17,2 @@ import "./banner-presenter.scss";
 
-const { types: iconButtonTypes } = IconButton;
-const { names: iconNames, sizes: iconSizes } = BasicIcon;
-
 /** @type {Object.<string, string>} */
@@ -20,0 +19,0 @@ const classNames = Object.freeze({

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118695

increased by169.39%

Number of package files

41

increased by32.26%

Lines of code

3077

increased by234.46%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

50

increased byInfinity%

Worsened metrics

Dependency count

6

increased by100%

Dev dependency count

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hig/icon@0.1.0-alpha.7472a049

• + Added@hig/icon-button@0.1.0-alpha.7472a049

• + Added@hig/icons@0.1.0-alpha.7472a049

• + Added@hig/typography@0.1.0-alpha.7472a049

• + Added@hig/icon@0.1.0-alpha.7472a049(transitive)

• + Added@hig/icon-button@0.1.0-alpha.7472a049(transitive)

• + Added@hig/icons@0.1.0-alpha.7472a049(transitive)

• + Added@hig/typography@0.1.0-alpha.7472a049(transitive)

• - Removedhig-react@0.29.0-alpha.6c9fc4ae

• - Removed@babel/runtime@7.25.6(transitive)

• - Removeddom-helpers@3.4.0(transitive)

• - Removedhig-interface@0.2.0-alpha.6c9fc4ae(transitive)

• - Removedhig-react@0.29.0-alpha.6c9fc4ae(transitive)

• - Removedhig-vanilla@0.2.0-alpha.6c9fc4ae(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@15.7.018.3.1(transitive)

• - Removedreact-flip-move@3.0.5(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• - Removedreact-transition-group@2.9.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedscheduler@0.23.2(transitive)