@ossy/design-system 0.1.4 → 0.1.6

package/src/resume-experience/ResumeExperience.jsx

@@ -1,88 +0,0 @@
-import React from 'react'
-import { Icon2 } from '../icons/Icon2.jsx'
-import { Button } from '../button'
-import { Text } from '../text'
-import { Title } from '../title'
-import { Card } from '../card'
-import { Tags } from '../tags'
-
-export const ResumeExperience = ({
-  title,
-  subTitle,
-  date,
-  description,
-  website,
-  github,
-  tags = [],
-  ...props
-}) =>
-  <Card data-resume-experience {...props}>
-
-    <style>
-    {`
-      [data-resume-experience] {
-        display: grid;
-        flex-direction: column;
-        gap: var(--space-m);
-        page-break-inside: avoid;
-      }
-
-
-      [data-resume-experience] header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-
-      },
-
-      @media print {
-        box-shadow: none;
-        marginBottom: 8px !important
-      }
-    `}
-    </style>
-
-
-    <header>
-      <div>
-        <Title as="h3" variant="secondary">{title}</Title>
-        <Title as="h4" variant="lead">{subTitle}</Title>
-        <Text as="span">{date}</Text>
-      </div>
-    </header>
-
-    {
-      (!!description || !!props.children) && (
-        <Text>
-          {!!description ? description : props.children}
-        </Text>
-      )
-    }
-
-    {
-      (!!website || !!github) && (
-        <div>
-          {
-            !!website && (
-              <Button variant="link" href={website} target="_blank">
-                <Icon2 name="globe-alt"/>
-                Visit website
-              </Button>
-            )
-          }
-          {
-            !!github && (
-              <Button variant="link" href={github} target="_blank">
-                <Icon2 name="git-fork" style={{ with: '22px', height: '22px' }}/>
-                GitHub
-              </Button>
-            )
-          }
-        </div>
-      )
-    }
-
-    {
-      !!tags && !!tags.length && <Tags tags={tags}/>
-    }
-  </Card>

package/src/resume-experience/ResumeExperience.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { ResumeExperience } from './ResumeExperience.jsx'
-
-export default {
-  title: 'Display/ResumeExperience',
-  component: ResumeExperience,
-}
-
-const Story = props => {
-  return (
-    <ResumeExperience {...props} />
-  )
-}
-
-export const Default = Story.bind({})
-
-Default.args = {
-  title: 'Oskars Sylwan AB',
-  subTitle: 'Software developer',
-  date: '2020 - present',
-  description: `
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
-    tristique pretium est. Cras tempor sagittis iaculis.
-    Vestibulum congue ullamcorper odio vel varius.
-    Etiam ornare volutpat leo quis pretium.
-    Vestibulum eu tincidunt est.
-    Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
-    congue lectus sit amet, condimentum sem.
-  `,
-  website: 'https://ossy.se',
-  github: 'https://github.com/ossy-se',
-  tags: ['Angular', 'React', 'JavaScript', 'TypeScript'],
-}

package/src/resume-experience/index.js

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

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

@@ -1,95 +0,0 @@
-import { useMemo } from 'react'
-import { Button } from '../button'
-import { PageSection } from '../page-section'
-
-const contentContainer = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}
-
-const navListStyles = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  listStyle: 'none',
-  fontFamily: 'sans-serif',
-}
-
-export const AppHeader = ({
-  logo: Logo,
-  title: Title,
-  primarySlot: PrimarySlot,
-  secondarySlot: SecondarySlot,
-  as = 'header',
-  variant = 'primary',
-  maxWidth = 'full',
-  style = {},
-  ...props
-}) => {
-
- const headerStyles = useMemo(() => {
-
-   const commonStyles = {
-     display: 'flex',
-     justifyContent: 'center',
-     alignItems: 'center',
-     padding: '16px 32px',
-     borderBottom: '1px solid hsl(0, 0%, 95%)',
-   }
-
-   const primaryStyles = {
-     borderBottom: '1px solid hsl(0, 0%, 95%)',
-   }
-
-   const altPrimaryStyles = {
-     borderBottom: '1px solid var(--surface-alt-primary)',
-   }
-
-   return true
-    ? { ...commonStyles, ...altPrimaryStyles, ...style }
-    : { ...commonStyles, ...primaryStyles, ...style }
- }, [style])
-
-  return (
-    <PageSection
-      as={as}
-      surface={variant}
-      maxWidth={maxWidth}
-      style={headerStyles}
-      {...props}
-    >
-      <div style={contentContainer}>
-
-        {
-          !!Logo && (<Logo />)
-        }
-
-        <nav>
-          <ul style={navListStyles}>
-            <li>
-              <Link to="/consultants">
-                <Button variant={variants.buttonLink} as="a">
-                  Consultants
-                </Button>
-              </Link>
-            </li>
-            <li>
-              <Link to="/free-resources">
-                <Button variant={variants.buttonLink} as="a">
-                  Free resources
-                </Button>
-              </Link>
-            </li>
-            <li>
-              <Link to="/contact-us">
-                <Button variant="cta" as="a">
-                  Reach out
-                </Button>
-              </Link>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </PageSection>
-  )
-}

