@gsk_poc/untitled-ui-base 0.1.1

package/components/application/table/table.story.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { withOverlayAware } from "@/components/internal/decorators";
+import * as Tables from "./table.demo";
+
+export default {
+    title: "Application/Tables",
+    decorators: [
+        withOverlayAware((Story) => (
+            <div className="min-h-screen bg-primary p-5">
+                <Story />
+            </div>
+        )),
+    ],
+};
+
+export const Table01DividerLine = () => <Tables.Table01DividerLine />;
+Table01DividerLine.storyName = "Table 01 divider line";
+Table01DividerLine.parameters = {
+    design: {
+        desktop: "1227-110480",
+        mobile: "1227-110588",
+    },
+};
+
+export const Table01AlternatingFills = () => <Tables.Table01AlternatingFills />;
+Table01AlternatingFills.storyName = "Table 01 alternating fills";
+Table01AlternatingFills.parameters = {
+    design: {
+        desktop: "1229-12388",
+        mobile: "1229-15727",
+    },
+};
+
+export const Table01DividerLineSm = () => <Tables.Table01DividerLineSm />;
+Table01DividerLineSm.storyName = "Table 01 divider line sm";
+Table01DividerLineSm.parameters = {
+    design: {
+        desktop: "1227-110480",
+    },
+};
+
+export const Table02DividerLine = () => <Tables.Table02DividerLine />;
+Table02DividerLine.storyName = "Table 02 divider line";
+Table02DividerLine.parameters = {
+    design: {
+        desktop: "1227-115509",
+        mobile: "1227-115298",
+    },
+};
+
+export const Table02AlternatingFills = () => <Tables.Table02AlternatingFills />;
+Table02AlternatingFills.storyName = "Table 02 alternating fills";
+Table02AlternatingFills.parameters = {
+    design: {
+        desktop: "1229-11893",
+        mobile: "1229-17412",
+    },
+};
+
+export const Table03DividerLine = () => <Tables.Table03DividerLine />;
+Table03DividerLine.storyName = "Table 03 divider line";
+Table03DividerLine.parameters = {
+    design: {
+        desktop: "1227-121348",
+        mobile: "1229-543",
+    },
+};
+
+export const Table03AlternatingFills = () => <Tables.Table03AlternatingFills />;
+Table03AlternatingFills.storyName = "Table 03 alternating fills";
+Table03AlternatingFills.parameters = {
+    design: {
+        desktop: "1229-12040",
+        mobile: "1229-18422",
+    },
+};
+
+export const Table04DividerLine = () => <Tables.Table04DividerLine />;
+Table04DividerLine.storyName = "Table 04 divider line";
+Table04DividerLine.parameters = {
+    design: {
+        desktop: "1229-2364",
+        mobile: "1229-7899",
+    },
+};
+
+export const Table04AlternatingFills = () => <Tables.Table04AlternatingFills />;
+Table04AlternatingFills.storyName = "Table 04 alternating fills";
+Table04AlternatingFills.parameters = {
+    design: {
+        desktop: "1229-12241",
+        mobile: "1229-19933",
+    },
+};
+
+export const TableNoVendorsFound = () => <Tables.TableNoVendorsFound />;
+TableNoVendorsFound.storyName = "Table no vendors found";
+TableNoVendorsFound.parameters = {
+    design: {
+        desktop: "2218-469191",
+    },
+};
+
+export const TableStartByUploadingFile = () => <Tables.TableStartByUploadingFile />;
+TableStartByUploadingFile.storyName = "Table start by uploading file";
+TableStartByUploadingFile.parameters = {
+    design: {
+        desktop: "2219-470358",
+    },
+};
+
+export const TableSomethingWentWrong = () => <Tables.TableSomethingWentWrong />;
+TableSomethingWentWrong.storyName = "Table something went wrong";
+TableSomethingWentWrong.parameters = {
+    design: {
+        desktop: "2219-472490",
+    },
+};

