@ossy/design-system 3.0.2 → 3.0.4

package/src/page/Page.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Button } from '../button'
+import { Tags } from '../tags'
+import { Text } from '../text'
+import { View } from '../view'
+import { ContentHeader } from '../content-header'
+import { AppHeader } from '../app-header'
+import { ComponentSlotsProvider } from '../component-slots'
+import { Page } from './Page.jsx'
+import { appLogoSlots } from '../app-header/appLogoSlots.jsx'
+import { DemoSidebar } from './DemoSidebar.jsx'
+
+export default {
+  title: 'Design System/Page',
+  component: Page,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Renders a `View layout="page"` grid with registered slots for each region (`page.header`, `page.content`, …). Register region components via `ComponentSlotsProvider`; extra props pass through to the root `View`.',
+      },
+    },
+  },
+}
+
+const PageHeaderExample = () => (
+  <AppHeader
+    far={(
+      <>
+        <Button variant="link" prefix="sun" label="Cloud Light" />
+        <Button variant="link" prefix="profile" label="Profile" />
+      </>
+    )}
+  />
+)
+
+const PageBody = () => (
+  <ContentHeader
+    title="design-system.story.pageTitle"
+    description="design-system.story.pageDescription"
+    near={<Tags tags={['Beta']} size="s" />}
+    far={<Button variant="cta" label="design-system.add" />}
+  />
+)
+
+const SidebarPrimary = () => <DemoSidebar />
+
+const AppFooter = () => (
+  <View as="footer" inset="m">
+    <Text variant="small">Platform Demo — explore capabilities in a live workspace</Text>
+  </View>
+)
+
+const defaultPageSlots = {
+  'page.header': PageHeaderExample,
+  'page.sidebar-primary': SidebarPrimary,
+  'page.content': PageBody,
+  'page.footer': AppFooter,
+}
+
+/** Typical route page: regions registered on `page.*` keys. */
+export const Default = () => (
+  <ComponentSlotsProvider slots={{ ...appLogoSlots, ...defaultPageSlots }}>
+    <Page />
+  </ComponentSlotsProvider>
+)

package/src/page/index.js

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

package/src/page-section/PageSection.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View } from '../view'
+
+export const PageSection = ({
+  surface,
+  maxWidth,
+  surfaceAs = 'section',
+  layout,
+  placeItems,
+  placeContent,
+  gap,
+  children,
+  style = {},
+  ...props
+}) => {
+
+  return (
+    <>
+      <style href='@ossy/design-system/page-section' precedence='high'>
+        {`
+          [data-page-section-alignment] {
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;  
+            height: 100%;
+          }
+        `}
+      </style>
+      <View
+        surface={surface}
+        as={surfaceAs}
+        style={{ width: '100%', ...style }}
+        {...props}
+      >
+        <View
+          layout={layout}
+          placeItems={placeItems}
+          placeContent={placeContent}
+          gap={gap}
+          style={{ maxWidth: `var(--max-width-${maxWidth}, 100%)` }}
+          data-page-section-alignment
+        >
+          {children}
+        </View>
+      </View>
+    </>
+  )
+}

package/src/page-section/PageSection.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { PageSection } from './PageSection.jsx'
+
+export default {
+  title: 'Design System/Layout/PageSection',
+  component: PageSection,
+  render: (props) => (
+    <PageSection {...props}>
+      Hello I&apos;m content, hi content I&apos;m dad
+    </PageSection>
+  ),
+}
+
+export const Default = {
+  args: {
+    surface: 'primary',
+    maxWidth: 'medium',
+    as: 'section',
+  },
+}

package/src/page-section/index.js

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

