@gsk_poc/untitled-ui-base 0.1.1

package/components/base/button-group/button-group.demo.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useState } from "react";
+import { Archive, ArrowLeft, ArrowRight, Edit03, Placeholder, Plus, Trash01 } from "@untitledui/icons";
+import type { Key } from "react-aria";
+import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
+import { Dot } from "@/components/foundations/dot-icon";
+
+export const Default = () => (
+    <ButtonGroup selectedKeys={[]}>
+        <ButtonGroupItem id="archive">Archive</ButtonGroupItem>
+        <ButtonGroupItem id="edit">Edit</ButtonGroupItem>
+        <ButtonGroupItem id="delete">Delete</ButtonGroupItem>
+    </ButtonGroup>
+);
+
+export const LeadingIcon = () => (
+    <ButtonGroup selectedKeys={[]}>
+        <ButtonGroupItem id="archive" iconLeading={Archive}>
+            Archive
+        </ButtonGroupItem>
+        <ButtonGroupItem id="edit" iconLeading={Edit03}>
+            Edit
+        </ButtonGroupItem>
+        <ButtonGroupItem id="delete" iconLeading={Trash01}>
+            Delete
+        </ButtonGroupItem>
+    </ButtonGroup>
+);
+
+export const ButtonGroupDot = () => (
+    <ButtonGroup selectedKeys={["archive"]}>
+        <ButtonGroupItem id="archive" iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}>
+            Text
+        </ButtonGroupItem>
+        <ButtonGroupItem id="edit" iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}>
+            Text
+        </ButtonGroupItem>
+        <ButtonGroupItem id="delete" isDisabled iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}>
+            Text
+        </ButtonGroupItem>
+    </ButtonGroup>
+);
+
+export const DisabledIndividualButton = () => (
+    <ButtonGroup selectedKeys={[]}>
+        <ButtonGroupItem id="archive">Archive</ButtonGroupItem>
+        <ButtonGroupItem id="edit">Edit</ButtonGroupItem>
+        <ButtonGroupItem isDisabled id="delete">
+            Delete
+        </ButtonGroupItem>
+    </ButtonGroup>
+);
+
+export const DisabledAll = () => (
+    <ButtonGroup isDisabled>
+        <ButtonGroupItem id="archive">Archive</ButtonGroupItem>
+        <ButtonGroupItem id="edit">Edit</ButtonGroupItem>
+        <ButtonGroupItem id="delete">Delete</ButtonGroupItem>
+    </ButtonGroup>
+);
+
+export const SelectedItem = () => {
+    const [selectedKeys, setSelectedKeys] = useState<Set<Key>>(new Set(["today"]));
+
+    return (
+        <ButtonGroup selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+            <ButtonGroupItem id="today">Today</ButtonGroupItem>
+            <ButtonGroupItem id="tomorrow">Tomorrow</ButtonGroupItem>
+            <ButtonGroupItem id="thisweek">This week</ButtonGroupItem>
+        </ButtonGroup>
+    );
+};
+
+export const MultipleSelectedItems = () => {
+    const [selectedKeys, setSelectedKeys] = useState<Set<Key>>(new Set(["today"]));
+
+    return (
+        <ButtonGroup selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+            <ButtonGroupItem id="today">Today</ButtonGroupItem>
+            <ButtonGroupItem id="tomorrow">Tomorrow</ButtonGroupItem>
+            <ButtonGroupItem id="thisweek">This week</ButtonGroupItem>
+        </ButtonGroup>
+    );
+};
+
+export const All = () => (
+    <div className="flex flex-col gap-4">
+        <ButtonGroup selectedKeys={["archive"]}>
+            <ButtonGroupItem id="archive">Archive</ButtonGroupItem>
+            <ButtonGroupItem id="edit">Edit</ButtonGroupItem>
+            <ButtonGroupItem id="delete" isDisabled>
+                Delete
+            </ButtonGroupItem>
+        </ButtonGroup>
+
+        <ButtonGroup selectedKeys={["archive"]}>
+            <ButtonGroupItem id="archive" iconLeading={Placeholder}>
+                Archive
+            </ButtonGroupItem>
+            <ButtonGroupItem id="edit" iconLeading={Placeholder}>
+                Edit
+            </ButtonGroupItem>
+            <ButtonGroupItem id="delete" isDisabled iconLeading={Placeholder}>
+                Delete
+            </ButtonGroupItem>
+        </ButtonGroup>
+
+        <ButtonGroup selectedKeys={["archive"]}>
+            <ButtonGroupItem id="archive" iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}>
+                Archive
+            </ButtonGroupItem>
+            <ButtonGroupItem id="edit" iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}>
+                Edit
+            </ButtonGroupItem>
+            <ButtonGroupItem
+                id="delete"
+                isDisabled
+                iconLeading={<Dot className="mx-0.75 size-2 text-fg-success-secondary in-disabled:text-fg-disabled_subtle" />}
+            >
+                Delete
+            </ButtonGroupItem>
+        </ButtonGroup>
+
+        <ButtonGroup selectedKeys={["archive"]}>
+            <ButtonGroupItem id="archive" iconLeading={ArrowLeft} aria-label="Previous" />
+            <ButtonGroupItem id="edit" iconLeading={Plus} aria-label="Add" />
+            <ButtonGroupItem id="delete" isDisabled iconLeading={ArrowRight} aria-label="Next" />
+        </ButtonGroup>
+    </div>
+);

