@ossy/design-system-extras 0.1.4 → 0.1.6

package/src/router-layouts/StandardLayout.jsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import {
-  Tabs,
-  Header,
-  Text,
-  Page
-} from "@ossy/design-system"
-import { Footer } from './Footer.jsx'
-
-export const StandardLayout = ({
-  logo,
-  headerActions,
-  headerAccentBorder = true,
-  navigation,
-  maxWidth = 'medium',
-  copyright,
-  footer,
-  children,
-  ...props
-}) => {
-
-  const sections = [
-
-    headerAccentBorder && {
-      id: "accent-border",
-      style: {
-        height: '4px',
-        position: 'sticky',
-        zIndex: '10',
-        top: '0',
-        background: 'var(--separator-accent)'
-      }
-    },
-
-    (logo || headerActions) && {
-          id: "header",
-          surface: "primary",
-          style: {
-            padding: 'var(--space-s) var(--space-l)',
-            // borderBottom: '1px solid var(--separator-primary)',
-            width: '100%',
-          },
-        render: () => <Header logo={logo} actions={headerActions} />
-    },
-
-    navigation && {
-      id: "navigation",
-      surface: "primary",
-      style: {
-        // borderBottom: '1px solid var(--separator-primary)',
-        height: '55px',
-        position: 'sticky',
-        top: '4px',
-        width: '100%',
-        // boxShadow: '2px 2px 4px hsla(0, 0%, 0%, .1)',
-        zIndex: '10'
-      },
-      render: () => <Tabs tabs={navigation} style={{ height: '100%'}}/>
-    },
-
-    {
-      id: "outlet",
-      as: "main",
-      maxWidth: 'full',
-      style: { gridArea: 'content' },
-      render: () => children
-    },
-
-    footer && {
-      id: "footer",
-      surface: footer.surface,
-      as: "footer",
-      style: {
-        padding: 'var(--space-xl) var(--space-m)'
-      },
-      render: () => <Footer columns={footer.columns} />
-    },
-
-    copyright && {
-      id: "footer-section-copyright",
-      surface: "alt-secondary",
-      style: {
-        padding: 'var(--space-m)',
-        textAlign: 'center',
-      },
-      render: () => (
-        <Text variant="small">
-          {copyright}
-        </Text>
-      )
-    }
-  ].filter(x => !!x)
-
-  return <Page maxWidth={maxWidth} sections={sections} {...props}/>
-}

package/src/router-layouts/StandardLayout.stories.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { StandardLayout } from './StandardLayout.jsx'
-
-export default {
-  title: 'Design System Extras/Router Layouts/Standard',
-  component: StandardLayout,
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => (
-  <StandardLayout {...props} />
-)
-
-export const Default = Story.bind({})
-Default.args = {
-  logo: 'Logo',
-  copyright: 'Copyright @ Company 2023',
-  navigation: [
-    { id: 'header-nav', label: 'Start', href: '#' },
-    { id: 'testimonials-nav', label: 'Testimonials', href: '#testimonials' },
-    { id: 'contact-nav', label: 'Contact', href: '#contact' },
-    { id: 'services-nav', label: 'Services', href: '#services' },
-    { id: 'about-nav', label: 'About', href: '#about' },
-  ],
-  headerActions: [
-    {
-      key: 'log-in',
-      children: 'Login',
-      href: '/sign-in'
-    },
-    {
-      key: 'sign-up',
-      children: 'Sign up',
-      href: '/sign-up',
-      variant: 'cta'
-    }
-  ]
-}

package/src/router-layouts/card/Card.layout.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Card, View, PageSection } from "@ossy/design-system"
-
-export const CardLayout = ({
-  surface = 'primary',
-  maxWidth = 'full',
-  layout = 'off-center',
-  cardVariant,
-  cardSurface,
-  header,
-  children,
-  content,
-}) => (
-  <PageSection surface={surface} maxWidth={maxWidth}>
-    <View
-      layout={layout}
-      style={{ height: '100vh' }}
-    >
-      {header}
-      <Card slot="content" variant={cardVariant} style={{ overflowY: 'auto' }} surface={cardSurface}>
-        { content ?? children }
-      </Card>
-    </View>
-  </PageSection>
-)

