@ossy/design-system 3.0.3 → 3.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/design-system",
   "description": "Ossy's design system React component library",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
   "source": "src/index.js",
   "module": "build/index.js",
@@ -32,7 +32,7 @@
     ]
   },
   "devDependencies": {
-    "@ossy/themes": "^3.0.3",
+    "@ossy/themes": "^3.0.4",
     "markdown-to-jsx": "^9.8.1",
     "react-syntax-highlighter": "^16.1.0"
   },
@@ -46,8 +46,8 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/locale": "^3.0.3",
-    "@ossy/schema": "^3.0.3"
+    "@ossy/locale": "^3.0.4",
+    "@ossy/schema": "^3.0.4"
   },
   "publishConfig": {
     "access": "public",
@@ -55,7 +55,8 @@
   },
   "files": [
     "/build",
+    "/src",
     "README.md"
   ],
-  "gitHead": "8d098a04b595b2d1f54788c5c7ed7f310e9cd7e1"
+  "gitHead": "831c9816bee67c5e53d0a4be4f6401975f23d72a"
 }

package/src/alert/Alert.jsx

@@ -0,0 +1,130 @@
+import React from 'react'
+
+const VARIANTS = new Set(['neutral', 'info', 'success', 'warning', 'danger'])
+
+/**
+ * Theme-aware callout: tinted surface from `--surface-base` + semantic `--alert-tone`,
+ * accent start border, no hard-coded light-mode grays.
+ */
+export const Alert = ({
+  variant = 'neutral',
+  title,
+  icon,
+  children,
+  as: Element = 'div',
+  role: roleProp,
+  ...props
+}) => {
+  const v = VARIANTS.has(variant) ? variant : 'neutral'
+  const role =
+    roleProp ?? (v === 'danger' ? 'alert' : 'status')
+  const live = v === 'danger' ? 'assertive' : 'polite'
+
+  return (
+    <>
+      <style href="@ossy/design-system/alert" precedence="high">
+        {`
+          [data-alert] {
+            --alert-tone: var(--separator-primary);
+            box-sizing: border-box;
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+            margin: 0;
+            padding: 14px 16px 14px 14px;
+            border-radius: 14px;
+            border: 1px solid
+              color-mix(in srgb, var(--alert-tone) 28%, var(--separator-primary));
+            border-left-width: 4px;
+            border-left-color: var(--alert-tone);
+            background: color-mix(in srgb, var(--alert-tone) 10%, var(--surface-base));
+            color: var(--text-default-color, inherit);
+            font-family: var(--text-default-font-family, inherit);
+            font-size: var(--text-default-font-size, 0.9375rem);
+            font-weight: var(--text-default-font-weight, 500);
+            line-height: var(--text-default-line-height, 1.55);
+            box-shadow: none;
+          }
+
+          [data-alert-variant="neutral"] {
+            --alert-tone: var(--separator-primary);
+            background: color-mix(
+              in srgb,
+              var(--surface-primary) 35%,
+              var(--surface-base)
+            );
+          }
+
+          [data-alert-variant="info"] {
+            --alert-tone: var(--color-info);
+          }
+
+          [data-alert-variant="success"] {
+            --alert-tone: var(--color-accent);
+          }
+
+          [data-alert-variant="warning"] {
+            --alert-tone: hsl(38, 92%, 44%);
+          }
+
+          [data-alert-variant="danger"] {
+            --alert-tone: var(--color-danger);
+          }
+
+          [data-alert-icon] {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.375rem;
+            height: 1.375rem;
+            margin-top: 0.1em;
+            color: var(--alert-tone);
+          }
+
+          [data-alert-icon] svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            fill: currentColor;
+          }
+
+          [data-alert-body] {
+            flex: 1;
+            min-width: 0;
+          }
+
+          [data-alert-title] {
+            display: block;
+            font-weight: 700;
+            font-size: 0.8125rem;
+            letter-spacing: 0.04em;
+            text-transform: uppercase;
+            margin: 0 0 6px;
+            color: inherit;
+            opacity: 0.92;
+          }
+        `}
+      </style>
+      <Element
+        data-alert
+        data-alert-variant={v}
+        role={role}
+        aria-live={live}
+        {...props}
+      >
+        {icon != null ? (
+          <span data-alert-icon aria-hidden="true">
+            {icon}
+          </span>
+        ) : null}
+        <span data-alert-body>
+          {title != null && title !== '' ? (
+            <span data-alert-title>{title}</span>
+          ) : null}
+          {children}
+        </span>
+      </Element>
+    </>
+  )
+}