package/src/sections/app-header/index.js

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

package/src/sections/contact/EmailContact.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { useClipboardCopy } from '../../hooks'
-import { Title  } from '../../title'
-import { Button } from '../../button'
-
-export const EmailContact = ({
-  email,
-  buttonLabel = 'Copy email to clipboard'
-}) => {
-  const [canCopy, copy] = useClipboardCopy()
-
-  return (
-    <div data-email-contact >
-
-      <style href="@ossy/design-system/email-contact" precedence='high'>
-      {`
-        [data-email-contact] {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 150px 32px;
-        }
-      `}
-      </style>
-
-      <div style={{ textAlign: 'center'}}>
-        <a href={`mailto:${email}`} style={{ textDecoration: 'none' }}>
-          <Title variant="display">
-            {email}
-          </Title>
-        </a>
-        <div className="text-center" style={{ marginTop: '48px' }}>
-          { canCopy && (
-            <Button variant="cta" onClick={() => copy(email)}>
-              {buttonLabel}
-            </Button>
-          )}
-        </div>
-      </div>
-
-    </div>
-  )
-}

package/src/sections/contact/EmailContact.stories.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { EmailContact } from './EmailContact.jsx'
-
-export default {
-  title: 'App/Contact/Email Contact',
-  component: EmailContact,
-}
-
-const Story = props => <EmailContact {...props}/>
-
-export const Default = Story.bind({})
-Default.args = {
-  email: 'yourfriends@ossy.se'
-}

package/src/sections/contact/index.js

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

package/src/sections/footer/Footer.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import { Title } from '../../title'
-import { Button } from '../../button'
-import { Text } from '../../text'
-
-export const Footer = ({
-  columns = [],
-  gap = 'm',
-}) => {
-  return (
-    <div data-footer>
-
-      <style>
-      {`
-        [data-footer] {
-          display: flex;
-          flex-wrap: wrap;
-          align-ems: flex-start;
-          justify-content: space-between;
-          gap: var(--space-${gap});
-          padding: var(--space-s);
-        }
-
-        [data-footer] .title {
-          marginBottom: var(--space-m)'
-        }
-
-        [data-footer] .list {
-          padding: 0;
-        }
-
-        [data-footer] .list-item {
-          list-style: none;
-        }
-      `}
-      </style>
-
-      {
-        columns.map(column => (
-          <div style={{
-            flexBasis: `calc(calc(100% / ${columns.length}) - var(--space-${gap}))`,
-            display: 'flex',
-            justifyContent: 'center'
-          }}>
-            <div>
-              <Title variant="secondary" className="title">{column.title}</Title>
-              {
-                !!column.body && <Text>{column.body}</Text>
-              }
-              {
-                !!column.list && (
-                  <ul className="list" key={column.title}>
-                    {
-                      column.list.map(actionProps => (
-                        <li className="list-item" key={actionProps.key || actionProps.label}>
-                          <Button variant="link" {...actionProps} style={{ marginBottom: 'var(--space-m)'}} />
-                        </li>
-                      ))
-                    }
-                  </ul>
-                )
-              }
-            </div>
-          </div>
-
-        ))
-      }
-    </div>
-  )
-}

package/src/sections/footer/Footer.stories.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { Footer } from './Footer.jsx'
-
-export default {
-  title: 'App/Footer/Footer',
-  component: Footer,
-}
-
-const Story = props => <Footer {...props} />
-
-export const Default = Story.bind({})
-Default.args = {
-  columns: [
-    {
-      title: 'Contact',
-      list: [
-        { label: 'Instagram', href: 'https://www.instagram.com/' },
-        { label: 'Facebook', href: 'https://www.facebook.com' },
-        { label: 'claudius6tus@yahoo.se', href: 'mailto:example@example.com' },
-        { label: 'Tel: +11 222 33 444' }
-      ]
-    },
-    {
-      title: 'Navigation',
-      list: [
-        { id: 'header-nav', label: 'Start', href: '#' },
-        { id: 'testimonials-nav', label: 'Testimonials', href: '#testimonials' },
-        { id: 'contact-nav', label: 'Contact', href: '#contact' },
-        { id: 'treatments-nav', label: 'Treatments', href: '#treatments' },
-        { id: 'about-nav', label: 'About me', href: '#about' },
-      ]
-    },
-    {
-      title: 'Languages',
-      list: [
-        { label: 'English', href: '/en', code: 'en' },
-        { label: 'Português', href: '/pt', code: 'pt' },
-        { label: 'Svenska', href: '/sv', code: 'sv' },
-        { label: 'Français', href: '/fr', code: 'fr' },
-        { label: 'Español', href: '/es', code: 'es' },
-      ],
-    }
-  ]
-}

