aural-ui 4.2.4 → 4.2.5

package/dist/icons/underline-icon/UnderlineIcon.stories.tsx

@@ -0,0 +1,238 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { CapitalALetterIcon } from "src/ui/icons/capital-a-letter-icon"
+import { FileTextIcon } from "src/ui/icons/file-text-icon"
+import { TextColorIcon } from "src/ui/icons/text-color-icon"
+import { TextIndicatorIcon } from "src/ui/icons/text-indicator-icon"
+import {
+  IconDefaultCanvas,
+  IconPlaygroundCanvas,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
+import { UnderlineIcon } from "."
+
+const meta: Meta<typeof UnderlineIcon> = {
+  title: "Icons/UnderlineIcon",
+  component: UnderlineIcon,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "var(--color-fm-surface-primary)" },
+        { name: "darker", value: "var(--color-fm-neutral-0)" },
+        { name: "light", value: "var(--color-fm-neutral-1100)" },
+      ],
+    },
+    docs: {
+      page: () => (
+        <AuralIconDocsPage
+          accentToken="warning"
+          features={[
+            { title: "Gradient Stroke", description: "Custom gradient colors" },
+            { title: "Decorative Mark", description: "Accent underline style" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { UnderlineIcon } from "src/ui/icons/underline-icon"
+
+function HighlightedHeading() {
+  return (
+    <span className="relative inline-block pb-1">
+      <span className="text-fm-primary font-fm-brand text-2xl font-bold">
+        Featured
+      </span>
+      <UnderlineIcon
+        className="absolute left-0 h-1 w-7.5"
+        withAccessibility={false}
+      />
+    </span>
+  )
+}`,
+            livePreview: (
+              <span className="relative inline-block pb-1">
+                <span className="text-fm-primary font-fm-brand text-2xl font-bold">
+                  Featured
+                </span>
+                <UnderlineIcon
+                  className="absolute left-0 h-1 w-7.5"
+                  withAccessibility={false}
+                />
+              </span>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "TextColorIcon",
+              description: "Text formatting accent",
+              icon: TextColorIcon,
+              accentToken: "info",
+            },
+            {
+              name: "CapitalALetterIcon",
+              description: "Typography size marker",
+              icon: CapitalALetterIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "TextIndicatorIcon",
+              description: "Inline text indicator",
+              icon: TextIndicatorIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "FileTextIcon",
+              description: "Document with text",
+              icon: FileTextIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
+      ),
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    fromColor: {
+      control: "color",
+      description: "Gradient start color",
+    },
+    toColor: {
+      control: "color",
+      description: "Gradient end color",
+    },
+    width: {
+      control: { type: "range", min: 30, max: 400, step: 10 },
+      description: "Width in pixels — keep ~7:1 ratio with height",
+    },
+    height: {
+      control: { type: "range", min: 4, max: 60, step: 1 },
+      description: "Height in pixels — keep ~7:1 ratio with width",
+    },
+    withAccessibility: {
+      control: "boolean",
+      description: "Wrap with accessibility label",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof UnderlineIcon>
+
+// Natural viewBox is 32 × 5 (6.4:1). Default uses 3× scale (96 × 15).
+export const Default: Story = {
+  args: {
+    width: 96,
+    height: 15,
+    fromColor: "#F9FFB8",
+    toColor: "#CFFF3F",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconDefaultCanvas>
+      <UnderlineIcon {...args} />
+    </IconDefaultCanvas>
+  ),
+}
+
+export const UsageExamples: Story = {
+  render: () => (
+    <IconUsageCanvas>
+      <IconUsageSection title="Decorated Heading">
+        <div className="space-y-2">
+          <span className="relative inline-block pb-1">
+            <h2 className="text-fm-primary font-fm-brand text-2xl font-bold">
+              Our Story
+            </h2>
+            <UnderlineIcon
+              className="absolute left-0 h-1 w-7.5"
+              withAccessibility={false}
+            />
+          </span>
+          <p className="text-fm-secondary font-fm-text text-sm">
+            Building the future of audio entertainment.
+          </p>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Feature Card Accent">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-5">
+          <div className="mb-3">
+            <span className="relative inline-block pb-1">
+              <span className="text-fm-primary font-fm-brand text-base font-semibold">
+                Premium Audio
+              </span>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+          </div>
+          <p className="text-fm-secondary font-fm-text text-sm leading-relaxed">
+            Immersive listening experience crafted for creators.
+          </p>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Highlighted Quote">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm rounded-xl border p-5">
+          <div className="flex flex-col gap-3">
+            <span className="relative inline-block self-start pb-1">
+              <blockquote className="text-fm-primary font-fm-text text-sm italic">
+                &ldquo;Audio is the future.&rdquo;
+              </blockquote>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+            <span className="text-fm-secondary font-fm-text text-xs">
+              — Product Team
+            </span>
+          </div>
+        </div>
+      </IconUsageSection>
+
+      <IconUsageSection title="Section Label Accent">
+        <div className="flex flex-wrap gap-6">
+          {["Discover", "Trending", "For You"].map((label) => (
+            <span key={label} className="relative inline-block pb-1">
+              <span className="text-fm-primary font-fm-brand text-lg font-semibold">
+                {label}
+              </span>
+              <UnderlineIcon
+                className="absolute left-0 h-1 w-7.5"
+                fromColor="#F9FFB8"
+                toColor="#CFFF3F"
+                withAccessibility={false}
+              />
+            </span>
+          ))}
+        </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
+  ),
+}
+
+export const Playground: Story = {
+  args: {
+    width: 192,
+    height: 30,
+    fromColor: "#F9FFB8",
+    toColor: "#CFFF3F",
+    withAccessibility: true,
+  },
+  render: (args) => (
+    <IconPlaygroundCanvas>
+      <UnderlineIcon {...args} />
+    </IconPlaygroundCanvas>
+  ),
+}

package/dist/icons/underline-icon/index.tsx

@@ -0,0 +1,58 @@
+import React, { useId } from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+export interface IUnderlineIconProps extends React.SVGProps<SVGSVGElement> {
+  fromColor?: string
+  toColor?: string
+  withAccessibility?: boolean
+}
+
+export const UnderlineIcon = (props: IUnderlineIconProps) => {
+  const {
+    fromColor = "#F9FFB8",
+    toColor = "#CFFF3F",
+    withAccessibility = true,
+    id: idProp,
+    ...svgProps
+  } = props
+
+  const autoId = useId()
+  const gradientId = `underline-gradient-${idProp ?? autoId}`
+
+  const svg = (
+    <svg
+      viewBox="0 0 32 5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...svgProps}
+    >
+      <path
+        d="M0.499845 2.55202C0.499845 2.55202 13.9101 0.777228 21.7693 0.643631C29.6284 0.510034 31.7935 0.279256 30.6512 1.00823C29.509 1.73721 24.0827 4.08102 24.6916 4.06392C25.3005 4.04681 30.6783 4.04011 30.6783 4.04011"
+        stroke={`url(#${gradientId})`}
+        strokeWidth={1}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="1.76936"
+          y1="3.77954"
+          x2="6.01158"
+          y2="-7.79593"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop style={{ stopColor: fromColor }} />
+          <stop offset="1" style={{ stopColor: toColor }} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Underline icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/underline-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}