@300codes/design-system 1.0.0

package/src/components/BaseTooltip/BaseTooltip.stories.ts

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { BaseTooltipProps } from './BaseTooltip.vue';
+import BaseTooltip from './BaseTooltip.vue';
+
+const meta: Meta<BaseTooltipProps> = {
+  title: 'Components/BaseTooltip',
+  component: BaseTooltip as unknown as ConcreteComponent<BaseTooltipProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+    },
+    position: {
+      control: 'select',
+      options: ['bottom', 'left', 'right', 'top'],
+    },
+    closeSize: {
+      control: 'select',
+      options: [undefined, '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'auto'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseTooltipProps>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    position: 'bottom',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Tooltip text</BaseTooltip>',
+  }),
+};
+
+export const WithClose: Story = {
+  args: {
+    size: 'md',
+    position: 'bottom',
+    closeSize: 'md',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Tooltip with close button</BaseTooltip>',
+  }),
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    position: 'bottom',
+    closeSize: 'md',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Large tooltip text</BaseTooltip>',
+  }),
+};
+
+export const PositionTop: Story = {
+  args: {
+    size: 'md',
+    position: 'top',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Tooltip top</BaseTooltip>',
+  }),
+};
+
+export const PositionLeft: Story = {
+  args: {
+    size: 'md',
+    position: 'left',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Tooltip left</BaseTooltip>',
+  }),
+};
+
+export const PositionRight: Story = {
+  args: {
+    size: 'md',
+    position: 'right',
+  },
+  render: (args: BaseTooltipProps) => ({
+    components: { BaseTooltip },
+    setup() {
+      return { args };
+    },
+    template: '<BaseTooltip v-bind="args">Tooltip right</BaseTooltip>',
+  }),
+};

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { IconSize } from '../../types/icon';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+export interface BaseTooltipProps {
+  size?: 'md' | 'lg';
+  position?: 'bottom' | 'left' | 'right' | 'top';
+  closeSize?: IconSize;
+}
+
+withDefaults(defineProps<BaseTooltipProps>(), {
+  size: 'md',
+  position: 'bottom',
+  closeSize: undefined,
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+</script>
+
+<template>
+  <div
+    role="tooltip"
+    :class="[
+      'baseTooltip',
+      `baseTooltip--${size}`,
+      `baseTooltip--${position}`,
+      'relative inline-flex',
+    ]"
+  >
+    <div :class="['baseTooltip__body', 'flex items-center']">
+      <div class="baseTooltip__text">
+        <slot />
+      </div>
+      <button
+        v-if="closeSize"
+        :class="[
+          'baseTooltip__close',
+          'bg-transparent border-0 p-0 cursor-pointer inline-flex items-center justify-center shrink-0',
+        ]"
+        type="button"
+        aria-label="Close"
+        @click="emit('close')"
+      >
+        <BaseIcon
+          name="close"
+          :size="closeSize"
+        />
+      </button>
+    </div>
+    <span
+      aria-hidden="true"
+      class="baseTooltip__arrow absolute w-0 h-0"
+    />
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.baseTooltip {
+  --_arrow-half-w: var(--baseTooltip-arrow-half-w, 0.375rem);
+  --_arrow-h: var(--baseTooltip-arrow-h, 0.5rem);
+
+  background-color: var(--baseTooltip-bg, #0e161b);
+  color: var(--baseTooltip-fg, #ffffff);
+  border-radius: var(--baseTooltip-radius, 0.5rem);
+  max-width: var(--baseTooltip-max-w, 12.25rem);
+  padding: var(--baseTooltip-py, 1rem) var(--baseTooltip-px, 1rem);
+  font-size: var(--baseTooltip-font-size, 0.75rem);
+}
+
+.baseTooltip--lg {
+  --_arrow-half-w: var(--baseTooltip-lg-arrow-half-w, 0.75rem);
+  --_arrow-h: var(--baseTooltip-lg-arrow-h, 1rem);
+
+  font-size: var(--baseTooltip-lg-font-size, 0.875rem);
+}
+
+.baseTooltip__body {
+  gap: var(--baseTooltip-gap, 1rem);
+}
+
+.baseTooltip__close:focus-visible {
+  outline: 2px solid var(--baseTooltip-fg, #ffffff);
+
+  @apply outline-offset-2;
+}
+
+/* ── arrow ── */
+
+.baseTooltip--bottom .baseTooltip__arrow {
+  @apply bottom-0 left-1/2 -translate-x-1/2 translate-y-full;
+  border-left: var(--_arrow-half-w) solid transparent;
+  border-right: var(--_arrow-half-w) solid transparent;
+  border-top: var(--_arrow-h) solid var(--baseTooltip-bg, #0e161b);
+}
+
+.baseTooltip--top .baseTooltip__arrow {
+  border-left: var(--_arrow-half-w) solid transparent;
+  border-right: var(--_arrow-half-w) solid transparent;
+  border-bottom: var(--_arrow-h) solid var(--baseTooltip-bg, #0e161b);
+
+  @apply top-0 left-1/2 -translate-x-1/2 -translate-y-full;
+}
+
+.baseTooltip--left .baseTooltip__arrow {
+  border-top: var(--_arrow-half-w) solid transparent;
+  border-bottom: var(--_arrow-half-w) solid transparent;
+  border-right: var(--_arrow-h) solid var(--baseTooltip-bg, #0e161b);
+
+  @apply left-0 top-1/2 -translate-y-1/2 -translate-x-full;
+}
+
+.baseTooltip--right .baseTooltip__arrow {
+  border-top: var(--_arrow-half-w) solid transparent;
+  border-bottom: var(--_arrow-half-w) solid transparent;
+  border-left: var(--_arrow-h) solid var(--baseTooltip-bg, #0e161b);
+
+  @apply right-0 top-1/2 -translate-y-1/2 translate-x-full;
+}
+</style>

package/src/components/BaseTooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as BaseTooltip } from './BaseTooltip.vue';
+export type { BaseTooltipProps } from './BaseTooltip.vue';

package/src/components/ButtonWithIcon/ButtonWithIcon.stories.ts

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { ButtonWithIconProps } from './ButtonWithIcon.vue';
+import ButtonWithIcon from './ButtonWithIcon.vue';
+
+const meta: Meta<ButtonWithIconProps> = {
+  title: 'Components/ButtonWithIcon',
+  component: ButtonWithIcon as unknown as ConcreteComponent<ButtonWithIconProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['left', 'right'],
+    },
+    iconSize: {
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'auto'],
+    },
+    loading: { control: 'boolean' },
+    full: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    ariaLabel: { control: 'text' },
+    icon: { control: 'text' },
+    iconPath: { control: 'text' },
+    href: { control: 'text' },
+    target: { control: 'text' },
+    rel: { control: 'text' },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonWithIconProps>;
+
+export const Primary: Story = {
+  args: { variant: 'primary', size: 'md', icon: 'star', iconPosition: 'left' },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Button label</ButtonWithIcon>',
+  }),
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', size: 'md', icon: 'star', iconPosition: 'left' },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Button label</ButtonWithIcon>',
+  }),
+};
+
+export const Tertiary: Story = {
+  args: { variant: 'tertiary', size: 'md', icon: 'star', iconPosition: 'left' },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Button label</ButtonWithIcon>',
+  }),
+};
+
+export const IconRight: Story = {
+  args: { variant: 'primary', size: 'md', icon: 'books', iconPosition: 'right' },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Browse books</ButtonWithIcon>',
+  }),
+};
+
+export const Small: Story = {
+  args: { variant: 'primary', size: 'sm', icon: 'star', iconSize: 'md', iconPosition: 'left' },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Small button</ButtonWithIcon>',
+  }),
+};
+
+export const Loading: Story = {
+  args: { variant: 'primary', size: 'md', icon: 'star', loading: true },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Loading</ButtonWithIcon>',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { variant: 'primary', size: 'md', icon: 'star', disabled: true },
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Disabled</ButtonWithIcon>',
+  }),
+};
+
+export const AsLink: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    icon: 'books',
+    iconPosition: 'right',
+    href: 'https://example.com',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  } satisfies ButtonWithIconProps,
+  render: (args: ButtonWithIconProps) => ({
+    components: { ButtonWithIcon },
+    setup() { return { args }; },
+    template: '<ButtonWithIcon v-bind="args">Open link</ButtonWithIcon>',
+  }),
+};
+
+export const IconOnly: Story = {
+  render: () => ({
+    components: { ButtonWithIcon },
+    template: `
+      <div class="flex items-center gap-4">
+        <ButtonWithIcon icon="star" size="md" aria-label="Add to favourites" />
+        <ButtonWithIcon icon="star" size="sm" icon-size="md" aria-label="Add to favourites" />
+      </div>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  render: () => ({
+    components: { ButtonWithIcon },
+    template: `
+      <div class="flex items-center gap-4">
+        <ButtonWithIcon icon="star" variant="primary">Primary</ButtonWithIcon>
+        <ButtonWithIcon icon="books" variant="secondary">Secondary</ButtonWithIcon>
+        <ButtonWithIcon icon="star" variant="tertiary">Tertiary</ButtonWithIcon>
+      </div>
+    `,
+  }),
+};

package/src/components/ButtonWithIcon/ButtonWithIcon.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import type { SimpleButtonProps } from '../SimpleButton/SimpleButton.vue';
+import type { IconSize } from '../../types/icon';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import SimpleButton from '../SimpleButton/SimpleButton.vue';
+
+export type ButtonWithIconProps = SimpleButtonProps & {
+  icon: string;
+  iconPath?: string;
+  iconSize?: IconSize;
+  iconPosition?: 'left' | 'right';
+};
+
+const props = withDefaults(defineProps<ButtonWithIconProps>(), {
+  variant: 'primary',
+  size: 'md',
+  loading: false,
+  full: false,
+  disabled: false,
+  iconPath: '/icons',
+  iconSize: 'lg',
+  iconPosition: 'left',
+});
+
+const slots = useSlots();
+
+const isIconOnly = computed(() => {
+  const nodes = slots.default?.();
+
+  if (!nodes || nodes.length === 0) return true;
+  return false;
+});
+
+const buttonProps = computed(
+  (): SimpleButtonProps => ({
+    variant: props.variant,
+    size: props.size,
+    loading: props.loading,
+    full: props.full,
+    disabled: props.disabled,
+    href: props.href,
+    type: props.type,
+    name: props.name,
+    value: props.value,
+    target: props.target,
+    rel: props.rel,
+    download: props.download,
+    ariaLabel: props.ariaLabel,
+  })
+);
+</script>
+
+<template>
+  <SimpleButton
+    v-bind="buttonProps"
+    :class="{
+      'flex-row-reverse': props.iconPosition === 'right',
+      'buttonWithIcon--icon-only': isIconOnly,
+    }"
+  >
+    <BaseIcon
+      :name="props.icon"
+      :icon-path="props.iconPath"
+      :size="props.iconSize"
+    />
+    <slot />
+  </SimpleButton>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.buttonWithIcon--icon-only {
+  @apply p-0 aspect-square;
+}
+</style>

package/src/components/ButtonWithIcon/index.ts

@@ -0,0 +1,2 @@
+export { default as ButtonWithIcon } from './ButtonWithIcon.vue';
+export type { ButtonWithIconProps } from './ButtonWithIcon.vue';

package/src/components/CheckboxInput/CheckboxInput.stories.ts

@@ -0,0 +1,99 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { CheckboxInputProps } from './CheckboxInput.vue';
+import CheckboxInput from './CheckboxInput.vue';
+
+const meta: Meta<CheckboxInputProps> = {
+  title: 'Form/CheckboxInput',
+  component: CheckboxInput as unknown as ConcreteComponent<CheckboxInputProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CheckboxInputProps>;
+
+export const Default: Story = {
+  args: { name: 'accept', size: 'md' },
+  render: (args: CheckboxInputProps) => ({
+    components: { CheckboxInput },
+    setup() {
+      const model = ref(false);
+      return { args, model };
+    },
+    template: '<CheckboxInput v-bind="args" v-model="model">Zaakceptuj regulamin</CheckboxInput>',
+  }),
+};
+
+export const Checked: Story = {
+  args: { name: 'accept-checked', size: 'md' },
+  render: (args: CheckboxInputProps) => ({
+    components: { CheckboxInput },
+    setup() {
+      const model = ref(true);
+      return { args, model };
+    },
+    template: '<CheckboxInput v-bind="args" v-model="model">Zaakceptuj regulamin</CheckboxInput>',
+  }),
+};
+
+export const Invalid: Story = {
+  args: { name: 'accept-invalid', size: 'md', invalid: true },
+  render: (args: CheckboxInputProps) => ({
+    components: { CheckboxInput },
+    setup() {
+      const model = ref(false);
+      return { args, model };
+    },
+    template: '<CheckboxInput v-bind="args" v-model="model">Pole wymagane</CheckboxInput>',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { name: 'accept-disabled', size: 'md', disabled: true },
+  render: (args: CheckboxInputProps) => ({
+    components: { CheckboxInput },
+    setup() {
+      const model = ref(false);
+      return { args, model };
+    },
+    template: '<CheckboxInput v-bind="args" v-model="model">Niedostępne</CheckboxInput>',
+  }),
+};
+
+export const DisabledChecked: Story = {
+  args: { name: 'accept-disabled-checked', size: 'md', disabled: true },
+  render: (args: CheckboxInputProps) => ({
+    components: { CheckboxInput },
+    setup() {
+      const model = ref(true);
+      return { args, model };
+    },
+    template: '<CheckboxInput v-bind="args" v-model="model">Niedostępne (zaznaczone)</CheckboxInput>',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { CheckboxInput },
+    setup() {
+      const sm = ref(false);
+      const md = ref(false);
+      const lg = ref(false);
+      return { sm, md, lg };
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <CheckboxInput name="size-sm" size="sm" v-model="sm">Small (24px)</CheckboxInput>
+        <CheckboxInput name="size-md" size="md" v-model="md">Medium (28px)</CheckboxInput>
+        <CheckboxInput name="size-lg" size="lg" v-model="lg">Large (32px)</CheckboxInput>
+      </div>
+    `,
+  }),
+};