@ossy/design-system-extras 0.1.4 → 0.1.6

package/src/stories/page.css

@@ -1,68 +0,0 @@
-.storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-size: 14px;
-  line-height: 24px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 4px;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  color: inherit;
-}
-
-.storybook-page ul {
-  margin: 1em 0;
-  padding-left: 30px;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 4px 12px;
-  color: #357a14;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
-}
-
-.storybook-page .tip-wrapper {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 3px;
-  margin-right: 4px;
-  width: 12px;
-  height: 12px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}

package/src/templates/index.js

@@ -1,3 +0,0 @@
-export * from './resume/index.js'
-export * from './theme-display/index.js'
-export * from './landing-page'

package/src/templates/landing-page/2020/Footer.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Title, Button, Text, View } from "@ossy/design-system"
-
-export const Footer = ({
-  columns = [],
-}) => {
-  return (
-    <View layout="row" placeContent="normal space-between" gap="xl" className="footer">
-
-      <style href="@ossy/design-system-extras/footer" precedence="high" >
-        {`
-          .footer {
-            padding: var(--space-s);
-          }
-
-          .footer .title {
-            margin-bottom: var(--space-m);
-          }
-
-          .footer .list {
-            padding: 0;
-          }
-
-          .footer .list-item {
-            list-style: none;
-          }
-        `}
-      </style>
-
-      {
-        columns.map(column => (
-          <div style={{ maxWidth: `var(--max-width-${column.maxWidth}, 100%)` }}>
-            <Title as="h3" variant="tertiary" className="title" style={{ color: 'var(--color-primary)'}}>
-              {column.title}
-            </Title>
-            {
-              !!column.text && <Text style={{ color: 'var(--color-primary)'}}>{column.text}</Text>
-            }
-            {
-              !!column.list && (
-                <ul className="list" key={column.title}>
-                  {
-                    column.list.map(({ label, ...anchorProps }) => (
-                      <li className="list-item" key={label}>
-                        <Button variant="link" {...anchorProps} style={{ marginBottom: 'var(--space-m)' }}>
-                          {label}
-                        </Button>
-                      </li>
-                    ))
-                  }
-                </ul>
-              )
-            }
-          </div>
-        ))
-      }
-    </View>
-  )
-}

package/src/templates/landing-page/2020/Hero.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Title, Text, Button } from "@ossy/design-system"
-
-export const Hero = ({
-  title,
-  titleMaxWidth = '800px',
-  text,
-  actions = [],
-}) => (
-  <div data-component="hero">
-
-    <style href="@ossy/design-system-extras/hero" precedence="high">
-      {`
-      [data-component="hero"] {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-        }
-
-        @media (min-width: 820px) {
-          [data-component="hero"] {
-            /* min-height: 60vh; */
-            flex: 0 0 auto;
-          }
-        }
-      `}
-    </style>
-
-    <Title
-      variant="display"
-      style={{ maxWidth: titleMaxWidth, marginBottom: 'var(--space-l)' }}
-    >
-      {title}
-    </Title>
-
-    <Text style={{ marginBottom: 'var(--space-l)' }}>
-      {text}
-    </Text>
-
-    <div style={{ display: 'flex', gap: 'var(--space-m)'}}>
-      {actions.map(({ label, ...props }) => (
-        <Button {...props} key={label}>
-          {label}
-        </Button>
-      ))}
-    </div>
-
-  </div>
-)

package/src/templates/landing-page/2020/LandingPage.jsx