package/src/alert/alert.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Alert } from './Alert.jsx'
+
+const infoIcon = (
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+  </svg>
+)
+
+export default {
+  title: 'Design System/Feedback/Alert',
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['neutral', 'info', 'success', 'warning', 'danger'],
+    },
+  },
+}
+
+export const Neutral = {
+  args: {
+    variant: 'neutral',
+    children: 'This is a neutral note for general context.',
+  },
+}
+
+export const Info = {
+  args: {
+    variant: 'info',
+    title: 'Heads up',
+    children: 'Your changes will apply after you save the workspace.',
+  },
+}
+
+export const Success = {
+  args: {
+    variant: 'success',
+    title: 'Done',
+    children: 'Profile updated successfully.',
+  },
+}
+
+export const Warning = {
+  args: {
+    variant: 'warning',
+    title: 'Attention',
+    children: 'This action cannot be undone after 24 hours.',
+  },
+}
+
+export const Danger = {
+  args: {
+    variant: 'danger',
+    title: 'Error',
+    children: 'We could not complete the request. Try again or contact support.',
+  },
+}
+
+export const WithIcon = {
+  args: {
+    variant: 'info',
+    icon: infoIcon,
+    title: 'With icon',
+    children: 'Pass any React node as icon — here an inline SVG.',
+  },
+}

package/src/alert/index.js

@@ -0,0 +1 @@
+export * from './Alert.jsx'

package/src/app-header/AppHeader.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Text } from '../text'
+import { Slot } from '../component-slots'
+import { HeaderLayout } from '../header-layout/HeaderLayout.jsx'
+
+/**
+ * App shell top chrome header — same API as ContentHeader, for use in the
+ * global header bar rather than in-page content intros.
+ */
+export const AppHeader = ({
+  title,
+  near,
+  far,
+  children,
+
+  inset = 'm',
+  gap = 's',
+  ...props
+}) => {
+
+
+ let Title = title
+
+  if (typeof title === 'string') {
+    Title = (
+      <Text
+        as="h1"
+        variant='heading-tertiary'
+        text={title}
+      />
+    )
+  }
+
+  return  (
+    <HeaderLayout
+      componentName="app-header"
+      inset={inset}
+      gap={gap}
+      title={Title}
+      near={near}
+      far={far}
+      {...props}
+    >
+      {children}
+    </HeaderLayout>
+  )
+}

package/src/app-header/AppHeader.stories.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Tags } from '../tags'
+import { AppHeader } from './AppHeader.jsx'
+import { ComponentSlotsProvider } from '../component-slots'
+import { appLogoSlots } from './appLogoSlots.jsx'
+
+export default {
+  title: 'Design System/Layout/AppHeader',
+  component: AppHeader,
+  decorators: [
+    (Story) => (
+      <ComponentSlotsProvider slots={appLogoSlots}>
+        <Story />
+      </ComponentSlotsProvider>
+    ),
+  ],
+}
+
+export const Default = () => (
+  <AppHeader
+    far={(
+      <>
+        <Button variant="link" prefix="sun" label="Cloud Light" />
+        <Button variant="link" prefix="profile" label="Profile" />
+      </>
+    )}
+  />
+)
+

package/src/app-header/index.js

@@ -0,0 +1 @@
+export * from './AppHeader.jsx'

package/src/badge/Badge.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+export const Badge = ({
+  label,
+  children,
+  variant = 'neutral',
+  size = 'm',
+  ...props
+}) => (
+  <>
+    <style href="@ossy/design-system/badge" precedence="high">
+    {`
+      [data-badge] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        border-radius: 999px;
+        font-family: var(--font-family, sans-serif);
+        font-weight: 500;
+        line-height: 1;
+        white-space: nowrap;
+      }
+
+      [data-badge][data-badge-size="s"] {
+        font-size: 11px;
+        padding: 2px 8px;
+      }
+
+      [data-badge][data-badge-size="m"] {
+        font-size: 13px;
+        padding: 4px 10px;
+      }
+
+      [data-badge][data-badge-variant="success"] {
+        background: hsl(142, 76%, 90%);
+        color: hsl(142, 60%, 25%);
+      }
+
+      [data-badge][data-badge-variant="warning"] {
+        background: hsl(38, 100%, 90%);
+        color: hsl(38, 80%, 30%);
+      }
+
+      [data-badge][data-badge-variant="danger"] {
+        background: hsl(0, 86%, 92%);
+        color: hsl(0, 70%, 35%);
+      }
+
+      [data-badge][data-badge-variant="neutral"] {
+        background: hsl(0, 0%, 90%);
+        color: hsl(0, 0%, 35%);
+      }
+
+      [data-badge][data-badge-variant="info"] {
+        background: hsl(210, 100%, 92%);
+        color: hsl(210, 70%, 30%);
+      }
+    `}
+    </style>
+    <span
+      data-badge
+      data-badge-variant={variant}
+      data-badge-size={size}
+      {...props}
+    >
+      {label ?? children}
+    </span>
+  </>
+)