package/src/router-layouts/card/Card.layout.stories.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { CardLayout } from './Card.layout.jsx'
-
-export default {
-  title: 'Design System Extras/Router Layouts/Card',
-  component: CardLayout,
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => <CardLayout {...props} />
-
-export const Default = Story.bind({})
-Default.args = {}

package/src/router-layouts/card/index.js

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

package/src/router-layouts/card-sidebar/CardSidebar.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { Card, Button, PageSection } from "@ossy/design-system"
-
-export const CardSidebar = ({
-  surface = 'primary',
-  layout = 'off-center-m',
-  navigation = [],
-  cardVariant,
-  cardSurface,
-  header,
-  children,
-  content,
-  ...props
-}) => {
-  return (
-    <PageSection
-      layout={layout}
-      surface={surface}
-      {...props}
-    >
-      {header}
-      <Card
-        variant={cardVariant}
-        surface={cardSurface}
-        slot="content"
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          padding: '0',
-        }}
-      >
-        <div style={{
-          display: 'flex',
-          gap: 'var(--space-s)',
-          padding: 'var(--space-l) var(--space-s)',
-          flexDirection: 'column',
-          width: '180px',
-          borderRight: '1px solid var(--separator-primary)',
-        }}>
-          { navigation.map(action => ( <Button {...action} style={{ justifyContent: 'flex-start' }}/> )) }
-        </div>
-        <div style={{ flexGrow: '1', padding: 'var(--space-l)', overflowY: 'auto' }}>
-          { content ?? children }
-        </div>
-      </Card>
-    </PageSection>
-  )
-}

package/src/router-layouts/card-sidebar/CardSidebar.stories.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { CardSidebar } from './CardSidebar.jsx'
-
-export default {
-  title: 'Design System Extras/Router Layouts/Card Sidebar',
-  component: CardSidebar,
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => (
-  <CardSidebar {...props}/>
-)
-
-export const Default = Story.bind({})
-Default.args = {
-  navigation: [
-    { id: 'general-nav', label: 'General', href: 'general' },
-    { id: 'users-nav', label: 'Users', href: 'users' },
-    { id: 'api-tokens-nav', label: 'Api tokens', href: 'api-tokens' },
-  ]
-}

package/src/router-layouts/card-sidebar/index.js

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

package/src/router-layouts/card-tabs/CardTabs.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Card, Tabs, PageSection, View } from "@ossy/design-system"
-
-export const CardTabs = ({
-  surface = 'primary',
-  layout = 'off-center',
-  cardVariant = 'decorated',
-  tabs = [],
-  content,
-  children,
-  ...props
-}) => {
-  return (
-    <PageSection
-      layout={layout}
-      surface={surface}
-      {...props}
-    >
-      <View  style={{ height: '100%', background: 'var(--surface-linear-gradient)' }}>
-        <Card variant={cardVariant} slot="content" style={{ width: '100vw', padding: '0' }}>
-          <Tabs
-            tabs={tabs}
-            style={{
-              height: 'auto',
-              borderBottom: '1px solid var(--separator-primary)'
-            }}
-          />
-          <div style={{ padding: 'var(--space-m)' }}>
-            { content || children }
-          </div>
-        </Card>
-      </View>
-    </PageSection >
-  )
-}

package/src/router-layouts/card-tabs/CardTabs.stories.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { CardTabs } from './CardTabs.jsx'
-
-export default {
-  title: 'Design System Extras/Router Layouts/Card Tabs',
-  component: CardTabs,
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => (
-  <CardTabs {...props}/>
-)
-
-export const Default = Story.bind({})
-Default.args = {
-  tabs: [
-    { id: 'general-nav', label: 'General', href: 'general' },
-    { id: 'users-nav', label: 'Users', href: 'users' }
-  ]
-}

package/src/router-layouts/card-tabs/index.js

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

package/src/router-layouts/index.js

@@ -1,4 +0,0 @@
-export * from './StandardLayout.jsx'
-export * from './card/index.js'
-export * from './card-sidebar/index.js'
-export * from './card-tabs/index.js'

package/src/stories/Button.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import './button.css';
-
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  backgroundColor = null,
-  size = 'medium',
-  label,
-  ...props
-}) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  /** Is this the principal call to action on the page? */
-  primary: PropTypes.bool,
-  /** What background color to use */
-  backgroundColor: PropTypes.string,
-  /** How large should the button be? */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Button contents */
-  label: PropTypes.string.isRequired,
-  /** Optional click handler */
-  onClick: PropTypes.func,
-};

package/src/stories/Button.stories.js

@@ -1,49 +0,0 @@
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};