@@ -1,180 +0,0 @@
-import React from 'react'
-import {
-  Title,
-  Text,
-  Image,
-  Stack,
-  Card,
-  Guide,
-  Button,
-  View
-} from "@ossy/design-system"
-import { Hero } from './Hero.jsx'
-import { Footer } from './Footer.jsx'
-
-export const LandingPage2020 = [
-
-  {
-    id: "about",
-    surface: 'decorated',
-    style: {
-      padding: 'var(--space-xxl) var(--space-m)'
-    },
-    render: ({ about, socialProof }) => (
-      <>
-        <View alignItems="stretch" justifyContent="center" style={{ marginBottom: 'var(--space-xl)'}}>
-          {
-            about.columns.map(({ name, role, imgSrc, text }) => (
-              <div key={name} style={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center'
-              }}>
-                <Image
-                  key={name}
-                  src={imgSrc}
-                  style={{
-                    borderRadius: '50%',
-                    width: '100%',
-                    maxWidth: '200px',
-                    height: 'auto',
-                    margin: '0 auto',
-                    marginBottom: 'var(--space-l)'
-                  }}
-                />
-
-                <div style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 'var(--space-s)',
-                  alignItems: 'center',
-                  marginBottom: 'var(--space-l)'
-                }}>
-                  <Title as="h1" variant="primary">{name}</Title>
-                  <Title as="h2" variant="lead">{role}</Title>
-                </div>
-
-                <Text style={{ textAlign: 'center', maxWidth: '600px', margin: '0 auto' }}>
-                  {text}
-                </Text>
-              </div>
-            ))
-          }
-        </View>
-
-        <Text variant="small" style={{ marginBottom: 'var(--space-l)', textAlign: 'center' }}>
-          {socialProof.title}
-        </Text>
-
-        <View layout="row" justifyContent="space-between" gap="m">
-
-          {
-            socialProof.columns.map(({ title, logo }) => (
-              <div key={title} style={{
-
-                textAlign: 'center'
-              }}>
-                <Card>
-                  <Image src={logo} style={{
-                    height: '20px',
-                    width: 'auto'
-                  }} />
-                </Card>
-              </div>
-            ))
-          }
-
-        </View>
-      </>
-    )
-  },
-
-  {
-    id: "hero",
-    surface: "primary",
-    style: {
-      padding: 'var(--space-xxl) var(--space-m) var(--space-xl)',
-    },
-    render: ({ hero }) => <Hero {...hero}/>
-  },
-
-  {
-    id: "services",
-    surface: "primary",
-    maxWidth: "large",
-    layout: "row",
-    placeContent: "stretch space-around",
-    gap: "xl",
-    style: {
-      borderBottom: '1px solid var(--separator-primary)',
-      padding: 'var(--space-xxl) var(--space-m)'
-    },
-    render: ({ services }) => (
-      <>
-        {
-          services.map(({ title, text }) => (
-            <div key={title} style={{ textAlign: 'center' }}>
-              <Title variant="tertiary" style={{ marginBottom: 'var(--space-m)' }}>
-                {title}
-              </Title>
-              <Text style={{ maxWidth: '600px' }}>
-                {text}
-              </Text>
-            </div>
-          ))
-        }
-      </>
-    )
-  },
-
-  {
-    id: "projects",
-    surface: "primary",
-    style: {
-      padding: 'var(--space-xxl) var(--space-m) var(--space-xl)',
-      minHeight: '60vh'
-    },
-    render: ({ projects }) => (
-      <>
-        <Guide
-          title={projects.title}
-          titleVariant="display"
-          text={projects.text}
-          style={{ textAlign: 'left', maxWidth: '600px', marginBottom: 'var(--space-xl)' }}
-        />
-        {projects.categories.map(({ title, text, links }) => (
-          <div style={{ marginBottom: 'var(--space-xl)'}}>
-            <Title title={title} variant="tertiary" style={{ marginBottom: 'var(--space-l)'}}>
-              {title}
-            </Title>
-            <Text>
-              {text}
-            </Text>
-            <Stack>
-              {
-                links.map(buttons => (
-                  <Stack horizontal style={{ marginBottom: 'var(--space-m)' }}>
-                    {
-                      buttons.map(button => <Button {...button} variant="link" target="_blank" style={{ marginRight: 'var(--space-m)'}}/>)
-                    }
-                  </Stack>
-                ))
-              }
-            </Stack>
-          </div>
-        ))}
-      </>
-    )
-  },
-
-  {
-    id: "contact",
-    surface: 'accent',
-    style: {
-      padding: 'var(--space-xxl) var(--space-m)',
-      borderBottom: '1px solid var(--separator-primary)'
-    },
-    render: ({ contact }) => <Footer columns={contact.columns} />
-  }
-
-]

