@ossy/design-system-extras 0.0.9 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -0
- package/package.json +12 -20
- package/rollup.config.js +1 -5
- package/build/cjs/index.js +0 -1
- package/build/esm/index.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,54 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.0.15 (2025-10-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## 0.0.14 (2025-10-27)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## 0.0.13 (2025-10-27)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## 0.0.12 (2025-10-27)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## 0.0.11 (2025-10-27)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## 0.0.10 (2025-10-25)
|
|
47
|
+
|
|
48
|
+
**Note:** Version bump only for package @ossy/design-system-extras
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
6
54
|
## 0.0.9 (2025-10-25)
|
|
7
55
|
|
|
8
56
|
**Note:** Version bump only for package @ossy/design-system-extras
|
package/package.json
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ossy/design-system-extras",
|
|
3
|
-
"repository":
|
|
3
|
+
"repository": {
|
|
4
|
+
"type": "git",
|
|
5
|
+
"url": "git+https://github.com/ossy-se/packages.git"
|
|
6
|
+
},
|
|
4
7
|
"description": "Ossy's React Design System Extra Components",
|
|
5
|
-
"version": "0.0.
|
|
8
|
+
"version": "0.0.15",
|
|
6
9
|
"source": "src/index.js",
|
|
7
10
|
"type": "module",
|
|
8
|
-
"
|
|
9
|
-
"module": "build/esm/index.js",
|
|
11
|
+
"module": "build/index.js",
|
|
10
12
|
"author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
|
|
11
|
-
"license": "MIT
|
|
13
|
+
"license": "MIT",
|
|
12
14
|
"scripts": {
|
|
13
15
|
"start": "storybook dev -p 6006",
|
|
14
16
|
"build": "rollup -c rollup.config.js",
|
|
@@ -39,10 +41,6 @@
|
|
|
39
41
|
"@babel/preset-env": "^7.21.5",
|
|
40
42
|
"@babel/preset-react": "^7.24.1",
|
|
41
43
|
"@rollup/plugin-babel": "6.0.4",
|
|
42
|
-
"@rollup/plugin-commonjs": "^25.0.5",
|
|
43
|
-
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
44
|
-
"@rollup/plugin-terser": "0.4.4",
|
|
45
|
-
"@rollup/plugin-typescript": "^11.1.5",
|
|
46
44
|
"@storybook/addon-essentials": "^8.6.12",
|
|
47
45
|
"@storybook/addon-interactions": "^8.6.12",
|
|
48
46
|
"@storybook/addon-onboarding": "^8.6.12",
|
|
@@ -50,19 +48,12 @@
|
|
|
50
48
|
"@storybook/react": "^8.6.12",
|
|
51
49
|
"@storybook/react-vite": "^8.6.12",
|
|
52
50
|
"@storybook/test": "^8.6.12",
|
|
53
|
-
"@types/react": "18.2.79",
|
|
54
51
|
"babel-loader": "^9.1.3",
|
|
55
52
|
"prop-types": "^15.8.1",
|
|
56
|
-
"
|
|
57
|
-
"rollup-plugin-dts": "^6.1.0",
|
|
58
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
59
|
-
"rollup-plugin-postcss-modules": "^2.1.1",
|
|
60
|
-
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
61
|
-
"storybook": "^8.6.12",
|
|
62
|
-
"tslib": "^2.6.2"
|
|
53
|
+
"storybook": "^8.6.12"
|
|
63
54
|
},
|
|
64
55
|
"dependencies": {
|
|
65
|
-
"@ossy/themes": "^0.0.
|
|
56
|
+
"@ossy/themes": "^0.0.15",
|
|
66
57
|
"moment": "^2.29.4"
|
|
67
58
|
},
|
|
68
59
|
"peerDependencies": {
|
|
@@ -73,7 +64,8 @@
|
|
|
73
64
|
"react-syntax-highlighter": "^5.8.0"
|
|
74
65
|
},
|
|
75
66
|
"publishConfig": {
|
|
76
|
-
"access": "public"
|
|
67
|
+
"access": "public",
|
|
68
|
+
"registry": "https://registry.npmjs.org"
|
|
77
69
|
},
|
|
78
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "7fb7d504578d7c75c110ff7a14a7fd53acc89f0a"
|
|
79
71
|
}
|
package/rollup.config.js
CHANGED
package/build/cjs/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("react-markdown"),a=require("react-syntax-highlighter"),n=require("@ossy/design-system");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r.apply(null,arguments)}var o={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#383a42",background:"#fafafa"},"hljs-comment":{color:"#a0a1a7",fontStyle:"italic"},"hljs-quote":{color:"#a0a1a7",fontStyle:"italic"},"hljs-doctag":{color:"#a626a4"},"hljs-keyword":{color:"#a626a4"},"hljs-formula":{color:"#a626a4"},"hljs-section":{color:"#e45649"},"hljs-name":{color:"#e45649"},"hljs-selector-tag":{color:"#e45649"},"hljs-deletion":{color:"#e45649"},"hljs-subst":{color:"#e45649"},"hljs-literal":{color:"#0184bb"},"hljs-string":{color:"#50a14f"},"hljs-regexp":{color:"#50a14f"},"hljs-addition":{color:"#50a14f"},"hljs-attribute":{color:"#50a14f"},"hljs-meta-string":{color:"#50a14f"},"hljs-built_in":{color:"#c18401"},"hljs-class .hljs-title":{color:"#c18401"},"hljs-attr":{color:"#986801"},"hljs-variable":{color:"#986801"},"hljs-template-variable":{color:"#986801"},"hljs-type":{color:"#986801"},"hljs-selector-class":{color:"#986801"},"hljs-selector-attr":{color:"#986801"},"hljs-selector-pseudo":{color:"#986801"},"hljs-number":{color:"#986801"},"hljs-symbol":{color:"#4078f2"},"hljs-bullet":{color:"#4078f2"},"hljs-link":{color:"#4078f2",textDecoration:"underline"},"hljs-meta":{color:"#4078f2"},"hljs-selector-id":{color:"#4078f2"},"hljs-title":{color:"#4078f2"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}};const l={h1:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h1",variant:"primary"},a,{style:{marginBottom:"var(--space-l)"}})),h2:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h2",variant:"secondary"},a,{style:{marginBottom:"var(--space-m)",marginTop:"var(--space-l)"}})),h3:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h3",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h4:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h4",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h5:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h5",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),p:({node:t,...a})=>e.createElement(n.Text,r({},a,{style:{marginBottom:"var(--space-m)"}})),ul:({node:t,...a})=>e.createElement("ul",r({},a,{style:{listStyle:"inside",paddingLeft:"var(--space-l)"}})),li:({node:t,...a})=>e.createElement(n.Text,r({as:"li"},a,{style:{marginBottom:"var(--space-m)"}})),a:({node:t,...a})=>e.createElement(n.Button,r({as:a.href?"a":"button"},a,{variant:"link"})),code:({node:t,className:l,...s})=>{const[i,c]=/language-(\w+)/.exec(l||"")||[];return!c?e.createElement(n.View,r({inset:"xs",surface:"secondary",roundness:"s",style:{display:"inline-block"}},s),e.createElement(a,r({style:{display:"inline",...o,hljs:{display:"inline",color:"#383a42",background:"transparent"}},language:c},s))):e.createElement(n.View,{inset:"m",surface:"secondary",roundness:"m","data-component":"MarkdownViewer"},e.createElement("style",{href:"@ossy/design-system-extras/markdown-viewer/MarkdownViewer",precedence:"high"},'\n [data-component="MarkdownViewer"] {\n margin: var(--space-s) 0;\n }\n\n [data-component="MarkdownViewer"] pre {\n margin: 0;\n }\n '),e.createElement(a,r({style:{...o,hljs:{display:"block",overflowX:"auto",color:"#383a42",background:"transparent"}},language:c},s)))}};function s(e){return e?e.toLowerCase().replace(/\s+/g,"-"):""}const i=({columns:t=[]})=>e.createElement(n.View,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(n.Title,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(n.Text,null,t.text),!!t.list&&e.createElement("ul",{key:t.title,style:{padding:"0"}},t.list.map(({label:t,...a})=>e.createElement("li",{key:t,style:{listStyle:"none"}},e.createElement(n.Button,r({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),c=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]||"1900",n=new Date(a(e));return new Date(a(t))-n},m=(t=[])=>{t.sort(c);const[a,n]=e.useState([]),[r,o]=e.useState([]),[l,s]=e.useState([]),[i,m]=e.useState([]),[d,p]=e.useState([]),[u,g]=e.useState();Object.keys(t.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,t)=>({[t]:"",...e}),{}));const y=Object.keys(t.reduce((e,t)=>({[t.typeOfExperience]:"",...e}),{}));e.useEffect(()=>{let e=t;d.length&&(e=t.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>d.map(e=>e.toLowerCase()).includes(e)))),u&&(e=e.filter(e=>e.typeOfExperience===u));const a=(e=>e.reduce((e,t)=>(e[t.typeOfExperience||"Other"].push(t),e),{Work:[],Education:[],Project:[],Other:[]}))(e);n(a.Work),o(a.Education),s(a.Project),m(a.Other)},[d,t,u]);return{work:a,education:r,project:l,other:i,tags:[],categories:y,activeTags:d,toggleActiveTag:e=>{p(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:u,toggleActiveExperienceType:e=>{e!==u&&g("All"===e?void 0:e)}}},d=({title:t,titleVariant:a="secondary",titleAs:o="h2",text:l,children:s,maxWidth:i="l",...c})=>e.createElement(n.PageSection,r({maxWidth:i},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(n.Title,{as:o,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(n.Text,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},l),s),p=({title:t,titleMaxWidth:a="800px",text:o,actions:l=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/design-system-extras/hero",precedence:"high"},'\n [data-component="hero"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n\n @media (min-width: 820px) {\n [data-component="hero"] {\n /* min-height: 60vh; */\n flex: 0 0 auto;\n }\n }\n '),e.createElement(n.Title,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(n.Text,{style:{marginBottom:"var(--space-l)"}},o),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},l.map(({label:t,...a})=>e.createElement(n.Button,r({},a,{key:t}),t)))),u=({columns:t=[]})=>e.createElement(n.View,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/design-system-extras/footer",precedence:"high"},"\n .footer {\n padding: var(--space-s);\n }\n\n .footer .title {\n margin-bottom: var(--space-m);\n }\n\n .footer .list {\n padding: 0;\n }\n\n .footer .list-item {\n list-style: none;\n }\n "),t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(n.Title,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(n.Text,{style:{color:"var(--color-primary)"}},t.text),!!t.list&&e.createElement("ul",{className:"list",key:t.title},t.list.map(({label:t,...a})=>e.createElement("li",{className:"list-item",key:t},e.createElement(n.Button,r({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),g=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(n.View,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:r,text:o})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(n.Image,{key:t,src:r,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(n.Title,{as:"h1",variant:"primary"},t),e.createElement(n.Title,{as:"h2",variant:"lead"},a)),e.createElement(n.Text,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},o)))),e.createElement(n.Text,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(n.View,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(n.Card,null,e.createElement(n.Image,{src:a,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:t})=>e.createElement(p,t)},{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:t})=>e.createElement(e.Fragment,null,t.map(({title:t,text:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(n.Text,{style:{maxWidth:"600px"}},a))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:t})=>e.createElement(e.Fragment,null,e.createElement(n.Guide,{title:t.title,titleVariant:"display",text:t.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),t.categories.map(({title:t,text:a,links:o})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(n.Title,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(n.Text,null,a),e.createElement(n.Stack,null,o.map(t=>e.createElement(n.Stack,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(n.Button,r({},t,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:t})=>e.createElement(u,{columns:t.columns})}];exports.CardLayout=({surface:t="primary",maxWidth:a="full",layout:r="off-center",cardVariant:o,cardSurface:l,header:s,children:i,content:c})=>e.createElement(n.PageSection,{surface:t,maxWidth:a},e.createElement(n.View,{layout:r,style:{height:"100vh"}},s,e.createElement(n.Card,{slot:"content",variant:o,style:{overflowY:"auto"},surface:l},c??i))),exports.CardSidebar=({surface:t="primary",layout:a="off-center-m",navigation:o=[],cardVariant:l,cardSurface:s,header:i,children:c,content:m,...d})=>e.createElement(n.PageSection,r({layout:a,surface:t},d),i,e.createElement(n.Card,{variant:l,surface:s,slot:"content",style:{display:"flex",flexDirection:"row",padding:"0"}},e.createElement("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)"}},o.map(t=>e.createElement(n.Button,r({},t,{style:{justifyContent:"flex-start"}})))),e.createElement("div",{style:{flexGrow:"1",padding:"var(--space-l)",overflowY:"auto"}},m??c))),exports.CardTabs=({surface:t="primary",layout:a="off-center",cardVariant:o="decorated",tabs:l=[],content:s,children:i,...c})=>e.createElement(n.PageSection,r({layout:a,surface:t},c),e.createElement(n.View,{style:{height:"100%",background:"var(--surface-linear-gradient)"}},e.createElement(n.Card,{variant:o,slot:"content",style:{width:"100vw",padding:"0"}},e.createElement(n.Tabs,{tabs:l,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement("div",{style:{padding:"var(--space-m)"}},s||i)))),exports.LandingPage2020=g,exports.MarkdownViewer=({markdown:a,children:n,components:o={},...s})=>e.createElement(t,r({children:a||n,components:{...l,...o}},s)),exports.Resume=({status:t,profile:a,experiences:o,translations:l,profileCardProps:s={},actions:i=[]})=>{const{work:c,education:d,project:p,other:u,tags:g,categories:y,activeTags:x,toggleActiveTag:v,activeExperienceType:h,toggleActiveExperienceType:f}=m(o),E=[{id:"All",label:l.all},{id:"Work",label:l.work},{id:"Project",label:l.projects},{id:"Education",label:l.education},{id:"Other",label:l.other}].filter(e=>"All"===e.id?e:y.includes(e.id)),w=[{title:l.work,experiences:c},{title:l.projects,experiences:p},{title:l.education,experiences:d},{title:l.other,experiences:u}];return e.createElement("div",{"data-component":"@design-system-extras/resume","data-status":t},e.createElement("style",{href:"@design-system-extras/resume",precedence:"high"},'\n [data-component="@design-system-extras/resume"] {\n\n --padding: var(--resume-padding, 0);\n --background: var(--resume-background, transparent);\n --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n --header-justify-content: var(--resume-header-justify-content, center);\n --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n --content-background: var(--resume-content-background, transparent);\n\n background: var(--background);\n padding: var(--padding);\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: fit-content fit-content fit-content;\n grid-template-areas:\n "profile-summary"\n "actions"\n "content";\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n min-width: 0;\n box-sizing: border-box;\n grid-area: actions;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--header-padding);\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@design-system-extras/resume"] .secondary-actions {\n display: none;\n gap: var(--space-s);\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {\n grid-area: profile-summary;\n z-index: 1;\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="content"] {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n grid-area: content;\n padding: var(--space-l) var(--space-m);\n margin: var(--content-margin);\n gap: var(--space-xl);\n background: var(--content-background);\n }\n\n [data-component="@design-system-extras/resume"] [data-animation="fade-in"] {\n opacity: 0;\n transition-property: opacity, transform;\n transition-duration: 1s, 1s;\n transition-timing-function: ease-in-out;\n transform: translateZ(0);\n }\n\n [data-component="@design-system-extras/resume"] [data-scroll] {\n scrollbar-width: none;\n overflow-y: auto;\n }\n\n [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {\n opacity: 1;\n }\n\n [data-component="@design-system-extras/resume"] .content-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n width: 100%;\n max-width: 700px;\n }\n\n @media (min-width: 1200px) {\n [data-component="@design-system-extras/resume"] {\n height: 100vh;\n grid-template-columns: 400px 1fr;\n grid-template-rows: min-content 1fr;\n grid-template-areas:\n "profile-summary actions"\n "profile-summary content";\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n justify-content: space-between;\n }\n\n [data-component="@design-system-extras/resume"] .secondary-actions {\n display: flex;\n }\n }\n\n @media (min-width: 1900px) {\n [data-component="@design-system-extras/resume"] [data-slot="content"] {\n grid-column-start: profile-summary;\n grid-column-end: content;\n grid-row-start: content;\n grid-row-end: content;\n }\n }\n '),e.createElement(n.ProfileCard,r({"data-scroll":!0,"data-slot":"profile-summary",activeTags:x,onTagClick:v,translations:l,surface:"primary"},s,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(n.Tabs,{tabs:E,activeTabId:h||"All",onTabClick:(e,t)=>f(t.id),style:{borderBottom:g.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},i.map(({label:t,contextMenu:a,...r})=>a?e.createElement(n.Dropdown,{trigger:e.createElement(n.Button,r,t)},e.createElement(n.ContextMenu,null,a.map(t=>e.createElement(n.ContextMenu.Item,t,t.label)))):e.createElement(n.Button,r,t))),!!g.length&&e.createElement(n.Tags,{tags:g,activeTags:x,onSelect:v,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},w.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(n.Title,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(n.ResumeExperience,{key:t.id||t.title,title:t.title,subTitle:t.subTitle,date:t.date,description:t.description,website:t.website,github:t.github,tags:t.tags})))))))},exports.StandardLayout=({logo:t,headerActions:a,headerAccentBorder:o=!0,navigation:l,maxWidth:s="medium",copyright:c,footer:m,children:d,...p})=>{const u=[o&&{id:"accent-border",style:{height:"4px",position:"sticky",zIndex:"10",top:"0",background:"var(--separator-accent)"}},(t||a)&&{id:"header",surface:"primary",style:{padding:"var(--space-s) var(--space-l)",width:"100%"},render:()=>e.createElement(n.Header,{logo:t,actions:a})},l&&{id:"navigation",surface:"primary",style:{height:"55px",position:"sticky",top:"4px",width:"100%",zIndex:"10"},render:()=>e.createElement(n.Tabs,{tabs:l,style:{height:"100%"}})},{id:"outlet",as:"main",maxWidth:"full",style:{gridArea:"content"},render:()=>d},m&&{id:"footer",surface:m.surface,as:"footer",style:{padding:"var(--space-xl) var(--space-m)"},render:()=>e.createElement(i,{columns:m.columns})},c&&{id:"footer-section-copyright",surface:"alt-secondary",style:{padding:"var(--space-m)",textAlign:"center"},render:()=>e.createElement(n.Text,{variant:"small"},c)}].filter(e=>!!e);return e.createElement(n.Page,r({maxWidth:s,sections:u},p))},exports.ThemeDisplay=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(d,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "}),e.createElement(d,{title:"Colors",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{layout:"row-wrap",gap:"xl"},Object.entries(t.color).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:t,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${t})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Spacing",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{layout:"row",gap:"xl"},Object.entries(t.space).map(([t,a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:a,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(n.Text,null,t," - ",a))))),e.createElement(d,{title:"Content sizes (max width)",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(n.View,{layout:"row",gap:"l"},e.createElement(n.Text,{style:{flexBasis:"90px"}},t," - ",a),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${t}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(d,{title:"Surfaces",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{layout:"row-wrap",gap:"xl"},Object.entries(t.surface).map(([t,a])=>e.createElement("div",{style:{background:`var(--surface-${t})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Separators",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{layout:"row",gap:"xl"},Object.entries(t.separator).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:t,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${t})`}}),e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Typography",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(n.View,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(t.title).filter(([e])=>"default"!==e).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(n.Title,{variant:t},t)))),e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(n.View,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(t.text).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(n.Text,{variant:t},t))))),e.createElement(d,{title:"Buttons",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n.View,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(t.button).map(([t])=>e.createElement(n.Button,{variant:t,style:{flexGrow:"0",flexShrink:"0"}},t))))),exports.useResume=m;
|
package/build/esm/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import e,{useState as t,useEffect as a}from"react";import n from"react-markdown";import r from"react-syntax-highlighter";import{View as o,Button as l,Text as s,Title as i,Header as c,Tabs as m,Page as d,PageSection as p,Card as y,ProfileCard as g,Dropdown as u,ContextMenu as v,Tags as h,ResumeExperience as x,Image as f,Guide as E,Stack as b}from"@ossy/design-system";function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},w.apply(null,arguments)}var j={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#383a42",background:"#fafafa"},"hljs-comment":{color:"#a0a1a7",fontStyle:"italic"},"hljs-quote":{color:"#a0a1a7",fontStyle:"italic"},"hljs-doctag":{color:"#a626a4"},"hljs-keyword":{color:"#a626a4"},"hljs-formula":{color:"#a626a4"},"hljs-section":{color:"#e45649"},"hljs-name":{color:"#e45649"},"hljs-selector-tag":{color:"#e45649"},"hljs-deletion":{color:"#e45649"},"hljs-subst":{color:"#e45649"},"hljs-literal":{color:"#0184bb"},"hljs-string":{color:"#50a14f"},"hljs-regexp":{color:"#50a14f"},"hljs-addition":{color:"#50a14f"},"hljs-attribute":{color:"#50a14f"},"hljs-meta-string":{color:"#50a14f"},"hljs-built_in":{color:"#c18401"},"hljs-class .hljs-title":{color:"#c18401"},"hljs-attr":{color:"#986801"},"hljs-variable":{color:"#986801"},"hljs-template-variable":{color:"#986801"},"hljs-type":{color:"#986801"},"hljs-selector-class":{color:"#986801"},"hljs-selector-attr":{color:"#986801"},"hljs-selector-pseudo":{color:"#986801"},"hljs-number":{color:"#986801"},"hljs-symbol":{color:"#4078f2"},"hljs-bullet":{color:"#4078f2"},"hljs-link":{color:"#4078f2",textDecoration:"underline"},"hljs-meta":{color:"#4078f2"},"hljs-selector-id":{color:"#4078f2"},"hljs-title":{color:"#4078f2"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}};const k={h1:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h1",variant:"primary"},a,{style:{marginBottom:"var(--space-l)"}})),h2:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h2",variant:"secondary"},a,{style:{marginBottom:"var(--space-m)",marginTop:"var(--space-l)"}})),h3:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h3",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h4:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h4",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h5:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h5",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),p:({node:t,...a})=>e.createElement(s,w({},a,{style:{marginBottom:"var(--space-m)"}})),ul:({node:t,...a})=>e.createElement("ul",w({},a,{style:{listStyle:"inside",paddingLeft:"var(--space-l)"}})),li:({node:t,...a})=>e.createElement(s,w({as:"li"},a,{style:{marginBottom:"var(--space-m)"}})),a:({node:t,...a})=>e.createElement(l,w({as:a.href?"a":"button"},a,{variant:"link"})),code:({node:t,className:a,...n})=>{const[l,s]=/language-(\w+)/.exec(a||"")||[];return!s?e.createElement(o,w({inset:"xs",surface:"secondary",roundness:"s",style:{display:"inline-block"}},n),e.createElement(r,w({style:{display:"inline",...j,hljs:{display:"inline",color:"#383a42",background:"transparent"}},language:s},n))):e.createElement(o,{inset:"m",surface:"secondary",roundness:"m","data-component":"MarkdownViewer"},e.createElement("style",{href:"@ossy/design-system-extras/markdown-viewer/MarkdownViewer",precedence:"high"},'\n [data-component="MarkdownViewer"] {\n margin: var(--space-s) 0;\n }\n\n [data-component="MarkdownViewer"] pre {\n margin: 0;\n }\n '),e.createElement(r,w({style:{...j,hljs:{display:"block",overflowX:"auto",color:"#383a42",background:"transparent"}},language:s},n)))}};function B(e){return e?e.toLowerCase().replace(/\s+/g,"-"):""}const W=({markdown:t,children:a,components:r={},...o})=>e.createElement(n,w({children:t||a,components:{...k,...r}},o)),C=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(i,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(s,null,t.text),!!t.list&&e.createElement("ul",{key:t.title,style:{padding:"0"}},t.list.map(({label:t,...a})=>e.createElement("li",{key:t,style:{listStyle:"none"}},e.createElement(l,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),S=({logo:t,headerActions:a,headerAccentBorder:n=!0,navigation:r,maxWidth:o="medium",copyright:l,footer:i,children:p,...y})=>{const g=[n&&{id:"accent-border",style:{height:"4px",position:"sticky",zIndex:"10",top:"0",background:"var(--separator-accent)"}},(t||a)&&{id:"header",surface:"primary",style:{padding:"var(--space-s) var(--space-l)",width:"100%"},render:()=>e.createElement(c,{logo:t,actions:a})},r&&{id:"navigation",surface:"primary",style:{height:"55px",position:"sticky",top:"4px",width:"100%",zIndex:"10"},render:()=>e.createElement(m,{tabs:r,style:{height:"100%"}})},{id:"outlet",as:"main",maxWidth:"full",style:{gridArea:"content"},render:()=>p},i&&{id:"footer",surface:i.surface,as:"footer",style:{padding:"var(--space-xl) var(--space-m)"},render:()=>e.createElement(C,{columns:i.columns})},l&&{id:"footer-section-copyright",surface:"alt-secondary",style:{padding:"var(--space-m)",textAlign:"center"},render:()=>e.createElement(s,{variant:"small"},l)}].filter(e=>!!e);return e.createElement(d,w({maxWidth:o,sections:g},y))},A=({surface:t="primary",maxWidth:a="full",layout:n="off-center",cardVariant:r,cardSurface:l,header:s,children:i,content:c})=>e.createElement(p,{surface:t,maxWidth:a},e.createElement(o,{layout:n,style:{height:"100vh"}},s,e.createElement(y,{slot:"content",variant:r,style:{overflowY:"auto"},surface:l},c??i))),O=({surface:t="primary",layout:a="off-center-m",navigation:n=[],cardVariant:r,cardSurface:o,header:s,children:i,content:c,...m})=>e.createElement(p,w({layout:a,surface:t},m),s,e.createElement(y,{variant:r,surface:o,slot:"content",style:{display:"flex",flexDirection:"row",padding:"0"}},e.createElement("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)"}},n.map(t=>e.createElement(l,w({},t,{style:{justifyContent:"flex-start"}})))),e.createElement("div",{style:{flexGrow:"1",padding:"var(--space-l)",overflowY:"auto"}},c??i))),T=({surface:t="primary",layout:a="off-center",cardVariant:n="decorated",tabs:r=[],content:l,children:s,...i})=>e.createElement(p,w({layout:a,surface:t},i),e.createElement(o,{style:{height:"100%",background:"var(--surface-linear-gradient)"}},e.createElement(y,{variant:n,slot:"content",style:{width:"100vw",padding:"0"}},e.createElement(m,{tabs:r,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement("div",{style:{padding:"var(--space-m)"}},l||s)))),I=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]||"1900",n=new Date(a(e));return new Date(a(t))-n},D=(e=[])=>{e.sort(I);const[n,r]=t([]),[o,l]=t([]),[s,i]=t([]),[c,m]=t([]),[d,p]=t([]),[y,g]=t();Object.keys(e.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,t)=>({[t]:"",...e}),{}));const u=Object.keys(e.reduce((e,t)=>({[t.typeOfExperience]:"",...e}),{}));a(()=>{let t=e;d.length&&(t=e.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>d.map(e=>e.toLowerCase()).includes(e)))),y&&(t=t.filter(e=>e.typeOfExperience===y));const a=(e=>e.reduce((e,t)=>(e[t.typeOfExperience||"Other"].push(t),e),{Work:[],Education:[],Project:[],Other:[]}))(t);r(a.Work),l(a.Education),i(a.Project),m(a.Other)},[d,e,y]);return{work:n,education:o,project:s,other:c,tags:[],categories:u,activeTags:d,toggleActiveTag:e=>{p(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:y,toggleActiveExperienceType:e=>{e!==y&&g("All"===e?void 0:e)}}},V=({status:t,profile:a,experiences:n,translations:r,profileCardProps:o={},actions:s=[]})=>{const{work:c,education:d,project:p,other:y,tags:f,categories:E,activeTags:b,toggleActiveTag:j,activeExperienceType:k,toggleActiveExperienceType:B}=D(n),W=[{id:"All",label:r.all},{id:"Work",label:r.work},{id:"Project",label:r.projects},{id:"Education",label:r.education},{id:"Other",label:r.other}].filter(e=>"All"===e.id?e:E.includes(e.id)),C=[{title:r.work,experiences:c},{title:r.projects,experiences:p},{title:r.education,experiences:d},{title:r.other,experiences:y}];return e.createElement("div",{"data-component":"@design-system-extras/resume","data-status":t},e.createElement("style",{href:"@design-system-extras/resume",precedence:"high"},'\n [data-component="@design-system-extras/resume"] {\n\n --padding: var(--resume-padding, 0);\n --background: var(--resume-background, transparent);\n --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n --header-justify-content: var(--resume-header-justify-content, center);\n --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n --content-background: var(--resume-content-background, transparent);\n\n background: var(--background);\n padding: var(--padding);\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: fit-content fit-content fit-content;\n grid-template-areas:\n "profile-summary"\n "actions"\n "content";\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n min-width: 0;\n box-sizing: border-box;\n grid-area: actions;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--header-padding);\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@design-system-extras/resume"] .secondary-actions {\n display: none;\n gap: var(--space-s);\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {\n grid-area: profile-summary;\n z-index: 1;\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="content"] {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n grid-area: content;\n padding: var(--space-l) var(--space-m);\n margin: var(--content-margin);\n gap: var(--space-xl);\n background: var(--content-background);\n }\n\n [data-component="@design-system-extras/resume"] [data-animation="fade-in"] {\n opacity: 0;\n transition-property: opacity, transform;\n transition-duration: 1s, 1s;\n transition-timing-function: ease-in-out;\n transform: translateZ(0);\n }\n\n [data-component="@design-system-extras/resume"] [data-scroll] {\n scrollbar-width: none;\n overflow-y: auto;\n }\n\n [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {\n opacity: 1;\n }\n\n [data-component="@design-system-extras/resume"] .content-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n width: 100%;\n max-width: 700px;\n }\n\n @media (min-width: 1200px) {\n [data-component="@design-system-extras/resume"] {\n height: 100vh;\n grid-template-columns: 400px 1fr;\n grid-template-rows: min-content 1fr;\n grid-template-areas:\n "profile-summary actions"\n "profile-summary content";\n }\n\n [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n justify-content: space-between;\n }\n\n [data-component="@design-system-extras/resume"] .secondary-actions {\n display: flex;\n }\n }\n\n @media (min-width: 1900px) {\n [data-component="@design-system-extras/resume"] [data-slot="content"] {\n grid-column-start: profile-summary;\n grid-column-end: content;\n grid-row-start: content;\n grid-row-end: content;\n }\n }\n '),e.createElement(g,w({"data-scroll":!0,"data-slot":"profile-summary",activeTags:b,onTagClick:j,translations:r,surface:"primary"},o,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(m,{tabs:W,activeTabId:k||"All",onTabClick:(e,t)=>B(t.id),style:{borderBottom:f.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},s.map(({label:t,contextMenu:a,...n})=>a?e.createElement(u,{trigger:e.createElement(l,n,t)},e.createElement(v,null,a.map(t=>e.createElement(v.Item,t,t.label)))):e.createElement(l,n,t))),!!f.length&&e.createElement(h,{tags:f,activeTags:b,onSelect:j,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},C.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(i,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(x,{key:t.id||t.title,title:t.title,subTitle:t.subTitle,date:t.date,description:t.description,website:t.website,github:t.github,tags:t.tags})))))))},H=({title:t,titleVariant:a="secondary",titleAs:n="h2",text:r,children:o,maxWidth:l="l",...c})=>e.createElement(p,w({maxWidth:l},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(i,{as:n,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},r),o),N=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(H,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "}),e.createElement(H,{title:"Colors",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{layout:"row-wrap",gap:"xl"},Object.entries(t.color).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:t,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${t})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(s,null,t))))),e.createElement(H,{title:"Spacing",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{layout:"row",gap:"xl"},Object.entries(t.space).map(([t,a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:a,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(s,null,t," - ",a))))),e.createElement(H,{title:"Content sizes (max width)",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(o,{layout:"row",gap:"l"},e.createElement(s,{style:{flexBasis:"90px"}},t," - ",a),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${t}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(H,{title:"Surfaces",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{layout:"row-wrap",gap:"xl"},Object.entries(t.surface).map(([t,a])=>e.createElement("div",{style:{background:`var(--surface-${t})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,null,t))))),e.createElement(H,{title:"Separators",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{layout:"row",gap:"xl"},Object.entries(t.separator).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:t,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${t})`}}),e.createElement(s,null,t))))),e.createElement(H,{title:"Typography",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(o,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(t.title).filter(([e])=>"default"!==e).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(i,{variant:t},t)))),e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(o,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(t.text).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,{variant:t},t))))),e.createElement(H,{title:"Buttons",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(o,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(t.button).map(([t])=>e.createElement(l,{variant:t,style:{flexGrow:"0",flexShrink:"0"}},t))))),R=({title:t,titleMaxWidth:a="800px",text:n,actions:r=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/design-system-extras/hero",precedence:"high"},'\n [data-component="hero"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n\n @media (min-width: 820px) {\n [data-component="hero"] {\n /* min-height: 60vh; */\n flex: 0 0 auto;\n }\n }\n '),e.createElement(i,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(s,{style:{marginBottom:"var(--space-l)"}},n),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},r.map(({label:t,...a})=>e.createElement(l,w({},a,{key:t}),t)))),K=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/design-system-extras/footer",precedence:"high"},"\n .footer {\n padding: var(--space-s);\n }\n\n .footer .title {\n margin-bottom: var(--space-m);\n }\n\n .footer .list {\n padding: 0;\n }\n\n .footer .list-item {\n list-style: none;\n }\n "),t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(i,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(s,{style:{color:"var(--color-primary)"}},t.text),!!t.list&&e.createElement("ul",{className:"list",key:t.title},t.list.map(({label:t,...a})=>e.createElement("li",{className:"list-item",key:t},e.createElement(l,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),M=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(o,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:n,text:r})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(f,{key:t,src:n,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(i,{as:"h1",variant:"primary"},t),e.createElement(i,{as:"h2",variant:"lead"},a)),e.createElement(s,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},r)))),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(o,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(y,null,e.createElement(f,{src:a,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:t})=>e.createElement(R,t)},{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:t})=>e.createElement(e.Fragment,null,t.map(({title:t,text:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{style:{maxWidth:"600px"}},a))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:t})=>e.createElement(e.Fragment,null,e.createElement(E,{title:t.title,titleVariant:"display",text:t.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),t.categories.map(({title:t,text:a,links:n})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(i,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(s,null,a),e.createElement(b,null,n.map(t=>e.createElement(b,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(l,w({},t,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:t})=>e.createElement(K,{columns:t.columns})}];export{A as CardLayout,O as CardSidebar,T as CardTabs,M as LandingPage2020,W as MarkdownViewer,V as Resume,S as StandardLayout,N as ThemeDisplay,D as useResume};
|