@mirai/ui 1.0.43 → 1.0.44

package/build/components/Notification/Notification.js

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
 
-var _excluded = ["children", "error", "success", "title", "warning", "onClose"];
+var _excluded = ["children", "error", "outlined", "small", "success", "title", "warning", "onClose"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,6 +28,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Notification = function Notification(_ref) {
   var children = _ref.children,
       error = _ref.error,
+      _ref$outlined = _ref.outlined,
+      outlined = _ref$outlined === void 0 ? true : _ref$outlined,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
       success = _ref.success,
       title = _ref.title,
       warning = _ref.warning,
@@ -36,7 +40,7 @@ var Notification = function Notification(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     row: true,
-    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, others.className)
+    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, outlined && _NotificationModule.default.outlined, small && _NotificationModule.default.small, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info',
     className: _NotificationModule.default.icon
@@ -61,6 +65,8 @@ Notification.displayName = 'Component:Notification';
 Notification.propTypes = {
   children: _propTypes.default.string.isRequired,
   error: _propTypes.default.bool,
+  outlined: _propTypes.default.bool,
+  small: _propTypes.default.bool,
   success: _propTypes.default.bool,
   title: _propTypes.default.string,
   warning: _propTypes.default.bool,

package/build/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, success, title, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      others.className,\n    )}\n  >\n    <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n    <View\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {title && (\n        <Text bold action>\n          Title\n        </Text>\n      )}\n      <Text action>{children}</Text>\n    </View>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon name=\"Close\" className={style.icon} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,IAAoBC,OAApB,QAAoBA,OAApB;EAAA,IAA6BC,KAA7B,QAA6BA,KAA7B;EAAA,IAAoCC,OAApC,QAAoCA,OAApC;EAAA,IAA6CC,OAA7C,QAA6CA,OAA7C;EAAA,IAAyDC,MAAzD;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETP,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTH,MAAM,CAACI,SAHE;EAHb,iBASE,6BAAC,gBAAD;IAAM,IAAI,EAAET,KAAK,GAAG,OAAH,GAAaG,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EATF,eAUE,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTJ,4BAAMK,IADG,EAETX,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE;EADb,GAMGN,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,MAAM;EAAjB,WAPJ,eAWE,6BAAC,gBAAD;IAAM,MAAM;EAAZ,GAAcH,QAAd,CAXF,CAVF,EAuBGK,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CAxBJ,CADmB;AAAA,CAArB;;;AAgCAZ,YAAY,CAACe,WAAb,GAA2B,wBAA3B;AAEAf,YAAY,CAACgB,SAAb,GAAyB;EACvBf,QAAQ,EAAEgB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBjB,KAAK,EAAEe,mBAAUG,IAFM;EAGvBjB,OAAO,EAAEc,mBAAUG,IAHI;EAIvBhB,KAAK,EAAEa,mBAAUC,MAJM;EAKvBb,OAAO,EAAEY,mBAAUG,IALI;EAMvBd,OAAO,EAAEW,mBAAUI;AANI,CAAzB"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","outlined","small","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  error,\n  outlined = true,\n  small = false,\n  success,\n  title,\n  warning,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      outlined && style.outlined,\n      small && style.small,\n      others.className,\n    )}\n  >\n    <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n    <View\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {title && (\n        <Text bold action>\n          Title\n        </Text>\n      )}\n      <Text action>{children}</Text>\n    </View>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon name=\"Close\" className={style.icon} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  outlined: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IACnBC,QADmB,QACnBA,QADmB;EAAA,IAEnBC,KAFmB,QAEnBA,KAFmB;EAAA,yBAGnBC,QAHmB;EAAA,IAGnBA,QAHmB,8BAGR,IAHQ;EAAA,sBAInBC,KAJmB;EAAA,IAInBA,KAJmB,2BAIX,KAJW;EAAA,IAKnBC,OALmB,QAKnBA,OALmB;EAAA,IAMnBC,KANmB,QAMnBA,KANmB;EAAA,IAOnBC,OAPmB,QAOnBA,OAPmB;EAAA,IAQnBC,OARmB,QAQnBA,OARmB;EAAA,IAShBC,MATgB;;EAAA,oBAWnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETT,KAAK,GAAGQ,4BAAMR,KAAT,GAAiBK,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTT,QAAQ,IAAIO,4BAAMP,QAHT,EAITC,KAAK,IAAIM,4BAAMN,KAJN,EAKTK,MAAM,CAACI,SALE;EAHb,iBAWE,6BAAC,gBAAD;IAAM,IAAI,EAAEX,KAAK,GAAG,OAAH,GAAaK,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EAXF,eAYE,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTJ,4BAAMK,IADG,EAETb,KAAK,GAAGQ,4BAAMR,KAAT,GAAiBK,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE;EADb,GAMGN,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,MAAM;EAAjB,WAPJ,eAWE,6BAAC,gBAAD;IAAM,MAAM;EAAZ,GAAcL,QAAd,CAXF,CAZF,EAyBGO,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CA1BJ,CAXmB;AAAA,CAArB;;;AA4CAd,YAAY,CAACiB,WAAb,GAA2B,wBAA3B;AAEAjB,YAAY,CAACkB,SAAb,GAAyB;EACvBjB,QAAQ,EAAEkB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBnB,KAAK,EAAEiB,mBAAUG,IAFM;EAGvBnB,QAAQ,EAAEgB,mBAAUG,IAHG;EAIvBlB,KAAK,EAAEe,mBAAUG,IAJM;EAKvBjB,OAAO,EAAEc,mBAAUG,IALI;EAMvBhB,KAAK,EAAEa,mBAAUC,MANM;EAOvBb,OAAO,EAAEY,mBAAUG,IAPI;EAQvBd,OAAO,EAAEW,mBAAUI;AARI,CAAzB"}

