@mirai/ui 1.1.5 → 1.1.6

package/README.md

@@ -1018,7 +1018,8 @@ const MyComponent = (props) => {
 
 A component that displays a notification message with optional icons and close button and receives the following props:
 
-- `children: node` required prop, the content of the notification (any valid React node)
+- `children:bool` required prop, the content of the notification (any valid React node)
+- `contrast:bool` indicanting wheter the notification as tooltip
 - `error:bool` indicating whether the notification represents an error message with corresponding styles
 - `info:bool` indicating whether the notification represents an informational message
 - `inline:bool` indicating whether the notification should be displayed inline

package/build/components/Notification/Notification.js

@@ -9,13 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
-var _excluded = ["children", "error", "info", "inline", "large", "small", "success", "title", "warning", "wide", "onClose"];
+var _excluded = ["children", "contrast", "error", "info", "inline", "large", "small", "success", "title", "warning", "wide", "onClose"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Notification = function Notification(_ref) {
   var children = _ref.children,
+    contrast = _ref.contrast,
     error = _ref.error,
     info = _ref.info,
     _ref$inline = _ref.inline,
@@ -31,7 +32,7 @@ var Notification = function Notification(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     row: true,
     role: others.role || 'notification',
-    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : info ? _NotificationModule.default.info : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, large ? _NotificationModule.default.large : small ? _NotificationModule.default.small : undefined, wide && _NotificationModule.default.wide, others.className)
+    className: (0, _helpers.styles)(_NotificationModule.default.notification, contrast ? _NotificationModule.default.contrast : error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : info ? _NotificationModule.default.info : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, large ? _NotificationModule.default.large : small ? _NotificationModule.default.small : undefined, wide && _NotificationModule.default.wide, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     headline: large,
     paragraph: small,
@@ -64,6 +65,7 @@ exports.Notification = Notification;
 Notification.displayName = 'Component:Notification';
 Notification.propTypes = {
   children: _propTypes.default.any.isRequired,
+  contrast: _propTypes.default.bool,
   error: _propTypes.default.bool,
   info: _propTypes.default.bool,
   inline: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","title","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  title,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    role={others.role || 'notification'}\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : info ? style.info : undefined,\n      inline ? style.inline : style.outlined,\n      large ? style.large : small ? style.small : undefined,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={getIconState({ error, success, warning })} />\n\n    <View className={style.texts}>\n      {title && (\n        <Text action={small} bold headline={large}>\n          {title}\n        </Text>\n      )}\n      {children && (\n        <Text action={!small && !large} small={small}>\n          {children}\n        </Text>\n      )}\n    </View>\n\n    {!inline && !large && onClose && (\n      <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n        <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={ICON.CLOSE} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}
+{"version":3,"file":"Notification.js","names":["Notification","children","contrast","error","info","inline","large","small","success","title","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  contrast,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  title,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    role={others.role || 'notification'}\n    className={styles(\n      style.notification,\n      contrast\n        ? style.contrast\n        : error\n        ? style.error\n        : warning\n        ? style.warning\n        : success\n        ? style.success\n        : info\n        ? style.info\n        : undefined,\n      inline ? style.inline : style.outlined,\n      large ? style.large : small ? style.small : undefined,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={getIconState({ error, success, warning })} />\n\n    <View className={style.texts}>\n      {title && (\n        <Text action={small} bold headline={large}>\n          {title}\n        </Text>\n      )}\n      {children && (\n        <Text action={!small && !large} small={small}>\n          {children}\n        </Text>\n      )}\n    </View>\n\n    {!inline && !large && onClose && (\n      <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n        <Icon headline={large} paragraph={small} level={large ? 1 : 3} value={ICON.CLOSE} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  contrast: PropTypes.bool,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}

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

@@ -44,6 +44,11 @@
   padding: var(--mirai-ui-notification-padding-small);
 }
 
+.notification.outlined.contrast {
+  background-color: var(--mirai-ui-content-dark);
+  border-color: var(--mirai-ui-content-dark);
+}
+
 .notification.outlined.error {
   background-color: var(--mirai-ui-error-background);
   border-color: var(--mirai-ui-error-border);
@@ -78,6 +83,10 @@
   text-align: center;
 }
 
+.notification.outlined.contrast * {
+  color: var(--mirai-ui-base);
+}
+
 .notification.error * {
   color: var(--mirai-ui-error);
 }

package/build/components/Notification/Notification.stories.js

@@ -30,6 +30,7 @@ exports.Story = Story;
 Story.storyName = 'Notification';
 Story.args = {
   children: 'We hold your booking until _Feb 14, 12:00 AM_. If your reserve change, we will get back to you.',
+  contrast: true,
   title: 'Your booking is on Hold',
   error: false,
   info: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.stories.js","names":["title","Story","props","gap","storyName","args","children","error","info","inline","large","small","success","warning","wide","testId","style","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import React from 'react';\nimport { View } from '../../primitives';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <View style={{ gap: 'var(--mirai-ui-space-M)' }}>\n    <Notification {...props} />\n    <Notification {...props} small />\n    <Notification {...props} large />\n    <Notification {...props} inline />\n  </View>\n);\n\nStory.storyName = 'Notification';\n\nStory.args = {\n  children: 'We hold your booking until _Feb 14, 12:00 AM_. If your reserve change, we will get back to you.',\n  title: 'Your booking is on Hold',\n  error: false,\n  info: false,\n  inline: false,\n  large: false,\n  small: false,\n  success: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,gBAAI;IAAC,KAAK,EAAE;MAAEC,GAAG,EAAE;IAA0B;EAAE,gBAC9C,6BAAC,0BAAY,EAAKD,KAAK,CAAI,eAC3B,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,MAAM;EAAA,GAAG,CAC7B;AAAA,CACR;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,cAAc;AAEhCH,KAAK,CAACI,IAAI,GAAG;EACXC,QAAQ,EAAE,iGAAiG;EAC3GN,KAAK,EAAE,yBAAyB;EAChCO,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,KAAK;EACXC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Notification.stories.js","names":["title","Story","props","gap","storyName","args","children","contrast","error","info","inline","large","small","success","warning","wide","testId","style","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import React from 'react';\nimport { View } from '../../primitives';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <View style={{ gap: 'var(--mirai-ui-space-M)' }}>\n    <Notification {...props} />\n    <Notification {...props} small />\n    <Notification {...props} large />\n    <Notification {...props} inline />\n  </View>\n);\n\nStory.storyName = 'Notification';\n\nStory.args = {\n  children: 'We hold your booking until _Feb 14, 12:00 AM_. If your reserve change, we will get back to you.',\n  contrast: true,\n  title: 'Your booking is on Hold',\n  error: false,\n  info: false,\n  inline: false,\n  large: false,\n  small: false,\n  success: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,gBAAI;IAAC,KAAK,EAAE;MAAEC,GAAG,EAAE;IAA0B;EAAE,gBAC9C,6BAAC,0BAAY,EAAKD,KAAK,CAAI,eAC3B,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,MAAM;EAAA,GAAG,CAC7B;AAAA,CACR;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,cAAc;AAEhCH,KAAK,CAACI,IAAI,GAAG;EACXC,QAAQ,EAAE,iGAAiG;EAC3GC,QAAQ,EAAE,IAAI;EACdP,KAAK,EAAE,yBAAyB;EAChCQ,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,KAAK;EACXC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDhB,KAAK,CAACiB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -39,6 +39,162 @@ exports[`component:<Notification> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:contrast & inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification contrast inline"
+  >
+    <span
+      class="icon headline-3"
+    >
+      <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 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:contrast & large 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification contrast outlined large"
+  >
+    <span
+      class="icon headline-1"
+    >
+      <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 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:contrast & small 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification contrast outlined small"
+  >
+    <span
+      class="icon paragraph"
+    >
+      <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 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:contrast 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification contrast outlined"
+  >
+    <span
+      class="icon headline-3"
+    >
+      <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 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
   <div
@@ -735,6 +891,50 @@ exports[`component:<Notification> prop:title 1`] = `
 `;
 
 exports[`component:<Notification> prop:title 2`] = `
+<DocumentFragment>
+  <div
+    class="view row notification contrast outlined"
+  >
+    <span
+      class="icon headline-3"
+    >
+      <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 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:title 3`] = `
 <DocumentFragment>
   <div
     class="view row notification error outlined"
@@ -778,7 +978,7 @@ exports[`component:<Notification> prop:title 2`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:title 3`] = `
+exports[`component:<Notification> prop:title 4`] = `
 <DocumentFragment>
   <div
     class="view row notification warning outlined"
@@ -818,7 +1018,7 @@ exports[`component:<Notification> prop:title 3`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:title 4`] = `
+exports[`component:<Notification> prop:title 5`] = `
 <DocumentFragment>
   <div
     class="view row notification success outlined"
@@ -862,7 +1062,7 @@ exports[`component:<Notification> prop:title 4`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:title 5`] = `
+exports[`component:<Notification> prop:title 6`] = `
 <DocumentFragment>
   <div
     class="view row notification info outlined"

package/package.json

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