package/src/sections/footer/SimpleFooter.jsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { Text } from '../../text'
-import { Button } from '../../button'
-
-const aboutUsStyles = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  fontFamily: 'sans-serif',
-  borderTop: '1px solid var(--separator-primary)',
-  padding: '64px 32px'
-}
-
-const aboutUsContentContainerStyles = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: 'var(--space-l)'
-}
-
-const footerLinkStyles = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderTop: '1px solid var(--separator-primary)',
-  fontFamily: 'sans-serif'
-}
-
-const footerLinkContentContainerStyles = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-}
-
-const legalStyles = {
-  textAlign: 'center',
-  padding: '16px',
-  fontFamily: 'sans-serif',
-  fontSize: '12px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-}
-
-export const SimpleFooter = ({
-  logo,
-  aboutUs,
-  legal,
-  navigation = [],
-  ...props
-}) => (
-  <>
-
-    <div style={aboutUsStyles}>
-      <div style={aboutUsContentContainerStyles}>
-        {logo}
-        <Text as="p" style={{ lineHeight: '1.6', maxWidth: '700px' }}>
-          {aboutUs}
-        </Text>
-      </div>
-    </div>
-
-    <div style={footerLinkStyles}>
-      <div style={footerLinkContentContainerStyles}>
-        <nav>
-          <ul style={{ listStyle: 'none', display: 'flex', justifyContent: 'space-between', width: '100%', maxWidth: '600px' }}>
-            {navigation.map(button => (
-              <li style={{ margin: '0 8px' }} key={button.href}>
-                <Button variant="link" {...button} />
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
-    </div>
-
-    <div style={legalStyles}>
-      <Text as="span" variant="small">{legal}</Text>
-    </div>
-
-  </>
-)

package/src/sections/footer/SimpleFooter.stories.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { SimpleFooter } from './SimpleFooter.jsx'
-
-export default {
-  title: 'Other/Footer/Simple',
-  component: SimpleFooter,
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => <SimpleFooter {...props}/>
-
-export const Default = Story.bind({})
-Default.args = {
-  logo: <>logo</>,
-  aboutUs: `
-    Drivna av passion för teknik och innovation,
-    är vi dedikerade till att erbjuda lösningar av högsta kvalitet.
-    Med en stark tro på att rätt teknik kan förvandla affärslandskapet,
-    är vi här för att bli er förlitade partner inom systemutveckling.
-  `,
-  legal: 'Copyright @ Oskars Sylwan AB',
-  navigation: [
-    {
-      label: 'Start'
-    },
-    {
-      label: 'About us'
-    },
-    {
-      label: 'Contact'
-    },
-    {
-      label: 'Services'
-    }
-  ]
-}

package/src/sections/footer/index.js

@@ -1,2 +0,0 @@
-export * from './SimpleFooter.jsx'
-export * from './Footer.jsx'

package/src/sections/header/Header.jsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import { Tabs } from '../../tabs/index.js'
-import { Button } from '../../button'
-import { Title } from '../../title'
-
-export const Header = ({
-  logo,
-  actions = [],
-  navigation = [],
-  navigationVariant = 'link'
-}) => {
-
-  return (
-    <div data-header>
-
-      <style href="@ossy/design-system/header" precedence='high'>
-      {`
-        [data-header] {
-          height: 100%;
-          margin: 0,
-          box-sizing: border-box;
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          justify-content: flex-start;
-          gap: 16px;
-        }
-
-        [data-header] [data-slot="logo"] {
-          order: 1;
-          display: flex;
-          justify-content: center;
-        }
-
-        [data-header] [data-slot="navigation"] {
-          order: 2;
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-        }
-
-        [data-header] [data-slot="actions"] {
-          order: 3;
-          display: flex;
-          flex-shrink: 0;
-          flex-grow: 1;
-          justify-content: flex-end;
-          gap: 8px;
-        }
-
-        @media (min-width: 450px) {
-
-          [data-header] [data-slot="logo"] {
-            justify-content: flex-start;
-          }
-
-          [data-header] [data-slot="actions"] {
-          }
-        }
-
-      `}
-      </style>
-
-      <div data-slot="logo">
-        { typeof logo !== 'string'
-          ? logo
-          : (
-            <Title variant="logo">
-              {logo}
-            </Title>
-        )}
-      </div>
-
-      <Tabs
-        data-slot="navigation"
-        variant={navigationVariant}
-        tabs={navigation}
-      />
-
-      <div data-slot="actions">
-        {actions.map(x => <Button {...x} /> )}
-      </div>
-
-    </div>
-  )
-}

package/src/sections/header/Header.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { Header } from './Header.jsx'
-
-export default {
-  title: 'Other/Header/Header',
-  component: Header,
-}
-
-const Story = props => (
-  <Header {...props} />
-)
-
-export const Default = Story.bind({})
-Default.args = {
-  logo: 'Logo',
-  navigation: [
-    { id: 'start-nav', label: 'Start', href: '/' },
-    { id: 'features-nav', label: 'Features', href: '#features' },
-    { id: 'documentation-nav', label: 'Documentation', href: '/documentation' }
-  ],
-  actions: [
-    {
-      key: 'log-in',
-      children: 'Login',
-      href: '/sign-in'
-    },
-    {
-      key: 'sign-up',
-      children: 'Sign up',
-      href: '/sign-up',
-      variant: 'cta'
-    }
-  ]
-}

package/src/sections/header/index.js

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