@ossy/design-system 0.0.1-alpha → 0.0.3-alpha

package/src/profile-card/ProfileCard.jsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { css } from 'glamor'
+import { Icon } from '../icon'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Title } from '../title'
+import { Card } from '../card'
+import { Tags } from '../tags'
+
+const styles = css({
+  minHeight: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 'var(--space-l)',
+  scrollbarWidth: 'none',
+  overflowY: 'auto',
+
+  '::-webkit-scrollbar': { display: 'none' },
+
+  '& .titles': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 'var(--space-s)',
+    textAlign: 'center'
+  },
+
+  '& .tags': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 'var(--space-m)',
+    maxWidth: '600px'
+  },
+
+  '& img': {
+    borderRadius: '50%',
+    width: '50%',
+    maxWidth: '200px',
+    height: 'auto',
+    margin: '0 auto',
+  }
+
+})
+
+export const ProfileCard = ({
+  name = '',
+  role = '',
+  image = '',
+  links = [],
+  summary = '',
+  tags = [],
+  activeTags = [],
+  cardVariant,
+  translations = {},
+  onTagClick = () => {},
+  ...props
+}) => (
+  <Card data-scroll variant={cardVariant} {...styles} {...props}>
+
+    <img src={image} alt={name} />
+
+    <div className="titles">
+      <Title as="h1" variant="primary">{name}</Title>
+      <Title as="h2" variant="lead">{role}</Title>
+    </div>
+
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-m)'}}>
+      {
+        links.map(x => (
+          <Button
+            {...x}
+            variant={x.variant || 'link'}
+            key={x.label}
+          >
+            {x.icon && <Icon name={x.icon}/>}
+            {x.label}
+          </Button>
+        ))
+      }
+    </div>
+
+    <div>
+      {
+        summary
+          .split('\n\n')
+          .map(paragraph => (
+            <Text key={paragraph} style={{ maxWidth: '600px', textAlign: 'left' }}>
+              {paragraph}
+            </Text>
+          ))
+      }
+    </div>
+
+    {
+      tags.length && (
+        <div className="tags">
+          <Title as="h3" variant="secondary">{translations.tags}</Title>
+          <Tags
+            tags={tags.sort((a, b) => a.localeCompare(b))}
+            activeTags={activeTags}
+            onSelect={onTagClick}
+            style={{ textAlign: 'center' }}
+          />
+        </div>
+      )
+    }
+
+  </Card>
+)

package/src/profile-card/ProfileCard.stories.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { ProfileCard } from './ProfileCard.jsx'
+
+export default {
+  title: 'Design System/ProfileCard',
+  component: ProfileCard,
+  parameters: {
+   layout: 'fullscreen',
+ },
+}
+
+const Story = props => {
+
+  return (
+    <ProfileCard {...props}/>
+  )
+}
+
+export const Default = Story.bind({})
+Default.args = {
+  name: 'John Doe',
+  role: 'Software Engineer',
+  image: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/rJ2RHNDMS1tSw6-Akz1D8.jpeg',
+  summary: `
+    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.
+
+    Mauris vitae dui massa. In sed dignissim elit. Nunc viverra tempus ante,
+    facilisis aliquet augue sagittis vel.
+    Morbi convallis dolor nec urna mollis, et auctor nisl bibendum.
+    Vivamus eget ornare justo. Morbi ut malesuada augue,
+    vitae luctus felis. Pellentesque egestas quam ut ante mattis,
+    ut viverra dolor sodales.
+  `,
+  tags: ['JavaScript', 'TypeScript', 'React', 'Angular'],
+  links: [
+    {
+      icon: 'Call',
+      label: '+46 072 11 11',
+    },
+    {
+      icon: 'Email',
+      label: 'john.doe@example.com',
+    },
+    {
+      icon: 'Website',
+      label: 'GitHub',
+      href: 'https://github.com'
+    }
+  ],
+  translations: {
+    tags: 'Experience with',
+  },
+}

package/src/profile-card/index.js

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

package/src/public.index.js

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

package/src/resume-experience/ResumeExperience.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { css } from 'glamor'
+import { Icon } from '../icon'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Title } from '../title'
+import { Card } from '../card'
+import { Tags } from '../tags'
+
+const styles = css({
+
+  display: 'grid',
+  flexDirection: 'column',
+  gap: 'var(--space-m)',
+  pageBreakInside: 'avoid',
+
+  '& header': {
+    display: 'flex',
+    // flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+
+  },
+
+  '@media print': {
+    boxShadow: 'none',
+    marginBottom: '8px !important'
+  }
+
+})
+
+export const ResumeExperience = ({
+  title,
+  subTitle,
+  date,
+  description,
+  website,
+  github,
+  tags = [],
+  ...props
+}) =>
+  <Card {...styles} {...props}>
+
+    <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">
+                <Icon name="Website"/>
+                Visit website
+              </Button>
+            )
+          }
+          {
+            !!github && (
+              <Button variant="link" href={github} target="_blank">
+                <Icon name="GitHub" style={{ with: '22px', height: '22px' }}/>
+                GitHub
+              </Button>
+            )
+          }
+        </div>
+      )
+    }
+
+    {
+      !!tags && !!tags.length && <Tags tags={tags}/>
+    }
+  </Card>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { ResumeExperience } from './ResumeExperience.jsx'
+
+export default {
+  title: 'Design System/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

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

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

@@ -0,0 +1,95 @@
+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

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

package/src/sections/contact/EmailContact.jsx

@@ -0,0 +1,42 @@
+import React, { useRef } from 'react'
+import { css } from 'glamor'
+import { useClipboardCopy } from '../../hooks'
+import { Title  } from '../../title'
+import { Text  } from '../../text'
+import { Button } from '../../button'
+import { Icon } from '../../icon'
+
+const styles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '150px 32px'
+})
+
+export const EmailContact = ({
+  email,
+  buttonLabel = 'Copy email to clipboard'
+}) => {
+  const [canCopy, copy] = useClipboardCopy()
+
+  return (
+    <div {...styles} >
+
+      <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.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { EmailContact } from './EmailContact.jsx'
+
+export default {
+  title: 'Design System/Sections/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

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

package/src/sections/footer/Footer.jsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react'
+import { css } from 'glamor'
+import { Title } from '../../title'
+import { Button } from '../../button'
+import { Text } from '../../text'
+
+export const Footer = ({
+  columns = [],
+  gap = 'm',
+}) => {
+
+  const styles = useMemo(() => css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: `var(--space-${gap})`,
+    padding: 'var(--space-s)',
+
+    '& .title': {
+      marginBottom: 'var(--space-m)'
+    },
+
+    '& .list': {
+      padding: '0'
+    },
+
+    '& .list-item': {
+      listStyle: 'none'
+    }
+  })
+  ,[columns])
+
+  return (
+    <div {...styles}>
+
+      {
+        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.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Footer } from './Footer.jsx'
+
+export default {
+  title: 'Design System/Sections/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

@@ -0,0 +1,82 @@
+import { Text } from '../../text'
+import { Button } from '../../button'
+import { PageSection } from '../../page-section'
+
+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.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { SimpleFooter } from './SimpleFooter.jsx'
+
+export default {
+  title: 'Design System/Sections/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'
+    }
+  ]
+}