package/src/badge/index.js

@@ -0,0 +1 @@
+export * from './Badge.jsx'

package/src/breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+export const Breadcrumbs = ({
+  divider = '/',
+  as: Element = 'div',
+  ...props
+}) => (
+  <>
+    <style href="@ossy/design-system/breadcrumbs" precedence='high'>
+    {`
+      [data-breadcrumbs] {
+        display: inline-flex;
+        overflow: hidden;
+        background-color: transparent;
+        height: 34px;
+        transition: background-color .3s ease;
+      }
+      [data-breadcrumbs] [data-breadcrumb-item] {
+        display: inline-flex;
+        justify-content: center;
+        align-items: stretch;
+        cursor: pointer;
+        font-family: var(--text-breadcrumb-font-family, sans-serif);
+        font-size: var(--text-breadcrumb-font-size, 18px);
+        line-height: var(--text-breadcrumb-line-height, 1);
+      }
+      [data-breadcrumbs] [data-breadcrumb-divider] {
+        content: '/';
+        padding: 0 4px;
+        color: var(--separator-primary);
+        display: flex;
+        align-items: center;
+      }
+    `}
+    </style>
+    <Element data-breadcrumbs {...props}>
+    {
+      React.Children.map(
+        React.Children.toArray(props.children).filter(x => x),
+        (child, i) => (
+          <div data-breadcrumb-item>
+            { i !== 0 && <span data-breadcrumb-divider>{divider}</span>}
+            {child}
+          </div>
+        )
+      )
+    }
+    </Element>
+  </>
+)

package/src/breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Breadcrumbs } from './Breadcrumbs.jsx'
+import { Button } from '../button/Button.jsx'
+
+export default {
+  title: 'Design System/Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+  render: () => (
+    <Breadcrumbs>
+      <Button prefix="home" variant="command" />
+      <Button variant="command">foo</Button>
+      <Button variant="command">bar</Button>
+    </Breadcrumbs>
+  ),
+}
+
+export const Default = {}

package/src/breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from './Breadcrumbs.jsx'

package/src/button/Button.jsx