package/build/components/Notification/Notification.module.css

@@ -9,14 +9,23 @@
   background-color: var(--mirai-ui-accent-background);
   border-radius: var(--mirai-ui-notification-border-radius);
   padding: var(--mirai-ui-notification-padding);
+}
+
+.notification.outlined {
   border: solid 1px var(--mirai-ui-accent-border);
 }
 
+.notification.small {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
 .notification * {
   color: var(--mirai-ui-accent);
 }
 
-.notification.success {
+.notification.success:not(.small) {
   background-color: var(--mirai-ui-success-background);
   border-color: var(--mirai-ui-success-border);
 }
@@ -25,7 +34,7 @@
   color: var(--mirai-ui-success);
 }
 
-.notification.error {
+.notification.error:not(.small) {
   background-color: var(--mirai-ui-error-background);
   border-color: var(--mirai-ui-error-border);
 }
@@ -34,7 +43,7 @@
   color: var(--mirai-ui-error);
 }
 
-.notification.warning {
+.notification.warning:not(.small) {
   background-color: var(--mirai-ui-warning-background);
   border-color: var(--mirai-ui-warning-border);
 }

package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap

@@ -3,7 +3,7 @@
 exports[`component:<Notification> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification mirai"
+    class="view row notification outlined mirai"
   >
     <span
       class="icon icon"
@@ -42,7 +42,7 @@ exports[`component:<Notification> inherit:className 1`] = `
 exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification error"
+    class="view row notification error outlined"
   >
     <span
       class="icon icon"
@@ -81,7 +81,7 @@ exports[`component:<Notification> prop:error 1`] = `
 exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification"
+    class="view row notification outlined"
   >
     <span
       class="icon icon"
@@ -149,10 +149,88 @@ exports[`component:<Notification> prop:onClose 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:outlined 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:small 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification outlined small"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification success"
+    class="view row notification success outlined"
   >
     <span
       class="icon icon"
@@ -191,7 +269,7 @@ exports[`component:<Notification> prop:success 1`] = `
 exports[`component:<Notification> prop:title 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification"
+    class="view row notification outlined"
   >
     <span
       class="icon icon"
@@ -235,7 +313,7 @@ exports[`component:<Notification> prop:title 1`] = `
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification warning"
+    class="view row notification warning outlined"
   >
     <span
       class="icon icon"
@@ -274,7 +352,7 @@ exports[`component:<Notification> prop:warning 1`] = `
 exports[`component:<Notification> renders 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification"
+    class="view row notification outlined"
   >
     <span
       class="icon icon"
@@ -313,7 +391,7 @@ exports[`component:<Notification> renders 1`] = `
 exports[`component:<Notification> testID 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification"
+    class="view row notification outlined"
     data-testid="mirai"
   >
     <span

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",