package/src/profile/Profile.jsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { Icon } from '../icons/Icon.jsx'
+import { Button } from '../button/Button.jsx'
+import { Text } from '../text/Text.jsx'
+import { View } from '../view/View.jsx'
+import { Tags } from '../tags/Tags.jsx'
+
+export const Profile = ({
+  name = '',
+  role = '',
+  image = '',
+  links: linksProp,
+  summary = '',
+  tags: tagsProp,
+  activeTags = [],
+  tagsLabel = 'Experience with',
+  onTagClick = () => {},
+  surface = 'primary',
+  roundness = 's',
+  inset = 'l',
+  ...props
+}) => {
+  const links = linksProp ?? []
+  const tags = tagsProp ?? []
+
+  return (
+  <View
+    data-scroll
+    data-profile
+    surface={surface}
+    roundness={roundness}
+    inset={inset}
+    {...props}
+  >
+    <style href="@ossy/design-system/profile" precedence="high">
+    {`
+      [data-profile] {
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-l);
+        scrollbar-width: none;
+        overflow-y: auto;
+        box-sizing: border-box;
+        border: 0.5px solid var(--separator-primary);
+      }
+
+      [data-profile]::-webkit-scrollbar {
+        display: none;
+      }
+
+      [data-profile] .titles {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-s);
+        text-align: center;
+      }
+
+      [data-profile] .tags {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-m);
+        max-width: 600px;
+      }
+
+      [data-profile] img {
+        border-radius: 50%;
+        width: 50%;
+        max-width: 200px;
+        height: auto;
+        margin: 0 auto;
+      }
+    `}
+    </style>
+
+    {image ? <img src={image} alt={name} /> : null}
+
+    <div className="titles">
+      <Text as="h1" variant="heading-primary">{name}</Text>
+      {role ? <Text as="h2" variant="lead">{role}</Text> : null}
+    </div>
+
+    {links.length > 0 && (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-m)' }}>
+        {links.map((x) => (
+          <Button
+            style={{ justifyContent: 'flex-start' }}
+            {...x}
+            variant={x.variant || 'link'}
+            key={x.label}
+          >
+            {x.icon ? <Icon name={x.icon} /> : null}
+            {x.label}
+          </Button>
+        ))}
+      </div>
+    )}
+
+    {summary ? (
+      <div>
+        {summary
+          .split('\n\n')
+          .map((paragraph) => (
+            <Text key={paragraph} style={{ maxWidth: '600px', textAlign: 'left' }}>
+              {paragraph}
+            </Text>
+          ))}
+      </div>
+    ) : null}
+
+    {tags.length > 0 && (
+      <div className="tags">
+        <Text as="h3" variant="heading-secondary">{tagsLabel}</Text>
+        <Tags
+          tags={[...tags].sort((a, b) => a.localeCompare(b))}
+          activeTags={activeTags}
+          onSelect={onTagClick}
+          style={{ textAlign: 'center' }}
+        />
+      </div>
+    )}
+  </View>
+  )
+}

package/src/profile/Profile.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Profile } from './Profile.jsx'
+
+export default {
+  title: 'Design System/Display/Profile',
+  component: Profile,
+}
+
+const sample = {
+  name: 'Alex Developer',
+  role: 'Platform engineer',
+  image: 'https://i.pravatar.cc/300',
+  summary: 'Building capability-first products.\n\nMCP, SDK, and agent tooling.',
+  tags: ['React', 'TypeScript', 'MCP'],
+  links: [
+    { icon: 'mail', label: 'alex@example.com', href: 'mailto:alex@example.com' },
+    { icon: 'globe-alt', label: 'example.com', href: 'https://example.com', target: '_blank' },
+  ],
+}
+
+export const Default = {
+  render: () => <Profile {...sample} style={{ maxWidth: 400 }} />,
+}

package/src/profile/index.js

@@ -0,0 +1 @@
+export { Profile } from './Profile.jsx'

package/src/public.index.js

@@ -0,0 +1 @@
+export * from './index.js'

package/src/separator/Separator.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export const Separator = ({
+  variant = 'primary',
+  as: Element = 'div',
+  ...props
+}) => {
+
+  return (
+    <>
+      <style href="@ossy/design-system/separator" precedence='high'>
+      {`
+        [data-separator] {
+          border-style: solid;
+          border-width: 1px 0 0 0;
+        }
+      `}
+      </style>
+      <style href={`@ossy/design-system/separator/${variant}`} precedence='high'>
+      {`
+        [data-separator-variant="${variant}"] {
+          border-color: var(--separator-${variant}),
+        }
+      `}
+      </style>
+      <Element {...props} data-separator data-separator-variant={variant}/>
+    </>
+  )
+}

package/src/separator/Separator.stories.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Separator } from './Separator.jsx'
+
+export default {
+  title: 'Design System/Display/Separator',
+  component: Separator,
+}
+
+export const Primary = { args: { variant: 'primary' } }

package/src/separator/index.js

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

package/src/slot/index.js

@@ -0,0 +1 @@
+export { Slot } from '../component-slots/ComponentSlots.jsx'

package/src/sv.translations.json