@@ -0,0 +1,126 @@
+
+import React from 'react'
+import { Icon } from '../icons/Icon.jsx'
+import { useLocale } from '../locale/index.js'
+
+export const Button = React.forwardRef(function Button ({
+  type,
+  as = 'button',
+  prefix,
+  suffix,
+  icon,
+  variant = 'default',
+  href,
+  label,
+  params,
+  children,
+  onClick = () => {},
+  id: idProp,
+  ...props
+}, ref) {
+  const { t } = useLocale()
+  const Element = !!href ? 'a' : as
+  const actionId = idProp
+  const resolvedPrefix = prefix ?? icon
+  const resolvedLabel = label ? t(label, params) : undefined
+
+  return (
+    <>
+      <style href={`@ossy/design-system/button`} precedence='high'>
+      {`
+        [data-button] {
+          box-sizing: border-box;
+          cursor: pointer;
+          line-height: 1;
+          outline: none;
+          white-space: nowrap;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        [data-button-icon-slot] {
+          display: inline-flex;
+          flex-shrink: 0;
+          align-items: center;
+          justify-content: center;
+          width: var(--icon-size-s, 18px);
+          height: var(--icon-size-s, 18px);
+          min-width: var(--icon-size-s, 18px);
+          min-height: var(--icon-size-s, 18px);
+        }
+      `}
+      </style>
+      <style href={`@ossy/design-system/button/${variant}`} precedence='medium'>
+      {`
+        [data-button-variant="${variant}"] {
+          text-decoration: var(--button-${variant}-text-decoration, var(--button-default-text-decoration, none));
+          gap: var(--button-${variant}-gap, var(--button-default-gap, 8px));
+          font-family: var(--button-${variant}-font-family, var(--button-default-font-family, sans-serif));
+          border-radius: var(--button-${variant}-border-radius, var(--button-default-border-radius));
+          font-size: var(--button-${variant}-font-size, var(--button-default-font-size, 16px));
+          padding: var(--button-${variant}-padding, var(--button-default-padding, 8px 24px));
+          font-weight: var(--button-${variant}-font-weight, var(--button-default-font-weight, bold));
+          letter-spacing: var(--button-${variant}-letter-spacing, var(--button-default-letter-spacing));
+          border-width: var(--button-${variant}-border-width, var(--button-default-border-width));
+          border-style: var(--button-${variant}-border-style, var(--button-default-border-style));
+          border-color: var(--button-${variant}-border-color, var(--button-default-border-color));
+          color: var(--button-${variant}-color, var(--foreground, var(--button-default-color)));
+          fill: var(--button-${variant}-color, var(--button-default-color));
+          background: var(--button-${variant}-background, var(--button-default-background));
+          box-shadow: var(--button-${variant}-box-shadow, var(--button-default-box-shadow, none));
+          transition: var(--button-${variant}-transition, var(--button-default-transition, background-color .3s, color .3s, fill .3s, border-default-color .3s));
+          text-transform: var(--button-${variant}-text-transform, var(--button-default-text-transform));
+        }
+
+        [data-button-variant="${variant}"]:hover {
+          text-decoration: var(--button-${variant}-text-decoration-hover, var(--button-default-text-decoration-hover, var(--button-default-text-decoration)));
+          background: var(--button-${variant}-background-hover, var(--button-default-background-hover));
+          color: var(--button-${variant}-color-hover, var(--button-default-color-hover));
+          fill: var(--button-${variant}-color-hover, var(--button-default-color-hover));
+          border-color: var(--button-${variant}-border-color-hover, var(--button-default-border-color-hover, var(--button-${variant}-border-color, var(--button-default-border-color))));
+          box-shadow: var(--button-${variant}-box-shadow-hover, var(--button-${variant}-box-shadow, var(--button-default-box-shadow, none)));
+        }
+
+        [data-button-variant="${variant}"]:focus-visible {
+          border-color: var(--button-${variant}-border-color-focus, var(--button-default-border-color-focus, hsl(199, 98%, 43%)));
+        }
+
+        [data-button-variant="${variant}"]:disabled {
+          background: var(--button-${variant}-background-disabled, var(--button-default-background-disabled));
+          color: var(--button-${variant}-color-disabled, var(--button-default-color-disabled));
+          fill: var(--button-${variant}-color-disabled, var(--button-default-color-disabled));
+          border: var(--button-${variant}-border-disabled, var(--button-default-border-disabled), var(--button-default-border));
+          box-shadow: var(--button-${variant}-box-shadow, var(--button-default-box-shadow, none));
+          cursor: not-allowed;
+        }
+      `}
+      </style>
+      <Element
+        ref={ref}
+        type={type || 'button'}
+        href={href}
+        id={actionId}
+        data-params={params}
+        data-action={actionId}
+        onClick={onClick}
+        data-button
+        data-button-variant={variant}
+        {...props}
+      >
+        {resolvedPrefix && (
+          <span data-button-icon-slot>
+            {typeof resolvedPrefix === 'string' ? <Icon name={resolvedPrefix} size="s" /> : <Icon size="s" {...resolvedPrefix} />}
+          </span>
+        )}
+        {resolvedLabel || children}
+        {suffix && (
+          <span data-button-icon-slot>
+            {typeof suffix === 'string' ? <Icon name={suffix} size="s" /> : <Icon size="s" {...suffix} />}
+          </span>
+        )}
+      </Element>
+    </>
+  )
+})

package/src/button/Buttons.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { View } from '../view'
+import { Button } from './Button.jsx'
+
+export default {
+  title: 'Design System/Actions/Button',
+  component: Button,
+  render: ({ variant }) => (
+    <View layout="row" gap="m" style={{ flexWrap: 'wrap' }}>
+      <Button variant={variant}>Button</Button>
+      <Button prefix="select" variant={variant}>Icon Left</Button>
+      <Button suffix="math-plus" variant={variant}>Icon right</Button>
+      <Button disabled variant={variant}>Disabled Button</Button>
+    </View>
+  ),
+}
+
+export const Default = {}
+
+export const Neutral = { args: { variant: 'neutral' } }
+
+export const Link = { args: { variant: 'link' } }
+
+export const CallToAction = { args: { variant: 'cta' } }
+
+export const Danger = { args: { variant: 'danger' } }
+
+export const Tab = { args: { variant: 'tab' } }
+
+export const TabActive = { args: { variant: 'tab-active' } }
+
+export const Tag = { args: { variant: 'tag' } }
+
+export const TagActive = { args: { variant: 'tag-active' } }

package/src/button/index.js

@@ -0,0 +1 @@
+export * from './Button.jsx'