loon-bulma-react 2025.0.34 → 2025.1.0

package/src/Tabs/NotificationTab.tsx

@@ -0,0 +1,301 @@
+import { faHorse, faHorseHead } from '@fortawesome/free-solid-svg-icons';
+import { Columns, Column, Message, Notification, Section, H3, H4 } from '@lib/index';
+import { CodeVoorbeeld } from '../components/CodeVoorbeeld';
+
+export function NotificationTab() {
+  return (
+    <>
+      <Section>
+        <H3>Notifications</H3>
+        <Columns multiline gap="3">
+          <div className="column is-one-third">
+            <Notification icon={faHorseHead} onDismiss={() => {}}>
+              Dit is een <strong>Default</strong> info-notification met een icon
+            </Notification>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Primary icon={faHorse} onDismiss={() => {}}>
+              Dit is een primary-notification met een icon
+            </Notification.Primary>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Link onDismiss={() => {}}>Dit is een link-notification</Notification.Link>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Info onDismiss={() => {}}>Dit is een info-notification</Notification.Info>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Success onDismiss={() => {}}>Dit is een success notification</Notification.Success>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Warning onDismiss={() => {}}>Dit is een Warning notification</Notification.Warning>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Danger onDismiss={() => {}}>Dit is een Dangerous notification</Notification.Danger>
+          </div>
+          <div className="column is-one-third">
+            <Notification color="light" onDismiss={() => {}}>
+              Dit is een Light notification
+            </Notification>
+          </div>
+          <div className="column is-one-third">
+            <Notification color="dark" onDismiss={() => {}}>
+              Dit is een Dark notification
+            </Notification>
+          </div>
+
+          <div className="column is-one-third">
+            <Notification.Danger onDismiss={() => {}}>
+              Well, I think I should point out first, Brian, in all fairness, we are not, in fact, the rescue committee. However, I have been asked to read the
+              following prepare statement on behalf of the movement. "We the People's Front of Judea, brackets, officials, end brackets, do hereby convey our
+              sincere fraternal and sisterly greetings to you, Brian, on this, the occasion of your martyrdom." Oh, oh, I see! Running away, eh? You yellow
+              bastards! Come back here and take what's coming to you! I'll bite your legs off! Are you suggesting coconuts migrate?
+            </Notification.Danger>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Success onDismiss={() => {}}>
+              There's no Messiah in here. There's a mess all right, but no Messiah. Now go away! All right, but apart from the sanitation, medicine, education,
+              wine, public order, irrigation, roads, the fresh water system and public health, what have the Romans ever done for us? Manacles! Ooooh, my idea
+              of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun shines out your ass, sonny. Oh, what wouldn't I
+              give to be spat at in the face? I sometimes hang awake at night, dreaming of being spat at in the face
+            </Notification.Success>
+          </div>
+          <div className="column is-one-third">
+            <Notification.Info onDismiss={() => {}}>
+              This is boring. Let's go watch a stoning. You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my
+              nose at you, so-called "Arthur King," you and all your silly English K-nig-hts. Oh, king eh? Very nice. And how'd you get that, eh? By exploiting
+              the workers. By hanging on to outdated imperialist dogma which perpetuates the economic and social differences in our society. I'm Brian, and so's
+              my wife! At this time, a friend shall lose his friend's hammer and the young shall not know where lieth the things possessed by their fathers that
+              their fathers put there only just the night before, about eight o'clock.
+            </Notification.Info>
+          </div>
+        </Columns>
+
+        <Columns centered>
+          <Column size="1/2">
+            <CodeVoorbeeld
+              code={`
+<Notification onDismiss={() => {}}  icon={faHorseHead}>
+  Dit is een <strong>Default</strong> info-notification
+</Notification>
+
+<Notification.Primary onDismiss={() => {}}  icon={faHorse}>
+  Dit is een <strong>BOLD</strong> primary-notification
+</Notification.Primary>
+
+<Notification.Link onDismiss={() => {}}  icon="fas fa-horse-head">
+  Dit is een <strong>BOLD</strong> link-notification
+</Notification.Link>
+
+<Notification.Info onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> info-notification
+</Notification.Info>
+
+<Notification.Success onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> success notification
+</Notification.Success>
+
+<Notification.Warning onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> Warning notification
+</Notification.Warning>
+
+<Notification.Danger onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> dangerous notification
+</Notification.Danger>
+
+<Notification color='light' onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> dangerous notification
+</Notification>
+
+<Notification color='dark' onDismiss={() => {}}>
+  Dit is een <strong>BOLD</strong> dangerous notification
+</Notification>
+          `}
+            />
+          </Column>
+        </Columns>
+      </Section>
+
+      <Section>
+        <H3>Messages</H3>
+        <Columns gap="3">
+          <Column size="1/3">
+            <H4 size="5">Message sizes</H4>
+            <Columns centered>
+              <Column size="1/2">
+                <CodeVoorbeeld
+                  code={`
+<Message.Info size="s" title="Message small (size='s')">
+  Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun
+  shines out your ass, sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+</Message.Info>
+
+<Message.Info size="m" title="Message medium (size='m', DEFAULT)">
+  Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun
+  shines out your ass, sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+</Message.Info>
+
+<Message.Info size="l" title="Message large (size='l')">
+  Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun
+  shines out your ass, sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+</Message.Info>
+
+<Message.Info size="xl" title="Message extra large (size='xl')">
+  Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun
+  shines out your ass, sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+</Message.Info>
+`}
+                />
+              </Column>
+            </Columns>
+            <Message.Info size="s" title="Message small (size='s')">
+              Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun shines out your ass,
+              sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+            </Message.Info>
+            <Message.Info size="m" title="Message medium (size='m', DEFAULT)">
+              Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun shines out your ass,
+              sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+            </Message.Info>
+            <Message.Info size="l" title="Message large (size='l')">
+              Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun shines out your ass,
+              sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+            </Message.Info>
+            <Message.Info size="xl" title="Message extra large (size='xl')">
+              Manacles! Ooooh, my idea of heaven, is to be allowed to be put in manacles. Just for a few hours. They must think the sun shines out your ass,
+              sonny. There's no Messiah in here. There's a mess all right, but no Messiah. Now go away!
+            </Message.Info>
+          </Column>
+
+          <Column>
+            <H4 size="5">Message colors en dismissable</H4>
+            <Columns centered>
+              <Column size="1/2">
+                <CodeVoorbeeld
+                  code={`
+<Message size="s" title="Default message" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message>
+
+<Message size="s" title="Default message met color prop" color="s" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message>
+
+<Message.Primary size="s" title="Primary color (color='p')" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Primary>
+
+<Message.Info size="s" title="Info color (color='i', DEFAULT)" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Info>
+
+<Message.Link size="s" title="Link color (color='l')" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Link>
+
+<Message.Success size="s" title="Success color (color='s')" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Success>
+
+<Message.Warning size="s" title="Warning color (color='w')" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Warning>
+
+<Message.Danger size="s" title="Danger color (color='d')" onDismiss={() => console.log('close een message')}>
+  Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly
+  person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+</Message.Danger>
+`}
+                />
+              </Column>
+            </Columns>
+            <Message size="s" title="Default message" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message>
+            <Message size="s" title="Default message met color prop" color="s" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message>
+            <Message.Primary size="s" title="Primary color (color='p')" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Primary>
+            <Message.Info size="s" title="Info color (color='i', DEFAULT)" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Info>
+            <Message.Link size="s" title="Link color (color='l')" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Link>
+            <Message.Success size="s" title="Success color (color='s')" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Success>
+            <Message.Warning size="s" title="Warning color (color='w')" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Warning>
+            <Message.Danger size="s" title="Danger color (color='d')" onDismiss={() => console.log('close een message')}>
+              Are you suggesting coconuts migrate? You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose
+              at you, so-called "Arthur King," you and all your silly English K-nig-hts.
+            </Message.Danger>
+          </Column>
+
+          <Column size="1/3">
+            <H4 size="5">Collapsable & startCollapsed</H4>
+            <Columns centered>
+              <Column size="1/2">
+                <CodeVoorbeeld
+                  code={`
+<Message color='light' title="Collapsable message" collapsable>
+  Come and see the violence inherent in the system. Help! Help! I'm being repressed! Stwike him, Centuwion! Stwike him vewy
+  wuffly! The Lady of the Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water,
+  signifying by divine providence that I, Arthur, was to carry Excalibur. THAT is why I am your king. Listen, strange women
+  lyin' in ponds distributin' swords is no basis for a system of government. Supreme executive power derives from a mandate from
+  the masses, not from some farcical aquatic ceremony.
+</Message>
+
+<Message color='dark' title="Collapsable message & startcollapsed" collapsable startCollapsed>
+  Come and see the violence inherent in the system. Help! Help! I'm being repressed! Stwike him, Centuwion! Stwike him vewy
+  wuffly! The Lady of the Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water,
+  signifying by divine providence that I, Arthur, was to carry Excalibur. THAT is why I am your king. Listen, strange women
+  lyin' in ponds distributin' swords is no basis for a system of government. Supreme executive power derives from a mandate from
+  the masses, not from some farcical aquatic ceremony.
+</Message>`}
+                />
+              </Column>
+            </Columns>
+            <Message color="light" title="Collapsable message" collapsable>
+              Come and see the violence inherent in the system. Help! Help! I'm being repressed! Stwike him, Centuwion! Stwike him vewy wuffly! The Lady of the
+              Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water, signifying by divine providence that I,
+              Arthur, was to carry Excalibur. THAT is why I am your king. Listen, strange women lyin' in ponds distributin' swords is no basis for a system of
+              government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
+            </Message>
+            <Message color="dark" title="Collapsable message & startcollapsed" collapsable startCollapsed>
+              Come and see the violence inherent in the system. Help! Help! I'm being repressed! Stwike him, Centuwion! Stwike him vewy wuffly! The Lady of the
+              Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water, signifying by divine providence that I,
+              Arthur, was to carry Excalibur. THAT is why I am your king. Listen, strange women lyin' in ponds distributin' swords is no basis for a system of
+              government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
+            </Message>
+            <Message color="p">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="i">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="l">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="s">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="d">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="w">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="dark">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+            <Message color="light">Message zonder title EN zonder onDismiss EN niet collapsable</Message>
+          </Column>
+        </Columns>
+      </Section>
+    </>
+  );
+}