package/src/templates/landing-page/2020/LandingPage.stories.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import { Page } from "@ossy/design-system"
-import { LandingPage2020 } from './LandingPage.jsx'
-
-export default {
-  title: 'Design System Extras/Templates/Landing page/2020',
-  parameters: {
-   layout: 'fullscreen',
- },
-}
-
-const Story = props => <Page {...props}/>
-
-export const Default = Story.bind({})
-Default.args = {
-  sections: LandingPage2020,
-  hero: {
-    title: 'Angular och React expertis. Design i hjärtat.',
-    text: `
-      Med expertis inom React & Angular,
-      har jag en passion för att skapa webbapplikationer som inte bara är tekniskt avancerade,
-      utan också estetiskt tilltalande.
-      När min tekniska kunskap möter min kärlek till design,
-      skapar jag lösningar som verkligen lyfter ditt företags digitala närvaro.
-    `,
-    actions: [
-      { label: 'Kontakt', href: '#contact' },
-      { label: 'Online CV', variant: 'cta', href: '/sv/resume' }
-    ]
-  },
-
-  socialProof: {
-    title: 'Litad på av',
-    columns: [
-      {
-        title: 'Mikael Schulz',
-        logo: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/HFHn21DSCu2f1Gwwzr-xh.png'
-      },
-      {
-        title: 'tepit',
-        logo: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/QdwAa6w1mBu8cC0x667Vw.png'
-      },
-      {
-        title: 'Plexus Sanitas',
-        logo: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/Of3veKFzLTxAY4qYTmBuW.png'
-      },
-      {
-        title: 'OSSY',
-        logo: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/PBFpT6d48OPG9kXzT49r7.png'
-      }
-    ]
-  },
-
-  services: [
-    {
-      title: 'Apputveckling med Angular & React',
-      text: `
-        Oavsett om du siktar på en responsiv hemsida eller komplex webbapplication,
-        kan jag med min expertis inom Angular och React leverera lösningar
-        som är kraftfulla, skalbara, användarvänliga, och estetiskt tilltalande.
-        Min erfarenhet täcker allt från initial konceptualisering till lansering och underhåll.
-      `
-    },
-    {
-      title: 'Designsystem & Komponentbibliotek',
-      text: `
-        I den digitala världen är igenkännbarhet nyckeln till en suverän användarupplevelse.
-        Jag kan hjälpa dig med att implementera och integrera designsystem som säkerställer
-        en enhetlig och igenkännbar stil över alla dina digitala gränssnitt.
-        Tillsammans bygger vi komponentbibliotek som gör det snabbt och enkelt att skapa nya sidor och funktioner,
-        samtidigt som vi behåller den höga designstandarden.
-        Låt oss tillsammans skapa digitala upplevelser som dina användare kommer att älska.
-      `
-    }
-  ],
-
-  projects: {
-    title: 'Mina projekt',
-    text:`
-      Under min karriär har jag haft förmånen att arbeta med en rad professionella projekt
-      som har bidragit till att formge min expertis inom systemutveckling.
-      Många av dessa projekt är av konfidentiell natur eller bundna av affärsavtal,
-      och kan därför inte visas offentligt här. Men utanför den professionella
-      sfären brinner jag för teknik och skapande, vilket reflekteras i de många hobbyprojekt
-      jag tar mig an på min fritid.
-      Nedan finner du ett urval av några professionella project jag kan visa
-      samt många personliga skapelser som jag gärna delar med mig av.
-    `,
-    categories: [
-      {
-        title: 'Hemsidor och designsystem',
-        links: [
-          [
-            {
-              label: 'Plexus Sanitas',
-              href: 'https://www.plexus-sanitas.com/'
-            }
-          ],
-          [
-            {
-              label: 'Mikael Shulz',
-              href: 'https://www.mikaelschulz.com/'
-            }
-          ],
-          // [
-          //   {
-          //     label: 'Tepit',
-          //     href: 'https://tepit.ossy.se'
-          //   }
-          // ],
-          [
-            {
-              label: 'Ossy',
-              href: 'https://ossy.se/'
-            }
-          ]
-        ]
-      },
-      {
-        title: 'Applicationsutveckling',
-        links: [
-          [
-            {
-              label: 'Content management system',
-              href: 'https://cms.ossy.se'
-            }
-          ],
-          [
-            {
-              label: '@ossy/cms-client-react',
-              href: 'https://www.npmjs.com/package/@ossy/cms-client-react'
-            }
-          ],
-          [
-            {
-              label: '@ossy/cli',
-              href: 'https://www.npmjs.com/package/@ossy/cli'
-            }
-          ],
-          [
-            {
-              label: '@ossy/deployment-tools',
-              href: 'https://www.npmjs.com/package/@ossy/deployment-tools'
-            }
-          ]
-        ]
-      }
-    ]
-  },
-
-  about: {
-    columns: [
-      {
-        name: 'Oskars Sylwan',
-        role: 'Systemutvecklare',
-        imgSrc: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/j9SeL8EG7f8vEiJCPPgZa.png',
-        text: `
-          Frontendutvecklare med fokus på att bygga administrativa system och dashboards i moderna JavaScript ramverk.
-          Erfarenhet finns både inom Angular och React och kommer från större bolag, myndigheter, och startups.
-          Jag är van vid att ta ansvar för frontenddelar i utvecklingsprocessen vilket inkluderar planering,
-          arkitektur, utveckling, sätta riktlinjer, lära ut, och onboarda nya utvecklare.
-        `
-      }
-    ]
-  },
-
-  contact: {
-    columns: [
-      {
-        title: 'Kontakta mig',
-        maxWidth: 's',
-        text: `
-          Jag ser fram emot att höra från dig och diskutera hur vi kan samarbeta på ditt nästa projekt.
-          Även om jag är tillgänglig för samtal mellan kl. 09:00 och 16:00 på vardagar,
-          finner många att det enklaste sättet att nå mig är genom att skicka ett meddelande på LinkedIn.
-          Tveka inte att ta kontakt!
-        `
-      },
-      {
-        list: [
-          { label: 'oskarssylwan.com', href: 'https://oskarssylwan.com/' },
-          { label: 'LinkedIn', href: 'www.linkedin.com/in/oskarssylwan' },
-          { label: 'oskars.sylwan@ossy.se', href: 'mailto:oskars.sylwan@ossy.se' },
-          { label: '+46 73 097 15 98' }
-        ]
-      }
-    ]
-  }
-
-}

package/src/templates/landing-page/2020/index.js

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

package/src/templates/landing-page/index.js

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