@@ -0,0 +1,46 @@
+{
+  "design-system.emptyState.message": "Tomt",
+  "design-system.fields.addTagPlaceholder": "Lägg till tagg…",
+  "design-system.fields.addTag": "Lägg till",
+  "design-system.fields.noTagSuggestions": "Inga förslag — lägg till en tagg nedan.",
+  "design-system.fields.booleanOn": "På",
+  "design-system.fields.booleanOff": "Av",
+  "design-system.fields.datePlaceholder": "Välj datum…",
+  "design-system.fields.datePickerLabel": "Välj datum",
+  "design-system.fields.datePrevMonth": "Föregående månad",
+  "design-system.fields.dateNextMonth": "Nästa månad",
+  "design-system.fields.dateClear": "Rensa datum",
+  "design-system.fields.dateRangeStart": "Start",
+  "design-system.fields.dateRangeEnd": "Slut",
+  "design-system.fields.dateRangeAdd": "Lägg till intervall",
+  "design-system.fields.dateRangeRemove": "Ta bort intervall",
+  "design-system.fields.dateRangeItem": "Intervall {index}",
+  "design-system.upload.label": "Ladda upp",
+  "design-system.overview": "Översikt",
+  "design-system.add": "Lägg till",
+  "design-system.loading": "Laddar...",
+  "design-system.errorLoadingProfile": "Kunde inte ladda profilen",
+  "design-system.goToHomepage": "Gå till startsidan",
+  "design-system.signIn": "Logga in",
+  "design-system.tryAgain": "Försök igen",
+  "design-system.notifyMe": "Meddela mig",
+  "design-system.cancel": "Avbryt",
+  "design-system.save": "Spara",
+  "design-system.comingSoon": "Kommer snart",
+  "design-system.dev.pagesPanel.title": "Dev",
+  "design-system.dev.pagesPanel.currentPage": "Aktuell sida",
+  "design-system.dev.pagesPanel.id": "id",
+  "design-system.dev.pagesPanel.path": "path",
+  "design-system.dev.pagesPanel.url": "url",
+  "design-system.dev.pagesPanel.viewPackage": "Visa paket ({package})",
+  "design-system.dev.pagesPanel.pages": "Sidor ({count})",
+  "design-system.dev.pagesPanel.openPage": "Öppna sida",
+  "design-system.dev.pagesPanel.accessLabel": "Åtkomst: {access}",
+  "design-system.dev.pagesPanel.credentialsLabel": "Credentials: {credentials}",
+  "design-system.story.pageTitle": "Exempelsida",
+  "design-system.story.pageDescription": "Kort beskrivning för layout- och headerdemos.",
+  "design-system.story.analyticsTitle": "Analys",
+  "design-system.story.analyticsDescription": "Statistik och rapporter för din workspace.",
+  "design-system.story.toolsTitle": "Verktyg",
+  "design-system.story.toolsDescription": "Verktyg och integrationer du kan aktivera för den här workspace."
+}

package/src/switch/Switch.jsx

@@ -0,0 +1,13 @@
+import React, { Children, cloneElement } from 'react'
+
+const renderChildren = children =>
+  typeof children === 'function' ? children() : children
+
+export const Switch = ({ on, children, ...rest }) =>
+  Children.map(
+    children,
+    child => cloneElement(child, { on, ...rest })
+  )
+
+Switch.Case = ({ on, match = [], children }) =>
+  match.includes(on) ? renderChildren(children) : <></>

package/src/switch/index.js

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

package/src/switch/switch.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Switch } from './Switch'
+
+export default {
+  title: 'Design System/Base/Switch',
+  component: Switch,
+  render: () => (
+    <Switch on="Loading">
+      <Switch.Case match={['Error']}>Error</Switch.Case>
+      <Switch.Case match={['Loading']}>Loading</Switch.Case>
+      <Switch.Case match={['Success']}>Success</Switch.Case>
+    </Switch>
+  ),
+}
+
+export const Default = {}