package/components/base/button-group/button-group.story.tsx

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import * as ButtonGroup from "@/components/base/button-group/button-group.demo";
+
+export default {
+    title: "Base components/Button groups",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full bg-primary p-4">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const ButtonGroups = () => <ButtonGroup.All />;
+ButtonGroups.storyName = "Button groups";

package/components/base/buttons/app-store-buttons.demo.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { AppGalleryButton, AppStoreButton, GalaxyStoreButton, GooglePlayButton } from "@/components/base/buttons/app-store-buttons";
+import {
+    AppGalleryButton as AppGalleryButtonOutline,
+    AppStoreButton as AppStoreButtonOutline,
+    GalaxyStoreButton as GalaxyStoreButtonOutline,
+    GooglePlayButton as GooglePlayButtonOutline,
+} from "@/components/base/buttons/app-store-buttons-outline";
+
+export const AppStoreButtonDefaultDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <GooglePlayButton size="md" />
+            <AppStoreButton size="md" />
+            <GalaxyStoreButton size="md" />
+        </div>
+    );
+};
+
+export const AppStoreButtonGooglePlayDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <GooglePlayButton size="md" />
+            <GooglePlayButton size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonAppStoreDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <AppStoreButton size="md" />
+            <AppStoreButton size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonGalaxyStoreDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <GalaxyStoreButton size="md" />
+            <GalaxyStoreButton size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonAppGalleryDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <AppGalleryButton size="md" />
+            <AppGalleryButton size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonGooglePlayOutlineDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <GooglePlayButtonOutline size="md" />
+            <GooglePlayButtonOutline size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonAppStoreOutlineDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <AppStoreButtonOutline size="md" />
+            <AppStoreButtonOutline size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonGalaxyStoreOutlineDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <GalaxyStoreButtonOutline size="md" />
+            <GalaxyStoreButtonOutline size="lg" />
+        </div>
+    );
+};
+
+export const AppStoreButtonAppGalleryOutlineDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-3 md:flex-row">
+            <AppGalleryButtonOutline size="md" />
+            <AppGalleryButtonOutline size="lg" />
+        </div>
+    );
+};
+
+export const Md = () => {
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-start gap-8">
+                <GooglePlayButton size="md" />
+                <AppStoreButton size="md" />
+                <GalaxyStoreButton size="md" />
+                <AppGalleryButton size="md" />
+            </div>
+            <div className="flex items-start gap-8">
+                <GooglePlayButtonOutline size="md" />
+                <AppStoreButtonOutline size="md" />
+                <GalaxyStoreButtonOutline size="md" />
+                <AppGalleryButtonOutline size="md" />
+            </div>
+        </div>
+    );
+};
+
+export const Lg = () => {
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-start gap-8">
+                <GooglePlayButton size="lg" />
+                <AppStoreButton size="lg" />
+                <GalaxyStoreButton size="lg" />
+                <AppGalleryButton size="lg" />
+            </div>
+            <div className="flex items-start gap-8">
+                <GooglePlayButtonOutline size="lg" />
+                <AppStoreButtonOutline size="lg" />
+                <GalaxyStoreButtonOutline size="lg" />
+                <AppGalleryButtonOutline size="lg" />
+            </div>
+        </div>
+    );
+};

package/components/base/buttons/app-store-buttons.story.tsx

@@ -0,0 +1,13 @@
+import * as Buttons from "@/components/base/buttons/app-store-buttons.demo";
+
+export default {
+    title: "Base components/Buttons/Mobile app store buttons",
+};
+
+export const MobileAppStoreButtons = () => (
+    <div className="flex min-h-screen w-full flex-col gap-16 bg-primary p-8">
+        <Buttons.Md />
+        <Buttons.Lg />
+    </div>
+);
+MobileAppStoreButtons.storyName = "Mobile app store buttons";