@bigbinary/neetoui 2.0.46 → 2.0.50

package/stories/Tooltip.stories.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+
+import Button from "../lib/components/Button";
+import Tooltip from "../lib/components/Tooltip";
+
+export default {
+  title: "Overlays/Tooltip",
+  component: Tooltip,
+  subcomponents: { Button },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: '`import { Tooltip } from "@bigbinary/neetoui";`'
+      }
+    }
+  },
+};
+
+export const FollowCursor = (args) => {
+  return (
+    <div className="space-y-8 p-10">
+      <Tooltip
+        placement={"top"}
+        followCursor={"horizontal"}
+        content={"Content is string"}
+      >
+        <Button style="secondary" label="Follow Cursor" />
+      </Tooltip>
+    </div>
+  );
+};
+
+export const JSXContentInside = (args) => {
+  return (
+    <div className="space-y-8 p-10">
+      <Tooltip
+        placement={"top"}
+        trigger={"click"}
+        content={
+          <span>
+            Content is a <b>JSX</b> <u>Element</u>
+          </span>
+        }
+      >
+        <Button style="secondary" label="On Click" />
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Placements = () => {
+  return (
+    <div className="space-y-8 p-10">
+      <div className="flex items-center justify-start gap-8">
+        <Tooltip placement={"top"} content={"Tooltip"}>
+          <Button style="secondary" label="top" />
+        </Tooltip>
+        <Tooltip placement={"top-start"} content={"Tooltip"}>
+          <Button style="secondary" label="top-start" />
+        </Tooltip>
+        <Tooltip placement={"top-end"} content={"Tooltip"}>
+          <Button style="secondary" label="top-end" />
+        </Tooltip>
+      </div>
+      <div className="flex items-center justify-start gap-8">
+        <Tooltip placement={"right"} content={"Tooltip"}>
+          <Button style="secondary" label="right" />
+        </Tooltip>
+        <Tooltip placement={"right-start"} content={"Tooltip"}>
+          <Button style="secondary" label="right-start" />
+        </Tooltip>
+        <Tooltip placement={"right-end"} content={"Tooltip"}>
+          <Button style="secondary" label="right-end" />
+        </Tooltip>
+      </div>
+      <div className="flex items-center justify-start gap-8">
+        <Tooltip placement={"bottom"} content={"Tooltip"}>
+          <Button style="secondary" label="bottom" />
+        </Tooltip>
+        <Tooltip placement={"bottom-start"} content={"Tooltip"}>
+          <Button style="secondary" label="bottom-start" />
+        </Tooltip>
+        <Tooltip placement={"bottom-end"} content={"Tooltip"}>
+          <Button style="secondary" label="bottom-end" />
+        </Tooltip>
+      </div>
+      <div className="flex items-center justify-start gap-8">
+        <Tooltip placement={"left"} content={"Tooltip"}>
+          <Button style="secondary" label="left" />
+        </Tooltip>
+        <Tooltip placement={"left-start"} content={"Tooltip"}>
+          <Button style="secondary" label="left-start" />
+        </Tooltip>
+        <Tooltip placement={"left-end"} content={"Tooltip"}>
+          <Button style="secondary" label="left-end" />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export const Themes = () => {
+  return (
+    <div className="space-y-8 p-10">
+      <h2 className="text-xl">Theme</h2>
+      <div className="flex flex-row flex-wrap items-center justify-start gap-8">
+        <Tooltip placement={"top"} content={"Tooltip"} theme={"dark"}>
+          <Button style="secondary" label="dark" />
+        </Tooltip>
+        <Tooltip placement={"top"} content={"Tooltip"} theme={"light"}>
+          <Button style="secondary" label="light" />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

package/stories/Typography.stories.jsx

@@ -0,0 +1,134 @@
+import React from "react";
+
+import Typography from "../lib/components/Typography";
+
+export default {
+  title: "Foundation/Typography",
+  component: Typography,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+const Template = (args) => <Typography {...args}>Typography</Typography>;
+
+export const Heading1 = Template.bind({});
+Heading1.args = {
+  style: "h1",
+};
+
+export const Heading2 = Template.bind({});
+Heading2.args = {
+  style: "h2",
+};
+
+export const Heading3 = Template.bind({});
+Heading3.args = {
+  style: "h3",
+};
+
+export const Heading4 = Template.bind({});
+Heading4.args = {
+  style: "h4",
+};
+
+export const Heading5 = Template.bind({});
+Heading5.args = {
+  style: "h5",
+};
+
+export const Body1 = Template.bind({});
+Body1.args = {
+  style: "body1",
+};
+
+export const Body2 = Template.bind({});
+Body2.args = {
+  style: "body2",
+};
+
+export const Body3 = Template.bind({});
+Body3.args = {
+  style: "body3",
+};
+
+export const AllVariants = (args) => {
+  return (
+    <>
+      <Typography className="mb-4" style="h1">
+        h1. Heading
+      </Typography>
+      <Typography className="mb-4" style="h2">
+        h2. Heading
+      </Typography>
+      <Typography className="mb-4" style="h3">
+        h3. Heading
+      </Typography>
+      <Typography className="mb-4" style="h4">
+        h4. Heading
+      </Typography>
+      <Typography className="mb-4" style="h5">
+        h5. Heading
+      </Typography>
+      <Typography className="mb-4" style="h6">
+        h6. Heading
+      </Typography>
+      <Typography className="mb-4" style="body1">
+        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+        blanditiis tenetur
+      </Typography>
+      <Typography className="mb-4" style="body2">
+        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+        blanditiis tenetur
+      </Typography>
+      <Typography className="mb-4" style="body3">
+        body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+        blanditiis tenetur
+      </Typography>
+      <div className="mb-4">
+        <Typography style="body3" component="del">
+          Represents a range of text that has been deleted from a document.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="ins">
+          Represents a range of text that has been added to a document.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="u">
+          This is rendered by default as a simple solid underline.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="i">
+          Represents a range of text that is set off from the normal text for
+          some reason, such as idiomatic text, technical terms, taxonomical
+          designations, among others.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="em">
+          Marks text that has stress emphasis
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="strong">
+          Indicates that its contents have strong importance, seriousness, or
+          urgency.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="body3" component="b">
+          Used to draw the reader's attention to the element's contents, which
+          are not otherwise granted special importance.
+        </Typography>
+      </div>
+      <div className="mb-4">
+        <Typography style="h4" component="code">
+          Code
+        </Typography>
+      </div>
+    </>
+  );
+};