package/src/table/Table.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { Text } from '../text'
+
+export const Table = ({
+  header = [],
+  data = [],
+  ...props
+}) => {
+
+  return (
+    <table {...props} data-table>
+      <style href="@ossy/design-system/table" precedence='high' >
+      {`
+        [data-table] th {
+          padding: var(--space-m);
+        }
+
+        [data-table] td {
+          padding: var(--space-m);
+        }
+      `}
+      </style>
+      <thead>
+        <tr>
+          { header.map(({ label, ...props }) => (
+            <th {...props}>
+              <Text>{label}</Text>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {
+          data.map(column => (
+            <tr>
+              {header.map(({ key }) => (
+                <td>
+                  <Text>{column[key]}</Text>
+                </td>
+              ))}
+            </tr>
+            // <DropZone.Dragable dragData={resource.id} key={resource.id}>
+            //   <Stack.Item>
+            //     <div
+            //       className="hover:bg-96 inset-stretch-m cursor-pointer sans-serif d-flex align-center justify-between"
+            //       style={{ borderBottom: '1px solid var(--separator-primary)' }}
+            //       onClick={() => setSelectedResourceId(resource.id)}
+            //     >
+            //       <div className="d-flex align-center">
+            //         <Icon name="Document" style={{ fill: 'hsl(0, 0%, 80%)'}} className="inline-m"/>
+            //         <span style={{ marginRight: '32px' }}>{resource.name}</span>
+            //
+            //         {
+            //           // show dateCreated and date updated instead
+            //           // <span style={{
+            //           //   fontSize: '12px',
+            //           //   color: 'hsl(0, 0%, 40%)'
+            //           // }}>{resource.id}</span>
+            //         }
+            //       </div>
+            //       <Icon
+            //         name="Delete"
+            //         onClick={event => {
+            //           event.stopPropagation()
+            //           removeResource(resource.id)
+            //         }}
+            //         style={{ fill: 'hsl(0, 0%, 80%)'}}
+            //         className="hover:fill-50 mobile:d-none"
+            //       />
+            //     </div>
+            //   </Stack.Item>
+            // </DropZone.Dragable>
+          ))
+        }
+      </tbody>
+    </table>
+  )
+}

package/src/table/Table.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Table } from './Table.jsx'
+
+export default {
+  title: 'Design System/Display/Table',
+  component: Table,
+  args: {
+    header: [
+      { label: 'Id', key: 'id' },
+      { label: 'name', key: 'name' },
+      { label: 'email', key: 'email' },
+      { label: 'Preferred language', key: 'language' },
+    ],
+    data: [
+      { id: '123122', email: 'user@example.com', name: 'John Doe', language: 'Português' },
+      { id: '321333', email: 'user@example.com', name: 'John Doe', language: 'English' },
+      { id: '312412', email: 'user@example.com', name: 'John Doe', language: 'Svenska' },
+      { id: '123141', email: 'user@example.com', name: 'John Doe', language: 'Français' },
+      { id: '123122', email: 'user@example.com', name: 'John Doe', language: 'Español' },
+    ],
+  },
+}
+
+export const Default = {}

package/src/table/index.js

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

package/src/tabs/Tabs.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+
+/**
+ * Tab interface
+ * @typedef {Object} Tab
+ * @property {string} id - Used to identify active tab
+ * @property {string} label - Text that will show up in the tab
+ */
+
+export const Tabs = ({
+  as = 'nav',
+  tabs = [],
+  activeTabId,
+  variant = 'tab',
+  onTabClick = () => {},
+  gap,
+  ...props
+}) => (
+  <View as={as} {...props} data-tabs>
+
+    <style>
+    {`
+      [data-tabs] {
+        margin: 0;
+        padding: 0;
+        boxSizing: border-box;
+        height: 100%;
+        whiteSpace: nowrap;
+        background: transparent;
+      }
+
+      [data-tabs] ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        flex-wrap: no-wrap;
+      }
+
+      [data-tabs] li {
+        list-style: none
+      }
+
+    `}
+    </style>
+
+    <View as="ul" gap={gap} layout="row">
+      {
+        tabs.map(tab => (
+          <li key={tab.id}>
+            <Button
+              variant={tab.id === activeTabId ? `${variant}-active` : variant}
+              onClick={e => onTabClick(e, tab)}
+              {...tab}
+            >
+              {tab.label}
+            </Button>
+          </li>
+        ))
+      }
+    </View>
+  </View>
+)

package/src/tabs/Tabs.stories.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { Tabs } from './Tabs.jsx'
+
+export default {
+  title: 'Design System/Display/Tabs',
+  component: Tabs,
+  args: {
+    activeTabId: 'English',
+    tabs: [
+      { id: 'Português', label: 'Português' },
+      { id: 'English', label: 'English' },
+      { id: 'Svenska', label: 'Svenska' },
+      { id: 'Français', label: 'Français' },
+      { id: 'Español', label: 'Español' },
+    ],
+  },
+  render: (props) => {
+    const [activeTabId, setActiveTabId] = useState(props.activeTabId)
+
+    return (
+      <Tabs
+        {...props}
+        activeTabId={activeTabId}
+        onTabClick={(_event, tab) => setActiveTabId(tab.id)}
+      />
+    )
+  },
+}
+
+export const Default = {}
+
+export const AsLinks = {
+  args: {
+    tabs: [
+      { id: 'Português', label: 'Português', href: '/portuguese' },
+      { id: 'English', label: 'English', href: '/' },
+      { id: 'Svenska', label: 'Svenska', href: '/swedish' },
+      { id: 'Français', label: 'Français', href: '/french' },
+      { id: 'Español', label: 'Español', href: '/spanish' },
+    ],
+  },
+}
+
+export const Theming = {
+  args: {
+    variant: 'dark',
+    theme: {
+      'tabs-dark-background': 'hsl(0, 0%, 20%)',
+      'tabs-dark-color': 'hsl(0, 0%, 80%)',
+      'tabs-dark-accent-active': 'hsl(25, 80%, 50%)',
+    },
+  },
+}

package/src/tabs/index.js

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