package/components/application/tabs/tabs.demo.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import { useState } from "react";
+import type { Key } from "react-aria-components";
+import { Tabs } from "@/components/application/tabs/tabs";
+import { NativeSelect } from "@/components/base/select/select-native";
+
+const tabs = [
+    { id: "details", label: "My details" },
+    { id: "profile", label: "Profile" },
+    { id: "password", label: "Password" },
+    { id: "team", label: "Team" },
+    { id: "notifications", label: "Notifications", badge: 2 },
+    { id: "integrations", label: "Integrations" },
+    { id: "api", label: "API" },
+];
+
+export const ButtonBrandHorizontalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-brand" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonBrandVerticalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs orientation="vertical" selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-brand" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonGrayHorizontalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-gray" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonGrayVerticalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs orientation="vertical" selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-gray" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const UnderlineDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="underline" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const LineDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs orientation="vertical" selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="line" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonBorderHorizontalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-border" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonBorderVerticalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs orientation="vertical" selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-border" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonMinimalHorizontalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-minimal" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonMinimalVerticalDemo = () => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <NativeSelect
+                aria-label="Tabs"
+                value={selectedTabIndex as string}
+                onChange={(event) => setSelectedTabIndex(event.target.value)}
+                options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                className="w-80 md:hidden"
+            />
+            <Tabs orientation="vertical" selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="w-max max-md:hidden">
+                <Tabs.List type="button-minimal" items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+const GenericTabs = (props: {
+    size?: "sm" | "md";
+    orientation?: "horizontal" | "vertical";
+    type: "underline" | "line" | "button-brand" | "button-gray" | "button-border" | "button-minimal";
+}) => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState<Key>("details");
+
+    return (
+        <>
+            <div className="md:hidden">
+                <NativeSelect
+                    aria-label="Tabs"
+                    value={selectedTabIndex as string}
+                    onChange={(event) => setSelectedTabIndex(event.target.value)}
+                    options={tabs.map((tab) => ({ label: tab.label, value: tab.id }))}
+                />
+            </div>
+            <Tabs orientation={props.orientation} selectedKey={selectedTabIndex} onSelectionChange={setSelectedTabIndex} className="max-md:hidden">
+                <Tabs.List {...props} type={props.type} items={tabs}>
+                    {(tab) => <Tabs.Item {...tab} />}
+                </Tabs.List>
+            </Tabs>
+        </>
+    );
+};
+
+export const ButtonBrandHorizontal = () => (
+    <div className="flex flex-col gap-16">
+        <GenericTabs type="button-brand" />
+        <GenericTabs type="button-brand" size="md" />
+    </div>
+);
+
+export const ButtonBrandVertical = () => (
+    <div className="flex gap-16">
+        <GenericTabs type="button-brand" orientation="vertical" />
+        <GenericTabs type="button-brand" orientation="vertical" size="md" />
+    </div>
+);
+
+export const ButtonGrayHorizontal = () => (
+    <div className="flex flex-col gap-16">
+        <GenericTabs type="button-gray" />
+        <GenericTabs type="button-gray" size="md" />
+    </div>
+);
+
+export const ButtonGrayVertical = () => (
+    <div className="flex gap-16">
+        <GenericTabs type="button-gray" orientation="vertical" />
+        <GenericTabs type="button-gray" orientation="vertical" size="md" />
+    </div>
+);
+
+export const UnderlineHorizontal = () => (
+    <div className="flex flex-col gap-16">
+        <GenericTabs type="underline" />
+        <GenericTabs type="underline" size="md" />
+    </div>
+);
+
+export const UnderlineVertical = () => (
+    <div className="flex gap-16">
+        <GenericTabs type="line" orientation="vertical" />
+        <GenericTabs type="line" orientation="vertical" size="md" />
+    </div>
+);
+
+export const ButtonBorderHorizontal = () => (
+    <div className="flex flex-col gap-16">
+        <GenericTabs type="button-border" />
+        <GenericTabs type="button-border" size="md" />
+    </div>
+);
+
+export const ButtonBorderVertical = () => (
+    <div className="flex gap-16">
+        <GenericTabs type="button-border" orientation="vertical" />
+        <GenericTabs type="button-border" orientation="vertical" size="md" />
+    </div>
+);
+
+export const ButtonMinimalHorizontal = () => (
+    <div className="flex flex-col gap-16">
+        <GenericTabs type="button-minimal" />
+        <GenericTabs type="button-minimal" size="md" />
+    </div>
+);
+
+export const ButtonMinimalVertical = () => (
+    <div className="flex gap-16">
+        <GenericTabs type="button-minimal" orientation="vertical" />
+        <GenericTabs type="button-minimal" orientation="vertical" size="md" />
+    </div>
+);

package/components/application/tabs/tabs.story.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import * as Demos from "./tabs.demo";
+
+export default {
+    title: "Application/Tabs",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const ButtonBrandHorizontal = () => <Demos.ButtonBrandHorizontal />;
+ButtonBrandHorizontal.storyName = "Button brand horizontal";
+
+export const ButtonBrandVertical = () => <Demos.ButtonBrandVertical />;
+ButtonBrandVertical.storyName = "Button brand vertical";
+
+export const ButtonGrayHorizontal = () => <Demos.ButtonGrayHorizontal />;
+ButtonGrayHorizontal.storyName = "Button gray horizontal";
+
+export const ButtonGrayVertical = () => <Demos.ButtonGrayVertical />;
+ButtonGrayVertical.storyName = "Button gray vertical";
+
+export const UnderlineHorizontal = () => <Demos.UnderlineHorizontal />;
+UnderlineHorizontal.storyName = "Underline horizontal";
+
+export const UnderlineVertical = () => <Demos.UnderlineVertical />;
+UnderlineVertical.storyName = "Underline vertical";
+
+export const ButtonBorderHorizontal = () => <Demos.ButtonBorderHorizontal />;
+ButtonBorderHorizontal.storyName = "Button border horizontal";
+
+export const ButtonBorderVertical = () => <Demos.ButtonBorderVertical />;
+ButtonBorderVertical.storyName = "Button border vertical";
+
+export const ButtonMinimalHorizontal = () => <Demos.ButtonMinimalHorizontal />;
+ButtonMinimalHorizontal.storyName = "Button minimal horizontal";
+
+export const ButtonMinimalVertical = () => <Demos.ButtonMinimalVertical />;
+ButtonMinimalVertical.storyName = "Button minimal vertical";