@maggioli-design-system/mds-push-notification 5.2.0 → 5.2.2

package/src/components/mds-push-notification/test/mds-push-notification.stories.tsx

@@ -12,21 +12,22 @@ export default {
   },
 }
 interface Notification {
-  message: string,
-
-  datetime?: string,
-  preview?: NotificationItemPreviewType,
-  icon?: string,
-  initial?: string
-  src?: string,
-  subject?: string,
+  message: string;
+
+  datetime?: string;
+  preview?: NotificationItemPreviewType;
+  icon?: string;
+  initial?: string;
+  src?: string;
+  subject?: string;
 }
 const exampleNotifications: Notification[] = [
   {
     preview: 'avatar',
     src: '/avatar-05-200x200.jpeg',
     subject: 'Sarah Ho',
-    message: 'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
+    message:
+      'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
   },
   {
     preview: 'avatar',
@@ -38,45 +39,75 @@ const exampleNotifications: Notification[] = [
     preview: 'avatar',
     src: '/avatar-06-200x200.jpeg',
     subject: 'JamPushNotificationElementes Millennial',
-    message: 'Domani ci sei alla riunione che ha organizzato Gigetto? Ho saputo che ci sarà anche Puppo.',
+    message:
+      'Domani ci sei alla riunione che ha organizzato Gigetto? Ho saputo che ci sarà anche Puppo.',
   },
 ]
 
-const PushNotificationElement = ( { index }) => {
-  return <mds-push-notification-item icon="mi/baseline/attachment" subject={`Notification ${index + 1}`} message="Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada."></mds-push-notification-item>
+const PushNotificationElement = ({ index }) => {
+  return (
+    <mds-push-notification-item
+      icon="mi/baseline/attachment"
+      subject={`Notification ${index + 1}`}
+      message="Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada."
+    ></mds-push-notification-item>
+  )
 }
 
 type GetNotificationsProps = {
-  notifications: Notification[]
-}
+  notifications: Notification[];
+};
 const GetNotifications = ({ notifications }: GetNotificationsProps) => {
   // console.log('getNotifications', notifications)
   if (notifications.length > 0) {
-    return <Fragment>
-      {notifications.map((n, i) => {
-        return <mds-push-notification-item key={i} preview={n.preview} src={n.src} subject={n.subject} message={n.message}>
-          <mds-button slot="actions" variant="primary" tone="weak" size="sm">Rispondi</mds-button>
-        </mds-push-notification-item>
-      })}
-    </Fragment>
+    return (
+      <Fragment>
+        {notifications.map((n, i) => {
+          return (
+            <mds-push-notification-item
+              key={i}
+              preview={n.preview}
+              src={n.src}
+              subject={n.subject}
+              message={n.message}
+            >
+              <mds-button
+                slot="actions"
+                variant="primary"
+                tone="weak"
+                size="sm"
+              >
+                Rispondi
+              </mds-button>
+            </mds-push-notification-item>
+          )
+        })}
+      </Fragment>
+    )
   }
 }
 
 const Template = args => {
-  const [notifications, setNotifications] = useState<Notification[]>(exampleNotifications)
+  const [notifications, setNotifications] =
+    useState<Notification[]>(exampleNotifications)
   const [visible, setVisible] = useState(args.visible || false)
 
   useEffect(() => {
-    const pushNotificationsElement = document.querySelector('.mds-push-notification')
+    const pushNotificationsElement = document.querySelector(
+      '.mds-push-notification',
+    )
     if (pushNotificationsElement === null) {
       // eslint-disable-next-line no-alert
       alert('Push notifications element not found')
       return
     }
-    pushNotificationsElement.addEventListener('mdsPushNotificationChange', (e: CustomEvent) => {
-      console.info('mdsPushNotificationChange', e.detail)
-      setVisible(e.detail)
-    })
+    pushNotificationsElement.addEventListener(
+      'mdsPushNotificationChange',
+      (e: CustomEvent) => {
+        console.info('mdsPushNotificationChange', e.detail)
+        setVisible(e.detail)
+      },
+    )
 
     pushNotificationsElement.addEventListener('mdsPushNotificationShow', () => {
       console.info('mdsPushNotificationShow')
@@ -91,48 +122,89 @@ const Template = args => {
 
   function pushN () {
     const n: Notification = {
-      message: 'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
+      message:
+        'Sto preparando il documento che mi hai richiesto, dovrei finire in giornata, fammi sapere se hai altri aggiornamenti al riguardo così non mi perdo pezzi per la strada.',
     }
     setNotifications([...notifications, n])
     // console.log(notifications)
   }
-  return <div class="-m-600">
-    <div class="fixed top-600 left-600 flex gap-100">
-      { visible
-        ? <mds-button class="shadow-outline-50 shadow-tone-neutral" onClick={() => setVisible(false) } icon="mdi/eye-off-outline" variant="error">Hide notifications</mds-button>
-        : <mds-button class="shadow-outline-50 shadow-tone-neutral" onClick={() => setVisible(true) } icon="mi/baseline/remove-red-eye" variant="primary">Show notifications</mds-button>
-      }
-      <mds-button class="shadow-outline-50 shadow-tone-neutral" variant="success" onClick={pushN}>Carica altre...</mds-button>
-    </div>
-    <mds-push-notification class="mds-push-notification" visible={visible === false ? undefined : true} behavior={args.behavior}>
-      {/* <mds-button slot="top" variant="dark" onClick={deleteNotifications}>Cancella notifiche</mds-button> */}
-      <GetNotifications notifications={notifications}/>
-    </mds-push-notification>
-    <div class="p-1200 flex justify-center">
-      <div class="grid gap-600 grid-cols-3 mobile:grid-cols-1 max-w-screen-desktop">
-        { Array(18).fill(null).map((_item, index) => {
-          return (
-            <div class="grid gap-25" key={index}>
-              <mds-text typography='h5' tag="h2">This is a section title</mds-text>
-              <mds-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure, ratione beatae quam optio cumque rerum modi consectetur odit eligendi omnis veniam fuga non ipsam voluptatum a ut neque illum.</mds-text>
-            </div>
-          )
-        })}
+  return (
+    <div class="-m-600">
+      <div class="fixed top-600 left-600 flex gap-100">
+        {visible ? (
+          <mds-button
+            class="shadow-outline-50 shadow-tone-neutral"
+            onClick={() => setVisible(false)}
+            icon="mdi/eye-off-outline"
+            variant="error"
+          >
+            Hide notifications
+          </mds-button>
+        ) : (
+          <mds-button
+            class="shadow-outline-50 shadow-tone-neutral"
+            onClick={() => setVisible(true)}
+            icon="mi/baseline/remove-red-eye"
+            variant="primary"
+          >
+            Show notifications
+          </mds-button>
+        )}
+        <mds-button
+          class="shadow-outline-50 shadow-tone-neutral"
+          variant="success"
+          onClick={pushN}
+        >
+          Carica altre...
+        </mds-button>
+      </div>
+      <mds-push-notification
+        class="mds-push-notification"
+        visible={visible === false ? undefined : true}
+        behavior={args.behavior}
+      >
+        {/* <mds-button slot="top" variant="dark" onClick={deleteNotifications}>Cancella notifiche</mds-button> */}
+        <GetNotifications notifications={notifications} />
+      </mds-push-notification>
+      <div class="p-1200 flex justify-center">
+        <div class="grid gap-600 grid-cols-3 max-mobile:grid-cols-1 max-w-screen-desktop">
+          {Array(18)
+            .fill(null)
+            .map((_item, index) => {
+              return (
+                <div class="grid gap-25" key={index}>
+                  <mds-text typography="h5" tag="h2">
+                    This is a section title
+                  </mds-text>
+                  <mds-text>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Accusamus iure, ratione beatae quam optio cumque rerum modi
+                    consectetur odit eligendi omnis veniam fuga non ipsam
+                    voluptatum a ut neque illum.
+                  </mds-text>
+                </div>
+              )
+            })}
+        </div>
       </div>
     </div>
-  </div>
+  )
 }
 
 const TemplateAddNotifications = () => {
   const [items, setItem] = useState(0)
-  return <div>
-    <mds-button onClick={() => setItem(items + 1) }>Add notifications</mds-button>
-    <mds-push-notification>
-      { Array.from(Array(items).keys()).map((_item, index) =>
-        <PushNotificationElement index={index}/>,
-      ) }
-    </mds-push-notification>
-  </div>
+  return (
+    <div>
+      <mds-button onClick={() => setItem(items + 1)}>
+        Add notifications
+      </mds-button>
+      <mds-push-notification>
+        {Array.from(Array(items).keys()).map((_item, index) => (
+          <PushNotificationElement index={index} />
+        ))}
+      </mds-push-notification>
+    </div>
+  )
 }
 
 const TemplateAddMultipleNotifications = args => {
@@ -140,26 +212,42 @@ const TemplateAddMultipleNotifications = args => {
   const addItems = () => {
     setItem(items + 3)
   }
-  return <div>
-    <mds-button onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
-    <mds-push-notification {...args}>
-      <mds-button slot="top" variant="dark" onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
-      { Array.from(Array(items).keys()).map((_item, index) =>
-        <PushNotificationElement index={index}/>,
-      ) }
-      <mds-button slot="bottom" variant="dark">Cancella notifiche</mds-button>
-    </mds-push-notification>
-  </div>
+  return (
+    <div>
+      <mds-button onClick={addItems.bind(this)}>Carica notifiche...</mds-button>
+      <mds-push-notification {...args}>
+        <mds-button slot="top" variant="dark" onClick={addItems.bind(this)}>
+          Carica notifiche...
+        </mds-button>
+        {Array.from(Array(items).keys()).map((_item, index) => (
+          <PushNotificationElement index={index} />
+        ))}
+        <mds-button slot="bottom" variant="dark">
+          Cancella notifiche
+        </mds-button>
+      </mds-push-notification>
+    </div>
+  )
+}
+
+export const Default = {
+  render: Template,
 }
 
-export const Default = Template.bind({})
-export const AddNotifications = TemplateAddNotifications.bind({})
-AddNotifications.args = {
-  visible: true,
+export const AddNotifications = {
+  render: TemplateAddNotifications,
+
+  args: {
+    visible: true,
+  },
 }
-export const AddMultipleNotifications = TemplateAddMultipleNotifications.bind({})
-AddMultipleNotifications.args = {
-  visible: true,
+
+export const AddMultipleNotifications = {
+  render: TemplateAddMultipleNotifications,
+
+  args: {
+    visible: true,
+  },
 }
 
 export const ManualNotification = Template.bind({}, { behavior: 'manual' })

package/src/dictionary/button.ts

@@ -48,6 +48,11 @@ const buttonSizeDictionary = [
   'xl',
 ]
 
+const tabSizeDictionary = [
+  'sm',
+  'md',
+]
+
 const buttonIconPositionDictionary = [
   'left',
   'right',
@@ -68,4 +73,5 @@ export {
   buttonToneVariantDictionary,
   buttonTypeDictionary,
   buttonVariantDictionary,
+  tabSizeDictionary,
 }

package/src/dictionary/icon.ts

@@ -1,5 +1,6 @@
 import jsonIconsDictionary from '../fixtures/icons.json'
-import jsonMggIconsDictionary from '../fixtures/iconsauce.json'
+import jsonMggIconsDictionary from '@maggioli-design-system/svg-icons/dist/iconsauce.json'
+
 const iconsDictionary = jsonIconsDictionary
 const mggIconsDictionary = jsonMggIconsDictionary
 const svgIconsDictionary = [

package/src/tailwind/components.css

@@ -21,7 +21,7 @@
     pointer-events: none;
     position: absolute;
     transition-behavior: allow-discrete;
-    transition-property: display opacity;
+    transition-property: display, opacity;
   }
 
   .contrast-area-50 {

package/src/type/button.ts

@@ -14,6 +14,10 @@ export type ButtonSizeType =
   | 'lg'
   | 'xl'
 
+export type TabSizeType =
+  | 'sm'
+  | 'md'
+
 export type ButtonIconPositionType =
   | 'left'
   | 'right'